/*
 * 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, the exam question
   page's 16px header/question cards) 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,
body.theme-material .exam-header-card,
body.theme-material .exam-question-card,
body.theme-material .matching-table-wrap {
    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;
}

/* .subject-growth-avatar (sections/partials/subject-growth-avatar.blade.php)
   - Material never uses pill radii (see file header), so flatten the
   rounded card/progress-track corners to Material's sharp scale; colors are
   already Modern-appropriate light values that read fine on Material's
   light surface too, same as most of .ui-table needing no Material
   override at all. */
body.theme-material .subject-growth-avatar {
    border-radius: var(--md-radius-xs);
}

body.theme-material .subject-growth-avatar-track {
    border-radius: 2px;
}

body.theme-material .subject-growth-avatar-fill {
    border-radius: 2px;
}

/* .avatar-character-option (users/profiles/index.blade.php growth avatar
   picker) - same flattened-corner treatment as .subject-growth-avatar
   above. */
body.theme-material .avatar-character-option {
    border-radius: var(--md-radius-xs);
}

/* .plant-growth-badge (sections/partials/plant-growth-avatar.blade.php) -
   same flattened-corner treatment as .subject-growth-avatar above. */
body.theme-material .plant-growth-badge {
    border-radius: var(--md-radius-xs);
}

body.theme-material .plant-growth-badge-icon {
    border-radius: var(--md-radius-xs);
}

body.theme-material .plant-growth-badge-track,
body.theme-material .plant-growth-badge-fill {
    border-radius: 2px;
}

/* =======================================================================
   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);
}

/* =======================================================================
   Subject form (resources/views/subjects/form.blade.php) - image dropzone
   + grading scale table, both added in style.css. Material's own
   sharp-corner/bordered language (--md-radius-*, --md-border) replaces
   Modern's soft-rounded/dashed look here, same as every other component
   in this file.
   ======================================================================= */

body.theme-material .scale-section-title {
    color: var(--md-on-surface) !important;
    font-weight: 700 !important;
}

body.theme-material .subject-image-frame,
body.theme-material .subject-image-preview,
body.theme-material .subject-image-empty {
    border-radius: var(--md-radius-md) !important;
}

body.theme-material .subject-image-empty {
    background: var(--md-surface-alt);
    border: 1px solid var(--md-border-strong);
}

/* Bootstrap's .table cells paint their own background-color:
   var(--bs-table-bg) (defaults to #fff) regardless of an ancestor's
   background - same bug shape fixed for dark-theme.css's equivalent rule -
   so the wrapper's surface color has to be repeated on the table and every
   <th>/<td>, or Material (light or dark) would show white cells here too. */
body.theme-material .scale-table-wrapper,
body.theme-material #table-scale,
body.theme-material .scale-table thead th,
body.theme-material .scale-table tbody td {
    background-color: var(--md-surface) !important;
}

body.theme-material .scale-table-wrapper {
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-md);
}

body.theme-material .scale-table thead th {
    color: var(--md-on-surface) !important;
    border-bottom-color: var(--md-border);
}

body.theme-material .scale-table tbody td {
    border-bottom-color: var(--md-border);
}

/* Beats the generic body.theme-material .form-control rule above (which
   would otherwise give these underline-style scale inputs Material's usual
   full box border) - the scale table intentionally keeps the lighter
   underline treatment even in Material, just swapped to Material's own
   border/primary tokens. */
body.theme-material #table-scale .form-control.border-only-bottom {
    border: none;
    border-bottom: 1px solid var(--md-border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--md-on-surface) !important;
    -webkit-text-fill-color: var(--md-on-surface) !important;
}

body.theme-material #table-scale .form-control.border-only-bottom:focus {
    border-bottom: 2px solid var(--md-primary);
    box-shadow: none;
    color: var(--md-on-surface) !important;
    -webkit-text-fill-color: var(--md-on-surface) !important;
}

body.theme-material #table-scale .form-control.border-only-bottom[readonly] {
    color: var(--md-on-surface) !important;
    -webkit-text-fill-color: var(--md-on-surface) !important;
    font-weight: 700;
}

/* =======================================================================
   Permissions matrix (settings/nav-links, settings/permission-links) -
   role column header icons + the permission-links module group-header
   rows, styled with this theme's sharp/structured-corner, bordered look.
   ======================================================================= */

body.theme-material .ui-role-head i {
    color: var(--md-primary);
}

body.theme-material .ui-matrix-table .ui-matrix-group-row td,
body.theme-material .ui-matrix-table .ui-matrix-group-row:hover td,
body.theme-material .ui-permission-group-header {
    background-color: var(--md-surface-alt);
    color: var(--md-primary);
    border-bottom: 1px solid var(--md-border);
}

body.theme-material .ui-permission-group-header {
    border-radius: var(--md-radius-xs);
}

/* =======================================================================
   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);
}

/* =======================================================================
   Alerts (e.g. the role-detail "In use" banner on settings/nav-links|
   permission-links/role.blade.php) - flatten to the same visible-border,
   sharp-corner surface language as this theme's .card rule above instead of
   Bootstrap's default soft/borderless alert.
   ======================================================================= */

body.theme-material .alert-light {
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-xs);
    background-color: var(--md-surface-alt);
}

/* =======================================================================
   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);
}

/* =======================================================================
   SweetAlert2 popups (alert.js) - Material's sharp/structured corners +
   elevation shadow instead of Modern's 20px rounded/soft-shadow default
   from style.css's .swal-popup, mirroring the .modal-content override
   above. Background/text color for dark mode is handled in
   dark-theme.css (body.theme-dark .swal2-popup) since that axis is
   independent of Modern/Material.
   ======================================================================= */

body.theme-material .swal2-popup {
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-16);
}

/* =======================================================================
   Authoring Tool editor (layouts/editor.blade.php, styled in editor.css) -
   reused in 4 places: subjects/lessons/topics/create-modal.blade.php,
   subjects/assessments/view.blade.php (essay answers), libraries/view.blade.php
   and articles/form.blade.php. Toolbar buttons already pick up Material's
   sharp corners from the generic body.theme-material .btn rule above; this
   just matches the surrounding surface to the same bordered/elevated
   language as .card/.modal-content instead of Modern's plain rounded/
   soft-shadow default. Color is handled independently in dark-theme.css.
   ======================================================================= */

body.theme-material .authoring-editor {
    border-radius: var(--md-radius-md) !important;
    box-shadow: var(--md-elevation-1);
}

body.theme-material .editor-toolbar {
    background: var(--md-surface-alt);
    border-color: var(--md-border) !important;
}

/* =======================================================================
   .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);
}

/* =======================================================================
   Class Schedule widget (.cd-schedule, styled in schedule.css) - only the
   gridline/border color needs a Material override (text already follows
   `color: inherit` from schedule.css); event cards keep their own
   subject-driven background color regardless of theme.
   ======================================================================= */

body.theme-material .cd-schedule {
    --schedule-border: var(--md-border);
}

body.theme-material .cd-schedule .no-schedule {
    color: var(--md-on-surface-variant);
}

/* =======================================================================
   Feed / Dashboard ("My Feed", dashboard/index.blade.php +
   dashboard/profile.blade.php) - dashboard.css defines these classes with
   ONE unscoped look (soft pill inputs, 12px/10px poll radii, translucent
   hover tints) and, until now, this file only reskinned the outer
   `.feed-card` - every element *inside* it (avatar, composer input, poll
   box/options, post/reaction buttons, author link) had no Material
   counterpart at all, so switching to Material never actually changed
   how the feed looked. Give each the same sharp/structured corners +
   visible-border treatment the rest of this file uses.
   ======================================================================= */

body.theme-material .post-input {
    border-radius: var(--md-radius-xs);
    background: var(--md-surface-alt);
    border: 1px solid var(--md-border);
}

body.theme-material .post-input:focus {
    background: var(--md-surface);
    border-color: var(--md-primary);
}

/* Flatten Modern's decorative primary-color ring/halo down to a plain
   1px border, in line with Material's "structured, not soft" avatars. */
body.theme-material .feed-avatar {
    border: 1px solid var(--md-border-strong);
    box-shadow: none;
}

body.theme-material .feed-image {
    border-radius: var(--md-radius-md);
}

body.theme-material .feed-image-gallery {
    border-radius: var(--md-radius-md);
}

body.theme-material .feed-image-gallery-tile {
    border-radius: var(--md-radius-sm);
    background: var(--md-surface-alt);
}

body.theme-material .post-actions button,
body.theme-material .feed-actions button,
body.theme-material .reaction-btn {
    border-radius: var(--md-radius-xs);
    color: var(--md-on-surface-variant);
}

body.theme-material .post-actions button:hover,
body.theme-material .feed-actions button:hover,
body.theme-material .reaction-btn:hover {
    background: var(--md-surface-alt);
}

body.theme-material .feed-actions {
    border-top-color: var(--md-border);
}

body.theme-material .user-name-link {
    color: var(--md-on-surface);
}

body.theme-material .user-name-link:hover {
    color: var(--md-primary);
}

body.theme-material .poll-box {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-md);
}

body.theme-material .poll-option-box {
    border-radius: var(--md-radius-sm);
}

body.theme-material .poll-option-box:hover {
    background: var(--md-surface-alt);
}

body.theme-material .poll-option-box.voted {
    background: var(--md-primary-tint);
    border-color: var(--md-primary);
}

body.theme-material .progress,
body.theme-material .progress-bar {
    border-radius: var(--md-radius-xs);
}

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

body.theme-material .shared-post-card {
    background: var(--md-surface-alt);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-md);
}

body.theme-material .shared-post-card:hover {
    background: var(--md-surface);
}

body.theme-material .shared-post-card .feed-image {
    border-radius: var(--md-radius-sm);
}

body.theme-material .shared-post-card .feed-image-gallery {
    border-radius: var(--md-radius-sm);
}

/* Multi-photo post composer preview grid (dashboard/post-modal.blade.php +
   dashboards/index.js) - same sharp/structured/bordered treatment as the
   rest of this Feed/Dashboard section. */
body.theme-material .multi-img-tile {
    border-radius: var(--md-radius-sm);
    background: var(--md-surface-alt);
}

body.theme-material .multi-img-add-more {
    border-radius: var(--md-radius-xs);
    border-color: var(--md-primary);
    color: var(--md-primary);
}

body.theme-material .multi-img-add-more:hover {
    background: var(--md-primary-tint);
}

/* =======================================================================
   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);
    }
}