/* ══════════════════════════════════════════════════
   EFB THEME V2 — Clean / Light Modern SaaS
   Layers on top of efb.css. Redefines design tokens +
   refines the highest-visibility components (topbar,
   app tiles, buttons, cards, headers) toward a flatter,
   more spacious, "dashboard" feel instead of the
   original skeuomorphic iPad-app look.
══════════════════════════════════════════════════ */

:root{
    /* Slightly cooler, crisper neutrals than the v1 tokens — closer to
       Linear/Stripe-style dashboard grays than pure white/near-white. */
    --ink:       #0f172a;
    --ink-soft:  #475569;
    --ink-faint: #94a3b8;
    --line:      #e5e9f0;
    --line2:     #d6dce6;
    --paper:     #ffffff;
    --paper2:    #f8fafc;
    --paper3:    #eef1f6;

    /* Brand red stays, but gets a companion accent for info/utility states
       so not everything reads as "urgent/red". */
    --accent-blue: #2563eb;
    --accent-blue-tint: rgba(37,99,235,.08);

    /* Elevation scale — soft, layered shadows instead of single hard shadows */
    --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
    --shadow-sm: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
    --shadow-lg: 0 16px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --font-ui: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

:root[data-theme="dark"]{
    --ink:       #f1f5f9;
    --ink-soft:  #94a3b8;
    --ink-faint: #64748b;
    --line:      #232a38;
    --line2:     #2e3646;
    --paper:     #0f1420;
    --paper2:    #0a0e17;
    --paper3:    #171d2b;
    --accent-blue: #3b82f6;
    --accent-blue-tint: rgba(59,130,246,.14);
}

body, .btn, input, select, textarea{
    font-family: var(--font-ui);
}

/* ── Top status bar: more breathing room, crisper divider, no heavy blur haze ── */
.sbar{
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--line) !important;
    padding: 0 20px !important;
}
:root[data-theme="dark"] .sbar{ background: rgba(15,20,32,.72) !important; }
.sbar-brand{
    border-radius: 7px !important;
    letter-spacing: .08em !important;
}
.sbar-logout{
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.sbar-logout:hover{ box-shadow: var(--shadow-xs); }

/* ── Home screen app tiles: flatter, rounder, dashboard-tile feel instead of
      skeuomorphic glassy icons. Subtle shadow, clean hover lift. ── */
.app-ico{
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--line);
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease !important;
}
.app-ico::before{ opacity: .5; }
.app-ico::after{ opacity: .85; height: 3px; }
.home-grid > *:hover .app-ico,
.app-ico:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
}
.app-lbl{
    font-weight: 600 !important;
}

/* ── App headers (av-hdr): cleaner hierarchy, bigger breathing room ── */
.av-scroll{ padding: 28px 26px !important; }
.av-hdr{
    gap: 16px !important;
    margin-bottom: 24px !important;
    padding-bottom: 20px !important;
}
.av-ico{
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-sm) !important;
}
.av-title{
    font-size: 19px !important;
    letter-spacing: -.02em;
    font-weight: 700 !important;
}
.av-sub{ font-size: 12px !important; }

/* ── App bar (back button / title strip) ── */
.app-bar{
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: blur(18px) saturate(1.3);
}
:root[data-theme="dark"] .app-bar{ background: rgba(15,20,32,.85) !important; }
.app-back{ border-radius: var(--radius-sm) !important; }

/* ── Buttons: flatter, modern, tasteful shadow instead of brightness-filter hover ── */
.btn{
    border-radius: var(--radius-sm) !important;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
    letter-spacing: -.01em;
}
.btn:hover{ filter: none !important; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active{ transform: scale(.97) translateY(0); }
.btn--red{ box-shadow: 0 4px 14px rgba(200,16,46,.22) !important; }
.btn--red:hover{ box-shadow: 0 8px 22px rgba(200,16,46,.32) !important; }
.btn--blue{ background: var(--accent-blue) !important; }
.btn--ghost{
    border: 1px solid var(--line2) !important;
    font-weight: 600 !important;
}

/* ── Settings-style card lists: rounder, more generous padding, cleaner dividers ── */
.stg-list{
    border-radius: var(--radius-md) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-xs);
}
.stg-row{
    padding: 13px 16px !important;
    font-size: 13px !important;
}
.stg-section{
    letter-spacing: .1em !important;
    padding: 14px 16px 6px !important;
}

/* ── Wallpaper swatches: rounder, clearer active state ── */
.wp-swatch{
    border-radius: var(--radius-sm) !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
.wp-swatch:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.wp-swatch.active{
    outline: 2px solid var(--log-red);
    outline-offset: 2px;
}

/* ── Lock screen: softer, more editorial type scale ── */
.lock-time{ font-weight: 200 !important; letter-spacing: -.04em !important; }
.lock-slider{
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
}
.lock-slider-handle{
    box-shadow: 0 10px 24px rgba(200,16,46,.3) !important;
}

/* ── Boot screen ── */
.boot-brand{ letter-spacing: -.04em !important; font-weight: 800 !important; }
.boot-track{ border-radius: 999px !important; }
.boot-fill{ border-radius: 999px !important; }

/* ── Generic focus/interaction polish across inputs ── */
input[type="text"], input[type="number"], input[type="email"], select, textarea{
    border-radius: var(--radius-sm) !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus{
    outline: none;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px var(--accent-blue-tint) !important;
}

/* ══════════════════════════════════════════════════
   HOME SCREEN — greeting header + tile refinements
══════════════════════════════════════════════════ */
.home-grid{
    top: 84px !important; /* room for the greeting header above the icons */
}
.home-greeting{
    position: absolute;
    top: 46px;
    left: calc(24px + env(safe-area-inset-left));
    right: calc(24px + env(safe-area-inset-right));
    z-index: 3;
}
.home-greeting-title{
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    text-shadow: 0 1px 12px rgba(255,255,255,.5);
}
.home-greeting-sub{
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-top: 2px;
    text-shadow: 0 1px 10px rgba(255,255,255,.4);
}
:root[data-theme="dark"] .home-greeting-title,
:root[data-theme="dark"] .home-greeting-sub{
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

/* Bigger, more confident tiles; icon glyph slightly larger relative to tile */
.app-ico{
    width: 92px !important;
    height: 92px !important;
    font-size: 36px !important;
}
@media(max-width:599px){
    .app-ico{ width: 76px !important; height: 76px !important; }
}
.app-lbl{
    font-size: 11.5px !important;
    margin-top: 2px;
}

/* Legible labels over any wallpaper: soft pill instead of relying on blur alone */
.app-lbl{
    padding: 3px 9px !important;
    background: rgba(255,255,255,.65) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
:root[data-theme="dark"] .app-lbl{ background: rgba(15,20,32,.55) !important; }

/* Subtle staggered entrance instead of icons just appearing */
.home-grid > *{
    animation: efbTileIn .38s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes efbTileIn{
    from{ opacity: 0; transform: translateY(8px) scale(.96); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}
.home-grid > *:nth-child(1){ animation-delay: .02s }
.home-grid > *:nth-child(2){ animation-delay: .05s }
.home-grid > *:nth-child(3){ animation-delay: .08s }
.home-grid > *:nth-child(4){ animation-delay: .11s }
.home-grid > *:nth-child(5){ animation-delay: .14s }
.home-grid > *:nth-child(6){ animation-delay: .17s }
.home-grid > *:nth-child(n+7){ animation-delay: .2s }

/* ══════════════════════════════════════════════════
   CROSS-APP CONSISTENCY PASS
   Every app (Checklists, Tech Log, Delay Report, OFP,
   NOTAMs, App Store, PlaneSwipe, Resources, Fuel Calc...)
   uses its own class prefix but the same handful of
   shapes underneath: cards, rows, pills/chips/badges,
   grids, and form fields. Targeting by the shared
   naming convention gets every screen to the same
   modern baseline in one pass instead of hand-tuning
   ~15 separate app stylesheets worth of rules.
══════════════════════════════════════════════════ */

/* Cards (as-card, ntm-card, ps-card, res-card, ...) */
[class$="-card"]{
    border-radius: var(--radius-md) !important;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}
[class$="-card"]:hover{
    box-shadow: var(--shadow-sm);
}

/* Rows (dr-route-row, ofp-route-row, res-row, tl-history-item, tl-sign-row, tl-toggle-row...) */
[class$="-row"], [class*="-row"]{
    border-radius: var(--radius-sm);
    transition: background .12s ease;
}
[class$="-row"]:hover, [class*="-item"]:hover{
    background: var(--paper2);
}

/* Pills / chips / badges (a-badge-*, cat-pill, dr-code-chip, tl-chip, tl-tag, ofp-meta-pill, weather-pill, as-cat-pill...) */
[class*="-pill"], [class*="-chip"], [class*="-badge"], [class*="-tag"]{
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}

/* Grids used inside individual apps (as-grid, dr-code-grid, ofp-wx-grid, tl-grid, weather-grid, wp-grid) */
[class$="-grid"]{
    gap: 10px;
}

/* Form fields / inputs used inside apps (form-field, form-row, tl-input-group, tl-plain-input) */
.form-field, .tl-input-group{
    margin-bottom: 14px;
}
.tl-plain-input, .form-field input, .form-field select, .form-field textarea{
    border-radius: var(--radius-sm) !important;
}

/* App-store install/uninstall/open buttons */
.as-card-btn{
    border-radius: 999px !important;
    transition: transform .12s ease, filter .12s ease !important;
}
.as-card-btn:hover{ transform: translateY(-1px); }
.as-card-ico{
    border-radius: var(--radius-sm) !important;
}