/* ── mPark · Harbour design system ────────────────────────────── */

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

/* ── Harbour design tokens ────────────────────────────────────── */
:root {
    color-scheme: light !important;   /* must beat DaisyUI's @media prefers-color-scheme:dark rule */
    background-color: #EEF1F5 !important; /* explicit html bg so nothing shows through during load */

    /* Colours */
    --h-bg:             #EEF1F5;   /* cool near-white page bg */
    --h-surface:        #FFFFFF;   /* cards, rows */
    --h-surface-soft:   #E9EEF3;   /* plate chip, inset areas */
    --h-header-bg:      #DDE5EE;   /* tinted header band */
    --h-header-border:  #C5D1DD;   /* hairline below header */
    --h-border:         #E5E7EC;   /* card / field borders */
    --h-border-soft:    #EDEFF2;   /* internal row dividers */
    --h-text:           #1F232C;   /* primary text */
    --h-text-muted:     #5F6675;   /* secondary text */
    --h-text-faint:     #7F8593;   /* eyebrow, chevrons, captions */
    --h-navy:           #1F2A6A;   /* structural: active tab, selection */
    --h-navy-deep:      #161E55;
    --h-cta:            #1F8A99;   /* teal — Pay button, selected tile */
    --h-cta-on:         #FFFFFF;
    --h-success:        #1E7A4A;
    --h-danger:         #CC2929;

    /* Plate chip */
    --h-plate-bg:       #E9EEF3;
    --h-plate-text:     #1F232C;

    /* Geometry */
    --h-radius:         10px;      /* fields, buttons (visual inner) */
    --h-radius-card:    16px;      /* cards, RowLists */
    --h-radius-pill:    999px;     /* CTA buttons */

    /* Bottom nav — single source of truth used by navbar + all page scroll areas.
       33vw makes buttons roughly square on phones; capped at 8rem (128px) so
       desktop layouts are not broken by an enormous nav bar. */
    --nav-h: min(33vw, 8rem);

    /* Shadows */
    --h-shadow-card:    0 1px 3px rgba(17,24,39,0.06), 0 4px 12px rgba(17,24,39,0.04);
    --h-shadow-cta:     0 8px 20px rgba(31,138,153,0.28);
}

/* ── DaisyUI theme overrides (OKLCH format — DaisyUI v4+) ────── */
/* Primary = teal #1F8A99. DaisyUI v4+ uses oklch(var(--p)/opacity),
   so all channel variables must be "L% C H" OKLCH tokens, not HSL. */
:root,
[data-theme="corporate"] {
    /* Primary: teal #1F8A99 */
    --p:  56.5% 0.088 200;
    --pf: 49%   0.082 200;   /* focused/hover — slightly darker */
    --pc: 100%  0     0;     /* text on primary = white */

    /* Secondary: navy #1F2A6A */
    --s:  22%   0.097 265;
    --sf: 17%   0.085 265;
    --sc: 100%  0     0;

    /* Accent: amber */
    --a:  65%   0.148 68;
    --af: 58%   0.140 68;
    --ac: 20%   0.030 70;

    /* Neutral */
    --n:  32%   0.037 252;
    --nf: 25%   0.030 252;
    --nc: 96%   0     0;

    /* Base surfaces */
    --b1: 100%  0     0;     /* white #ffffff */
    --b2: 96%   0.006 222;   /* page bg #EEF1F5 */
    --b3: 91%   0.009 222;   /* border area */
    --bc: 16%   0.015 255;   /* text #1F232C */

    /* Semantic */
    --su: 42%   0.097 150;   /* success green */
    --suc: 100% 0     0;
    --er: 45%   0.158 25;    /* error red */
    --erc: 100% 0     0;
    --wa: 65%   0.148 68;    /* warning amber */
    --wac: 20%  0.030 70;
    --in: 53%   0.095 218;   /* info blue */
    --inc: 100% 0     0;

    /* Hex fallbacks for browsers without oklch() support */
    --fallback-p:  #1F8A99;
    --fallback-pc: #ffffff;
    --fallback-b1: #ffffff;
    --fallback-b2: #EEF1F5;
    --fallback-bc: #1F232C;
    --fallback-n:  #384861;
    --fallback-nc: #f4f5f7;

    /* Geometry */
    --rounded-box:   1rem;
    --rounded-btn:   999px;   /* pill */
    --rounded-badge: 999px;
    --tab-radius:    0.5rem;

    --animation-btn:   0.15s;
    --animation-input: 0.1s;
    --btn-focus-scale: 0.98;
}

/* ── Typography ───────────────────────────────────────────────── */
html { font-size: 17px; }
body {
    font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--h-bg);
    color: var(--h-text);
    -webkit-font-smoothing: antialiased;
    /* Stable full-screen container — prevents body-level scroll on iOS Safari/PWA.
       100dvh tracks the visual viewport (shrinks when browser chrome is visible),
       so the flex shell always fills exactly the screen without overflowing. */
    height: 100vh;        /* fallback for browsers without dvh support */
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Make h-screen and min-h-screen fill the body rather than re-declaring 100vh.
   This keeps page layouts correct on iOS Safari where 100vh ≠ visible viewport. */
.h-screen    { height: 100% !important; }
.min-h-screen { min-height: 100% !important; }

/* Mono elements (plates, balances, card numbers) */
.mono {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
}

/* ── Header — teal band ───────────────────────────────────────── */
.hdr {
    background: var(--h-cta);
    border-bottom: none;
    padding: 14px 20px 16px;
    flex-shrink: 0;
    z-index: 30;
}
.hdr-eye {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.hdr-brand {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    line-height: 1;
}
.hdr-title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
}
.hdr-title.hdr-title-sub {
    font-size: 24px;
}
.hdr-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: -6px;
    margin-right: 2px;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
}
.hdr-bal {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.hdr-bal-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.7);
}
.hdr-bal-value {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.6px;
    color: #ffffff;
}

/* Utility button inside header (New Chat, zoom, etc.) */
.hdr-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    padding: 4px 8px;
    border-radius: var(--h-radius);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.hdr-btn:hover { background: rgba(0,0,0,0.12); }

/* ── Cards / surfaces ─────────────────────────────────────────── */
.card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-card);
    box-shadow: var(--h-shadow-card);
}
.card.shadow, .card.shadow-md, .card.shadow-xl {
    box-shadow: var(--h-shadow-card);
}
/* Override any leftover bg-primary cards */
.card.bg-primary {
    background: var(--h-navy);
    border: none;
    box-shadow: 0 4px 16px rgba(31,42,106,0.25);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
    letter-spacing: -0.1px;
    font-weight: 600;
    font-family: 'Geist', system-ui, sans-serif;
}
/* CTA / primary — teal pill */
.btn-primary {
    background: var(--h-cta) !important;
    color: var(--h-cta-on) !important;
    border-color: transparent !important;
    border-radius: var(--h-radius-pill) !important;
    box-shadow: var(--h-shadow-cta);
    transition: box-shadow 0.15s, transform 0.1s, background 0.12s;
}
.btn-primary:hover:not(:disabled) {
    background: #197a88 !important;
    box-shadow: 0 10px 24px rgba(31,138,153,0.36);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(31,138,153,0.2);
}
.btn-primary:disabled {
    background: #A0C8CF !important;
    box-shadow: none !important;
}
.btn-primary.btn-lg, .btn-lg.btn-primary {
    height: 52px;
    min-height: 52px;
    font-size: 16px;
    padding-left: 24px;
    padding-right: 24px;
}
/* Ghost buttons (secondary actions) */
.btn-ghost {
    color: var(--h-text-muted);
}
.btn-outline {
    border-color: var(--h-border);
    color: var(--h-text);
}
.btn-error {
    background: var(--h-danger) !important;
    color: white !important;
    border-radius: var(--h-radius-pill) !important;
}
.btn-error:hover:not(:disabled) {
    background: #b52222 !important;
    color: white !important;
}
/* Icon-only danger button (trash/remove) */
.btn-icon-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--h-danger);
    transition: background 0.15s;
}
/* Pin the SVG stroke directly so currentColor chain can't be hijacked on hover */
.btn-icon-danger svg,
.btn-icon-danger:hover svg {
    stroke: var(--h-danger) !important;
}
.btn-icon-danger:hover { background: rgba(204,41,41,0.08); }
.btn-icon-danger:disabled { opacity: 0.4; cursor: default; }

/* ── Field component (Vehicle / Zone / Duration selectors) ────── */
.field-row {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
    position: relative;
}
.field-row:focus, .field-row.open {
    border-color: var(--h-navy);
    box-shadow: 0 0 0 3px rgba(31,42,106,0.1);
    outline: none;
}
.field-inner { flex: 1; min-width: 0; }
.field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--h-text-faint);
    margin-bottom: 3px;
}
.field-value {
    font-size: 17px;
    font-weight: 500;
    color: var(--h-text);
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 1.2em;
}
.field-value.placeholder { color: var(--h-text-faint); }
.field-sub {
    font-size: 14.5px;
    color: var(--h-text-muted);
    margin-top: 2px;
}
.field-chevron {
    color: var(--h-text-faint);
    flex-shrink: 0;
    transition: transform 0.15s;
}
.field-chevron.open { transform: rotate(180deg); }
.field-dot {
    color: var(--h-text-faint);
    font-size: 13px;
}

/* DaisyUI select class overrides — keep the trigger consistent */
.select, button.select {
    height: auto;
    min-height: auto;
    border-color: var(--h-border);
    background: var(--h-surface);
    border-radius: var(--h-radius);
}

/* ── Dropdown panels ──────────────────────────────────────────── */
.dropdown-panel {
    background: #ffffff !important;
    border: 1px solid var(--h-border) !important;
    border-radius: var(--h-radius-card) !important;
    box-shadow: 0 8px 32px rgba(17,24,39,0.12) !important;
    z-index: 50;
}
/* Dropdown rows — light hairline dividers, hover tint */
.dd-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    text-align: left;
    font-size: 15.5px;
    color: var(--h-text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--h-border-soft);
    cursor: pointer;
    transition: background 0.1s;
}
.dd-row:last-child { border-bottom: none; }
.dd-row:hover { background: var(--h-bg); }

/* Selected dropdown row — soft teal tint */
.dd-selected {
    background: rgba(31, 138, 153, 0.08) !important;
    color: var(--h-cta) !important;
}
.dd-selected:hover { background: rgba(31, 138, 153, 0.13) !important; }

/* Fallback for any dropdown-panel buttons not using dd-row */
.dropdown-panel button:not(.dd-row):hover,
.dropdown-panel a:not(.dd-row):hover {
    background: var(--h-bg);
}
.dropdown-panel button:not(.dd-row),
.dropdown-panel a:not(.dd-row) {
    font-size: 15.5px;
}

/* ── Inputs ───────────────────────────────────────────────────── */
.input, .textarea {
    background: var(--h-surface);
    border-color: var(--h-border);
    border-radius: var(--h-radius);
    color: var(--h-text);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus, .textarea:focus {
    border-color: var(--h-navy);
    box-shadow: 0 0 0 3px rgba(31,42,106,0.1);
    outline: none;
}

/* ── Alerts ───────────────────────────────────────────────────── */
.alert {
    border-radius: var(--h-radius);
    border-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    overflow-wrap: break-word;
    word-break: break-word;
}
.alert-error   { background: rgba(204,41,41,0.08);  color: #A02020; }
.alert-success { background: rgba(30,122,74,0.09);  color: #145C38; }
.alert-warning { background: rgba(200,130,30,0.10); color: #7A4A10; }

/* ── RowList / Row (My Account, Info menus) ───────────────────── */
.acct-group {
    background: var(--h-surface);
    border: 1px solid var(--h-border-soft);
    border-radius: var(--h-radius-card);
    overflow: hidden;
    box-shadow: var(--h-shadow-card);
}
.acct-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    text-decoration: none;
    color: var(--h-text);
    position: relative;
    transition: background 0.1s;
}
.acct-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 0;
    height: 1px;
    background: var(--h-border-soft);
}
.acct-row:active { background: var(--h-bg); }
.acct-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--h-radius);
    background: var(--h-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--h-text-muted);
}
.acct-icon.danger { background: rgba(204,41,41,0.08); color: var(--h-danger); }
.acct-label {
    flex: 1;
    font-size: 17px;
    font-weight: 500;
    color: var(--h-text);
}
.acct-label.danger { color: var(--h-danger); }
.acct-sub {
    font-size: 14.5px;
    color: var(--h-text-muted);
    margin-top: 1px;
}
.acct-chevron { color: var(--h-text-faint); flex-shrink: 0; }
.acct-section-label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--h-text-faint);
    padding: 0 2px;
    margin-bottom: 6px;
    display: block;
}

/* ── Section labels in content areas ─────────────────────────── */
.section-label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--h-text-faint);
    display: block;
    margin-bottom: 6px;
}

/* ── Plate chip ───────────────────────────────────────────────── */
.plate-badge, .plate-badge-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--h-plate-bg);
    color: var(--h-plate-text);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    white-space: nowrap;
    min-width: 5.4rem;
    text-align: center;
}
.plate-badge-lg {
    font-size: 17px;
    padding: 5px 12px;
    min-width: 6rem;
}

/* ── Badges ───────────────────────────────────────────────────── */
.badge-primary {
    background: rgba(31,138,153,0.12);
    color: var(--h-cta);
    border-color: transparent;
    font-weight: 600;
}
.badge-success {
    background: rgba(30,122,74,0.1);
    color: var(--h-success);
    border-color: transparent;
}
.badge-error {
    background: rgba(204,41,41,0.1);
    color: var(--h-danger);
    border-color: transparent;
}

/* ── Bottom nav ───────────────────────────────────────────────── */
.btm-nav {
    background: var(--h-surface);
    border-top: 1px solid var(--h-border-soft);
    box-shadow: none;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.btm-nav > * {
    gap: 3px;
    color: var(--h-text-faint);
    background: transparent;
    /* Reserve the top border slot — active state fills it with colour */
    border-top: 3px solid transparent !important;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.btm-nav-label { font-size: 13px; }
/* Active tab — teal top bar + soft teal tint + teal icon/label */
.btm-nav > .active {
    color: var(--h-cta) !important;
    background: rgba(31, 138, 153, 0.08) !important;
    border-top-color: var(--h-cta) !important;
}
.btm-nav > .active .btm-nav-label { font-weight: 600; }

/* ── Amount tiles (Top Up) ────────────────────────────────────── */
.amount-tile {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.amount-tile:hover { border-color: var(--h-text-muted); }
.amount-tile.selected {
    background: var(--h-cta);
    border-color: var(--h-cta);
    color: var(--h-cta-on);
    box-shadow: var(--h-shadow-cta);
}
.amount-tile-label {
    font-size: 17px;
    font-weight: 600;
    color: var(--h-text);
}
.amount-tile.selected .amount-tile-label { color: var(--h-cta-on); }
.amount-tile-fee {
    font-size: 12.5px;
    color: var(--h-text-faint);
    margin-top: 2px;
}
.amount-tile.selected .amount-tile-fee { color: rgba(255,255,255,0.75); }

/* ── Extend duration pills ────────────────────────────────────── */
.extend-pill {
    border-radius: var(--h-radius);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    padding: 12px 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--h-text-muted);
    transition: all 0.12s;
    cursor: pointer;
}
.extend-pill.selected {
    border-color: var(--h-cta);
    background: rgba(31,138,153,0.08);
    color: var(--h-cta);
}


/* ── Chat bubbles ─────────────────────────────────────────────── */
.chat-bubble-assistant {
    background: var(--h-surface-soft);
    color: var(--h-text);
}

/* ── Chat assistant message links ─────────────────────────────── */
.chat-response a {
    color: var(--h-cta);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Safe area / misc ─────────────────────────────────────────── */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0.5rem); }
.divider { color: var(--h-text-faint); }
.sheet-handle {
    width: 40px; height: 4px;
    background: var(--h-border);
    border-radius: 999px;
    margin: 0.6rem auto 0.4rem;
}

/* ── Identity strip (My Account) ─────────────────────────────── */
.identity-strip {
    padding: 8px 4px 4px;
}
.identity-strip-label {
    font-size: 14.5px;
    color: var(--h-text-muted);
}
.identity-strip-email {
    font-size: 17px;
    font-weight: 500;
    color: var(--h-text);
    text-transform: lowercase;
}

/* ── Balance card (Top Up) ────────────────────────────────────── */
.balance-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-card);
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--h-shadow-card);
}
.balance-eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--h-text-faint);
    margin-bottom: 4px;
}
.balance-amount {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.8px;
    color: var(--h-text);
    line-height: 1.05;
}
.balance-currency {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--h-text-faint);
    margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP PHONE MOCKUP
   ════════════════════════════════════════════════════════════════ */

html.is-desktop {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #0d1221;
    background-image: radial-gradient(ellipse 80% 60% at 50% 40%, #151e38 0%, #0a0e1c 100%);
}

html.is-desktop body {
    position: relative;
    flex-shrink: 0;
    width: 393px;
    height: min(852px, calc(100vh - 48px));
    border-radius: 44px;
    overflow: hidden;
    clip-path: inset(0 round 44px);
    min-height: unset;
    background: var(--h-bg);
    transform: translate3d(0, 0, 0);
    box-shadow:
        0 0 0 11px #1c1c1e,
        0 0 0 12px #54545a,
        0 0 0 13px #1c1c1e,
        0 60px 120px -20px rgba(0, 0, 0, 0.85);
}

html.is-desktop .h-screen { height: 100% !important; }
html.is-desktop .min-h-screen { min-height: 100% !important; }
html.is-desktop body ::-webkit-scrollbar { display: none; }
html.is-desktop body * { scrollbar-width: none; }

/* ── T&C row ──────────────────────────────────────────────────── */
.tc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--h-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    user-select: none;
}

/* ── Success screens ──────────────────────────────────────────── */
.success-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(30,122,74,0.1);
    display: flex; align-items: center; justify-content: center;
}

/* ── Microcopy under Pay button ───────────────────────────────── */
.pay-microcopy {
    font-size: 13.5px;
    color: var(--h-text-faint);
    text-align: center;
    line-height: 1.4;
}
.pay-microcopy a {
    color: var(--h-text-muted);
    text-decoration: underline;
}