/* =====================================================================
   DSS standard theme
   ---------------------------------------------------------------------
   Shared visual standards for migrated screens. New screens should reuse
   these tokens and classes so the app stays consistent as modules are added.

   NOTE: these live in a GLOBAL stylesheet (linked from App.razor) rather than
   component-scoped .razor.css, because the Client project's scoped CSS bundles
   separately as MM_DSS_App.Client.styles.css and is not linked/served.
   ===================================================================== */

:root {
    /* Action colours - keep these meanings consistent across every screen */
    --dss-edit: #2f7ed8;    /* edit / modify   */
    --dss-delete: #e74c3c;  /* delete / remove */
    --dss-view: #17a2b8;    /* view / details  */
    --dss-accent: #00b5dc;  /* app accent      */
    --dss-muted: #d9e1ef;
}

/* ---- Standard row actions (use in every grid) ------------------------ */
.dss-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dss-action {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    line-height: 1;
    font-size: 1.05rem;
    color: inherit;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .dss-action > i {
        pointer-events: none;
    }

    .dss-action:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .dss-action:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 1px;
    }

.dss-action-edit {
    color: var(--dss-edit);
}

    .dss-action-edit:hover {
        background: rgba(47, 126, 216, 0.12);
    }

.dss-action-delete {
    color: var(--dss-delete);
}

    .dss-action-delete:hover {
        background: rgba(231, 76, 60, 0.12);
    }

.dss-action-view {
    color: var(--dss-view);
}

    .dss-action-view:hover {
        background: rgba(23, 162, 184, 0.12);
    }

/* ---- Standard loading indicator ------------------------------------- */
.dss-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
}

.dss-loading-inline {
    min-height: 180px;
    width: 100%;
}

.dss-loading-full {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 1050;
}

.dss-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid var(--dss-muted);
    border-top-color: var(--dss-accent);
    border-radius: 50%;
    animation: dss-spin 0.8s linear infinite;
}

.dss-loading-text {
    color: var(--dss-accent);
    font-weight: 500;
}

@keyframes dss-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Standard page header ------------------------------------------- */
.dss-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.25rem 0 1.25rem;
}

.dss-page-title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.dss-breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
}

.dss-page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---- Standard form action bar (Save / Cancel) ------------------------ */
.dss-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.075);
}

/* ---- Standard form field spacing ------------------------------------ */
.dss-field {
    margin-bottom: 1rem;
}

    .dss-field > label {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: #6c757d;
    }

    .dss-field .dss-required {
        color: var(--dss-delete);
        margin-left: 2px;
    }

/* ---- Navigation progress -------------------------------------------
   Shown between clicking an in-app link and Blazor's enhanced navigation
   swapping in the new page. Without it the previous page's content simply
   sits there for the length of a server round trip (which includes the WCF
   and database call, because the page is prerendered), so the click looks
   like it was ignored and the stale rows look like the wrong data loaded.
   Driven by menu-app.js adding/removing `dss-nav-busy` on <body>.
   -------------------------------------------------------------------- */
.dss-nav-progress {
    display: none;
}

body.dss-nav-busy .dss-nav-progress {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    background: transparent;
    overflow: hidden;
    pointer-events: none;
}

    body.dss-nav-busy .dss-nav-progress::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 40%;
        background: var(--dss-primary, #2f6fed);
        animation: dss-nav-slide 1.1s ease-in-out infinite;
    }

@keyframes dss-nav-slide {
    0%   { left: -40%; width: 40%; }
    50%  { left: 30%;  width: 55%; }
    100% { left: 100%; width: 40%; }
}

/* Dim the outgoing page and swallow further clicks, so stale content is not
   mistaken for the new page and a second click cannot queue another navigation. */
body.dss-nav-busy .page-content,
body.dss-nav-busy .container-fluid {
    opacity: 0.45;
    transition: opacity 120ms linear;
    pointer-events: none;
}

/* The sidebar must stay bright and usable while navigating. */
body.dss-nav-busy .leftbar-tab-menu,
body.dss-nav-busy .leftbar-tab-menu * {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    body.dss-nav-busy .dss-nav-progress::before { animation: none; width: 100%; }
    body.dss-nav-busy .page-content,
    body.dss-nav-busy .container-fluid { transition: none; }
}

/* ============================================================
   Collapsed sidebar flyout (body.enlarge-menu).
   This app's sidebar is .main-icon-menu (icon rail) + .main-menu-inner (menu panel),
   NOT the template's .left-sidenav-menu, so the theme's own collapse-hover CSS never
   revealed anything: collapsing set .main-menu-inner to display:none with no way to
   reach the menu. Reveal the active module's pane as a flyout while the icon rail is
   hovered; menu-app.js switches the active pane to whichever icon is hovered.
   ============================================================ */
body.enlarge-menu .leftbar-tab-menu:hover .main-menu-inner {
    display: block !important;
    position: fixed;
    left: 70px;
    top: 0;
    width: 240px;
    height: 100%;
    z-index: 1002;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
}
/* the inner slim-scroll wrappers carry inline fixed heights from the template; let the
   flyout fill the viewport and scroll on its own. */
body.enlarge-menu .leftbar-tab-menu:hover .main-menu-inner .slimScrollDiv,
body.enlarge-menu .leftbar-tab-menu:hover .main-menu-inner .menu-body {
    height: 100% !important;
    overflow-y: auto;
}
/* Within the revealed flyout, the collapsible sub-menus must still open on click. While the
   sidebar is collapsed the template force-hides every OPEN sub-menu
   (body.enlarge-menu .metismenu .mm-collapse.mm-show{display:none;height:0}), which left the
   flyout's nested menus (Fee Collection items, the More... groups, etc.) unreachable. Re-show an
   opened sub-menu here so a click expands it inline in the flyout, at any nesting depth. */
body.enlarge-menu .leftbar-tab-menu:hover .main-menu-inner .metismenu .mm-collapse.mm-show {
    display: block !important;
    height: auto !important;
}

/* ============================================================
   Menu panel scrolls natively. slimScroll is disabled (see app.js) because it does not
   initialise reliably against the static-SSR pre-rendered .slimScrollDiv markup, which
   left .menu-body with a fixed height + overflow:hidden - so a long section (e.g. Common,
   Settings) was clipped below the fold with no scrollbar. Enable native vertical scroll,
   and neutralise the baked-in slimScroll wrapper heights so the whole list is reachable.
   ============================================================ */
.main-menu-inner .menu-body {
    overflow-y: auto !important;
    overflow-x: hidden;
}
.main-menu-inner > .slimScrollDiv {
    height: calc(100vh - 68px) !important;
    overflow: visible !important;
}
.main-menu-inner .slimScrollBar,
.main-menu-inner .slimScrollRail { display: none !important; }

/* ============================================================
   Global Branch (Campus) + Session (Academic Year) selectors: centered in the header,
   styled clean/borderless like the header's other controls (just the value + a chevron,
   no heavy input box).
   ============================================================ */
.navbar-custom { position: relative; }
.dss-scopebar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 1;
}
.dss-scope-field { display: flex; align-items: center; gap: 8px; }
.dss-scope-field > label {
    margin: 0; font-size: 13px; font-weight: 600; color: #5a5c61; white-space: nowrap;
}
/* strip the Syncfusion input-box chrome so it reads as a plain header dropdown */
.dss-scope-dd.e-input-group.e-control-wrapper,
.dss-scope-dd.e-input-group {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
/* Branch wider than Session (Session trimmed ~33% - it only needs to show e.g. "2026-27"). */
.dss-scope-branch.e-input-group { min-width: 190px; max-width: 240px; }
.dss-scope-session.e-input-group { min-width: 100px; max-width: 110px; }
.dss-scope-dd.e-input-group::before,
.dss-scope-dd.e-input-group::after { display: none !important; }
.dss-scope-dd input.e-input {
    color: #303e67 !important;
    font-size: 13px;
    font-weight: 600;
    background: transparent !important;
    cursor: pointer;
    padding-left: 2px;
    text-overflow: ellipsis;
}
.dss-scope-dd .e-input-group-icon.e-ddl-icon,
.dss-scope-dd .e-ddl-icon { color: #5a5c61 !important; }
@media (max-width: 1200px) { .dss-scopebar { gap: 14px; } .dss-scope-dd.e-input-group { min-width: 110px; } }