/* ============================================================
   IDCRAFT · modern-ui.css
   Theme corrections + modern UI overlay + responsive polish.
   Loaded AFTER styles.css and the inline tokens in layout.html,
   so it can safely override Bootstrap and earlier rules.
   ============================================================ */

/* ─── EXTRA DESIGN TOKENS ──────────────────────────────────── */
:root {
    /* Brand-aware accents reused across components */
    --c-accent-soft: rgba(255, 92, 53, 0.12);
    --c-accent-ring: rgba(255, 92, 53, 0.30);
    --c-accent-grad: linear-gradient(135deg, #ff5c35 0%, #ffb347 100%);

    /* Glass + elevated surface */
    --c-glass:        rgba(255, 255, 255, 0.65);
    --c-glass-stroke: rgba(255, 255, 255, 0.55);
    --c-elev:         #ffffff;

    /* Focus ring used by all interactive elements */
    --focus-ring:     0 0 0 3px rgba(255, 92, 53, 0.28);

    /* Fluid spacing scale (clamps grow nicely from phone → desktop) */
    --space-1:  clamp(.25rem, .4vw,  .375rem);
    --space-2:  clamp(.5rem,  .8vw,  .75rem);
    --space-3:  clamp(.75rem, 1.2vw, 1rem);
    --space-4:  clamp(1rem,   1.8vw, 1.5rem);
    --space-5:  clamp(1.5rem, 3vw,   2.5rem);
    --space-6:  clamp(2rem,   5vw,   4rem);

    /* Fluid type scale */
    --fs-xs:    clamp(.72rem, .68rem + .15vw, .80rem);
    --fs-sm:    clamp(.82rem, .78rem + .18vw, .92rem);
    --fs-base:  clamp(.92rem, .88rem + .25vw, 1.05rem);
    --fs-lg:    clamp(1.05rem, .98rem + .4vw, 1.25rem);
    --fs-xl:    clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    --fs-2xl:   clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
    --fs-3xl:   clamp(2.2rem, 1.4rem + 3.5vw, 3.6rem);

    /* Motion tokens */
    --dur-fast:   150ms;
    --dur-base:   220ms;
    --dur-slow:   380ms;

    color-scheme: light;
}

[data-theme="dark"] {
    --c-accent-soft: rgba(255, 124, 90, 0.18);
    --c-accent-ring: rgba(255, 124, 90, 0.40);

    --c-glass:        rgba(28, 28, 30, 0.62);
    --c-glass-stroke: rgba(255, 255, 255, 0.08);
    --c-elev:         #1c1c1e;

    --focus-ring:     0 0 0 3px rgba(255, 124, 90, 0.40);

    color-scheme: dark;
}

/* ─── RESPECT REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── GLOBAL CORRECTIONS ──────────────────────────────────── */
body {
    background: var(--c-surface-2);
    color: var(--c-ink);
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Better link defaults */
a { color: var(--c-ink); }
a:hover { color: var(--c-accent); }

/* Selection color */
::selection { background: var(--c-accent); color: #fff; }

/* Scrollbar — slim, theme-aware */
* { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-ink-3); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ─── ACCESSIBLE FOCUS ─────────────────────────────────────── */
:where(a, button, [role="button"], .btn, .nav-btn, .form-control,
       .form-select, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--c-accent) !important;
}

/* Skip-link helper (add to template if desired) */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 8px;
    padding: 8px 14px;
    background: var(--c-ink);
    color: var(--c-surface);
    border-radius: 8px;
    z-index: 5000;
}
.skip-to-content:focus { left: 8px; }

/* ─── DARK-MODE FIXES FOR EXISTING COMPONENTS ─────────────── */

/* The inline style in layout.html sets .modal-header background to
   var(--c-ink). In dark mode --c-ink is near-white → white text on
   white. Override here to keep header dark-on-light always. */
.modal-content {
    background: var(--c-surface);
    color: var(--c-ink);
    border-color: var(--c-border);
}
.modal-header {
    background: #0f0f0f;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.modal-header .modal-title { color: #fff; }
.modal-header .btn-close,
.modal-header .btn-close-white { filter: invert(1) grayscale(100%) brightness(2); opacity: .85; }
.modal-body { background: var(--c-surface); color: var(--c-ink); }
.modal-footer {
    background: var(--c-surface-2);
    color: var(--c-ink);
    border-top: 1px solid var(--c-border);
}

/* Bootstrap btn-* — make them respond to theme */
.btn-dark {
    background: var(--c-ink);
    color: var(--c-surface);
    border-color: var(--c-ink);
}
.btn-dark:hover, .btn-dark:focus {
    background: var(--c-ink-2);
    color: var(--c-surface);
    border-color: var(--c-ink-2);
}
.btn-outline-dark {
    color: var(--c-ink);
    border-color: var(--c-border-strong);
    background: transparent;
}
.btn-outline-dark:hover {
    background: var(--c-ink);
    color: var(--c-surface);
    border-color: var(--c-ink);
}
.btn-outline-secondary {
    color: var(--c-ink-2);
    border-color: var(--c-border-strong);
    background: transparent;
}
.btn-outline-secondary:hover {
    background: var(--c-surface-3);
    color: var(--c-ink);
    border-color: var(--c-border-strong);
}
.btn-outline-danger {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: transparent;
}
.btn-outline-danger:hover {
    background: var(--c-danger);
    color: #fff;
}

/* Bootstrap nav-pills used in sign-in modal */
.nav-pills {
    background: var(--c-surface-2) !important;
    border: 1px solid var(--c-border);
}
.nav-pills .nav-link {
    color: var(--c-ink-2);
    background: transparent;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-pills .nav-link.active {
    background: var(--c-surface) !important;
    color: var(--c-ink) !important;
    box-shadow: var(--shadow-sm);
}

/* Form controls — fix focus shadow that was invisible on dark */
.form-control, .form-select, .form-floating > .form-control,
.form-floating > .form-select, .form-floating > textarea {
    background: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-border-strong);
    transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
}
.form-control::placeholder, textarea::placeholder { color: var(--c-ink-3); opacity: .8; }
.form-control:focus, .form-select:focus {
    background: var(--c-surface);
    color: var(--c-ink);
    border-color: var(--c-accent);
    box-shadow: var(--focus-ring);
}
.form-floating > label { color: var(--c-ink-3); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label { color: var(--c-ink-2); opacity: .9; }

/* File input theme */
.form-control[type="file"]::file-selector-button {
    background: var(--c-surface-2);
    color: var(--c-ink);
    border: 0;
    border-right: 1px solid var(--c-border);
    padding: .5rem 1rem;
    margin-right: .75rem;
    transition: background var(--dur-fast);
}
.form-control[type="file"]::file-selector-button:hover { background: var(--c-surface-3); }

/* Tables (used in dashboard / table.html) */
.table {
    color: var(--c-ink);
    border-color: var(--c-border);
    --bs-table-bg: transparent;
    --bs-table-color: var(--c-ink);
    --bs-table-striped-bg: var(--c-surface-2);
    --bs-table-striped-color: var(--c-ink);
    --bs-table-hover-bg: var(--c-surface-3);
    --bs-table-hover-color: var(--c-ink);
    --bs-table-border-color: var(--c-border);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--c-ink);
    border-bottom-color: var(--c-border);
}
.table thead th {
    background: var(--c-surface-2);
    color: var(--c-ink-2);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: .05em;
    border-bottom: 1px solid var(--c-border-strong);
}

/* Cards */
.card {
    background: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-spring),
                box-shadow var(--dur-base);
}
.card-header, .card-footer {
    background: var(--c-surface-2);
    border-color: var(--c-border);
    color: var(--c-ink);
}

/* Bootstrap dropdown menus (used by Bootstrap, not the .nav-dropdown) */
.dropdown-menu {
    background: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.dropdown-item { color: var(--c-ink-2); border-radius: 8px; }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--c-surface-2);
    color: var(--c-ink);
}
.dropdown-divider { border-color: var(--c-border); }

/* List groups */
.list-group-item {
    background: var(--c-surface);
    color: var(--c-ink);
    border-color: var(--c-border);
}

/* Badges */
.badge { font-weight: 600; letter-spacing: .02em; }
.badge.bg-light { background: var(--c-surface-3) !important; color: var(--c-ink) !important; }

/* Alerts theme-aware */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink);
}
.alert-success { background: rgba(26, 148, 84, .12); border-color: rgba(26, 148, 84, .25); color: var(--c-success); }
.alert-danger  { background: rgba(217, 48, 37,  .12); border-color: rgba(217, 48, 37,  .25); color: var(--c-danger);  }
.alert-warning { background: rgba(229, 148, 0,  .14); border-color: rgba(229, 148, 0,  .28); color: var(--c-warning); }
.alert-info    { background: rgba(26, 115, 232, .12); border-color: rgba(26, 115, 232, .25); color: var(--c-info);    }

/* Carousel arrows for reviews */
.carousel-control-prev-icon,
.carousel-control-next-icon { filter: invert(var(--theme-icon-invert, 0)); }
[data-theme="dark"] { --theme-icon-invert: 1; }

/* HR */
hr { border-top: 1px solid var(--c-border); opacity: 1; }

/* ─── MODERN UI COMPONENTS (ready-to-use utility classes) ── */

/* Section wrapper with consistent fluid padding */
.idc-section {
    padding-block: var(--space-6);
    padding-inline: var(--space-4);
}
.idc-container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Glassmorphism panel */
.idc-glass {
    background: var(--c-glass);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--c-glass-stroke);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Modern card with hover lift */
.idc-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-spring),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base);
    will-change: transform;
}
.idc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-border-strong);
}

/* Subtle gradient border (use as wrapper around .idc-card) */
.idc-card-grad {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
}
.idc-card-grad > * {
    border-radius: calc(var(--radius-lg) - 1px);
    background: var(--c-surface);
}

/* Pill-style chip */
.idc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-ink-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .02em;
}
.idc-chip.idc-chip-accent { background: var(--c-accent-soft); border-color: var(--c-accent-ring); color: var(--c-accent); }
.idc-chip.idc-chip-success { background: rgba(26,148,84,.12); border-color: rgba(26,148,84,.28); color: var(--c-success); }
.idc-chip.idc-chip-warn { background: rgba(229,148,0,.14); border-color: rgba(229,148,0,.32); color: var(--c-warning); }

/* Buttons — modern sizing variants (works alongside Bootstrap) */
.idc-btn {
    --bg: var(--c-ink);
    --fg: var(--c-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font: 600 var(--fs-sm)/1 var(--font-body);
    text-decoration: none;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-base),
                background var(--dur-base),
                color var(--dur-base);
    user-select: none;
}
.idc-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.idc-btn:active { transform: translateY(0); }
.idc-btn-accent { --bg: var(--c-accent); --fg: #fff; }
.idc-btn-accent:hover { background: #ff7349; color: #fff; }
.idc-btn-grad   { background: var(--c-accent-grad); color: #fff; }
.idc-btn-ghost {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-border-strong);
}
.idc-btn-ghost:hover { background: var(--c-surface-2); }
.idc-btn-sm { padding: 8px 14px; font-size: var(--fs-xs); }
.idc-btn-lg { padding: 14px 28px; font-size: var(--fs-base); }
.idc-btn[disabled], .idc-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* Gradient heading text */
.idc-text-grad {
    background: var(--c-accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Skeleton loader (use class while content is loading) */
.idc-skeleton {
    background: linear-gradient(90deg,
        var(--c-surface-2) 0%,
        var(--c-surface-3) 40%,
        var(--c-surface-2) 80%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: idcShimmer 1.4s linear infinite;
    color: transparent !important;
    user-select: none;
}
@keyframes idcShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Reveal-on-scroll helper (toggle .is-visible via IO observer if used) */
.idc-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.idc-reveal.is-visible { opacity: 1; transform: none; }

/* Aspect ratio media wrapper */
.idc-media { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--c-surface-2); }
.idc-media > img, .idc-media > video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Fluid grid (auto-fill) — use for card grids */
.idc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: var(--space-4);
}
.idc-grid-sm { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.idc-grid-lg { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

/* Stack utility — vertical rhythm */
.idc-stack > * + * { margin-top: var(--space-3); }
.idc-stack-sm > * + * { margin-top: var(--space-2); }
.idc-stack-lg > * + * { margin-top: var(--space-5); }

/* Center util */
.idc-center { display: grid; place-items: center; }

/* ─── NAVBAR / DROPDOWN POLISH ────────────────────────────── */

/* Smoother dropdown caret + add ARIA-friendly affordance */
.nav-links .nav-dropdown:hover > a,
.nav-links .nav-dropdown:focus-within > a { color: #fff; background: rgba(255,255,255,.08); }

/* Dropdown items get small icon column */
.nav-dropdown-menu li a i { width: 18px; text-align: center; opacity: .8; }

/* Bottom nav: animated active dot + scale on tap */
.bottom-nav a {
    transition: color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.bottom-nav a:active { transform: scale(.94); }
.bottom-nav a.active i { transform: translateY(-1px); }

/* Toast: slight glass + improved dark-mode legibility */
.idcraft-toast {
    background: var(--c-surface);
    color: var(--c-ink);
    border-color: var(--c-border-strong);
}
.idcraft-toast .toast-body { color: var(--c-ink); }
.idcraft-toast .toast-close { color: var(--c-ink-3); }
.idcraft-toast .toast-close:hover { color: var(--c-ink); }

/* ─── AUTH MODAL POLISH ───────────────────────────────────── */
#signInModal .modal-dialog { max-width: min(440px, calc(100vw - 24px)); }
#signInModal .form-floating > .form-control { height: 56px; }

/* ─── HOME REVIEW + MARQUEE TOUCHES ───────────────────────── */
.review-card-new {
    transition: transform var(--dur-base) var(--ease-spring),
                box-shadow var(--dur-base),
                border-color var(--dur-base);
}
.review-card-new:hover { border-color: var(--c-border-strong); }
.school-chip { transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.school-chip:hover { background: var(--c-surface-2); }

/* ─── PRINT FRIENDLINESS ──────────────────────────────────── */
@media print {
    .idcraft-nav, .bottom-nav, .mobile-menu, .social-float,
    .site-footer, .toast-stack, .nav-hamburger { display: none !important; }
    body { padding: 0 !important; background: #fff !important; color: #000 !important; }
}

/* ─── RESPONSIVE FINE-TUNING ──────────────────────────────── */

/* Tablet — tighten section padding */
@media (max-width: 991.98px) {
    .idc-section { padding-block: var(--space-5); }
    .modal-header { padding: 16px 18px; }
    .modal-body   { padding: 18px; }
    .modal-footer { padding: 12px 18px; }
}

/* Phone — make modals fit & touch targets bigger */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100vw - 1rem) !important;
    }
    .modal-content { border-radius: var(--radius-lg); }
    .form-floating > .form-control,
    .form-floating > .form-select { height: 52px; }
    .btn, .nav-btn, .idc-btn { min-height: 40px; }
    .idc-section { padding-block: var(--space-4); }
    .idc-container { padding-inline: 1rem; }

    /* Footer condense (footer is hidden on <md, but defensive) */
    .site-footer { padding: 28px 0 20px; }

    /* Reviews & cards margin on tiny screens */
    .review-card-new { padding: 18px; border-radius: 16px; }

    /* Tables: horizontal scroll wrapper */
    .table-responsive,
    .idc-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
        border: 1px solid var(--c-border);
    }
}

/* Very small phones — remove decorative blobs blur cost */
@media (max-width: 380px) {
    .hero-blob-3 { display: none; }
    .float-card  { display: none !important; }
}

/* Large desktops — give content room to breathe */
@media (min-width: 1440px) {
    .idc-container, .nav-inner { max-width: 1320px; }
}

/* High-density displays — sharper borders */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .idc-card, .card, .modal-content { border-width: .5px; }
}