/* ============================================================================
   AKILI Theme — "Calm & Confident" (Apple-inspired)
   Phase 1: typography + brand palette + softened depth.

   Loaded AFTER Radzen's material(.dark).css so these custom-property overrides
   win. Brand-level tokens (teal accent, font, radius, shadows) live in :root and
   apply to BOTH light and dark. Neutral grays are scoped per data-theme so the
   light surface palette never leaks into dark mode (and vice-versa).
   ============================================================================ */

/* ── Inter (self-hosted, offline-safe for MAUI) ───────────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/InterVariable.woff2') format('woff2');
}

/* ── Brand tokens — identical in light & dark ─────────────────────────────── */
:root {
    /* Typography: Inter first, then platform system fonts as graceful fallback */
    --rz-text-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Primary — "Harbor Blue": deep, confident steel blue (rgb(25, 74, 113)).
       Used sparingly: actions / active states / brand accents. */
    --rz-primary: #194a71;
    --rz-primary-rgb: 25, 74, 113;
    --rz-primary-light: #2f6b9a;
    --rz-primary-lighter: rgba(25, 74, 113, 0.12);
    --rz-primary-dark: #123a5b;
    --rz-primary-darker: #0c2b45;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: #194a71;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;

    /* Secondary — neutral slate so no loud magenta accents leak through */
    --rz-secondary: #475569;
    --rz-secondary-light: #64748b;
    --rz-secondary-lighter: rgba(71, 85, 105, 0.12);
    --rz-secondary-dark: #334155;
    --rz-secondary-darker: #1e293b;

    /* Links read as the brand teal, not magenta */
    --rz-link-color: var(--rz-primary);
    --rz-link-hover-color: var(--rz-primary-dark);

    /* Status — Apple system colors (friendly but professional) */
    --rz-info: #0a84ff;
    --rz-success: #34c759;
    --rz-warning: #ff9500;
    --rz-danger: #ff3b30;

    /* Softer, more precise corners (Apple-medium, not bubbly) */
    --rz-border-radius: 10px;

    /* Subtle, single-direction shadows — calm depth, never heavy */
    --rz-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.06);
    --rz-shadow-2: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.07);
    --rz-shadow-3: 0 2px 6px rgba(0, 0, 0, 0.07), 0 6px 16px rgba(0, 0, 0, 0.08);
    --rz-shadow-4: 0 4px 12px rgba(0, 0, 0, 0.08), 0 10px 24px rgba(0, 0, 0, 0.08);
    --rz-shadow-5: 0 8px 24px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.10);

    /* Brand data-viz series, blue-led, calm and coherent */
    --rz-series-1: #194a71;
    --rz-series-2: #2f6b9a;
    --rz-series-3: #0a84ff;
    --rz-series-4: #ff9500;
    --rz-series-5: #5856d6;
    --rz-series-6: #34c759;
    --rz-series-7: #64748b;
    --rz-series-8: #ff3b30;
    --rz-series-9: #123a5b;
}

/* ── Light mode — Apple-style cool neutrals ───────────────────────────────── */
:root[data-theme="light"] {
    --rz-base: #f5f5f7;
    --rz-base-50: #fbfbfd;
    --rz-base-100: #f5f5f7;
    --rz-base-200: #e8e8ed;
    --rz-base-300: #d2d2d7;
    --rz-base-400: #aeaeb2;
    --rz-base-500: #8e8e93;
    --rz-base-600: #6e6e73;
    --rz-base-700: #48484a;
    --rz-base-800: #2c2c2e;
    --rz-base-900: #1d1d1f;
    --rz-base-light: #f5f5f7;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #6e6e73;
    --rz-base-darker: #1d1d1f;

    --rz-body-background-color: #f5f5f7;
    --rz-base-background-color: #ffffff;
    --rz-text-title-color: #1d1d1f;
    --rz-text-color: #2c2c2e;
    --rz-text-secondary-color: #6e6e73;
    --rz-text-tertiary-color: #8e8e93;
}

/* ── Dark mode — Apple-style near-black surfaces ──────────────────────────────
   IMPORTANT: Radzen's dark theme keeps the SAME scale direction as light —
   base-50 is the LIGHTEST (used for text), base-900 the DARKEST (used for the
   body background). Components reference these by index (e.g. the header uses
   base-700 as a dark surface), so the order must be preserved or surfaces
   invert (a light header in dark mode). */
:root[data-theme="dark"] {
    --rz-base: #2c2c2e;
    --rz-base-50: #f5f5f7;   /* lightest — primary text */
    --rz-base-100: #d1d1d6;
    --rz-base-200: #aeaeb2;
    --rz-base-300: #8e8e93;
    --rz-base-400: #636366;
    --rz-base-500: #48484a;
    --rz-base-600: #3a3a3c;
    --rz-base-700: #2c2c2e;  /* header / raised surface */
    --rz-base-800: #1c1c1e;  /* card surface */
    --rz-base-900: #000000;  /* darkest — body background */
    --rz-base-light: #2c2c2e;
    --rz-base-lighter: #1c1c1e;
    --rz-base-dark: #d1d1d6;
    --rz-base-darker: #f5f5f7;

    --rz-body-background-color: #000000;
    --rz-base-background-color: #1c1c1e;
    --rz-text-title-color: #f5f5f7;
    --rz-text-color: #ebebf0;
    --rz-text-secondary-color: #aeaeb2;
    --rz-text-tertiary-color: #8e8e93;
}

/* Apply the brand font globally (covers non-Radzen elements too). */
html, body {
    font-family: var(--rz-text-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   MOTION & MICRO-INTERACTIONS (Phase 2)
   Apple-style "delight through polish": subtle press/hover feedback, smooth
   transitions and gentle entrance animations. Hover-lifts are gated behind
   (hover: hover) so touch devices only get the press feedback (no sticky
   hover). Everything is disabled under prefers-reduced-motion.
   ============================================================================ */

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.rz-button {
    transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease, filter 0.18s ease;
    will-change: transform;
}
.rz-button:active {
    transform: scale(0.97);
}
@media (hover: hover) {
    .rz-button:not(.rz-state-disabled):hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }
}

/* ── Cards & raised surfaces ──────────────────────────────────────────────── */
.rz-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Opt-in: add class "akili-interactive" to clickable cards for a hover lift */
@media (hover: hover) {
    .akili-interactive:hover {
        transform: translateY(-2px);
        box-shadow: var(--rz-shadow-3);
        cursor: pointer;
    }
}

/* ── Inputs & form fields ─────────────────────────────────────────────────── */
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-textarea, .rz-datepicker,
.rz-form-field, .rz-chkbox-box, .rz-switch {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* ── Navigation: sidebar menu + bottom tab bar ────────────────────────────── */
.rz-panel-menu .rz-navigation-item-link {
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
@media (hover: hover) {
    .rz-panel-menu .rz-navigation-item-link:hover {
        padding-left: calc(var(--rz-panel-menu-item-padding, 1rem) + 3px);
    }
}
.bottom-tab-bar button, .bottom-tab-bar a {
    transition: transform 0.12s ease, color 0.15s ease;
}
.bottom-tab-bar button:active, .bottom-tab-bar a:active {
    transform: scale(0.92);
}

/* ── Accessible focus ring (keyboard users) ───────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Entrance animations (opt-in utility classes) ─────────────────────────── */
@keyframes akiliFadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes akiliFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.akili-fade-in    { animation: akiliFadeIn 0.3s ease both; }
.akili-fade-in-up { animation: akiliFadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Route/page transition: replayed on every navigation via a route-keyed wrapper
   (see PageTransition.razor). Soft fade + slight upward slide for an iOS-like feel. */
@keyframes akiliPageEnter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.akili-page-enter {
    animation: akiliPageEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Stagger helper: apply to a container; children fade in sequentially. */
.akili-stagger > * { animation: akiliFadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.akili-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.akili-stagger > *:nth-child(2) { animation-delay: 0.06s; }
.akili-stagger > *:nth-child(3) { animation-delay: 0.10s; }
.akili-stagger > *:nth-child(4) { animation-delay: 0.14s; }
.akili-stagger > *:nth-child(5) { animation-delay: 0.18s; }
.akili-stagger > *:nth-child(6) { animation-delay: 0.22s; }
.akili-stagger > *:nth-child(7) { animation-delay: 0.26s; }
.akili-stagger > *:nth-child(8) { animation-delay: 0.30s; }

/* ── Skeleton loader shimmer (used by the Skeleton component) ─────────────── */
.akili-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--rz-base-200);
    border-radius: 8px;
}
.akili-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%
    );
    animation: akiliShimmer 1.3s infinite;
}
:root[data-theme="dark"] .akili-skeleton::after {
    background: linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%
    );
}
@keyframes akiliShimmer {
    100% { transform: translateX(100%); }
}

/* ── Empty states ─────────────────────────────────────────────────────────── */
.akili-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    width: 100%;
}
.akili-empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    background: var(--rz-base-200);
    color: var(--rz-text-tertiary-color);
}
.akili-empty-state__icon .rzi {
    font-size: 32px;
    line-height: 1;
}
.akili-empty-state__title {
    color: var(--rz-text-color);
}
.akili-empty-state__msg {
    color: var(--rz-text-secondary-color);
    max-width: 28rem;
}
.akili-empty-state__action {
    margin-top: 0.75rem;
}

/* ============================================================================
   LIQUID GLASS SYSTEM (Phase 3 — "Akili Glass")
   Reusable frosted-glass surfaces with a specular top edge. Use .akili-glass
   for bars/pills and .akili-glass-card for content cards.
   ============================================================================ */
.akili-glass {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 8px 32px rgba(var(--rz-primary-rgb, 25, 74, 113), 0.10);
}
:root[data-theme="dark"] .akili-glass {
    background: rgba(28, 28, 30, 0.55);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.45);
}

.akili-glass-card {
    background: var(--rz-base-background-color);
    border: 1px solid rgba(127, 127, 127, 0.12);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        var(--rz-shadow-2);
}
:root[data-theme="dark"] .akili-glass-card {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        var(--rz-shadow-2);
}

/* ── Sidebar: calm panel + rounded active pills ───────────────────────────── */
.rz-sidebar {
    border-right: 1px solid rgba(127, 127, 127, 0.12);
}
.rz-panel-menu .rz-navigation-item {
    background: transparent;
}
.rz-panel-menu .rz-navigation-item-wrapper {
    border-radius: 10px;
    margin: 1px 8px;
    overflow: hidden;
}
.rz-panel-menu .rz-navigation-item-link {
    border-radius: 10px;
}
@media (hover: hover) {
    .rz-panel-menu .rz-navigation-item-link:hover {
        background-color: rgba(var(--rz-primary-rgb, 25, 74, 113), 0.07);
    }
}
/* Selected entry: soft primary-tinted pill instead of a hard block */
.rz-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
.rz-panel-menu .rz-navigation-item-link.rz-state-active,
.rz-panel-menu .rz-navigation-item-link[aria-current="page"] {
    background-color: rgba(var(--rz-primary-rgb, 25, 74, 113), 0.12);
    color: var(--rz-primary);
    font-weight: 600;
}

/* ── Respect reduced-motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rz-button,
    .rz-button:active,
    .rz-button:hover,
    .akili-interactive:hover,
    .bottom-tab-bar button:active,
    .bottom-tab-bar a:active,
    .rz-panel-menu .rz-navigation-item-link:hover {
        transform: none !important;
    }
    .akili-fade-in,
    .akili-fade-in-up,
    .akili-page-enter,
    .akili-stagger > *,
    .akili-skeleton::after {
        animation: none !important;
    }
}

/* ============================================================
   Scroll affordance — fade cue at top/bottom of a scroll area
   so the user knows there's more content. Driven by
   scrollAffordance.js (sets data-can-scroll-up / -down).
   Uses a CONTRAST cue: a dark shadow on light mode, a light
   glow on dark mode, so it reads against the content either way.
   ============================================================ */
.scroll-affordance {
    position: relative;
    --scroll-fade-color: rgba(0, 0, 0, .18); /* light: dark shadow */
}

[data-theme="dark"] .scroll-affordance {
    --scroll-fade-color: rgba(255, 255, 255, .16); /* dark: light glow */
}

.scroll-affordance__fade {
    position: absolute;
    left: 0;
    right: 0;
    height: 26px;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity .18s ease;
}

.scroll-affordance__fade--top {
    top: 0;
    background: linear-gradient(to bottom, var(--scroll-fade-color) 0%, rgba(0, 0, 0, 0) 100%);
}

.scroll-affordance__fade--bottom {
    bottom: 0;
    background: linear-gradient(to top, var(--scroll-fade-color) 0%, rgba(0, 0, 0, 0) 100%);
}

.scroll-affordance[data-can-scroll-up="true"] .scroll-affordance__fade--top {
    opacity: 1;
}

.scroll-affordance[data-can-scroll-down="true"] .scroll-affordance__fade--bottom {
    opacity: 1;
}

/* Dashed "add line/product" button (.popup-add-dashed is styled in each popup's
   non-scoped <style>). It uses --rz-primary (dark navy) which does NOT lighten in
   the dark theme, so it read as disabled on dark backgrounds. Neutralize to a
   light dashed button in dark mode. */
[data-theme="dark"] .popup-add-dashed {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .05);
    color: var(--rz-text-title-color, #eaeaec);
}

[data-theme="dark"] .popup-add-dashed:active {
    background: rgba(255, 255, 255, .10);
}

/* ============================================================
   Keyboard-open (mobile) — set by index.html when the iOS keyboard
   is up. Lift the sticky invoice summary bar out of the way so the
   focused list field (e.g. a quantity input) isn't covered, and
   shrink the list's bottom reserve so it can scroll above the
   keyboard. Keep the bar in place when the field being edited is the
   shipping input that lives INSIDE it.
   ============================================================ */
.keyboard-open .invoice-summary-bar {
    transition: transform .2s ease, opacity .2s ease;
}

.keyboard-open:not(:has(.invoice-summary-bar :focus)) .invoice-summary-bar {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
}

.keyboard-open .parentInvoice,
.keyboard-open .stock-invoice-stack,
.keyboard-open .expense-invoice-row {
    padding-bottom: 24px !important;
}