/* ============================================================
   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: "Ubuntu", "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);
  /* the lit-top highlight on panels and the frosted menu; themes.css re-tunes these for dark */
  --panel-glow: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  --glass-bg: rgba(255,255,255,.72);
  --glass-line: rgba(255,255,255,.6);
  --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.012em;
}
h1, h2, .page-title { font-weight: 800; }
h3, .panel-head { font-weight: 700; }
.page-title { letter-spacing: -0.018em; }
.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: var(--panel-glow), 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: var(--glass-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid var(--glass-line);
  }
  /* 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: var(--panel) !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; }
}


/* ============================================================
   Finish (2026-10-20) — Ubuntu type system and a calmer, more
   expensive-feeling surface. Sizes are tuned for Ubuntu, which is
   wider and has a taller x-height than the system fonts it replaced:
   body is 13.5px (reads like ~14px Segoe), tables 13px, labels move to
   weight 500 instead of 600/700 because Ubuntu's bold is heavy.
   Colours come from tokens only (docs/THEMING.md).
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 13.5px; line-height: 1.5; font-feature-settings: "kern" 1; font-kerning: normal; }
button, input, select, textarea, optgroup { font-family: inherit; }
code, pre, kbd, samp, .mono { font-family: "Ubuntu Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* type scale */
h1, .page-title { font-size: 23px; font-weight: 700; line-height: 1.22; margin-bottom: 4px; }
h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
h3 { font-size: 15.5px; font-weight: 500; line-height: 1.35; }
.page-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.panel-head { font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; }
.help, .muted { line-height: 1.5; }
strong, b { font-weight: 700; }

/* rail: medium-weight labels read cleaner than semibold at 10–11px */
.side-nav a, .side-bell, .side-signout, .side-pin, .side-install { font-weight: 500; letter-spacing: .005em; }
.side-label { font-size: 10px; letter-spacing: 0; }
.side-brand-name { font-weight: 700; letter-spacing: .01em; }
.side-nav a.active { font-weight: 700; }

/* buttons & controls: one height, one radius, medium weight */
.btn { font-weight: 500; letter-spacing: .005em; min-height: 34px; padding: 7px 14px; border-radius: 9px; }
.btn.sm { min-height: 28px; padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input[type=date], input[type=time], input[type=tel], input[type=url], input:not([type]), select, textarea {
  font-size: 13.5px; border-radius: 9px; transition: border-color .15s var(--fx-ease), box-shadow .15s var(--fx-ease);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--focus); }

/* tables: quieter headers, comfortable rows, numbers aligned */
table.tbl th { font-size: 10.5px; font-weight: 500; letter-spacing: .07em; color: var(--muted); }
table.tbl td { font-size: 13px; }
table.tbl tbody tr { transition: background-color .12s var(--fx-ease); }
table.tbl tbody tr:hover { background: var(--hover); }
td, .tnum, .badge, .n { font-variant-numeric: tabular-nums; }

/* badges and chips: lighter weight, pill shape */
.badge, .role-badge, .chip { font-weight: 500; letter-spacing: .01em; }

/* panels: a touch more air and a hairline instead of a heavy border */
.panel { border-radius: 14px; border-color: var(--line); }
.panel-head { padding: 14px 18px; }
.panel-body { padding: 16px 18px; }

/* tabs / segmented navs that use .on / .active with plain text get the same weight rule */
.tabs a, .admin-tabs a, .subtabs a { font-weight: 500; }
.tabs a.active, .admin-tabs a.active, .subtabs a.active, .tabs a.on, .admin-tabs a.on, .subtabs a.on { font-weight: 700; }

/* selection and scrollbars, app-wide */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* phones: slightly larger body for thumbs and sunlight */
@media (max-width: 640px) {
  body { font-size: 15px; }
  h1, .page-title { font-size: 21px; }
}