/* ============================================================
   shared-ui :: base.css
   Structural primitives shared across all 19 homelab apps.
   NO colors, NO theme — geometry and scales only.
   Colors are supplied by a tier file (adult.css / kids.css)
   via --sui-* custom properties.
   All custom properties and classes are prefixed --sui- / .sui-
   ============================================================ */

/* ============================================================
   Self-hosted webfonts (kills render-blocking fonts.googleapis.com).
   src order = LOCAL first, gstatic fallback second:
     - Apps with a /static/fonts symlink load local woff2; first paint
       never touches the internet.
     - Apps not yet migrated have no symlink -> local 404s -> falls
       through to gstatic, so they keep working unchanged until rolled over.
   woff2 files: shared-ui/static/fonts/ (exact-match DM Sans 400/500,
   DM Serif Display 400; latin + latin-ext subsets from Google v17).
   ============================================================ */
/* DM Sans 400 — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dmsans-latin-ext.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 400 — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dmsans-latin.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 500 — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dmsans-latin-ext.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 500 — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dmsans-latin.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Serif Display 400 — latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dmserifdisplay-latin-ext.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/dmserifdisplay/v17/-nFnOHM81r4j6k0gjAW3mujVU2B2G_5x0vrx52jJ3Q.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Serif Display 400 — latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dmserifdisplay-latin.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/dmserifdisplay/v17/-nFnOHM81r4j6k0gjAW3mujVU2B2G_Bx0vrx52g.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Font stack (dominant homelab stack; kids & Cron Manager override locally) --- */
  --sui-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sui-font-display: 'DM Serif Display', Georgia, serif;
  --sui-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* --- Spacing scale (4 / 8 / 12 / 16 / 20 / 24 / 32) --- */
  --sui-space-1: 4px;
  --sui-space-2: 8px;
  --sui-space-3: 12px;
  --sui-space-4: 16px;
  --sui-space-5: 20px;
  --sui-space-6: 24px;
  --sui-space-7: 32px;

  /* --- Border radius scale (restrained adult magnitudes; kids.css overrides) --- */
  --sui-radius-sm: 6px;
  --sui-radius-md: 10px;
  --sui-radius-lg: 16px;

  /* --- Transitions --- */
  --sui-transition-fast: 120ms ease;
  --sui-transition-base: 200ms ease;

  /* --- z-index ladder --- */
  --sui-z-header: 100;
  --sui-z-modal: 200;
  --sui-z-pin: 999;

  /* --- Layout container widths --- */
  --sui-container-sm: 720px;
  --sui-container-md: 960px;
  --sui-container-lg: 1200px;
  --sui-container-xl: 1400px;
}

/* ============================================================
   Reset / base element rules
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sui-font-body);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--sui-font-display);
  font-weight: 400;
  margin: 0 0 var(--sui-space-3);
}

/* ============================================================
   Layout primitives
   ============================================================ */
.sui-container {
  width: 100%;
  max-width: var(--sui-container-lg);
  margin-inline: auto;
  padding: var(--sui-space-5);
}

.sui-container-sm { max-width: var(--sui-container-sm); }
.sui-container-md { max-width: var(--sui-container-md); }
.sui-container-lg { max-width: var(--sui-container-lg); }
.sui-container-xl { max-width: var(--sui-container-xl); }

.sui-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sui-space-4);
}

.sui-row {
  display: flex;
  gap: var(--sui-space-3);
  align-items: center;
}

/* ============================================================
   Card
   ============================================================ */
.sui-card {
  border: 1px solid var(--sui-border);
  border-radius: var(--sui-radius-md);
  padding: var(--sui-space-4);
  background: var(--sui-bg-card);
}

/* ============================================================
   Buttons (geometry only — intent colors live in the tier file)
   ============================================================ */
.sui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sui-space-2);
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--sui-radius-sm);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: var(--sui-transition-fast);
}

.sui-btn-sm {
  padding: 5px 10px;
  font-size: .8rem;
}

.sui-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ============================================================
   Form inputs
   ============================================================ */
.sui-input,
.sui-select,
.sui-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--sui-border);
  border-radius: var(--sui-radius-sm);
  font: inherit;
  background: var(--sui-bg-card);
  color: var(--sui-text);
  transition: var(--sui-transition-fast);
}

.sui-input:focus,
.sui-select:focus,
.sui-textarea:focus {
  outline: 2px solid var(--sui-accent);
  outline-offset: -1px;
  border-color: var(--sui-accent);
}

.sui-label {
  display: block;
  margin-bottom: var(--sui-space-1);
  font-size: .8rem;
  font-weight: 600;
}

/* ============================================================
   Modal / overlay
   ============================================================ */
.sui-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sui-space-4);
  z-index: var(--sui-z-modal);
}

.sui-modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--sui-border);
  border-radius: var(--sui-radius-lg);
  padding: var(--sui-space-6);
  background: var(--sui-bg-card);
}

.sui-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sui-space-4);
}

/* ============================================================
   Table
   ============================================================ */
.sui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.sui-table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  text-align: left;
}

.sui-table th,
.sui-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sui-border);
}

/* ============================================================
   PIN pad
   ============================================================ */
.sui-pinpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 260px;
}

.sui-pin-key {
  padding: 16px 10px;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  border: 1px solid var(--sui-border);
  border-radius: var(--sui-radius-md);
  background: var(--sui-bg-card);
  color: var(--sui-text);
  cursor: pointer;
  transition: var(--sui-transition-fast);
}

.sui-pin-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: var(--sui-space-5);
}

.sui-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--sui-border);
  transition: var(--sui-transition-base);
}

.sui-pin-dot.is-filled {
  background: var(--sui-accent);
  border-color: var(--sui-accent);
}

/* ============================================================
   Tab bar
   ============================================================ */
.sui-tabs {
  display: flex;
  border-bottom: 1px solid var(--sui-border);
}

.sui-tab {
  padding: 8px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  color: var(--sui-text-muted);
  cursor: pointer;
  transition: var(--sui-transition-fast);
}

.sui-tab.is-active {
  color: var(--sui-accent);
  border-bottom-color: var(--sui-accent);
}

/* ============================================================
   Toggle switch (44 x 24 track, 18px knob)
   ============================================================ */
.sui-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.sui-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sui-toggle-track {
  position: absolute;
  inset: 0;
  border: 1px solid var(--sui-border);
  border-radius: 999px;
  background: var(--sui-bg-elevated);
  transition: var(--sui-transition-base);
}

.sui-toggle-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sui-text-muted);
  transition: var(--sui-transition-base);
}

.sui-toggle input:checked + .sui-toggle-track {
  background: var(--sui-accent);
  border-color: var(--sui-accent);
}

.sui-toggle input:checked + .sui-toggle-track::before {
  transform: translateX(20px);
  background: #fff;
}

/* ============================================================
   Chip
   ============================================================ */
.sui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sui-space-1);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--sui-bg-elevated);
  color: var(--sui-text-muted);
}

/* ============================================================
   Spinner
   ============================================================ */
.sui-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--sui-border);
  border-top-color: var(--sui-accent);
  border-radius: 50%;
  animation: sui-spin .8s linear infinite;
}

@keyframes sui-spin {
  to { transform: rotate(360deg); }
}