/* ==========================================================================
   AOrbit Cloud — Admin Panel Design System
   Palette, type and layout are tenant-brand-driven (see school_configs)
   with sane defaults below. All rules external per project requirements —
   no inline <style> in Blade views.
   ========================================================================== */

:root {
    /* Brand (overridable per-tenant via inline <style> block from SchoolConfig) */
    --aorbit-primary: #0e54a3;
    --aorbit-primary-light: #1674DF;
    --aorbit-secondary: #E6A100;

    /* Neutrals */
    --aorbit-bg: #F4F5FA;
    --aorbit-surface: #FFFFFF;
    --aorbit-ink: #1F2A24;
    --aorbit-muted: #6B7280;
    --aorbit-border: #E4E6EE;
    --aorbit-rail-bg: #0e54a3;

    /* Semantic */
    --aorbit-success: #1F9254;
    --aorbit-danger: #D64545;
    --aorbit-warning: #E6A100;

    /* Layout */
    --aorbit-rail-width: 72px;
    --aorbit-sidebar-width: 232px;
    --aorbit-radius: 14px;
    --aorbit-radius-sm: 10px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--aorbit-bg);
    color: var(--aorbit-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9375rem;
}

h1, h2, h3, h4, h5, h6,
.aorbit-display {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 600;
    color: var(--aorbit-ink);
    letter-spacing: -0.01em;
}

a {
    text-decoration: none;
}

/* ------------------------------------------------------------------------
   App shell
   ------------------------------------------------------------------------ */

.aorbit-shell {
    display: flex;
    min-height: 100vh;
}

/* Icon rail — far-left column of top-level module icons */
.aorbit-rail {
    width: var(--aorbit-rail-width);
    background: var(--aorbit-rail-bg);
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 8px;
}

.aorbit-rail-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--aorbit-secondary);
    color: var(--aorbit-rail-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    margin-bottom: 16px;
}

.aorbit-rail-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.05rem;
    transition: background-color .15s ease, color .15s ease;
}

.aorbit-rail-icon:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.aorbit-rail-icon.active {
    color: #fff;
    background: var(--aorbit-primary-light);
}

/* Secondary sidebar — grouped nav with section labels */
.aorbit-sidebar {
    width: var(--aorbit-sidebar-width);
    background: var(--aorbit-surface);
    border-right: 1px solid var(--aorbit-border);
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    padding: 22px 18px;
}

.aorbit-sidebar-brand {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--aorbit-primary);
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aorbit-nav-section {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--aorbit-muted);
    font-weight: 600;
    margin: 18px 0 8px 10px;
}

.aorbit-nav-section:first-of-type {
    margin-top: 0;
}

.aorbit-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--aorbit-radius-sm);
    color: var(--aorbit-ink);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.aorbit-nav-link:hover {
    background: var(--aorbit-bg);
    color: var(--aorbit-ink);
}

.aorbit-nav-link.active {
    background: color-mix(in srgb, var(--aorbit-primary) 12%, white);
    color: var(--aorbit-primary);
}

.aorbit-nav-link .bi {
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.aorbit-sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--aorbit-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.aorbit-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--aorbit-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.aorbit-sidebar-footer .name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.1;
}

.aorbit-sidebar-footer .role {
    font-size: 0.72rem;
    color: var(--aorbit-muted);
}

/* Main column */
.aorbit-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.aorbit-topbar {
    background: var(--aorbit-surface);
    border-bottom: 1px solid var(--aorbit-border);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.aorbit-topbar-title {
    font-size: 1.15rem;
    margin: 0;
    white-space: nowrap;
}

.aorbit-search {
    flex: 1;
    max-width: 420px;
    position: relative;
}

.aorbit-search input {
    background: var(--aorbit-bg);
    border: 1px solid var(--aorbit-border);
    border-radius: 999px;
    padding: 8px 14px 8px 36px;
    font-size: 0.85rem;
    width: 100%;
}

.aorbit-search .bi {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--aorbit-muted);
}

.aorbit-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.aorbit-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--aorbit-border);
    background: var(--aorbit-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aorbit-ink);
    position: relative;
    text-decoration: none;
    flex-shrink: 0;
}

.aorbit-icon-btn .dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aorbit-danger);
}

.aorbit-content {
    padding: 24px;
    flex: 1;
}

/* ------------------------------------------------------------------------
   Cards, stats, badges
   ------------------------------------------------------------------------ */

.aorbit-card {
    background: var(--aorbit-surface);
    border: 1px solid var(--aorbit-border);
    border-radius: var(--aorbit-radius);
    box-shadow: 0 1px 2px rgba(20, 30, 20, 0.04);
}

.aorbit-card-body {
    padding: 20px 22px;
}

.aorbit-stat-card {
    padding: 18px 20px;
}

.aorbit-stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--aorbit-muted);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.aorbit-stat-value {
    font-family: 'Sora', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
}

/* The one bold, brand-forward element on the dashboard: the active
   term ribbon. Deliberately the single saturated block on the page. */
.aorbit-term-ribbon {
    background: linear-gradient(135deg, var(--aorbit-primary) 0%, var(--aorbit-primary-light) 100%);
    color: #fff;
    border-radius: var(--aorbit-radius);
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.aorbit-term-ribbon .eyebrow {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

.aorbit-term-ribbon .label {
    font-family: 'Sora', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 2px;
}

.aorbit-term-ribbon .days-left {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
}

.aorbit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--aorbit-secondary) 18%, white);
    color: #7A5900;
}

.aorbit-badge.is-role {
    background: color-mix(in srgb, var(--aorbit-primary) 12%, white);
    color: var(--aorbit-primary);
}

.aorbit-badge.is-muted {
    background: #EEF0F4;
    color: var(--aorbit-muted);
}

.aorbit-badge.is-success {
    background: #E3F5EA;
    color: #1F8A4C;
}

.aorbit-badge.is-danger {
    background: #FBE7E7;
    color: #C43D3D;
}

/* Buttons */
.aorbit-btn-primary {
    background-color: var(--aorbit-primary);
    border-color: var(--aorbit-primary);
    color: #fff;
    border-radius: var(--aorbit-radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 9px 18px;
}

.aorbit-btn-primary:hover {
    background-color: var(--aorbit-primary-light);
    border-color: var(--aorbit-primary-light);
    color: #fff;
}

.aorbit-btn-ghost {
    background: transparent;
    border: 1px solid var(--aorbit-border);
    color: var(--aorbit-ink);
    border-radius: var(--aorbit-radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 9px 16px;
}

/* Tables */
.aorbit-table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--aorbit-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--aorbit-border);
    padding: 10px 12px;
}

.aorbit-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--aorbit-border);
    vertical-align: middle;
}

.aorbit-table tbody tr:last-child td {
    border-bottom: none;
}

/* ------------------------------------------------------------------------
   Auth (login) page
   ------------------------------------------------------------------------ */

.aorbit-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background: var(--aorbit-bg);
}

/* Responsive layered background — soft drifting color blobs built
   from the school's own brand colors (falls back to the default
   green if a page hasn't set --aorbit-primary/secondary), plus a
   faint dot grid for texture. Sizes and blob positions scale with
   viewport units so it holds up from phone to ultra-wide, rather
   than a fixed-size image that would crop badly on some screens. */
.aorbit-auth-page::before,
.aorbit-auth-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    z-index: 0;
    animation: aorbitAuthDrift 18s ease-in-out infinite;
}

.aorbit-auth-page::before {
    width: min(60vw, 520px);
    height: min(60vw, 520px);
    top: -15%;
    left: -10%;
    background: var(--aorbit-primary, #3E7B27);
}

.aorbit-auth-page::after {
    width: min(50vw, 440px);
    height: min(50vw, 440px);
    bottom: -15%;
    right: -8%;
    background: var(--aorbit-secondary, #8FBF6B);
    animation-delay: 4s;
}

.aorbit-auth-page-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(20, 48, 15, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(circle at center, #000 0%, transparent 75%);
}

.aorbit-auth-card,
.aorbit-form-card {
    position: relative;
    z-index: 1;
}

@keyframes aorbitAuthDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(3%, 4%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .aorbit-auth-page::before,
    .aorbit-auth-page::after {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .aorbit-auth-page::before,
    .aorbit-auth-page::after {
        opacity: 0.25;
    }
}

.aorbit-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--aorbit-surface);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(20, 48, 15, 0.08);
    padding: 34px 32px;
}

.aorbit-auth-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--aorbit-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    margin-bottom: 18px;
}

/* Password show/hide toggle — injected automatically by
   password-toggle.js around every password input in the app. */
.aorbit-password-wrap {
    position: relative;
}

.aorbit-password-wrap input {
    padding-right: 40px;
}

.aorbit-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--aorbit-muted);
    padding: 4px 6px;
    line-height: 1;
}

.aorbit-password-toggle:hover {
    color: var(--aorbit-ink);
}

/* Wider variant of the auth card, for the public guardian
   self-registration form (multi-field, two-column on desktop). */
.aorbit-public-page {
    min-height: 100vh;
    background: radial-gradient(circle at top left, #EAF2E6 0%, var(--aorbit-bg) 55%);
    padding: 40px 20px;
}

.aorbit-form-card {
    max-width: 920px;
    margin: 0 auto;
    background: var(--aorbit-surface);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(20, 48, 15, 0.08);
    padding: 34px 36px;
}

/* ------------------------------------------------------------------------
   Mega Menu nav style — the default alternative to the persistent
   sidebar. A single trigger button opens a full-screen dropdown
   covering the whole viewport, with every nav section laid out as a
   wide multi-column grid instead of a narrow vertical list. See
   layouts/admin.blade.php's $usesMegaMenu branch and
   NavPreferenceController for the toggle.
   ------------------------------------------------------------------------ */

.aorbit-mega-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--aorbit-radius-sm);
    border: none;
    background: var(--aorbit-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.aorbit-mega-trigger:hover {
    background: var(--aorbit-primary-light);
}

.offcanvas.aorbit-mega-menu {
    height: 100vh !important;
    max-height: 100vh;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.offcanvas.aorbit-mega-menu .offcanvas-body {
    padding: 8px 28px 28px;
    overflow-y: auto;
}

/* Reflows the same .aorbit-nav-section/.aorbit-nav-link markup used in
   the sidebar into wide columns instead of a single vertical list. */
.aorbit-mega-grid {
    column-width: 220px;
    column-gap: 32px;
}

.aorbit-mega-grid .aorbit-nav-section {
    break-after: avoid-column;
    margin-top: 22px;
}

.aorbit-mega-grid .aorbit-nav-link {
    break-inside: avoid-column;
    padding: 10px 12px;
    font-size: 0.9rem;
}

.aorbit-mega-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--aorbit-border);
}

.aorbit-mega-footer .name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.1;
}

.aorbit-mega-footer .role {
    font-size: 0.72rem;
    color: var(--aorbit-muted);
}

.aorbit-nav-style-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    margin-top: 10px;
    border: 1px dashed var(--aorbit-border);
    border-radius: var(--aorbit-radius-sm);
    background: none;
    color: var(--aorbit-muted);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
}

.aorbit-nav-style-toggle:hover {
    color: var(--aorbit-primary);
    border-color: var(--aorbit-primary);
}

@media (max-width: 767.98px) {
    .aorbit-mega-grid {
        column-width: 100%;
    }
}

/* ------------------------------------------------------------------------
   Edge/Chrome autofill "blinking" fix — see the matching comment
/* ------------------------------------------------------------------------
   Edge/Chrome autofill highlight animation — see admin.js for the
   separate (and more important) fix for Tom Select dropdowns opening
   during Edge's autofill sweep. This part is unrelated: Chromium
   applies its own yellow-highlight animation to every autofilled
   input via an internal CSS transition, which some code can react to
   and cause visual churn. Freezing the transition duration
   neutralizes it before it visibly fires, without changing how the
   field actually looks.
   ------------------------------------------------------------------------ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

/* ------------------------------------------------------------------------
   Responsive behavior
   ------------------------------------------------------------------------ */

@media (min-width: 992px) {
    .aorbit-rail,
    .aorbit-sidebar {
        display: flex;
    }

    .aorbit-mobile-trigger {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .aorbit-topbar-title {
        font-size: 1rem;
    }

    .aorbit-search {
        display: none;
    }

    .aorbit-content {
        padding: 16px;
    }

    .aorbit-term-ribbon {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ------------------------------------------------------------------------
   Mobile responsiveness — targets patterns repeated across many admin
   pages (header row with a title + action button, generously-padded
   profile-style cards) rather than needing every individual view
   touched. Bootstrap's grid/table-responsive/flex-wrap utilities
   already used throughout the app handle most of the rest.
   ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .aorbit-topbar {
        padding: 10px 14px;
        gap: 10px;
    }

    .aorbit-content {
        padding: 12px;
    }

    /* The "title on the left, action button on the right" header used
       at the top of nearly every index/show page — force it to wrap
       instead of squeezing/overflowing on narrow screens. */
    .aorbit-content > .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .aorbit-content .aorbit-card-body {
        padding: 18px;
    }

    /* Touch-friendly form controls on mobile only — desktop keeps its
       denser layout since admin staff are usually on a mouse/keyboard. */
    .aorbit-content .btn,
    .aorbit-content .form-control,
    .aorbit-content .form-select {
        min-height: 42px;
    }

    .aorbit-content .btn-sm {
        min-height: 34px;
    }

    /* Modal footers with several side-by-side buttons often overflow
       a phone screen — stack them instead. */
    .modal-footer {
        flex-wrap: wrap;
    }

    .modal-footer > * {
        flex: 1 1 auto;
    }

    .aorbit-avatar,
    .aorbit-rail-logo {
        flex-shrink: 0;
    }
}

/* ------------------------------------------------------------------------
   Timetable grid view
   ------------------------------------------------------------------------ */

.aorbit-grid-table {
    border-collapse: separate;
    border-spacing: 8px;
}

.aorbit-grid-table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--aorbit-muted);
    font-weight: 600;
    border: none;
}

.aorbit-grid-time-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--aorbit-muted);
    white-space: nowrap;
}

.aorbit-grid-slot {
    border-left: 4px solid var(--slot-color, var(--aorbit-primary));
    background: var(--aorbit-surface);
    border-top: 1px solid var(--aorbit-border);
    border-right: 1px solid var(--aorbit-border);
    border-bottom: 1px solid var(--aorbit-border);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    min-width: 140px;
}

.aorbit-grid-slot .subject {
    font-weight: 600;
    font-size: 0.85rem;
}

.aorbit-grid-slot .meta {
    font-size: 0.72rem;
    color: var(--aorbit-muted);
}

.aorbit-grid-empty {
    background-image: repeating-linear-gradient(45deg, var(--aorbit-bg), var(--aorbit-bg) 6px, #ECEDF3 6px, #ECEDF3 12px);
    border-radius: 8px;
    min-height: 74px;
    min-width: 140px;
}