/* ── Работно бюро dashboard ── */
.dash-page { padding: 20px 28px 60px; }

.dash-layout { display: block; }

/* Plain layout wrapper now - no card background/border behind the whole
   dashboard. Each tab manages its own content blocks (tables, cards). */
.dash-main { }

/* Tab-panel content no longer gets a second, narrower width cap on top of
   .dash-page - every crm/_*.html partial's own .container override is
   neutralized here so content can use the full available width. */
.dash-tab-panel .container { max-width: none; margin: 0; padding: 0; }

/* ── Tabs ── */
.dash-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.dash-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 7px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: all var(--t); font-family: inherit; white-space: nowrap;
}
.dash-tab i { font-size: .74rem; }
.dash-tab--active { border-color: rgba(201,162,39,.4); background: rgba(201,162,39,.12); color: var(--gold); }
.dash-tab-panel[hidden] { display: none; }

/* ── Shared tab-content header: title + description + top-right actions ── */
.dash-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 0 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.dash-head__title { font-family: var(--font-display); color: var(--white); margin: 0 0 4px; font-size: 1.28rem; }
.dash-head__sub { color: var(--text-muted); font-size: .83rem; margin: 0; }
.dash-head__actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

.dash-section-label {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em; margin: 26px 0 11px;
}
.dash-section-label:first-child { margin-top: 0; }

/* ── Data table (Клиенти / Кантора / Съобщения / Документи lists) ── */
.dtable-wrap { border: 1px solid var(--border); border-radius: var(--r); overflow-x: auto; margin-bottom: 12px; }
table.dtable { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 620px; }
table.dtable th {
  text-align: left; padding: 10px 14px; background: var(--bg-card-2); color: var(--text-muted);
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.dtable td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
table.dtable tbody tr:last-child td { border-bottom: none; }
table.dtable tbody tr:hover { background: rgba(255,255,255,.025); }
table.dtable td.dtable-muted { color: var(--text-muted); }
table.dtable td.dtable-actions { white-space: nowrap; text-align: right; }
.dtable-empty { padding: 28px 14px; text-align: center; color: var(--text-muted); font-size: .84rem; }
.dtable-footer { display: flex; justify-content: flex-end; margin: 0 2px 16px; font-size: .78rem; color: var(--text-muted); }

.dchip {
  display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.dchip--green { background: rgba(76,175,110,.14); color: #6fcf6f; }
.dchip--gold { background: rgba(201,162,39,.14); color: var(--gold); }
.dchip--red { background: rgba(192,57,43,.14); color: var(--red-hover); }
.dchip--muted { background: var(--bg-card-2); color: var(--text-muted); }

.dtable-link-btn {
  background: transparent; border: none; color: var(--gold); font-size: .77rem; font-weight: 700;
  cursor: pointer; padding: 4px 6px; font-family: inherit;
}
.dtable-link-btn--danger { color: var(--red-hover); }

/* Danger variant of .btn-outline - destructive actions (bulk/all delete)
   that need more visual weight than a .dtable-link-btn--danger text link
   but shouldn't default to solid-red (that's reserved for "are you sure"
   confirmation states elsewhere, not the trigger button itself). */
.btn-outline--danger { color: var(--red-hover); border-color: var(--border-red); }
.btn-outline--danger:hover { color: #fff; background: var(--red); border-color: var(--red); }

/* ── Client table bulk-select column + action bar ──────────────────────
   Row checkboxes reuse .gld-check-row (same square-box style as the
   message-recipients picker) instead of native checkboxes so it matches
   the rest of the dashboard's form controls. */
.dtable-check-th, .dtable-check-cell { width: 34px; padding-right: 0 !important; }
.dtable-check-cell .gld-check-row { padding: 0; }

.client-bulkbar-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin: -4px 0 12px;
}
.client-select-all { padding: 4px 2px; }
.client-select-all__label { font-size: .8rem; color: var(--text-muted); }
.client-select-all__hint { font-size: .72rem; opacity: .7; }

/* Hidden + collapsed until a row is checked, then fades/slides in - the
   selection count and destructive action only make sense to show once
   there's something selected. */
.client-bulkbar {
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
.client-bulkbar.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.client-bulkbar__count { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.client-bulkbar__count b { color: var(--gold); font-size: .95rem; }
.client-bulkbar kbd, .client-select-all__hint kbd {
  margin-left: 5px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg-card-2); font-size: .68rem; font-family: inherit; color: var(--text-muted);
}
.client-select-all__hint kbd { margin-left: 0; margin-right: 2px; }

@media (max-width: 680px) {
  .client-bulkbar-row { flex-direction: column; align-items: stretch; }
  .client-bulkbar.is-open { justify-content: space-between; }
  /* Shift+click range-select needs per-row checkboxes, which are desktop-
     only (see the .dtable--selectable mobile rule below) - the hint would
     be a dead end here. */
  .client-select-all__hint { display: none; }
}

/* ── Оперативно табло matrix cell buttons (mark obligation done) ──
   Icon + text label, self-explanatory without a separate legend - a
   bare icon-only circle tested confusing (looked like a passive status
   dot, not a clickable control). */
.obl-cell-btn {
  border-radius: 20px; border: 1.5px solid transparent; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
  font-size: .72rem; font-weight: 600; padding: 5px 11px;
  transition: transform var(--t), filter var(--t); font-family: inherit;
}
.obl-cell-btn:hover { transform: scale(1.04); filter: brightness(1.15); }
.obl-cell-btn i { font-size: .68rem; }
.obl-cell-btn--done { background: rgba(76,175,110,.16); border-color: rgba(76,175,110,.4); color: #6fcf6f; }
.obl-cell-btn--done_late { background: rgba(224,160,48,.16); border-color: rgba(224,160,48,.45); color: #e0a030; }
.obl-cell-btn--overdue { background: rgba(192,57,43,.16); border-color: rgba(192,57,43,.4); color: var(--red-hover); }
.obl-cell-btn--upcoming { background: var(--bg-card-2); border-color: var(--border); color: var(--text-muted); }
/* Статус filter (see .dash-filters "Статус" select): cells that don't
   match the selected status stay in place (a client's other obligations
   are still real context) but fade back so the eye lands on the ones
   that do - not removed, just de-emphasized. */
.obl-cell-btn--dim { opacity: .3; filter: grayscale(.4); }
.obl-cell-btn--dim:hover { opacity: 1; filter: none; }

/* Persistent per-client-obligation note icon (separate from the status
   button above - saving it never marks anything done). Muted outline when
   empty, gold-filled once a note exists, so a glance at the matrix flags
   which clients have context worth reading. */
.obl-note-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; transition: transform var(--t), filter var(--t), color var(--t), border-color var(--t);
}
.obl-note-btn:hover { transform: scale(1.08); color: var(--gold); border-color: var(--gold); }
.obl-note-btn--filled { color: var(--gold); border-color: rgba(224,175,66,.5); background: rgba(224,175,66,.12); }

/* ── Приложимост по клиент - a single content-sized toolbar row: client
   picker, then whatever's relevant inline right after it (hint, or name +
   count + chips). Capped max-width, not full-bleed like the card base
   class defaults to - this is a lightweight settings row, not a data
   table, and stretching its border across the whole page just to fill
   the space read as an oversized, half-empty box. Left-aligned like
   every other section on the page, just not artificially wide. ── */
.applic-card { padding: 14px 18px; max-width: 760px; }
.applic-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.applic-bar select.field { width: auto; min-width: 200px; }

.applic-bar__client {
  font-family: var(--font-display); font-size: .88rem; color: var(--white); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.applic-bar__client i { color: var(--gold); font-size: .8rem; }
.applic-bar__count { font-size: .78rem; color: var(--text-muted); }

.applic-bar__chips { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }

/* Per-client deadline override, merged INTO its chip (not a separate
   floating box next to it) - reads as one control per obligation, only
   revealed once the chip is checked. Visible "падеж" label, not a
   hover-only tooltip - same lesson as the matrix legend earlier: icon/
   value alone without a text label wasn't understandable at a glance. */
.applic-chip { position: relative; }
.applic-deadline {
  display: none; align-items: center; gap: 5px; margin-left: 6px; padding-left: 8px;
  border-left: 1px solid var(--border);
}
.applic-chip:has(input:checked) .applic-deadline { display: inline-flex; }
.applic-deadline__label {
  font-size: .62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
}
/* Specificity note: .gld-toggle-chip input (line ~172 below) hides the
   chip's own checkbox via opacity:0/width:0/height:0 - since this input
   lives inside the same chip, it needs an explicit, more specific
   override (two classes beats one class + one type) or it inherits that
   same invisibility and only the label next to it is visible. */
.gld-toggle-chip .applic-deadline__input {
  position: static; opacity: 1;
  width: 40px; height: auto; padding: 4px 3px; text-align: center; font-size: .8rem; font-weight: 700;
  background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); font-family: inherit; cursor: text;
  -moz-appearance: textfield; appearance: textfield;
}
/* Kill the native up/down spinner - it renders as a stock light-mode OS
   widget that clashes hard against this dark theme. */
.applic-deadline__input::-webkit-outer-spin-button,
.applic-deadline__input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.applic-deadline__input:focus { border-color: var(--border-gold); color: var(--white); outline: none; }
/* A real (non-placeholder) value = an active override - matches this
   app's existing gold = "customized/active" language (gld-toggle-chip). */
.applic-deadline__input:not(:placeholder-shown) {
  border-color: var(--gold); background: rgba(201,162,39,.16); color: var(--gold);
}

.applic-bar__hint { color: var(--text-muted); font-size: .84rem; }
.applic-bar__hint i { margin-right: 4px; opacity: .7; }

/* Explains the per-chip "падеж" field - added because the field itself
   only appears once a chip is checked and gives no clue on its own that
   blank = shared default vs typed = override just for this client. */
.applic-bar__tip { flex-basis: 100%; color: var(--text-muted); font-size: .76rem; opacity: .85; }
.applic-bar__tip i { margin-right: 4px; opacity: .7; color: var(--gold); }

@media (max-width: 680px) {
  .applic-bar select.field { width: 100%; }
}

/* ── Styled checkbox chip (GLD.toggle chip) - dashboard-wide ──
   Used anywhere a checkbox picks one of a small, bounded set: obligation-
   type applicability, the month picker, a single standalone boolean like
   "Регистриран по ДДС". Active/inactive state is pure CSS via :has(), not
   a JS-toggled class - so it stays correct even when something else sets
   .checked programmatically (e.g. the obligation-type edit modal
   pre-filling months via JS, which never fires a 'change' event). */
.gld-toggle-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 12px 6px 8px; border-radius: 18px; border: 1.5px solid var(--border);
  background: var(--bg-card-2); color: var(--text-muted); font-size: .8rem; font-weight: 600;
  transition: all var(--t);
}
.gld-toggle-chip:hover { border-color: var(--border-gold); }
.gld-toggle-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.gld-toggle-chip__icon {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: .6rem; color: transparent; transition: all var(--t); background: var(--bg-card);
}
.gld-toggle-chip:has(input:checked) { background: rgba(201,162,39,.14); border-color: rgba(201,162,39,.4); color: var(--gold); }
.gld-toggle-chip:has(input:checked) .gld-toggle-chip__icon { background: var(--gold); border-color: var(--gold); color: #0a0a0f; }
.gld-toggle-chip:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* Compact variant - month picker (12 short labels in one grid) */
.gld-toggle-chip--sm { padding: 6px 11px 6px 8px; font-size: .78rem; gap: 6px; }
.gld-toggle-chip--sm .gld-toggle-chip__icon { width: 15px; height: 15px; font-size: .52rem; }

/* ── Styled checkbox row - a scrollable list of many items (message
   recipients), where wrapped pills would look inconsistent. Square
   checkbox indicator + label text, same :has()-driven active state. ── */
.gld-check-row {
  position: relative;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; transition: background var(--t);
}
.gld-check-row:hover { background: var(--bg-card-2); }
.gld-check-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.gld-check-row__box {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--bg-card);
  display: flex; align-items: center; justify-content: center; font-size: .62rem; color: transparent;
  transition: all var(--t);
}
.gld-check-row:has(input:checked) .gld-check-row__box { background: var(--gold); border-color: var(--gold); color: #0a0a0f; }
.gld-check-row:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.gld-check-row:has(input:disabled):hover { background: transparent; }
/* "Select all" checkbox when only some (not all) rows on the page are
   checked - a gold dash instead of the checkmark, same idea as a native
   indeterminate checkbox. JS sets .indeterminate; :checked never fires
   for it, so this needs its own rule rather than piggybacking the one above. */
.gld-check-row:has(input:indeterminate) .gld-check-row__box {
  background: transparent; border-color: var(--gold); color: var(--gold);
}
.gld-check-row:has(input:indeterminate) .gld-check-row__box i { display: none; }
.gld-check-row:has(input:indeterminate) .gld-check-row__box::after { content: ''; width: 8px; height: 2px; background: var(--gold); border-radius: 1px; }

/* ── Filter bars ── */
.dash-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ── Compact form field, used across filter bars + modal forms ── */
.field {
  padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--bg-card-2); color: var(--white); font-family: inherit; font-size: .83rem;
}
.field::placeholder { color: var(--text-muted); }

/* ── "Добави фирмен срок" inline form - deliberate 2-row grid instead of
   flex-wrap. flex-wrap looked fine with 4 fields, but adding a 5th
   (remind_days_before) pushed it past one line and left the submit
   button stranded alone on its own row - an accidental, unbalanced wrap
   rather than an intentional layout. Two clean rows instead: identifying
   info (title/date/client) on top, secondary info + action (notes/
   remind/submit) below, each column aligned under the other. ── */
.office-deadline-form {
  display: grid; grid-template-columns: 2fr 150px 200px; gap: 10px 8px; align-items: center;
}
.odf-title  { grid-column: 1; grid-row: 1; }
.odf-date   { grid-column: 2; grid-row: 1; }
.odf-client { grid-column: 3; grid-row: 1; }
.odf-notes  { grid-column: 1; grid-row: 2; }
.odf-remind { grid-column: 2; grid-row: 2; }
.odf-submit { grid-column: 3; grid-row: 2; font-size: .82rem; }

@media (max-width: 680px) {
  .office-deadline-form { grid-template-columns: 1fr; }
  .odf-title, .odf-date, .odf-client, .odf-notes, .odf-remind, .odf-submit { grid-column: 1; grid-row: auto; }
}

/* ── Calendar toolbar ── */
.dash-cal-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-cal-view-toggle { display: inline-flex; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.dash-cal-view-btn {
  padding: 6px 16px; border-radius: 6px; border: none; background: transparent;
  color: var(--text-muted); font-size: .78rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all var(--t);
}
.dash-cal-view-btn--active { background: var(--gold); color: #0a0a0f; }
.dash-cal-month-nav { display: flex; align-items: center; gap: 8px; }
.dash-cal-summary {
  font-size: .74rem; color: var(--text-muted);
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.dash-cal-summary__count { color: var(--gold); font-weight: 700; }
.dash-cal-month-nav button {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-card-2); color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .7rem;
}
.dash-cal-month-nav button:disabled { opacity: .35; cursor: default; }
.dash-cal-month-nav span { font-size: .85rem; font-weight: 700; color: var(--white); min-width: 110px; text-align: center; }
.dash-add-event-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(201,162,39,.4);
  background: rgba(201,162,39,.1); color: var(--gold);
  font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all var(--t);
}
.dash-add-event-btn:hover { background: rgba(201,162,39,.18); }

/* ── Month view grid (bigger cells than the compact year view) ── */
.dash-cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.dash-cal-dow {
  text-align: center; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); padding: 4px 0 8px; border-bottom: 1px solid var(--border);
}
.dash-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.dash-cal-cell {
  min-height: 84px; padding: 7px; border-radius: 8px;
  background: var(--bg-card-2); border: 1px solid var(--border);
  align-items: flex-start !important;
}
.dash-cal-cell--empty { background: transparent; border-color: transparent; min-height: 84px; }
.dash-cal-cell.kal-cell--has-event:hover { background: rgba(255,255,255,.06); }
.dash-cal-cell.kal-cell--today { border-color: rgba(201,162,39,.45); box-shadow: 0 0 0 1px rgba(201,162,39,.15); }
.dash-cal-cell--addable { cursor: pointer; position: relative; transition: background var(--t), border-color var(--t); }
.dash-cal-cell--addable:hover { background: rgba(201,162,39,.06); border-color: rgba(201,162,39,.3); }
.dash-cal-cell--addable:hover::after {
  content: '+'; position: absolute; top: 5px; right: 8px;
  color: var(--gold); font-weight: 700; font-size: .95rem; line-height: 1;
}

.dash-cal-chips { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; width: 100%; }
.kal-dot.dash-cal-chip {
  width: auto; height: auto; border-radius: 4px;
  padding: 2px 6px; font-size: .6rem; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #0a0a0f;
}
.dash-cal-overflow { font-size: .6rem; font-weight: 700; color: var(--text-muted); padding: 1px 4px; }

/* ── Inline tool panel ── */
.dash-tool-loading, .dash-tool-error {
  text-align: center; padding: 48px 24px;
  color: var(--text-muted); font-size: .9rem; line-height: 1.7;
}
.dash-tool-error { color: var(--red-hover); }
.dash-tool-error a { color: var(--gold); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .dash-cal-cell { min-height: 64px; }
}

@media (max-width: 680px) {
  .dash-page { padding: 14px 12px 40px; }

  /* Tab strip becomes a single horizontally-scrolling row instead of
     wrapping to 2-3 rows - reads like a native app's segmented control
     rather than a paragraph of buttons. */
  .dash-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px 16px;
    padding: 0 12px 4px;
  }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tab { flex-shrink: 0; }

  /* Section header: title above actions, actions stacked full-width so
     they're easy to hit with a thumb instead of tiny top-right links. */
  .dash-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .dash-head__actions { flex-direction: column; align-items: stretch; }
  .dash-head__actions .btn { width: 100%; text-align: center; justify-content: center; box-sizing: border-box; }

  /* Filter bars: one full-width control per row beats a cramped, wrapped
     inline row of half-cut-off selects. */
  .dash-filters { flex-direction: column; align-items: stretch; }
  .dash-filters .field, .dash-filters select.field, .dash-filters input.field { width: 100%; box-sizing: border-box; }
  .dash-filters .btn { width: 100%; justify-content: center; }

  /* Calendar toolbar: stack view toggle / month nav / add-event buttons,
     each full-width, instead of a squeezed single line. */
  .dash-cal-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .dash-cal-view-toggle { align-self: stretch; }
  .dash-cal-view-btn { flex: 1; }
  .dash-cal-month-nav { justify-content: center; }
  .dash-add-event-btn { width: 100%; justify-content: center; margin-left: 0 !important; }

  /* Stats strip (Оперативно табло) - even 2-up grid instead of a wrapped
     flex row with mismatched widths. */
  .dash-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* ── Data tables → stacked cards ──
     Each row becomes a bordered card; each cell becomes a label:value
     line via its data-label attribute. No horizontal scrolling, no
     pinch-zoomed 8px text - this is how these lists were meant to look
     on a phone. The first cell in every table is already the "identity"
     column (client/member/subject/file name, always bold in the markup)
     so it's promoted to a card title instead of getting its own label row. */
  .dtable-wrap { border: none; overflow: visible; margin-bottom: 4px; }
  table.dtable, table.dtable tbody, table.dtable tr, table.dtable td { display: block; width: 100%; min-width: 0; }
  table.dtable thead { display: none; }
  table.dtable tbody tr {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
    margin-bottom: 10px; overflow: hidden;
  }
  table.dtable td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 14px; border-bottom: 1px solid var(--border);
    text-align: right; white-space: normal; word-break: break-word;
  }
  table.dtable tbody tr td:last-child { border-bottom: none; }
  table.dtable td::before {
    content: attr(data-label); flex-shrink: 0; text-align: left;
    font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
  }
  table.dtable tbody tr td:first-child {
    display: block; text-align: left; font-size: .92rem;
    padding: 12px 14px 9px;
  }
  table.dtable tbody tr td:first-child::before { content: none; }
  table.dtable td.dtable-actions { justify-content: flex-end; flex-wrap: wrap; row-gap: 8px; }
  table.dtable td.dtable-actions::before { content: none; }
  table.dtable td.dtable-empty { text-align: center; }
  table.dtable td.dtable-empty::before { content: none; }

  /* Selectable client table: per-row checkboxes are desktop-only (the
     page-wide "Избери всички" checkbox above the table + the bulk bar
     cover selection on phones instead) - the checkbox cell no longer
     occupies the identity/"card title" slot the generic :first-child
     rule above assumes, so hand that promotion to the cell after it. */
  table.dtable.dtable--selectable td.dtable-check-cell { display: none; }
  table.dtable.dtable--selectable tbody tr td.dtable-check-cell + td {
    display: block; text-align: left; font-size: .92rem;
    padding: 12px 14px 9px; border-bottom: 1px solid var(--border);
  }
  table.dtable.dtable--selectable tbody tr td.dtable-check-cell + td::before { content: none; }

  /* Pagination rows + officeDeadlineForm/message-schedule inline flex rows
     wrap instead of overflowing on narrow screens. */
  .dash-tab-panel [style*="justify-content:center"][style*="gap:14px"] { flex-wrap: wrap; }
  #officeDeadlineForm form { flex-direction: column; align-items: stretch !important; }
  #officeDeadlineForm input, #officeDeadlineForm select { width: 100%; box-sizing: border-box; }

  /* Compose-message modal: schedule date+time row, template-quick-pick
     buttons and the recipients checklist all get touch-friendlier. */
  #msgScheduleRow { flex-direction: column; align-items: stretch !important; }
  #msgScheduleRow input { width: 100%; box-sizing: border-box; }

  /* Obligation-type modal's 12-month checkbox grid: tighter columns */
  #otMonths { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; }

  /* Document upload dropzone: less padding, smaller copy */
  #documentDropzone { padding: 20px 14px !important; }
}

@media (max-width: 480px) {
  .dash-page { padding: 12px 10px 36px; }
  .dash-tab { padding: 7px 11px; font-size: .74rem; }
  .dash-tab span { display: inline; }
  .kal-dot.dash-cal-chip { font-size: .55rem; padding: 1px 4px; }
  .dash-cal-cell { min-height: 56px; padding: 5px; }
  .dash-cal-dow { font-size: .58rem; padding: 3px 0 6px; }
  .dash-stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #otMonths { grid-template-columns: repeat(4, 1fr); }
}

/* Anonymous preview gate: shared markup/CSS now lives sitewide in
   gildiyata.css (.gated-content, .dash-gate*) since it also gates
   individual calculator pages, not just this dashboard - see
   tools/views.py::render_calculator and base.html. */