/*
 * Material Theme (opt-in skin)
 * -----------------------------------------------------------------------
 * Every rule in this file is scoped under `body.theme-material` so that it
 * is strictly additive: with the class absent (the default "Modern" look)
 * nothing here applies and the app renders pixel-identical to before this
 * file existed.
 *
 * Direction: classic/structured Material Design (the Gmail / Google Drive
 * look) - deliberately the OPPOSITE of "Modern" on both axes that make
 * Modern read the way it does:
 *   - Modern  = soft, generously rounded corners (1.25rem info-cards, 20px
 *               modals, pill buttons), muted/tinted color, airy spacing.
 *   - Material = sharp/structured corners (2-8px, never pill), bold solid
 *               fills of the brand primary (--bs-primary: #5d60ef), visible
 *               1px borders layered under real elevation shadows, denser
 *               spacing.
 *
 * Do NOT edit style.css / sidenav.css / color.css to add theme rules -
 * add them here instead, scoped under body.theme-material.
 */

body.theme-material {
    /* ---- Material color roles, derived from the existing brand primary ---- */
    --md-primary: var(--bs-primary, #5d60ef);
    --md-primary-dark: #4547c9;
    /* solid, high-contrast text/icons that sit ON TOP of a filled --md-primary surface (app bar, filled buttons, active nav) */
    --md-on-primary: #ffffff;
    /* light, flat tint used only for hover/selected backgrounds behind primary-colored text/icons */
    --md-primary-tint: #e8e9fd;
    --md-on-primary-tint: #34359e;

    --md-surface: #ffffff;
    --md-surface-alt: #f1f3f4;
    --md-on-surface: #202124;
    --md-on-surface-variant: #5f6368;

    --md-border: #dadce0;
    --md-border-strong: #c4c7cc;
    --md-error: #d93025;
    --md-error-tint: #fce8e6;

    /* ---- Material corner-radius scale: sharp/structured, never pill ---- */
    --md-radius-xs: 4px;   /* buttons, inputs, badges */
    --md-radius-sm: 6px;   /* dropdown items */
    --md-radius-md: 8px;   /* cards, dropdown menu, offcanvas */
    --md-radius-lg: 8px;   /* modals (max allowed) */

    /* ---- Material elevation shadow scale (1dp/2dp/4dp/8dp/16dp) ---- */
    --md-elevation-1: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    --md-elevation-2: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 2px 6px 2px rgba(60, 64, 67, .15);
    --md-elevation-4: 0 2px 3px 0 rgba(60, 64, 67, .30), 0 6px 10px 4px rgba(60, 64, 67, .15);
    --md-elevation-8: 0 4px 4px 0 rgba(60, 64, 67, .30), 0 8px 12px 6px rgba(60, 64, 67, .15);
    --md-elevation-16: 0 8px 10px -5px rgba(60, 64, 67, .20), 0 16px 24px 2px rgba(60, 64, 67, .14), 0 6px 30px 5px rgba(60, 64, 67, .12);

    background-color: var(--md-surface-alt);
    color: var(--md-on-surface);
    font-size: .9375rem;
    line-height: 1.45;
    letter-spacing: 0;
}

/* =======================================================================
   Layout shell (app wrapper, sidebar, offcanvas mobile sidebar, topnav)
   ======================================================================= */

body.theme-material .app-wrapper {
    background: var(--md-surface-alt);
}

body.theme-material .sidebar {
    background: var(--md-surface);
    border-right: 1px solid var(--md-border);
    box-shadow: none;
}

body.theme-material .offcanvas {
    background: var(--md-surface);
    box-shadow: var(--md-elevation-16);
    border-radius: 0;
}

body.theme-material .offcanvas-header {
    border-bottom: 1px solid var(--md-border);
}

/* ---- Top app bar: solid filled primary, like a real Material app bar ---- */
body.theme-material .topnav {
    background: var(--md-primary);
    border-bottom: none;
    box-shadow: var(--md-elevation-2);
    position: relative;
    z-index: 5;
}

body.theme-material .topnav-left h6 {
    color: var(--md-on-primary) !important;
    letter-spacing: 0;
}

body.theme-material .topnav-left small {
    color: rgba(255, 255, 255, .78) !important;
}

/* Mobile sidebar toggle button that sits directly on the filled app bar */
body.theme-material .topnav > .btn {
    color: var(--md-on-primary);
    border-radius: var(--md-radius-xs);
}

body.theme-material .topnav > .btn:hover,
body.theme-material .topnav > .btn:focus {
    background-color: rgba(255, 255, 255, .16);
}

/* Theme-switcher trigger + profile trigger: both are the direct
   [data-bs-toggle="dropdown"] elements sitting on the filled bar. Their
   dropdown-menu panels are separate (unscoped by this selector) and keep
   the normal light-surface dropdown styling below. */
body.theme-material .topnav-right [data-bs-toggle="dropdown"] {
    color: var(--md-on-primary);
}

body.theme-material .topnav-right [data-bs-toggle="dropdown"] i {
    color: var(--md-on-primary);
}

body.theme-material .topnav-right .fw-medium {
    color: var(--md-on-primary);
}

body.theme-material #themeSwitcherBtn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--md-radius-xs);
}

body.theme-material #themeSwitcherBtn:hover,
body.theme-material #themeSwitcherBtn:focus {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .8);
}

body.theme-material .topnav-right img.rounded-circle {
    border: 2px solid rgba(255, 255, 255, .7);
}

/* Sidebar nav items -> flush full-width rows with a solid active state and
   a left accent stripe, structured like a Material navigation list (not a
   floating rounded pill the way Modern renders it). */
body.theme-material .sidebar-menu li a {
    border-radius: 0;
    margin: 0;
    padding: 10px 20px 10px 16px;
    border-left: 4px solid transparent;
    color: var(--md-on-surface-variant);
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

body.theme-material .sidebar-menu li a:hover,
body.theme-material .sidebar-menu li a:focus-visible {
    background: var(--md-surface-alt);
    color: var(--md-on-surface);
}

body.theme-material .sidebar-menu li.active a {
    background: var(--md-primary);
    color: var(--md-on-primary);
    border-left-color: var(--md-primary-dark);
    font-weight: 600;
}

body.theme-material .toggle-btn {
    border-radius: var(--md-radius-xs);
}

/* =======================================================================
   Buttons
   ======================================================================= */

body.theme-material .btn {
    border-radius: var(--md-radius-xs);
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
    transition: box-shadow .15s ease, filter .15s ease, background-color .15s ease;
}

/* CSS-only pseudo-ripple: a flat darken/brighten pulse reads closer to a
   Material ripple than a scale transform, and doesn't fight the sharper,
   flatter aesthetic. */
body.theme-material .btn:active {
    filter: brightness(.9);
}

body.theme-material .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(93, 96, 239, .3);
}

body.theme-material .btn-primary {
    background-color: var(--md-primary);
    border-color: var(--md-primary);
    box-shadow: var(--md-elevation-1);
}

body.theme-material .btn-primary:hover,
body.theme-material .btn-primary:focus {
    background-color: var(--md-primary-dark);
    border-color: var(--md-primary-dark);
    box-shadow: var(--md-elevation-2);
}

body.theme-material .btn-outline-primary {
    background: transparent;
    border-width: 1px;
    border-color: var(--md-primary);
    color: var(--md-primary);
}

body.theme-material .btn-outline-primary:hover,
body.theme-material .btn-outline-primary:focus {
    background-color: var(--md-primary-tint);
    border-color: var(--md-primary);
    color: var(--md-on-primary-tint);
}

/* Classic Material "outlined button": transparent fill, visible border -
   the opposite of Modern's soft tinted-fill outline-secondary. */
body.theme-material .btn-outline-secondary {
    border-radius: var(--md-radius-xs);
    border: 1px solid var(--md-border-strong);
    background: var(--md-surface);
    color: var(--md-on-surface-variant);
}

body.theme-material .btn-outline-secondary:hover,
body.theme-material .btn-outline-secondary:focus {
    background: var(--md-surface-alt);
    border-color: var(--md-border-strong);
    color: var(--md-on-surface);
}

body.theme-material .btn-danger {
    border-radius: var(--md-radius-xs);
    box-shadow: var(--md-elevation-1);
}

body.theme-material .ui-btn-group .btn {
    border-radius: var(--md-radius-xs) !important;
}

body.theme-material .ui-btn-group .btn.active {
    box-shadow: var(--md-elevation-1);
}

/* =======================================================================
   Cards / info-cards - paper-like: visible border + real elevation, not a
   soft-shadow variation on a big rounded corner.
   ======================================================================= */

body.theme-material .card,
body.theme-material .info-card,
body.theme-material .exam-timer,
body.theme-material .attendance-date-btn,
body.theme-material .feed-card,
body.theme-material .dashboard-card {
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-1);
}

/* Cards that opt into Modern's soft 1rem/1.25rem rounding (.rounded-4 etc.,
   .feed-card's own 16px, .dashboard-card's 1.25rem) are flattened back to
   the Material radius scale so they don't slip back into the Modern look
   while this theme is active. */
body.theme-material .card.rounded-4,
body.theme-material .rounded-4,
body.theme-material .feed-card,
body.theme-material .dashboard-card {
    border-radius: var(--md-radius-md) !important;
}

/* Bootstrap's .rounded-1/-2/-3/-4 and .shadow/.shadow-sm/.shadow-lg
   utilities all compile with !important, which silently wins over the
   plain (non-!important) .card/.btn rules above wherever a blade view
   applies them directly - confirmed by rendering: login/register's submit
   buttons carry .rounded-3 and their card carries .shadow-lg, so neither
   was actually picking up the Material look despite the .btn/.card rules
   existing. These utilities appear ~150 times across the app (mostly on
   cards, buttons, and modals), so this needs to be handled generally, not
   patched per-page. */
body.theme-material .btn.rounded-1,
body.theme-material .btn.rounded-2,
body.theme-material .btn.rounded-3,
body.theme-material .btn.rounded-4 {
    border-radius: var(--md-radius-xs) !important;
}

body.theme-material .rounded-1:not(.btn),
body.theme-material .rounded-2:not(.btn),
body.theme-material .rounded-3:not(.btn) {
    border-radius: var(--md-radius-md) !important;
}

body.theme-material .shadow,
body.theme-material .shadow-sm {
    box-shadow: var(--md-elevation-1) !important;
}

body.theme-material .shadow-lg {
    box-shadow: var(--md-elevation-4) !important;
}

body.theme-material .card:hover,
body.theme-material .info-card:hover,
body.theme-material .feed-card:hover {
    box-shadow: var(--md-elevation-4);
    transform: none;
}

body.theme-material .cover-card {
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-2);
}

body.theme-material .attendance-date-btn:hover {
    background: var(--md-primary);
    border-color: var(--md-primary);
    transform: none;
}

body.theme-material .exam-timer {
    background: var(--md-surface);
}

body.theme-material .custom-badge {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-xs);
    backdrop-filter: none;
}

/* =======================================================================
   Forms
   ======================================================================= */

body.theme-material .form-control,
body.theme-material .form-select,
body.theme-material .ui-search input {
    border: 1px solid var(--md-border-strong);
    border-radius: var(--md-radius-xs);
    background-color: var(--md-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.theme-material .form-control:focus,
body.theme-material .form-select:focus,
body.theme-material .ui-search input:focus {
    background-color: var(--md-surface);
    border-color: var(--md-primary);
    box-shadow: 0 0 0 1px var(--md-primary);
}

body.theme-material .form-check-input {
    border-radius: 2px;
    border-color: var(--md-border-strong);
}

body.theme-material .form-check-input:checked {
    background-color: var(--md-primary);
    border-color: var(--md-primary);
}

body.theme-material .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(93, 96, 239, .2);
}

/* =======================================================================
   Dropdowns (profile menu, theme switcher, etc.) - these are separate
   floating white surfaces, so they keep normal on-surface text even when
   their trigger sits on the filled primary app bar.
   ======================================================================= */

body.theme-material .dropdown-menu {
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-8);
    padding: 4px;
}

body.theme-material .dropdown-item {
    border-radius: var(--md-radius-sm);
    padding: .5rem .75rem;
    transition: background-color .1s ease, color .1s ease;
}

body.theme-material .dropdown-item:hover,
body.theme-material .dropdown-item:focus {
    background-color: var(--md-surface-alt);
    color: var(--md-on-surface);
}

body.theme-material .dropdown-item.active,
body.theme-material .dropdown-item:active {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
}

body.theme-material .dropdown-item.text-danger:hover {
    background-color: var(--md-error-tint);
    color: var(--md-error) !important;
}

body.theme-material .dropdown-divider {
    border-color: var(--md-border);
}

/* =======================================================================
   Badges
   ======================================================================= */

body.theme-material .badge {
    border-radius: var(--md-radius-xs);
    font-weight: 600;
    letter-spacing: 0;
    padding: .38em .6em;
    /* keep this app's existing badge/status colors, just push them flatter
       and more saturated instead of pastel */
    filter: saturate(1.35) contrast(1.05);
}

/* =======================================================================
   Modals
   ======================================================================= */

body.theme-material .modal-content {
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-16);
}

body.theme-material .modal-header,
body.theme-material .modal-footer {
    border-color: var(--md-border);
}

/* =======================================================================
   .ui-table (used across list/index pages app-wide)
   ======================================================================= */

body.theme-material .ui-table {
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-md);
    box-shadow: none;
}

body.theme-material .ui-table thead th {
    background-color: var(--md-surface-alt);
    color: var(--md-on-surface-variant);
    border-bottom: 1px solid var(--md-border);
    padding: .55rem .75rem;
}

body.theme-material .ui-table tbody td {
    border-bottom-color: var(--md-border);
    padding: .55rem .75rem;
}

body.theme-material .ui-table tbody tr:hover {
    background-color: var(--md-surface-alt);
}

/* =======================================================================
   Theme switcher control itself
   ======================================================================= */

body.theme-material .theme-switcher .theme-option.active {
    background-color: var(--md-primary-tint);
    color: var(--md-on-primary-tint);
}

/* =======================================================================
   Navigation Rail (desktop sidebar restyle) - Material theme, >=992px only
   -----------------------------------------------------------------------
   This is a genuinely different STRUCTURE from the Modern text-list
   drawer, not just recolored: a narrow (~88px) icon rail with
   icon-on-top/label-below stacked items, centered, and a pill-shaped
   "active indicator" behind just the icon (Material 3's nav-rail pattern)
   instead of a full-width row highlight. Reuses the existing
   sidebar-menu.blade.php markup (icon + .menu-text span per item) - no
   new markup needed, this is CSS-only restructuring via flex-direction.
   ======================================================================= */

@media (min-width: 992px) {
    body.theme-material .sidebar {
        width: 88px;
        overflow-x: hidden;
        transition: width .3s ease;
    }

    /* The toggle-btn stays active under Material too: collapsed state
       narrows the rail further (88px -> 64px) and drops the labels,
       leaving icon-only - same interaction Modern offers, just a
       different pair of widths for the rail aesthetic. */
    body.theme-material .sidebar.collapsed {
        width: 64px;
    }

    /* The full wordmark logo (sized for Modern's 260px drawer) does not
       fit next to the toggle button at the rail's 88px width - sharing
       that row clips the button via .sidebar's overflow-x:hidden, making
       it invisible (and unclickable) in the default expanded state.
       sidenav.css already hides the logo when .collapsed; hide it here
       for the rail's base state too so the toggle button always has the
       full header row to itself and stays visible/clickable in both
       states. */
    body.theme-material .sidebar .sidebar-logo-img {
        display: none;
    }

    body.theme-material .sidebar .sidebar-logo {
        justify-content: center;
    }

    body.theme-material .sidebar .sidebar-menu {
        padding: 8px;
    }

    body.theme-material .sidebar .sidebar-menu li {
        margin-bottom: 4px;
    }

    body.theme-material .sidebar .sidebar-menu li a {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        text-align: center;
        padding: 8px 4px;
        border-left: none;
        border-radius: var(--md-radius-md);
        min-height: 56px;
    }

    body.theme-material .sidebar .sidebar-menu li a i {
        font-size: 1.15rem;
        line-height: 1;
    }

    body.theme-material .sidebar .sidebar-menu li a .menu-text {
        display: block;
        font-size: .65rem;
        font-weight: 500;
        line-height: 1.15;
        white-space: normal;
        max-width: 100%;
    }

    /* Collapsed = icon-only, same affordance Modern's collapse gives. */
    body.theme-material .sidebar.collapsed .sidebar-menu li a .menu-text {
        display: none;
    }

    body.theme-material .sidebar.collapsed .sidebar-menu li a {
        flex-direction: row;
        min-height: 44px;
    }

    body.theme-material .sidebar .sidebar-menu li a:hover,
    body.theme-material .sidebar .sidebar-menu li a:focus-visible {
        background: var(--md-surface-alt);
        color: var(--md-on-surface);
    }

    /* Active indicator: pill behind the icon only, label stays plain text -
       replaces the full-row solid fill used for the mobile offcanvas
       drawer (that rule still applies there; it is a different DOM node,
       .offcanvas .sidebar-menu, not scoped by .sidebar here). */
    body.theme-material .sidebar .sidebar-menu li.active a {
        background: transparent;
        color: var(--md-on-primary-tint);
        border-left-color: transparent;
        font-weight: 600;
    }

    body.theme-material .sidebar .sidebar-menu li.active a i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 28px;
        background: var(--md-primary-tint);
        color: var(--md-on-primary-tint);
        border-radius: 999px;
        font-size: 1.15rem;
    }

    /* The "Hello, {name}!" illustration bubble is sized for a wide drawer
       and has no equivalent in a compact rail. */
    body.theme-material .sidebar .bubble-wrapper {
        display: none;
    }
}

/* =======================================================================
   Bottom Navigation Bar (Material theme, mobile widths only)
   -----------------------------------------------------------------------
   layouts/bottom-nav.blade.php renders unconditionally (same opt-in-via-
   CSS pattern as the rest of this theme); it is hidden by default here
   and only shown under body.theme-material at <992px, where it replaces
   reliance on the hamburger/offcanvas for PRIMARY navigation the way a
   Material bottom nav does. Desktop keeps the nav rail above instead.
   ======================================================================= */

.bottom-nav {
    display: none;
}

@media (max-width: 991.98px) {
    body.theme-material .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        height: 60px;
        padding-bottom: env(safe-area-inset-bottom, 0);

        background: var(--md-surface);
        border-top: 1px solid var(--md-border);
        box-shadow: var(--md-elevation-8);
    }

    body.theme-material .bottom-nav .bottom-nav-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;

        border: none;
        background: transparent;
        color: var(--md-on-surface-variant);
        text-decoration: none;
        font-size: .65rem;
        font-weight: 500;
        padding: 6px 2px;
    }

    body.theme-material .bottom-nav .bottom-nav-item i {
        font-size: 1.25rem;
        line-height: 1;
    }

    body.theme-material .bottom-nav .bottom-nav-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.theme-material .bottom-nav .bottom-nav-item.active {
        color: var(--md-primary);
        font-weight: 700;
    }

    body.theme-material .bottom-nav .bottom-nav-item:hover,
    body.theme-material .bottom-nav .bottom-nav-item:focus-visible {
        color: var(--md-on-surface);
    }

    body.theme-material .bottom-nav .bottom-nav-item.active:hover,
    body.theme-material .bottom-nav .bottom-nav-item.active:focus-visible {
        color: var(--md-primary);
    }

    /* Keep the fixed bar from covering the bottom of page content. Mobile
       relies on normal document scroll (see dashboard.css's app-content
       comment), so a bottom padding bump on the scrolling element is what
       is needed here, not a height recalculation. `!important` is required
       because <main class="app-content p-3 p-lg-4"> carries Bootstrap's
       `.p-3` utility, which itself compiles to `padding: 1rem !important`
       (Bootstrap 5's utilities API enables !important on spacing utilities
       by default) - without it this rule would be silently ignored. */
    body.theme-material main.app-content {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0) + 1rem) !important;
    }
}

/* =======================================================================
   Floating Action Button (FAB) - Material theme only
   -----------------------------------------------------------------------
   Opt-in via a `.fab` element in a page's markup (currently only
   resources/views/dashboard/index.blade.php uses one, wired to the same
   openModal('news') the existing composer buttons call). Hidden under the
   default Modern theme, which has no FAB concept.
   ======================================================================= */

.fab {
    display: none;
}

body.theme-material .fab {
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1020;

    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;

    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 1.5rem;
    line-height: 1;

    box-shadow: var(--md-elevation-4);
    transition: box-shadow .15s ease, background-color .15s ease;
}

body.theme-material .fab:hover,
body.theme-material .fab:focus-visible {
    background: var(--md-primary-dark);
    color: var(--md-on-primary);
    box-shadow: var(--md-elevation-8);
}

body.theme-material .fab:active {
    box-shadow: var(--md-elevation-4);
    filter: brightness(.95);
}

/* Sit above the bottom nav bar on mobile instead of overlapping it. */
@media (max-width: 991.98px) {
    body.theme-material .fab {
        bottom: calc(60px + env(safe-area-inset-bottom, 0) + 16px);
    }
}