/* LHK — design tokens and components ported from _source/lhk (Model 1, Clinical) */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--ink);
  --bg: #f2f6fa; --authbg: #f2f7fc;
  --glow1: rgba(41,195,242,.18); --glow2: rgba(18,116,214,.14);
  --card: #ffffff; --side: #ffffff;
  --line: #e3ecf4; --line2: #edf2f7;
  --ink: #10263c; --cell: #28405a; --sub: #5b7085; --label: #33475c; --muted: #7a92a8;
  --field: #fbfdff; --fline: #d7e3ee;
  --accent: #1274d6; --focus: rgba(18,116,214,.15);
  --btng: linear-gradient(135deg, #1e8fe0, #1274d6);
  --btnsh: 0 12px 26px -12px rgba(18,116,214,.55);
  --cardsh: 0 24px 60px -30px rgba(13,60,110,.28);
  --thead: #f7fafd; --rowhov: #f7fbfe;
  --chip: #e4edf5; --chipon: #ffffff; --chipfg: #0d3b66;
  --navabg: #e8f3fe; --navafg: #0d5bb5; --navfg: #41586e;
  --iconbg: #eef4fa; --iconfg: #33475c; --btn2bg: #f8fbfe;
  --tag-good-bg: #e6f7ee; --tag-good-fg: #157a46;
  --tag-info-bg: #e7f2fd; --tag-info-fg: #115fb0;
  --tag-warn-bg: #fdf3e0; --tag-warn-fg: #8f6410;
  --tag-bad-bg: #fdeaea; --tag-bad-fg: #b23c38;
  --tag-muted-bg: #eef2f6; --tag-muted-fg: #5b6b7a;
}
body.dark {
  --bg: #07131f; --authbg: #07131f;
  --glow1: rgba(46,196,242,.2); --glow2: rgba(18,116,214,.24);
  --card: #0d1f31; --side: #0a1826;
  --line: rgba(118,180,235,.16); --line2: rgba(118,180,235,.1);
  --ink: #f2f9ff; --cell: #cfe2f2; --sub: #8ba3b8; --label: #a9c1d6; --muted: #7f97ab;
  --field: #0a1a2a; --fline: rgba(118,180,235,.22);
  --accent: #4fc9f5; --focus: rgba(53,200,245,.18);
  --btng: linear-gradient(135deg, #2ec4f2, #1274d6);
  --btnsh: 0 0 30px rgba(46,196,242,.35);
  --cardsh: 0 30px 80px -30px rgba(0,10,25,.9);
  --thead: #0a1a2a; --rowhov: rgba(46,196,242,.05);
  --chip: rgba(255,255,255,.07); --chipon: #1b3a55; --chipfg: #8fdcff;
  --navabg: rgba(46,196,242,.14); --navafg: #8fdcff; --navfg: #8ba3b8;
  --iconbg: #102436; --iconfg: #a9c1d6; --btn2bg: #0a1a2a;
  --tag-good-bg: rgba(52,199,123,.16); --tag-good-fg: #5fe0a6;
  --tag-info-bg: rgba(53,163,247,.18); --tag-info-fg: #6fc4ff;
  --tag-warn-bg: rgba(240,177,64,.16); --tag-warn-fg: #f2c063;
  --tag-bad-bg: rgba(240,82,82,.18); --tag-bad-fg: #ff8f8f;
  --tag-muted-bg: rgba(148,170,190,.14); --tag-muted-fg: #9db4c8;
}

input, button { font-family: inherit; }
[hidden] { display: none !important; }
::placeholder { color: var(--muted); opacity: 1; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Auth screens ---------- */
.auth-page {
  min-height: 100vh;
  background: var(--authbg);
  background-image:
    radial-gradient(620px 420px at 88% -8%, var(--glow1), transparent 70%),
    radial-gradient(720px 520px at -12% 112%, var(--glow2), transparent 70%);
  display: flex; align-items: center; justify-content: center;
  padding: 64px 16px; position: relative;
}
.auth-topbar { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; gap: 8px; }
.auth-wrap { width: min(100%, 430px); display: flex; flex-direction: column; gap: 18px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.auth-brand img { height: 40px; }
.auth-brand .auth-logo { height: 56px; }
body.dark .auth-logo { filter: brightness(0) invert(1); }
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: .1em; color: var(--ink); }
.brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .3em; color: var(--sub); }
.auth-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--cardsh); padding: 32px 30px;
}
.auth-card h1 { margin: 0; font-size: 24px; font-weight: 800; color: var(--ink); }
.auth-card .sub { margin: 6px 0 22px; font-size: 14px; color: var(--sub); }
.auth-hint { text-align: center; font-size: 12.5px; color: var(--muted); }
.auth-msg { border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin: 0 0 16px; }
.auth-msg.err { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.auth-msg.ok { background: var(--tag-good-bg); color: var(--tag-good-fg); }
.auth-alt { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--sub); }
.auth-alt a { font-weight: 800; }

.fld { margin-bottom: 16px; }
.fld label { display: block; font-size: 13px; font-weight: 700; color: var(--label); margin-bottom: 6px; }
.fld input[type=email], .fld input[type=password], .fld input[type=text] {
  width: 100%; height: 48px; border: 1px solid var(--fline); border-radius: 12px;
  padding: 0 14px; font-size: 15px; color: var(--ink); background: var(--field); outline: none;
}
.fld input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.fld .pw-wrap { position: relative; }
.fld .pw-wrap input { padding-right: 84px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--accent);
  font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 8px;
}
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.auth-row .remember { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--label); cursor: pointer; }
.auth-row .remember input { width: 16px; height: 16px; accent-color: #1274d6; }
.auth-row a { font-size: 13.5px; font-weight: 700; }

.btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--btng); color: #fff; font-size: 15px; font-weight: 800; box-shadow: var(--btnsh);
}
.btn-primary:hover { text-decoration: none; filter: brightness(1.07); }
.btn-primary:active { transform: translateY(1px); }

/* Language dropdown */
.lang-dd { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 5px; height: 34px; border: 0; cursor: pointer;
  border-radius: 999px; padding: 0 14px; background: var(--chip); color: var(--chipfg);
  font-size: 12px; font-weight: 800; letter-spacing: .03em;
}
.lang-btn:hover { filter: brightness(.95); }
.lang-btn .caret { font-size: 9px; color: var(--sub); }
.lang-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 80;
  flex-direction: column; gap: 2px; min-width: 88px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--cardsh);
}
.lang-dd.open .lang-menu { display: flex; }
.lang-menu a { border-radius: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 800; color: var(--sub); }
.lang-menu a:hover { background: var(--rowhov); text-decoration: none; }
.lang-menu a.on { background: var(--navabg); color: var(--navafg); }
.theme-toggle {
  width: 34px; height: 34px; border: 0; border-radius: 999px;
  background: var(--chip); color: var(--sub); font-size: 15px; cursor: pointer;
}
.theme-toggle:hover { filter: brightness(.95); }

/* 2FA code boxes */
.code-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.code-row input {
  width: 48px; height: 56px; text-align: center; font-size: 22px; font-weight: 800;
  border: 1px solid var(--fline); border-radius: 12px; color: var(--ink); background: var(--field); outline: none;
}
.code-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }

/* ---------- Dashboard ---------- */
.dash { display: flex; min-height: 100vh; background: var(--bg); }
.dash aside {
  width: 250px; flex: 0 0 auto; background: var(--side); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; padding: 18px 12px;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
/* Menu scrolls on its own; brand, user card and logout stay fixed */
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
.side-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 4px 6px 18px; }
.side-brand .logo-full { width: 168px; max-width: 100%; }
.side-brand .logo-mini { height: 34px; display: none; }
.brand-clinic {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  background: var(--navabg); color: var(--navafg);
}
.nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; color: var(--navfg);
  font-size: 14px; font-weight: 700; text-align: left; width: 100%; text-decoration: none;
}
.nav-item:hover { filter: brightness(.97); text-decoration: none; }
.nav-item.on { background: var(--navabg); color: var(--navafg); }
.nav-item .ic {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--iconbg); color: var(--iconfg);
}
.nav-item.on .ic { background: var(--btng); color: #fff; }
.nav-item .ic svg, .nav-item .ic img { width: 17px; height: 17px; display: block; object-fit: contain; }
.nav-item .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .badge { background: #e94f5e; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 7px; }
/* The sub-items slide open and shut. The panel animates between 0 and its own
   height in pixels -- lhkSlideNavGroup pins the measured value and clears it
   again afterwards, so the resting state stays `auto` and follows its content.
   The 2px above the panel is a margin on the first sub-item rather than a gap on
   .nav-group, so it is clipped away with everything else while the group is shut.
   visibility keeps the closed links out of the tab order the way display:none
   did: it turns on the moment the group opens, and off only once the panel has
   finished sliding shut. */
.nav-group { display: flex; flex-direction: column; }
.nav-group .chev { font-size: 16px; font-weight: 800; color: var(--muted); transition: transform .2s ease; }
.nav-group.open > .nav-item .chev { transform: rotate(90deg); }
.nav-group-items {
  display: flex; flex-direction: column; gap: 2px; padding-left: 18px;
  height: 0; overflow: hidden; visibility: hidden;
  transition: height .2s ease, visibility 0s .2s;
}
.nav-group.open .nav-group-items {
  height: auto; visibility: visible;
  transition: height .2s ease, visibility 0s;
}
.nav-group-items > .nav-item:first-child { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .nav-group-items, .nav-group .chev { transition: none; }
}
.nav-group-items .nav-item { min-height: 38px; font-size: 13.5px; }
.nav-group-items .ic { width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
.nav-group-items .ic svg, .nav-group-items .ic img { width: 14px; height: 14px; }
.side-spacer { flex: 1; }
.side-user {
  position: relative; border-top: 1px solid var(--line2); padding-top: 14px;
  display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 0 0 auto;
}
.side-user:hover .nm { color: var(--accent); }
.user-menu {
  display: none; position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; z-index: 60;
  flex-direction: column; gap: 2px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--cardsh);
}
.side-user.open .user-menu { display: flex; }
.user-menu a { border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--label); }
.user-menu a:hover { background: var(--navabg); color: var(--navafg); text-decoration: none; }
.avatar {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 999px;
  background: linear-gradient(135deg, #29c3f2, #1274d6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.side-user .nm { font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .rl { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user > div:last-child { flex: 1; min-width: 0; }
.btn-logout {
  margin-top: 10px; min-height: 44px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--btn2bg); color: var(--navfg); font-size: 13.5px; font-weight: 700; padding: 8px;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn-logout svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-logout:hover { text-decoration: none; filter: brightness(.97); }

.dash main { flex: 1; min-width: 0; padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; }
.dash-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-head .titles { flex: 1; min-width: 180px; }
.dash-head h1 { margin: 0; font-size: 24px; font-weight: 800; color: var(--ink); }
.dash-head .date { font-size: 13px; color: var(--sub); margin-top: 3px; }
.dash-head input[type=search] {
  height: 44px; width: min(280px, 28vw); border: 1px solid var(--fline); border-radius: 12px;
  padding: 0 14px; font-size: 14px; color: var(--ink); background: var(--field); outline: none;
}
.dash-head input[type=search]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.dash-head .theme-toggle { width: 42px; height: 42px; font-size: 16px; }
.dash-head .lang-btn { height: 42px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.stat-card .lbl { font-size: 13px; color: var(--sub); font-weight: 700; }
.stat-card .row { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.stat-card .val { font-size: 28px; font-weight: 800; color: var(--ink); }
.stat-card .delta { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 8px; }
.stat-card .delta.up { color: var(--tag-good-fg); background: var(--tag-good-bg); }
.stat-card .delta.down { color: var(--tag-bad-fg); background: var(--tag-bad-bg); }
a.stat-card { text-decoration: none; transition: border-color .15s; }
a.stat-card:hover { text-decoration: none; border-color: var(--accent); }
a.stat-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.stat-card .val-good { color: var(--tag-good-fg); }
.stat-card .val-bad { color: var(--tag-bad-fg); }
.stat-card .val-warn { color: var(--tag-warn-fg); }
.stat-card .val-info { color: var(--tag-info-fg); }

.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.chart-card .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.chart-card .ttl { font-size: 15px; font-weight: 800; color: var(--ink); }
.chart-card .sum { font-size: 13.5px; font-weight: 800; color: var(--accent); }
.bars { display: flex; align-items: flex-end; gap: 14px; height: 120px; }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bars .bar { width: 100%; max-width: 46px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #29c3f2, #1274d6); }
.bars .lbl { font-size: 12px; color: var(--sub); font-weight: 700; }

.table-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.table-card .head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line2); flex-wrap: wrap; }
.table-card .ttl { flex: 1; font-size: 15px; font-weight: 800; color: var(--ink); min-width: 140px; }
.btn-add {
  height: 40px; border: 0; border-radius: 10px; background: var(--btng); color: #fff;
  font-size: 13.5px; font-weight: 800; cursor: pointer; padding: 0 16px; box-shadow: var(--btnsh);
}
.btn-add:hover { filter: brightness(1.07); }
.table-scroll { overflow-x: auto; }
.table-scroll > div { min-width: 640px; }
.trow, .thead { display: grid; gap: 12px; padding: 14px 20px; align-items: center; }

/* ---------- Any table as cards on a phone (.tc-cards) ----------
   A wide table is unreadable on a phone, whichever way it breaks: columns
   squeezed to nothing, or a row that has to be dragged sideways to be read.
   The Töökeskkond logs solve that with the .lg-* system, where every cell
   carries its own label; lhkCardify() (app.js) gives the plain .thead/.trow
   tables the same treatment without each page being rewritten — it copies the
   column headings onto the cells as data-l, names the title and button cells,
   and marks the table .tc-cards for the rules below.

   The page's own min-width moves to --tc-minw, because an inline style on the
   wrapper would outrank any stylesheet rule trying to drop it.

   Deliberately placed before the page-specific blocks: a page that has already
   solved its own phone layout should win over these defaults. */
.table-scroll > div.tc-cards { min-width: var(--tc-minw, 640px); }
.tc-sort { display: none; }

@media (max-width: 900px) {
  .table-scroll > div.tc-cards { min-width: 0; }
  .tc-cards .thead { display: none; }
  .tc-cards .trow {
    display: flex; flex-wrap: wrap; gap: 9px 12px; align-items: flex-start;
    border: 1px solid var(--line); border-radius: 14px;
    margin: 10px 12px; padding: 12px 14px; background: var(--card);
  }
  .tc-cards .trow:hover { background: var(--card); }
  /* every cell is a labelled field, free to wrap now that it has a card to itself */
  .tc-cards .trow > * {
    flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
    gap: 3px; font-size: 13.5px; white-space: normal; overflow: visible; text-overflow: clip;
    /* an address or a long code has nothing to wrap on and would otherwise run
       straight over the value beside it */
    overflow-wrap: anywhere;
  }
  .tc-cards .trow > [data-l]:not([data-l=""])::before {
    content: attr(data-l); font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
  }
  /* the first named column is what the row is about, so it heads the card */
  .tc-cards .trow > .tc-t { flex: 1 1 100%; font-size: 15.5px; font-weight: 800; color: var(--ink); }
  /* with a face or initials in front of it, the name shares that first line */
  .tc-cards .trow > .tc-av { flex: 0 0 auto; }
  .tc-cards .trow > .tc-av + .tc-t { flex: 1 1 60%; align-self: center; }
  .tc-cards .trow > .tc-act { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .tc-cards .trow > .tc-act .btn-sm { flex: 1 1 auto; height: 40px; justify-content: center; }
  /* a row that is really an edit form: one field per line, full width */
  .tc-cards .trow > .tc-fld { flex: 1 1 100%; }
  .tc-cards .trow > .tc-fld > input, .tc-cards .trow > .tc-fld > select,
  .tc-cards .trow > .tc-fld > textarea, .tc-cards .trow > .tc-fld > .select2 { width: 100%; }
  /* a cell that is the field itself (a row that is a form: Kliinikud) */
  .tc-cards .trow > input.tc-fld, .tc-cards .trow > select.tc-fld,
  .tc-cards .trow > textarea.tc-fld { width: 100%; display: block; }
  .tc-cards .trow > .tc-hide { display: none; }   /* an em dash on a card is noise */
  .tc-cards .trow > .cell-muted { flex: 1 1 100%; }

  /* The same card, for a real <table> (.rel-table: an employee's documents,
     the card's related tabs). The row cannot be a grid here, so the table, its
     body and its cells are all made block/flex and the heading is carried on
     each cell as data-l, exactly as above. */
  .tc-table { display: block; width: 100%; }
  .tc-table thead { display: none; }
  .tc-table tbody { display: block; }
  .tc-table tr {
    display: flex; flex-wrap: wrap; gap: 9px 12px; align-items: flex-start;
    border: 1px solid var(--line); border-radius: 14px;
    margin: 10px 0; padding: 12px 14px; background: var(--card);
  }
  .tc-table td {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    flex: 1 1 40%; min-width: 0; border: 0; padding: 0;
    font-size: 13.5px; overflow-wrap: anywhere;
  }
  .tc-table td[data-l]:not([data-l=""])::before {
    content: attr(data-l); font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
  }
  .tc-table td.tc-t { flex: 1 1 100%; font-size: 14.5px; font-weight: 800; color: var(--ink); }
  .tc-table td.tc-act { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .tc-table td.tc-act .btn-sm { flex: 1 1 auto; height: 40px; justify-content: center; }
  .tc-table td.tc-fld { flex: 1 1 100%; }
  .tc-table td.tc-fld select, .tc-table td.tc-fld .select2 { width: 100%; }
  .tc-table td.tc-hide { display: none; }
  /* sorting lives in the hidden header, so it comes back as a strip of chips */
  .tc-sort { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px 2px; scrollbar-width: none; }
  .tc-sort::-webkit-scrollbar { display: none; }
  .tc-sort a {
    flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--field); color: var(--sub); font-size: 12.5px; font-weight: 800;
    text-decoration: none; white-space: nowrap;
  }
  .tc-sort a.on { background: var(--btng); border-color: transparent; color: #fff; }
}
.thead {
  padding: 11px 20px; background: var(--thead);
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.thead a.th-sort { color: inherit; text-decoration: none; }
.thead a.th-sort:hover, .thead a.th-sort.on { color: var(--accent); }
.trow { border-top: 1px solid var(--line2); font-size: 14px; color: var(--cell); }
.trow:hover { background: var(--rowhov); }
.trow > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tag { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; }
.tag.good { background: var(--tag-good-bg); color: var(--tag-good-fg); }
.tag.info { background: var(--tag-info-bg); color: var(--tag-info-fg); }
.tag.warn { background: var(--tag-warn-bg); color: var(--tag-warn-fg); }
.tag.bad { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.tag.muted { background: var(--tag-muted-bg); color: var(--tag-muted-fg); }

/* ---------- Menu manager ---------- */
.mgr-row.dim > div:not(.act):not(.ord) { opacity: .45; }
.mgr-row .ord { display: flex; gap: 4px; align-items: center; }
.drag-handle {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--muted); font-size: 15px; cursor: grab; user-select: none;
}
.drag-handle:hover { background: var(--iconbg); color: var(--iconfg); }
.mgr-group.dragging, .mgr-row.dragging { opacity: .45; }
.mgr-row { transition: background .3s; }
.mgr-row.saved { background: var(--tag-good-bg); }
.mgr-group.dragging { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 10px; }
.mgr-subs .mgr-row .item-cell { padding-left: 26px; }
.mgr-row .item-cell { display: flex; align-items: center; gap: 8px; overflow: visible; }
.mgr-row .flags { display: flex; flex-wrap: nowrap; gap: 10px; }
.mgr-row .exc-cell { grid-column: 5 / -1; }
.mgr-row .flags label {
  display: flex; align-items: center; gap: 3px; cursor: pointer;
  font-size: 10.5px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .02em;
}
.mgr-row .flags input[type=checkbox] { width: 14px; height: 14px; accent-color: #1274d6; }
.mgr-row input[type=number] {
  width: 100%; height: 36px; border: 1px solid var(--fline); border-radius: 9px;
  padding: 0 8px; font-size: 13px; color: var(--ink); background: var(--field); outline: none;
}
.mgr-row input[type=text], .mgr-row select, .mgr-add select {
  width: 100%; height: 36px; border: 1px solid var(--fline); border-radius: 9px;
  padding: 0 10px; font-size: 13px; color: var(--ink); background: var(--field); outline: none;
}
.mgr-row input[type=text]:focus, .mgr-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.mgr-row input[type=checkbox] { width: 17px; height: 17px; accent-color: #1274d6; }
.mgr-ic {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--iconbg); color: var(--iconfg);
}
.mgr-ic svg, .mgr-ic img { width: 16px; height: 16px; object-fit: contain; }
.arrow-btn {
  width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--btn2bg); color: var(--sub); cursor: pointer; font-size: 12px;
}
.arrow-btn:hover { filter: brightness(.96); }
.mgr-row .act { display: flex; gap: 6px; }
.btn-sm {
  height: 34px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--btng); color: #fff; font-size: 12.5px; font-weight: 800;
  /* inline-flex so <a> buttons get the same height/centering as <button> */
  display: inline-flex; align-items: center; justify-content: center;
}
a.btn-sm, a.btn-sm:hover { text-decoration: none; }
.btn-sm:hover { filter: brightness(1.07); }
.btn-danger { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.btn-danger:hover { filter: brightness(.97); }
.mgr-add { background: var(--thead); }

/* Log page: filter bar + pager */
.log-filter { flex: 1; display: flex; gap: 8px; align-items: center; min-width: 240px; }
.log-filter input[type=search], .log-filter select {
  height: 38px; border: 1px solid var(--fline); border-radius: 10px;
  padding: 0 12px; font-size: 13.5px; color: var(--ink); background: var(--field); outline: none;
}
.log-filter input[type=search] { flex: 1; max-width: 320px; }
/* A phone cannot hold a search field and two or three selects on one line, and
   the row does not wrap on its own: the last filter — the clinic on Töötajad —
   simply sat off the right edge, out of reach. The audit page had already
   patched this for itself (.au-filter below); this is the same fix for every
   filter bar. Selects go two to a line, the search field keeps its own. */
@media (max-width: 900px) {
  .log-filter { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .log-filter input[type=search] { flex: 1 1 100%; max-width: none; }
  .log-filter select { flex: 1 1 44%; min-width: 0; }
  /* select2 copies the field's own width onto its box, so it is held back too */
  .log-filter .select2 { max-width: 100%; }
}
.log-filter input[type=search]:focus, .log-filter select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.pager { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.pager-info { font-size: 13px; font-weight: 700; color: var(--sub); white-space: nowrap; }
.pager .pg {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--btn2bg);
  font-size: 13px; font-weight: 700; color: var(--sub); text-decoration: none;
}
.pager .pg:hover { background: var(--navabg); color: var(--navafg); }
.pager .pg.on { background: var(--btng); color: #fff; border-color: transparent; }
.pager .pg.off { opacity: .35; pointer-events: none; }
.pager .pg.dots { border: 0; background: none; pointer-events: none; }
.icon-cell { display: flex; align-items: center; gap: 6px; }
.cell-muted { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
.mgr-row select.sel-ok { color: var(--tag-good-fg); font-weight: 700; }
.mgr-row select.sel-ban { color: var(--tag-bad-fg); font-weight: 700; }
.btn-ghost { background: var(--btn2bg); border: 1px solid var(--line); color: var(--navfg); }
.btn-ghost:hover { filter: brightness(.97); }

/* Expandable row detail (Edit button) */
.mgr-row .row-detail {
  grid-column: 1 / -1; display: none; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line2);
}
form.mgr-row.open .row-detail { display: flex; }
.row-detail .chk { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--label); cursor: pointer; padding-bottom: 8px; }
.row-detail .chk input { width: 16px; height: 16px; accent-color: #1274d6; }
.row-detail .fld-sm { display: flex; flex-direction: column; gap: 4px; }
.row-detail .fld-sm > span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.row-detail .fld-sm input { width: 170px; }
.row-detail .fld-sm.wide input { width: 320px; }
.row-detail .fld-sm select { width: 170px; height: 36px; border: 1px solid var(--fline); border-radius: 9px; padding: 0 10px; font-size: 13px; color: var(--ink); background: var(--field); outline: none; }
.row-detail .fld-sm.ro { font-size: 13px; color: var(--sub); font-weight: 600; padding-bottom: 8px; }
.qr-img { width: 200px; height: 200px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 14px; object-fit: contain; image-rendering: pixelated; }
.mgr-ic { position: relative; overflow: hidden; }
.mgr-ic .face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.face-lg { width: 120px; border: 1px solid var(--line); border-radius: 12px; }
.body-lg { width: auto; max-height: 160px; }

/* Employee card modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(8, 20, 35, .5); z-index: 195; }
.emp-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200;
  width: min(1200px, 96vw); max-height: 90vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--cardsh); padding: 26px 28px;
}
.modal-close {
  position: sticky; top: 0; float: right; margin-left: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--chip); color: var(--sub); font-size: 18px; line-height: 1;
}
.modal-close:hover { filter: brightness(.95); }
.card-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.card-name { font-size: 21px; font-weight: 800; color: var(--ink); }
.card-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px 16px; }
.card-sec {
  grid-column: 1 / -1; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line2);
  font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
.card-grid .fld-sm { display: flex; flex-direction: column; gap: 4px; }
.card-grid .fld-sm > span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.card-grid .fld-sm input, .card-grid .fld-sm select, .card-grid .fld-sm textarea {
  width: 100%; height: 36px; border: 1px solid var(--fline); border-radius: 9px;
  padding: 0 10px; font-size: 13px; color: var(--ink); background: var(--field); outline: none;
}
.card-grid .fld-sm textarea { height: 64px; padding: 8px 10px; resize: vertical; font-family: inherit; }
.card-grid .fld-sm input:focus, .card-grid .fld-sm select:focus, .card-grid .fld-sm textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.card-grid .cwide { grid-column: 1 / -1; }
.card-grid .chk-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; grid-column: 1 / -1; }
.card-grid .chk { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--label); cursor: pointer; }
.card-grid .chk input { width: 16px; height: 16px; accent-color: #1274d6; }
/* The read-only card (the accountant's view): no inputs, so the value itself
   has to carry the weight — the caption rule above would otherwise print it in
   the same tiny uppercase as its own label. */
.card-grid .fld-sm.ro > b { font-size: 13px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.card-grid .chk.ro { cursor: default; }
.card-grid .chk.ro > i { font-style: normal; font-weight: 800; color: var(--muted); }
.card-form.saved { outline: 2px solid var(--tag-good-fg); outline-offset: 8px; border-radius: 4px; transition: outline-color .3s; }

/* Report-a-problem modal */
.report-backdrop { position: fixed; inset: 0; background: rgba(8, 20, 35, .5); z-index: 195; }
.report-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200;
  width: min(640px, 94vw); max-height: 88vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--cardsh); padding: 24px 26px;
}
.report-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.report-status { font-size: 13px; font-weight: 800; color: var(--tag-good-fg); }
.user-menu .report-item {
  border: 0; background: none; cursor: pointer; text-align: left;
  border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--accent);
}
.user-menu .report-item:hover { background: var(--navabg); }

/* Admin email centre */
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.trow.row-click { cursor: pointer; }
.trow.row-click:hover { background: var(--navabg); }
.compose-form { padding: 16px 18px 18px; }
/* 12-column settings/compose grid: fields size to their content, not the page */
.compose-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 13px 16px; align-items: end; }
.compose-grid > * { grid-column: span 4; }
.compose-grid .cwide { grid-column: 1 / -1; }
.compose-grid .w-sm { grid-column: span 2; }   /* port, encryption */
.compose-grid .w-md { grid-column: span 3; }
.compose-grid .w-lg { grid-column: span 6; }   /* host, from address */
.compose-grid .w-2 { grid-column: span 2; }
.compose-grid .w-3 { grid-column: span 3; }
.compose-grid .w-4 { grid-column: span 4; }
@media (max-width: 1100px) {
  .compose-grid .w-2, .compose-grid .w-sm { grid-column: span 3; }
  .compose-grid .w-4, .compose-grid .w-lg { grid-column: span 6; }
}
@media (max-width: 760px) {
  .compose-grid > *, .compose-grid .w-sm, .compose-grid .w-md, .compose-grid .w-lg,
  .compose-grid .w-2, .compose-grid .w-3, .compose-grid .w-4 { grid-column: 1 / -1; }
}
/* Patient file transfer */
.pw-gen { display: flex; gap: 8px; align-items: stretch; }
.pw-gen input { flex: 1 1 auto; min-width: 0; }
.pw-gen .btn-sm { white-space: nowrap; }
.ft-drop { margin-top: 4px; }
.ft-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
/* Staged files: everything picked so far, each removable before sending */
.ft-list { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ft-listhead { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--thead); font-size: 12.5px; }
.ft-listhead strong { color: var(--ink); }
.ft-total { color: var(--muted); font-weight: 700; margin-left: auto; }
.ft-file { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--line2); font-size: 12.5px; }
.ft-fname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cell); font-weight: 600; }
.ft-fsize { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.ft-del { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--chip); color: var(--sub); font-size: 11px; line-height: 1; }
.ft-del:hover { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.ft-count { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.ft-meta { display: grid; gap: 6px; margin: 4px 0 18px; font-size: 13px; }
.ft-meta > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line2); padding-bottom: 6px; }
.ft-meta span { color: var(--muted); }
.ft-meta strong { color: var(--ink); overflow-wrap: anywhere; }

.cfg-hint { margin: 2px 0 12px; font-size: 12.5px; color: var(--sub); line-height: 1.7;
  /* these notes name tables and columns; an unbreakable identifier must not
     push a phone screen sideways */
  overflow-wrap: anywhere; }
code.ph { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700;
  color: var(--accent); background: var(--chip); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
.ph-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.ph-item { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.compose-grid .fld-sm > span code.ph { text-transform: none; letter-spacing: 0; margin-left: 4px; }
.compose-modal { width: min(820px, 96vw); }
.compose-backdrop { position: fixed; inset: 0; background: rgba(8, 20, 35, .5); z-index: 195; }
.compose-grid .fld-sm { display: flex; flex-direction: column; gap: 4px; }
.compose-grid .fld-sm > span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.compose-grid .fld-sm input, .compose-grid .fld-sm select, .compose-grid .fld-sm textarea {
  width: 100%; border: 1px solid var(--fline); border-radius: 9px;
  padding: 8px 10px; font-size: 13px; color: var(--ink); background: var(--field); outline: none; font-family: inherit;
}
.compose-grid .fld-sm input, .compose-grid .fld-sm select { height: 36px; padding: 0 10px; }
.compose-grid .fld-sm textarea { resize: vertical; }
.compose-grid .fld-sm input:focus, .compose-grid .fld-sm select:focus, .compose-grid .fld-sm textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.compose-grid .chk { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--label); cursor: pointer; }
.compose-grid .chk input { width: 16px; height: 16px; accent-color: #1274d6; }
.email-modal { width: min(860px, 96vw); }
.email-frame { width: 100%; height: 55vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-top: 12px; }
.rcpt-details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent); }
.rcpt-list { margin-top: 8px; max-height: 140px; overflow-y: auto; font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }

/* Employee card tabs + related tables */
.card-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.card-tabs .ct {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  background: var(--btn2bg); color: var(--navfg); font-size: 12.5px; font-weight: 700;
}
.card-tabs .ct:hover { filter: brightness(.97); }
.card-tabs .ct.on { background: var(--btng); color: #fff; border-color: transparent; }
.card-tabs .ct .cnt { opacity: .65; font-size: 11px; margin-left: 5px; }
.card-tab[hidden] { display: none; }
.rel-empty { padding: 22px 0; text-align: center; color: var(--muted); font-weight: 700; }
.doc-add { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.doc-add select {
  height: 44px; border: 1px solid var(--fline); border-radius: 9px;
  background: var(--field); color: var(--ink); font-size: 13px; padding: 0 10px;
}
.dropzone {
  flex: 1; min-width: 240px; min-height: 44px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 8px 16px;
  border: 1.5px dashed var(--fline); border-radius: 10px; background: var(--field);
  font-size: 13px; font-weight: 700; color: var(--muted); transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); color: var(--accent); background: var(--navabg); }
.dropzone.busy { pointer-events: none; opacity: .7; }
.arch-toggle { margin-top: 12px; }

/* Töötajad → Dokumendid: employee list + document panel */
/* Page fills the viewport exactly; both columns scroll internally */
.dash:has(.ed-layout) main { height: 100vh; overflow: hidden; }
.ed-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(230px, 1fr) 3fr; gap: 20px; }
.ed-list { padding: 12px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ed-search {
  flex: 0 0 auto; width: 100%; height: 38px; margin-bottom: 10px;
  border: 1px solid var(--fline); border-radius: 10px; padding: 0 12px;
  font-size: 13.5px; color: var(--ink); background: var(--field); outline: none;
}
.ed-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.ed-docfilter {
  flex: 0 0 auto; width: 100%; height: 38px; margin-bottom: 10px;
  border: 1px solid var(--fline); border-radius: 10px; padding: 0 10px;
  font-size: 13px; color: var(--ink); background: var(--field); outline: none;
}
.ed-docfilter:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
/* overflow-x: the sticky group heading below bleeds 4px past each edge, and a
   box that scrolls on one axis scrolls on both — those 8px were enough to put a
   horizontal scrollbar under the employee list. Nothing else here is wider than
   the column (the names wrap), so the overflow is simply cut off. */
.ed-list-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ed-group {
  position: sticky; top: 0; z-index: 5;
  padding: 12px 10px 8px; margin: 0 -4px;
  background: var(--card); font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
.ed-emp {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-radius: 9px; padding: 9px 12px;
  background: none; color: var(--cell); font-size: 13.5px; font-weight: 600;
}
.ed-emp:hover { background: var(--rowhov); }
.ed-emp.on { background: var(--navabg); color: var(--navafg); font-weight: 800; }
/* Name and upload bar stay fixed; only the document list scrolls */
.ed-panel { padding: 20px 22px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ed-panel .card-name, .ed-panel .doc-add { flex: 0 0 auto; }
.ed-docs { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* On a phone the two panes stack, and the page is let out of its 100vh cage.
   Locked to the viewport with both panes scrolling inside it, the document
   panel had ~325px under the list and the page itself could not scroll: the
   files were there, but there was no way to reach them. Now the page scrolls
   as usual and the panel grows with its contents; the list keeps a cap of its
   own so it cannot push the documents off the screen again. */
@media (max-width: 900px) {
  .dash:has(.ed-layout) main { height: auto; overflow: visible; }
  /* minmax(0, 1fr), not 1fr: a grid item is min-width:auto by default, so the
     wide document table would push the whole column — and with it the page —
     past the screen's edge instead of scrolling inside its own .table-scroll.
     That was hidden before only because the panel clipped its overflow. */
  .ed-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .ed-list, .ed-panel { min-width: 0; }
  .ed-list { max-height: 46vh; }
  .ed-panel, .ed-docs { overflow: visible; min-height: 0; }
}
.rel-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--cell); }
.rel-table th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.rel-table td { padding: 8px 10px; border-top: 1px solid var(--line2); vertical-align: top; }
#mgr-root > .mgr-group > .mgr-row { cursor: pointer; }
.mgr-chev {
  flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--muted);
  transform: rotate(90deg); transition: transform .15s;
}
.mgr-group.collapsed .mgr-chev { transform: none; }

.clr-dot { display: inline-block; width: 12px; height: 12px; border-radius: 999px; margin-right: 7px; vertical-align: -1px; }

/* Color palette picker */
.clr-palette { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 5px; }
.clr-palette button {
  width: 28px; height: 28px; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; padding: 0;
}
.clr-palette button:hover { transform: scale(1.12); }
.clr-palette button.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.clr-palette button.none {
  border: 1.5px dashed var(--fline);
  background: linear-gradient(135deg, transparent 46%, #d05555 46%, #d05555 54%, transparent 54%), var(--field);
}
.clr-palette .clr-custom {
  width: 34px; height: 28px; padding: 1px; cursor: pointer;
  border: 1.5px dashed var(--fline); border-radius: 8px; background: var(--field);
}
.clr-palette .clr-custom.on { border-style: solid; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.clr-hex { align-self: center; font-size: 12.5px; font-weight: 700; color: var(--sub); font-family: ui-monospace, monospace; }

/* ---------- Select2 — every <select>, see lhkInitSelects() in app.js ----------
   The box takes its metrics from the select it replaces (--s2h height, --s2r
   radius, --s2fs/--s2fw font, --s2px padding), so it matches the inputs beside
   it wherever it sits; colours are the theme's, so dark mode comes for free. */
.select2-container { max-width: 100%; font-family: inherit; vertical-align: middle; }
/* the field labels style their caption as ".fld-sm > span"; select2's wrapper
   is a span in the very same spot, and must not read as a caption */
.fld-sm > span.select2-container.select2-container--default,
.lg-fnote > span.select2-container.select2-container--default,
.sc-drawer-kom > span.select2-container.select2-container--default {
  font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; color: inherit;
}
.select2-container--default .select2-selection--single {
  height: var(--s2h, 36px); border: 1px solid var(--fline); border-radius: var(--s2r, 9px);
  background: var(--field); outline: none; transition: border-color .12s, box-shadow .12s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--s2h, 36px) - 2px); padding-left: var(--s2px, 10px); padding-right: 30px;
  color: var(--ink); font-size: var(--s2fs, 13px); font-weight: var(--s2fw, 500);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--s2h, 36px) - 2px); top: 1px; right: 6px; width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--muted) transparent transparent; border-width: 5px 4px 0;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--muted); border-width: 0 4px 5px;
}
.select2-container--default .select2-selection--multiple {
  min-height: var(--s2h, 36px); border: 1px solid var(--fline); border-radius: var(--s2r, 9px);
  background: var(--field); padding: 3px 6px 3px 4px; display: flex; align-items: center; cursor: text;
  transition: border-color .12s, box-shadow .12s;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; padding: 0; margin: 0;
}
/* with nothing picked the list would still claim the full width and squeeze the
   search field, placeholder and all, into its 60px minimum at the far end */
.select2-container--default .select2-selection--multiple .select2-selection__rendered:empty { display: none; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex; align-items: center; margin: 0; padding: 0; height: 24px; max-width: 100%;
  border: 0; border-radius: 6px; background: var(--navabg); color: var(--navafg); font-size: 12.5px; font-weight: 700;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: static; border: 0; padding: 0 2px 0 7px; background: none; color: var(--navafg);
  opacity: .7; font-size: 15px; line-height: 1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background: none; color: var(--navafg); opacity: 1; outline: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding: 0 8px 0 3px; overflow: hidden; text-overflow: ellipsis;
}
.select2-container--default .select2-search--inline { display: flex; flex: 1 1 60px; min-width: 60px; }
.select2-container--default .select2-search--inline .select2-search__field {
  flex: 1 1 auto; min-width: 0; margin: 0; height: 24px; padding: 0 4px; background: transparent;
  font: inherit; font-size: var(--s2fs, 13px); color: var(--ink);
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
/* the library squares off the edge facing the dropdown; the fields stay rounded */
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-radius: var(--s2r, 9px); }
.select2-container--default.select2-container--disabled .select2-selection { background: var(--field); opacity: .55; cursor: not-allowed; }
/* status pickers keep their colour, the messenger's "new message" its accent */
select.sel-ok + .select2-container .select2-selection__rendered { color: var(--tag-good-fg); font-weight: 700; }
select.sel-ban + .select2-container .select2-selection__rendered { color: var(--tag-bad-fg); font-weight: 700; }
select.sn-pick + .select2-container .select2-selection__rendered { color: var(--accent); }

.select2-dropdown, .select2-dropdown--above, .select2-dropdown--below {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
  box-shadow: var(--cardsh); overflow: hidden;
}
.select2-dropdown--below { margin-top: 4px; }
.select2-dropdown--above { margin-top: -4px; }
.select2-container--default .select2-search--dropdown { padding: 8px 8px 4px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 36px; border: 1px solid var(--fline); border-radius: 8px; padding: 0 10px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 13.5px; outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.select2-container--default .select2-results > .select2-results__options { max-height: 280px; padding: 4px; }
.select2-container--default .select2-results__option { padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--cell); }
.select2-container--default .select2-results__option--selected { background: var(--navabg); color: var(--navafg); font-weight: 700; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--accent); color: #fff; }
.select2-container--default .select2-results__option--disabled { color: var(--muted); }
.select2-container--default .select2-results__group {
  padding: 8px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.select2-container--default .select2-results__option--group { padding: 0; }
.select2-container--default .select2-results__option--group .select2-results__option { padding-left: 18px; }
.select2-results__message { color: var(--muted); }
/* Select2 leaves the real <select> in the page for screen readers, absolutely
   positioned at its static spot. Inside a horizontally scrolled table that spot
   is hundreds of pixels to the right of the screen, and because the element
   escapes the scroller's clipping the whole document pans sideways. Pin it. */
.select2-hidden-accessible { top: 0 !important; left: 0 !important; }

/* ---------- Quick-access drawer (cog button, middle right) ---------- */
.quick-fab {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 90;
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--sub);
  display: flex; align-items: center; justify-content: center;
  opacity: .45; transition: opacity .15s;
  box-shadow: 0 10px 30px -12px rgba(8, 30, 55, .35);
}
.quick-fab:hover, body.quick-open .quick-fab { opacity: 1; }
.quick-fab svg { width: 21px; height: 21px; }
.quick-drawer {
  position: fixed; right: 0; top: 0; height: 100vh; width: 76px; z-index: 110;
  background: var(--side); border-left: 1px solid var(--line);
  padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translateX(100%); transition: transform .2s ease;
}
body.quick-open .quick-drawer { transform: none; box-shadow: 0 0 60px rgba(5, 20, 40, .35); }
html:has(body.quick-open), html:has(body.drawer-open), html:has(body.modal-open) { overflow: hidden; }
.quick-backdrop { display: none; position: fixed; inset: 0; background: rgba(8, 20, 35, .45); z-index: 105; }
body.quick-open .quick-backdrop { display: block; }
.qd-btn {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--btn2bg); color: var(--iconfg);
}
.qd-btn:hover { background: var(--navabg); color: var(--navafg); text-decoration: none; }
.qd-btn svg { width: 19px; height: 19px; }
.qd-clinics { display: none; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0; }
.qd-clinics.open { display: flex; }
.qd-clinic {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--iconbg); color: var(--iconfg);
  font-size: 12px; font-weight: 800;
}
.qd-clinic-name {
  position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%);
  padding: 6px 12px; border-radius: 10px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(8, 30, 55, .35);
}
.qd-clinic.on .qd-clinic-name { color: var(--accent); }
body:not(.quick-open) .qd-clinic-name { display: none; }
.qd-clinic:hover { text-decoration: none; filter: brightness(.95); }
.qd-clinic.on { background: var(--btng); color: #fff; border-color: transparent; box-shadow: var(--btnsh); }

/* Mobile drawer trigger (hidden on wider screens) */
.menu-btn {
  display: none; width: 42px; height: 42px; border: 0; border-radius: 12px;
  background: var(--chip); color: var(--ink); font-size: 18px; cursor: pointer;
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(8, 20, 35, .45); z-index: 99; }

/* Narrow screens: collapse sidebar to icons */
@media (max-width: 920px) {
  .dash aside { width: 76px; padding: 18px 8px; }
  .side-brand { justify-content: center; }
  .side-brand { align-items: center; }
  .side-brand .logo-full, .brand-clinic, .nav-item .lbl, .nav-item .badge, .nav-item .chev, .btn-logout .lbl, .side-user > div:last-child { display: none; }
  .side-brand .logo-mini { display: block; }
  .nav-item, .side-user { justify-content: center; }
  .nav-group-items { padding-left: 0; }
  .dash-head input[type=search] { display: none; }
}

/* Mobile: hide the sidebar entirely; hamburger opens it as an overlay drawer */
@media (max-width: 720px) {
  .dash aside {
    position: fixed; left: 0; top: 0; z-index: 100; height: 100vh;
    width: 250px; padding: 18px 12px;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.drawer-open .dash aside { transform: translateX(0); box-shadow: 0 0 60px rgba(5, 20, 40, .35); }
  body.drawer-open .drawer-backdrop { display: block; }
  /* restore full labels inside the open drawer */
  .dash aside .side-brand { align-items: flex-start; }
  .dash aside .side-brand .logo-full { display: block; }
  .dash aside .side-brand .logo-mini { display: none; }
  .dash aside .brand-clinic { display: inline-block; }
  .dash aside .side-user > div:last-child { display: block; }
  .dash aside .nav-item .lbl, .dash aside .btn-logout .lbl { display: inline; }
  .dash aside .nav-item .badge, .dash aside .nav-item .chev { display: inline-block; }
  .dash aside .nav-item, .dash aside .side-user { justify-content: flex-start; }
  .dash aside .nav-group-items { padding-left: 18px; }
  .menu-btn { display: flex; }
  .dash main { padding: 20px 16px; }
  /* The header wraps, and with a 180px floor under the title the language and
     theme buttons no longer fit beside it — the theme button dropped onto a
     line of its own. Let the title shrink and keep the row intact. */
  .dash-head { gap: 8px; }
  .dash-head .titles { min-width: 0; }
  .dash-head h1 { font-size: 20px; }
  .dash-head .date { font-size: 12px; }
  .dash-head .theme-toggle { width: 38px; height: 38px; }
  .dash-head .lang-btn { height: 38px; padding: 0 10px; }
}

/* Shared avatar: initials disc with the photo layered on top when it loads */
.lhk-av {
  position: relative; overflow: hidden; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: hsl(var(--h, 210) 45% 92%); color: var(--chipfg);
  font-weight: 800; text-transform: uppercase; line-height: 1;
}
body.dark .lhk-av { background: rgba(255,255,255,.1); }
.lhk-av .face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lhk-av.av-xs { width: 20px; height: 20px; font-size: 8.5px; }
.lhk-av.av-sm { width: 26px; height: 26px; font-size: 10px; }

/* Clinic switch */
.sc-clinics { display: inline-flex; align-items: center; gap: 3px; background: var(--chip); border-radius: 9px; padding: 3px; }
.sc-clinicbtn {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 7px;
  font-size: 12px; font-weight: 800; color: var(--sub); white-space: nowrap; line-height: 1;
}
.sc-clinicbtn:hover { text-decoration: none; color: var(--ink); }
.sc-clinicbtn.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Employee filter */
.sc-filtercount { font-weight: 800; color: var(--accent); }
.sc-toolbar { position: relative; }
/* floats over the table instead of pushing it down */
.sc-filterpanel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 70;
  width: min(720px, 100%); max-height: 420px; overflow-y: auto;
  padding: 12px 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--cardsh);
}
.sc-filterhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.sc-filterlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.sc-fitem { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--cell); cursor: pointer; min-width: 0; }
.sc-fitem input { width: 15px; height: 15px; accent-color: #1274d6; flex: 0 0 auto; }
.sc-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-cell.dimmed { opacity: .22; }
.sc-cell.dimmed .sc-pick { pointer-events: none; }

/* Picker popover */
.sc-search { width: 100%; height: 28px; border: 1px solid var(--fline); border-radius: 7px; padding: 0 8px;
  font-size: 12.5px; background: var(--field); color: var(--ink); outline: none; font-family: inherit; }
.sc-list { max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.sc-optgrp { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 4px 2px; }
.sc-opt { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; cursor: pointer;
  border-radius: 7px; padding: 4px 6px; font-size: 12.5px; font-weight: 600; color: var(--cell); text-align: left; font-family: inherit; }
.sc-opt:hover { background: var(--navabg); }
.sc-opt.on { background: var(--navabg); color: var(--navafg); }

/* Registratuur planner: one row per day, shifts across the top */
.sc-toolbar { gap: 10px; flex-wrap: wrap; }
.sc-nav { display: flex; align-items: center; gap: 4px; }
/* every control in the toolbar is the same height with centred text */
.sc-toolbar .btn-sm, .sc-toolbar .sc-navbtn, .sc-toolbar .sc-clinics {
  height: 34px; box-sizing: border-box;
}
.sc-toolbar .btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1; text-decoration: none;
}
.sc-toolbar a.btn-sm:hover { text-decoration: none; }
.sc-navbtn {
  width: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip); color: var(--chipfg); font-size: 17px; font-weight: 800; line-height: 1;
}
.sc-navbtn:hover { text-decoration: none; filter: brightness(.95); }
.sc-month { font-size: 15px; font-weight: 800; color: var(--ink); text-transform: capitalize; min-width: 128px; text-align: center; }
.sc-clinic { margin-left: auto; }
.sc-lockbtn { display: flex; align-items: center; gap: 6px; }
.sc-lockbtn.on { background: var(--tag-bad-bg); color: var(--tag-bad-fg); border-color: transparent; }
.sc-status { font-size: 12.5px; font-weight: 800; }
.sc-status.ok { color: var(--tag-good-fg); }
.sc-status.bad { color: var(--tag-bad-fg); }

/* The whole planner fits its container: no horizontal scrolling on any screen */
.sc-grid { width: 100%; }
.sc-grid .thead, .sc-grid .trow { display: grid; grid-template-columns: var(--sc-cols); }
.sc-head > div { display: flex; align-items: center; }
.sc-shifthead { flex-direction: column; align-items: flex-start !important; gap: 1px; line-height: 1.25; }
.sc-shiftname { font-weight: 800; color: var(--ink); min-height: 13px; }
.sc-shifttime { font-size: 11px; font-weight: 600; color: var(--muted); }
.sc-shiftnum { display: none; font-weight: 800; color: var(--ink); }
.sc-daycell { display: flex; align-items: center; gap: 8px; align-self: stretch; padding-right: 8px; min-width: 0; }
.sc-dow {
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; background: var(--chip); color: var(--chipfg);
}
.sc-dow.sat { background: var(--tag-warn-bg); color: var(--tag-warn-fg); }
.sc-dow.sun { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.sc-date { font-size: 12.5px; font-weight: 700; color: var(--cell); white-space: nowrap; overflow: hidden; }
.sc-date-short { display: none; }
.trow.sc-row { align-items: stretch; padding-top: 6px; padding-bottom: 6px; }
.trow.sc-row.locked-row { background: var(--thead); }
.trow.sc-row.is-today { box-shadow: inset 0 0 0 2px var(--tag-bad-fg); border-radius: 8px; }

.sc-cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; overflow: visible; padding-right: 6px; position: relative; }
.sc-pick {
  width: 100%; min-height: 30px; border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--cell); font-size: 11.5px; font-weight: 600; text-align: left;
  padding: 3px 5px; overflow: hidden;
  display: flex; align-items: center; gap: 6px;
}
/* the surname wraps onto its own line rather than being cut off */
.sc-pick .sc-full { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.sc-pick:hover:not(:disabled) { border-color: var(--fline); background: var(--field); }
.sc-pick:disabled { cursor: not-allowed; color: var(--muted); }
.sc-init { display: none; }
.sc-komtag { font-size: 10.5px; color: var(--muted); padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Right-hand drawer for picking who works a slot */
.sc-drawer-back { position: fixed; inset: 0; background: rgba(8, 20, 35, .35); z-index: 195; }
.dash .sc-drawer, .sc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 200;
  width: min(360px, 92vw); display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--cardsh); padding: 18px;
}
.sc-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sc-drawer-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.sc-drawer-sub { font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 2px; }
/* min-height:0 lets the list shrink so the comment field below stays on screen */
.sc-drawer .sc-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.sc-drawer-head, .sc-drawer .sc-search, .sc-drawer-kom { flex: 0 0 auto; }
.sc-drawer-kom { display: flex; flex-direction: column; gap: 4px; }
.sc-drawer-kom > span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sc-drawer .sc-komedit {
  width: 100%; height: 34px; border: 1px solid var(--fline); border-radius: 8px;
  padding: 0 10px; font-size: 13px; color: var(--ink); background: var(--field); outline: none; font-family: inherit;
}
.sc-drawer .sc-opt { padding: 7px 8px; font-size: 13px; }
.sc-optname { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* someone who is away that day is still selectable, just clearly marked */
.sc-awaytag { font-size: 10.5px; font-weight: 700; color: var(--tag-warn-fg); }
/* picker entry for somebody who already stands somewhere else that day */
.sc-takentag { display: block; font-size: 10.5px; font-weight: 700; color: var(--tag-bad-fg); }
/* Already standing somewhere else that day: the whole row goes light red, so a
   clash registers before the name is even read. Placed after `.sc-opt:hover`,
   which has the same specificity, so hover needs restating to stay visible. */
.sc-opt.taken { background: var(--tag-bad-bg); }
.sc-opt.taken:hover { background: var(--tag-bad-bg); filter: brightness(.96); }
.sc-opt.taken .lhk-av { box-shadow: 0 0 0 2px var(--tag-bad-fg); }
/* the currently-assigned person can also be double-booked: keep the red panel
   and mark the selection with an outline instead of a competing background */
.sc-opt.on.taken { background: var(--tag-bad-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.sc-opt.away .lhk-av { opacity: .5; }
.sc-cell.editing { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 7px; }
.sc-cell.away .sc-pick::after { content: '🌴'; font-size: 9px; margin-left: 3px; }
.sc-cell.saved .sc-pick { outline: 2px solid var(--tag-good-fg); outline-offset: 1px; }

/* Tablet: drop the shift names, keep the times */
@media (max-width: 1100px) {
  .sc-shiftname { display: none; }
  .sc-shifttime { font-size: 10px; }
  .sc-pick { font-size: 11.5px; padding: 3px 4px; }
}
/* Phone: initials only, so all seven shifts stay on screen */
@media (max-width: 760px) {
  .sc-grid { --sc-cols: 54px repeat(var(--sc-n, 7), minmax(0, 1fr)) !important; }
  /* the default row gap/padding would eat ~100px of a 375px screen */
  .sc-grid .thead, .sc-grid .trow { gap: 3px; padding-left: 8px; padding-right: 8px; }
  .sc-shifttime { display: none; }
  .sc-shiftnum { display: block; font-size: 12px; }
  .sc-head > div { justify-content: center; }
  .sc-daycell { gap: 4px; padding-right: 2px; }
  .sc-dow { width: 20px; height: 20px; font-size: 10px; border-radius: 5px; }
  .sc-date-full { display: none; }
  .sc-date-short { display: inline; font-size: 11px; }
  .sc-full { display: none; }
  .sc-init { display: block; font-size: 12px; font-weight: 800; text-align: center; }
  .sc-pick { padding: 3px 0; justify-content: center; }
  .sc-pick .lhk-av { display: none; }   /* initials only: a photo this small is unreadable */
  .sc-clinics { order: 3; width: 100%; overflow-x: auto; }
  .sc-editor { width: 210px; }
  .sc-filterlist { grid-template-columns: 1fr; }
  .sc-filterpanel { right: auto; left: 0; width: 100%; }
  .sc-komtag { display: none; }
  .sc-cell.has-kom .sc-pick::after { content: '•'; color: var(--accent); margin-left: 2px; }
  .sc-editor { inset: -4px auto auto -4px; width: 200px; }
  .sc-month { min-width: 0; font-size: 14px; }
  .sc-clinic, .sc-today-btn { display: none; }
}
.sc-shifthead.extra .sc-shifttime { color: var(--tag-warn-fg); }

/* The shift header follows the page down the long month grid. `overflow: clip`
   (not `hidden`) still rounds the card's corners but does NOT make it a scroll
   container, which is what lets the header stick to the viewport. */
.sc-card { overflow: clip; }
.sc-grid .thead.sc-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--thead); border-bottom: 1px solid var(--line2);
}
/* Double booking: this person is already committed elsewhere that day */
.sc-cell.dbl .sc-pick { box-shadow: inset 0 0 0 1.5px var(--tag-warn-fg); }
.sc-cell.dbl .sc-pick::before { content: '⚠'; font-size: 10px; flex: 0 0 auto; }
.sc-opt.dbl .lhk-av { opacity: .5; }
.sc-dbltag { font-size: 10.5px; font-weight: 700; color: var(--tag-warn-fg); }
/* Invoice deletion queue: pending rows stand out */
.trow.iv-open { background: var(--tag-warn-bg); }
.tag.warn { background: var(--tag-warn-bg); color: var(--tag-warn-fg); }
/* the confirm button must never be clipped by its cell */
.trow .iv-act { overflow: visible; }
.iv-act form { display: flex; }
.iv-act .btn-sm { white-space: nowrap; width: 100%; }

/* Kaebused: complaint list + detail with comment thread */
.kb-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--tag-muted-fg); }
.kb-dot.warn { background: var(--tag-warn-fg); }
.kb-dot.bad { background: var(--tag-bad-fg); box-shadow: 0 0 0 3px var(--tag-bad-bg); }
.kb-dot.good { background: var(--tag-good-fg); }
.kb-dot.arch { background: var(--tag-muted-fg); opacity: .5; }
.trow.kb-overdue { background: var(--tag-bad-bg); }
.kb-pat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kb-ik { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.kb-nimi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-kn { font-size: 11px; color: var(--accent); font-weight: 800; margin-left: 4px; }
.kb-modal { width: min(1180px, 96vw); }
.kb-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; }
.kb-form textarea { width: 100%; border: 1px solid var(--fline); border-radius: 9px; padding: 8px 10px;
  font-size: 13px; font-family: inherit; color: var(--ink); background: var(--field); outline: none; resize: vertical; }
.kb-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.kb-form.saved { outline: 2px solid var(--tag-good-fg); outline-offset: 8px; border-radius: 4px; }
.kb-comments { display: flex; flex-direction: column; min-width: 0; }
.kb-thread { flex: 1 1 auto; min-height: 0; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.kb-comment { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--thead); }
.kb-cmeta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.kb-cmeta strong { color: var(--cell); }
.kb-ctext { font-size: 13px; line-height: 1.5; color: var(--cell); overflow-wrap: anywhere; }
.kb-addc { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.kb-addc textarea { width: 100%; border: 1px solid var(--fline); border-radius: 9px; padding: 8px 10px;
  font-size: 13px; font-family: inherit; color: var(--ink); background: var(--field); outline: none; resize: vertical; }
.kb-addc textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
@media (max-width: 900px) { .kb-card { grid-template-columns: 1fr; } }

/* ---- Registratuur → Kinkekaardid ---- */
.kk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* the bar wraps, so the forms inside it have to as well — a row of three
   pickers is wider than a phone on its own */
.kk-bar > form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; }
.kk-spacer { flex: 1; }
.kk-balance { font-size: 17px; font-weight: 700; color: var(--sub); margin: -6px 0 -2px; }
.kk-balance strong { font-size: 22px; font-weight: 800; color: var(--ink); }
.kk-newmodal { width: min(720px, 94vw); }
.kk-useform { border-bottom: 1px solid var(--line2); }
.kk-useform .btn-sm { width: 100%; }
.compose-grid input[readonly] { color: var(--sub); background: var(--btn2bg); pointer-events: none; }
.pt-modal { width: min(1180px, 96vw); }
.pt-modal .card-sec { margin-top: 18px; }
.pt-visits { max-height: 340px; overflow-y: auto; }
.compose-grid .fld-sm.pt-chk { flex-direction: row; align-items: center; gap: 10px; align-self: end; padding-bottom: 9px; cursor: pointer; }
.compose-grid .fld-sm.pt-chk input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto;
  padding: 0; border: none; box-shadow: none; accent-color: var(--accent); }
.pt-chk > span { font-size: 12px; font-weight: 800; color: var(--ink); }
.pt-consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pt-consent input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; accent-color: #c0392b; }
.pt-consent span { font-size: 12.5px; font-weight: 700; color: #c0392b; line-height: 1.45; }
.btn-hammas, .pt-save { width: 100%; }
.btn-hammas { background: #35a3a8; }
.btn-hammas:hover { background: #2c8c91; }
.pt-child { font-size: 14px; }
.pt-form.saved .pt-save { background: var(--tag-good-fg); }
/* the HAMMAS comparison: a match tag, and beside a difference the button that takes the value over */
.pt-hact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-hact .btn-sm { padding: 4px 10px; font-size: 12px; }
.pt-hall { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; }
.pt-hall .btn-hammas { width: auto; }

/* ---- Registratuur → Kassa ---- */
.ka-layout { display: flex; gap: 20px; align-items: flex-start; }
.ka-side { flex: 0 0 220px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.ka-p { display: block; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  color: var(--navfg); text-decoration: none; }
.ka-p:hover { background: var(--btn2bg); text-decoration: none; }
.ka-p.on { background: var(--accent); color: #fff; }
.ka-months { max-height: 430px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--line2);
  padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.ka-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ka-num { text-align: right; }
.ka-lbl { text-align: right; font-weight: 700; color: var(--sub); }
.trow.ka-total, .trow.ka-dtotal { background: #6d7680; color: #fff; font-weight: 800; }
.trow.ka-day { background: #8a929b; color: #fff; font-weight: 800; }
.trow.ka-chead, .trow.ka-ctotal { color: #fff; font-weight: 800; }
.trow.ka-c1 { background: #2ba3b0; }
.trow.ka-c2 { background: #2ebd85; }
.trow.ka-c3 { background: #8720e2; }
.ka-del { border: 0; background: none; color: var(--tag-bad-fg); font-weight: 800; cursor: pointer; font-size: 15px; }
.ka-note { font-size: 12px; }
.ka-modal, .ka-newmodal { width: min(880px, 95vw); }
/* Stacked, the children must take the screen's width. With align-items:flex-start
   inherited from the row layout they size to their widest content instead, and a
   680px table drags the whole page sideways. */
@media (max-width: 900px) {
  .ka-layout { flex-direction: column; align-items: stretch; }
  /* Stacked, the period list comes first — as a column, every month back to
     2015 filled the screen before any data did. It becomes one strip of chips
     that scrolls sideways instead, so the figures stay in view. */
  .ka-side {
    width: 100%; flex: none; flex-direction: row; align-items: center; gap: 8px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 8px 10px;
  }
  .ka-side::-webkit-scrollbar { display: none; }
  .ka-months {
    flex-direction: row; gap: 8px; max-height: none; overflow: visible;
    margin-top: 0; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--line2);
  }
  .ka-p { flex: 0 0 auto; white-space: nowrap; }
  .ka-main { width: 100%; }
}

/* ---------- QR kiosk (public/login/) ---------- */
.kiosk-page .auth-wrap { width: min(560px, 92vw); }
.kiosk-card { text-align: center; }
.kiosk-clock { font-size: 46px; font-weight: 800; color: var(--ink); letter-spacing: 1px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.fld input.kiosk-qr { -webkit-text-security: disc; text-align: center; font-size: 17px; }
/* The greeting screen's scan catcher: off-screen but still focusable, so a
   badge scanned while the welcome is showing is not thrown away. Not
   display:none or visibility:hidden — neither can hold focus. */
.kiosk-catch { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kiosk-img { max-width: 100%; max-height: 42vh; object-fit: contain; border-radius: 14px; margin: 0 auto 18px; display: block; }
.kiosk-text { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.kiosk-time { margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--sub); }
.kiosk-in .kiosk-time { color: var(--tag-good-fg); }
.kiosk-out .kiosk-time { color: var(--tag-info-fg); }
/* Admin → Seaded → QR-kiosk: media slots */
.kiosk-slot audio { width: 100%; height: 36px; }
.kiosk-thumb { max-height: 72px; border-radius: 8px; align-self: flex-start; border: 1px solid var(--line); }
.compose-grid .kiosk-slot input[type=file] { height: auto; padding: 7px 10px; }

/* ---------- Töötajad → Tunnid (hours.php) ---------- */
.hr-emp { height: 32px; border: 1px solid var(--fline); border-radius: 9px; padding: 0 10px; font-size: 13px;
  color: var(--ink); background: var(--field); outline: none; max-width: 260px; }
.hr-c { text-align: center; }
.hr-range { font-size: 11.5px; color: var(--sub); font-weight: 600; margin-top: 2px; }
.trow.hr-total { background: var(--thead); font-weight: 800; color: var(--ink); }
.hr-actions { display: flex; align-items: center; gap: 10px; }
.hr-actions .btn-danger { margin-left: auto; }
/* Row actions on Töötajad → Tunnid: an icon each, admin-only. The stroke picks
   up currentColor, so the delete turns red purely from its own colour. */
.hr-acts { display: flex; align-items: center; gap: 4px; }
.hr-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 9px;
  background: none; color: var(--sub); cursor: pointer;
}
.hr-ico:hover { background: var(--btn2bg); border-color: var(--line); color: var(--ink); text-decoration: none; }
.hr-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.hr-icodel:hover { color: var(--tag-bad-fg); border-color: var(--tag-bad-fg); background: var(--tag-bad-bg); }
/* the form is only a carrier for the button above it */
.hr-delform { display: none; }
.compose-grid .hr-wide { grid-column: span 9; }
@media (max-width: 1100px) { .compose-grid .hr-wide { grid-column: span 6; } }
@media (max-width: 760px) { .compose-grid .hr-wide { grid-column: 1 / -1; } }

/* Vacation calendar timeline (holidays.php, my-holidays.php) */
.cal-empwrap { flex: 1; min-width: 280px; }
.cal-empwrap select[multiple] { width: 100%; }
.cal-empty { padding: 26px 18px; color: var(--muted); }
.cal { padding-bottom: 6px; }
.cal-row { display: flex; align-items: stretch; border-top: 1px solid var(--line2); }
.cal-row.cal-head { border-top: 0; }
.cal-name { flex: 0 0 220px; padding: 9px 14px; font-weight: 700; font-size: 13.5px; color: var(--cell);
  display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.cal-name .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-days { color: var(--muted); font-weight: 800; font-size: 12px; white-space: nowrap; }
.cal-strip { flex: 1; position: relative; min-height: 36px; }
.cal-head .cal-strip { min-height: 28px; }
.cal-mon { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line2); }
.cal-mon span { font-size: 11px; font-weight: 800; color: var(--muted); padding: 7px 0 0 6px; display: block; white-space: nowrap; }
.cal-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 15px; border-radius: 8px;
  cursor: pointer; min-width: 5px; }
.cal-bar.ok { background: var(--tag-good-fg); }
.cal-bar.pend { background: var(--tag-warn-fg); }
.cal-bar:hover { filter: brightness(1.2); }
.cal-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--tag-bad-fg); opacity: .7; }
.cal-legend { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line2);
  color: var(--sub); font-size: 12px; font-weight: 600; }
.cal-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 6px; vertical-align: -2px; }
.hol-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line2); }
.hol-sendmodal { width: min(820px, 94vw); }
.hol-pdfframe { width: 100%; height: 62vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.hol-sendfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.hol-sendfoot .rcpt { color: var(--sub); font-size: 13px; margin-right: auto; }
/* Moderator row on the vacation card (type for admins, pay type, hours, save):
   the card-grid field look, a small caps caption over a 36 px control, as one
   wrapping row on a soft panel with the button on the fields' bottom line. The
   select keeps that height too, so the select2 box that copies it lines up. */
.hol-hours {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px;
  margin-top: 18px; padding: 14px 16px 16px; border: 1px solid var(--line2); border-radius: 12px; background: var(--chip);
}
.hol-hours .fld-sm { display: flex; flex-direction: column; gap: 5px; flex: 1 1 110px; min-width: 0; }
.hol-hours .fld-sm.hol-wide { flex: 1.8 1 190px; }
.hol-hours .fld-sm > span:first-child {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hol-hours .fld-sm input, .hol-hours .fld-sm select {
  width: 100%; height: 36px; border: 1px solid var(--fline); border-radius: 9px; padding: 0 10px;
  font: inherit; font-size: 13px; color: var(--ink); background: var(--field); outline: none;
}
.hol-hours .fld-sm input:focus, .hol-hours .fld-sm select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
/* hours read as figures: right-aligned, without the browser's spin arrows */
.hol-hours input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.hol-hours input[type="number"]::-webkit-inner-spin-button,
.hol-hours input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hol-hours .btn-sm { flex: none; height: 36px; padding: 0 20px; }
/* Tunnid normist: filled in from the dates, adjustable by hand; a figure that
   differs from the calculation is marked, and its ↺ puts the calculated one back */
.hol-hours .hol-num { position: relative; display: block; }
.hol-hours .hol-num input { padding-right: 32px; }
.hol-hours .hol-manual input { border-color: var(--tag-warn-fg); background: var(--tag-warn-bg); }
.hol-hours .hol-reset {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 24px; height: 24px;
  border: 0; border-radius: 6px; background: transparent; color: var(--tag-warn-fg); font-size: 15px; line-height: 1; cursor: pointer;
}
.hol-hours .hol-reset:hover { background: var(--chip); }
.hol-hours .hol-reset[hidden] { display: none; }
.hol-hours .hol-note { flex: 1 1 100%; margin: 0; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .hol-hours .fld-sm.hol-wide { flex-basis: 100%; }
  .hol-hours .fld-sm input, .hol-hours .fld-sm select { height: 40px; font-size: 16px; }
  .hol-hours .btn-sm { flex: 1 1 100%; height: 40px; }
}

/* Palgad (salaries.php + salary-edit.php) */
.sal-uncalc { color: var(--tag-bad-fg); }
/* the employee's name is the way into their salary row, so it reads as text
   until pointed at; the colour is left to the name itself, which turns red
   while the row is still uncalculated */
.sal-name { color: inherit; text-decoration: none; }
.sal-name:hover strong { color: var(--accent); text-decoration: underline; }
.sal-name:hover .sal-uncalc { color: var(--tag-bad-fg); }
.sal-search { width: 230px; font: inherit; font-size: 13px; }
.sal-num { width: 100%; max-width: 150px; height: 30px; border: 1px solid var(--fline); border-radius: 8px;
  padding: 0 8px; background: var(--field); color: var(--ink); font: inherit; font-size: 13px;
  text-align: right; outline: none; justify-self: end; }
.sal-num:focus { border-color: var(--accent); }
.sal-r { text-align: right; }
.trow.sal-strong { font-weight: 800; color: var(--ink); }

/* ---------- Töötajad → Graafik (emp-schedule.php) ---------- */
.eg-tabs { margin-left: 0; }
.eg-histon { border-color: var(--accent); color: var(--accent); }
.eg-grid .thead, .eg-grid .trow {
  grid-template-columns: 150px repeat(var(--eg-n, 7), minmax(104px, 1fr));
  gap: 0; padding: 0;
  /* stretch, not center: a short sticky day cell would leave gaps above and
     below it where the scrolled columns shine through */
  align-items: stretch;
}
.eg-grid .thead > div, .eg-grid .trow > div { padding: 8px 8px; border-left: 1px solid var(--line2); min-width: 0; }
.eg-grid .thead > div:first-child, .eg-grid .trow > div:first-child { border-left: 0; }
.eg-c { text-align: center; }
/* day column stays put while the cabinets scroll; translateZ forces its own
   compositing layer so Safari doesn't paint scrolled cells over it */
.eg-grid .thead > :first-child, .eg-grid .trow > :first-child {
  position: sticky; left: 0; z-index: 3; background: var(--card);
  transform: translateZ(0);
}
.eg-grid .thead > :first-child { background: var(--thead); }
.eg-day { display: flex; align-items: center; gap: 8px; }
.eg-date { font-size: 12.5px; font-weight: 700; color: var(--cell); white-space: nowrap; }
.eg-dow { font-size: 11.5px; font-weight: 800; color: var(--muted); }
/* weekends carry their own row colour; the sticky day cell layers the tint
   over the solid card colour, because the dark-theme tints are translucent */
.trow.eg-sat { background: var(--tag-warn-bg); }
.trow.eg-sun { background: var(--tag-bad-bg); }
.trow.eg-sat > :first-child { background: linear-gradient(var(--tag-warn-bg), var(--tag-warn-bg)) var(--card); }
.trow.eg-sun > :first-child { background: linear-gradient(var(--tag-bad-bg), var(--tag-bad-bg)) var(--card); }
.trow.eg-sat .eg-dow, .trow.eg-sat .eg-date { color: var(--tag-warn-fg); }
.trow.eg-sun .eg-dow, .trow.eg-sun .eg-date { color: var(--tag-bad-fg); }
.trow.eg-row.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
/* z-index:0 keeps each cell (and its absolute red dot) in its own stacking
   context below the sticky day column */
.eg-cell { position: relative; z-index: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.eg-pick, .eg-pos {
  display: block; width: 100%; min-height: 22px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--cell); font: inherit; font-size: 12px; font-weight: 600;
  text-align: left; padding: 2px 5px; line-height: 1.25; overflow-wrap: anywhere;
}
.eg-pick { cursor: pointer; }
.eg-pick:hover { border-color: var(--fline); background: var(--field); }
.eg-pick.empty, .eg-pos.empty { color: var(--muted); }
.eg-pick.miss, .eg-pos.miss { color: var(--tag-bad-fg); font-weight: 800; }
/* scheduled while on vacation / sick leave that day */
.eg-pick.onvac, .eg-pos.onvac { background: #e02424; color: #fff; }
.eg-pick.onvac:hover { background: #c51f1f; border-color: transparent; }
/* The same person standing in two rooms that day. Amber, and an underline
   rather than a fill, so it still reads on a cell that is already red for
   someone scheduled through their holiday. The count rides after the name. */
.eg-pick.eg-dup, .eg-pos.eg-dup { box-shadow: inset 0 -2px 0 var(--tag-warn-fg); }
.eg-pick.eg-dup::after, .eg-pos.eg-dup::after {
  content: ' ×' attr(data-dup); font-size: 10px; font-weight: 800; color: var(--tag-warn-fg);
}
.eg-pick.onvac.eg-dup::after, .eg-pos.onvac.eg-dup::after { color: #ffe08a; }

/* the legacy red badge: this cell was changed after the month was confirmed */
.eg-dot {
  position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%;
  background: #e02424; border: 2.5px solid #fff; box-sizing: content-box; box-shadow: 0 0 0 1px #e02424;
  cursor: pointer;
}
/* drawer entries for one cell's change history */
.eg-hitem { padding: 8px 6px; border-top: 1px solid var(--line2); font-size: 12.5px; }
.eg-hitem:first-child { border-top: 0; }

/* Statistika → Visiidid: the years-and-clinics table */
.trow.sv-yon { background: var(--thead); }
.sv-up { color: var(--tag-good-fg); font-weight: 800; }
.sv-down { color: var(--tag-bad-fg); font-weight: 800; }
/* Figures in the statistics tables line up by place value, like the money
   columns elsewhere (.ka-num, .sal-r): centred numbers of different widths read
   as ragged, and tabular figures stop the digits shifting between rows. The
   header sits over its own column, so it follows the numbers across. */
.st-tbl .hr-c { text-align: right; font-variant-numeric: tabular-nums; }
.st-tbl .thead .hr-c { text-align: right; }
/* a bar chart cell is a control, not a figure — keep it filling its column */
.st-tbl .eg-kbar { text-align: left; }
/* Statistics filters: Select2 copies the bare <select>'s width, which left the
   year at 78px and clipped its own label ("20…", "Kõik kliinik…"). min-width
   beats the inline width Select2 writes, so the value is readable and the two
   controls line up; they still shrink on a narrow screen. */
.st-bar .select2-container { min-width: 160px; }
.st-bar select.hr-emp { min-width: 160px; max-width: none; }
/* a doctor picker holds names like "Kuznetsova, Jekaterina", so it needs far
   more room than a year or a clinic. Select2 puts its container immediately
   after the select it replaces, which is what this reaches. */
.st-bar select[name="d"],
.st-bar select[name="d"] + .select2-container { min-width: 250px; }
/* on a narrow screen the controls wrap rather than shrink into ellipses */
.st-bar form { flex-wrap: wrap; }
.eg-hmeta { font-size: 11px; font-weight: 700; color: var(--muted); }
.eg-hact { font-weight: 800; color: var(--ink); margin: 2px 0; }
.eg-hval { color: var(--cell); font-weight: 600; }
.eg-cell.editing { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.eg-cell.saved { outline: 2px solid var(--tag-good-fg); outline-offset: -2px; border-radius: 6px; }
.trow.eg-hlock { background: var(--thead); font-weight: 700; }
/* public holiday marker in the day column */
.eg-hol { font-size: 10px; color: var(--tag-bad-fg); }
/* Koormus view: group header rows + the percentage bar */
.trow.eg-kgrp { background: var(--thead); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.eg-krate { font-size: 11px; font-weight: 800; color: var(--muted); margin-left: 6px; }
/* a norm lowered by vacation hours — the tooltip says by how much */
.eg-kvac { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
/* the number sits beside the track, never on top of the fill, so it stays
   readable at every percentage */
.eg-kbar { display: flex; align-items: center; gap: 9px; }
.eg-ktrack { flex: 1; min-width: 40px; height: 9px; border-radius: 999px;
  background: var(--btn2bg); overflow: hidden; }
.eg-kfill { display: block; height: 100%; border-radius: 999px; }
.eg-kpct { flex: 0 0 auto; width: 42px; text-align: right; font-size: 12px; font-weight: 800; }
.eg-kbar.zero .eg-kfill { background: var(--tag-muted-fg); opacity: .4; }
.eg-kbar.zero .eg-kpct { color: var(--muted); }
.eg-kbar.low .eg-kfill { background: #4a9fd4; }
.eg-kbar.low .eg-kpct { color: #2b7cb0; }
.eg-kbar.ok .eg-kfill { background: var(--tag-good-fg); }
.eg-kbar.ok .eg-kpct { color: var(--tag-good-fg); }
.eg-kbar.over .eg-kfill { background: #d9534f; }
.eg-kbar.over .eg-kpct { color: #d9534f; }

/* Kokkuvõte: full-screen attendance summary modal */
.eg-tabs .eg-kvbtn { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
/* confirm/reopen controls in the page header, right after the title */
.dash-head:has(.eg-lockhead) .titles { flex: 0 0 auto; }
.eg-lockhead { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-wrap: wrap; }
.eg-lockhead .sc-lockbtn { display: inline-flex; align-items: center; gap: 6px; }
.eg-kv-back { position: fixed; inset: 0; z-index: 220; background: rgba(8, 20, 35, .45); padding: 16px; display: flex; }
.eg-kv-modal { flex: 1; min-width: 0; background: var(--card); border-radius: 16px; box-shadow: var(--cardsh);
  display: flex; flex-direction: column; overflow: hidden; }
.eg-kv-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--line2); }
.eg-kv-ttl { font-size: 15px; font-weight: 800; color: var(--ink); }
.eg-kv-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.eg-kv { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; color: var(--cell); }
.eg-kv th, .eg-kv td { border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 5px 8px; }
/* header sticks to the top, name + row label + total stick to the left */
.eg-kv thead th { position: sticky; top: 0; z-index: 3; background: var(--accent); color: #fff;
  font-weight: 800; text-align: center; line-height: 1.2; }
.eg-kv thead th.sat .kv-dn, .eg-kv thead th.sat .kv-dw { color: #ffd66b; }
.eg-kv thead th.sun .kv-dn, .eg-kv thead th.sun .kv-dw { color: #ffb1b1; }
.kv-dn { display: block; font-weight: 800; }
.kv-dw { display: block; font-size: 10.5px; opacity: .9; }
.eg-kv .kv-name { position: sticky; left: 0; z-index: 2; background: var(--card);
  width: 190px; min-width: 190px; max-width: 190px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.eg-kv thead .kv-name { z-index: 4; background: var(--accent); color: #fff; text-align: left; }
.eg-kv .kv-lbl { position: sticky; left: 190px; z-index: 2; background: var(--card);
  width: 108px; min-width: 108px; max-width: 108px; text-align: right; font-weight: 800; color: var(--kvc, var(--cell)); }
.eg-kv .kv-total { position: sticky; left: 298px; z-index: 2; background: var(--card);
  width: 64px; min-width: 64px; text-align: right; font-weight: 800; color: var(--kvc, var(--cell)); }
/* z-index too: `.eg-kv .kv-total` (two classes) outranks `.eg-kv thead th`, so
   without this the day headers scroll over the frozen KOKKU header */
.eg-kv thead .kv-total { background: var(--accent); color: #fff; text-align: center; z-index: 4; }
.eg-kv td.kv-d { text-align: center; min-width: 36px; padding: 4px; }
.eg-kv td.kv-d.sat { background: var(--tag-warn-bg); }
.eg-kv td.kv-d.sun { background: var(--tag-bad-bg); }
/* per-row colour: the label, the count and the bullseye dot all share it */
tr.kv-tunnid { --kvc: #1274d6; }
tr.kv-ass { --kvc: #21a06a; }
tr.kv-reg { --kvc: #7a1fd6; }
tr.kv-puhk { --kvc: #d9302c; }
.kv-dot { display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: middle;
  background: var(--kvc); box-shadow: inset 0 0 0 2px var(--kvc), inset 0 0 0 5px var(--card); }
/* a stronger line separates one employee's row group from the next */
.eg-kv tr.kv-first th, .eg-kv tr.kv-first td { border-top: 2px solid var(--line); }
.eg-kv .kv-empty { padding: 26px 18px; color: var(--muted); }
.eg-kv-note { padding: 10px 20px; font-size: 12px; color: var(--muted); }
/* Half-filled rooms: the gaps the grid shows as a red "???", listed for a month.
   The count rides the button as the same red pill the sidebar uses. */
.eg-badge {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  background: #e94f5e; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.45;
}
.eg-kvbtn .eg-badge { vertical-align: 1px; }
.eg-halfmodal { max-width: 720px; margin: 0 auto; align-self: flex-start; max-height: 100%; }
.eg-halfrow { font-size: 13px; }
.eg-halfrow[onclick] { cursor: pointer; }
.eg-halfrow[onclick]:hover { background: var(--rowhov); }
.trow.eg-halfoff { background: var(--tag-bad-bg); }
.eg-halfdow { color: var(--muted); font-weight: 700; margin-left: 6px; }
.eg-halfrole { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-right: 6px; }
.eg-halfmiss { color: var(--cell); font-weight: 700; }
.eg-halfrow.eg-k-half .eg-halfmiss { color: var(--tag-bad-fg); font-weight: 800; }
/* the kind of problem, colour-coded the way the grid marks the same cell */
.eg-kind { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
  background: var(--tag-muted-bg, var(--chip)); color: var(--chipfg); }
.eg-k-half .eg-kind, .eg-kind.eg-k-half { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.eg-k-vacation .eg-kind, .eg-kind.eg-k-vacation { background: var(--tag-warn-bg); color: var(--tag-warn-fg); }
.eg-k-double .eg-kind, .eg-kind.eg-k-double { background: #f4e2c4; color: #8a4b12; }
.eg-halfsum { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.eg-halfsum b { font-weight: 800; }
@media (max-width: 760px) {
  .eg-kv-back { padding: 0; }
  .eg-kv-modal { border-radius: 0; }
  .eg-kv .kv-name { width: 120px; min-width: 120px; max-width: 120px; }
  .eg-kv .kv-lbl { left: 120px; width: 86px; min-width: 86px; max-width: 86px; }
  .eg-kv .kv-total { left: 206px; }
}
@media (max-width: 760px) {
  .eg-grid .thead, .eg-grid .trow { grid-template-columns: 96px repeat(var(--eg-n, 7), minmax(92px, 1fr)); }
  .eg-date { font-size: 11px; }
}

/* Test review: one card per question, the correct option and the person's pick marked */
.ts-review { display: grid; gap: 12px; }
.ts-rq { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 12px 14px; }
.ts-rq.ok { border-left-color: #2e9e5b; }
.ts-rq.bad { border-left-color: #c0392b; }
.ts-rq.skip { border-left-color: var(--muted); }
.ts-rq-h { display: flex; gap: 9px; font-weight: 800; font-size: 13.5px; margin-bottom: 8px; }
.ts-rq-n { flex: none; min-width: 22px; color: var(--muted); }
.ts-ro { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0 3px 31px; color: var(--muted); }
.ts-ro.right { color: var(--ink); font-weight: 700; }
.ts-ro.wrong { color: var(--ink); }
.ts-ro-m { flex: none; }
.ts-qimg { display: block; max-width: 340px; max-height: 220px; border: 1px solid var(--line); border-radius: 10px; margin: 4px 0 8px; }

/* ---------- Töökeskkond → Steriliseerimine (sterilization.php) ---------- */
/* The tab strip is a row of its own under the toolbar, and it is sticky: a
   sticky element can only travel inside its own parent, so pinning it while the
   log scrolls means living at card level rather than inside the toolbar row. */
.lg-bar {
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 30;
  padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--line2);
}
.lg-tabs { margin-left: 0; }
.ster-bang { color: var(--tag-bad-fg); font-weight: 800; margin-right: 3px; }
.lg-addbtn { margin-left: auto; }
.lg-addbtn .lg-plus { font-weight: 800; }
.lg-bar .lbl-short { display: none; }

/* Roster: a month grid with four shift slots in every day cell */
.table-scroll > .ster-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 960px; }
.ster-dow {
  padding: 9px 10px; background: var(--thead); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.ster-dow.off { color: var(--tag-bad-fg); }
.ster-day {
  position: relative; min-height: 118px; padding: 7px 7px 9px;
  border-bottom: 1px solid var(--line2); border-left: 1px solid var(--line2);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.ster-slots { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ster-day:nth-child(7n + 1) { border-left: 0; }
.ster-day.off { background: var(--tag-bad-bg); }
.ster-day.blank { background: var(--thead); }
.ster-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.ster-dnum { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
/* the weekday letter only earns its place in the mobile day list */
.ster-dwk { display: none; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.ster-dnum .n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--line); font-size: 12px; font-weight: 800; color: var(--cell);
}
.ster-day.off .ster-dnum .n { border-color: var(--tag-bad-fg); color: var(--tag-bad-fg); }
.ster-day.is-today .ster-dnum .n { background: var(--accent); border-color: transparent; color: #fff; }
.ster-hol { font-size: 10px; color: var(--tag-bad-fg); }
.ster-chip {
  display: block; width: 100%; min-height: 24px; border: 1px solid transparent; border-radius: 7px;
  padding: 3px 7px; font: inherit; font-size: 12px; font-weight: 700; line-height: 1.35;
  text-align: left; color: var(--cell); background: transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ster-chip b { font-weight: 800; opacity: .8; }
button.ster-chip { cursor: pointer; }
.ster-chip.empty { background: transparent; color: var(--muted); border-style: dashed; border-color: transparent; }
/* an empty slot only shows its number while it is being aimed at, so a
   free day reads as free instead of as four faint placeholders */
.ster-chip.empty b { opacity: 0; }
button.ster-chip.empty:hover { border-color: var(--fline); background: var(--field); }
button.ster-chip.empty:hover b, button.ster-chip.empty:focus b, .ster-chip.empty.editing b { opacity: .75; }
button.ster-chip:hover { filter: brightness(1.06); }
.ster-chip.editing { outline: 2px solid var(--accent); outline-offset: 1px; }
.ster-chip.saved { outline: 2px solid var(--tag-good-fg); outline-offset: 1px; }
.ster-swatch { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; margin-left: auto; }
/* who worked how many shifts this month */
.ster-leg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
.ster-legttl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ster-legitem { border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; }
.ster-legitem b { font-weight: 800; opacity: .85; margin-left: 3px; }

/* The signed-in person's own shifts. The chips are already coloured per
   employee, so "mine" cannot be another colour — it is a ring in the ink
   colour (readable on every chip and in both themes) plus an accent bar down
   the day, which makes the month scannable for "my days" at a glance. */
.ster-chip.mine, .ster-legitem.mine { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--ink); font-weight: 800; }
/* Own shifts in focus: when this reader works the shown period their chips stay
   solid and everyone else fades back. `.ster-nofocus` hands control to the
   legend filter while that is active. */
.ster-focus:not(.ster-nofocus) .ster-chip:not(.mine):not(.empty),
.ster-focus:not(.ster-nofocus) .stw-chip:not(.mine):not(.empty) { opacity: .32; }
.ster-focus:not(.ster-nofocus) .ster-chip.mine,
.ster-focus:not(.ster-nofocus) .stw-chip.mine { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
/* the initials badge only ever shows in the phone calendar */
.ster-chip .ini { display: none; }
.ster-calsw { display: none; }
.ster-day.has-me::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.ster-day.has-me .ster-dnum .n { border-color: var(--accent); color: var(--accent); }
.ster-day.has-me.is-today .ster-dnum .n { color: #fff; }
/* count + next shift, next to the tabs */
.ster-me {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--navabg); color: var(--navafg); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 800;
}
.ster-me b { font-weight: 800; opacity: .75; }

/* Log tables */
.lg-c { text-align: center; }
.ster-nodev { color: var(--muted); }
.ster-dw { font-size: 11.5px; font-weight: 800; color: var(--muted); margin-left: 4px; }
.ster-ok { color: var(--tag-good-fg); font-weight: 800; }
.ster-none { color: var(--muted); }
.trow.ster-off { background: var(--tag-bad-bg); }
.lg-missing { color: var(--tag-warn-fg); font-weight: 800; text-align: center; }
/* today's three checks, above the month log */
.ster-todo { padding: 16px 20px; border-bottom: 1px solid var(--line2); }
.ster-todottl { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.ster-todolist { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ster-todoitem {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--field);
  display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
}
.ster-todoitem.done { border-color: var(--tag-good-fg); background: var(--tag-good-bg); }
.ster-todoitem .lbl { font-size: 13px; font-weight: 800; color: var(--ink); }
.ster-todoitem .who { font-size: 12.5px; font-weight: 700; color: var(--tag-good-fg); }
.lg-modal { width: min(760px, 94vw); }
.ster-chks { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }

/* a laptop/landscape tablet keeps the month grid, tightened so the whole week
   fits instead of hiding Saturday and Sunday behind a scrollbar */
@media (max-width: 1100px) {
  .table-scroll > .ster-cal { min-width: 700px; }
  .ster-day { min-height: 100px; padding: 6px 6px 8px; }
  .ster-chip { font-size: 11px; padding: 3px 5px; }
}
/* Under this width seven columns stop being readable, so the month becomes a
   day list: one row per day, the empty leading/trailing cells dropped, the
   weekday letter moved next to the date. */
@media (max-width: 900px) {
  .table-scroll > .ster-cal { display: block; min-width: 0; }
  .ster-dow { display: none; }
  .ster-day.blank { display: none; }
  .ster-day {
    flex-direction: row; align-items: flex-start; gap: 12px;
    min-height: 0; padding: 9px 14px 10px; border-left: 0;
  }
  .ster-dnum { flex: 0 0 56px; margin-bottom: 0; padding-top: 1px; }
  .ster-dwk { display: inline; }
  .ster-slots { flex: 1 1 auto; }
  .ster-chip { font-size: 12.5px; white-space: normal; }
  /* a viewer gains nothing from blank slots; an admin still needs them to tap,
     and touch has no hover to reveal the slot number with */
  span.ster-chip.empty { display: none; }
  button.ster-chip.empty { border-color: var(--fline); }
  button.ster-chip.empty b { opacity: .5; }
  .ster-leg { padding: 12px 14px; }
  .ster-todo { padding: 14px; }
  .ster-me { padding: 4px 10px; font-size: 12px; }

  /* A long week label ("7.–13. September 2026") squeezed the Nädal/Kuu pill
     below its content width, and the pill clips, so "Kuu" was half cut off and
     hard to tap. Let the row wrap and keep the pill at its natural size. */
  .sc-nav { flex-wrap: wrap; }
  .ster-modesw { flex: 0 0 auto; }

  /* the list⇄calendar switch is a phone-only affordance */
  .ster-calsw { display: inline-flex; align-items: center; }
  .ster-calsw .ster-calsw-on { display: none; }
  .ster-calsw.on .ster-calsw-on { display: inline; }
  .ster-calsw.on .ster-calsw-off { display: none; }
  .ster-calsw.on { border-color: var(--accent); color: var(--accent); }

  /* Calendar mode: the seven columns come back, and a chip shrinks to an
     initials badge — the only way a whole week fits a phone screen. */
  .table-scroll > .ster-cal.ster-mcal {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0;
  }
  .ster-cal.ster-mcal .ster-dow { display: block; padding: 6px 0; text-align: center; font-size: 10px; }
  .ster-cal.ster-mcal .ster-day.blank { display: block; }
  .ster-cal.ster-mcal .ster-day {
    flex-direction: column; gap: 3px; min-height: 62px; padding: 4px 1px 6px;
    border-left: 1px solid var(--line2);
  }
  .ster-cal.ster-mcal .ster-dnum { flex: none; margin-bottom: 1px; text-align: center; font-size: 11px; }
  .ster-cal.ster-mcal .ster-dwk { display: none; }
  /* one badge per row, so a slot always sits at the same height across the
     week and the four shifts read as a column */
  /* stretch to the cell: the day is a column flex with align-items:flex-start,
     so without this the list shrink-wraps to one badge and the highlight ring
     of a `mine` chip is clipped by the cell edge */
  .ster-cal.ster-mcal .ster-slots { flex: none; align-self: stretch; width: 100%;
    display: flex; flex-direction: column; gap: 2px; align-items: center; }
  .ster-cal.ster-mcal .ster-chip {
    /* min-height on the base chip would otherwise beat height and oval it */
    padding: 0; width: 20px; height: 20px; min-height: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 800; line-height: 1; white-space: nowrap; border: 0;
  }
  .ster-cal.ster-mcal .ster-chip b, .ster-cal.ster-mcal .ster-chip .nm { display: none; }
  .ster-cal.ster-mcal .ster-chip .ini { display: block; }
  /* an empty slot is a small dashed dot an admin can still tap */
  .ster-cal.ster-mcal span.ster-chip.empty { display: none; }
  .ster-cal.ster-mcal button.ster-chip.empty { width: 20px; height: 20px; min-height: 0; border: 1px dashed var(--fline); }
  .ster-cal.ster-mcal .ster-chip.mine { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--ink); }
}

/* ---------- Shared log/list system (.lg-*), used by the Töökeskkond pages ----------
   A .lg-tbl grid is a table on a wide screen and a stack of cards on a phone
   (.lg-cards), with .lg-bar as its sticky tab strip and .lg-form/.lg-modal as
   the entry sheet. Cells carry data-l so the card layout can label them.

   Sticky column headers: .table-scroll is the scrollport (overflow-x makes it
   one on both axes), so the header can only stick inside it — the table gets a
   capped height and scrolls in place, which is also what keeps the toolbar and
   the tabs on screen while a long log is read. */
.lg-scroll { max-height: calc(100vh - 232px); overflow: auto; }
.lg-scroll .thead, .lg-scroll .ster-dow { position: sticky; top: 0; z-index: 4; }
.lg-scroll .thead { box-shadow: 0 1px 0 var(--line); }
.lg-scroll .ster-dow { box-shadow: inset 0 -1px 0 var(--line); }
.table-scroll > .lg-tbl { min-width: var(--minw, 640px); }
/* the summary badge is a phone-card affordance; the table has real columns */
.lg-sum { display: none; }
.lg-rowbtn { display: none; }

/* One row of an entry form: the result pills, big enough to hit with a thumb */
.lg-form { display: flex; flex-direction: column; gap: 12px; }
.lg-frow { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.lg-frow .fld-sm { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; }
.lg-frow .fld-sm > span, .lg-fnote > span, .lg-picklbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.lg-frow .fld-sm input, .lg-frow .fld-sm select {
  height: 44px; border: 1px solid var(--fline); border-radius: 10px; padding: 0 12px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--field); outline: none;
}
.lg-frow .fld-sm input:focus, .lg-frow .fld-sm select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.lg-allok { height: 44px; flex: 0 0 auto; }
.lg-allok.done { background: var(--tag-good-bg); color: var(--tag-good-fg); border-color: transparent; }
.lg-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line2); padding-top: 10px; }
.lg-picklbl { flex: 1 1 150px; min-width: 0; text-transform: none; font-size: 13px; color: var(--ink); }
.lg-picklbl i { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
/* a machine this clinic does not have stays on '-', so it is dimmed rather
   than removed — the six slots of the legacy row have to be filled anyway */
.lg-pick[data-present="0"] { opacity: .5; }
.lg-pills { display: flex; gap: 6px; flex: 0 0 auto; }
.lg-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-pill span {
  display: block; min-width: 46px; padding: 10px 12px; border: 1px solid var(--fline); border-radius: 10px;
  background: var(--field); color: var(--cell); font-size: 13.5px; font-weight: 800; text-align: center; cursor: pointer;
}
.lg-pill input:checked + span { background: var(--btng); border-color: transparent; color: #fff; }
.lg-pill.na input:checked + span { background: var(--tag-muted-fg); }
.lg-pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus); }
/* maintenance: a labelled switch per part, one tap each */
.lg-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--ink); background: var(--field);
}
.lg-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-switch { flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px; background: var(--chip); position: relative; transition: background .15s; }
.lg-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.lg-toggle input:checked ~ .lg-switch { background: var(--tag-good-fg); }
.lg-toggle input:checked ~ .lg-switch::after { transform: translateX(20px); }
/* A full-width field holds an input or a select as often as a textarea — the
   name of an instruction, a whole-row note, an employee picker — so all three
   are dressed the same as the fields inside .lg-frow. */
.lg-fnote { display: flex; flex-direction: column; gap: 4px; }
.lg-fnote textarea, .lg-fnote input, .lg-fnote select {
  border: 1px solid var(--fline); border-radius: 10px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--field); outline: none;
}
.lg-fnote textarea { padding: 10px 12px; resize: vertical; }
.lg-fnote input, .lg-fnote select { height: 44px; padding: 0 12px; }
.lg-fnote input[type=file] { padding: 9px 12px; font-size: 13px; }
.lg-fnote textarea:focus, .lg-fnote input:focus, .lg-fnote select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus);
}
.lg-mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lg-mhead .modal-close { position: static; float: none; margin: 0; }
.lg-mfoot { display: flex; justify-content: flex-end; padding-top: 4px; }
.lg-mfoot .btn-sm { height: 46px; padding: 0 26px; font-size: 14px; }
/* tick every remaining daily check in one go */
.ster-allform { margin-top: 12px; }
.ster-allbtn { width: 100%; max-width: 280px; height: 46px; justify-content: center; }

@media (max-width: 900px) {
  /* Phones fill these logs in, so a row becomes a card: what it is on top, the
     results as labelled chips two to a row, who and when in a muted footer. */
  .lg-scroll { max-height: none; min-height: 0; overflow: visible; }
  /* The shift plan is a wide grid rather than a card list, so it keeps its own
     sideways scroll here — without this the month spills out of the card and the
     whole page scrolls sideways. Its header stops sticking on a phone, the same
     bargain every other .lg-scroll table makes. */
  .eg-scroll { overflow-x: auto; }
  .lg-cards .thead { display: none; }
  .table-scroll > .lg-tbl { min-width: 0; }
  .lg-cards .trow {
    display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start;
    border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 14px;
    margin: 10px 12px; padding: 12px 14px; background: var(--card);
  }
  .lg-cards .trow:hover { background: var(--card); }
  .lg-cards .trow > div { white-space: normal; overflow: visible; text-overflow: clip; }
  /* zero-height full-width item = a forced line break, so the card always reads
     "what it is + how it went" on the first line and the results below */
  .lg-cards .trow::before { content: ''; order: -1; flex: 1 0 100%; height: 0; margin-bottom: -10px; }
  .lg-cards .trow > .lg-t1 {
    flex: 0 1 auto; order: -3; font-size: 15.5px; font-weight: 800; color: var(--ink);
  }
  .lg-cards .trow > .lg-t2 { flex: 1 1 100%; font-size: 13.5px; font-weight: 700; color: var(--sub); }
  .lg-cards .trow > .lg-sum { display: inline-block; order: -2; margin-left: auto; }
  /* label over value, so two machines fit side by side without the name being
     cut — a full-width row per machine would push the footer off the screen */
  .lg-cards .trow > .lg-c {
    flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: var(--field); border-radius: 10px; padding: 9px 8px; text-align: center;
  }
  .lg-cards .trow > .lg-c::before {
    content: attr(data-l); font-size: 11px; font-weight: 800; line-height: 1.25; color: var(--muted);
  }
  .lg-cards .trow > .lg-f {
    flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    border-top: 1px solid var(--line2); padding-top: 8px;
  }
  .lg-cards .trow > .lg-f::before {
    content: attr(data-l); flex: 0 0 auto; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  }
  .lg-cards .trow > .lg-note { flex: 1 1 100%; font-size: 13.5px; color: var(--cell); }
  .lg-cards .trow > .lg-note::before {
    content: attr(data-l) ': '; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  }
  .lg-cards .trow > .lg-meta { flex: 0 1 auto; font-size: 12px; font-weight: 700; color: var(--muted); }
  .lg-cards .trow > .lg-meta + .lg-meta::before { content: '· '; }
  .lg-cards .trow > div:empty { display: none; }
  .lg-cards .trow > .lg-missing { flex: 1 1 100%; text-align: left; }
  .lg-cards .trow > .lg-rowbtn { display: block; flex: 1 1 100%; }
  .lg-cards .trow > .lg-rowbtn .btn-sm { width: 100%; height: 42px; justify-content: center; }
  .lg-cards .trow.ster-off { background: var(--tag-bad-bg); }
  .lg-cards .cal-empty { padding: 22px 14px; }
  /* the entry sheet fills the screen: nothing to pinch, the save button in reach */
  .lg-modal {
    top: 0; left: 0; transform: none; width: 100%; height: 100%;
    max-height: 100%; border: 0; border-radius: 0; padding: 16px 14px 0;
    display: flex; flex-direction: column;
  }
  .lg-mhead { flex: 0 0 auto; }
  .lg-form { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 3px 8px; }
  /* the column direction turns the label's flex-basis into a height, so it has
     to be reset here or every picker grows to 150px tall */
  .lg-pick { flex-direction: column; align-items: stretch; gap: 8px; }
  .lg-picklbl { flex: 0 0 auto; }
  .lg-pills { justify-content: space-between; }
  .lg-pill { flex: 1 1 0; }
  .lg-pill span { min-width: 0; padding: 12px 6px; }
  .lg-frow .fld-sm { flex: 1 1 100%; }
  .lg-allok { width: 100%; }
  .lg-mfoot {
    position: sticky; bottom: 0; flex: 0 0 auto; margin: 0 -14px; padding: 10px 14px 14px;
    background: var(--card); border-top: 1px solid var(--line2);
  }
  .lg-mfoot .btn-sm { width: 100%; }
  /* the toolbar's own rows scroll away; this pair stays pinned, and the tabs
     wrap onto a second line rather than scrolling — that is what kept
     "Hooldus" hidden behind the edge of the strip */
  .lg-bar { gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
  .lg-bar .lg-tabs { order: 0; flex: 1 1 auto; min-width: 0; width: auto; flex-wrap: wrap; overflow: visible; }
  .lg-bar .sc-clinicbtn { flex: 0 0 auto; text-align: center; padding: 8px 9px; }
  /* short tab names, so all five fit */
  .lg-bar .lbl-full { display: none; }
  .lg-bar .lbl-short { display: inline; }
  .lg-addbtn {
    order: 1; flex: 0 0 auto; width: 44px; height: 44px; margin-left: 0; padding: 0;
    justify-content: center; font-size: 24px; line-height: 1;
  }
  .lg-addbtn .lbl-full, .lg-addbtn .lbl-short { display: none; }
  .ster-allbtn { max-width: none; }
  /* sticky needs an unclipped path to the page scroller (this page's card only —
     the reception and staff planners rely on their card clipping) */
  .lg-card { overflow: visible; }
  .ster-todoitem form { width: 100%; }
  .ster-todoitem .btn-sm { width: 100%; height: 44px; justify-content: center; }
}

/* ---------- Töökeskkond → Rikked (faults.php) ---------- */
.rk-search { flex: 1 1 220px; min-width: 0; }
.rk-search input[type=search] { width: 100%; }
/* the fault text is the point of the row: three lines on a table, all of it on a
   card (the > is needed — the base `.trow > div` rule would otherwise win) */
.trow > .lg-body {
  white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.lg-top .trow { align-items: start; }
/* cells that only exist for the phone card layout */
.trow > .lg-cardonly { display: none; }
.lg-st .tag { white-space: nowrap; }
/* room / person chips: checkboxes as tap targets */
/* in the column-flex sheet a flex-basis would become a height (see .lg-picklbl) */
.rk-lbl { flex: 0 0 auto; margin-top: 2px; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.rk-chip span {
  display: block; min-width: 42px; padding: 9px 10px; border: 1px solid var(--fline); border-radius: 10px;
  background: var(--field); color: var(--cell); font-size: 13px; font-weight: 700; text-align: center; cursor: pointer;
}
.rk-chip.wide span { min-width: 0; }
.rk-chip input:checked + span { background: var(--btng); border-color: transparent; color: #fff; }
.rk-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus); }
/* device pickers open the search drawer instead of a 400-option select */
.lg-pickfld { min-width: 0; }
.lg-pickbtn {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 44px;
  border: 1px solid var(--fline); border-radius: 10px; padding: 0 10px 0 12px;
  background: var(--field); color: var(--muted); font: inherit; font-size: 14px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.lg-pickbtn .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-pickbtn.set, .lg-pickfld input[value]:not([value="0"]) + .lg-pickbtn { color: var(--ink); }
.lg-pickbtn .x { flex: 0 0 auto; color: var(--muted); font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.lg-pickbtn .x:hover { background: var(--chip); color: var(--tag-bad-fg); }
.lg-pickmeta { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.rk-foot { gap: 10px; flex-wrap: wrap; }
.rk-foot .rk-del { background: var(--tag-bad-bg); color: var(--tag-bad-fg); box-shadow: none; margin-left: auto; }
.rk-modal { width: min(680px, 96vw); }

@media (max-width: 900px) {
  .rk-search { flex: 1 1 100%; }
  .rk-modal { width: 100%; }
  /* the form sits in a holder (it is swapped out per row), so the holder is what
     scrolls — otherwise the save button ends up below the fold */
  .rk-modal #rk-formholder { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 3px; }
  .rk-modal .lg-form { overflow: visible; padding: 0; }
  .rk-foot { position: sticky; bottom: 0; margin: 0 -3px; padding: 10px 3px 14px; background: var(--card); border-top: 1px solid var(--line2); }
  /* save takes its own full-width row; archive and delete share the one below */
  .rk-foot .btn-sm { flex: 1 1 40%; height: 46px; justify-content: center; }
  .rk-foot button[type=submit]:first-child { flex: 1 1 100%; order: -1; }
  .rk-foot .rk-del { margin-left: 0; }
  .lg-cards .trow > .lg-body {
    flex: 1 1 100%; -webkit-line-clamp: unset; display: block; font-size: 14px; color: var(--cell); font-weight: 600;
  }
  .lg-cards .trow > .lg-cardonly { display: block; }
  .lg-cards .trow > .lg-st { display: none; }   /* the card header already carries it */
  .lg-cards .trow > .lg-c { flex: 1 1 28%; }
}

/* ---------- Töökeskkond → Kab. korrashoid (upkeep.php) ---------- */
.uk-cab { font-weight: 800; color: var(--ink); }
.uk-clean { color: var(--tag-good-fg); font-weight: 700; }
.trow.uk-stale { background: var(--tag-bad-bg); }
/* the running score of the round being filled in */
.uk-scorefld { flex: 0 0 auto; }
.uk-score {
  display: flex; align-items: baseline; gap: 8px; height: 44px; padding: 0 14px;
  border: 1px solid var(--fline); border-radius: 10px; background: var(--field);
}
.uk-score b { font-size: 19px; font-weight: 800; color: var(--ink); }
.uk-score span { font-size: 12px; font-weight: 700; color: var(--muted); }
.uk-score.good { border-color: var(--tag-good-fg); }
.uk-score.good b { color: var(--tag-good-fg); }
.uk-score.warn { border-color: var(--tag-warn-fg); }
.uk-score.warn b { color: var(--tag-warn-fg); }
.uk-score.bad { border-color: var(--tag-bad-fg); }
.uk-score.bad b { color: var(--tag-bad-fg); }
/* one switch per checklist line */
.uk-list { display: flex; flex-direction: column; gap: 8px; }
.uk-item span { font-size: 13.5px; line-height: 1.3; }
.uk-retired { font-size: 12px; font-weight: 700; color: var(--muted); }

@media (max-width: 900px) {
  .uk-scorefld { flex: 1 1 auto; }
  .uk-score { justify-content: center; }
  /* the room reads as part of the card's title line, not as a stat box */
  .lg-cards .trow > .uk-cab {
    flex: 0 0 auto; order: -3; flex-direction: row; align-items: baseline; gap: 4px;
    background: none; padding: 0; font-size: 15.5px;
  }
  .lg-cards .trow > .uk-cab::before { content: attr(data-l); font-size: 11.5px; font-weight: 800; color: var(--muted); }
}
/* round photos: thumbnails in the list, a strip with an add tile in the sheet */
.uk-thumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.uk-thumbs img { width: 34px; height: 34px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); display: block; }
.uk-thumbs a:hover img { filter: brightness(1.08); }
.uk-more { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.uk-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.uk-shot { position: relative; }
.uk-shot img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.uk-shotdel {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--card); background: var(--tag-bad-fg); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.uk-shotadd {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 84px; height: 84px; border: 1px dashed var(--fline); border-radius: 10px;
  background: var(--field); color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; cursor: pointer;
}
.uk-shotadd input { position: absolute; opacity: 0; width: 0; height: 0; }
.uk-shotadd .ic { font-size: 20px; }
.uk-shotadd.has { border-color: var(--accent); border-style: solid; color: var(--accent); }
@media (max-width: 900px) {
  .lg-cards .trow > .uk-thumbs { flex: 1 1 100%; }
  .lg-cards .trow > .uk-thumbs img { width: 64px; height: 64px; }
  .uk-shot img, .uk-shotadd { width: 96px; height: 96px; }
}
/* one room's history: the filter chip, the score trend and the sheet's past rounds */
.uk-hist { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line2); }
.uk-histchip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--navabg); color: var(--navafg);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 800;
}
.uk-histchip:hover { text-decoration: none; filter: brightness(.97); }
.uk-histttl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.uk-trend { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-left: auto; }
.uk-bar { display: flex; align-items: flex-end; width: 12px; height: 100%; background: var(--btn2bg); border-radius: 3px; overflow: hidden; }
.uk-bar i { display: block; width: 100%; border-radius: 3px; background: var(--tag-muted-fg); }
.uk-bar.good i { background: var(--tag-good-fg); }
.uk-bar.warn i { background: var(--tag-warn-fg); }
.uk-bar.bad i { background: var(--tag-bad-fg); }
.uk-past { border-top: 1px solid var(--line2); margin-top: 14px; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.uk-pastrow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card);
  font: inherit; font-size: 13px; color: var(--cell);
}
.uk-pastrow:hover { background: var(--rowhov); }
.uk-pastrow .d { font-weight: 800; color: var(--ink); flex: 0 0 auto; }
.uk-pastrow .m { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-pastrow .w { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.uk-pastnone { font-size: 13px; color: var(--muted); }
.uk-pastall { font-size: 12.5px; font-weight: 800; align-self: flex-start; }
@media (max-width: 900px) {
  .uk-hist { padding: 10px 14px; }
  .uk-trend { margin-left: 0; flex: 1 1 100%; }
  .uk-bar { flex: 1 1 auto; width: auto; }
  .uk-pastrow .w { display: none; }
}

/* ---------- Töökeskkond → POHAK (pohak.php) ---------- */
.pk-modal { width: min(760px, 96vw); }
.pk-sec {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
  border-top: 1px solid var(--line2); padding-top: 12px; margin-top: 4px;
}
.pk-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.lg-frow .pk-w2 { flex: 2 1 240px; }
.pk-reg { flex: 1 1 200px; }
/* the staff on a case, as removable chips */
.pk-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pk-person {
  display: inline-flex; align-items: center; gap: 6px; background: var(--chip); color: var(--chipfg);
  border-radius: 999px; padding: 6px 6px 6px 12px; font-size: 12.5px; font-weight: 700;
}
.pk-person button {
  border: 0; background: none; cursor: pointer; color: inherit; opacity: .6;
  font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 50%;
}
.pk-person button:hover { opacity: 1; color: var(--tag-bad-fg); }
.pk-addperson {
  border: 1px dashed var(--fline); border-radius: 999px; padding: 7px 14px; background: var(--field);
  color: var(--sub); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.pk-addperson:hover { border-color: var(--accent); color: var(--accent); }
.pk-meta { font-size: 12px; font-weight: 700; color: var(--muted); }

@media (max-width: 900px) {
  .pk-modal { width: 100%; }
  .pk-modal #pk-formholder { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 3px; }
  .pk-modal .lg-form { overflow: visible; padding: 0; }
  .lg-frow .pk-w2, .pk-reg { flex: 1 1 100%; }
}
/* the classifier picker: every option with the definition the register gives it */
.pk-drawer.wide { width: min(560px, 96vw); }
.pk-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px;
  background: var(--card); font: inherit; color: var(--cell);
}
.pk-opt:hover { background: var(--navabg); border-color: var(--accent); }
.pk-opt.on { background: var(--navabg); border-color: var(--accent); }
.pk-opt .t { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pk-opt .d { display: block; font-size: 12px; line-height: 1.4; color: var(--sub); margin-top: 4px; }
.pk-opt.none { color: var(--muted); font-weight: 700; border-style: dashed; }
.pk-drawer .sc-list { gap: 0; }
/* the classifier window: the register's own explanation, groups and marks */
.pk-intro { font-size: 12.5px; line-height: 1.5; color: var(--sub); padding: 0 2px 10px; }
.pk-grp {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  padding: 12px 2px 5px; position: sticky; top: 0; background: var(--card); z-index: 1;
}
.pk-opt .t i { font-style: normal; color: var(--tag-bad-fg); font-size: 10px; margin-left: 6px; vertical-align: 2px; }
.pk-opt.red .t { color: var(--tag-bad-fg); }
.pk-matrix { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 11.5px; }
.pk-matrix th, .pk-matrix td { border: 1px solid var(--line); padding: 4px 6px; text-align: center; }
.pk-matrix th { font-weight: 800; color: var(--sub); background: var(--thead); }
.pk-matrix th:first-child { text-align: right; }
.pk-matrix td.bad { background: var(--tag-bad-bg); color: var(--tag-bad-fg); font-weight: 800; }
.pk-matrix td.warn { background: var(--tag-warn-bg); color: var(--tag-warn-fg); font-weight: 800; }
.pk-matrix td.ok { background: var(--tag-good-bg); color: var(--tag-good-fg); font-weight: 800; }
/* foldable classifier groups: the heading slides its own items open */
.pk-grp.fold {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--line2); background: var(--card); font: inherit;
  font-size: 12.5px; font-weight: 800; color: var(--ink); padding: 11px 2px; text-transform: none; letter-spacing: 0;
}
.pk-grp.fold:hover { color: var(--accent); }
.pk-grp.fold .chev { flex: 0 0 auto; color: var(--muted); font-size: 15px; transition: transform .18s ease; }
.pk-grp.fold.open .chev { transform: rotate(90deg); }
.pk-grp.fold .gt { flex: 1 1 auto; min-width: 0; }
.pk-grp.fold .gn {
  flex: 0 0 auto; background: var(--chip); color: var(--chipfg); border-radius: 999px;
  padding: 2px 8px; font-size: 11px; font-weight: 800;
}
/* the slide itself: a grid row that grows from 0fr to its content height */
.pk-grpwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s ease; }
.pk-grpwrap > div { overflow: hidden; min-height: 0; }
.pk-grpwrap.open { grid-template-rows: 1fr; }
.pk-grpwrap.open > div { padding-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .pk-grpwrap { transition: none; } }

/* ---------- Juhendid (juhendid.php, my-juhendid.php) ----------
   Both pages are .lg-* lists: a table on a wide screen, cards on a phone. What
   is added here is the second line under a row's title, the confirmed/assigned
   progress bar, the file-version list of the sheet and the tick list an
   instruction session is recorded in. */
.jh-sub { display: block; margin-top: 3px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.jh-sub.bad { color: var(--tag-bad-fg); }
.trow > .jh-tags { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; overflow: visible; }
/* the file name shortens rather than pushing the row (or the card) open —
   text-overflow needs a block box, which an <a> is not on its own */
.trow > .lg-f > .ellip { display: block; flex: 0 1 auto; }
.jh-flink { color: var(--accent); font-weight: 700; }
.jh-flink:hover { text-decoration: underline; }
/* min-width:0 — a select is otherwise as wide as its longest option, and the
   category names are long enough to push the toolbar off a phone screen */
.jh-typesel {
  height: 38px; min-width: 0; max-width: 260px; border: 1px solid var(--fline); border-radius: 10px;
  padding: 0 10px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--field);
}
.jh-sep { width: 1px; align-self: stretch; margin: 0 4px; background: var(--line); }

/* how far a person (or an instruction) has got: the count opens the drill-down */
.trow > .jh-progress { display: flex; align-items: center; gap: 8px; overflow: visible; }
.jh-drillbtn {
  flex: 0 0 auto; border: 1px solid var(--fline); border-radius: 8px; padding: 4px 8px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.jh-drillbtn:hover { border-color: var(--btng); }
.jh-bar { flex: 1 1 60px; min-width: 40px; height: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.jh-bar i { display: block; height: 100%; border-radius: 999px; background: var(--tag-bad-fg); }
.jh-bar.mid i { background: var(--tag-warn-fg); }
.jh-bar.good i { background: var(--tag-good-fg); }
.jh-pct { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--muted); }

/* the edit sheet */
.jh-modal { width: min(720px, 96vw); }
.jh-lbl { flex: 0 0 auto; margin-top: 2px; }
.jh-flags { display: flex; gap: 10px; flex-wrap: wrap; }
.jh-flags .lg-toggle { flex: 1 1 200px; }
.lg-frow .fld-sm.jh-posfld { flex: 0 1 110px; }
.jh-editor { border-radius: 10px; }
.jh-editor:empty { min-height: 120px; border: 1px dashed var(--fline); }
.jh-reset i { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.jh-foot { gap: 10px; flex-wrap: wrap; }
.jh-nofile { font-size: 13px; }

/* one line per stored version, the current one marked */
.jh-files { display: flex; flex-direction: column; gap: 6px; }
.jh-file {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--field);
}
.jh-file.on { border-color: var(--tag-good-fg); }
.jh-fname { flex: 1 1 180px; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--accent); overflow-wrap: anywhere; }
.jh-fname.off { color: var(--muted); text-decoration: line-through; }
.jh-fmeta { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.jh-fbtns { flex: 0 0 auto; display: flex; gap: 6px; margin-left: auto; }
.jh-del { background: var(--tag-bad-bg); color: var(--tag-bad-fg); box-shadow: none; }

/* the instruction session: tick everyone (or everything) that was covered */
.jh-drillsub { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.jh-ticks { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.jh-tick {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; background: var(--card);
}
.jh-tick:hover { border-color: var(--btng); }
.jh-tick input { position: absolute; opacity: 0; width: 0; height: 0; }
.jh-tickbox {
  flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid var(--fline); border-radius: 6px;
  background: var(--field); position: relative;
}
.jh-tick input:checked + .jh-tickbox { background: var(--btng); border-color: transparent; }
.jh-tick input:checked + .jh-tickbox::after {
  content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.jh-tick input:focus-visible + .jh-tickbox { box-shadow: 0 0 0 3px var(--focus); }
.jh-tickname { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.jh-tickname i { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* the category order */
.jh-cats { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.jh-cat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jh-cat input {
  height: 40px; border: 1px solid var(--fline); border-radius: 10px; padding: 0 10px;
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--field); outline: none;
}
.jh-cat input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.jh-catpos { flex: 0 0 84px; width: 84px; text-align: center; }
.jh-catname { flex: 1 1 240px; min-width: 0; }
.jh-catuse { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.jh-catnew { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; }

/* ---- Minu juhendid: the reading sheet ---- */
.mj-modal { width: min(720px, 96vw); }
.mj-stat { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.mj-read { display: flex; flex-direction: column; gap: 12px; }
.mj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mj-frame { width: 100%; height: 42vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mj-more {
  align-self: flex-start; border: 0; background: none; padding: 2px 0;
  color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.mj-state { display: flex; flex-direction: column; gap: 4px; }
.mj-line { font-size: 13px; font-weight: 700; color: var(--muted); }
.mj-line.ok { color: var(--tag-good-fg); }
.mj-doneTag { margin-left: auto; }

@media (max-width: 900px) {
  .jh-modal, .mj-modal { width: 100%; }
  /* the sheet swaps its body per row, so the holder is what scrolls */
  .jh-modal #jh-formholder, .mj-modal #mj-holder { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 3px; }
  .jh-modal .lg-form, .mj-read { overflow: visible; padding: 0; }
  .jh-foot { position: sticky; bottom: 0; margin: 0 -3px; padding: 10px 3px 14px; background: var(--card); border-top: 1px solid var(--line2); }
  .jh-foot .btn-sm { flex: 1 1 40%; height: 46px; justify-content: center; }
  .jh-foot button[type=submit]:first-child { flex: 1 1 100%; order: -1; }
  .jh-ticks { max-height: none; }
  .jh-fbtns { margin-left: 0; width: 100%; }
  .jh-fbtns .btn-sm { flex: 1 1 0; justify-content: center; }
  .jh-typesel { flex: 1 1 100%; max-width: none; }
  /* the same reason, one level up: a long file name must shorten, not widen the card */
  .lg-cards .trow > .lg-f { min-width: 0; }
  .mj-frame { height: 46vh; }
  .lg-cards .trow > .jh-progress, .lg-cards .trow > .jh-tags { flex: 1 1 100%; }
}

/* ---------- Seaded → Seadmed/Otsikud, Arved, Lisatasud, Töökoodid ----------
   All four are .lg-* lists with a sheet; what is added here is the row of
   invoice lines, the right-aligned money column and the meta footer that says
   who entered a record. */
.sd-meta { font-size: 12px; font-weight: 700; color: var(--muted); }
.sd-modal, .iv-modal, .ls-modal, .wc-modal, .tf-modal, .drv-modal, .hrv-modal { width: min(720px, 96vw); }
.iv-foot { gap: 10px; flex-wrap: wrap; }
.iv-foot .jh-del { margin-left: auto; }
.ls-hint { margin: 0; }

/* money reads down the column, so it is aligned on the right and set in tabular
   figures — and the column heading has to follow it, or the heading sits over
   on the left while every figure under it is flush right. */
.trow > .iv-amount { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.thead > .iv-amount { justify-content: flex-end; text-align: right; }
.thead > .iv-amount .th-sort { justify-content: flex-end; }
.trow > .iv-amount.neg { color: var(--tag-bad-fg); }
.iv-total { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--ink); }
/* a deleted code stays readable but stops competing with the live ones */
.trow.wc-gone > div { opacity: .55; }
.trow.wc-gone > .lg-sum { opacity: 1; }

/* one row per doctor an invoice is split between */
.iv-lbl { flex: 0 0 auto; margin-top: 2px; }
.iv-lines { display: flex; flex-direction: column; gap: 8px; }
.iv-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.iv-line select, .iv-line input {
  height: 42px; min-width: 0; border: 1px solid var(--fline); border-radius: 10px; padding: 0 10px;
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--field); outline: none;
}
.iv-line select:focus, .iv-line input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.iv-line .iv-emp { flex: 2 1 200px; }
.iv-line .iv-sum { flex: 0 0 110px; width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.iv-line .iv-com { flex: 2 1 160px; }
.iv-del {
  flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--field); color: var(--muted); font-size: 14px; cursor: pointer;
}
.iv-del:hover { border-color: transparent; background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.iv-addline { align-self: flex-start; }

@media (max-width: 900px) {
  .sd-modal, .iv-modal, .ls-modal, .wc-modal, .tf-modal, .drv-modal, .hrv-modal { width: 100%; }
  .sd-modal #sd-formholder, .iv-modal #iv-formholder,
  .ls-modal #ls-formholder, .wc-modal #wc-formholder, .tf-modal #tf-formholder, .drv-modal #drv-formholder, .hrv-modal #hrv-holder { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 3px; }
  .sd-modal .lg-form, .iv-modal .lg-form, .ls-modal .lg-form, .wc-modal .lg-form, .tf-modal .lg-form, .drv-modal .lg-form, .hrv-modal .lg-form { overflow: visible; padding: 0; }
  .iv-foot {
    position: sticky; bottom: 0; margin: 0 -3px; padding: 10px 3px 14px;
    background: var(--card); border-top: 1px solid var(--line2);
  }
  .iv-foot .btn-sm { flex: 1 1 40%; height: 46px; justify-content: center; }
  .iv-foot button[type=submit]:first-child { flex: 1 1 100%; order: -1; }
  .iv-foot .jh-del { margin-left: 0; }
  /* a line becomes two rows: who and how much, then the note */
  .iv-line { gap: 8px 6px; }
  .iv-line .iv-emp { flex: 1 1 60%; }
  .iv-line .iv-sum { flex: 1 1 90px; width: auto; }
  .iv-line .iv-com { flex: 1 1 100%; order: 1; }
  .trow > .iv-amount { justify-content: center; text-align: center; }
  /* the card's badge already says the amount, so its own cell would repeat it */
  .lg-cards .trow > .iv-dup { display: none; }
  .lg-cards .trow > .iv-total { flex: 1 1 100%; }
}

/* the rate is a narrow field between the cost and the amount it produces.
   `.lg-frow .fld-sm` sets flex on every field, so these have to match it. */
.lg-frow .fld-sm.wc-vatfld { flex: 0 1 110px; }
.lg-frow .fld-sm.wc-codefld { flex: 1 1 150px; }
.lg-frow .fld-sm.wc-namefld { flex: 3 1 260px; }
.wc-price[readonly] { color: var(--sub); cursor: default; }

/* ---------- Testid/koolitused → Koolitused, Minu koolitused ---------- */
.lg-frow .fld-sm.ko-namefld { flex: 3 1 260px; }
.lg-frow .fld-sm.ko-numfld { flex: 0 1 120px; }
/* the attendance list is the length of the staff list, so it gets its own search */
.ko-lbl { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.ko-count { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ko-filter {
  height: 40px; border: 1px solid var(--fline); border-radius: 10px; padding: 0 12px;
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--field); outline: none;
}
.ko-filter:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.ko-ticks .jh-tick[hidden] { display: none; }
.ko-modal { width: min(720px, 96vw); }

@media (max-width: 900px) {
  .ko-modal { width: 100%; }
  .ko-modal #ko-formholder { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 3px; }
  .ko-modal .lg-form { overflow: visible; padding: 0; }
}

/* ---------- Minu profiil (profile.php) ---------- */
.pf-card { padding: 20px 22px; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* the fields are read out, not typed into: the value carries the weight */
.pf-grid .fld-sm.ro > b { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.pf-grid .card-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pf-hint { margin: 18px 0 0; }

@media (max-width: 900px) {
  .pf-card { padding: 16px 14px; }
  .card-head .face-lg { width: 84px; }
}

/* ---------- Minu graafik (my-schedule.php) ---------- */
/* .sc-month is already styled for the reception planner and reused as-is */
.sc-monthnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stat-card .val-muted { color: var(--muted); }
/* a shift on a weekend or a public holiday is worth spotting in the list */
.trow.mg-off { background: var(--tag-warn-bg); }
.trow.mg-today { box-shadow: inset 3px 0 0 var(--accent); }

@media (max-width: 900px) {
  .sc-monthnav { flex: 1 1 100%; justify-content: space-between; }
  .sc-month { flex: 1 1 auto; }
  .lg-cards .trow.mg-off { background: var(--tag-warn-bg); }
}

/* ---------- Minu tunnid, Minu palk (my-hours.php, my-salary.php) ---------- */
/* a shift nobody clocked out of is the one row worth chasing */
.trow.mh-open { background: var(--tag-warn-bg); }
/* the figure a row adds up to carries more weight than the parts it is made of */
.trow > .ms-sum { font-weight: 800; color: var(--ink); }
.trow.ms-on { background: var(--rowhov); box-shadow: inset 3px 0 0 var(--accent); }
.ms-formula { margin: 14px 18px 16px; }

@media (max-width: 900px) {
  .lg-cards .trow.mh-open { background: var(--tag-warn-bg); }
  .ms-formula { margin: 12px 14px 14px; }
}

/* ---------- Vaata kasutajana (view-as.php + the preview banner) ----------
   The banner is fixed to the top of every page a preview is running on, and
   the layout is pushed down by the same amount so nothing hides under it. */
.va-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 300; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 40px; background: linear-gradient(135deg, #b45309, #92400e); color: #fff;
  font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6);
}
body.viewing-as { padding-top: 40px; }
body.viewing-as aside { top: 40px; height: calc(100vh - 40px); }
.va-bdot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #fde68a; }
.va-btext { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-bnote { flex: 0 1 auto; font-weight: 600; opacity: .8; }
.va-bar form { margin-left: auto; }
.va-bstop {
  height: 28px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
  background: transparent; color: #fff; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.va-bstop:hover { background: rgba(255, 255, 255, .16); }

/* the picker */
.va-intro { margin: 6px 0 16px; }
.va-lbl { flex: 0 0 auto; margin-top: 2px; }
.va-form { display: flex; flex-direction: column; gap: 12px; }
.va-roles .rk-chip span { text-transform: capitalize; }
.va-keep i { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.va-running {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--tag-warn-fg); border-radius: 12px; padding: 12px 16px;
  background: var(--tag-warn-bg); margin-bottom: 16px;
}
.va-runwho { font-size: 15px; font-weight: 800; color: var(--ink); }
.va-runrole { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.va-running form { margin-left: auto; }

/* what a role reaches, without starting a preview */
.va-rtabs { margin-bottom: 14px; }
.va-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.va-mgroup { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--field); }
.va-mtop { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.va-mitem {
  display: inline-block; margin: 0 5px 5px 0; padding: 3px 9px; border-radius: 999px;
  background: var(--chip); font-size: 12px; font-weight: 700; color: var(--cell);
}

/* the verdict shown instead of an action */
.va-verdict { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.va-vcard {
  width: min(520px, 100%); background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 30px 28px; text-align: center; box-shadow: var(--cardsh);
}
.va-vmark {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800;
}
.va-vcard.ok .va-vmark { background: var(--tag-good-bg); color: var(--tag-good-fg); }
.va-vcard.no .va-vmark { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.va-vcard h1 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.va-vcard p { margin: 0 0 10px; font-size: 14px; color: var(--sub); line-height: 1.5; }
.va-vwho { font-weight: 700; color: var(--muted); }
.va-vwhat { margin: 14px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.va-vwhat code { background: var(--chip); border-radius: 6px; padding: 2px 7px; font-size: 12px; color: var(--cell); }
.va-vacts { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .va-bnote { display: none; }
  .va-bar { padding: 0 12px; gap: 8px; }
  /* the label shortens rather than pushing the way out onto a second line */
  .va-bstop { white-space: nowrap; padding: 0 10px; }
  .va-btext { font-size: 12px; }
  .va-running form { margin-left: 0; flex: 1 1 100%; }
  .va-running .btn-sm { width: 100%; justify-content: center; }
}

/* ---------- Sõnumid: the messenger, its drawer panel and the notifier ---------- */
/* The unread count, on the messages button and on the floating button that
   opens the drawer. It blinks while anything is unread and stops the moment the
   conversation is opened — and holds still for anyone who asked for less motion. */
/* .quick-fab is already `position: fixed`, which is enough to anchor the badge
   — giving it `relative` here would drop it out of its place on the screen */
.qd-btn { position: relative; }
.qd-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--tag-bad-fg); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--side);
  animation: lhk-badge-blink 1.3s ease-in-out infinite;
}
.quick-fab .qd-count { box-shadow: 0 0 0 2px var(--bg); }
@keyframes lhk-badge-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.88); }
}
@media (prefers-reduced-motion: reduce) {
  .qd-count { animation: none; }
}

/* the panel that slides out of the quick drawer */
.qd-messages {
  position: fixed; right: 88px; bottom: 20px; z-index: 191; width: min(360px, calc(100vw - 108px));
  max-height: min(560px, calc(100vh - 48px)); display: none; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--cardsh);
}
.qd-messages.open { display: flex; }
.qd-mhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line2); font-size: 14px; font-weight: 800; color: var(--ink);
}
.qd-mfull { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.qd-mbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* The open conversation must not scroll as a whole: the panel holds it as a
   column so the message list is the only scroller, which leaves the header —
   and the back button on it — and the composer pinned where they are. */
.sn-panelview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.qd-messages .sn-thread { flex: 1 1 auto; min-height: 0; }
.qd-messages .sn-thead { position: sticky; top: 0; z-index: 2; background: var(--card); }

/* the conversation list */
.sn-list { display: flex; flex-direction: column; }
.sn-newrow { padding: 10px 12px; border-bottom: 1px solid var(--line2); }
.sn-pick {
  width: 100%; height: 38px; border: 1px solid var(--fline); border-radius: 10px; padding: 0 10px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--field);
}
.sn-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line2); background: none; padding: 11px 14px; font: inherit;
}
.sn-item:hover { background: var(--rowhov); }
.sn-item.unread .sn-iname { color: var(--ink); }
.sn-item.unread .sn-iprev { color: var(--cell); font-weight: 700; }
.sn-av { flex: 0 0 auto; }
.sn-itext { flex: 1 1 auto; min-width: 0; }
.sn-iname { display: block; font-size: 13.5px; font-weight: 800; color: var(--cell); }
.sn-iprev {
  display: block; font-size: 12.5px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sn-iprev i { font-style: normal; font-weight: 700; }
.sn-imeta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.sn-iwhen { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.sn-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--tag-bad-fg);
  color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.sn-none { padding: 26px 18px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* one conversation */
.sn-thread { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.sn-thead {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line2);
}
.sn-tname { font-size: 14px; font-weight: 800; color: var(--ink); }
.sn-back { display: none; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; padding: 0 4px; }
.qd-messages .sn-back { display: block; }
.sn-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sn-day { align-self: center; font-size: 11.5px; font-weight: 800; color: var(--muted); margin: 6px 0; }
.sn-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.sn-msg.mine { align-self: flex-end; align-items: flex-end; }
.sn-bubble {
  border-radius: 14px 14px 14px 4px; padding: 9px 13px; background: var(--field);
  border: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere;
}
.sn-bubble p { margin: 0 0 6px; }
.sn-bubble p:last-child { margin-bottom: 0; }
.sn-msg.mine .sn-bubble { border-radius: 14px 14px 4px 14px; background: var(--btng); border-color: transparent; color: #fff; }
/* links in a message are underlined so they read as links on either bubble;
   on my own (blue) bubble the accent colour would vanish into the background,
   so there they take the bubble's white */
.sn-bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.sn-msg.mine .sn-bubble a { color: inherit; }
.sn-time { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 3px; }
/* read receipts under my messages: one tick delivered, two once they opened it */
.sn-tick { margin-left: 3px; padding-right: 3px; letter-spacing: -3px; font-weight: 800; color: var(--muted); }
.sn-msg.seen .sn-tick, .sn-tick.seen { color: var(--accent); }
.sn-seenat { font-size: 11px; font-weight: 700; color: var(--accent); margin-top: 2px; }
.sn-iprev .sn-tick { margin-left: 0; margin-right: 2px; }
.sn-compose { flex: 0 0 auto; position: relative; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line2); }
/* Emoji picker: the button sits in the compose row, the panel floats above it
   over the thread. `.sn-view` clips its overflow, so opening upward from the
   bottom bar is what keeps the whole panel on screen. */
.sn-emoji {
  flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--fline); border-radius: 10px;
  background: var(--field); font-size: 18px; line-height: 1; cursor: pointer; padding: 0;
}
.sn-emoji:hover { border-color: var(--accent); }
.sn-emoji[aria-expanded="true"] { border-color: var(--accent); background: var(--card); }
.sn-emopanel {
  position: absolute; bottom: calc(100% + 6px); left: 10px; right: 10px; z-index: 20;
  max-height: 216px; overflow-y: auto; padding: 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--cardsh);
}
.sn-emo {
  border: 0; background: none; cursor: pointer; border-radius: 8px; padding: 0;
  height: 34px; font-size: 20px; line-height: 1; font-family: inherit;
}
.sn-emo:hover { background: var(--navabg); }
@media (max-width: 760px) {
  /* a finger needs a bigger target than a pointer does */
  .sn-emopanel { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); max-height: 40vh; }
  .sn-emo { height: 40px; font-size: 23px; }
}
.sn-compose textarea {
  flex: 1 1 auto; min-width: 0; max-height: 120px; border: 1px solid var(--fline); border-radius: 12px;
  padding: 9px 12px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--field);
  outline: none; resize: none;
}
.sn-compose textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.sn-send {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--btng);
  color: #fff; font-size: 15px; cursor: pointer; box-shadow: var(--btnsh);
}

/* the full page: the card takes the height the viewport has left, and the two
   columns scroll inside it rather than growing the page */
.sn-page { padding: 0; overflow: hidden; height: calc(100vh - 150px); min-height: 420px; display: flex; }
.sn-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(250px, 330px) 1fr; }
.sn-side { border-right: 1px solid var(--line2); min-height: 0; overflow-y: auto; }
.sn-view { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sn-hint { margin: auto; }

/* the staff photo over its initials disc, at the size a list row wants */
.sn-av { width: 38px; height: 38px; font-size: 12.5px; }
.sn-thead .sn-av { width: 34px; height: 34px; }

/* the one-off permission request */
.notify-ask {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 320;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: min(560px, calc(100vw - 32px));
  padding: 14px 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--cardsh);
}
.notify-atext { flex: 1 1 220px; min-width: 0; }
.notify-atext b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.notify-atext span { display: block; font-size: 12.5px; color: var(--sub); margin-top: 2px; }

@media (max-width: 900px) {
  .qd-messages { right: 12px; left: 12px; bottom: 84px; width: auto; max-height: calc(100vh - 140px); }
  /* on a phone the two columns stack and the page scrolls as one */
  .sn-page { height: auto; display: block; }
  .sn-cols { grid-template-columns: 1fr; }
  .sn-side { border-right: 0; border-bottom: 1px solid var(--line2); max-height: 300px; }
  .sn-view { min-height: 420px; }
  .sn-msg { max-width: 88%; }
  /* One pane at a time: opening a conversation replaces the list of people
     rather than sitting under it, and the ‹ in the thread header brings the
     list back. On a wide screen both panes are side by side and ‹ is hidden. */
  .sn-page.sn-open .sn-side { display: none; }
  /* With a conversation open the card stops growing with the page and becomes a
     pane the height of what is left on screen, the way it already is on a wide
     one: the messages scroll inside it while the header with ‹ and the composer
     stay put. Sticky cannot do this job — .sn-page is overflow:hidden, so there
     is no scrollport for a sticky header to hold on to. dvh keeps it honest
     while a phone's address bar slides in and out; vh is the fallback. */
  .sn-page.sn-open { height: calc(100vh - 220px); height: calc(100dvh - 220px); min-height: 360px; display: flex; }
  .sn-page.sn-open .sn-cols, .sn-page.sn-open .sn-view { min-height: 0; }
  .sn-page .sn-back { display: block; }
  /* Safari zooms the page when a focused field is under 16px, which leaves the
     layout scaled up with no way back — so every field here is at least that. */
  .sn-compose textarea, .sn-pick { font-size: 16px; }
  .select2-container--default .select2-search--dropdown .select2-search__field,
  .select2-container--default .select2-search--inline .select2-search__field { font-size: 16px; }
  .notify-ask { bottom: 12px; }
}

/* the key test on Seaded → Sõnumid */
.msg-try {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--field);
  font-size: 12.5px; color: var(--sub); line-height: 1.5;
}
.msg-try b { font-size: 13px; }
.msg-try.ok b { color: var(--tag-good-fg); }
.msg-try.no b { color: var(--tag-bad-fg); }
.msg-try code { background: var(--chip); border-radius: 6px; padding: 2px 6px; font-size: 11.5px; overflow-wrap: anywhere; }

/* ---------- Avaleht: notices and birthdays (dashboard.php) ---------- */
.hp-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hp-card { overflow: hidden; }
.hp-today { padding: 10px 16px 4px; }
.hp-tlbl { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.hp-list { padding: 6px 0 4px; }
.hp-bday { display: flex; align-items: center; gap: 12px; padding: 9px 16px; }
.hp-bday.now { border-radius: 12px; background: var(--tag-good-bg); margin: 8px 0; padding: 10px 12px; }
.hp-av { width: 38px; height: 38px; font-size: 12.5px; flex: 0 0 auto; }
.hp-bwho { flex: 1 1 auto; min-width: 0; }
.hp-bname { font-size: 13.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-bmeta { font-size: 12px; font-weight: 700; color: var(--muted); }
.hp-hid { margin-left: 6px; padding: 1px 7px; font-size: 10.5px; vertical-align: 1px; }
.hp-bwhen { flex: 0 0 auto; text-align: right; }
.hp-bwhen b { display: block; font-size: 13px; font-weight: 800; color: var(--cell); white-space: nowrap; }
.hp-bwhen span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.hp-cake { flex: 0 0 auto; font-size: 20px; }
.hp-consent { margin: 4px 16px 14px; }

.hp-links { display: flex; flex-direction: column; padding: 6px 0 8px; }
.hp-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; font-size: 13.5px; font-weight: 700; color: var(--cell);
}
.hp-link:hover { background: var(--rowhov); text-decoration: none; color: var(--ink); }
.hp-link span { color: var(--muted); font-size: 16px; }

@media (max-width: 900px) {
  .hp-cols { grid-template-columns: 1fr; }
}

/* ---------- Avaleht → Uudised ---------- */
.hp-posts { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.hp-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hp-pttl { font-size: 15px; font-weight: 800; color: var(--ink); }
.hp-post { padding: 16px 20px; }
/* a retired item is legible but clearly not current */
.hp-post.old { border-style: dashed; }
.hp-post.old .hp-ubody { opacity: .72; }
.hp-pmeta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
/* the bodies are legacy HTML with their own headings and images: rein them in
   so a wide picture or a huge heading cannot break the card */
.hp-ubody { font-size: 14px; line-height: 1.6; color: var(--cell); overflow-wrap: anywhere; }
.hp-ubody :first-child { margin-top: 0; }
.hp-ubody :last-child { margin-bottom: 0; }
.hp-ubody h1, .hp-ubody h2, .hp-ubody h3, .hp-ubody h4, .hp-ubody h5, .hp-ubody h6 {
  margin: 12px 0 6px; font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.3;
}
.hp-ubody p { margin: 0 0 8px; }
.hp-ubody img { max-width: 100%; height: auto; border-radius: 10px; }
.hp-ubody a { color: var(--accent); }
.hp-ubody hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.hp-ubody table { max-width: 100%; }

/* ---------- Quick access along the bottom (phones only) ----------
   The counterpart of the right-hand drawer on a wide screen. It only exists
   under 900px, and the page gets bottom padding so nothing hides beneath it. */
.quick-bar { display: none; }

@media (max-width: 900px) {
  .quick-bar {
    position: fixed; inset: auto 0 0 0; z-index: 120; display: flex; align-items: stretch;
    background: var(--side); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px -18px rgba(8, 30, 55, .5);
  }
  .qb-btn {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; padding: 8px 4px 7px; border: 0; background: none;
    color: var(--muted); font: inherit; cursor: pointer; text-decoration: none;
  }
  .qb-btn.on { color: var(--accent); }
  .qb-btn.on .qb-ic { background: var(--navabg); }
  .qb-ic {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 26px;
    border-radius: 9px; font-size: 11px; font-weight: 800;
  }
  .qb-ic svg { width: 19px; height: 19px; }
  .qb-ic img { width: 19px; height: 19px; object-fit: contain; }
  .qb-lbl {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px; font-weight: 700;
  }
  /* the bar sits over the page, so leave room for it — and push the messenger
     panel clear of it too. The bar's own height grows by the safe-area inset on
     a notched phone, so anything reserving room for it must add that too,
     otherwise the home-indicator strip eats the last rows.
     The drawer's FAB keeps the base rule's centred position on the right edge:
     it is nowhere near the bar, so it needs no adjusting here. */
  .dash main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  /* The sidebar is 100vh as well — as the icon rail here and as the drawer below
     720px — so its user card and logout button would sit under the bar (the bar
     is z-index 120 against the sidebar's 100). Reserve the same room at its foot;
     .side-nav is the flexible part and simply scrolls a little sooner. */
  .dash aside { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .qd-messages { bottom: 150px; }
  .notify-ask { bottom: 80px; }
}

/* ---------- Minu profiil ---------- */
.pf-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 16px; }
.pf-av { width: 58px; height: 58px; font-size: 18px; flex: 0 0 auto; }
.pf-who { flex: 1 1 200px; min-width: 0; }
.pf-name { font-size: 19px; font-weight: 800; color: var(--ink); }
.pf-sub { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.pf-tags { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; }
/* min() keeps the track from insisting on 320px inside a narrower phone —
   without it the card is wider than the screen and the page pans sideways */
.pf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 18px; padding: 16px 20px 18px; }
.pf-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-fld span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pf-fld b { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.pf-note { margin: 0 20px 16px; }
.pf-nav { padding: 14px 20px 18px; }
.pf-navpick { margin-bottom: 14px; }
.pf-navpick .rk-chip input:disabled + span { opacity: .4; cursor: not-allowed; }
.pf-navcount { font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ---- Notifications card on Minu profiil ---------------------------------- */
/* The switch is a real checkbox: the track and knob are drawn from its state,
   so it keeps the keyboard behaviour and the label association a checkbox has. */
/* the clock-in badge: the QR sits on its own light plate whatever the theme,
   because a scanner needs dark modules on a light ground */
.pf-qr { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; padding: 16px 20px 18px; }
/* the padding is the code's quiet zone: a scanner needs clear white around the
   modules, and a stored badge is often cropped tight to them */
.pf-qrbox { flex: 0 0 auto; width: 208px; height: 208px; padding: 18px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); }
.pf-qrbox svg, .pf-qrbox img { display: block; width: 100%; height: 100%; }
/* the stored badge is a small bitmap; keep its edges hard when it is scaled up,
   otherwise a smoothed QR gets harder for the kiosk reader to lock on to */
.pf-qrbox img { object-fit: contain; image-rendering: pixelated; }
.pf-qrbox svg { object-fit: contain; }
.pf-qrside { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-qrside .cfg-hint { margin: 0; max-width: 60ch; }
.pf-qrwarn { color: var(--tag-warn-fg); font-weight: 700; }
.pf-qrcode { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.pf-qrcode span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pf-qrcode code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--ink);
  background: var(--field); border: 1px solid var(--fline); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
/* On a phone the plate may shrink to fit, but it never stretches across the
   screen: a badge bigger than a scanner's frame is harder to read, not easier */
@media (max-width: 560px) { .pf-qrbox { width: min(240px, 100%); height: auto; aspect-ratio: 1; } }
.pf-nt { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.pf-nt .cfg-hint { margin: 0; max-width: 70ch; }
.pf-ntrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.lhk-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.lhk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lhk-switch-track {
  position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--fline);
  transition: background .18s ease, border-color .18s ease;
}
.lhk-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(8, 20, 35, .3);
  transition: transform .18s ease;
}
.lhk-switch input:checked + .lhk-switch-track { background: var(--btng); border-color: transparent; }
.lhk-switch input:checked + .lhk-switch-track::after { transform: translateX(18px); }
.lhk-switch input:focus-visible + .lhk-switch-track { box-shadow: 0 0 0 3px var(--focus); }
.lhk-switch input:disabled + .lhk-switch-track { opacity: .5; }
.lhk-switch input:disabled ~ .lhk-switch-text { opacity: .6; }
.lhk-switch:has(input:disabled) { cursor: not-allowed; }
.lhk-switch-text { font-size: 14px; font-weight: 600; color: var(--ink); }

.pf-ntmsg:empty { display: none; }
.pf-ntmsg {
  font-size: 13.5px; line-height: 1.5; padding: 9px 12px; border-radius: 10px;
  background: var(--chip); color: var(--muted); max-width: 70ch;
}
.pf-ntmsg.is-ok { background: var(--tag-good-bg); color: var(--tag-good-fg); }
.pf-ntmsg.is-warn { background: var(--tag-warn-bg); color: var(--tag-warn-fg); }
@media (prefers-reduced-motion: reduce) {
  .lhk-switch-track, .lhk-switch-track::after { transition: none; }
}

/* The menu manager's LHK2 column: does this row belong to this application at
   all? Distinct from the role flags beside it, which are about who may see it. */
.inapp-cell { display: flex; align-items: center; justify-content: center; }
.inapp-cell label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.inapp-cell input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.inapp-cell span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.inapp-cell input:checked ~ span { color: var(--accent); }

/* Invoices: a search runs across every period, so the period picker is inert
   and each hit names the period it was filed under. */
.iv-allper { white-space: nowrap; }
.jh-typesel:disabled { opacity: .55; cursor: not-allowed; }
.iv-perlabel { color: var(--accent); font-style: normal; font-weight: 600; }

/* Palgad → rea muutmine → Koolitusfondi kasutamine: the add-a-spend row above the list */
.kf-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.kf-add input { height: 30px; border: 1px solid var(--fline); border-radius: 8px; padding: 0 8px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.kf-add input:focus { border-color: var(--accent); }
.kf-add .kf-date { width: 140px; }
.kf-add .kf-name { flex: 1 1 160px; min-width: 160px; }
.kf-add .kf-sum { width: 110px; text-align: right; }
.kf-add .kf-qty { width: 80px; text-align: right; }
.kf-add .kf-code { width: 160px; }
.kf-add .kf-inv { width: 110px; }
.kf-add select { height: 30px; border: 1px solid var(--fline); border-radius: 8px; padding: 0 6px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.sal-acts { display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center; }
.sal-acts form { display: inline; }
.trow.sal-editing { background: var(--field); }
/* Palgad → rea muutmine → Detailid: the card pads only its head and its table
   rows, so the tab buttons, forms and hints get the same 20px gutter themselves */
.sal-details .card-tabs { padding: 14px 20px 0; margin: 0 0 6px; }
.sal-details .card-tab { padding-bottom: 8px; }
.sal-details .card-tab > .kf-add, .sal-details .card-tab > .cfg-hint, .sal-details .card-tab > .auth-msg { margin-left: 20px; margin-right: 20px; }
.sal-details .card-tab > .kf-add { margin-top: 10px; }
/* Minu palk lists the same details read-only: the note under the tabs is a
   direct child of the card, so it needs the padding the tabs give theirs */
.sal-details > .cfg-hint { margin-left: 20px; margin-right: 20px; }
/* Steriliseerimine → Graafik: legend badges double as a filter */
.ster-legitem { border: 0; cursor: pointer; font-family: inherit; line-height: 1.3; }
.ster-legitem:hover { filter: brightness(1.06); }
.ster-leg.filtering .ster-legitem:not(.on) { opacity: .4; }
.ster-legitem.on, .ster-legitem.mine.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); opacity: 1; }
.ster-legreset { display: none; margin-left: auto; }
.ster-leg.filtering .ster-legreset { display: inline-flex; }
.ster-chip.ster-dim { opacity: .15; }
.ster-day.ster-daydim .ster-dnum { opacity: .45; }

/* ---------- Statistika → Visiidid (arstide kaupa), visits.php ----------
   Prefixed vsd- on purpose: the by-month statistics page ships its own .vz-*
   chart styles in this same file, and two unprefixed sets would override each
   other's cards, legends and tooltips depending on which block came last. */
body { --vsd1: #2a78d6; --vsd2: #eb6834; --vsd3: #1baf7a; }
body.dark { --vsd1: #3987e5; --vsd2: #d95926; --vsd3: #199e70; }
/* 480px minimum: two charts side by side on a desktop, one below that — at
   360px a third track appeared and squeezed each chart into a scroller */
.vsd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 16px; margin: 16px 0; }
.vsd-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; min-width: 0; }
.vsd-card.wide { grid-column: 1 / -1; }
.vsd-title { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.vsd-sub { font-size: 12px; font-weight: 600; color: var(--muted); margin: 2px 0 10px; }
.vsd-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--sub); margin-bottom: 8px; }
.vsd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.vsd-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 -4px; padding: 0 4px; }
/* drawn at natural size (one SVG unit = one pixel), so a column stays 24px
   and the axis text stays 11px whatever width the card happens to have */
.vsd-svg { display: block; max-width: none; overflow: visible; }
.vsd-svg text { fill: var(--sub); font-family: inherit; font-size: 11px; font-weight: 600; }
.vsd-svg .vsd-val { fill: var(--ink); font-weight: 800; }
.vsd-svg .vsd-gridline { stroke: var(--line2); stroke-width: 1; }
.vsd-svg .vsd-axis { stroke: var(--line); stroke-width: 1; }
.vsd-svg .vsd-hit { fill: transparent; }
.vsd-tip {
  position: fixed; z-index: 500; pointer-events: none; max-width: 340px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 11px; font-size: 12px; font-weight: 600; line-height: 1.45; box-shadow: var(--cardsh);
}
.vsd-tip b { display: block; font-weight: 800; margin-bottom: 2px; }
.vsd-tip span { display: block; color: var(--sub); }
@media (max-width: 760px) { .vsd-grid { grid-template-columns: 1fr; } }

/* ---- Charts (app/charts.php): inline SVG figures with a hover/focus readout ----
   Series colours are the validated categorical slots 1–3, stepped for each mode
   (light on white, dark on the card). Light slot 3 sits under 3:1 on the card,
   so every chart ships visible value labels and a table twin below it. */
body {
  --vz-1: #2a78d6; --vz-2: #eb6834; --vz-3: #1baf7a;
  --vz-gray: #7a92a8; --vz-grid: #e6edf4; --vz-axis: #cfdae6; --vz-surface: #ffffff;
}
body.dark {
  --vz-1: #3987e5; --vz-2: #d95926; --vz-3: #199e70;
  --vz-gray: #7f97ab; --vz-grid: rgba(118,180,235,.12); --vz-axis: rgba(118,180,235,.28); --vz-surface: #0d1f31;
}
.vz-card { padding: 18px 20px 8px; }
.vz { margin: 0; }
.vz figcaption { margin-bottom: 10px; }
.vz-ttl { font-size: 15px; font-weight: 800; color: var(--ink); }
.vz-sub { font-size: 12.5px; font-weight: 700; color: var(--sub); margin-top: 2px; }
.vz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.vz-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--sub); }
.vz-sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.vz-sw.line { height: 2px; border-radius: 2px; width: 16px; background: var(--vz-gray); }
.vz-plot { overflow-x: auto; }
.vz-plot svg { display: block; width: 100%; min-width: 620px; height: auto; overflow: visible; }
.vz-grid { stroke: var(--vz-grid); stroke-width: 1; }
.vz-axis { stroke: var(--vz-axis); stroke-width: 1; }
.vz-ax { fill: var(--muted); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vz-cat { fill: var(--cell); font-size: 12.5px; font-weight: 700; }
.vz-lbl { fill: var(--ink); font-size: 12px; font-weight: 800; }
.vz-line { fill: none; stroke: var(--vz-gray); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vz-dot { fill: var(--vz-gray); stroke: var(--vz-surface); stroke-width: 2; }
.vz-hit { fill: transparent; outline: none; }
.vz-band:hover .vz-bar, .vz-hit:focus-visible ~ .vz-bar { filter: brightness(1.08); }
.vz-hit:focus-visible { fill: var(--focus); }
.vz-tip {
  position: absolute; z-index: 90; pointer-events: none; min-width: 150px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; box-shadow: var(--cardsh); font-size: 12.5px;
}
.vz-tiph { font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.vz-tipr { display: flex; align-items: baseline; gap: 7px; margin-top: 3px; color: var(--sub); font-weight: 700; }
.vz-tipr b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.vz-tipk { width: 14px; height: 2px; border-radius: 2px; flex: 0 0 auto; align-self: center; }
@media (max-width: 700px) { .vz-card { padding: 16px 14px 6px; } }

/* ---- Steriliseerimine: the week view ------------------------------------- */
/* Rows are the shifts, columns the days. The month grid squeezes four names
   into a day cell and truncates them; here a name has room, which is what makes
   "who am I on with" readable. */
.ster-modesw { display: inline-flex; margin-left: 10px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ster-modebtn {
  padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: var(--card); text-decoration: none; border-right: 1px solid var(--line);
}
.ster-modebtn:last-child { border-right: 0; }
.ster-modebtn:hover { color: var(--ink); text-decoration: none; }
.ster-modebtn.on { background: var(--btng); color: #fff; }

/* Your own week, above the grid — the first thing a rostered person looks for */
.stw-mine {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 11px 14px; margin-bottom: 12px; border-radius: 12px;
  background: var(--chip); font-size: 13px;
}
.stw-mine.none { color: var(--muted); }
.stw-minettl { font-weight: 800; color: var(--ink); }
.stw-mineday {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 10px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line);
}
.stw-mineday.is-today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
.stw-mineday b { color: var(--ink); }
.stw-minetime { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.stw-minewith { color: var(--muted); }
.stw-minewith.alone { font-style: italic; }
.stw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 6px; vertical-align: baseline; }

.stw {
  display: grid; grid-template-columns: 108px repeat(var(--stw-days, 7), minmax(134px, 1fr));
  gap: 6px; min-width: 1050px;
}
.stw-corner { }
.stw-head {
  display: flex; align-items: baseline; gap: 6px; padding: 7px 10px; border-radius: 10px;
  background: var(--chip); font-weight: 800; color: var(--ink);
}
.stw-head.off { color: var(--muted); }
.stw-head.is-today { background: var(--btng); color: #fff; }
.stw-head.is-today .stw-dw { color: rgba(255,255,255,.85); }
.stw-dw { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stw-dn { font-size: 14px; font-variant-numeric: tabular-nums; }

.stw-slot {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 8px 10px; border-radius: 10px; background: var(--chip);
}
.stw-slotn { font-size: 12px; font-weight: 700; color: var(--ink); }
.stw-slott { font-size: 12px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

.stw-cell { display: flex; min-height: 52px; }
.stw-cell.off { opacity: .72; }
.stw-cell.is-today .stw-chip { box-shadow: inset 0 0 0 1px var(--accent); }
.stw-chip {
  /* wrap so the "you" badge drops below the name instead of squeezing it —
     a name broken mid-word is exactly what this view exists to avoid */
  flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
  padding: 8px 10px; border: 0; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700;
  background: var(--field); color: var(--muted); text-align: left; overflow: hidden;
}
button.stw-chip { cursor: pointer; }
button.stw-chip:hover { filter: brightness(.95); }
/* Wrap rather than ellipsis: a truncated name is the month grid's problem, and
   the point of this view is that you can read who it is. Two lines fit. */
.stw-chip .nm { flex: 1 1 100%; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.stw-chip.empty { background: transparent; border: 1px dashed var(--line2, var(--line)); color: var(--muted); font-weight: 500; }
.stw-chip.mine { box-shadow: 0 0 0 2px var(--accent); }
.stw-you {
  flex: 0 0 auto; margin-left: auto; font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.3);
}
.stw-chip.saved { animation: lhk-st-saved .9s ease; }
@keyframes lhk-st-saved { 0% { box-shadow: 0 0 0 3px var(--tag-good-fg); } 100% { box-shadow: none; } }
.stw-cell.ster-daydim { opacity: .25; }

@media (max-width: 720px) {
  .stw { min-width: 760px; grid-template-columns: 92px repeat(var(--stw-days, 7), minmax(96px, 1fr)); }
  .stw-chip { font-size: 12px; padding: 7px 8px; }
  .stw-you { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stw-chip.saved { animation: none; } }

/* Kasutusjuhend (public/manual.php): one card per page, grouped by section */
.mn-search { width: min(320px, 60vw); font: inherit; font-size: 13px; }
.mn-toc .mn-tocwrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 16px; }
.mn-tocsec { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px;
  background: var(--btn2bg); border: 1px solid var(--line); font-size: 13px; font-weight: 700;
  color: var(--navfg); text-decoration: none; }
.mn-tocsec:hover { background: var(--navabg); color: var(--navafg); text-decoration: none; }
.mn-tocsec .cnt { opacity: .6; font-size: 11.5px; }
.mn-sec { display: flex; flex-direction: column; gap: 12px; }
.mn-secttl { margin: 8px 0 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.mn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.mn-card { scroll-margin-top: 16px; }
.mn-body { padding: 14px 20px 18px; }
.mn-intro { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--cell); line-height: 1.65; }
.mn-points { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.mn-points li { font-size: 13px; font-weight: 600; color: var(--sub); line-height: 1.6; }
@media (max-width: 700px) { .mn-grid { grid-template-columns: 1fr; } }

/* ---------- Statistika → Patsiendid (stats-patients.php) ---------- */
.sp-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-sex { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.sp-sexrow { display: grid; grid-template-columns: 80px 1fr auto 46px; align-items: center; gap: 10px; }
.sp-sexlbl { font-size: 13px; font-weight: 700; color: var(--cell); }
.sp-sexrow b { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-sexpct { font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; }
.sp-note, .sp-defs { margin: 0; }
.sp-defs { margin-top: 4px; }
.trow.sp-on { background: var(--rowhov); }
.trow.sp-on b { color: var(--accent); }

@media (max-width: 900px) {
  .sp-cols { grid-template-columns: 1fr; }
  .sp-sexrow { grid-template-columns: 70px 1fr auto 40px; }
}
.st-note { margin: 0 20px 16px; }

/* Cancelled-visit share under the KPI number on Visiidid */
.stat-card .stat-sub { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }

/* ---------- Time picker (flatpickr in time-only mode — Töötajad → Tunnid) ----
   Stock flatpickr prints the hour and the minute as two bare numbers on a white
   slab, which reads as a label rather than something you type in. Dressed like
   the fields it drops out of — and only for the time-only panel, so the date
   calendars keep the look they already have. */
.flatpickr-calendar.noCalendar.hasTime {
  width: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); box-shadow: var(--cardsh);
}
/* the little arrow pointing back at the field is drawn in the library's own
   colours and cannot follow the theme; the panel reads fine without it */
.flatpickr-calendar.noCalendar.hasTime::before,
.flatpickr-calendar.noCalendar.hasTime::after { display: none; }
.flatpickr-calendar.noCalendar .flatpickr-time {
  height: auto; max-height: none; display: flex; align-items: center; gap: 6px;
}
.flatpickr-calendar.noCalendar .flatpickr-time .numInputWrapper {
  flex: 0 0 auto; width: 78px; height: 40px; border: 1px solid var(--fline);
  border-radius: 9px; background: var(--field);
}
.flatpickr-calendar.noCalendar .flatpickr-time .numInputWrapper:hover { background: var(--field); }
.flatpickr-calendar.noCalendar .flatpickr-time input.numInput {
  height: 100%; padding: 0 16px 0 10px; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 16px; font-weight: 700;
}
.flatpickr-calendar.noCalendar .flatpickr-time input.numInput:focus { background: transparent; }
.flatpickr-calendar.noCalendar .flatpickr-time .numInputWrapper span { border-color: var(--line2); }
.flatpickr-calendar.noCalendar .flatpickr-time .numInputWrapper span:hover { background: var(--btn2bg); }
.flatpickr-calendar.noCalendar .flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--muted); }
.flatpickr-calendar.noCalendar .flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--muted); }
.flatpickr-calendar.noCalendar .flatpickr-time .flatpickr-time-separator {
  width: auto; padding: 0 2px; color: var(--muted); font-weight: 800;
}
/* no hover on a touch screen, so the steppers have to be there from the start */
@media (max-width: 900px) {
  .flatpickr-calendar.noCalendar .flatpickr-time .numInputWrapper { width: 92px; height: 46px; }
  .flatpickr-calendar.noCalendar .flatpickr-time .numInputWrapper span { opacity: 1; }
}

/* A file input sizes itself around its button plus the file name and will not
   shrink below that, so on a narrow card or modal it sticks out of its box. */
input[type=file] { max-width: 100%; }

/* Kinkekaardid: the correct/remove buttons on a usage row. Small and quiet —
   they sit in a ledger that is read far more often than it is corrected. */
.kk-uact { display: flex; gap: 4px; align-items: center; }
.kk-uact .btn-sm { padding: 3px 8px; font-size: 12px; line-height: 1.2; }
.kk-udel { color: var(--tag-bad-fg); }

/* ---------- Kassa: the day's till printout, photographed at the desk ----------
   Same shape as the upkeep round's strip, but the add button is a plain
   file-input label rather than a tile, because it sits in a modal beside the
   figures rather than in a grid of its own. */
.ka-photos { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line2); }
.ka-photos.busy { opacity: .55; pointer-events: none; }
.ka-photohead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.ka-photoadd { position: relative; overflow: hidden; cursor: pointer; }
.ka-photoadd input { position: absolute; opacity: 0; width: 0; height: 0; }
.ka-shots { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ka-shot { position: relative; width: 96px; }
.ka-shot img {
  width: 96px; height: 96px; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--line); background: var(--field);
}
.ka-shot figcaption { margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.ka-shotdel {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--card); background: var(--tag-bad-fg); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.trow sup { font-size: 9px; font-weight: 800; }

/* ---------------------------------------------------------------------------
   Phones: 16px in every field
   iOS Safari zooms the page the moment a field holding text under 16px takes
   focus, and it does not zoom back out — the reader is left panned sideways on
   a page that fitted perfectly a second earlier. Components style their fields
   as small as 12.5px, so this has to outrank all of them; !important is the
   only thing that reliably does at every nesting depth. Checkboxes, radios and
   colour swatches are sized by width/height and ignore it. Select2 copies the
   metrics of the <select> it replaces when it initialises (lhkSelect2Measure in
   app.js), so its pickers follow from the same rules.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
  /* the kiosk PIN field is deliberately a size up */
  .fld input.kiosk-qr { font-size: 17px !important; }

  /* boxes drawn around the smaller text — keep it clear of the border */
  .hr-emp { height: 40px; }
  .sc-search { height: 38px; }
  .kf-add input, .kf-add select { height: 38px; }
  .sal-num { height: 38px; }
  .row-detail .fld-sm select { height: 42px; max-width: 100%; }
  .compose-grid .fld-sm input, .compose-grid .fld-sm select,
  .card-grid .fld-sm input, .card-grid .fld-sm select { height: 42px; }
  .card-grid .fld-sm textarea { height: 84px; }

  /* a search box that was a fixed 230px beside other controls takes the row */
  .sal-search, .mn-search { width: 100%; }

  /* Five KPI tiles one under another push the page itself below the fold. Two
     to a row, with the number a size down so the widest counts still fit. */
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
  .stat-card { padding: 14px 15px; }
  .stat-card .val { font-size: 24px; }

  /* Select2 drops its panel at the field's coordinates in the page. A field
     inside a horizontally scrolled table sits hundreds of pixels to the right
     of a phone screen, so the panel lands off-screen and drags the document
     sideways with it. Pin the panel to the screen instead — it beats the inline
     left/width Select2 writes on every reposition, hence !important. */
  body > .select2-container--open { left: 8px !important; right: 8px !important; width: auto !important; }
  /* and the panel is sized from the field it belongs to (dropdownAutoWidth
     writes an inline min-width), which in that same table is far wider than
     the screen */
  body > .select2-container--open .select2-dropdown { width: 100% !important; min-width: 0 !important; }

  /* The picker's text size is copied off the <select> it replaced, through
     --s2fs (lhkSelect2Measure/lhkSelect2Resync in app.js). Say it here as well:
     a box that missed a resize must never sit beside a 16px input at 13px. */
  .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 16px; }

  /* Select2's own boxes: the dropdown search, the multi-select's inline one */
  .select2-container--default .select2-search--dropdown .select2-search__field { height: 42px; }
  .select2-container--default .select2-search--inline .select2-search__field { height: 30px; }
  .select2-container--default .select2-selection--multiple .select2-selection__choice { height: 28px; font-size: 14px; }
  .select2-container--default .select2-results__option { padding: 11px 12px; font-size: 15px; }
}

/* Vacations: a declined or withdrawn request is struck through, so the list
   separates what stands from what does not at a glance. The status tag keeps
   its own styling — striking that too would make it hard to read. */
.trow.hol-declined > div { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--muted); }
.trow.hol-declined > div:has(.tag) { text-decoration: none; }
.trow.hol-declined .tag { text-decoration: none; }

/* Salaries: the position sits under the name, and the add controls in the bar */
.sal-namecell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sal-amet { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sal-addform { display: inline-flex; }
.sal-addform select { min-width: 210px; }
/* Kiosk: a misread badge answers over the screen the person is looking at.
   Sized for a doorway display read at arm's length, not a desk. */
.kiosk-toast {
  position: fixed; left: 50%; bottom: 46px; transform: translate(-50%, 18px);
  max-width: min(560px, 92vw); padding: 16px 28px; border-radius: 14px;
  background: var(--tag-bad-bg); color: var(--tag-bad-fg);
  font-size: 20px; font-weight: 800; line-height: 1.3; text-align: center;
  box-shadow: var(--cardsh); z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.kiosk-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 600px) { .kiosk-toast { font-size: 17px; padding: 14px 20px; bottom: 28px; } }
/* Reception plan opened by someone who may only read it: the names stay in
   full colour, only the invitation to click goes away. */
.sc-ro .sc-pick { cursor: default; }
/* Koolitusfond: the year filter shares its toolbar with a flexible search box
   and no pager, so nothing wrapped it onto its own line and it was squeezed to
   a sliver — which Select2 then copied as the control's width. It keeps its
   size instead; under 900px the shared .jh-typesel rule still takes the row. */
@media (min-width: 901px) { .tf-yearsel { flex: 0 0 auto; min-width: 140px; } }

/* ---------- Töötajad → Sõidupäevikud (.drv-*) ---------- */
.drv-barsp { flex: 1 1 auto; }
.drv-doc { min-width: 0; }
.drv-doc .ellip, .drv-who .ellip, .drv-stc .ellip { display: block; }
.drv-stc { min-width: 0; }
.drv-st { max-width: 100%; }
.drv-cnt { font-weight: 800; color: var(--cell); white-space: nowrap; }
.drv-cnt.none { font-weight: 600; color: var(--muted); }
.drv-plate { text-transform: uppercase; }
.lg-frow .fld-sm.drv-platefld, .lg-frow .fld-sm.drv-kmfld { flex: 1 1 120px; }
.drv-lock { display: block; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.drv-files { display: flex; flex-direction: column; gap: 6px; }
.drv-file {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px 7px 10px; background: var(--field);
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.drv-file > .ellip { flex: 1 1 auto; }
.drv-file a { color: var(--accent); text-decoration: none; }
.drv-file a:hover { text-decoration: underline; }
.drv-file.gone > .ellip { color: var(--muted); text-decoration: line-through; }
.drv-ext {
  flex: 0 0 auto; min-width: 44px; text-align: center; padding: 3px 6px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; background: var(--tag-info-bg); color: var(--tag-info-fg);
}
.drv-fsize { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.drv-fdel {
  flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 8px; padding: 0; cursor: pointer;
  background: var(--tag-bad-bg); color: var(--tag-bad-fg); font-size: 12px; font-weight: 800;
}
.drv-fadd {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  border: 1px dashed var(--fline); border-radius: 10px; background: var(--field); color: var(--muted);
  padding: 8px 12px; font-size: 13px; font-weight: 800; text-align: center; cursor: pointer;
}
.drv-fadd input { position: absolute; opacity: 0; width: 0; height: 0; }
.drv-fadd .ic { font-size: 17px; }
.drv-fadd.has { border-style: solid; border-color: var(--accent); color: var(--accent); }
.drv-fadd:focus-within { box-shadow: 0 0 0 3px var(--focus); }
.drv-queue { display: flex; flex-wrap: wrap; gap: 6px; }
.drv-queue:empty { display: none; }
.drv-queue span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: var(--chip); color: var(--cell); font-size: 12px; font-weight: 700;
}
.drv-fhint, .drv-nofiles { font-size: 12px; font-weight: 600; color: var(--muted); }
.drv-meta { display: flex; flex-direction: column; gap: 3px; }
.drv-meta .ok { color: var(--tag-good-fg); }
@media (min-width: 901px) { .drv-sel { flex: 0 0 auto; min-width: 170px; } }
/* the Sõidupäevikud tab on the employee card */
.drv-cardbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.drv-cardbar .sum { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.drv-flinks a, .drv-flinks s { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drv-reltable .jh-sub { white-space: nowrap; }
.drv-route { min-width: 140px; max-width: 260px; white-space: normal; }
.drv-repform { display: flex; align-items: center; gap: 6px; }
.drv-repform select { min-width: 150px; }
.drv-repform .btn-sm { flex: 0 0 auto; white-space: nowrap; }

/* ---------- Töötajad → Puhkuste reserv (.hrv-*) ---------- */
.sc-toolbar .hrv-hint { flex: 1 1 100%; order: 10; margin: 0; }
.btn-sm.hrv-on { border-color: var(--accent); color: var(--accent); }
.trow > .hrv-name { flex-wrap: wrap; gap: 4px 8px; white-space: normal; min-width: 0; }
.hrv-name .tag { font-size: 11px; }
/* a figure from a loaded row, not from the calculation */
.hrv-row::before { content: '●'; margin-right: 4px; font-size: 8px; vertical-align: 2px; color: var(--accent); }
.trow > .hrv-stack { flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; }
.hrv-wait { font-size: 11px; font-weight: 700; color: var(--tag-warn-fg); white-space: nowrap; }
/* active staff no Tööleping covers in the year, listed apart for an admin to add the contract */
.stat-card.hrv-ncstat { cursor: pointer; }
.hrv-nctitle { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.hrv-nc .trow > .hrv-ncwhy .tag { white-space: normal; }
.hrv-nc .trow > .hrv-ncact { justify-content: flex-end; }
.hrv-sheet { display: flex; flex-direction: column; gap: 18px; padding-bottom: 6px; }
.hrv-h { margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hrv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hrv-sheet th.num, .hrv-sheet td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrv-ledger tr.hrv-cur td { background: var(--tag-info-bg); }
.hrv-ledger td .tag { margin-left: 6px; font-size: 11px; }
.hrv-form { border-top: 1px solid var(--line); padding-top: 14px; }
.hrv-fhint { margin: 0; }
/* an algsaldo a 1 January correction changed */
.hrv-fix::after { content: '✎'; margin-left: 3px; font-size: 10px; color: var(--tag-warn-fg); }
.hrv-years { display: flex; flex-wrap: wrap; gap: 6px; }
.hrv-ychip {
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; background: var(--field);
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--cell); cursor: pointer;
}
.hrv-ychip.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.hrv-ledger tr.hrv-yrow { cursor: pointer; }
.hrv-mtable tr.hrv-openrow td { font-weight: 700; }
.hrv-mtable tr.hrv-future td { color: var(--muted); }
.hrv-sub { display: block; font-size: 11px; font-weight: 700; color: var(--muted); white-space: normal; }
.hrv-sub.bad { color: var(--tag-bad-fg); }
.hrv-ctable td.hrv-note { white-space: normal; min-width: 120px; }
.hrv-ctable td.hrv-acts { text-align: right; white-space: nowrap; }
.hrv-corr .table-scroll { margin-bottom: 12px; }
.lg-frow .fld-sm.hrv-daysfld { flex: 1 1 150px; }
/* Töötajad → Puhkused: the card's Delete sits apart from the other actions */
.hol-actions .hol-del { margin-left: auto; }
/* Töötajad list: the filter form keeps its width, so the row wraps instead —
   shrunk, its Select2 pickers spilled over the "Lisa töötaja" button beside it */
@media (min-width: 901px) { .head > .log-filter.emp-filter { flex: 0 0 auto; } }
@media (max-width: 900px) {
  .lg-cards .trow > .hrv-stack { align-items: center; }
  /* the ledger's headings wrap so the six columns fit a phone */
  .hrv-sheet th, .hrv-sheet th.num { white-space: normal; vertical-align: bottom; letter-spacing: 0; }
  .hrv-sheet .rel-table th, .hrv-sheet .rel-table td { padding-left: 4px; padding-right: 4px; }
  .hrv-sheet .hrv-ledger th { font-size: 9.5px; }
  .hrv-sheet .hrv-ledger td { font-size: 12.5px; }
}
.lg-frow .fld-sm.drv-routefld { flex: 3 1 260px; }
.lg-frow .fld-sm.drv-sumfld { flex: 1 1 120px; }
.drv-repmodal { width: min(520px, 96vw); }
.drv-payhint { margin-top: -6px; }
/* a plate that opens its car's registration certificate: ✓ attached, ! missing */
.drv-platebtn {
  display: flex; align-items: center; gap: 5px; width: max-content; max-width: 100%; margin-top: 3px;
  padding: 1px 8px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 11.5px; font-weight: 800; background: var(--tag-warn-bg); color: var(--tag-warn-fg);
}
.drv-platebtn.has { background: var(--tag-good-bg); color: var(--tag-good-fg); }
.drv-platebtn .ic::before { content: '!'; }
.drv-platebtn.has .ic::before { content: '✓'; }
.drv-platebtn:hover { filter: brightness(.96); }
.drv-platebtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.drv-certrow { display: flex; margin-top: -4px; }
/* above the sheet it can be opened from */
.drv-certmodal { width: min(560px, 96vw); z-index: 210; }
.drv-cert { display: flex; flex-direction: column; gap: 12px; }
.drv-certhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drv-certplate { font-size: 18px; font-weight: 800; letter-spacing: .04em; color: var(--ink); }
.drv-certform { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line2); padding-top: 12px; }
.drv-certfoot { display: flex; justify-content: flex-end; }
@media (max-width: 900px) {
  .drv-cardbar .btn-sm { flex: 1 1 100%; justify-content: center; }
  .drv-repform { flex: 1 1 100%; flex-wrap: wrap; }
  .drv-repform select { flex: 1 1 100%; min-width: 0; }
  .drv-cardbar .drv-repform .btn-sm { flex: 1 1 100%; }
  .drv-repmodal { width: 100%; }
  .drv-certmodal { width: 100%; }
  .drv-certmodal #drv-certholder { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 3px 16px; }
  .lg-cards .drv-tbl .trow > .lg-c .drv-platebtn { margin: 4px auto 0; }
  .drv-certfoot .btn-sm { width: 100%; height: 46px; justify-content: center; }
  .drv-repmodal #drv-repholder { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 3px; }
  .drv-repmodal .lg-form { overflow: visible; padding: 0; }
  .drv-flinks a, .drv-flinks s { max-width: 100%; }
}
@media (max-width: 900px) {
  /* a card: period · date · type, then plate · files · status, the document,
     and who added it as the footer; a long type or name wraps inside its chip */
  .lg-cards .drv-tbl .trow > .lg-c .ellip { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .lg-cards .drv-tbl .trow > .lg-f { order: 3; }
  /* the status chip gets the wider share of its row, and the confirmer's name
     wraps between words, never inside one — this has to outrank the
     anywhere-wrap on the chips above */
  .lg-cards .drv-tbl .trow > .drv-stc { flex: 1 1 40%; }
  .lg-cards .drv-tbl .trow > .lg-c .drv-st { border-radius: 10px; }
  .lg-cards .drv-tbl .trow > .lg-c .drv-st .ellip { overflow-wrap: normal; }
  .lg-cards .drv-tbl .drv-doc { text-align: right; }
  .lg-cards .drv-tbl .trow > .drv-who { flex: 1 1 100%; order: 5; }
  .lg-cards .drv-tbl .trow > .drv-who::before { content: attr(data-l) ': '; }
  .lg-cards .drv-tbl .trow > .drv-who .ellip, .lg-cards .drv-tbl .trow > .drv-who .jh-sub { display: inline; margin: 0; }
  .lg-cards .drv-tbl .trow > .drv-who .jh-sub::before { content: ' · '; }
  .drv-fdel { width: 36px; height: 36px; }
}

/* Employee documents: the type picker in a document row (admins, on
   Töötajad → Dokumendid and in the employee card), and the cell's flash once a
   change is saved — the select itself may be hidden under select2 */
.doc-typepick { min-width: 230px; max-width: 100%; }
.rel-table td.doc-saved,
.rel-table td.doc-saved .select2-selection { background: var(--tag-good-bg); transition: background .3s; }

/* Admin → Muudatuste logi (public/audit.php): one card per save, each change
   in it as field / old / new. Values wrap anywhere — a long hash, a base64
   body or a URL must never push the page sideways on a phone. */
.log-filter.au-filter { flex-wrap: wrap; min-width: 0; }
.au-filter input[type=search] { flex: 1 1 200px; min-width: 0; }
.au-filter select { max-width: 240px; }
.au-filter input:not([type=search]):not([type=hidden]) {
  height: 38px; width: 128px; border: 1px solid var(--fline); border-radius: 10px;
  padding: 0 10px; font-size: 13.5px; color: var(--ink); background: var(--field); outline: none;
}
.au-filter input:not([type=search]):not([type=hidden]):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.au-intro { padding: 12px 20px 0; font-size: 13px; line-height: 1.5; color: var(--sub); }
.au-list { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.au-foot { padding: 0 20px 18px; display: flex; justify-content: flex-end; }
.au-grp { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.au-ghead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 9px 14px;
  background: var(--bg); border-bottom: 1px solid var(--line2); font-size: 12.5px; color: var(--sub);
}
.au-time { font-weight: 800; color: var(--label); font-variant-numeric: tabular-nums; }
.au-who { font-weight: 800; color: var(--ink); }
.au-ghead .tag { font-size: 11px; padding: 2px 8px; }
.au-where, .au-tbl, .au-sql { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.au-where { font-size: 12px; overflow-wrap: anywhere; }
.au-ip { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.au-ent { padding: 12px 14px; min-width: 0; }
.au-ent + .au-ent { border-top: 1px dashed var(--line); }
.au-ehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.au-ehead .tag { font-size: 11px; padding: 3px 9px; }
.au-lbl { font-weight: 800; color: var(--ink); }
.au-key { font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.au-cnt { font-size: 12px; color: var(--sub); }
.au-tbl { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.au-rk { margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--label); }
.au-ctx { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 5px; font-size: 12.5px; color: var(--sub); }
.au-ctx > span { min-width: 0; overflow-wrap: anywhere; }
.au-ctx b { font-weight: 700; color: var(--label); }
.au-diff { margin-top: 8px; font-size: 13px; }
.au-row {
  display: grid; grid-template-columns: minmax(96px, 200px) minmax(0, 1fr) minmax(0, 1fr);
  gap: 3px 12px; padding: 5px 0; border-top: 1px solid var(--line2); align-items: start;
}
.au-diff > .au-row:first-child { border-top: 0; }
.au-one .au-row { grid-template-columns: minmax(96px, 200px) minmax(0, 1fr); }
.au-row.au-hd { padding-top: 0; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.au-f { font-weight: 700; color: var(--label); overflow-wrap: anywhere; }
.au-o, .au-n { min-width: 0; color: var(--cell); white-space: pre-wrap; overflow-wrap: anywhere; }
.au-update .au-row:not(.au-hd) .au-o,
.au-update .au-row:not(.au-hd) .au-n { justify-self: start; max-width: 100%; padding: 1px 7px; border-radius: 6px; }
.au-update .au-row:not(.au-hd) .au-o { background: var(--tag-bad-bg); }
.au-update .au-row:not(.au-hd) .au-n { background: var(--tag-good-bg); }
.au-delete .au-o { color: var(--sub); }
.au-nil { color: var(--muted); }
.au-ref { font-size: 12px; font-weight: 600; color: var(--sub); }
.au-more > summary { cursor: pointer; padding: 6px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.au-note { margin-top: 6px; font-size: 12.5px; color: var(--sub); }
.au-sql {
  display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--bg);
  font-size: 12px; color: var(--cell); white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .au-intro { padding: 12px 14px 0; }
  .au-list { padding: 12px; gap: 12px; }
  .au-foot { padding: 0 12px 14px; justify-content: center; }
  .au-filter input[type=search] { flex: 1 1 100%; }
  .au-filter select { flex: 1 1 calc(50% - 4px); max-width: none; min-width: 0; }
  .au-filter input:not([type=search]):not([type=hidden]) { flex: 1 1 calc(50% - 4px); width: auto; min-width: 0; }
  .au-ip { margin-left: 0; }
  /* the field name takes its own line, old and new sit side by side under it */
  .au-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .au-row > :first-child { grid-column: 1 / -1; }
  .au-one .au-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .au-one .au-row > :first-child { grid-column: auto; }
}

/* Kassa (public/kassa.php), the day list: one row per register — every figure
   of the sheet, the two balances and the two checks — a table on a wide screen,
   a card on a phone. A sheet failing a check is tinted red with a red edge. */
.kx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--line2); font-size: 12.5px; color: var(--sub); }
.kx-sp { flex: 1; }
.kx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.kx-legend b { color: var(--label); }
.kx-legend .tag, .kx-diffbtn .tag { font-size: 11px; padding: 2px 8px; }
.kx-diffbtn { display: inline-flex; align-items: center; gap: 6px; }
.kx-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.kx-pbtn { padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  font-size: 13px; font-weight: 700; color: var(--navfg); text-decoration: none; }
.kx-pbtn:hover { background: var(--btn2bg); text-decoration: none; }
.kx-pbtn.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.kx-pdesk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kx-pmob { display: none; }
.kx-pmob select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--fline); border-radius: 10px;
  background: var(--field); color: var(--ink); }
/* a declared width: select2 copies it, even when the select is hidden at init */
.kx-month { width: 200px; height: 38px; padding: 0 12px; border: 1px solid var(--fline); border-radius: 10px;
  background: var(--field); color: var(--ink); font-size: 13.5px; }
.kx-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.kx-actions .kx-delbtn { margin-right: auto; color: var(--tag-bad-fg); }
/* Each row is its own grid, so only fixed and fr tracks keep the columns in
   line from row to row — hence minmax() everywhere and no auto sizing. The
   minimum fits the list box of a 1280-wide screen next to the app sidebar. */
.table-scroll > .kx-tbl { min-width: 960px; }
.kx-row {
  display: grid; align-items: center; gap: 0 8px; padding: 9px 14px;
  grid-template-columns: minmax(124px, 1.4fr) repeat(9, minmax(66px, 1fr)) minmax(100px, 1.2fr) 20px;
  border-bottom: 1px solid var(--line2); font-size: 13px; color: var(--cell);
}
.kx-head { align-items: end; background: var(--bg); font-size: 10px; font-weight: 800; letter-spacing: .02em;
  line-height: 1.25; text-transform: uppercase; color: var(--muted); }
.kx-head .n { white-space: normal; }
.kx-head small { display: block; font-size: 9.5px; letter-spacing: .04em; color: var(--accent); }
.kx-row .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kx-sheet { cursor: pointer; }
.kx-sheet:hover { background: var(--bg); }
.kx-sheet:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kx-bad, .kx-bad:hover { background: var(--tag-bad-bg); box-shadow: inset 3px 0 0 var(--tag-bad-fg); }
.kx-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; color: var(--ink); }
.kx-cl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-nr { color: var(--sub); font-variant-numeric: tabular-nums; }
.kx-ic { font-size: 12px; }
.kx-ic.tag { font-size: 10px; padding: 1px 6px; }
.kx-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.kx-dot.kx-c1 { background: #2ba3b0; }
.kx-dot.kx-c2 { background: #2ebd85; }
.kx-dot.kx-c3 { background: #8720e2; }
.kx-strong { font-weight: 800; color: var(--ink); }
.kx-neg { color: var(--tag-bad-fg); font-weight: 800; }
.kx-chk { display: flex; flex-wrap: wrap; gap: 4px; }
.kx-chk .tag { font-size: 11px; padding: 2px 8px; white-space: nowrap; }
.kx-na { color: var(--muted); }
.kx-act { text-align: right; }
.kx-day { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px 8px;
  border-bottom: 1px solid var(--line); font-weight: 800; color: var(--ink); }
.kx-day .tag { font-size: 11px; padding: 2px 8px; }
.kx-sum { background: var(--bg); font-weight: 800; color: var(--label); }
.kx-sum .kx-name { color: var(--label); }
.kx-empty { padding: 26px 18px; color: var(--muted); }
.trow.kx-sumdiff .ka-lbl { color: var(--tag-bad-fg); }

/* The sheet itself: sections, where each figure comes from, and the live check */
.compose-grid.ka-form { align-items: start; }
.ka-form .kx-sec { padding-top: 12px; border-top: 1px solid var(--line2); font-size: 12.5px; font-weight: 800; color: var(--label); }
.ka-form .kx-sec.first { padding-top: 0; border-top: 0; }
.ka-form .kx-sec small { margin-left: 6px; font-weight: 600; color: var(--muted); }
.ka-form .kx-src { font-size: 11px; line-height: 1.35; color: var(--muted); }
.ka-form .kx-src .warn { color: var(--tag-warn-fg); }
.compose-grid.ka-form .fld-sm input.kx-ro { background: var(--bg); color: var(--sub); cursor: default; }
.kx-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.kx-chk-box { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.kx-chk-box.bad { border-color: var(--tag-bad-fg); background: var(--tag-bad-bg); }
.kx-chk-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-weight: 800; color: var(--ink); }
.kx-chk-h .tag { font-size: 11px; padding: 2px 8px; }
.kx-chk-l { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--sub); }
.kx-chk-l output { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kx-chk-box.bad .kx-chk-d output { color: var(--tag-bad-fg); }

@media (max-width: 900px) {
  /* Phones: no summary table, no legend, no day totals and no delete button in
     the list (the sheet has one). A register is two short lines — which one and
     whether it checks out, then cash, card and balance; a tap opens the rest. */
  .kx-stats, .kx-mhide, .kx-legend, .kx-sp, .kx-act, .kx-sum, .kx-head, .kx-pdesk { display: none; }
  .kx-pmob { display: block; flex: 1 1 100%; }
  .kx-period { margin-bottom: 10px; }
  .kx-card { background: none; border: 0; box-shadow: none; }
  .kx-bar { justify-content: flex-end; padding: 0 0 2px; border-bottom: 0; }
  .table-scroll > .kx-tbl { min-width: 0; }
  .kx-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 10px; margin: 0 0 6px; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 14px; }
  .kx-row.kx-bad { background: var(--tag-bad-bg); }
  .kx-row .n { min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; }
  .kx-row .n::before { content: attr(data-l); display: block; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px;
    font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
  .kx-name { grid-column: 1 / 3; order: -2; }
  .kx-chk { grid-column: 3; order: -1; justify-content: flex-end; }
  .kx-day { padding: 10px 2px 6px; border-bottom: 0; font-size: 13.5px; }
  .kx-empty { padding: 18px 4px; }
  /* the money fields two to a row rather than one */
  .compose-grid.ka-form .w-3 { grid-column: span 6; }
}

/* ---------- Töötajad → Avaldused (.av-*) ---------- */
/* the application: its title, who it is for, and its text folded away */
.av-desc { margin-bottom: 16px; }
.av-dhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 20px; }
.av-dhead .ttl { font-size: 15px; font-weight: 800; color: var(--ink); }
.av-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.av-meta .tag { font-size: 11px; padding: 2px 8px; }
.av-dtext { border-top: 1px solid var(--line2); }
.av-dtext > summary {
  display: flex; align-items: center; gap: 8px; padding: 11px 20px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 800; color: var(--accent);
}
.av-dtext > summary::-webkit-details-marker { display: none; }
.av-dtext > summary::before { content: '▸'; transition: transform .15s; }
.av-dtext[open] > summary::before { transform: rotate(90deg); }
.av-texts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px 28px; padding: 2px 20px 18px; }
.av-lang { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* legacy editor HTML: its inline dark text colour and pixel sizes would fight
   the theme, so the page's own win */
.av-body { font-size: 14px; line-height: 1.6; color: var(--cell); overflow-wrap: anywhere; }
.av-body [style] { color: inherit !important; font-size: inherit !important; }
.av-body p { margin: 0 0 8px; }
.av-body p:last-child { margin-bottom: 0; }
.av-body .text-indigo { color: var(--accent) !important; }
.stat-card .av-of { font-size: .6em; font-weight: 700; color: var(--muted); }
/* the list */
.av-barsp { flex: 1 1 auto; }
.av-who { min-width: 0; }
.av-who > .ellip { display: block; }
.av-note { margin-left: 8px; padding: 2px 8px; font-size: 11px; vertical-align: 1px; }
.av-ans { display: flex; align-items: center; min-width: 0; }
.av-anscell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.av-dots { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.av-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--chip); }
.av-dots i.y { background: var(--tag-good-fg); }
.av-dots i.n { background: var(--tag-bad-fg); }
/* the list always has a pager, so on a laptop-width screen the two pickers would
   squeeze the search box to nothing: they drop under it instead */
.log-filter.av-filter { flex-wrap: wrap; min-width: 0; }
.log-filter.av-filter input[type=search] { flex: 1 1 200px; min-width: 180px; }
@media (min-width: 901px) { .av-sel { flex: 0 0 auto; min-width: 170px; } }
/* the sheet: one person's submissions, the one in force first */
.av-modal { width: min(600px, 94vw); }
.av-person { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.av-person b { font-size: 16px; font-weight: 800; color: var(--ink); }
.av-vers { display: flex; flex-direction: column; gap: 12px; }
.av-ver { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--field); }
.av-ver.now { border-color: var(--tag-good-fg); }
.av-vhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.av-vhead .av-pdf { margin-left: auto; }
/* the PDF preview over the sheet */
.av-pdfmodal { width: min(820px, 94vw); }
.av-pdfframe { display: block; width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.av-pdffoot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.av-fields { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.av-fields > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.av-fields dt { font-weight: 700; color: var(--muted); }
.av-fields dd { margin: 0; font-weight: 800; color: var(--ink); text-align: right; }
.av-fields dd.good { color: var(--tag-good-fg); }
.av-fields dd.bad { color: var(--tag-bad-fg); }
.av-none { font-size: 13px; font-weight: 600; color: var(--muted); }
.av-code {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); overflow-wrap: anywhere;
  font: 600 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted);
}
.av-code span { font-weight: 800; }
@media (max-width: 900px) {
  .av-dhead, .av-dtext > summary { padding-left: 16px; padding-right: 16px; }
  .av-texts { padding: 2px 16px 16px; }
  /* a card: the name with the profile under it, the answer across, then when and how many times */
  .lg-cards .av-tbl .trow > .av-who { flex: 1 1 100%; }
  .lg-cards .av-tbl .trow > .av-who .ellip { white-space: normal; overflow-wrap: anywhere; }
  .lg-cards .av-tbl .trow > .av-ans .av-anscell { justify-content: flex-end; }
}

/* ---------- Image preview slider (app.js lhkLb*) ----------
   Dark whatever the theme: a photo reads best on black. Above every other modal,
   because a picture is often opened from inside one. */
html:has(body.lb-lock) { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 600; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: rgba(6, 12, 20, .94); color: #fff;
}
.lb[hidden] { display: none; }
.lb-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; min-width: 0; }
.lb-count { font-weight: 800; font-variant-numeric: tabular-nums; opacity: .85; white-space: nowrap; }
.lb-cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.lb-btn, .lb-nav {
  display: grid; place-items: center; flex: none; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; line-height: 1; text-decoration: none;
}
.lb-btn { width: 40px; height: 40px; font-size: 18px; }
.lb-btn:hover, .lb-nav:hover { background: rgba(255, 255, 255, .24); }
.lb-btn:focus-visible, .lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-stage { display: grid; place-items: center; min-height: 0; padding: 0 80px 24px; }
.lb-img {
  max-width: 100%; max-height: calc(100dvh - 88px); object-fit: contain; border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); user-select: none; transition: opacity .15s;
}
.lb-loading .lb-img { opacity: .35; }
.lb-err { max-width: 420px; margin: 0; text-align: center; font-size: 15px; line-height: 1.5; opacity: .9; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 34px; padding-bottom: 4px; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-single .lb-nav { display: none; }
.lb-single .lb-stage { padding-inline: 16px; }
@media (max-width: 900px) {
  .lb-stage { padding: 0 8px 80px; }
  .lb-img { max-height: calc(100dvh - 150px); }
  .lb-single .lb-stage { padding-bottom: 16px; }
  .lb-single .lb-img { max-height: calc(100dvh - 88px); }
  .lb-nav { top: auto; bottom: 16px; transform: none; width: 50px; height: 50px; }
  .lb-prev { left: calc(50% - 62px); }
  .lb-next { right: calc(50% - 62px); }
}
.uk-shots a, .uk-thumbs a, .ka-shot a, .ts-qimg, .mt-qimg { cursor: zoom-in; }

/* Driving-log sheet (Töötajad → Sõidupäevikud and Minu sõidupäevikud): a
   confirmed log's fields are disabled, but a disabled text box was painted
   exactly like an editable one — greyed here the way read-only inputs are
   elsewhere, so a locked log looks locked */
.drv-form :is(input, textarea):disabled { color: var(--sub); background: var(--btn2bg); cursor: not-allowed; }

/* Admin → Seaded → Teavitused (app/notify.php) */
.nt-privacy { margin-top: -6px; }
.nt-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.nt-ev { border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; background: var(--card); scroll-margin-top: 90px; }
.nt-ev:target { border-color: #1274d6; box-shadow: 0 0 0 3px rgba(18, 116, 214, .15); }
.nt-ev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nt-ev-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-ev-t b { font-size: 14px; color: var(--ink); }
.nt-ev-t span { font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.nt-ev-t .nt-builtin { color: var(--muted); font-style: italic; }
.nt-ev-head .btn-sm { flex: 0 0 auto; white-space: nowrap; }
.nt-none { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.nt-rule { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line2); }
.nt-rule > .tag, .nt-rule > .btn-sm { flex: 0 0 auto; }
.nt-rule.off .nt-rule-b { opacity: .55; }
.nt-rule-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.nt-chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--chip); color: var(--ink); }
.nt-chip.where { background: var(--tag-info-bg); color: var(--tag-info-fg); }
.nt-chip.dyn { background: var(--tag-warn-bg); color: var(--tag-warn-fg); }
.nt-names { font-size: 12.5px; color: var(--sub); line-height: 1.5; overflow-wrap: anywhere; }
.nt-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.nt-meta .nt-note { font-style: italic; }
.nt-meta .nt-warn { color: var(--tag-bad-fg); }
.nt-modal { width: min(760px, 96vw); }
.nt-evname { margin-bottom: 16px; }
/* the grid's own display rules outrank the hidden attribute */
.nt-form [hidden] { display: none !important; }
.nt-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 4px; }
@media (max-width: 900px) {
  .nt-ev-head { flex-direction: column; }
  .nt-rule { flex-wrap: wrap; }
  .nt-rule-b { order: 2; flex-basis: 100%; }
  .nt-form.compose-grid > * { grid-column: 1 / -1; }
}

/* Kab. korrashoid access (15.09): a read-only sheet disables its controls through
   one fieldset, which must not add a box of its own to the column layout */
.uk-fs { display: contents; }
.uk-scope { border-top: 0; border-bottom: 1px solid var(--line2); }
.uk-setform { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.uk-setrow { display: flex; flex-direction: column; gap: 6px; }
.uk-setrow .fld-sm { display: flex; flex-direction: column; gap: 5px; }
.uk-setrow .fld-sm > span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.uk-recent { font-size: 12px; color: var(--muted); line-height: 1.5; }