/*
 * SRMS Page Components
 * ===================
 * Shared styling for the page-level patterns that ~170 views re-implement
 * inline: hero banners, KPI cards, section cards, empty states, and page
 * headers.
 *
 * SPECIFICITY CONTRACT (same as srms-ui.css)
 * ------------------------------------------
 * All rules here stay at single-class specificity with no !important (except
 * where noted). Views carry their own <style> blocks that appear later in the
 * document, so any view that already styles its hero/cards keeps winning and
 * keeps its current look. This sheet upgrades the views that never styled
 * theirs, and gives new work something to build on. Nothing existing breaks.
 *
 * TOKENS
 * ------
 * Consumes --srms-* (canonical) from srms-tokens.css. The unprefixed aliases
 * (--primary, --surface, etc.) resolve to the same values, so views that
 * still declare their own :root block are unaffected.
 *
 * NAMING
 * ------
 * .srms-hero is the canonical class for new work. We also style the legacy
 * .enroll-hero / .dash-hero class names at the same specificity, so views
 * using those in markup but not in their <style> get the upgrade for free.
 */

/* ============================================================ HERO ====== */

.srms-hero,
.enroll-hero,
.dash-hero {
    background: linear-gradient(135deg, var(--srms-blue-700) 0%, var(--srms-blue-600) 50%, var(--srms-blue-700) 100%);
    border-radius: var(--srms-radius-lg);
    padding: 24px 28px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px -30px rgba(37, 99, 235, 0.6);
    font-family: var(--srms-font-heading);
}

/* Soft radial glow in the top-right — gives the gradient depth without a
   heavy asset. Pointer-events:none so it never traps clicks. */
.srms-hero::before,
.enroll-hero::before,
.dash-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* --- avatar / icon chip ---
   :where() zeroes the parent's specificity, so these rules have the same
   specificity as a bare .hero-avatar (0,0,1). Views that style .hero-avatar
   in their own <style> block appear later in the document and win at equal
   specificity — preserving the "views that already styled theirs keep their
   look" contract. Without :where(), the 2-class selector would override
   views that use single-class selectors (e.g. stude_grades_view.php). */
:where(.srms-hero, .enroll-hero, .dash-hero) .hero-avatar,
:where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-avatar,
:where(.srms-hero, .enroll-hero, .dash-hero) .dash-hero-avatar {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
}

/* --- main text block --- */
:where(.srms-hero, .enroll-hero, .dash-hero) .hero-main,
:where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-main,
:where(.srms-hero, .enroll-hero, .dash-hero) .dash-hero-main {
    flex: 1;
    min-width: 200px;
}

:where(.srms-hero, .enroll-hero, .dash-hero) .hero-eyebrow,
:where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-eyebrow,
:where(.srms-hero, .enroll-hero, .dash-hero) .dash-hero-greeting {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

:where(.srms-hero, .enroll-hero, .dash-hero) .hero-name,
:where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-name,
:where(.srms-hero, .enroll-hero, .dash-hero) .dash-hero-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

:where(.srms-hero, .enroll-hero, .dash-hero) .hero-sub,
:where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-sub,
:where(.srms-hero, .enroll-hero, .dash-hero) .dash-hero-date {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* --- action chip / meta --- */
:where(.srms-hero, .enroll-hero, .dash-hero) .hero-meta,
:where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-meta,
:where(.srms-hero, .enroll-hero, .dash-hero) .dash-hero-quote {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

:where(.srms-hero, .enroll-hero, .dash-hero) .hero-chip,
:where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

:where(.srms-hero, .enroll-hero, .dash-hero) .hero-chip:hover,
:where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-chip:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    text-decoration: none;
}

:where(.srms-hero, .enroll-hero, .dash-hero) .hero-chip:focus-visible,
:where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-chip:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .srms-hero,
    .enroll-hero,
    .dash-hero {
        padding: 18px 20px;
    }

    :where(.srms-hero, .enroll-hero, .dash-hero) .hero-name,
    :where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-name,
    :where(.srms-hero, .enroll-hero, .dash-hero) .dash-hero-name {
        font-size: 1.05rem;
    }

    :where(.srms-hero, .enroll-hero, .dash-hero) .hero-avatar,
    :where(.srms-hero, .enroll-hero, .dash-hero) .srms-hero-avatar,
    :where(.srms-hero, .enroll-hero, .dash-hero) .dash-hero-avatar {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
}


/* ======================================================= PAGE HEADER ==== */
/* The .dash-header pattern: title + subtitle on the left, actions on the
   right, with a hairline divider below. Used by dashboard_admin etc. */

.srms-page-header,
.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--srms-line);
}

.srms-page-header h4,
.dash-header .dash-header-left h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--srms-ink);
    margin: 0;
    letter-spacing: -0.02em;
    font-family: var(--srms-font-heading);
}

.srms-page-header p,
.dash-header .dash-header-left p {
    font-size: 0.82rem;
    color: var(--srms-ink-3);
    margin: 2px 0 0;
}


/* ========================================================= KPI CARDS ==== */
/* The .kpi-grid + .kpi-card pattern from dashboard-instructor.css. The
   accent stripe (::before) and hover lift are the polished version; the
   flex-based .kpi-grid in dashboard_admin is less flexible, so we prefer
   the grid version and let the flex one keep its own styling. */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 1.5rem;
}

.kpi-card {
    background: var(--srms-surface);
    border: 1px solid var(--srms-line);
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    display: block;
    box-shadow: var(--srms-shadow-sm);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}

/* Top accent stripe — coloured by the variant modifier. */
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

/* Subtle tint wash on hover — opacity-animated so it doesn't repaint the
   whole card. */
.kpi-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.kpi-card:hover,
.kpi-card:focus {
    text-decoration: none;
    border-color: var(--srms-blue-600);
    transform: translateY(-3px);
    box-shadow: var(--srms-shadow-md);
}

.kpi-card:hover::after,
.kpi-card:focus::after {
    opacity: 1;
}

/* Accent variants — stripe + hover wash. */
.kpi-card--warning::before { background: var(--srms-amber-600); }
.kpi-card--info::before    { background: var(--srms-blue-600); }
.kpi-card--success::before { background: var(--srms-green-600); }
.kpi-card--purple::before  { background: var(--srms-purple-600); }
.kpi-card--danger::before  { background: var(--srms-red-600); }
.kpi-card--teal::before    { background: var(--srms-teal-600); }

.kpi-card--warning::after { background: linear-gradient(180deg, rgba(217, 119, 6, 0.05) 0%, transparent 60%); }
.kpi-card--info::after    { background: linear-gradient(180deg, rgba(37, 99, 235, 0.05) 0%, transparent 60%); }
.kpi-card--success::after { background: linear-gradient(180deg, rgba(22, 163, 74, 0.05) 0%, transparent 60%); }
.kpi-card--purple::after  { background: linear-gradient(180deg, rgba(124, 58, 237, 0.05) 0%, transparent 60%); }
.kpi-card--danger::after  { background: linear-gradient(180deg, rgba(220, 38, 38, 0.05) 0%, transparent 60%); }
.kpi-card--teal::after    { background: linear-gradient(180deg, rgba(13, 148, 136, 0.05) 0%, transparent 60%); }

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.kpi-icon--warning { background: var(--srms-amber-50); color: var(--srms-amber-600); }
.kpi-icon--info    { background: var(--srms-blue-50); color: var(--srms-blue-600); }
.kpi-icon--success { background: var(--srms-green-50); color: var(--srms-green-600); }
.kpi-icon--purple  { background: var(--srms-purple-50); color: var(--srms-purple-600); }
.kpi-icon--danger  { background: var(--srms-red-50); color: var(--srms-red-600); }
.kpi-icon--teal    { background: var(--srms-teal-50); color: var(--srms-teal-600); }

.kpi-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--srms-ink);
    line-height: 1;
    letter-spacing: -1px;
    font-family: var(--srms-font-heading);
}

.kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--srms-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
}


/* ===================================================== SECTION CARDS ==== */
/* .dash-card: the workhorse container for dashboard panels. Header with
   title + icon, body below, hairline divider between. */

.dash-card,
.srms-card {
    background: var(--srms-surface);
    border: 1px solid var(--srms-line);
    border-radius: 14px;
    box-shadow: var(--srms-shadow-sm);
    overflow: hidden;
    margin-bottom: 1rem;
}

.dash-card-header,
.srms-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--srms-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-card-header h5,
.srms-card-header h5 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--srms-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--srms-font-heading);
}

.dash-card-header h5 .ph,
.srms-card-header h5 .ph {
    font-size: 1.1rem;
    color: var(--srms-blue-600);
}

.dash-card-body,
.srms-card-body {
    padding: 16px 18px;
}


/* ======================================================= EMPTY STATE ==== */
.dash-empty,
.srms-empty {
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed var(--srms-line);
    border-radius: var(--srms-radius);
    background: var(--srms-surface);
}

.dash-empty-icon,
.srms-empty-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--srms-ink-faint);
}

.dash-empty h6,
.srms-empty h6 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--srms-ink);
    margin: 0 0 4px;
}

.dash-empty p,
.srms-empty p {
    font-size: 0.78rem;
    color: var(--srms-ink-3);
    margin: 0;
}


/* ============================================================ ALERTS ====
   Bootstrap 4 alerts are flat and colourless. This gives them a tinted
   background, a left rail, and a shadow — matching the toast design in
   srms-ui.css. !important is used here because Bootstrap's .alert has
   high specificity and we need to override its background/border. Views
   that already style .alert in their <style> block appear later in the
   document and still win. */

.alert {
    border-radius: var(--srms-radius-sm) !important;
    border: 1px solid var(--srms-line) !important;
    font-size: 0.875rem !important;
    padding: 14px 18px !important;
    box-shadow: var(--srms-shadow-sm) !important;
}

.alert-success {
    background: var(--srms-green-50) !important;
    color: #14532d !important;
    border-left: 4px solid var(--srms-green-600) !important;
}

.alert-danger,
.alert-error {
    background: var(--srms-red-50) !important;
    color: #7f1d1d !important;
    border-left: 4px solid var(--srms-red-600) !important;
}

.alert-warning {
    background: var(--srms-amber-50) !important;
    color: #78350f !important;
    border-left: 4px solid var(--srms-amber-600) !important;
}

.alert-info {
    background: var(--srms-blue-50) !important;
    color: #1e3a8a !important;
    border-left: 4px solid var(--srms-blue-600) !important;
}

.alert .close {
    opacity: 0.5 !important;
    font-size: 1.1rem !important;
    color: currentColor !important;
    text-shadow: none !important;
}

.alert .close:hover {
    opacity: 1 !important;
}


/* ===================================================== CONTENT PADDING ==
   The vendor .content-page uses padding: 0 15px 65px 15px. The top padding
   is intentionally 0 because margin-top: 70px already positions the page
   under the fixed topbar, and most views add their own top padding inside
   (.dashboard-wrap, .enroll-wrap, etc.). Adding top padding here would
   stack with the view's own and create a large gap below the topbar.

   We only widen the horizontal padding from the vendor's tight 15px to
   24px for breathing room. Top stays 0; bottom stays 65px. */

.content-page {
    padding: 0 var(--srms-content-pad-x) 65px var(--srms-content-pad-x);
}

/* Portal views already provide their phone-safe gutter through an inner
   container-fluid (or a page-specific wrapper). Keeping the desktop 24px
   here would stack both gutters and waste 36px per side on small screens. */
@media (max-width: 767.98px) {
    .content-page {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ======================================================= APP SURFACE ====
   The vendor leaves the body white. White cards on a white body have no
   separation — they rely entirely on border + shadow to be visible, which
   reads as flat and cluttered. A subtle off-white app shell (#f8fafc, the
   same --srms-surface-2 that cards already use internally) lets white
   cards lift naturally. This is the standard app-shell pattern (GitHub,
   Linear, Notion).

   It also softens the sidebar→content transition: instead of dark-navy →
   pure-white (a high-contrast color clash), it becomes dark-navy → pale
   grey, which reads as a deliberate layering instead of a seam.

   SCOPED to #wrapper: standalone auth/landing pages (login, lock-screen,
   home_page) include head.php but have their own self-contained design
   with its own body background. The app shell should not affect them. */

#wrapper body,
body:has(#wrapper) {
    background-color: var(--srms-surface-2);
}

/* ============================================== FOCUS-VISIBLE BASELINE ====
   Bootstrap 4 and the vendor theme have no consistent keyboard focus
   indicator. This adds one using the accent colour, scoped to
   :focus-visible so it only shows for keyboard navigation — mouse clicks
   stay clean. Matches the pattern already in sidebar-theme.css and
   srms-ui.css.

   SCOPED to #wrapper so standalone auth pages keep their own focus styles
   (main.css already has its own :focus-visible rules for login/landing). */

#wrapper a:focus-visible,
#wrapper button:focus-visible,
#wrapper .btn:focus-visible,
#wrapper .form-control:focus-visible,
#wrapper .custom-select:focus-visible,
#wrapper .nav-link:focus-visible,
#wrapper .dropdown-item:focus-visible,
#wrapper .page-link:focus-visible,
#wrapper .select2-container .select2-selection:focus-visible {
    outline: 2px solid var(--srms-accent);
    outline-offset: 2px;
}

/* Form controls already get a blue border on focus from Bootstrap; the
   outline ring would double up. Suppress the outline for those and let
   the border change carry the signal — but only if the border is actually
   changing (Bootstrap's .form-control:focus). */
#wrapper .form-control:focus-visible,
#wrapper .custom-select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--srms-accent-line);
}

/* Respect users who prefer less motion / no focus animations. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================================= PRINT =====
   The app shell sets body to #f8fafc (pale grey) so white cards lift on
   screen. In print, that grey wastes ink and looks dirty. ~20 print views
   don't set their own @media print { body { background:#fff } }, so this
   global rule catches them all. !important is needed because the screen
   rule is also !important-adjacent via specificity. Views that already set
   their own print background (also typically !important) appear later in
   the document and still win. */
@media print {
    body {
        background: #fff !important;
    }
}