/* ==========================================================
   Assure IT Infra - Client Portal Theme Overlay
   ----------------------------------------------------------
   Ye file theme.css ko REPLACE nahi karti - usके baad load hoti
   hai aur sirf colors/font/layout override karti hai.
   theme.css ko kabhi touch na karein, sirf isi file mein
   changes karein.
   Accent: #0cb8c7 | Text: #4b4b4d | Font: Trebuchet MS

   Layout: Sidebar Dashboard style (CSS Grid se, HTML template
   ko touch kiye bina - #header upar full-width, #nav left
   sidebar, #content right side main area)
   ========================================================== */

body, input, select, textarea {
    font-family: "Trebuchet MS", "Helvetica Neue", sans-serif !important;
    color: #4b4b4d !important;
}

a, .link {
    color: #0cb8c7 !important;
}

a:hover, .link:hover {
    border-bottom: 1px dotted #0cb8c7 !important;
}

h1 {
    color: #0cb8c7 !important;
}

body {
    background: #f4f5f7 !important;
}

/* ---------- Sidebar Dashboard Grid Layout ---------- */

#container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 220px 1fr;
    grid-template-areas:
        "header header"
        "nav content";
    min-height: 100vh;
    background: #f4f5f7 !important;
}

/* Error/warning/notice bars aur .clear div ko grid ke bahar rakhte hain */
#container > .clear {
    display: none !important;
}
#container > .error_bar,
#container > .warning_bar,
#container > .notice_bar {
    grid-column: 1 / -1;
}

#header {
    grid-area: header;
    height: auto !important;
    padding: 14px 24px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb;
}

#header p {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#logo {
    height: auto !important;
}

#header #logo img {
    max-height: 48px !important;
}

/* Sidebar navigation */
#nav {
    grid-area: nav;
    margin: 0 !important;
    padding: 16px 12px !important;
    background: #fff !important;
    border-top: none !important;
    border-right: 1px solid #e5e7eb;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    white-space: normal !important;
    height: auto !important;
}

#nav li {
    display: block !important;
    margin: 0 !important;
}

#nav li a {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: auto !important;
    line-height: normal !important;
    padding: 10px 12px 10px 40px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    color: #4b4b4d !important;
    box-sizing: border-box;
    background-position: 12px 50% !important;
}

#nav li a.active,
#nav li a:hover {
    background-color: rgba(12, 184, 199, 0.12) !important;
    color: #0cb8c7 !important;
}

/* Main content area */
#content {
    grid-area: content;
    margin: 0 !important;
    padding: 24px !important;
    height: auto !important;
    min-height: 400px !important;
}

/* Buttons */
.blue.button, .blue.button:visited {
    background-color: #0cb8c7 !important;
}
.blue.button:hover {
    background-color: #0aa3b0 !important;
}

/* Ticket table headers */
#ticketTable th {
    background: #f0fbfc !important;
}

/* Chhoti screens pe sidebar niche stack ho jaye (basic responsive safety) */
@media (max-width: 768px) {
    #container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "content";
    }
    #nav {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    #nav li a {
        padding: 8px 12px 8px 32px !important;
    }
}