/* File: assets/css/app.css */

/*
 * Design tokens.
 *
 * Dark-first, matching the approved interface direction: deep charcoal
 * surfaces, a warm gold primary, mint as the positive accent, and generous
 * corner radii. Light mode is a full inversion rather than an afterthought.
 *
 * Tailwind is loaded from the CDN and reads these custom properties through the
 * inline config in the layout head, so there is no build step.
 */

:root {
    color-scheme: dark;

    --bg: #0B0B0C;
    --bg-elevated: #131315;
    --surface: #1A1A1D;
    --surface-2: #232327;
    --surface-3: #2C2C31;
    --border: #2E2E34;
    --border-strong: #3A3A42;

    --text: #FFFFFF;
    --text-secondary: #C9C9D1;
    --text-muted: #86868F;

    /* Warm gold — primary action, active navigation, focus. */
    --primary: #E7D08A;
    --primary-hover: #F0DCA1;
    --primary-contrast: #17170F;

    /* Mint — positive movement, success, secondary highlight. */
    --accent: #A9E0C2;
    --accent-contrast: #10241A;

    --success: #6FD79B;
    --warning: #E9C46A;
    --danger: #F08A7E;
    --info: #8FBEEA;

    --radius-control: 12px;
    --radius-card: 20px;
    --radius-sheet: 24px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-glow: 0 0 0 4px rgba(231, 208, 138, .12);
}

.light {
    color-scheme: light;

    --bg: #F4F4F2;
    --bg-elevated: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F0F0EE;
    --surface-3: #E6E6E3;
    --border: #E2E2DE;
    --border-strong: #CFCFC9;

    --text: #14141A;
    --text-secondary: #45454F;
    --text-muted: #71717A;

    --primary: #1F1F24;
    --primary-hover: #34343C;
    --primary-contrast: #FFFFFF;

    --accent: #2E8B60;
    --accent-contrast: #FFFFFF;

    --success: #1B7A4C;
    --warning: #A9761B;
    --danger: #B4362A;
    --info: #22608F;

    --shadow-1: 0 1px 2px rgba(20, 20, 26, .06);
    --shadow-2: 0 8px 24px rgba(20, 20, 26, .10);
    --shadow-glow: 0 0 0 4px rgba(31, 31, 36, .10);
}

/* Admin panel keeps the same language with a cooler base. */
.theme-admin {
    --bg: #08080A;
    --surface: #141418;
    --surface-2: #1D1D22;
}

* { -webkit-tap-highlight-color: transparent; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    /* No horizontal overflow at any width — a hard requirement. */
    overflow-x: hidden;
    font-feature-settings: "cv02", "cv03", "cv04";
}

/* Money and any tabular figure must align down a column. */
.tabular, .money, td.numeric, th.numeric {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

[x-cloak] { display: none !important; }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.card-elevated {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-2);
}

.panel {
    background: var(--surface-2);
    border-radius: var(--radius-control);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .18s ease, border-color .18s ease,
                opacity .18s ease, transform .12s ease;
    /* Accessible touch target on mobile. */
    min-height: 48px;
    padding-inline: 1.5rem;
    font-size: .9375rem;
}

.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled, .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

.btn-primary   { background: var(--primary); color: var(--primary-contrast); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

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

.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); }

.btn-danger { background: var(--danger); color: #17100F; }
.btn-ghost  { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

.btn-sm { min-height: 40px; padding-inline: 1rem; font-size: .875rem; }
.btn-lg { min-height: 56px; padding-inline: 2rem; font-size: 1rem; }

.btn-spinner {
    width: 1rem; height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
    flex: none;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    padding: .875rem 1rem;
    font-size: .9375rem;
    min-height: 50px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    appearance: none;
}

.input::placeholder { color: var(--text-muted); }

.input:hover:not(:disabled) { border-color: var(--border-strong); }

.input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
    background: var(--surface-3);
}

.input:disabled { opacity: .55; cursor: not-allowed; }

select.input {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.75rem;
}

/* Single-use code entry: wide tracking, centred, tabular. */
.input-code {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: .5em;
    text-indent: .5em;
    padding-block: 1rem;
    font-variant-numeric: tabular-nums;
}

.checkbox {
    width: 1.125rem; height: 1.125rem;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    accent-color: var(--primary);
    flex: none;
}

.label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: .5rem;
}

.field-error { color: var(--danger); font-size: .8125rem; margin-top: .4rem; }

.has-error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(240, 138, 126, .12) !important;
}

.form-error-summary {
    background: rgba(240, 138, 126, .08);
    border: 1px solid rgba(240, 138, 126, .35);
    border-radius: var(--radius-control);
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
    color: var(--danger);
}

.form-error-summary__title { font-weight: 600; margin-bottom: .35rem; font-size: .875rem; }
.form-error-summary ul { list-style: disc; padding-left: 1.25rem; font-size: .8125rem; }
.form-error-summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(240, 138, 126, .25); }

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */

.toast-region {
    position: fixed;
    z-index: 9999;
    inset-inline-end: 1rem;
    inset-block-start: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

@media (max-width: 640px) {
    .toast-region {
        inset-block-start: auto;
        /* Clear the bottom navigation and the device safe area. */
        inset-block-end: calc(5.5rem + env(safe-area-inset-bottom, 0px));
        inset-inline: 1rem;
        max-width: none;
    }
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-inline-start: 3px solid var(--info);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-2);
    padding: .875rem 1rem;
    animation: toast-in .2s ease;
}

.toast--success { border-inline-start-color: var(--success); }
.toast--error   { border-inline-start-color: var(--danger); }
.toast--warning { border-inline-start-color: var(--warning); }

.toast__message { flex: 1; font-size: .875rem; line-height: 1.45; }
.toast__close   { background: none; border: 0; cursor: pointer; color: var(--text-muted); font-size: 1.25rem; line-height: 1; }
.toast--leaving { opacity: 0; transform: translateY(-4px); transition: .2s ease; }

@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* --------------------------------------------------------------------------
   Mobile bottom navigation
   -------------------------------------------------------------------------- */

.tabbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 50;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    padding-block-start: .5rem;
    padding-block-end: calc(.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) { .tabbar { display: none; } }

.tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    /* Accessible touch target. */
    min-height: 48px;
    padding-inline: .25rem;
    color: var(--text-muted);
    font-size: .6875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .18s ease;
}

.tabbar__item:hover { color: var(--text-secondary); }

.tabbar__item[aria-current="page"] { color: var(--primary); }

.tabbar__icon {
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
}

/* Content must clear the fixed bar on small screens. */
.has-tabbar { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .has-tabbar { padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   Skeletons
   -------------------------------------------------------------------------- */

.skeleton {
    background: linear-gradient(90deg,
        var(--surface-2) 25%,
        var(--surface-3) 37%,
        var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: 8px;
}

@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.skeleton--text   { height: .875rem; }
.skeleton--title  { height: 1.25rem; width: 40%; }
.skeleton--avatar { height: 2.5rem; width: 2.5rem; border-radius: 50%; }
.skeleton--stat   { height: 5.5rem; }
.skeleton--chart  { height: 16rem; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: var(--radius-pill);
    padding: .3125rem .75rem;
    font-size: .75rem;
    font-weight: 600;
}

.badge--gold    { background: rgba(231, 208, 138, .14); color: var(--primary); }
.badge--mint    { background: rgba(169, 224, 194, .14); color: var(--accent); }
.badge--success { background: rgba(111, 215, 155, .14); color: var(--success); }
.badge--warning { background: rgba(233, 196, 106, .14); color: var(--warning); }
.badge--danger  { background: rgba(240, 138, 126, .14); color: var(--danger); }
.badge--info    { background: rgba(143, 190, 234, .14); color: var(--info); }
.badge--muted   { background: var(--surface-2); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; inset-inline-start: -9999px; top: 0;
    background: var(--primary); color: var(--primary-contrast);
    padding: .75rem 1.25rem; z-index: 10000;
    border-radius: 0 0 var(--radius-control) 0;
    font-weight: 600;
}
.skip-link:focus { inset-inline-start: 0; }

:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .skeleton { animation: none; }
    .btn-spinner { animation: none; border-right-color: currentColor; opacity: .5; }
    .btn:active:not(:disabled) { transform: none; }
}

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }

/* End of file: assets/css/app.css */