:root {
  /* stone */
  --bg: #0a0a0c;
  --panel: #141417;
  --panel-2: #1b1b20;

  /* ink - warm, because a pure grey reads cold against gold */
  --ink: #efe9dd;
  --ink-soft: #a49c8e;
  --ink-faint: #6e685e;

  --line: #2a2a31;
  --line-soft: #202026;

  /* gold */
  --brand: #d9b45a;
  --brand-soft: rgba(217, 180, 90, .16);
  --gold-lit: #f2dda6;
  --gold-deep: #a4752c;
  --gold-dim: #8a6a2e;
  /* Text ON a gold surface. Never white: white on gold is 1.8:1. */
  --on-brand: #201704;

  /* states - muted, so they sit inside the palette instead of shouting */
  --accent: #6fbf8b;
  --warn: #e0b352;
  --warn-soft: rgba(224, 179, 82, .12);
  --err: #e1705f;
  --err-soft: rgba(225, 112, 95, .12);
  --ok: #6fbf8b;
  --ok-soft: rgba(111, 191, 139, .12);

  --radius: 8px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .45);
  --mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(120% 80% at 50% -10%, #17171c 0%, #0a0a0c 60%, #070709 100%);
  background-attachment: fixed;
  color: var(--ink);
}

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 208px;
  flex: 0 0 208px;
  background: linear-gradient(180deg, #131317 0%, #0d0d10 100%);
  color: var(--ink-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand .mark { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 7px; }
.brand .words { min-width: 0; }
/* The wordmark, the way the logo sets it: a serif in lit gold, spaced out.
   Allowed to take two lines. On one line, in a 208px sidebar, "Safirun
   Restaurant" was cut to "SAFIRUN R..." - the owner asked for the name to be
   on the screen, and an ellipsis is not the name. */
.brand b {
  display: block; color: var(--gold-lit); font-size: 13px; font-weight: 600;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 2px; text-transform: uppercase; line-height: 1.25;
  overflow-wrap: anywhere;
}
.brand span { font-size: 9.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 2px; }

.nav { padding: 10px 8px; flex: 1; overflow-y: auto; }
.nav button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 2px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nav button:hover { background: rgba(217, 180, 90, .09); color: var(--gold-lit); }
.nav button.active {
  background: linear-gradient(180deg, var(--gold-lit) 0%, var(--brand) 55%, var(--gold-deep) 100%);
  color: var(--on-brand); font-weight: 600;
}
.nav .ico { width: 16px; text-align: center; opacity: .9; }
.nav .badge {
  margin-left: auto;
  background: rgba(225, 112, 95, .16);
  border: 1px solid rgba(225, 112, 95, .38);
  color: #f0a99d;
  border-radius: 9px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
}
.sidebar footer { padding: 10px 14px; font-size: 11px; color: var(--ink-faint); border-top: 1px solid var(--line); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 { font-size: 17px; margin: 0; font-weight: 650; }
.topbar .sub { color: var(--ink-faint); font-size: 12px; }
.spacer { flex: 1; }
.content { padding: 18px 20px 40px; }

/* ---------- panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.panel > header {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-2);
}
.panel > header h2 { margin: 0; font-size: 13.5px; font-weight: 650; }
.panel > header .hint { font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.panel .body { padding: 14px; }
.panel .body.tight { padding: 0; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; margin-bottom: 16px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  box-shadow: var(--shadow);
}
.card .label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); font-weight: 600; }
.card .value { font-size: 22px; font-weight: 650; margin: 5px 0 2px; letter-spacing: -.3px; }
.card .value.sm { font-size: 17px; }
.card .foot { font-size: 12px; color: var(--ink-soft); }
.card.err { border-left: 3px solid var(--err); }
.card.warn { border-left: 3px solid var(--warn); }
.card.ok { border-left: 3px solid var(--ok); }
.card.brand { border-left: 3px solid var(--brand); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line-soft); }
th {
  background: var(--panel-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-soft);
  font-weight: 650;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
tbody tr:hover { background: rgba(217, 180, 90, .05); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); font-size: 12px; }
tfoot td { font-weight: 650; background: var(--panel-2); border-top: 2px solid var(--line); }
.table-wrap { overflow: auto; max-height: 70vh; }
.empty { padding: 30px; text-align: center; color: var(--ink-faint); }

/* ---------- controls ---------- */
button, .btn {
  font: inherit;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--panel-2); border-color: var(--gold-dim); color: var(--gold-lit); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary {
  background: linear-gradient(180deg, var(--gold-lit) 0%, var(--brand) 55%, var(--gold-deep) 100%);
  border-color: transparent; color: var(--on-brand); font-weight: 600;
}
button.primary:hover:not(:disabled) { filter: brightness(1.06); color: var(--on-brand); }
button.ok { background: var(--ok); border-color: var(--ok); color: #0c2517; font-weight: 600; }
button.ok:hover:not(:disabled) { color: #0c2517; filter: brightness(1.06); }
/* Destructive stays red and stays DARKER than the gold, so the eye never
   mistakes one for the other on a black ground. */
button.danger {
  background: linear-gradient(180deg, #cf5f4e 0%, #a83c2c 100%);
  border-color: #6d2419; color: #fff;
}
button.danger:hover:not(:disabled) { color: #fff; filter: brightness(1.06); }
button.ghost { background: none; border-color: transparent; color: var(--brand); }
button.sm { padding: 3px 8px; font-size: 12px; }

input, select, textarea {
  font: inherit;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #101013;
  color: var(--ink);
  max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--gold-dim); }
select option { background: #141417; color: var(--ink); }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input.time { width: 78px; }
input.compact { padding: 3px 6px; font-size: 12px; }
label.field { display: block; margin-bottom: 10px; }
label.field span { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 3px; font-weight: 600; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 0 0 auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---------- pills ---------- */
.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .2px;
  white-space: nowrap;
}
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.err { background: var(--err-soft); color: var(--err); }
.pill.info { background: var(--brand-soft); color: var(--brand); }
.pill.muted { background: #22222a; color: var(--ink-soft); }

/* ---------- attendance grid ---------- */
.att-grid { font-size: 12.5px; }
.att-grid th.day { text-align: center; width: 70px; font-size: 10.5px; }
.att-grid th.day.weekend { background: #1f1f26; }
.att-grid td.day { padding: 2px; text-align: center; }
.att-grid .name-col { position: sticky; left: 0; background: var(--panel); z-index: 3; min-width: 165px; box-shadow: 1px 0 0 var(--line); }
.att-grid th.name-col { z-index: 4; }
.cell {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 2px;
  cursor: pointer;
  min-height: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.cell:hover { border-color: var(--brand); background: var(--brand-soft); }
.cell .hrs { font-weight: 650; font-variant-numeric: tabular-nums; }
.cell .tm { font-size: 10px; color: var(--ink-faint); }
.cell.worked { background: var(--ok-soft); }
.cell.worked .hrs { color: var(--ok); }
.cell.absent { background: var(--err-soft); }
.cell.absent .hrs { color: var(--err); }
.cell.day_off, .cell.vacation { background: #22222a; color: var(--ink-faint); }
.cell.sick { background: var(--warn-soft); color: var(--warn); }
.cell.none { color: #3a3a44; }
/* Read-only: drawn the same, but not an invitation to click. */
.cell.locked { cursor: default; }
.cell.locked:hover { filter: none; box-shadow: none; }
.notice-line {
  margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
  background: rgba(217, 180, 90, .07); border: 1px solid rgba(217, 180, 90, .24);
  color: #e8dcbe; font-size: 13px;
}
.notice-line a { color: var(--gold-lit); }

/* ---------- the editable sheets (13.09) ---------- */
.cell.half { background: var(--warn-soft); }
.cell.half .hrs { color: var(--warn); }
.cell.conflict { background: var(--err-soft); outline: 1px solid var(--err); }
.cell.busy { opacity: .45; pointer-events: none; }
.pay-sheet td.num, .pay-sheet th.num { white-space: nowrap; }
.pay-sheet td.imzo { min-width: 104px; text-align: center; }
.pay-sheet tr.idle td { opacity: .55; }
.sign-sheet .sign-row td { background: var(--panel-2); }
a.link { color: var(--gold); cursor: pointer; text-decoration: underline dotted; }
a.link:hover { color: var(--gold-lit); }
button.warn-btn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.tabs-row { justify-content: space-between; margin-bottom: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; border-right: 1px solid var(--line); background: var(--panel); }
.seg button:last-child { border-right: 0; }
.seg button.active { background: linear-gradient(180deg, var(--gold-lit), var(--brand)); color: var(--on-brand); font-weight: 600; }

/* ---------- modal ---------- */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(16, 32, 54, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  background: var(--panel);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(16, 32, 54, .3);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal.wide { max-width: 900px; }
.modal header { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal header h3 { margin: 0; font-size: 15px; }
.modal .body { padding: 16px; overflow-y: auto; }
.modal footer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; background: var(--panel-2); }

/* ---------- misc ---------- */
.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #1b1b20;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  max-width: 400px;
  font-size: 13px;
  animation: slide .18s ease-out;
}
.toast.err { background: var(--err); }
.toast.ok { background: var(--ok); }
@keyframes slide { from { transform: translateY(8px); opacity: 0; } }

.issue { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 10px; align-items: flex-start; }
.issue:last-child { border-bottom: 0; }
.issue .txt { flex: 1; min-width: 0; }
.issue .ttl { font-weight: 600; }
.issue .det { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.issue .sug { font-size: 12.5px; color: var(--accent); margin-top: 3px; }

.breakdown { font-size: 12.5px; line-height: 1.8; }
.breakdown div { padding: 2px 0; border-bottom: 1px dashed var(--line-soft); }
.breakdown div:last-child { font-weight: 700; border-bottom: 0; padding-top: 6px; }
.warnline { color: var(--err); }

.bar { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); }
.muted { color: var(--ink-faint); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hidden { display: none !important; }
.drop {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--panel-2);
  cursor: pointer;
}
.drop.over { border-color: var(--brand); background: var(--brand-soft); }

@media (max-width: 900px) {
  .sidebar { width: 60px; flex-basis: 60px; }
  .nav button span.lbl, .brand span, .sidebar footer { display: none; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
}

/* ---------- language switcher ---------- */
.langbar {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.langbar button {
  flex: 1;
  padding: 4px 0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid transparent;
  color: var(--ink-soft);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}
.langbar button:hover { background: rgba(217, 180, 90, .12); color: var(--gold-lit); }
.langbar button.active { background: var(--brand); color: var(--on-brand); }

/* short shift: recorded, but under the minimum to count as a worked day */
.cell.short {
  background: repeating-linear-gradient(
    -45deg, var(--warn-soft), var(--warn-soft) 5px, #141417 5px, #141417 10px);
  border-color: var(--warn);
}
.cell.short .hrs { color: var(--warn); text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   Zakaz va Bozor (owner, 16.09.2026)

   The buyer's copy of an order is marked `read-only` and carries no control at
   all - not a disabled one. A greyed-out input still says "this is yours to
   fill in", and the owner's rule is that it is not.
--------------------------------------------------------------------------- */
.whoami {
  padding: 10px 14px; margin: 0 10px 6px; border-radius: 10px;
  background: var(--panel-2); color: var(--ink-soft);
  font-size: 13px; line-height: 1.35;
}
.panel.read-only { border-left: 3px solid var(--line); }
.panel.read-only table { opacity: .92; }

.sub-block { padding: 0 14px 12px; }
.sub-block h4 {
  margin: 4px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft);
}
table.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mini td { padding: 4px 8px; border-top: 1px solid var(--line); }
table.mini td.num { text-align: right; font-variant-numeric: tabular-nums; }

button.icon {
  padding: 2px 8px; min-width: 0; font-size: 14px; line-height: 1.4;
  background: transparent; border: 1px solid var(--line);
}
button.icon:hover { background: var(--panel-2); }

/* The order and spending tables. `table-layout: fixed` with a colgroup, so the
   PRODUCT NAME takes the slack - the default spread gave a third of the width
   to the row number and left names floating in the middle of empty cells. */
table.zak-grid { table-layout: fixed; width: 100%; border-collapse: collapse; }
table.zak-grid col.c-no    { width: 46px; }
table.zak-grid col.c-qty   { width: 110px; }
table.zak-grid col.c-money { width: 130px; }
table.zak-grid col.c-note  { width: 24%; }
table.zak-grid col.c-who   { width: 140px; }
table.zak-grid col.c-pay   { width: 96px; }
table.zak-grid col.c-act   { width: 92px; }
table.zak-grid th {
  padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
table.zak-grid td {
  padding: 9px 12px; border-top: 1px solid var(--line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.zak-grid th.num, table.zak-grid td.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
table.zak-grid td.num:last-child { white-space: nowrap; }

/* Botlar nazorati va Face ID (egasi, 16.09.2026) */
.bot-list { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 12px; }
.bot {
  display: grid; grid-template-columns: 44px 1fr auto auto; gap: 14px;
  align-items: center; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
}
.bot.on { border-color: rgba(111,191,139,.45); }
.bot .ico { font-size: 26px; text-align: center; }
.bot .who b { display: block; font-size: 15px; }
.bot .who small { display: block; font-size: 12px; color: var(--ink-soft); }
.bot .state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@media (max-width: 860px) {
  .bot { grid-template-columns: 36px 1fr; }
  .bot .state, .bot .row { grid-column: 1 / -1; }
}

.address-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
code.address {
  font-size: 15px; padding: 7px 12px; border-radius: 8px;
  background: #0b0b0e; border: 1px solid var(--line); color: var(--gold, #e9c46a);
  user-select: all;
}
code.address.small { font-size: 12px; color: var(--ink-soft); }
.code-big {
  font: 700 30px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .18em;
  text-align: center; padding: 16px; margin: 10px 0;
  background: #0b0b0e; border: 1px solid var(--line); border-radius: 12px;
  user-select: all;
}

/* Jadval - the spreadsheet window (egasi, 16.09.2026).
   A frozen header and a fixed row height, because scrolling a long table is
   the whole point and a header that scrolls away makes the columns guesswork. */
.sheet-wrap { max-height: 68vh; overflow: auto; }
table.sheet { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.sheet th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2); color: var(--ink-soft);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  text-align: left; padding: 9px 10px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.sheet th:hover { color: var(--ink); }
table.sheet th.sorted { color: var(--gold, #e9c46a); }
table.sheet th.num, table.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet td {
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.sheet td.nowrap { white-space: nowrap; }
table.sheet tr.odd td { background: rgba(255,255,255,.015); }
table.sheet tbody tr:hover td { background: rgba(233,196,106,.06); }
table.sheet tfoot td {
  position: sticky; bottom: 0; background: var(--panel-2);
  border-top: 2px solid var(--line); padding: 9px 10px;
}
input.filter {
  min-width: 220px; padding: 7px 11px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
}
.tabs-row .on { background: var(--gold, #e9c46a); color: #16181d; font-weight: 600; }

/* The update offer. Bottom-centre, above everything, impossible to miss and
   impossible to be in the way of a button. */
.update-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 9999; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--gold, #e9c46a);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.update-bar span { font-size: 14px; }

/* ---------------------------------------------------------------------------
   Vakolatlar jadvali - the permissions matrix.

   Wide by nature: eighteen grantable powers plus twelve that cannot be
   granted. It scrolls sideways inside its panel with the name column pinned,
   because a tick with no name beside it says nothing at all.
   --------------------------------------------------------------------------- */
.matrix-scroll { overflow-x: auto; }

table.matrix { border-collapse: separate; border-spacing: 0; font-size: 13px; }

table.matrix th.who {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
  text-align: left;
  min-width: 190px;
  padding: 6px 12px 6px 4px;
  border-right: 1px solid var(--line);
  font-weight: 400;
}

table.matrix th.who b { display: block; }
table.matrix th.who small { color: var(--muted); }

/* The column heads are permission keys - too long to stand side by side, so
   they lie on their side. Reading them is a glance, not a task. */
table.matrix th.rot {
  height: 132px;
  vertical-align: bottom;
  padding: 0 0 8px;
  width: 26px;
  min-width: 26px;
}

table.matrix th.rot span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 400 12px/1 var(--mono, ui-monospace, monospace);
  color: var(--muted);
  white-space: nowrap;
}

table.matrix th.rot.locked span { color: var(--gold-dim); }

table.matrix td {
  width: 26px;
  min-width: 26px;
  height: 30px;
  text-align: center;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  user-select: none;
  transition: background 90ms;
}

table.matrix td.on     { background: rgba(111, 191, 139, .18); color: var(--ok); }
table.matrix td.off    { background: transparent; }
table.matrix td.on:hover  { background: rgba(225, 112, 95, .18); }
table.matrix td.off:hover { background: rgba(111, 191, 139, .12); }

/* Not a disabled ON: a power nobody can be given, or a row that holds
   everything by being the owner. Neither is waiting for a press. */
table.matrix td.fixed {
  cursor: default;
  color: var(--faint);
  background: repeating-linear-gradient(
    45deg, transparent, transparent 3px, var(--line-soft) 3px, var(--line-soft) 4px);
}

table.matrix td.busy { opacity: .45; cursor: progress; }

table.matrix tbody tr:hover th.who { color: var(--gold); }

input.find {
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  min-width: 190px;
}

/* ---------------------------------------------------------------------------
   "Siz tizimga kirmagansiz" chizig'i.

   Bu sahifa restoran ichidagi tarmoqda kirmagan odamga ham ochiq - ataylab.
   Oqibati shuki, ekran KIRGANDEK ko'rinadi: hamma raqam joyida, hamma bo'lim
   ochiq. Eski ko'rinishda kirish uchun yagona joy chap pastdagi 11px kulrang
   yozuv edi, va odam uni topa olmasdi.
   --------------------------------------------------------------------------- */
.signedout-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: var(--raised, #1b1b20);
  border-bottom: 1px solid var(--gold-dim, #8a6a2e);
  color: var(--ink, #efe9dd);
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.signedout-bar span { flex: 1 1 auto; }

/* Chap pastdagi kirish tugmasi - endi havola emas, tugma. */
.whoami .act.wide {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 12px;
  font-size: 14px;
}