/* SYL Portal - shared polish for the admin, mentor and student areas.
   Loaded from layouts/header.php. Everything is scoped to body.app-shell so the public pages are unaffected. */

:root {
    --syl-primary: #1E40AF;
    --syl-ink: #0F172A;
    --syl-bg: #F4F6FB;
    --syl-line: #E2E8F0;
}

html { scroll-behavior: smooth; }

body.app-shell {
    background: var(--syl-bg);
    color: var(--syl-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- Type: calmer weights and spacing, readable minimum size ---------------------------- */
.app-shell .font-black { font-weight: 800; }
.app-shell .text-\[8px\],
.app-shell .text-\[9px\] { font-size: 10px; line-height: 1.3; }
.app-shell .tracking-\[0\.3em\],
.app-shell .tracking-\[0\.25em\] { letter-spacing: 0.16em; }
.app-shell .tracking-\[0\.2em\]  { letter-spacing: 0.12em; }
.app-shell .tracking-widest      { letter-spacing: 0.1em; }
.app-shell h1, .app-shell h2, .app-shell h3 { letter-spacing: -0.015em; text-wrap: balance; }
.app-shell p { text-wrap: pretty; }

/* ---- Shape and depth: one consistent card style across all pages ------------------------ */
.app-shell main .rounded-\[4rem\],
.app-shell main .rounded-\[3\.5rem\],
.app-shell main .rounded-\[3rem\]   { border-radius: 1.5rem; }
.app-shell main .rounded-\[2\.5rem\],
.app-shell main .rounded-\[2rem\]   { border-radius: 1.25rem; }

@media (min-width: 768px) {
    .app-shell main .p-16 { padding: 2.25rem; }
    .app-shell main .p-12 { padding: 2rem; }
    .app-shell main .p-10 { padding: 1.75rem; }
}

/* Soft, neutral shadows instead of large coloured glows */
.app-shell main .shadow-xl,
.app-shell main .shadow-2xl {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px -14px rgba(15, 23, 42, 0.18);
}
.app-shell main .shadow-sm {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* ---- Page entrance ---------------------------------------------------------------------- */
@keyframes syl-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.app-shell main { animation: syl-rise 0.35s ease-out both; }

/* ---- Cards and tables ------------------------------------------------------------------- */
.app-shell main .bg-white.border {
    border-color: var(--syl-line);
}
.app-shell main tbody tr { transition: background-color 0.15s ease; }
.app-shell main tbody tr:hover { background-color: rgba(30, 64, 175, 0.035); }
.app-shell main th { white-space: nowrap; }

/* ---- Forms ------------------------------------------------------------------------------ */
.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.app-shell select,
.app-shell textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.app-shell input::placeholder,
.app-shell textarea::placeholder { color: #94A3B8; }

/* ---- Keyboard focus (visible for keyboard users only) ---------------------------------- */
.app-shell a:focus-visible,
.app-shell button:focus-visible,
.app-shell [tabindex]:focus-visible,
.app-shell summary:focus-visible {
    outline: 2px solid var(--syl-primary);
    outline-offset: 2px;
    border-radius: 0.5rem;
}
.app-shell #mainSidebar a:focus-visible,
.app-shell #mainSidebar button:focus-visible { outline-color: #93C5FD; }

/* ---- Scrollbars ------------------------------------------------------------------------- */
.app-shell { scrollbar-color: #CBD5E1 transparent; scrollbar-width: thin; }
.app-shell ::-webkit-scrollbar { width: 8px; height: 8px; }
.app-shell ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.app-shell ::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: content-box; border: 2px solid transparent; }

::selection { background: rgba(30, 64, 175, 0.18); }

/* ---- Dropdowns that also open by tap / keyboard (hover alone doesn't work on phones) ---- */
.app-shell .syl-dropdown:focus-within > div.pointer-events-none {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* ---- Phones: respect the notch and the home bar ----------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
    .app-shell nav.fixed.bottom-0 { padding-bottom: calc(0.375rem + env(safe-area-inset-bottom)); }
    .app-shell #pwa-mobile-banner { margin-bottom: env(safe-area-inset-bottom); }
}

/* ---- Running as an installed app -------------------------------------------------------- */
@media (display-mode: standalone) {
    body.app-shell {
        overscroll-behavior-y: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .app-shell input, .app-shell textarea, .app-shell select,
    .app-shell main p, .app-shell main td, .app-shell main h1, .app-shell main h2, .app-shell main h3 {
        -webkit-user-select: text;
        user-select: text;
    }
    .app-shell > header { padding-top: env(safe-area-inset-top); }
}

/* ---- Respect "reduce motion" ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .app-shell *, .app-shell *::before, .app-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .app-shell #mainSidebar, .app-shell > header, .app-shell nav.fixed, #pwa-mobile-banner { display: none !important; }
    .app-shell main { padding: 0 !important; animation: none; }
}