/* =====================================================================================
   Office (employee) theme : Client Portal er moto navy sidebar + sada header + neel primary
   Theme / skin er por load hoy (_Header.cshtml), tai ekhane override korlei hoy.
   ===================================================================================== */
:root {
    --of-navy: #0c1b4d;
    --of-navy-2: #10285f;
    --of-blue: #1f6fe5;
    --of-blue-dark: #1859bd;
    --of-text: #12214a;
    --of-border: #e6e9f0;
}

html.fixed body, body { background: #f4f6fb; }

/* ---------- Header (sada, niche halka line) ---------- */
html .header, html.fixed .header {
    background: #fff !important;
    border-bottom: 1px solid var(--of-border) !important;
    border-top: 0 !important;
    box-shadow: 0 1px 6px rgba(15, 31, 74, .06) !important;
}
html .header .logo-container, html.fixed .header .logo-container { background: #fff !important; }
html .header .logo-container .logo img { height: 36px; width: auto; }
html .header .header-right .userbox .profile-info .name,
html .header .header-right .userbox .profile-info .role,
html .header .userbox a, html .header .userbox .custom-caret { color: #12214a !important; }
html .header .userbox .profile-info .role { color: #7a8499 !important; }
html .header .header-right .notifications > li > a { color: #55627f !important; }
html .header .toggle-sidebar-left i, html .header .toggle-sidebar-left { color: #12214a !important; }
html .header .separator { border-color: var(--of-border) !important; }

/* ---------- Sidebar (navy) ---------- */
html .sidebar-left, html.fixed .sidebar-left {
    background: linear-gradient(180deg, var(--of-navy) 0%, var(--of-navy-2) 100%) !important;
    color: #d3dcf2;
    border-right: 0 !important;
}
html .sidebar-left .sidebar-header { background: rgba(0, 0, 0, .18) !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; }
html .sidebar-left .sidebar-header .sidebar-title { color: #aab6d6 !important; letter-spacing: .6px; text-transform: uppercase; font-size: 12px; }
html .sidebar-left .sidebar-header .sidebar-toggle { background: rgba(255, 255, 255, .06) !important; border: 0 !important; }
html .sidebar-left .sidebar-header .sidebar-toggle i { color: #d3dcf2 !important; }
html .sidebar-left .sidebar-header .sidebar-toggle:hover { background: rgba(255, 255, 255, .14) !important; }

html .sidebar-left .nano .nano-pane { background: transparent !important; }
html .sidebar-left .nano .nano-slider { background: rgba(255, 255, 255, .22) !important; }

/* Menu item */
html .sidebar-left ul.nav-main li a { color: #d3dcf2 !important; border-radius: 8px; }
html .sidebar-left ul.nav-main > li { margin: 2px 10px; }
html .sidebar-left ul.nav-main > li > a i { color: #aab6d6 !important; }
html .sidebar-left ul.nav-main > li > a:hover, html .sidebar-left ul.nav-main > li > a:focus { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
html .sidebar-left ul.nav-main > li > a:hover i { color: #fff !important; }
html .sidebar-left ul.nav-main li.nav-active > a, html .sidebar-left ul.nav-main li.nav-expanded > a {
    background: var(--of-blue) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(31, 111, 229, .35);
}
html .sidebar-left ul.nav-main li.nav-active > a i, html .sidebar-left ul.nav-main li.nav-expanded > a i { color: #fff !important; }
html .sidebar-left ul.nav-main li.nav-parent > a:after { color: inherit; }
html .sidebar-left ul.nav-main li.nav-active > a:after { display: none; }
html .sidebar-left ul.nav-main > li.nav-active:before, html .sidebar-left ul.nav-main > li.nav-active > a:before { display: none !important; }

/* Submenu */
html .sidebar-left ul.nav-main li .nav-children { background: rgba(0, 0, 0, .18) !important; border-radius: 8px; margin: 2px 0 6px; }
html .sidebar-left ul.nav-main li .nav-children li a { color: #b9c5e6 !important; border-radius: 6px; }
html .sidebar-left ul.nav-main li .nav-children li a:hover, html .sidebar-left ul.nav-main li .nav-children li a:focus { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
html .sidebar-left ul.nav-main li .nav-children li.nav-active > a { background: transparent !important; color: #fff !important; font-weight: 600; box-shadow: none; }
html .sidebar-left ul.nav-main li .nav-children li a:after { color: #6f7fae !important; }

/* Collapsed sidebar popup */
html.sidebar-left-collapsed .sidebar-left .nav-main li.nav-parent > ul.nav-children,
html.sidebar-left-collapsed .sidebar-left .nano:hover .nav-main .nav-expanded > ul.nav-children { background: var(--of-navy-2) !important; }

/* ---------- Content ---------- */
html .content-body { background: #f4f6fb; }
html .page-header { background: #fff !important; border-bottom: 1px solid var(--of-border) !important; box-shadow: none !important; }
html .page-header h2 { color: var(--of-text) !important; font-weight: 700; }
html .page-header .breadcrumbs li a, html .page-header .breadcrumbs li span { color: #7a8499 !important; }

html section.panel { border-radius: 12px; border: 1px solid var(--of-border); box-shadow: 0 2px 10px rgba(15, 31, 74, .04); background: #fff; }
html .panel-heading { border-top-left-radius: 12px; border-top-right-radius: 12px; }

/* Buttons : primary = Client Portal er neel */
html .btn-primary, html .btn-primary:focus { background-color: var(--of-blue) !important; border-color: var(--of-blue) !important; color: #fff !important; }
html .btn-primary:hover, html .btn-primary:active { background-color: var(--of-blue-dark) !important; border-color: var(--of-blue-dark) !important; }
html .form-control:focus { border-color: var(--of-blue); box-shadow: 0 0 0 3px rgba(31, 111, 229, .12); }
html a { color: var(--of-blue); }
html a.text-info, html .text-info { color: var(--of-blue) !important; }

/* ui-grid header */
html .ui-grid-header-cell { background: #f5f7fb !important; color: #3a4562; }
html .ui-grid-row:nth-child(even) .ui-grid-cell { background: #fafbfe; }