/* =====================================================================
   Study Portal – layout & sidebar polish
   Loaded LAST in _Host.cshtml so it overrides style.css / SASS / the
   inline overrides in _Footer.cshtml.
   Sidebar rules are scoped under #dvLeftMenu (an id) so they reliably
   win the cascade over the theme's .deznav class chains.
   ===================================================================== */

:root {
    --zs-accent: #1E33F2;       /* blue used by the dashboard icons   */
    --zs-accent-2: #5b6cff;
    --zs-brand-1: #16245f;      /* deep indigo (brand chrome)         */
    --zs-brand-2: #25409a;
    --zs-brand-3: #2f54bd;
    --zs-saffron: #f5a623;      /* saffron accent (lotus logo)        */
    --zs-radius: 16px;
    --zs-shadow: 0 10px 30px rgba(31, 51, 242, .07);
    --zs-shadow-hover: 0 16px 40px rgba(31, 51, 242, .15);
}

/* ---------------------------------------------------------------------
   1. LEFT SIDEBAR – accordion + polished nav pills
   The submenus are collapsed by default here (the theme shipped without
   the metisMenu collapse rules). host.js#fnInitSidebarAccordion drives
   the open/close by toggling inline display, so this is only the safe
   default state + the visual styling.
--------------------------------------------------------------------- */

/* Collapse every group by default (host.js reveals the active one). */
#dvLeftMenu .metismenu > li > ul {
    display: none;
}

#dvLeftMenu .metismenu {
    padding-top: 6px;
}

/* Top level items become rounded, well-spaced pills. */
#dvLeftMenu .metismenu > li {
    margin: 3px 14px;
}

#dvLeftMenu .metismenu > li > a {
    display: flex !important;
    align-items: center;
    padding: 12px 48px 12px 16px;   /* right pad reserves room for the +/- badge */
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    transition: background-color .2s ease, box-shadow .2s ease;
}

#dvLeftMenu .metismenu > li > a i {
    color: #ffffff;
    font-size: 1.35rem;
    padding-right: 14px;
}

#dvLeftMenu .metismenu > li > a .nav-text {
    flex: 1 1 auto;
}

/* Hover + open (mm-active) state: translucent white reads cleanly over
   the orange sidebar artwork. */
#dvLeftMenu .metismenu > li:hover > a,
#dvLeftMenu .metismenu > li:focus > a {
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
}

#dvLeftMenu .metismenu > li:hover > a i,
#dvLeftMenu .metismenu > li.mm-active > a i {
    color: #ffffff;
}

#dvLeftMenu .metismenu > li.mm-active > a {
    background: rgba(255, 255, 255, .26) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}

/* The expand/collapse indicator — a clear circular "+" badge (turns into a
   saffron "−" when open) so it is obvious which items reveal a submenu. The
   theme's default thin chevron was easy to miss, which is why the groups
   looked like dead links. */
#dvLeftMenu .metismenu > li > a.has-arrow::after {
    content: "+";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: 0;
    line-height: 22px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

#dvLeftMenu .metismenu > li > a.has-arrow[aria-expanded="true"]::after,
#dvLeftMenu .metismenu > li.mm-active > a.has-arrow::after {
    content: "\2212"; /* minus sign */
    background: var(--zs-saffron);
    border-color: var(--zs-saffron);
    color: var(--zs-brand-1);
}

/* Submenu panel. */
#dvLeftMenu .metismenu > li > ul {
    background: rgba(0, 0, 0, .12);
    border-radius: 12px;
    margin: 2px 4px 6px;
    padding: 6px 0;
}

#dvLeftMenu .metismenu > li > ul:after {
    background: rgba(255, 255, 255, .25);
    left: 26px;
}

#dvLeftMenu .metismenu ul a {
    color: rgba(255, 255, 255, .82) !important;
    padding-left: 3.25rem !important;
    font-size: 14.5px;
    border-radius: 8px;
}

#dvLeftMenu .metismenu ul a:before {
    background: rgba(255, 255, 255, .45);
    left: 26px;
}

#dvLeftMenu .metismenu ul a:hover,
#dvLeftMenu .metismenu ul a:focus,
#dvLeftMenu .metismenu ul a.active {
    color: #ffffff !important;
    font-weight: 600;
}

/* Copyright pinned to the viewport bottom-left, spanning the sidebar width, so
   it reads as a sidebar footer and is never cut off. We use position:fixed
   (not absolute) because the deznav-scroll container can extend past the
   viewport, which left the block hanging off the bottom with only the first
   line visible. */
#dvLeftMenu .deznav-scroll .copyright {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 21.563rem;
    margin: 0 !important;
    padding: 12px 22px 14px !important;
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    line-height: 1.45;
    z-index: 6;
}

#dvLeftMenu .deznav-scroll .copyright p {
    color: rgba(255, 255, 255, .9);
    margin-bottom: 4px;
}

@media only screen and (max-width: 1350px) {
    #dvLeftMenu .deznav-scroll .copyright {
        width: 17rem;
    }
}

/* ---------------------------------------------------------------------
   2. STAT CARDS  (.card-bx – the four KPI tiles on the dashboard)
--------------------------------------------------------------------- */
.content-body .card-bx {
    position: relative;
    border: none;
    border-radius: var(--zs-radius);
    background: #ffffff;
    box-shadow: var(--zs-shadow);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.content-body .card-bx::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, var(--zs-accent), var(--zs-accent-2));
}

.content-body .card-bx:hover {
    transform: translateY(-4px);
    box-shadow: var(--zs-shadow-hover);
}

.content-body .card-bx .card-body {
    padding: 1.5rem 1.5rem 1.5rem 1.75rem;
}

.content-body .card-bx h2 {
    font-size: 2.1rem;
    line-height: 1.1;
    margin-bottom: .35rem;
    color: #1b1b2f !important;
}

.content-body .card-bx h2 a {
    color: inherit;
}

.content-body .card-bx p {
    color: #6a7187 !important;
    font-size: .95rem;
}

/* Icon sits in a soft tinted square. */
.content-body .card-bx .media .d-inline-block {
    background: rgba(31, 51, 242, .08);
    border-radius: 14px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.content-body .card-bx .media .d-inline-block svg {
    width: 44px;
    height: 44px;
}

/* ---------------------------------------------------------------------
   3. GENERAL CARDS (charts, lists, tables)
--------------------------------------------------------------------- */
.content-body .card {
    border: none;
    border-radius: var(--zs-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    overflow: hidden;
}

.content-body .card .card-header {
    border-radius: var(--zs-radius) var(--zs-radius) 0 0;
    padding: 1.1rem 1.5rem;
}

.content-body .card .card-header h4,
.content-body .card .card-header .card-title {
    font-size: 1.25rem;
}

/* ---------------------------------------------------------------------
   4. PAGE HEADER + CONTENT SPACING
--------------------------------------------------------------------- */
.content-body .form-head {
    margin-bottom: 1rem !important;
}

.content-body .form-head h2 {
    font-size: 1.85rem;
    letter-spacing: -.01em;
}

.content-body .form-head p {
    color: #6a7187;
}

/* Tighter content frame — the fixed header already reserves 7.5rem above, so
   keep only a small gap below it (was 1.5rem, felt like wasted space). */
.content-body .container-fluid {
    padding: 0.6rem 1.25rem 1.25rem;
}

.content-body .row > [class*="col-"] {
    margin-bottom: 1rem;
}

/* Refresh icon hover affordance. */
.content-body .fa-spin-hover:hover {
    transform: rotate(90deg);
    transition: transform .3s ease;
}

/* ---------------------------------------------------------------------
   5. HEADER bar – subtle separation from the content
--------------------------------------------------------------------- */
.header .header-content {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

/* Slimmer, modern scrollbars inside scrollable widgets. */
.dz-scroll::-webkit-scrollbar,
.loadmore-content::-webkit-scrollbar {
    width: 6px;
}

.dz-scroll::-webkit-scrollbar-thumb,
.loadmore-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: 6px;
}

/* =====================================================================
   6. BRAND CHROME — header + sidebar
   Replaces the basic CDN texture images (.Saas_PortalHeader uses header.png,
   .Saas_PortalLeftMenu uses left_sidebar.png) with a premium deep-indigo
   brand gradient lifted by a soft saffron glow. Overrides the SASS
   stylesheet.min.css and the inline _Footer.cshtml block via !important.
   ===================================================================== */

/* Top logo block (left of the header) — keep it flush with the chrome.
   Drop the base theme's 1px #EEE hairline so there's no white seam where the
   logo block / header meet the indigo sidebar. */
.nav-header {
    background: var(--zs-brand-1) !important;
    border-bottom: 0 !important;
}

/* White chip behind the brand mark so its dark text stays legible on indigo. */
.nav-header .brand-logo img {
    background: #ffffff;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(13, 22, 64, .25);
}

/* Header bar. */
.header.Saas_PortalHeader,
.Saas_PortalHeader {
    background:
        radial-gradient(560px 260px at 88% -70%, rgba(245, 166, 35, .38), transparent 70%),
        linear-gradient(115deg, var(--zs-brand-1) 0%, var(--zs-brand-2) 55%, var(--zs-brand-3) 100%) !important;
    border-bottom: 0 !important;     /* remove the light hairline under the header */
    box-shadow: 0 6px 24px rgba(13, 22, 64, .20);
}

/* Left sidebar. */
#dvLeftMenu.Saas_PortalLeftMenu,
.Saas_PortalLeftMenu {
    background:
        radial-gradient(440px 220px at 16% 0%, rgba(245, 166, 35, .22), transparent 70%),
        linear-gradient(180deg, var(--zs-brand-1) 0%, #1b2e7a 50%, var(--zs-brand-1) 100%) !important;
    box-shadow: 6px 0 24px rgba(13, 22, 64, .16);
}

/* Saffron accent strip down the active item for a premium touch. */
#dvLeftMenu .metismenu > li.mm-active > a {
    box-shadow: inset 3px 0 0 var(--zs-saffron), 0 6px 16px rgba(0, 0, 0, .14);
}

/* Dashboard card headers: recolour the old orange gradient to the brand blue
   so the whole portal reads as one product. */
.content-body .card .card-header {
    background: linear-gradient(115deg, #1b2e7a, var(--zs-brand-3)) !important;
    color: #ffffff;
}

.content-body .card .card-header h4,
.content-body .card .card-header .card-title,
.content-body .card .card-header h4.text-black {
    color: #ffffff !important;
}

/* Page footer pinned to the bottom of the viewport so the "Designed &
   Developed by Zeet Soft" line always reads as a footer, whether or not the
   page has content (it used to float wherever the content happened to end).
   Sits to the right of the fixed sidebar. */
.footer {
    position: fixed;
    left: 21.563rem;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding-left: 0 !important;
    background: transparent;
}

.footer .copyright {
    background: #F4F6FB;
    border-top: 1px solid #e7ebf3;
    padding: 12px 0;
}

.footer .copyright p {
    color: #6a7187;
    text-align: center;
    margin: 0;
}

@media only screen and (max-width: 1350px) {
    .footer { left: 17rem; }
}

/* Keep page content clear of the fixed footer. */
.content-body {
    padding-bottom: 56px;
}