/* ============================================================
   enhance.css — additive visual + motion layer for HMS.
   Loaded AFTER app.css so it can layer on top.
   Goals: confident type, tasteful depth/glass, crisp focus,
   graceful degradation. NEVER hurt readability or break layout.
   Escape hatches:
     - html.no-fx           (set by motion.js on low-power/reduced)
     - prefers-reduced-motion
     - prefers-reduced-transparency
   ============================================================ */

/* ---- 1. Typographic system --------------------------------- */
:root {
  --fx-font: "Inter", "SF Pro Display", system-ui, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --fx-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px rgba(16,24,40,.06);
  --fx-shadow-md: 0 2px 6px rgba(16,24,40,.06), 0 10px 24px rgba(16,24,40,.09);
  --fx-shadow-lg: 0 8px 20px rgba(16,24,40,.10), 0 24px 60px rgba(16,24,40,.14);
  --fx-ease: cubic-bezier(.22,.61,.36,1);
  --fx-spring: cubic-bezier(.34,1.56,.64,1);
}

body {
  font-family: var(--fx-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Confident headings — heavier weight, tighter tracking. Kept high-contrast. */
h1, h2, h3, .page-title, .panel-head {
  font-family: var(--fx-font);
  letter-spacing: -0.02em;
}
h1, h2, .page-title { font-weight: 800; }
h3, .panel-head { font-weight: 700; }
.page-title { letter-spacing: -0.025em; }
.page-sub { letter-spacing: 0; }

/* Body comfort — nudge line-height without shifting layout metrics much. */
p, .notes, .detail-item .v, .cell .val { line-height: 1.5; }

/* Numeric tabular alignment for stat-like elements. */
[data-countup], .badge, .role-badge { font-variant-numeric: tabular-nums; }

/* ---- 2. Depth & lighting on elevated surfaces -------------- */
/* Layered ambient shadow + hairline top highlight for a lit look.
   Uses solid backgrounds; glass is added only where safe below. */
.panel, .login-card, .colchooser .menu {
  box-shadow: var(--fx-shadow-md);
  border-radius: 14px;
}
.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    var(--panel);
}

/* Subtle gradient accent bar option for panel heads (opt-in, harmless default). */
.panel-head { position: relative; }

/* Glassmorphism — only applied when the browser supports backdrop-filter
   AND the user hasn't asked to reduce transparency, AND not no-fx. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(.no-fx) .colchooser .menu {
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid rgba(255,255,255,.6);
  }
  /* Sidebar gets a faint frosted feel while staying opaque-legible. */
  html:not(.no-fx) .side-backdrop.show {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* ---- 3. Refined cards / buttons / focus -------------------- */
.card, .panel, .guest-row, .login-card {
  transition: box-shadow .25s var(--fx-ease),
              transform .25s var(--fx-ease),
              border-color .2s var(--fx-ease);
  will-change: auto;
}

.btn {
  border-radius: 10px;
  box-shadow: var(--fx-shadow-sm);
  transition: background .15s var(--fx-ease),
              box-shadow .18s var(--fx-ease),
              transform .12s var(--fx-spring);
}
.btn:hover { box-shadow: var(--fx-shadow-md); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.secondary, .btn.ghost { box-shadow: none; }
.btn.secondary:hover { box-shadow: var(--fx-shadow-sm); }

/* Crisp, consistent focus rings across interactive elements. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Smooth radii on inputs to match. */
input[type=text], input[type=email], input[type=password],
input[type=search], select { border-radius: 9px; }

/* ---- 4. Motion primitives (driven by motion.js) ------------ */
/* Hover lift — JS adds .fx-lift on capable devices; CSS does the work. */
html:not(.no-fx) .fx-lift {
  transform: translateY(-3px);
  box-shadow: var(--fx-shadow-lg);
}

/* 3D tilt — motion.js sets CSS vars --rx/--ry; we compose the transform. */
html:not(.no-fx) [data-tilting] {
  transform: perspective(900px)
             rotateX(var(--ry, 0deg))
             rotateY(var(--rx, 0deg))
             translateY(-3px);
  transition: transform .08s linear, box-shadow .25s var(--fx-ease);
  box-shadow: var(--fx-shadow-lg);
}

/* Magnetic buttons — motion.js sets --mx/--my translate offsets. */
html:not(.no-fx) [data-magnet] {
  transform: translate(var(--mx, 0px), var(--my, 0px));
}

/* Staggered fade-up reveal. Elements start hidden ONLY when JS has armed
   them (.fx-reveal). Without JS they render normally (no FOUC / no hiding). */
html:not(.no-fx) .fx-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--fx-ease), transform .5s var(--fx-ease);
  transition-delay: var(--fx-delay, 0ms);
  will-change: opacity, transform;
}
html:not(.no-fx) .fx-reveal.fx-in {
  opacity: 1;
  transform: none;
}

/* ---- 5. Respect / degrade ---------------------------------- */
/* Reduced motion: neutralize all transitions & transforms globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fx-reveal { opacity: 1 !important; transform: none !important; }
  [data-tilting], [data-magnet], .fx-lift { transform: none !important; }
}

/* Reduced transparency: drop glass, use solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
  .colchooser .menu {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--line) !important;
  }
}

/* no-fx escape hatch: disable heaviest effects, keep solid + legible. */
html.no-fx .panel,
html.no-fx .login-card,
html.no-fx .colchooser .menu {
  background: var(--panel);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: var(--shadow);
}
html.no-fx .fx-reveal { opacity: 1 !important; transform: none !important; }
html.no-fx *, html.no-fx *::before, html.no-fx *::after {
  transition-duration: .001ms !important;
}


/* === mobile responsive pass (2026-07-23) === */
/* ============================================================
   Mobile safety net — global, conservative. Applies only ≤640px.
   Targets generic patterns present in app.css/enhance.css and the
   CSS-less module views (Guest check-in, My work, Design & Dev).
   Desktop styling and the already-responsive parts keep their own
   rules: the sidebar/hamburger shell, .guest-row card layout,
   MailVault's 3-pane, and the module grids (.grid-2/.mw-grid/
   .map-split all collapse to one column at 820–900px already).
   ============================================================ */
@media (max-width: 640px) {
  /* Never let the whole page scroll sideways — wide content scrolls
     inside its own container instead. Set on the root only, so the
     sticky mobile topbar (.topbar-slim) keeps sticking. */
  html { overflow-x: hidden; }
  body { max-width: 100%; }

  /* Tighten main + panel chrome (flush panels keep their inline padding:0). */
  .content { padding: 12px 12px 28px; }
  .panel-head { padding: 12px 14px; }
  .panel-body { padding: 12px 14px; }

  /* Media never overflows its column. */
  img, video { max-width: 100%; height: auto; }
  iframe, canvas, svg, object, embed { max-width: 100%; }
  pre { max-width: 100%; overflow-x: auto; }

  /* Form controls stay inside the viewport. */
  input, select, textarea { max-width: 100%; }

  /* Generic admin tables scroll horizontally within themselves rather
     than widening the page; the anonymous table box keeps columns aligned. */
  table.tbl {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  /* …except tables that already sit in their own scroll container with
     sticky headers (Design & Dev) — leave those as normal table layout. */
  .map-scroll table.tbl, .sp-scroll table.tbl {
    display: table;
    white-space: normal;
  }

  /* Auto-fill detail grid → explicit single column. */
  .detail-grid { grid-template-columns: 1fr; }

  /* Comfortable tap targets. */
  .btn { min-height: 36px; }

  /* Fixed-width login card must not exceed a narrow screen. */
  .login-wrap { padding: 16px; }
  .login-card { width: 100%; max-width: 400px; padding: 20px; }
}