/* =============================================================================
   Grand Yan HK — design system (canvas «HK Design System»)
   One system, two densities: FIELD (maid/tech, mobile, ≥18px, tap ≥56px) and
   DESK (supervisor/reception, sidebar). Built ONLY on tokens.css variables.
   Load AFTER ui.css. New class names (hk-*) — no collision with legacy hk.css.
   ============================================================================= */

/* soft danger wash used by the «срочно» chip / banner (brighter than --sem-danger-bg) */
:root { --hk-danger-wash: #FBEFEF; --hk-warn-wash: #F5EBD7; --hk-ok-wash: var(--st-clean-bg); }

/* ── STATUS CHIP — colour + icon + WORD (never colour alone) ─────────────── */
.hk-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 999px;
  font-size: 16px; font-weight: 700; line-height: 1;
  border: 2px solid transparent; white-space: nowrap;
}
.hk-chip svg { flex: none; }
.hk-chip--sm { height: 34px; padding: 0 12px; font-size: 14px; gap: 6px; }
.hk-chip--dirty     { background: var(--st-dirty-bg); border-color: var(--st-dirty-bd); color: var(--st-dirty-tx); }
.hk-chip--clean,
.hk-chip--ready     { background: var(--st-clean-bg); border-color: var(--st-clean-bd); color: var(--st-clean-tx); }
.hk-chip--inspected { background: var(--st-insp-bg);  border-color: var(--st-insp-bd);  color: var(--st-insp-tx); }
.hk-chip--ooo       { background: var(--st-ooo-bg);   border-color: var(--st-ooo-bd);   color: var(--st-ooo-tx); }
.hk-chip--progress  { background: #FFFFFF;            border-color: var(--c-gold);      color: var(--c-gold-dk); }
.hk-chip--urgent    { background: var(--hk-danger-wash); border-color: var(--sem-danger); color: var(--sem-danger); }
/* neutral pill (e.g. cleaning type on the room screen) */
.hk-chip--type      { background: var(--c-cream-2);   border-color: transparent;        color: var(--c-dark); }

/* ── BUTTONS (field-first, glove-friendly) ──────────────────────────────── */
.hk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 10px; cursor: pointer;
  font-family: var(--ui-font); font-weight: 700; text-decoration: none;
  transition: filter .12s ease, background .12s ease;
}
.hk-btn svg { flex: none; }
.hk-btn:active { filter: brightness(0.94); }
.hk-btn:disabled { background: var(--sem-disabled-bg); color: var(--sem-disabled-text); border-color: transparent; cursor: not-allowed; }
.hk-btn--xl    { height: 64px; font-size: 22px; padding: 0 22px; }
.hk-btn--lg    { height: 56px; font-size: 18px; padding: 0 20px; }
.hk-btn--sm    { height: 38px; font-size: 14px; padding: 0 14px; border-radius: 8px; gap: 6px; }  /* desk worklist actions */
.hk-btn--block { width: 100%; }
/* stacked icon-over-label (row of secondary actions on the room screen) */
.hk-btn--stack { flex-direction: column; gap: 3px; height: 60px; font-size: 16px; min-width: 0; }
.hk-btn--primary { background: var(--c-gold); color: #FFFFFF; }
.hk-btn--success { background: var(--sem-success); color: #FFFFFF; }
.hk-btn--ghost   { background: #FFFFFF; color: var(--c-gold-dk); border: 2px solid var(--c-gold); }
.hk-btn--danger  { background: #FFFFFF; color: var(--sem-danger); border: 2px solid var(--sem-danger); }
.hk-btn--neutral { background: #FFFFFF; color: var(--c-dark); border: 2px solid rgba(31,27,20,0.30); }

/* ── KPI TILE — big tabular number + caps label ─────────────────────────── */
.hk-kpi {
  flex: 1; min-width: 0;
  background: #FFFFFF; border: 1px solid var(--c-line);
  border-radius: 10px; padding: 12px 14px; text-align: center;
}
.hk-kpi__num {
  font-size: 30px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--c-dark);
}
.hk-kpi__label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--c-brown); margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hk-kpi--clean .hk-kpi__num,
.hk-kpi--ready .hk-kpi__num     { color: var(--st-clean-tx); }
.hk-kpi--dirty .hk-kpi__num     { color: var(--st-dirty-tx); }
.hk-kpi--inspected .hk-kpi__num { color: var(--st-insp-tx); }
.hk-kpi--ooo .hk-kpi__num       { color: var(--st-ooo-tx); }
.hk-kpi--warn .hk-kpi__num      { color: var(--c-gold-dk); }
.hk-kpi--danger .hk-kpi__num    { color: var(--sem-danger); }
.hk-kpi-row { display: flex; gap: 10px; }

/* ── BANNER — icon + message, ok / warn / danger ────────────────────────── */
.hk-banner {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid transparent; border-radius: 10px;
  padding: 14px 16px; font-size: 17px; font-weight: 600;
}
.hk-banner svg { flex: none; }
.hk-banner--ok     { background: var(--hk-ok-wash);     border-color: var(--sem-success); color: var(--st-clean-tx); }
.hk-banner--warn   { background: var(--hk-warn-wash);   border-color: var(--c-gold-dk);   color: var(--c-gold-dk); }
.hk-banner--danger { background: var(--hk-danger-wash); border-color: var(--sem-danger);  color: var(--sem-danger); }

/* ── HERO — the maid's ONE next room ─────────────────────────────────────── */
.hk-hero {
  display: block; text-decoration: none; color: inherit;
  background: #FFFFFF; border: 1px solid var(--c-line);
  border-left: 6px solid var(--c-gold); border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 4px 16px rgba(31,27,20,0.06);
}
.hk-hero__eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: var(--c-gold-dk); }
.hk-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.hk-hero__no { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.hk-hero__meta { text-align: right; }
.hk-hero__type { font-size: 20px; font-weight: 700; }
.hk-hero__sub  { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 17px; color: var(--c-brown); margin-top: 2px; }
.hk-hero__sub--urgent { color: var(--sem-danger); }

/* ── FIELD TASK ROW — big number, why, status; whole card is the tap target ─ */
.hk-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.10em; color: var(--c-brown); }
.hk-trow {
  display: flex; align-items: center; gap: 14px;
  background: #FFFFFF; border: 1px solid var(--c-line);
  border-left: 6px solid var(--hk-prio-4); border-radius: 10px;
  min-height: 76px; padding: 12px 16px;
  text-decoration: none; color: inherit;
}
.hk-trow:active { background: var(--c-cream-2); }
.hk-trow--prio-1 { border-left-color: var(--hk-prio-1); }
.hk-trow--prio-2 { border-left-color: var(--hk-prio-2); }
.hk-trow--prio-3 { border-left-color: var(--hk-prio-3); }
.hk-trow--prio-4 { border-left-color: var(--hk-prio-4); }
.hk-trow--done   { opacity: 0.75; }
.hk-trow__no   { font-size: 30px; font-weight: 800; min-width: 84px; line-height: 1; }
.hk-trow__mid  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hk-trow__type { font-size: 18px; font-weight: 600; }
.hk-trow__why  { font-size: 16px; color: var(--c-brown); }

/* ── STICKY primary action (bottom of field screens) ─────────────────────── */
.hk-sticky {
  position: sticky; bottom: 0; z-index: 5;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--c-cream); box-shadow: 0 -6px 16px rgba(31,27,20,0.06);
}

/* ── CHECKLIST (room screen) ─────────────────────────────────────────────── */
.hk-check { background: #FFFFFF; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; }
.hk-check__item { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 16px; border-bottom: 1px solid var(--c-line); }
.hk-check__item:last-child { border-bottom: none; }
.hk-check__box { width: 34px; height: 34px; border-radius: 8px; border: 2.5px solid var(--c-gold); background: #FFFFFF; flex: none; display: flex; align-items: center; justify-content: center; }
.hk-check__box--done { background: var(--sem-success); border-color: var(--sem-success); }
.hk-check__label { font-size: 20px; font-weight: 600; }
.hk-check__item--done .hk-check__label { color: var(--c-brown); text-decoration: line-through; }

/* ── FIELD screen scaffolding ───────────────────────────────────────────── */
.hk-field { display: flex; flex-direction: column; gap: 14px; padding: 8px 16px 0; }
.hk-field__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.hk-field__title { font-size: 28px; font-weight: 800; }
.hk-field__sub { font-size: 16px; color: var(--c-brown); }
.hk-avatar { width: 48px; height: 48px; border-radius: 999px; background: var(--c-gold); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex: none; }
.hk-backbtn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 20px 0 14px; border-radius: 10px;
  background: #FFFFFF; border: 1.5px solid var(--c-line); color: var(--c-dark);
  font-family: var(--ui-font); font-size: 18px; font-weight: 700; text-decoration: none;
}
.hk-roomhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hk-roomhead__no { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.hk-roomhead__meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* ── unread-message badge (chat) ─────────────────────────────────────────── */
.hk-badge {
  position: absolute; top: 2px; right: 22px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--sem-danger); color: #FFFFFF;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}

/* ═══ DESK shell (supervisor / reception) — dark sidebar + content + right panel ═══ */
.desk-shell { display: flex; height: 100vh; background: var(--c-cream); }
.desk-nav { width: 224px; flex-shrink: 0; background: #1F1B14; display: flex; flex-direction: column; padding: 18px 12px; overflow-y: auto; }
.desk-nav__brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; border-bottom: 1px solid rgba(232,199,122,0.2); margin-bottom: 14px; }
.desk-nav__badge { width: 36px; height: 36px; border-radius: 8px; background: #E8C77A; color: #1F1B14; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex: none; }
.desk-nav__brandname { font-size: 14px; font-weight: 700; color: #F4EFE5; }
.desk-nav__brandsub { font-size: 12px; color: rgba(244,239,229,0.55); }
.desk-nav__list { display: flex; flex-direction: column; gap: 2px; }
.desk-nav__item { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 8px; border-left: 3px solid transparent; color: rgba(244,239,229,0.75); font-size: 15px; font-weight: 500; text-decoration: none; }
.desk-nav__item:hover { background: rgba(232,199,122,0.08); color: #F4EFE5; }
.desk-nav__item.is-active { background: rgba(232,199,122,0.16); border-left-color: #E8C77A; color: #E8C77A; font-weight: 700; }
.desk-nav__item svg { flex: none; }
.desk-nav__user { margin-top: auto; padding: 10px 12px; font-size: 13px; color: rgba(244,239,229,0.55); }
.desk-main { flex: 1; display: flex; min-width: 0; }
.desk-col { flex: 1; min-width: 0; padding: 22px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
/* .desk-col is a fixed-height scrolling flex column: its children must NOT flex-shrink, else a card
   (esp. one with overflow:hidden, whose min-height:auto is disabled → min-height:0) collapses and
   its content is clipped — this is what made the chessboard vanish on older Chrome. */
.desk-col > * { flex-shrink: 0; }
.desk-aside > * { flex-shrink: 0; }   /* same guard for the right panel (fixed-height flex column) */
.desk-aside { width: 264px; flex-shrink: 0; background: #EDE5D0; border-left: 1px solid var(--c-line); padding: 22px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.desk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.desk-head__title { font-size: 22px; font-weight: 800; }
.desk-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--c-brown); text-transform: uppercase; }
.desk-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.desk-legend { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.desk-legend__row { display: flex; align-items: center; gap: 8px; }
.desk-legend__sw { width: 16px; height: 16px; border-radius: 4px; flex: none; }
@media (max-width: 1100px) { .desk-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .desk-shell { flex-direction: column; height: auto; }
  .desk-nav { width: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 10px; }
  .desk-nav__brand, .desk-nav__user { display: none; }
  .desk-nav__list { flex-direction: row; }
  .desk-nav__item { white-space: nowrap; height: 44px; }
  .desk-main { flex-direction: column; }
  .desk-aside { width: auto; border-left: none; border-top: 1px solid var(--c-line); }
}

/* ── FIELD CARD — technician repair / planned work ──────────────────────────── */
.hk-fcard {
  background: #FFFFFF; border: 1px solid var(--c-line);
  border-left: 6px solid var(--hk-prio-4, var(--c-line)); border-radius: 10px; overflow: hidden;
}
.hk-fcard--urgent { border-left-color: var(--sem-danger); }
.hk-fcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.hk-fcard__room { font-size: 26px; font-weight: 800; line-height: 1; }
.hk-fcard__title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.hk-fcard__sub { font-size: 15px; color: var(--c-brown); margin-top: 4px; }
.hk-fcard__badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hk-fcard__note { padding: 0 16px 12px; font-size: 17px; color: var(--c-dark); line-height: 1.5; white-space: pre-line; }
.hk-fcard__meta { padding: 0 16px 12px; font-size: 14px; color: var(--c-brown); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hk-fcard__actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--c-line); }
.hk-fcard__actions .hk-btn { flex: 1 1 44%; min-width: 0; }

/* ── CHECKLIST — upsize the existing ui.css component to field accessibility ──
   Markup is shared with the OOB partial (room_checklist_footer.html); we only restyle
   the existing classes so that hx-swap contract stays intact. Scoped to .hk-body. */
.hk-body .checklist { border-radius: 10px; }
.hk-body .checklist-item { min-height: 64px; padding: 12px 16px; font-size: 20px; }
.hk-body .checklist-item.is-disabled { opacity: 1; }        /* checked ≠ greyed-out; see label rule */
.hk-body .checklist-item__label { font-size: 20px; font-weight: 600; color: var(--c-dark); }
.hk-body .checklist-item.is-disabled .checklist-item__label { color: var(--c-brown); text-decoration: line-through; }
.hk-body .check { width: 34px; height: 34px; border-radius: 8px; border: 2.5px solid var(--c-gold); background: #FFFFFF; }
.hk-body .check.is-checked { background: var(--sem-success); border-color: var(--sem-success); }
.hk-body .check.is-checked::after { content: "✓"; color: #FFFFFF; font-size: 22px; font-weight: 700; }
.hk-body .checklist-section { color: var(--c-brown); font-size: 14px; letter-spacing: 0.10em; }