/* =====================================================================================================
   House kit v2 – the shared look of all apps on the server (Matrix Planner, Rezeptsammlung,
   Ultimate Tracker, Server Monitor).

   DO NOT EDIT THIS FILE INSIDE AN APP. It is owned by the "house kit" chat; changes are proposed there and
   arrive as a new kit version. An app adds its own styles in its own stylesheet, loaded AFTER this one.
   See house/HOUSE-STYLE.md.

   Contents
     1. Tokens: neutral colours (light / dark), app accents, radius, shadow, font
     2. Base elements
     3. Controls: buttons, segmented control, fields, dialogs, settings tabs
     4. Header (hk-header)
     5. Login page (hk-login)
     6. Phone width
   ===================================================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #eef0f4;
  --text: #1b1f24;
  --muted: #647084;
  --border: #dfe3ea;
  --border-strong: #b9c0cc;
  --danger: #c0392b;
  --ok: #1f9a57;
  --warn: #c98a00;
  --shadow: 0 6px 24px rgba(20, 28, 40, 0.18);
  --backdrop: rgba(10, 14, 20, 0.5);
  --radius: 12px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  --hk-max: 1040px;   /* content width; an app may set its own on :root */

  /* Accent = the app's identity colour. Set per app below via <html data-app="…">.
     --accent       fills: primary button, active tab of a segmented control, badges
     --accent-text  text/icons ON an accent fill
     --accent-ink   the accent used as text/icon/line on a normal surface (links, active settings tab, focus ring) */
  --accent: #2456d6;
  --accent-text: #ffffff;
  --accent-ink: #2456d6;
  color-scheme: light;
}

/* Dark: follows the system unless the person chose light; or chosen explicitly. Both blocks must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0f1216;
    --surface: #171b21;
    --surface-2: #20252d;
    --text: #e8ebf0;
    --muted: #8d97a8;
    --border: #2a303a;
    --border-strong: #3d4552;
    --danger: #ef7466;
    --ok: #3fbf7f;
    --warn: #f2b134;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
    --backdrop: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0f1216;
  --surface: #171b21;
  --surface-2: #20252d;
  --text: #e8ebf0;
  --muted: #8d97a8;
  --border: #2a303a;
  --border-strong: #3d4552;
  --danger: #ef7466;
  --ok: #3fbf7f;
  --warn: #f2b134;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  --backdrop: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* App accents – light values first, then dark (same two-block pattern as above). */
:root[data-app='planner']  { --accent: #2456d6; --accent-text: #ffffff; --accent-ink: #2456d6; }
:root[data-app='recipes']  { --accent: #f2c14e; --accent-text: #2a1f00; --accent-ink: #8a6100; }
:root[data-app='tracker']  { --accent: #1f242c; --accent-text: #ffffff; --accent-ink: #1f242c; }
:root[data-app='monitor']  { --accent: #1e8a55; --accent-text: #ffffff; --accent-ink: #157046; }
@media (prefers-color-scheme: dark) {
  :root[data-app='planner']:not([data-theme='light'])  { --accent: #6b95f2; --accent-text: #0c1220; --accent-ink: #8aacf5; }
  :root[data-app='recipes']:not([data-theme='light'])  { --accent: #f2c14e; --accent-text: #241a00; --accent-ink: #f2c14e; }
  :root[data-app='tracker']:not([data-theme='light'])  { --accent: #e8ebf0; --accent-text: #0f1216; --accent-ink: #e8ebf0; }
  :root[data-app='monitor']:not([data-theme='light'])  { --accent: #3fbf7f; --accent-text: #04210f; --accent-ink: #5fd39a; }
}
:root[data-app='planner'][data-theme='dark']  { --accent: #6b95f2; --accent-text: #0c1220; --accent-ink: #8aacf5; }
:root[data-app='recipes'][data-theme='dark']  { --accent: #f2c14e; --accent-text: #241a00; --accent-ink: #f2c14e; }
:root[data-app='tracker'][data-theme='dark']  { --accent: #e8ebf0; --accent-text: #0f1216; --accent-ink: #e8ebf0; }
:root[data-app='monitor'][data-theme='dark']  { --accent: #3fbf7f; --accent-text: #04210f; --accent-ink: #5fd39a; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font);
}
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 18px; letter-spacing: -0.01em; }
h2 { font-size: 17px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 22px 0 8px; }
a { color: var(--accent-ink); }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ---------- 3. Controls ---------- */
.btn {
  font: inherit; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text);
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.badge { background: var(--accent); color: var(--accent-text); border-radius: 999px; font-size: 12px; min-width: 20px; padding: 0 6px; text-align: center; }

/* Segmented control: buttons with aria-pressed, or radio labels. */
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg > button, .seg > label > span {
  font: inherit; display: block; min-height: 38px; line-height: 38px; padding: 0 14px;
  border: 0; background: transparent; color: var(--text); cursor: pointer; white-space: nowrap;
}
.seg > button + button, .seg > label + label { border-left: 1px solid var(--border-strong); }
.seg > button[aria-pressed='true'], .seg > button[aria-selected='true'], .seg > label:has(input:checked) > span {
  background: var(--accent); color: var(--accent-text); font-weight: 600;
}
.seg > label { display: block; flex: 1; text-align: center; }
.seg > label > input { position: absolute; opacity: 0; pointer-events: none; }
.seg > label:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: -2px; }

input[type='text'], input[type='password'], input[type='number'], input[type='date'], input[type='search'],
input[type='email'], input[type='url'], input[type='time'], select, textarea {
  font-family: inherit; font-size: 15px; line-height: 1.4; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px; min-height: 40px; width: 100%;
}
textarea { resize: vertical; }
input[type='range'], input[type='checkbox'], input[type='radio'] { accent-color: var(--accent-ink); }
.field { display: grid; gap: 4px; margin: 0 0 14px; }
label.field, .field > span:first-child { font-size: 13px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
.error { color: var(--danger); font-size: 13px; }
.error:empty { display: none; }

/* Dialogs (pop-ups). Settings use the same frame plus the tab bar below. */
dialog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid var(--border-strong); border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
dialog.wide { width: min(760px, calc(100vw - 24px)); }
dialog::backdrop { background: var(--backdrop); }
dialog > form { padding: 20px; }
dialog h2 { margin-bottom: 16px; }
.dialog-actions {
  display: flex; gap: 8px; align-items: center; position: sticky; bottom: 0;
  margin: 8px -20px -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.spacer { flex: 1; }
/* Optional dialog title row with a close (×) button: <div class="hk-dialog-head"><h2>…</h2><button class="hk-icon-btn" value="close" data-hk-icon="close" aria-label="…"></button></div> */
.hk-dialog-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.hk-dialog-head h2 { margin: 0; flex: 1; font-size: 18px; }

/* Settings tabs: the app's own tabs first, then <span class="tab-sep"></span>, then the shared Account · Data · About. */
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; border-bottom: 1px solid var(--border); margin: 0 -20px 16px; padding: 4px 20px 0; }
.tabs [role='tab'] {
  flex: none; min-height: 40px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
}
.tabs [role='tab']:hover { color: var(--text); }
.tabs [role='tab'][aria-selected='true'] { color: var(--text); border-bottom-color: var(--accent-ink); font-weight: 600; }
.tabs [role='tab']:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: 6px; }
.tabs .tab-sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 8px; flex: none; }
.tab-panel { min-height: 260px; display: grid; gap: 12px; align-content: start; }
.tab-panel h3 { margin: 6px 0 0; }
/* "About" tab rows */
.hk-about { display: grid; grid-template-columns: max-content 1fr; gap: 0 16px; margin: 0; }
.hk-about dt, .hk-about dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.hk-about dt { color: var(--muted); }
.hk-about dd { font-variant-numeric: tabular-nums; }

/* ---------- 4. Header ----------
   <header class="hk-header">
     <div class="hk-row1">
       <a class="hk-brand" href="/"><span class="hk-tile" aria-hidden="true">RS</span>
         <span class="hk-titles"><span class="hk-name">App name</span>
           <span class="hk-meta"><span class="hk-dot"></span><span data-hk="version"></span><span data-hk="clock"></span></span></span></a>
       <div class="hk-actions"> …app buttons… <button class="hk-icon-btn" data-hk="theme"></button> <button class="hk-icon-btn" data-hk-icon="settings" …></button></div>
     </div>
     <div class="hk-row2"> …the app's own navigation… </div>
   </header> */
.hk-header { background: var(--bg); border-bottom: 1px solid var(--border); }
.hk-row1, .hk-row2 { max-width: var(--hk-max); margin-inline: auto; padding-inline: 16px; display: flex; align-items: center; gap: 8px; }
.hk-row1 { min-height: 64px; padding-block: 10px; }
.hk-row2 { flex-wrap: wrap; gap: 10px; padding-block: 2px 12px; }
.hk-row2:empty { display: none; }
.hk-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; margin-right: auto; }
.hk-tile {
  flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-text);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; letter-spacing: 0.02em;
}
.hk-titles { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.hk-titles > * { max-width: 100%; }
.hk-name { font-weight: 650; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hk-meta [data-hk='clock']:not(:empty)::before { content: '· '; }
.hk-meta [data-hk]:empty { display: none; }
.hk-meta .hk-extra::before { content: '· '; }
/* Live / status dot: the app sets <body data-live="on|off"> (or data-status="ok|warn|bad" for a health status). */
.hk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex: none; align-self: center; }
body[data-live='on'] .hk-dot, body[data-status='ok'] .hk-dot { background: var(--ok); }
body[data-status='warn'] .hk-dot { background: var(--warn); }
body[data-live='off'] .hk-dot { background: var(--muted); }
body[data-status='bad'] .hk-dot { background: var(--danger); }
.hk-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.hk-icon-btn {
  flex: none; width: 40px; height: 40px; padding: 0; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.hk-icon-btn:hover { background: var(--surface-2); }
.hk-icon-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.hk-icon-btn svg { width: 18px; height: 18px; }
/* Logged-in person (multi-user apps): <span class="hk-user">Florin <span class="hk-role">Admin</span></span> */
.hk-user { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; white-space: nowrap; }
.hk-role { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--accent); color: var(--accent-text); }
/* A page title with a back button, used in row 2 on detail pages */
.hk-back { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex: none; }
.hk-page-title { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 5. Login page ----------
   <main class="hk-login"><form class="hk-login-card"> <div class="hk-login-top"><span class="hk-tile">RS</span><h1>App</h1></div>
   …fields (label.field)… <p class="error" role="alert"></p> <button class="btn primary">Log in</button>
   <p class="hk-login-foot"><span data-hk="version"></span></p></form></main> */
.hk-login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.hk-login-card {
  width: min(100%, 340px); display: grid; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 22px 22px;
}
.hk-login-top { display: grid; justify-items: center; gap: 10px; margin-bottom: 4px; }
.hk-login-top .hk-tile { width: 48px; height: 48px; border-radius: 12px; font-size: 15px; }
.hk-login-top h1 { font-size: 19px; }
.hk-login-card .field { margin: 0; }
.hk-login-card .btn.primary { min-height: 44px; font-size: 15px; }
.hk-login-foot { margin: 0; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 6. Phone width ---------- */
@media (max-width: 640px) {
  .hk-row1, .hk-row2 { padding-inline: 12px; }
  .hk-row1 { min-height: 60px; gap: 6px; }
  .hk-brand { gap: 8px; }
  .hk-titles { flex-direction: column; align-items: flex-start; gap: 0; }
  .hk-name { font-size: 17px; }
  .hk-meta { font-size: 11.5px; }
  .hk-actions { gap: 6px; }
  .hk-hide-phone { display: none !important; }
  input[type='text'], input[type='password'], input[type='number'], input[type='search'], select, textarea { font-size: 16px; } /* no zoom on iPhone */
  dialog, dialog.wide { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; max-height: 94dvh; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (min-width: 641px) { .hk-show-phone { display: none !important; } }
@media print { .hk-header { display: none !important; } }