/* Theme variables - the whole dark slate/teal palette lives here so a
   future white-label/alternate theme is a matter of overriding these,
   not hunting down hardcoded hex codes across templates. */
:root {
    --color-bg: #0f172a;           /* Slate-900 */
    --color-card: #1e293b;         /* Slate-800 */
    --color-border: #334155;       /* Slate-700 */
    --color-border-hover: #475569; /* Slate-600 */
    --color-text: #f1f5f9;         /* Slate-100 */
    --color-text-muted: #94a3b8;   /* Slate-400 */
    --color-text-subtle: #6c757d;
    --color-text-faint: #a0aec0;
    --color-accent: #0d9488;       /* Teal-600 */
    --color-accent-hover: #0f766e; /* Teal-700 */
    --color-error-bg: #451a1a;
    --color-error-text: #fca5a5;
    --color-error-border: #7f1d1d;
    --color-success-bg: #e6fffa;
    --color-success-text: #319795;
    --color-success-border: #b2f5ea;

    /* Per-shade variables, added 2026-07-09 - one per actual Tailwind
       slate/teal shade used across the app (see main.tt's tailwind.config,
       which points every bg-slate-900/text-teal-600/etc. utility class at
       these instead of Tailwind's own hardcoded defaults). Default values
       below are just Tailwind's real stock hex codes for each shade, so
       nothing changes visually until the [data-theme="ship_culture"]
       override further down actually overrides them. Existing content
       (light cards vs dark cards, whichever a page already uses) keeps
       working as-is either way, since remapping the WHOLE scale preserves
       every shade's relative lightness position, not just 2 flat colors -
       see project_cruiseapp_ship_culture_theme memory for the reasoning. */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-800: #115e59;
    --teal-900: #134e4a;
    --teal-950: #042f2e;
}

/* Ship Culture theme - Midnight Navy / Paper White, piloted on /login
   2026-07-08/09, approved for whole-site rollout 2026-07-09.

   Updated 2026-07-09: the first version of this block preserved each
   slate shade's ORIGINAL relative lightness position (50=lightest,
   950=darkest, same as Tailwind's own convention) - this correctly
   recolored the app's existing "dark shell" (bg-slate-900 in main.tt)
   to Navy, but left it a DARK page overall, not the fully light page
   the /login pilot actually shows. Live screenshots confirmed this:
   home/voyages/cruise-view correctly picked up Navy-recolored dark
   shells, but didn't match login's all-Paper-White look at all - two
   different visual outcomes from one nominal "theme". User's explicit
   direction once this was surfaced: flip the WHOLE app to match
   login's fully light page, not just recolor the dark shell.

   Fix: INVERT the slate scale's slot assignments (new[50]=old[950],
   new[900]=old[100], etc, mirrored around 500) instead of preserving
   them. Since every existing template pairs a slate background shade
   with a slate text shade for contrast (e.g. dark shell bg-slate-900 +
   light text-slate-100), inverting the WHOLE scale keeps every such
   pair correctly contrasted - they just swap direction together, shell
   backgrounds go light, their text goes dark. Known side effect,
   flagged as a follow-up QA item rather than silently accepted: pages
   using the OTHER existing pattern (bg-slate-50 "light cards" on a
   dark shell, e.g. cruises/index.tt, cruises/view.tt) now render as
   DARK cards on the new light shell (an "inverted elevation" look) -
   legible and internally consistent, but not flat white like login's
   own card. A couple of specific spots (index.tt's two summary cards,
   one on bg-teal-50 [unchanged, stays light] beside one on bg-slate-50
   [now dark]) will look mismatched as a pair - cosmetic, not a
   contrast/legibility bug, worth a manual pass later.

   Teal is DELIBERATELY NOT inverted - it's used almost entirely for
   solid CTA buttons with hardcoded text-white (bg-teal-600 text-white
   for "Add New"/"Sign In" etc across many templates); inverting it
   would turn those into light buttons with invisible white text. Teal
   staying dark-toned works fine either way since buttons keep their
   own explicit white text regardless of shell lightness. */
:root[data-theme="ship_culture"] {
    --slate-50:  #1B2631; /* was slate-950's value - now darkest */
    --slate-100: #2D3741;
    --slate-200: #3C464F;
    --slate-300: #505961;
    --slate-400: #697078;
    --slate-500: #868B92;
    --slate-600: #A5A9AE;
    --slate-700: #C6C8CD;
    --slate-800: #DCDEE1;
    --slate-900: #EDEDF1;
    --slate-950: #F9F9FB; /* was slate-50's value - now lightest, Paper White */

    --teal-50:  #F9F9FB;
    --teal-100: #EDEDF1;
    --teal-200: #DCDEE1;
    --teal-300: #C6C8CD;
    --teal-400: #A5A9AE;
    --teal-500: #697078;
    --teal-600: #3C464F; /* primary accent/button color - stays dark, unchanged */
    --teal-700: #2D3741; /* accent hover */
    --teal-800: #232D36;
    --teal-900: #1B2631; /* Midnight Navy */
    --teal-950: #131B23;

    /* bg/card deliberately reference slate-900/950 in this order (not
       950/900) so card renders LIGHTER than the page bg, matching
       login's own #fff-card-on-#F9F9FB-bg relationship (an "elevated
       surface is lighter" pattern, same direction the default dark
       theme already uses: --color-card is one step lighter than
       --color-bg there too). */
    --color-bg: var(--slate-900);
    --color-card: var(--slate-950);
    --color-border: var(--slate-800);
    --color-border-hover: var(--slate-700);
    --color-text: var(--slate-50);
    --color-text-muted: var(--slate-400);
    --color-accent: var(--teal-600);
    --color-accent-hover: var(--teal-700);
}

/* Base scaling */
html {
    font-size: 16px; /* Explicit base */
    background-color: var(--color-bg); /* Locks background color early to stop light flashbangs */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

/* Responsive typography */
h1 { font-size: 2.25rem; color: #ffffff; }
h2 { font-size: 1.85rem; color: #f8fafc; }
p, li, div { font-size: 1.1rem; } /* Bumping standard text up slightly for PC */

@media (max-width: 768px) {
    html {
        font-size: 14px; /* Scales everything down slightly for smaller mobile screens */
    }
}

/* Custom smooth transitions */
a, button {
    transition: all 0.2s ease-in-out;
}

/* Better form inputs for mobile (Slate Dark Theme Matching) - excludes
   checkbox/radio inputs (see below) since appearance:none + width:100%
   here is meant for text-style fields. Applied to EVERY <input>
   regardless of type for a long time - found live 2026-07-09 that this
   was silently stretching every checkbox/radio in the app into a thin,
   appearance-less horizontal bar ("shows as a line"), not a caching
   issue as previously suspected for the similar-looking /casino-royale
   and /pwa_setup checkbox quirks (see feedback_checkbox_display_quirk
   memory) - worth re-checking those with this fix in mind. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    appearance: none;
    width: 100%;
    padding: 12px;
    background-color: var(--color-card);
    color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 16px; /* Prevents iOS zoom on focus */
}

input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Real checkbox/radio styling - small, native-shaped, but recolored to
   fit the dark theme (a totally unstyled native checkbox renders as a
   plain white/grey OS-default box, jarring against dark cards). */
input[type="checkbox"], input[type="radio"] {
    appearance: auto;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Dark theme optimized custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-hover);
}

/* Login/Auth Specific Layout Styling */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh; /* Centers the card vertically below the nav bar */
}

/* Modifier for multi-card auth pages (e.g. profile) that need the full
   viewport height and don't want vertical centering of a single card. */
.login-wrapper--tall {
    min-height: 100vh;
    padding: 40px 20px;
    align-items: flex-start;
}

/* Stacks multiple .login-card blocks vertically with even spacing,
   used on pages with more than one card (e.g. profile: details + security). */
.auth-card-stack {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.login-card {
    background: var(--color-card);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-card--flush {
    margin-bottom: 0;
}

.login-header i {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.login-header h1 {
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.error-message {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.success-message {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    padding: 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.success-message--bordered {
    border: 1px solid var(--color-success-border);
}

.auth-form {
    text-align: left;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
}

.auth-form input {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: white;
    border-radius: 6px;
    font-size: 1rem;
}

.btn-primary {
    width: 100%;
    background: var(--color-accent);
    color: white;
    padding: 0.75rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--color-accent-hover);
}

.btn-secondary {
    background: var(--color-text-subtle);
}

/* Variant for using .btn-primary on an <a> instead of a <button> -
   anchors default to inline with underlined text, so this normalizes
   them to look identical to a real button. */
.btn-primary--link {
    display: block;
    text-align: center;
    text-decoration: none;
}

/* Small "back to X" / "return to Y" links under an auth card */
.auth-back-link {
    font-size: 0.85rem;
    text-align: center;
    padding-top: 15px;
}

.auth-back-link a {
    color: var(--color-text-subtle);
    text-decoration: none;
    font-weight: 600;
}

/* Variant used when the link sits below other content on the same
   card and needs a visual divider (e.g. profile page). */
.auth-back-link--divided {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
}

.auth-back-link--divided a {
    color: var(--color-text-faint);
}

/* Leaflet bakes a white background + border into every divIcon via its
   own .leaflet-div-icon class, applied alongside any custom className -
   without this reset, that default box sits behind/around a custom
   marker's own styling instead of the marker rendering cleanly on its own. */
.sea-day-marker {
    background: transparent !important;
    border: none !important;
}

/* Shrinks the required OSM/CartoDB tile attribution to a subtle corner
   credit rather than Leaflet's default full-size control - the library's
   own promotional prefix is dropped separately in JS (setPrefix(false)),
   this just keeps what's left unobtrusive. Applies to every Leaflet map
   in the app (home footprint map, itinerary map), not just one page. */
.leaflet-control-attribution {
    font-size: 9px !important;
    padding: 1px 4px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.3 !important;
}

/* Profile avatar picker grid */
.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.avatar-picker-option {
    font-size: 1.5rem;
    line-height: 1;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}

.avatar-picker-option:hover {
    border-color: var(--color-border-hover);
    transform: scale(1.05);
}

.avatar-picker-option--selected {
    border-color: var(--color-accent);
    background: var(--color-card);
}

/* views/layouts/main.tt - shared shell, affects every page */
.offline-banner {
    display: none;
    background-color: #d32f2f;
    color: white;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;
}
.offline-banner--visible { display: block; }

/* "Currently sailing" banner - shown site-wide while today falls within an
   active cruise's dates (see Model::Cruises::get_active_cruise), so the
   relevant cruise is one tap away from any page while actually on the
   ship, not just from the Voyages list. Sticky like .offline-banner and
   placed directly after it in the DOM, so the two stack correctly (each
   still occupies its own box in normal flow, so a following sticky
   sibling naturally stacks below rather than overlapping) if a user is
   both offline AND on a currently-active cruise at the same time - a
   very plausible combination given ship wifi. */
.active-cruise-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--color-accent);
    color: white;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;
    text-decoration: none;
    box-sizing: border-box;
}
.active-cruise-banner:hover { background-color: var(--color-accent-hover); }
.active-cruise-banner__arrow { font-size: 0.75rem; opacity: 0.85; }

/* Same shape/sticky behavior as .active-cruise-banner, deliberately
   different color (amber, not the accent teal) since this is a background
   task in progress, not a navigation link - added 2026-07-25 alongside
   running the itinerary editor's AI enhancement as a detached background
   process instead of blocking Save. */
.ai-enhancement-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #b45309;
    color: white;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-sizing: border-box;
}

.drawer-admin-divider {
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}
.drawer-admin-label {
    color: #118ab2;
    font-size: 11px;
    font-weight: 800;
    padding-left: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.drawer-admin-link { color: #ffb703; }

.bottom-nav-label { font-size: 10px; }