/* =========================================================
   SGIT - ULTIMATE CORPORATE DARK AZURE THEME
   Consolidated Fixes for osTicket SCP
   ========================================================= */

:root {
    --sgit-blue: #3b82f6;
    --sgit-blue2: #60a5fa;
    --sgit-cyan: #22d3ee;
    --sgit-text: #1e5092;
    --sgit-muted: #a7b0c0;
    --sgit-bg-base: #071225;
    --sgit-bg-panel: #0f172a;
    --sgit-bg-darker: #020617;
    --sgit-border: #1e293b;
}

/* --- 0. GLOBAL DARK SURFACES --- */
body, html, #container, #content, #main {
    background: var(--sgit-bg-base) !important;
    color: var(--sgit-text) !important;
}

/* --- 1. PRIMARY BUTTONS (Azure Blue Gradient) --- */
input[type="submit"], 
.primary.button, 
#post-reply-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 1px solid #1e40af !important;
    color: #ffffff !important;
    border-radius: 999px !important; /* Capsule Style */
    padding: 10px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    transition: all 0.2s ease-in-out !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

input[type="submit"]:hover,
.primary.button:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45) !important;
}

/* --- 2. SECONDARY & ACTION BUTTONS (Dark Slate Pills) --- */
input[type="reset"], 
input[type="button"], 
button, 
.button, 
.btn, 
.action-button {
    background: var(--sgit-border) !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

input[type="reset"]:hover, 
.action-button:hover,
.button:not(.primary):hover {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

/* Danger Button (Delete) */
.action-button.danger, .button.danger, a:has(i.icon-trash) {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
}
.action-button.danger:hover, .button.danger:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* --- 3. MAIN NAVIGATION (#nav) ACTIVE TAB FIX --- */
#nav {
    position: relative !important;
    z-index: 100 !important;
    display: block !important;
    padding: 15px 20px 0 20px !important;
    background: transparent !important;
    border: none !important;
}

#nav li {
    background: transparent !important;
    border: none !important;
    display: inline-block !important;
    vertical-align: bottom !important;
}

#nav li > a {
    display: inline-block !important;
    color: #94a3b8 !important;
    padding: 12px 24px !important;
    border-radius: 12px 12px 0 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#nav li.active > a, #nav a.active {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 -4px 10px rgba(37, 99, 235, 0.2) !important;
}

/* Sub-nav alignment & spacing */
#sub_nav {
    padding: 25px 0 15px 42px !important; /* Alignment with Dashboard text */
    background: #051221 !important;
    border-bottom: 1px solid #1e3a8a !important;
    margin-top: 10px !important;
}

/* --- 4. TICKET TABS & THREAD TABS (Azure Blue Buttons) --- */
#ticket_tabs, ul.tabs, ul.tabs.clean, ul.tabs.clean.threads {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}

ul.tabs li, ul.tabs.clean li, ul.tabs.clean.threads li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

ul.tabs li a, ul.tabs.clean.threads li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(59,130,246,.18) !important;
    border: 1px solid rgba(59,130,246,.40) !important;
    color: var(--sgit-text) !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
    transition: transform .08s ease, background .12s ease, border-color .12s ease !important;
}

ul.tabs li a:hover, ul.tabs.clean.threads li a:hover {
    background: rgba(59,130,246,.26) !important;
    border-color: rgba(34,211,238,.40) !important;
    transform: translateY(-1px) !important;
}

ul.tabs li.active a, ul.tabs.clean.threads li.active a {
    background: linear-gradient(90deg, rgba(59,130,246,.55), rgba(34,211,238,.22)) !important;
    border-color: rgba(96,165,250,.70) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
    color: #ffffff !important;
}

ul.tabs li:not(.active) a, ul.tabs.clean.threads li:not(.active) a {
    color: rgba(229,231,235,.92) !important;
}

/* --- 5. REDACTOR EDITOR (Dark Fix) --- */
.redactor-box {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--sgit-border) !important;
}

.redactor-toolbar {
    background: var(--sgit-bg-panel) !important;
    border-bottom: 1px solid var(--sgit-border) !important;
    padding: 10px !important;
    gap: 4px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.redactor-toolbar li a, .redactor-toolbar a {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--sgit-text) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
}

.redactor-toolbar li a:hover, .redactor-toolbar a:hover {
    background: var(--sgit-border) !important;
    border-color: #334155 !important;
}

/* --- 6. THREAD BODY & EMAILS (Conflict Free Dark Theme) --- */
.thread-body {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55;
    color: var(--sgit-text) !important;
    background-color: var(--sgit-bg-panel) !important;
    margin: 0;
    padding: 1.2em;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    border-radius: 8px;
}

.thread-body h1 small, .thread-body h2 small, .thread-body .h1 small {
    color: #cbd5e1 !important;
}

/* Paragraphs & Lists */
.thread-body p, .thread-body li {
    color: var(--sgit-text) !important;
}

.thread-body ul, .thread-body ol {
    padding-left: 1.4em;
}

/* Links */
.thread-body a:not(.button) {
    color: var(--sgit-blue) !important;
    text-decoration: none !important;
    font-weight: 600;
    word-break: break-word;
}

.thread-body a:not(.button):hover {
    color: var(--sgit-blue2) !important;
    text-decoration: underline !important;
}
.thread-body table tbody td {
    border-top: 1px solid var(--sgit-border) !important;
    color: #d1d5db !important;
    padding: 8px;
}

/* Code & Pre */
.thread-body pre {
    background-color: var(--sgit-bg-darker) !important;
    border: 1px solid var(--sgit-blue) !important;
    color: var(--sgit-text) !important;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
}

.thread-body code {
    background-color: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Consolas, Monaco, monospace;
}

/* Microsoft / Outlook Overrides & Cleanups */
.thread-body p.MsoNormal, .thread-body li.MsoNormal, 
.thread-body div.MsoNormal, .thread-body span.MsoNormal, 
.thread-body span, .thread-body font {
    color: inherit !important;
    background: transparent !important;
    margin: 0 0 0.8em 0 !important;
}

.thread-body table[bgcolor], .thread-body td[bgcolor], .thread-body div[style*="background"] {
    background: transparent !important;
}

/* Images */
.thread-body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--sgit-bg-darker);
}

.thread-body > :last-child {
    margin-bottom: 0 !important;
}

/* Ticket info cards */
table.ticket_info, table.custom-info {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid var(--sgit-border) !important;
    border-radius: 10px !important;
    border-collapse: separate !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

table.ticket_info th {
    background: rgba(30, 41, 59, 0.4) !important;
    color: #93c5fd !important;
    padding: 12px 16px !important;
    text-align: left !important;
}
table.ticket_info td {
    padding: 12px 16px !important;
}

/* --- 7. DROPDOWNS (Menu, ERP Actions, Select2) --- */
.dropdown-menu, 
#nav li > ul, 
.redactor-dropdown, 
select, 
.select2-dropdown {
    background: var(--sgit-bg-panel) !important;
    border: 1px solid var(--sgit-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    z-index: 9999 !important;
}

.dropdown-menu > li > a, 
#nav li > ul li a {
    color: var(--sgit-text) !important;
    padding: 10px 18px !important;
    display: block !important;
    font-weight: 500 !important;
}

.dropdown-menu > li > a:hover, 
#nav li > ul li a:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option:hover {
    background: var(--sgit-border) !important;
    color: #ffffff !important;
}

.dropdown-menu > li.disabled > a, 
.dropdown-menu > li > a.disabled {
    color: #64748b !important;
    opacity: 1 !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

/* --- 8. FULL WIDTH & LAYOUT --- */
#container {
    width: 98% !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
}

/* --- 9. MOBILE RESPONSIVENESS --- */
@media screen and (max-width: 768px) {
    #nav, #sub_nav, #ticket_tabs, ul.tabs.clean.threads {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-left: 10px !important;
        gap: 8px !important;
    }
    #nav::-webkit-scrollbar, #sub_nav::-webkit-scrollbar, ul.tabs::-webkit-scrollbar {
        display: none !important;
    }
    #nav li, #sub_nav > li, ul.tabs li {
        flex: 0 0 auto !important;
    }
    #nav li > a, ul.tabs li a { padding: 10px 16px !important; font-size: 14px !important; }
}