/* ── EAM Theme — central brand variables ──
   Loaded FIRST (as a dependency of every other EAM stylesheet), so any
   EAM page can use these vars and a single color change here reflects
   everywhere — Dashboard, Reports, Employee list, Quick Check-in, Login.
   Values below match the plugin's existing indigo/green/red palette
   already used across admin.css / frontend.css / quick-checkin.css —
   this file doesn't introduce new colors, it names the ones already in
   use so they're consistent instead of separately hardcoded per file. */
:root{
    /* Brand */
    --eam-primary:        #4f46e5;
    --eam-primary-dark:   #4338ca;
    --eam-primary-soft:   #eef2ff;

    /* Status — darkened vs originals so text-on-soft pairs clear WCAG AA (4.5:1) */
    --eam-success:        #0f7a53;
    --eam-success-soft:   #d1fae5;
    --eam-danger:         #b23a3a;
    --eam-danger-soft:    #fee2e2;
    --eam-warning:        #92400e;
    --eam-warning-soft:   #fef3c7;

    /* Surface */
    --eam-bg:             #f8fafc;
    --eam-bg-gradient:    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    --eam-card-bg:        #ffffff;
    --eam-border:         #d8dee6;
    --eam-shadow-sm:      0 2px 10px rgba(15,23,42,.06);
    --eam-shadow-md:      0 8px 28px rgba(15,23,42,.08);
    --eam-radius:         14px;
    --eam-radius-lg:      20px;

    /* Text — text-faint darkened from #94a3b8 (2.56:1, failed AA) to a
       shade that still reads as "muted" but clears 4.5:1 on white/bg */
    --eam-text:           #0f172a;
    --eam-text-muted:     #64748b;
    --eam-text-faint:     #6b7686;

    /* Fonts */
    --eam-font:           'Plus Jakarta Sans', sans-serif;
    --eam-font-head:      'Sora', sans-serif;
}


/* ══════════════════════════════════════════════════════
   Smooth cross-page transitions (no more white flash)
   ──────────────────────────────────────────────────────
   WordPress pages are normal full navigations (not a
   single-page app), so a click on "Team Attendance",
   "Leave", the hamburger nav, etc. used to hard-cut to a
   blank white page while the next one loaded.

   `@view-transition { navigation: auto; }` opts every
   same-origin link/back-forward navigation on EAM pages
   into the browser's native View Transitions API: the old
   page is captured as a snapshot and cross-dissolved into
   the new one instead of just vanishing. It's a browser
   feature (Chrome/Edge 111+, Safari 18+), so on a browser
   that doesn't support it yet this rule is simply ignored —
   navigation looks exactly as it did before, no breakage.
   ══════════════════════════════════════════════════════ */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   "Feels like an app, not a website" — global mobile-chrome removal
   ──────────────────────────────────────────────────────────────────
   Loaded first (dependency of every other EAM stylesheet, incl. the
   admin/report pages), so this applies everywhere the plugin renders
   UI, not just the dashboard.

   - overscroll-behavior stops the rubber-band bounce + Chrome's
     pull-to-refresh, which are the single biggest "this is just a
     browser tab" tell on a long attendance/report page.
   - tap-highlight + touch-action remove the grey flash and ~300ms
     delay Android gives every tap by default; native apps have
     neither.
   - user-select is turned off only on nav/buttons/icons — normal
     page text (attendance numbers, report tables, names) is left
     selectable on purpose, since copy-paste there is a real need.
   Scoped to .eam-* wrappers only, so it never touches the rest of a
   WordPress theme's pages that don't use this plugin. ══════════════ */
html:has(.eam-dashboard),
html:has(.eam-home-wrap),
html:has(.eam-site-header) {
    overscroll-behavior-y: none;
}
.eam-dashboard, .eam-home-wrap, .eam-site-header,
.eam-site-nav, .eam-mobile-nav, .eam-bottom-nav,
.eam-header-logout, .eam-mobile-logout {
    overscroll-behavior: none;
}
.eam-btn, .eam-bn-item, .eam-site-nav a, .eam-mobile-nav a,
.eam-header-logout, .eam-mobile-logout, .eam-hamburger, .eam-bell-btn,
button[class^="eam-"], a[class^="eam-"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* Safe-area padding helpers — reused by the bottom nav, sticky
   check-in bar, etc. so content never sits under an iPhone's home
   indicator / notch once the app is running edge-to-edge in
   standalone mode. Requires viewport-fit=cover, which class-pwa.php
   ensures is present on the page's viewport meta tag. */
:root {
    --eam-safe-top:    env(safe-area-inset-top, 0px);
    --eam-safe-bottom: env(safe-area-inset-bottom, 0px);
    --eam-safe-left:   env(safe-area-inset-left, 0px);
    --eam-safe-right:  env(safe-area-inset-right, 0px);
}