/* ============================================================================
   4Cargo — theme + layout. Mobile-first. Two themes via CSS variables:
   light (soft yellow + light blue) and premium (Claude desktop dark).
   ============================================================================ */

:root,
[data-theme="light"] {
  /* Stripe-like: cool gray-blue page, white cards, navy text, blue actions */
  --c-bg:            #f6f9fc;
  --c-bg-soft:       #eef4f9;
  --c-surface:       #ffffff;
  --c-surface-soft:  #f6f9fc;
  --c-primary:       #0570de;   /* stripe blue */
  --c-primary-hover: #0461c2;
  --c-primary-dark:  #03559e;
  --c-primary-soft:  rgba(5, 112, 222, 0.09);
  --c-accent:        #0570de;
  --c-text:          #0a2540;   /* navy */
  --c-text-muted:    #5b7387;
  --c-on-primary:    #ffffff;
  --c-border:        rgba(10, 37, 64, 0.10);
  --c-border-strong: rgba(10, 37, 64, 0.20);
  --c-hover:         rgba(10, 37, 64, 0.04);
  --c-row-even:      rgba(5, 112, 222, 0.05);
  --c-row-hover:     #fff6c9;   /* light-yellow row hover */
  --c-thead-bg:      #e4edf7;   /* table header band (light blue tint) */
  --c-input-bg:      #ffffff;
  --c-input-disabled:#f1f4f8;
  --c-shadow:        rgba(50, 50, 93, 0.12);
  --c-danger:        #df1b41;
  --c-warning:       #b45309;
  --c-success:       #1a7f37;
  --c-info:          #0570de;
  --c-tent:          #1a7f37;   /* trips: tent-trailer rows (green) */
  --c-day-sep:       #fbbc04;   /* trips: rule between days (logo yellow) */
  --c-bulk-sel:      rgba(255, 152, 0, 0.20);  /* bulk-select row (light-orange) */
  --c-bulk-bar:      #ff9800;
  --c-expired-bg:    rgba(223, 27, 65, 0.09);
  --c-expired-fg:    #b00c34;
  --c-expiring-bg:   rgba(251, 188, 4, 0.16);
  --c-expiring-fg:   #8a6116;
  /* stripe-style layered shadows: cards rest softly, pop-ups float */
  --c-card-border:   rgba(10, 37, 64, 0.04);
  --c-scroll-thumb:       rgba(10, 37, 64, 0.24);
  --c-scroll-thumb-hover: rgba(10, 37, 64, 0.38);
  --shadow-card:       0 6px 12px rgba(50, 50, 93, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 13px 27px -5px rgba(50, 50, 93, 0.16), 0 8px 16px -8px rgba(0, 0, 0, 0.12);
  --shadow-pop:        0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.30);
}

/* Tumšs Premium — Claude desktop dark, exact tokens from the spec. */
[data-theme="premium"] {
  --c-bg:            #1f1e1d;
  --c-bg-soft:       #1a1918;
  --c-surface:       #262524;
  --c-surface-soft:  #2d2c2a;
  --c-primary:       #c96442;   /* terracotta */
  --c-primary-hover: #d97553;
  --c-primary-dark:  #b35535;
  --c-primary-soft:  rgba(201, 100, 66, 0.12);
  --c-accent:        #7a96b8;
  --c-text:          #f4f3ee;   /* Pampas */
  --c-text-muted:    #8a857c;
  --c-on-primary:    #1f1e1d;
  --c-border:        rgba(244, 243, 238, 0.08);
  --c-border-strong: rgba(244, 243, 238, 0.14);
  --c-hover:         rgba(244, 243, 238, 0.06);
  --c-row-even:      rgba(244, 243, 238, 0.04);
  --c-row-hover:     rgba(255, 233, 120, 0.13);   /* light-yellow row hover */
  --c-thead-bg:      #302f2d;   /* table header band (warm dark tint) */
  --c-input-bg:      #1a1918;
  --c-input-disabled:#1f1e1d;
  --c-shadow:        rgba(0, 0, 0, 0.35);
  --c-danger:        #c97a6e;
  --c-warning:       #c9a464;
  --c-success:       #7a9b6e;
  --c-info:          #7a96b8;
  --c-tent:          #8ec78e;   /* trips: tent-trailer rows (green) */
  --c-day-sep:       #c9a464;   /* trips: rule between days (muted for dark) */
  --c-bulk-sel:      rgba(217, 117, 83, 0.22);  /* bulk-select row (warm terracotta) */
  --c-bulk-bar:      #d97553;
  --c-expired-bg:    rgba(201, 122, 110, 0.18);
  --c-expired-fg:    #e2a99f;
  --c-expiring-bg:   rgba(201, 164, 100, 0.16);
  --c-expiring-fg:   #d8bd86;
  /* dark theme keeps flatter shadows; card borders stay visible */
  --c-card-border:   rgba(244, 243, 238, 0.08);
  --c-scroll-thumb:       rgba(244, 243, 238, 0.18);
  --c-scroll-thumb-hover: rgba(244, 243, 238, 0.30);
  --shadow-card:       none;
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-pop:        0 12px 40px rgba(0, 0, 0, 0.35);
}

:root { --sidebar-w: 180px; --sidebar-w-min: 52px; }  /* was 240px; narrowed 25% per request */

/* ---- scrollbars: theme-aware thumb (dark theme was showing bright OS default) */
* { scrollbar-width: thin; scrollbar-color: var(--c-scroll-thumb) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-scroll-thumb); border-radius: 8px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-scroll-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---- accent gradient (active nav pill, primary buttons) -------------------- */
:root,
[data-theme="light"] {
  --grad-accent: linear-gradient(135deg, #0570de 0%, #2f8fff 100%);
}
[data-theme="premium"] {
  --grad-accent: linear-gradient(135deg, #c96442 0%, #d97553 100%);
}

/* ---- inline SVG icon set (replaces emoji throughout the UI) ---------------- */
.ico {
  display: inline-block; flex: 0 0 auto; width: 1em; height: 1em;
  fill: currentColor; vertical-align: -0.15em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.45;
  background: var(--c-bg); color: var(--c-text);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--c-text-muted); }
.spacer { flex: 1 1 auto; }

/* ---- buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .5em .9em; border: 1px solid var(--c-border-strong);
  background: var(--c-surface); color: var(--c-text);
  border-radius: 10px; cursor: pointer; font-size: .95em; min-height: 40px;
  transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
/* all buttons: visible lift + shadow on hover */
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover); }
/* plain buttons only — opaque, contrasting fill so hover doesn't blend into the
   page bg (white in light / black in dark). Variant buttons (.btn-primary,
   .btn-danger) keep their own coloured hover below. */
.btn:not(.btn-primary):not(.btn-danger):hover { background: color-mix(in srgb, var(--c-text) 10%, var(--c-surface)); border-color: var(--c-border-strong); }
/* visible press: sink down, drop the shadow, slight darken */
.btn:active { transform: translateY(1px); box-shadow: none; filter: brightness(.94); }
.btn .ico { width: 16px; height: 16px; }
.btn-primary { background: var(--grad-accent); border-color: transparent; color: var(--c-on-primary); font-weight: 600; box-shadow: 0 2px 8px rgba(5, 112, 222, .25); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(5, 112, 222, .32); }
[data-theme="premium"] .btn-primary { box-shadow: 0 2px 8px rgba(201, 100, 66, .25); }
[data-theme="premium"] .btn-primary:hover { box-shadow: 0 4px 14px rgba(201, 100, 66, .32); }
.btn-sm { padding: .3em .6em; min-height: 32px; font-size: .85em; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; color: var(--c-text-muted);
  font-size: 1.05em; padding: .35em .5em; border-radius: 8px; min-width: 36px; min-height: 36px;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.btn-icon .ico { width: 16px; height: 16px; }
.btn-icon:hover { background: var(--c-hover); color: var(--c-text); transform: translateY(-1px); }
.btn-icon.danger:hover { color: var(--c-danger); }
.btn-icon[disabled] { opacity: .35; cursor: default; }
.btn-icon[disabled]:hover { transform: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: transparent;
  color: var(--c-text); cursor: pointer; border-radius: 10px; font-size: 1.1em;
  transition: background .15s ease, transform .1s ease;
}
.icon-btn .ico { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--c-hover); text-decoration: none; transform: translateY(-1px); }

input, select, textarea {
  font: inherit; color: var(--c-text); background: var(--c-input-bg);
  border: 1px solid var(--c-border-strong); border-radius: 8px;
  padding: .5em .6em; width: 100%; min-height: 40px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-primary); outline-offset: 0; }
textarea { resize: vertical; }

/* ---- date picker (custom vanilla calendar, replaces native date input) ----- */
.dp { position: relative; display: block; }
.dp-input { width: 100%; cursor: pointer; }
/* once the calendar has filled it in, the field is typeable */
.dp-input:not([readonly]) { cursor: text; }
.dp-clear {
  display: none; position: absolute; top: 50%; right: .45em; transform: translateY(-50%);
  width: auto; min-height: 0; padding: 0 .2em; border: 0; background: none;
  color: var(--c-text-muted); font-size: 1.15em; line-height: 1; cursor: pointer;
}
.dp.dp-has .dp-clear { display: block; }
.dp-clear:hover { color: var(--c-text); }
.dp-pop {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0;
  width: 15rem; max-width: 92vw; padding: .5rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px; box-shadow: var(--shadow-pop);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.dp-title { font-weight: 600; font-size: .95em; }
.dp-nav {
  width: 2rem; min-height: 2rem; padding: 0; border: 0; border-radius: 6px;
  background: var(--c-hover); color: var(--c-text); cursor: pointer; font-size: 1.1em;
}
.dp-nav:hover { background: var(--c-border); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font-size: .68em; color: var(--c-text-muted); padding: .2em 0; }
.dp-cell {
  width: 100%; min-height: 0; aspect-ratio: 1 / 1; padding: 0; border: 0;
  border-radius: 6px; background: none; color: var(--c-text); cursor: pointer; font-size: .85em;
}
.dp-cell:hover { background: var(--c-hover); }
.dp-sel { background: var(--c-accent); color: #fff; font-weight: 600; }
.dp-empty { cursor: default; }

/* ---- login ----------------------------------------------------------------- */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.login-card {
  width: 100%; max-width: 380px; background: var(--c-surface);
  border: 1px solid var(--c-card-border); border-radius: 14px; padding: 1.6rem;
  box-shadow: var(--shadow-pop);
}
.login-brand { font-size: 1.4rem; font-weight: 700; text-align: center; margin-bottom: 1.2rem; }
.login-logo { max-width: 240px; width: 100%; height: auto; }
.login-theme { position: fixed; top: 1rem; right: 1rem; }
.login-copy { position: fixed; bottom: 1rem; left: 0; right: 0; text-align: center; font-size: .85em; color: var(--c-text-muted); }
.login-copy a { color: inherit; font-weight: 600; }
.login-copy a:hover { color: var(--c-primary); }
.login-form label { display: block; margin-bottom: .9rem; font-size: .9em; color: var(--c-text-muted); }
.login-form input { margin-top: .3em; }
.brand-mark {
  display: inline-grid; place-items: center; width: 1.8em; height: 1.8em;
  background: var(--c-primary); color: var(--c-on-primary); border-radius: 8px;
  font-weight: 800; font-size: .8em; vertical-align: middle;
}

/* ---- app shell ------------------------------------------------------------- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--c-surface); border-right: 1px solid var(--c-border);
  padding: 1rem .7rem; overflow-y: auto; transform: translateX(-100%);
  transition: transform .2s ease; z-index: 40;
}
.sidebar .brand { display: flex; flex-direction: column; align-items: flex-start; gap: .4em; font-weight: 700; padding: .3em 0 1em; }
/* logo spans the full sidebar width (cancels the sidebar's .7rem side padding) */
.brand-logo { display: block; width: calc((100% + 1.4rem) * 0.95); max-width: none; max-height: 76px; margin: -5px -.7rem 0 calc(-.7rem + 2px); object-fit: contain; }
.brand-name { font-size: .95em; line-height: 1.15; overflow-wrap: anywhere; }
.logo-preview { display: block; margin: .4em 0; align-self: flex-start; }
.logo-preview-thumb { position: relative; display: inline-block; line-height: 0; vertical-align: top; }
.logo-preview-thumb img { display: block; max-height: 56px; max-width: 200px; width: auto; height: auto; object-fit: contain; border: 1px solid var(--c-border); border-radius: 8px; padding: 4px; background: var(--c-surface); }
/* small ✕ on the logo image (top-left); deletes on click */
.logo-rm-x {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1;
  cursor: pointer; opacity: .92; user-select: none; z-index: 1;
}
.logo-rm-x:hover { background: rgba(0,0,0,.78); opacity: 1; }
.nav { display: flex; flex-direction: column; gap: .2em; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: .65em; padding: .6em .7em;
  border-radius: 10px; color: var(--c-text-muted); font-size: .95em;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav-item:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
.nav-item .nav-ico { color: var(--c-text-muted); transition: color .15s ease; }
.nav-item:hover .nav-ico { color: var(--c-text); }
.nav-item.active {
  background: var(--c-primary-soft); color: var(--c-primary-dark); font-weight: 600;
  padding-left: .85em;
}
.nav-item.active .nav-ico { color: var(--c-primary-dark); }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--grad-accent);
}
[data-theme="premium"] .nav-item.active { color: var(--c-primary-hover); }
[data-theme="premium"] .nav-item.active .nav-ico { color: var(--c-primary-hover); }
.nav-sep { height: 1px; background: var(--c-border); margin: .7em .3em; }
.nav-ico { flex: 0 0 auto; display: inline-flex; }
.nav-ico .ico { width: 18px; height: 18px; }

/* sidebar pin / collapse controls (desktop only; the mobile drawer keeps ☰) */
.sb-ctl { display: none; }
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 1px solid transparent;
  background: transparent; color: var(--c-text-muted); border-radius: 6px;
  font-size: .8em; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.sb-btn .ico { width: 14px; height: 14px; }
.sb-btn:hover { background: var(--c-hover); color: var(--c-text); }
html:not(.sb-collapsed) .js-sb-pin { background: var(--c-primary-soft); color: var(--c-primary-dark); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  position: fixed; top: .6rem; left: .6rem; z-index: 50;
  width: 42px; height: 42px; border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text); border-radius: 10px;
  font-size: 1.2em; cursor: pointer;
}
.nav-toggle .ico { width: 20px; height: 20px; }

.main { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .8em;
  padding: .7rem 1rem .7rem 3.4rem;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.topbar-title { font-weight: 600; font-size: 1.05em; }
.topbar-tools { margin-left: auto; display: flex; align-items: center; gap: .3em; }
.pref-form { display: inline-flex; gap: .15em; }
.lang-btn {
  border: 1px solid var(--c-border); background: transparent; color: var(--c-text-muted);
  border-radius: 999px; padding: .25em .65em; cursor: pointer; font-size: .8em; min-height: 32px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-btn.on { background: var(--c-primary-soft); color: var(--c-primary-dark); border-color: var(--c-primary); font-weight: 600; }

.content { padding: 1rem; flex: 1 1 auto; }
.footer { padding: 1rem; color: var(--c-text-muted); font-size: .85em; text-align: center; }
.footer-brand { color: var(--c-text-muted); }

.flashes { padding: .6rem 1rem 0; }
.flash { padding: .6em .9em; border-radius: 8px; margin-bottom: .5em; border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-card); }
.flash-danger  { background: var(--c-expired-bg); color: var(--c-expired-fg); border-color: var(--c-danger); }
.flash-success { background: rgba(122,155,110,.14); border-color: var(--c-success); }
.flash-info    { background: rgba(122,150,184,.12); border-color: var(--c-info); }

/* ---- dashboard cards ------------------------------------------------------- */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.stat-card {
  display: flex; flex-direction: column; align-items: center; gap: .5em; padding: 1rem; text-align: center;
  background: var(--c-surface); border: 1px solid var(--c-card-border); border-radius: 14px; color: var(--c-text);
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.stat-card:hover { text-decoration: none; box-shadow: var(--shadow-card-hover); transform: translateY(-2px); border-color: var(--c-primary); }
/* icon + count sit together on top; label goes underneath */
.stat-top { display: flex; align-items: center; justify-content: center; gap: .55em; }
.stat-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--c-primary-soft); color: var(--c-primary-dark);
  transition: transform .15s ease;
}
[data-theme="premium"] .stat-icon { color: var(--c-primary-hover); }
.stat-card:hover .stat-icon { transform: scale(1.06); }
.stat-icon .ico { width: 22px; height: 22px; }
.stat-num { font-size: 1.6em; font-weight: 700; line-height: 1; }
.stat-label { color: var(--c-text-muted); font-size: .9em; overflow-wrap: anywhere; }

.panel { margin-top: 1.2rem; background: var(--c-surface); border: 1px solid var(--c-card-border); border-radius: 14px; padding: 1rem; overflow-x: auto; box-shadow: var(--shadow-card); }
.panel-title { margin: 0 0 .7rem; font-size: 1.05em; display: flex; align-items: center; gap: .45em; }
.panel-title-ico { width: 1.05em; height: 1.05em; color: var(--c-text-muted); }

/* ---- list / toolbar -------------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.search-input { max-width: 280px; }
.page-size { width: auto; min-width: 70px; }
.chk { display: inline-flex; align-items: center; gap: .4em; font-size: .9em; color: var(--c-text-muted); white-space: nowrap; }
.chk input { width: auto; min-height: auto; }

/* ---- data table ------------------------------------------------------------ */
/* Excel-like grid: full cell borders, centered content, spreadsheet font.
   border-collapse stays "separate" so the borders travel with the sticky
   header row instead of being dropped while scrolling. */
.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--c-surface);
  font-family: Calibri, Carlito, "Segoe UI", "Inter", sans-serif;
}
.data-table th, .data-table td {
  padding: .3em .6em; text-align: center; vertical-align: middle;
  border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
}
.data-table th:first-child, .data-table td:first-child { border-left: 1px solid var(--c-border); }
.data-table thead th { border-top: 1px solid var(--c-border); }
.data-table thead th {
  padding-top: .5em; padding-bottom: .5em;
  background: var(--c-thead-bg);
  font-size: .98em; font-weight: 700; color: var(--c-text);
  text-transform: none; letter-spacing: .02em; white-space: nowrap; user-select: none;
}
.data-table tbody tr:nth-child(even) { background: var(--c-row-even); }
.data-table tbody tr:hover { background: var(--c-row-hover); }
.th-col { cursor: grab; }
.th-col.js-sort { cursor: pointer; }
.th-col.dragover { outline: 2px dashed var(--c-primary); }
.th-col.sorted { color: var(--c-primary-dark); }
.salary-table th.sal-col { cursor: grab; }
.salary-table th.sal-col.dragover { outline: 2px dashed var(--c-primary); }

/* dashboard monthly charts: bars keep a constant width for any period; long
   windows (>12 months) stack the charts and scroll horizontally */
.dash-charts { display: flex; flex-wrap: wrap; gap: 1em 1.6em; }
.dash-charts.dash-charts-stack { flex-direction: column; }
.dash-chart { max-width: 100%; }
.dash-chart-title { margin: 0 0 .4em; font-size: .95em; color: var(--c-text-muted); font-weight: 600; }
.dash-chart-svg { overflow-x: auto; }
.dash-chart-svg svg { display: block; }
.dash-charts-bar { margin-bottom: .7em; }
.dash-charts-range { width: auto; min-height: 0; font-size: .8rem; padding: .2em .5em; }
.dc-val { font-size: .95em; fill: var(--c-text-muted); }
.dc-month { font-size: .95em; fill: var(--c-text-muted); }
.dc-base { stroke: var(--c-border-strong); stroke-width: 1; }
.sort-ind { font-size: .7em; margin-left: .2em; }
.th-actions, .td-actions { width: 1%; white-space: nowrap; text-align: center; }
.row-deleted { opacity: .55; }
/* trips: rows whose trailer is a tent render in blue */
.data-table tbody tr.row-tent td { color: var(--c-tent); }
/* trips: yellow rule above the first row of each new date */
.data-table tbody tr.row-day-start td { border-top: 4px solid var(--c-day-sep); }
.empty { text-align: center; color: var(--c-text-muted); padding: 1.4em; }

.cell-dow { display: inline-block; font-size: .85em; color: var(--c-text-muted); line-height: 1.1; }
.cell-date { display: block; line-height: 1.1; }
.cell-bool-yes { color: var(--c-success); font-weight: 700; }
.cell-bool-no  { color: var(--c-text-muted); }
/* one-off value typed by hand (trips tractor not in the fleet) */
.cell-free { font-style: italic; color: var(--c-text-muted); }
/* invoice mailed mark: green check + дд.мм.гг */
.cell-sent { display: inline-flex; align-items: center; gap: .3em; color: var(--c-success); white-space: nowrap; }
.cell-sent svg { width: 1em; height: 1em; }
.cell-sent-date { color: var(--c-text); }
.cell-expired  { background: var(--c-expired-bg);  color: var(--c-expired-fg);  font-weight: 600; padding: .1em .4em; border-radius: 5px; }
.cell-expiring { background: var(--c-expiring-bg); color: var(--c-expiring-fg); padding: .1em .4em; border-radius: 5px; }

/* dashboard alert rows are clickable → jump to the offending record */
.js-alert-row { cursor: pointer; }
.js-alert-row:hover { background: var(--c-row-hover); }
.js-alert-row:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }

/* dashboard active-trips rows open the trip modal */
.dash-trips tbody tr[data-id] { cursor: pointer; }
.dash-trips tbody tr[data-id]:hover { background: var(--c-row-hover); }

/* brief highlight of a deep-linked form field */
.form-row.field-flash { animation: field-flash 2.4s ease-out; border-radius: 6px; }
@keyframes field-flash {
  0%, 40% { background: var(--c-expiring-bg); box-shadow: 0 0 0 2px var(--c-primary); }
  100%    { background: transparent; box-shadow: none; }
}

/* wide tables scroll horizontally on mid-size screens instead of breaking layout */
/* list tables scroll (both axes) inside .list-body so the header row can
   stick to the top of the container instead of scrolling away with the data */
.list-body { overflow: auto; max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); }
/* list pages: lock the page to the viewport so only .list-body scrolls —
   a single vertical scrollbar, and the horizontal scrollbar of a wide table
   stays on screen instead of hiding below the fold */
.main:has(.content > .list-wrap) { height: 100vh; height: 100dvh; }
.content:has(> .list-wrap) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.content > .list-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.content > .list-wrap .list-body { flex: 1 1 auto; min-height: 0; max-height: none; }
/* pager renders inside the scrollable .list-body — pin it to the bottom-left
   corner of the visible area so paging never requires scrolling to reach it */
.content > .list-wrap .list-body .pager { position: sticky; bottom: 0; left: 0; z-index: 3; background: var(--c-bg); }
.list-body .data-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--c-thead-bg);
  /* collapsed borders don't stick with the cell — draw the line via shadow */
  box-shadow: inset 0 -1px 0 var(--c-border-strong);
}
.pager { display: flex; align-items: center; justify-content: flex-end; gap: .5em; padding: .7rem .2rem; }
.filter-select { width: auto; min-width: 150px; }

/* ---- modal ----------------------------------------------------------------- */
.modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 60; padding: 1rem; overflow-y: auto;
}
.modal-backdrop.open { display: grid; place-items: start center; }
.modal {
  background: var(--c-surface); border-radius: 14px; width: 100%; max-width: min(760px, 94vw);
  margin-top: 4vh; padding: 1.3rem; box-shadow: var(--shadow-pop);
}
.modal-title { margin: 0 0 1rem; font-size: 1.1em; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6em; margin-top: 1rem; }
/* print / e-mail buttons (transport invoice): clustered at the left of the row */
.modal-actions .btn-print { display: inline-flex; align-items: center; gap: .35em; }
.modal-actions .btn-print svg { width: 1.1em; height: 1.1em; }
.modal-actions .js-email-open { display: inline-flex; align-items: center; gap: .35em; }
.modal-actions .js-email-open svg { width: 1.1em; height: 1.1em; }
/* invoice modal: print + e-mail hug the left, the rest is pushed right */
.modal-actions .js-email-open ~ .js-modal-close { margin-left: auto; }

/* invoice e-mail modal */
.email-box label { display: block; margin-top: .5em; }
.email-box .email-en { display: flex; align-items: center; gap: .4em; margin: .2em 0 .5em; }
.email-box textarea { resize: vertical; }
/* CC checkboxes over the «Емайлы» dictionary */
.email-cc { margin-top: .6em; padding: .5em .7em; border: 1px solid var(--c-border); border-radius: 8px; }
.email-cc legend { padding: 0 .35em; color: var(--c-text-muted); font-size: .9em; }
.email-cc label.chk { display: flex; align-items: center; gap: .45em; margin-top: .25em; }
.email-cc label.chk .picker-sub { margin-left: .35em; }
.email-result { margin-top: .6em; padding: .5em .7em; border-radius: 8px; font-size: .9em; }
.email-result.ok { background: rgba(40,160,90,.14); color: var(--c-ok, #1f8a4c); }
.email-result.err { background: rgba(200,60,60,.14); color: var(--c-danger, #c33); }

/* ---- delete confirmation dialog -------------------------------------------- */
.confirm-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 70; display: grid; place-items: center; padding: 1rem;
}
.confirm-box {
  background: var(--c-surface); border-radius: 14px; width: 100%; max-width: 400px;
  padding: 1.5rem; text-align: center; box-shadow: var(--shadow-pop);
}
.confirm-icon { font-size: 2rem; margin-bottom: .5rem; }
.confirm-text { margin-bottom: 1.2rem; }
.confirm-actions { display: flex; justify-content: center; gap: .6em; }
.date-prompt-input { display: block; margin: 0 auto 1.2rem; max-width: 200px; text-align: center; }
/* the custom picker enhances this input too: inside the dialog its calendar sits
   in the flow, so the box grows instead of the popup covering the buttons */
.confirm-box .dp { max-width: 200px; margin: 0 auto 1.2rem; }
.confirm-box .dp .date-prompt-input { margin-bottom: 0; }
.confirm-box .dp-pop {
  position: static; width: auto; margin-top: .4rem; box-shadow: none;
}
/* no clear button here: the date is required, and it would centre itself over the
   inline calendar rather than the input */
.confirm-box .dp.dp-has .dp-clear { display: none; }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; font-weight: 600; }
.btn-danger:hover { filter: brightness(1.1); background: var(--c-danger); }
/* columns adapt to the available modal width / screen resolution */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.form-row { display: flex; flex-direction: column; gap: .3em; }
.form-row-textarea, .form-row-multi_phone, .form-row-multi_email { grid-column: 1 / -1; }
/* fields grouped onto one line (see _fields.php form-pair): registry 'group'
   key or adjacent multi_phone + multi_email */
.form-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
.form-pair-3 { grid-template-columns: repeat(3, 1fr); }
.form-pair-4 { grid-template-columns: repeat(4, 1fr); }
.form-pair-5 { grid-template-columns: repeat(5, 1fr); }
.form-pair .form-row { grid-column: auto; }
@media (max-width: 700px) { .form-pair, .form-pair-3, .form-pair-4, .form-pair-5 { grid-template-columns: 1fr; } }
.form-label { font-size: .82em; color: var(--c-text-muted); }
/* read-only hint occupying its own grid cell next to a field (_fields.php $fieldNotes) */
/* the hint box mirrors an input (40px, bottom of the row) so the text lines up
   with the middle of the neighbouring field and is centred in its own column */
.form-note-cell { justify-content: flex-end; }
.form-note-cell .form-note { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.form-note { font-size: 1.15em; color: var(--c-text-muted); white-space: nowrap; }
.bool-input { width: auto; min-height: auto; align-self: start; transform: scale(1.3); transform-origin: left center; margin-top: .35em; }
.multi-rows { display: flex; flex-direction: column; gap: .4em; margin-bottom: .5em; }
.multi-row { display: flex; gap: .4em; align-items: center; flex-wrap: wrap; }
.multi-row input { flex: 1 1 120px; }
.multi-label { flex: 0 1 110px; }
.multi-primary { display: inline-flex; align-items: center; gap: .3em; font-size: .8em; white-space: nowrap; }
.multi-primary input { width: auto; min-height: auto; }
/* type-toggle FK (Прицеп + «только тенты») — select + inline toggle as one control */
.type-toggle-wrap { display: flex; flex-direction: row; align-items: center; gap: .5em; }
.type-toggle-wrap select, .type-toggle-wrap input[type=text] { flex: 1 1 auto; min-width: 0; }
.type-toggle-check { display: inline-flex; align-items: center; gap: .35em; font-size: .78em; color: var(--c-text-muted); white-space: nowrap; flex: 0 0 auto; cursor: pointer; }
.type-toggle-check input { width: auto; min-height: auto; margin: 0; }

/* ---- full-page record editor (tabbed) ------------------------------------- */
.edit-page { max-width: 1000px; }
.page-head { position: relative; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-title { margin: 0; font-size: 1.2em; }
/* record identity centered across the whole head block, on the heading's line */
.edit-record-title { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; color: var(--c-primary-dark); font-weight: 600; font-size: 1.15em; pointer-events: none; }
.tabs { display: flex; gap: .3em; border-bottom: 1px solid var(--c-border); margin-bottom: -1px; }
.tab {
  border: 1px solid transparent; border-bottom: none; background: transparent;
  color: var(--c-text-muted); cursor: pointer; font: inherit;
  padding: .55em 1em; border-radius: 10px 10px 0 0; min-height: 40px;
}
.tab:hover { background: var(--c-hover); }
.tab.active {
  background: var(--c-surface); color: var(--c-text); font-weight: 600;
  border-color: var(--c-border); border-bottom-color: var(--c-surface);
}
.box {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 0 12px 12px 12px; padding: 1.2rem;
  min-width: 0; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* let an open datepicker escape the box's overflow:hidden clip */
.box:has(.dp-open) { overflow: visible; }
.form-actions { display: flex; justify-content: flex-end; gap: .6em; margin-top: 1.2rem; }

/* ---- repairs tab (vehicle editor) ----------------------------------------- */
.repairs-panel { margin-top: .2rem; max-width: 100%; min-width: 0; }
.repairs-toolbar { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.repairs-table-wrap { max-width: 100%; overflow: hidden; border: 1px solid var(--c-border); border-radius: 10px; }
.repairs-panel .repairs-table { margin: 0; table-layout: fixed; width: 100%; }
.repairs-panel .repairs-table th,
.repairs-panel .repairs-table td { min-width: 0; }
.repairs-panel .repairs-table thead th { white-space: normal; overflow-wrap: anywhere; }
.repairs-panel .repairs-table col.repairs-col-date { width: 11%; }
.repairs-panel .repairs-table col.repairs-col-desc { width: 48%; }
.repairs-panel .repairs-table col.repairs-col-workers { width: 28%; }
.repairs-panel .repairs-table col.repairs-col-actions { width: 13%; }
.repairs-panel .th-actions,
.repairs-panel .td-actions { width: auto; white-space: nowrap; text-align: center; padding-left: .3em; padding-right: .3em; }
.repairs-col-desc,
.repairs-col-workers,
.repairs-cell-workers {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.repairs-cell-date { white-space: nowrap; }
.repairs-cell-workers { color: var(--c-text-muted); font-size: .92em; }

/* vehicle maintenance tab */
.services-panel { margin-top: .2rem; max-width: 100%; min-width: 0; }
.services-toolbar { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.services-table-wrap { max-width: 100%; overflow: hidden; border: 1px solid var(--c-border); border-radius: 10px; }
.services-panel .services-table { margin: 0; table-layout: fixed; width: 100%; }
.services-panel .services-table th,
.services-panel .services-table td { min-width: 0; }
.services-panel .services-table thead th { white-space: normal; overflow-wrap: anywhere; }
.services-panel .services-table col.services-col-date { width: 20%; }
.services-panel .services-table col.services-col-odo { width: 20%; }
.services-panel .services-table col.services-col-next { width: 20%; }
.services-panel .services-table col.services-col-axle { width: 20%; }
.services-panel .services-table col.services-col-actions { width: 20%; }
.services-panel .th-actions,
.services-panel .td-actions { width: auto; white-space: nowrap; text-align: center; padding-left: .3em; padding-right: .3em; }
.services-col-axle { overflow-wrap: anywhere; word-break: break-word; }
.services-cell-date { white-space: nowrap; }
.services-cell-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.repair-form-fields { margin: .5rem 0 1rem; }
.repair-workers { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.repair-worker-chips { display: flex; flex-wrap: wrap; gap: .3em; align-items: center; min-height: 1.5em; }
.repair-worker-chip {
  display: inline-flex; align-items: center; gap: .2em; max-width: 100%;
  padding: .12em .4em .12em .55em; border-radius: 999px;
  background: var(--c-primary-soft); color: var(--c-primary-dark);
  font-size: .82em; line-height: 1.35;
}
[data-theme="premium"] .repair-worker-chip { color: var(--c-primary-hover); }
.repair-worker-rm {
  border: none; background: transparent; cursor: pointer; padding: 0 .15em;
  font-size: 1.05em; line-height: 1; color: inherit; opacity: .65;
}
.repair-worker-rm:hover { opacity: 1; }
.repair-worker-pick { width: 100%; font-size: .88em; color: var(--c-text-muted); }

/* ---- generic child tabs (ТО / OCTA / Тахограф / ЕКА) ---------------------- */
.child-panel { margin-top: .2rem; max-width: 100%; min-width: 0; }
.child-toolbar { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.child-table-wrap { max-width: 100%; overflow: hidden; border: 1px solid var(--c-border); border-radius: 10px; }
.child-panel .child-table { margin: 0; table-layout: fixed; width: 100%; }
.child-panel .child-table th,
.child-panel .child-table td { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.child-panel .child-table thead th { white-space: normal; }
.child-panel .th-actions,
.child-panel .td-actions { white-space: nowrap; text-align: center; padding-left: .3em; padding-right: .3em; }
.child-form-fields { margin: .5rem 0 1rem; }

/* «Прочая информация» notes tab */
.notes-panel { margin-top: .2rem; }
.notes-field { display: block; }
.notes-field textarea { width: 100%; resize: vertical; }
.notes-actions { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.notes-saved-msg { color: var(--c-primary-dark); font-size: .88em; }

/* ---- admin / supervisor panels -------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 1180px) { .split { grid-template-columns: 1.4fr 1fr; } }
.stack { display: flex; flex-direction: column; gap: .7rem; }
/* settings: fields in two columns (logo + save button span both) */
.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.2rem; align-items: start; }
.settings-form > label:first-of-type, .settings-form > button { grid-column: 1 / -1; }
.settings-form > button { justify-self: start; }
@media (max-width: 640px) { .settings-form { grid-template-columns: 1fr; } }
.stack label { display: flex; flex-direction: column; gap: .3em; font-size: .9em; color: var(--c-text-muted); }
.stack label input, .stack label select { color: var(--c-text); }
.modset { border: 1px solid var(--c-border); border-radius: 10px; padding: .7rem .5rem; min-width: 0; }
.modset legend { font-size: .85em; color: var(--c-text-muted); padding: 0 .4em; }
.modset .chk { display: flex; margin: .25em 0; }
/* compact module picker inside the tenant modal: two columns, checkbox after the name */
.modset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1em 1.2em; }
/* .stack label forces flex-direction:column — put the row back */
.modset-grid .chk { margin: .15em 0; flex-direction: row; align-items: center; }
.modset-grid .chk input { min-height: auto; }
.modset-grid .chk-name { margin-right: .2em; }
@media (max-width: 640px) { .modset-grid { grid-template-columns: 1fr; } }
/* compact form (tenant modal): tighter spacing, smaller controls, fixed rows */
.form-compact { gap: .5rem; }
.form-compact label { gap: .15em; font-size: .82em; }
.form-compact input, .form-compact select { min-height: 32px; padding: .3em .5em; font-size: .9em; }
.form-compact .modal-title { margin-bottom: .3rem; font-size: 1em; }
.form-compact .modset { padding: .35rem .5rem; }
.form-compact .modset-grid .chk { font-size: .85em; }
.form-compact .modal-actions { margin-top: .4rem; }
.form-compact .modal-actions .btn { min-height: 34px; font-size: .9em; }
.form-compact .fg2, .form-compact .fg4 { display: grid; gap: .5rem; }
.form-compact .fg2 { grid-template-columns: 1fr 1fr; }
.form-compact .fg4 { grid-template-columns: 2fr 1fr 2fr 2fr; }
@media (max-width: 640px) { .form-compact .fg4 { grid-template-columns: 1fr 1fr; } }
/* password input with a show/hide eye; .shown draws a slash through the eye */
.pass-wrap { position: relative; display: block; }
.pass-wrap input { padding-right: 2.4em; }
.pass-eye {
  position: absolute; top: 50%; right: .35em; transform: translateY(-50%);
  border: 0; background: none; padding: .25em; cursor: pointer; line-height: 0;
  color: var(--c-text-muted);
}
.pass-eye svg { width: 1.15em; height: 1.15em; }
.pass-eye.shown::after {
  content: ''; position: absolute; left: 15%; top: 50%; width: 70%; height: 2px;
  background: currentColor; transform: rotate(-45deg); border-radius: 1px;
}
.access-table { width: 100%; border-collapse: collapse; }
.access-table th, .access-table td { padding: .3em .15em; text-align: center; font-size: .85em; }
.access-table th:first-child, .access-table td:first-child { text-align: left; }
.access-table input { width: auto; min-height: auto; }
.ref-tabs { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: 1rem; }
.ref-tab { padding: .4em .9em; border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.ref-tab.active { background: var(--c-primary-soft); color: var(--c-primary-dark); border-color: var(--c-primary); font-weight: 600; }
.ref-tab:hover { text-decoration: none; background: var(--c-hover); }
.profile-prefs { margin-top: 1rem; }
code { background: var(--c-hover); padding: .1em .4em; border-radius: 5px; font-size: .9em; }

/* ---- responsive: sidebar drawer + tables become cards ---------------------- */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .sidebar { transform: none; transition: width .15s ease, padding .15s ease; }
  .main { margin-left: var(--sidebar-w); transition: margin-left .15s ease; }
  .topbar { padding-left: 1rem; }

  /* collapsible sidebar: pinned (default) or icons-only rail; the rail
     temporarily expands over the content on hover.
     the control sits below the brand and is always centred so the button
     never slides out from under the cursor when the rail expands on hover */
  .sb-ctl { display: flex; justify-content: flex-start; gap: .3em; margin: .1rem 0 .6rem; }
  html.sb-collapsed .sidebar { width: var(--sidebar-w-min); padding: .6rem .35rem; }
  html.sb-collapsed .main { margin-left: var(--sidebar-w-min); }
  html.sb-collapsed .sidebar .brand { display: none; }
  html.sb-collapsed .sidebar .nav-label { display: none; }
  html.sb-collapsed .sidebar .nav-item { justify-content: center; padding: .55em 0; }
  html.sb-collapsed .sidebar .js-sb-pin { display: none; }
  html.sb-collapsed .sidebar .js-sb-collapse { transform: rotate(180deg); }
  html.sb-collapsed .sidebar:hover { width: var(--sidebar-w); padding: 1rem .7rem; box-shadow: var(--shadow-pop); }
  html.sb-collapsed .sidebar:hover .brand { display: flex; }
  html.sb-collapsed .sidebar:hover .nav-label { display: inline; }
  html.sb-collapsed .sidebar:hover .nav-item { justify-content: flex-start; padding: .65em .7em; }
  html.sb-collapsed .sidebar:hover .js-sb-pin { display: inline-block; }
}
@media (max-width: 899px) {
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
  /* table → cards */
  .responsive thead { display: none; }
  .responsive, .responsive tbody, .responsive tr, .responsive td { display: block; width: 100%; }
  .responsive tr {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 12px; margin-bottom: .7rem; padding: .4rem .2rem;
  }
  .responsive tbody tr:nth-child(even) { background: var(--c-surface); }
  .responsive td {
    display: flex; justify-content: space-between; gap: 1rem;
    border: none; border-bottom: 1px solid var(--c-border); padding: .5em .8em; text-align: right;
  }
  .responsive td:last-child { border-bottom: none; }
  .responsive td::before {
    content: attr(data-label); font-size: .8em; color: var(--c-text-muted);
    text-align: left; font-weight: 600; flex: 0 0 40%;
  }
  .responsive td.td-actions { justify-content: flex-end; }
  .responsive td.td-actions::before { content: ""; }
  /* dashboard charts: one under another, swipeable, latest months in view */
  .dash-charts { flex-direction: column; gap: 1.2em; }
  .dash-chart { width: 100%; }
  .dash-chart-svg { -webkit-overflow-scrolling: touch; }
}
/* many-column tables (trips): always a real table at standard font size;
   .list-body scrolls horizontally when the columns don't fit */

/* ---- trip status icons in the list (planned / active / closed) ------------- */
.st-ico { display: inline-block; width: 14px; height: 14px; margin-right: .45em; vertical-align: -2px; }
.st-ico svg { width: 100%; height: 100%; display: block; }
.st-ico.st-active { color: var(--c-accent); }
.st-ico.st-active svg { animation: st-spin 1.5s linear infinite; }
.st-ico.st-closed { color: var(--c-success); }
.st-ico.st-planned { color: var(--c-text-muted); }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ---- driver card: trips tab ------------------------------------------------- */
.driver-trips-table tbody tr { cursor: pointer; }
.driver-trips-table tbody tr:hover td { background: var(--c-primary-soft); }
.ro-fields { border: 0; padding: 0; margin: 0; min-width: 0; }

/* driver trips tab: date-range filter */
.driver-trips-filter { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.driver-trips-filter label { display: flex; gap: .4em; align-items: center; color: var(--c-text-muted); }

/* driver salary tab: totals row */
.salary-total-inline { font-weight: 700; margin-left: auto; padding-right: 3rem; }

/* salaries page: monthly sheet (money columns right-aligned, last = actions) */
.salary-table td:nth-child(n+3):not(:last-child),
.salary-table th:nth-child(n+3):not(:last-child) { text-align: right; }
.salary-table th, .salary-table td { padding: .3em .55em; }

/* module list: totals footer row (fields flagged total=>true, e.g. remzona) */
.data-table tfoot .totals-row td { border-top: 2px solid var(--c-border); background: var(--c-primary-soft); }

/* module toolbar: date-range filter (fields flagged range_filter, e.g. trips) */
.range-filter { display: inline-flex; align-items: center; gap: .3rem; }
.range-filter .dp-input { width: 8.5em; }
.range-filter .range-dash { color: var(--c-text-muted); }
.empty-filter { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; white-space: nowrap; font-size: .9rem; color: var(--c-text-muted); }
.empty-filter input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--c-primary); outline: none; }
.empty-filter:focus, .empty-filter input:focus, .empty-filter input:focus-visible { outline: none; box-shadow: none; }

/* transport invoices: recalc modal */
.recalc-buttons { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; }
.recalc-result { margin: .8rem 0; padding: .6rem .8rem; background: var(--c-primary-soft); border-radius: 6px; }
.recalc-conflicts { color: var(--c-danger, #c0392b); margin-top: .5rem; }
.recalc-conflicts ul { margin: .3rem 0 0 1.2rem; }

/* trips: one-shot light-orange highlight when arriving from a transport invoice */
.data-table tbody tr.row-hl { background: rgba(255, 152, 0, 0.20); }
.data-table tbody tr.row-hl:hover { background: rgba(255, 152, 0, 0.28); }
/* transport invoices: rows are clickable (jump to matching trips) */
.js-table[data-module="transport_invoices"] tbody tr[data-id] { cursor: pointer; }
/* remzona: rows are clickable (new invoices → edit page, legacy → RO modal) */
.js-table[data-module="remzona"] tbody tr[data-id] { cursor: pointer; }

/* module list: period total shown above the table (remzona, transport invoices) */
.period-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: 0 0 .6rem; padding: .5rem .7rem; background: var(--c-primary-soft); border-radius: 6px; font-size: .95em; }
.period-total-label { color: var(--c-text-muted); }
.period-total-item strong { font-size: 1.08em; }

/* remzona: line-item invoice page */
.rz-piezimes { display: block; margin-top: .8rem; }
.rz-piezimes textarea { width: 100%; }
.rz-lines-table .rz-th-svc { width: 40%; }
.rz-lines-table input.rz-name { width: 100%; }
.rz-lines-table input.rz-qty, .rz-lines-table input.rz-price { width: 7em; }
.rz-lines-table .rz-line-total { text-align: right; white-space: nowrap; }
.rz-totals { margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.rz-totals .rz-total-sum { font-size: 1.15em; }

/* picker modal: quick-search list (remzona invoice services / clients) */
.picker-field { display: block; width: 100%; text-align: left; padding: .45rem .6rem; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-bg); color: inherit; cursor: pointer; min-height: 2.2em; }
.picker-box { display: flex; flex-direction: column; gap: .7rem; min-width: min(420px, 90vw); }
.picker-search { width: 100%; }
.picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.picker-item { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; width: 100%; text-align: left; padding: .5rem .6rem; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.picker-item[hidden] { display: none; }
.picker-item:hover { background: var(--c-primary-soft); }
.picker-sub { color: var(--c-text-muted); font-size: .9em; white-space: nowrap; }
.picker-foot { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.picker-close { align-self: flex-end; }

/* supervisor: tenant activity modal */
.tenant-activity { min-width: min(720px, 92vw); max-width: 920px; }
.activity-subtitle { margin: .4rem 0 .5rem; font-size: .95rem; }
.activity-online { margin-bottom: 1rem; }
.activity-online-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.activity-online-list li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.online-dot { width: .55em; height: .55em; border-radius: 50%; background: #1faa4a; box-shadow: 0 0 0 2px rgba(31,170,74,.25); flex: 0 0 auto; }
.activity-table-wrap { max-height: 50vh; overflow: auto; }
.activity-table { font-size: .85rem; }
.activity-table .nowrap { white-space: nowrap; }
.activity-table .act-changes { max-width: 28rem; word-break: break-word; color: var(--c-text-muted); }
.act-badge { display: inline-block; padding: .1em .45em; border-radius: 4px; font-size: .85em; background: var(--c-primary-soft); }
.act-badge.act-delete { background: rgba(200,40,40,.15); color: #c02828; }
.act-badge.act-restore { background: rgba(31,170,74,.15); color: #1a8a3c; }
.act-badge.act-create { background: rgba(40,100,200,.12); color: #2864c8; }

/* trips: bulk-select mode (toolbar «Выделить» + row selection) */
.bulk-wrap { position: relative; display: inline-block; }
.js-bulk-toggle.active { background: var(--grad-accent); color: var(--c-on-primary); border-color: transparent; }
.bulk-menu {
  /* anchored to the button's right edge: the toolbar button sits at the right
     end of the toolbar, so left: 0 pushed the menu past the viewport edge.
     JS re-clamps on open in case the button lands near either screen edge. */
  position: absolute; left: auto; right: 0; top: calc(100% + 4px); z-index: 60;
  min-width: 240px; max-width: min(320px, calc(100vw - 1rem)); padding: .3rem;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: 8px; box-shadow: var(--shadow-pop);
}
.bulk-item {
  display: block; width: 100%; text-align: left; padding: .45rem .7rem;
  border: 0; border-radius: 6px; background: transparent; color: inherit;
  cursor: pointer; white-space: nowrap;
}
.bulk-item:hover { background: var(--c-primary-soft); }
.bulk-sep { border-top: 1px solid var(--c-border); margin: .25rem 0; }
.list-wrap.bulk-mode tbody tr[data-id] { cursor: pointer; }
.list-wrap.bulk-mode tbody tr.row-deleted { cursor: default; }
.list-wrap.bulk-mode .td-actions .btn-icon, .list-wrap.bulk-mode .td-actions a { pointer-events: none; opacity: .35; }
.data-table tbody tr.row-bulk td { background: var(--c-bulk-sel); }
.data-table tbody tr.row-bulk td:first-child { box-shadow: inset 3px 0 0 var(--c-bulk-bar); }
.bulk-form { min-width: min(340px, 90vw); }
.bulk-form select, .bulk-form input { width: 100%; margin-top: .6rem; }

/* trips report modal: period/filter recap + the column checkboxes */
.report-box { min-width: min(560px, 92vw); }
.report-meta { font-size: .9rem; color: var(--c-text-muted); line-height: 1.5; margin-bottom: .9rem; }
.report-meta-k { font-weight: 600; }
.report-warn {
  display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .9rem;
  padding: .55rem .7rem; border-radius: 8px; font-size: .88rem; line-height: 1.45;
  background: var(--c-expiring-bg); color: var(--c-expiring-fg);
}
.report-warn svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: .1em; }
.report-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .5rem; }
.report-head-t { font-weight: 600; margin-right: auto; }
.link-btn {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--c-primary); font-size: .85rem; text-decoration: underline;
}
.report-fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .35rem .9rem;
  max-height: 46vh; overflow-y: auto; padding: .6rem; border: 1px solid var(--c-border); border-radius: 8px;
}
.report-field { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .92rem; }
.report-field input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--c-primary); }
.report-hint { margin-top: .6rem; font-size: .88rem; color: var(--c-danger); }
.modal-actions .js-report-print { display: inline-flex; align-items: center; gap: .35em; }
.modal-actions .js-report-print svg { width: 1.1em; height: 1.1em; }