@font-face {
  font-family: 'MarkGeo';
  src: url('/fonts/mark-geo-medium.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MarkGeo';
  src: url('/fonts/mark-geo-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MarkGeoCaps';
  src: url('/fonts/mark-geo-caps-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-main: #f5f6f8;
  --card-bg: #ffffff;
  --card-dark: #191a1d;
  --text-main: #18191c;
  --text-muted: #66717d; /* 4.97:1 on white, 4.6:1 on --bg-main (WCAG AA); was #808b96 - 3.5:1 */
  --text-sub: #555d66;
  --accent-orange: #ff5e3a;
  --accent-orange-hover: #e04e2b;
  --accent-orange-light: #fff2ef;
  --accent-green: #10b981;
  --accent-green-bg: #e6f9f3;
  --accent-red: #ef4444;
  --accent-red-bg: #fef2f2;
  --accent-yellow: #f59e0b;
  --accent-yellow-bg: #fef3c7;
  --border-light: #eef1f5;
  --border-muted: #dbe1e8;
  --radius-xl: 24px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-pill: 40px;
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.03);
  --font-family: 'MarkGeo', system-ui, -apple-system, sans-serif;
  --font-caps: 'MarkGeoCaps', 'MarkGeo', sans-serif;
  --sidebar-width: 80px;
  /* page-level tokens (were scattered next to their components) */
  --row-h: 52px;
  --focus: 0 0 0 3px rgba(255, 94, 58, 0.35);
  --primary-bg: var(--card-dark); --primary-fg: #ffffff;
  --warn-text: #b45309;
  --early: var(--accent-green); --early-bg: var(--accent-green-bg);
  --rp-surface: #f6f7f9; --rp-head: #f8f9fb; --rp-hover: #f3f5f8; --rp-line: #eceff3; --rp-sorted: rgba(24, 25, 28, 0.025);
}

[data-theme="dark"] {
  --bg-main: #121316;
  --card-bg: #1c1d22;
  --card-dark: #24262c;
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-sub: #d1d5db;
  --border-light: #2c2e36;
  --border-muted: #373a45;
  --accent-orange-light: rgba(255, 94, 58, 0.15);
  --accent-green-bg: rgba(16, 185, 129, 0.15);
  --accent-red-bg: rgba(239, 68, 68, 0.15);
  --accent-yellow-bg: rgba(245, 158, 11, 0.15);
  --primary-bg: var(--accent-orange); --primary-fg: #ffffff;
  --warn-text: #fbbf24;
  --rp-surface: #212328; --rp-head: #202227; --rp-hover: #26282f; --rp-line: #2e3138; --rp-sorted: rgba(255, 255, 255, 0.03);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.modal-header h2,
.greeting-header h1,
.s-title {
  font-family: var(--font-caps);
  font-weight: 600;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar {
  width: var(--sidebar-width);
  min-height: calc(100vh - 32px);
  margin: 16px 0 16px 16px;
  background: var(--card-bg);
  border-radius: 36px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  z-index: 100;
  transition: background 0.3s ease;
}
.sidebar .nav-icons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar .nav-icons .nav-icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.2s ease;
}
.sidebar .nav-icons .nav-icon-btn:hover {
  color: var(--text-main);
  background: var(--bg-main);
}
.sidebar .nav-icons .nav-icon-btn.active {
  background: var(--accent-orange);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(255, 94, 58, 0.4);
}
.sidebar .bottom-icons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar .bottom-icons .icon-btn-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sidebar .bottom-icons .icon-btn-sm:hover {
  color: var(--text-main);
  border-color: var(--border-muted);
}

.main-wrapper {
  flex: 1;
  min-width: 0;
  padding: 16px 28px;
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.greeting-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.greeting-header p {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Named grid areas: each breakpoint below redefines the full map, so an
   item is never left pointing at a column/row that doesn't exist at that
   width (the old numeric grid-column approach broke exactly that way). */

/* --- App-style bottom navigation: hidden on desktop, replaces sidebar
   + top pill-nav entirely below 700px so mobile has one clear nav pattern --- */
.bottom-nav {
  display: none;
}
@media (max-width: 700px) {
  .sidebar {
    display: none;
  }
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 200;
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-light);
    padding: 6px;
    justify-content: space-between;
    gap: 4px;
  }
  .bottom-nav .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-lg);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .bottom-nav .bottom-nav-item.active {
    background: var(--accent-orange);
    color: #ffffff;
  }
  .main-wrapper { padding-bottom: 88px; }
  .bottom-nav .bottom-nav-item { flex: 1 1 auto; min-width: 0; }
  .bottom-nav .bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* five Georgian labels need the room on narrow phones */
@media (max-width: 400px) {
  .bottom-nav { gap: 2px; }
  .bottom-nav .bottom-nav-item { padding: 8px 2px; font-size: 0.64rem; }
}

/* --- Header / navigation responsiveness --- */
@media (max-width: 1024px) {
  .main-wrapper { padding: 16px 18px; }
  
  
  
}
@media (max-width: 640px) {
  .greeting-header h1 { font-size: 1.5rem; }
  .greeting-header p { font-size: 0.85rem; }
  
  
  
  

  /* Sections / containers: less padding, smaller type on small screens */
  .card { padding: 16px; }
  
  
  
  
  
  .modal-overlay { padding: 16px; }
  .modal-overlay .modal-box { padding: 20px; }
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

table.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}
table.data-table thead tr th {
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}
table.data-table tbody tr {
  transition: background 0.15s ease;
}
table.data-table tbody tr:hover {
  background: var(--bg-main);
}
table.data-table tbody tr td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-main);
  vertical-align: middle;
}
table.data-table tbody tr td .face-thumb-sm {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-light);
  background: var(--bg-main);
}
table.data-table tbody tr td .status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.8rem;
}
table.data-table tbody tr td .status-indicator .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
table.data-table tbody tr td .status-indicator.completed {
  color: var(--accent-green);
}
table.data-table tbody tr td .status-indicator.completed .dot {
  background: var(--accent-green);
}
table.data-table tbody tr td .status-indicator.pending {
  color: var(--accent-yellow);
}
table.data-table tbody tr td .status-indicator.pending .dot {
  background: var(--accent-yellow);
}
table.data-table tbody tr td .status-indicator.failed {
  color: var(--accent-red);
}
table.data-table tbody tr td .status-indicator.failed .dot {
  background: var(--accent-red);
}

.row-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-main);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-right: 6px;
}
.row-action-btn:hover {
  color: var(--text-main);
  border-color: var(--border-muted);
}
.row-action-btn.danger:hover {
  color: var(--accent-red);
  border-color: var(--accent-red);
  background: var(--accent-red-bg);
}

.raw-json-box {
  background: var(--card-dark);
  color: #a7f3d0;
  padding: 16px;
  border-radius: var(--radius-lg);
  font-family: inherit; font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  overflow-x: auto;
  max-height: 250px;
  margin-top: 12px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay .modal-box {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 540px;
  padding: 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-light);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.modal-overlay .modal-box .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modal-overlay .modal-box .modal-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
}
.modal-overlay .modal-box .modal-header .btn-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
}
.modal-overlay .modal-box .modal-header .btn-close:hover {
  color: var(--text-main);
}
.modal-overlay .modal-box .form-group {
  margin-bottom: 16px;
}
.modal-overlay .modal-box .form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 6px;
}
.modal-overlay .modal-box .form-group input[type=text], .modal-overlay .modal-box .form-group input[type=number],
.modal-overlay .modal-box .form-group input[type=email], .modal-overlay .modal-box .form-group input[type=password],
.modal-overlay .modal-box .form-group select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--text-main);
  font-family: var(--font-family);
}
.modal-overlay .modal-box .form-group input[type=text]:focus, .modal-overlay .modal-box .form-group input[type=number]:focus, .modal-overlay .modal-box .form-group select:focus {
  outline: none;
  border-color: var(--accent-orange);
}
.modal-overlay .modal-box .photo-upload-zone {
  border: 2px dashed var(--border-muted);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  background: var(--bg-main);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}
.modal-overlay .modal-box .photo-upload-zone:hover {
  border-color: var(--accent-orange);
  background: var(--accent-orange-light);
}
.modal-overlay .modal-box .photo-upload-zone input[type=file] {
  display: none;
}

.modal-overlay .modal-box .photo-upload-zone .upload-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}
.modal-overlay .modal-box .photo-upload-zone .upload-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.modal-overlay .modal-box .photo-upload-zone img.preview-img {
  max-height: 120px;
  border-radius: var(--radius-md);
  margin-top: 10px;
  object-fit: cover;
}
.modal-overlay .modal-box .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.modal-overlay .modal-box .modal-actions .btn-cancel {
  background: var(--bg-main);
  color: var(--text-main);
  border: 1px solid var(--border-light);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
}
.modal-overlay .modal-box .modal-actions .btn-submit {
  background: var(--accent-orange);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
}
.modal-overlay .modal-box .modal-actions .btn-submit:hover {
  background: var(--accent-orange-hover);
}

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast-container .toast-item {
  background: var(--card-dark);
  color: white;
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.3s ease forwards;
}
.toast-container .toast-item.success {
  border-left: 4px solid var(--accent-green);
}
.toast-container .toast-item.error {
  border-left: 4px solid var(--accent-red);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   Layout fixes - one component system on top of the base styles above.
   Desktop (>= 1024px wide and >= 700px high): the app fits one screen
   (100dvh); lists show as many rows as fit and page through the rest.
   Smaller screens keep the normal scrolling layout.
   ===================================================================== */


[hidden] { display: none !important; }
.sr-only {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 2000;
  background: var(--card-dark); color: #fff; padding: 10px 16px; border-radius: var(--radius-md);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 16px; }
.muted { color: var(--text-muted); font-weight: 400; }
:focus-visible { outline: none; box-shadow: var(--focus); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: none; }
.modal-overlay .modal-box:focus, .modal-overlay .modal-box:focus-visible { outline: none; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); }
button { font-family: var(--font-family); }

/* ---------------------------------------------------------------- navigation */

.avatar-initials {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.sidebar .nav-icon-btn.active { box-shadow: none; }
.bottom-nav .bottom-nav-item { font-family: var(--font-family); }

/* ---------------------------------------------------------------- buttons */
.btn-action-primary,
.btn-action-secondary,
.btn-submit,
.btn-cancel,
.link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-pill); font-family: var(--font-family); font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.btn-action-primary,
.btn-submit {
  background: var(--primary-bg); color: var(--primary-fg); border: 1px solid transparent;
  padding: 10px 20px; font-size: 0.88rem;
}
.btn-action-primary:hover, .btn-submit:hover,
.modal-overlay .modal-box .modal-actions .btn-submit:hover { background: var(--primary-bg); opacity: 0.88; }
.btn-action-secondary,
.btn-cancel {
  background: var(--bg-main); color: var(--text-main); border: 1px solid var(--border-light);
  padding: 10px 20px; font-size: 0.88rem;
}
.btn-action-secondary:hover, .btn-cancel:hover { border-color: var(--border-muted); background: var(--border-light); }
.btn-action-secondary.danger, .btn-submit.danger { color: var(--accent-red); border-color: var(--accent-red); background: transparent; }
.btn-submit.danger { background: var(--accent-red); color: #fff; }
.btn-action-secondary.danger:hover { background: var(--accent-red-bg); }

.link-btn { background: none; border: 0; padding: 4px 0; color: var(--accent-orange); font-size: 0.82rem; }
.link-btn:hover { opacity: 0.8; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.text-link {
  color: var(--text-main); text-decoration: underline; text-decoration-color: var(--border-muted);
  text-underline-offset: 3px; font-weight: 600;
}
.text-link:hover { color: var(--accent-orange); text-decoration-color: currentColor; }
table.data-table .text-link { text-decoration: none; font-weight: 400; }
table.data-table .text-link.strong { font-weight: 600; }
table.data-table .text-link:hover { text-decoration: underline; }
.code { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--text-sub); }

/* ---------------------------------------------------------------- form fields */
.field-input {
  height: 38px; padding: 0 14px; min-width: 0;
  background: var(--bg-main); color: var(--text-main);
  border: 1px solid var(--border-light); border-radius: var(--radius-pill);
  font-family: var(--font-family); font-size: 0.85rem;
}
.field-input:focus { outline: none; border-color: var(--accent-orange); }
.field-search { width: 220px; }
select.field-input,
.modal-overlay .modal-box .form-group select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23808b96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.list-toolbar select.field-input { width: 200px; }
.field-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-sub); margin-bottom: 6px; }

.modal-overlay .modal-box .form-group input[type=time] {
  width: 100%; padding: 10px 14px; background: var(--bg-main); color: var(--text-main);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  font-family: var(--font-family); font-size: 0.9rem; color-scheme: light;
}
[data-theme="dark"] .modal-overlay .modal-box .form-group input[type=time] { color-scheme: dark; }
.modal-overlay .modal-box .form-group input:focus { outline: none; border-color: var(--accent-orange); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------------------------------------------------------------- cards and sections */
.card.card-lg { padding: 24px 28px; }
.card.card-md { padding: 20px 24px; }
.section-head {
  display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.section-head > div:first-child { flex: 1 1 280px; min-width: 0; }
.section-head h2 { font-size: 1.25rem; }
.section-head p { color: var(--text-muted); font-size: 0.88rem; margin-top: 2px; }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.list-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.data-table th, table.data-table td { white-space: nowrap; }
table.data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--card-bg); font-size: 0.8rem; }
table.data-table tbody tr td { height: var(--row-h); padding-top: 0; padding-bottom: 0; }

table.data-table .cell-actions { text-align: right; width: 1%; }
.face-thumb-sm, table.data-table tbody tr td .face-thumb-sm {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover; display: block;
  border: 1px solid var(--border-light); background: var(--bg-main);
}
.face-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.status-indicator { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.status-indicator .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-indicator.completed { color: var(--accent-green); }
.status-indicator.completed .dot { background: var(--accent-green); }
.status-indicator.pending { color: var(--accent-yellow); }
.status-indicator.pending .dot { background: var(--accent-yellow); }
.status-indicator.failed { color: var(--accent-red); }
.status-indicator.failed .dot { background: var(--accent-red); }
.row-click { cursor: pointer; }
.row-click:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-orange); }
.row-more { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.row-click:hover .row-more { color: var(--accent-orange); }
.row-actions { display: inline-flex; gap: 6px; }
.row-action-btn { margin-right: 0; }
table.data-table td.c-name, table.data-table td.c-branch { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  
  table.data-table td.c-name, table.data-table td.c-branch { max-width: 160px; }
}
.empty-cell { text-align: center; color: var(--text-muted); white-space: normal !important; }

/* pager */
.pager {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--border-light); margin-top: 4px; min-height: 48px;
}
.pager:empty { display: none; }
.pager-info { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pager-nav { display: flex; gap: 4px; align-items: center; }
.pager-btn {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px;
  border: 1px solid var(--border-light); background: var(--card-bg); color: var(--text-main);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pager-btn:hover:not(:disabled) { border-color: var(--border-muted); }
.pager-btn.active { background: var(--primary-bg); color: var(--primary-fg); border-color: transparent; }
.pager-gap { color: var(--text-muted); padding: 0 4px; }

/* segmented switch */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-main); border: 1px solid var(--border-light); border-radius: var(--radius-pill); }
.seg-btn {
  border: 0; background: transparent; color: var(--text-muted); font-size: 0.84rem; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
}
.seg-btn:hover { color: var(--text-main); }
.seg-btn.active { background: var(--primary-bg); color: var(--primary-fg); }

/* ---------------------------------------------------------------- overview */
.greeting-header h1 { font-size: 1.6rem; }

.device-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.76rem; font-weight: 600; background: var(--bg-main); color: var(--text-muted); white-space: nowrap; }
.device-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.device-status.ok { background: var(--accent-green-bg); color: var(--accent-green); }
.device-status.off { background: var(--accent-red-bg); color: var(--accent-red); }

.chart-legend { display: flex; gap: 14px; font-size: 0.78rem; font-weight: 600; color: var(--text-sub); }
.chart-legend .leg-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; }
.chart-legend .dot.profit { background: #ff5e3a; }
.chart-legend .dot.loss { background: #191a1d; }
[data-theme="dark"] .chart-legend .dot.loss { background: #9ca3af; }

.recent-card { padding: 20px; }

/* ---------------------------------------------------------------- modals */
.modal-overlay { padding: 16px; }
.modal-overlay .modal-box { max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-overlay .modal-box.modal-wide { max-width: 720px; }
.modal-overlay .modal-box.modal-xl { max-width: 1080px; }
.modal-overlay .modal-box.modal-full { max-width: min(1280px, 96vw); width: 100%; }
.modal-overlay .modal-box.modal-sm { max-width: 440px; }
.modal-overlay.active .modal-box { transform: none; }
.modal-overlay .modal-box .modal-header .btn-close {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.modal-overlay .modal-box .modal-header .btn-close:hover { background: var(--bg-main); }
.modal-overlay .modal-box .modal-actions .btn-submit,
.modal-overlay .modal-box .modal-actions .btn-cancel { padding: 10px 22px; }
.modal-overlay .modal-box .modal-actions .btn-submit { background: var(--primary-bg); color: var(--primary-fg); }
.modal-overlay .modal-box .modal-actions .btn-submit.danger { background: var(--accent-red); }
.modal-overlay .modal-box .photo-upload-zone.drag,
.modal-overlay .modal-box .photo-upload-zone:focus-visible { border-color: var(--accent-orange); background: var(--accent-orange-light); }

.confirm-text { color: var(--text-sub); line-height: 1.6; margin-bottom: 20px; }

.detail-grid { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: start; }

.detail-img { width: 140px; height: 140px; border-radius: var(--radius-lg); object-fit: cover; border: 1px solid var(--border-light); background: var(--bg-main); }
.detail-img.face-empty svg { width: 44px; height: 44px; }
.detail-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.detail-list dt { color: var(--text-muted); font-size: 0.82rem; }
.detail-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.detail-json { margin-top: 20px; }
.detail-json summary { cursor: pointer; color: var(--text-sub); font-size: 0.85rem; font-weight: 600; }

.raw-json-box { white-space: pre; }
.detail-h3 { font-size: 0.95rem; margin: 24px 0 10px; }
.detail-events,
.late-list { list-style: none; display: grid; gap: 8px; }
.detail-events li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--bg-main); border-radius: var(--radius-md); font-size: 0.82rem;
}

.info-list { margin: 12px 0 0 18px; display: grid; gap: 6px; line-height: 1.5; }
.info-actions { margin-top: 16px; display: flex; justify-content: flex-end; }

.analytics-note { font-size: 0.82rem; margin-bottom: 12px; }

/* analytics */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--bg-main); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 12px 16px; }
.kpi span { display: block; font-size: 0.78rem; color: var(--text-muted); }
.kpi strong { display: block; font-size: 1.4rem; margin-top: 4px; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.an-card { border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px; min-width: 0; }
.an-card.an-wide { grid-column: 1 / -1; }
.an-card h3 { font-size: 0.92rem; margin-bottom: 10px; }
.an-canvas { position: relative; height: 220px; }
.an-wide .an-canvas { height: 240px; }
.late-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 8px 12px; background: var(--bg-main); border-radius: var(--radius-md); font-size: 0.84rem; }
.late-list strong { color: var(--accent-red); }

/* demo marker (demo build) */

/* ---------------------------------------------------------------- one branch (#branches/<id>) */
a.nav-icon-btn, a.bottom-nav-item, a.side-logo, .page-actions > a { text-decoration: none; }

/* toasts */
.toast-container .toast-item,
.toast-container .toast-item.success,
.toast-container .toast-item.error {
  border-left: 0; border-radius: var(--radius-md); padding: 12px 16px; font-size: 0.86rem; gap: 10px; max-width: 360px;
}
.toast-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent-orange); }
.toast-item.success .toast-dot { background: var(--accent-green); }
.toast-item.error .toast-dot { background: var(--accent-red); }

/* ---------------------------------------------------------------- desktop: one screen */
@media (min-width: 1024px) and (min-height: 700px) {
  body { height: 100dvh; overflow: hidden; }
  .sidebar { min-height: 0; height: calc(100dvh - 32px); }
  .main-wrapper { height: 100dvh; min-height: 0; min-width: 0; width: 100%; gap: 14px; overflow: hidden; }
  .greeting-header { flex-shrink: 0; }
  .greeting-header { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
  .greeting-header h1 { margin-bottom: 0; }
  .greeting-header p { flex-basis: 100%; }
  .main-area { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tab-content { flex: 1; min-height: 0; }
  .tab-content > .panel-card { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .panel-card .section-head, .panel-card .list-toolbar, .panel-card .pager { flex-shrink: 0; }
  .panel-card > .table-wrap { flex: 1; min-height: 0; overflow-y: hidden; }
  

  
  
  
  .recent-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  
  .recent-card .table-wrap { flex: 1; min-height: 0; overflow-y: hidden; }

  
}
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 820px) {
  .greeting-header h1 { font-size: 1.35rem; }
  .greeting-header p { font-size: 0.85rem; }
  
  
  .card.card-lg { padding: 18px 24px; }
  
  
}

/* ---------------------------------------------------------------- tablet / phone */
@media (max-width: 1023px) {
  .main-wrapper { padding: 16px 18px; }
  /* narrow tiles: the title gets the whole width */
  
}
@media (max-width: 700px) {
  .main-wrapper { padding-bottom: 96px; }
  .toast-container { left: 16px; right: 16px; bottom: 96px; }
  
}
@media (max-width: 640px) {
  
  
  
  
  .card.card-lg,
.card.card-md,
.recent-card { padding: 16px; }
  .section-head h2 { font-size: 1.1rem; }
  .head-actions, .head-actions > *, .list-toolbar > *, .field-search { width: 100%; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; }
  .form-row { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-events li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .analytics-grid { grid-template-columns: minmax(0, 1fr); }
  .list-toolbar select.field-input { width: 100%; }
  
  
  .modal-overlay .modal-box .modal-actions button { flex: 1; }
  .pager { justify-content: center; }
}

/* ---------------------------------------------------------------- tables as cards (< 1024px)
   Below desktop width a row becomes a compact card: the important values stay visible,
   nothing scrolls sideways. Details still open in the modal. */
@media (max-width: 1023px) {
  .table-wrap { overflow: visible; }
  table.data-table, table.data-table tbody { display: block; width: 100%; }
  table.data-table thead { display: none; }
  table.data-table tbody tr {
    display: grid; gap: 4px 12px; align-items: center;
    padding: 12px 6px; border-bottom: 1px solid var(--border-light);
  }
  table.data-table tbody tr td {
    display: block; height: auto; padding: 0; border: 0; min-width: 0; max-width: none;
    overflow: hidden; text-overflow: ellipsis;
  }
  table.data-table tbody tr td.empty-cell { padding: 24px 0; }
  table.data-table td.c-more { display: none; }
  table.data-table td.cell-actions { width: auto; overflow: visible; }
  table.data-table td.c-time,
table.data-table td.c-hours,
table.data-table td.c-count,
table.data-table td.c-branch { font-size: 0.8rem; color: var(--text-muted); }
  table.data-table td.c-branch .text-link { color: var(--text-sub); }
  table.data-table .face-thumb-sm { width: 40px; height: 40px; }

  
    
  
  
  
  
  

  
  
  
  
  

  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
}

/* =====================================================================
   Overview, calmer: one navigation (sidebar), one page title, today's
   numbers, what needs attention, latest arrivals, the day's flow.
   Colour appears only where something is wrong.
   ===================================================================== */

/* CAPS only for page and dialog titles */
h2,
h3,
.s-title {
  font-family: var(--font-family);
}
.greeting-header h1, .modal-overlay .modal-box .modal-header h2 { font-family: var(--font-caps); }

/* top bar: brand (+ demo marker) left, tools right */

/* page header */
.page-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.page-title { min-width: 0; }
.page-title h1 { font-size: 1.5rem; }
.page-title p { color: var(--text-muted); font-size: 0.88rem; margin-top: 2px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.page-actions > button, .page-actions > a { padding: 10px 18px; }

/* overview grid */
.overview {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kpi" "attn" "recent" "flow";
}
@media (min-width: 701px) {
  .overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kpi kpi" "attn recent" "flow flow"; }
}

/* today's numbers */
.kpi-strip { grid-area: kpi; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 701px) { .kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.kpi-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 16px 18px; text-align: left; cursor: pointer;
  background: var(--card-bg); color: var(--text-main);
  border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  font-family: var(--font-family); transition: border-color 0.2s ease;
}
.kpi-card:hover { border-color: var(--border-muted); }
.kpi-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.kpi-value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-of { margin-left: 4px; font-size: 1rem; color: var(--text-muted); }
.kpi-sub { font-size: 0.78rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.kpi-bar { height: 6px; border-radius: 3px; background: var(--bg-main); overflow: hidden; margin-top: 2px; }
.kpi-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent-orange); transition: width 0.4s ease; }
.kpi-card.warn .kpi-value { color: var(--warn-text); }
.kpi-card.alert .kpi-value { color: var(--accent-red); }
.kpi-card .device-status { padding: 0; background: none; border-radius: 0; font-size: 0.78rem; font-weight: 400; }
.kpi-card .device-status.ok { color: var(--text-muted); background: none; }
.kpi-card .device-status.ok .dot { background: var(--accent-green); }
.kpi-card .device-status.off { color: var(--accent-red); background: none; }

/* lists */
.feed-card, .flow-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 18px 20px; }
.attention-card { grid-area: attn; }
.overview .recent-card { grid-area: recent; padding: 18px 20px; }
.flow-card { grid-area: flow; }
.feed-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 6px; }
.feed-head h2 { font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.flow-card .feed-head h2 { margin-right: auto; }
.count-pill { min-width: 22px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-red-bg); color: var(--accent-red); font-size: 0.74rem; font-weight: 600; text-align: center; }
.feed-table tbody tr:last-child td { border-bottom: 0; }
.feed-table td.c-time { width: 1%; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.feed-table td.c-branch { color: var(--text-muted); }
.feed-table td.c-kind { width: 1%; }
.kind { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; }
.kind .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.kind.late { color: var(--warn-text); }
.kind.late .dot { background: var(--accent-yellow); }
.kind.fail { color: var(--accent-red); }
.kind.fail .dot { background: var(--accent-red); }
.ok-note { color: var(--accent-green); font-weight: 600; }
.ok-note::before { content: "✓ "; }

/* the day's flow */
.flow-card .chart-legend { font-weight: 400; color: var(--text-muted); }
.flow-card .chart-canvas-wrap { position: relative; flex: 1; min-height: 160px; }

/* desktop: one screen */
@media (min-width: 1024px) and (min-height: 700px) {
  .overview { grid-template-rows: auto minmax(0, 1fr) 190px; }
  .feed-card { overflow: hidden; }
  .feed-card .table-wrap { flex: 1; min-height: 0; overflow-y: hidden; }
  .flow-card .chart-canvas-wrap { min-height: 0; }
}
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 820px) {
  .overview { grid-template-rows: auto minmax(0, 1fr) 150px; }
  .page-title h1 { font-size: 1.3rem; }
  .kpi-card { padding: 12px 16px; gap: 4px; }
  .kpi-value { font-size: 1.45rem; }
  .feed-card, .flow-card, .overview .recent-card { padding: 14px 18px; }
}

/* phones */
@media (max-width: 640px) {
  .page-actions { width: 100%; }
  .page-actions > button, .page-actions > a { flex: 1 1 140px; }
  
}

/* lists as cards below desktop width */

.feed-table .empty-cell { height: auto !important; padding: 36px 12px !important; color: var(--text-muted); font-size: 0.88rem; }

/* feed tables: name with the branch underneath, time on the right - nothing is cut */
.feed-table td.c-name .sub { display: block; font-size: 0.76rem; font-weight: 400; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.feed-table td.c-name { line-height: 1.35; }
@media (min-width: 1024px) {
  .feed-table { table-layout: fixed; }
  .feed-table td { overflow: hidden; text-overflow: ellipsis; }
  
  
  .feed-table td.c-kind, .feed-table td.c-time { width: auto; }
  table.data-table.feed-table td.c-name { max-width: none; }
}
/* secondary links stay quiet; orange is for the main action */
.link-btn { color: var(--text-sub); }
.link-btn:hover { color: var(--accent-orange); opacity: 1; }

/* ---------------------------------------------------------------- data source: simulator / real terminal */

.mode-note { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin: 4px 0 14px; }
.sim-panel { font-size: 0.86rem; margin-bottom: 16px; }
.sim-panel p { line-height: 1.6; }
.conn-result { padding: 12px 14px; border-radius: var(--radius-md); font-size: 0.85rem; line-height: 1.5; margin-bottom: 12px; border: 1px solid transparent; }
.conn-result .detail-list { margin-top: 8px; font-size: 0.82rem; }
.conn-result .mode-note { margin: 8px 0 0; }
.conn-result.pending { background: var(--bg-main); color: var(--text-muted); }
.conn-result.ok { background: var(--accent-green-bg); border-color: rgba(16, 185, 129, 0.3); }
.conn-result.ok > strong { color: var(--accent-green); }
.conn-result.warn { background: var(--accent-yellow-bg); border-color: rgba(245, 158, 11, 0.3); }
.conn-result.warn > strong { color: var(--warn-text); }
.conn-result.err { background: var(--accent-red-bg); border-color: rgba(239, 68, 68, 0.3); color: var(--text-main); }
.conn-result.err > strong { color: var(--accent-red); }
.modal-overlay .modal-box .form-group input[type=password] {
  width: 100%; padding: 10px 14px; background: var(--bg-main); color: var(--text-main);
  border: 1px solid var(--border-light); border-radius: var(--radius-md); font-family: var(--font-family); font-size: 0.9rem;
}

/* ---------------------------------------------------------------- start dialog: simulation / device test */

/* ---------------------------------------------------------------- sidebar: brand, sections, tools, account
   Below 700px the sidebar is hidden and the bottom navigation takes over. */
.sidebar {
  position: sticky; top: 16px; align-self: flex-start;
  height: calc(100dvh - 32px); min-height: 0; padding: 18px 0; gap: 12px;
  overflow-y: auto; scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.side-top { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.side-logo { display: flex; border-radius: 14px; }
.side-logo .logo-badge {
  width: 44px; height: 44px; border-radius: 14px; background: var(--accent-orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

.sidebar .nav-icons { gap: 8px; }
.sidebar .bottom-icons { gap: 8px; align-items: center; }
.sidebar .bottom-icons .icon-btn-sm { position: relative; padding: 0; font: inherit; }

.side-avatar { width: 36px; height: 36px; font-size: 0.9rem; margin-top: 4px; cursor: default; }
@media (max-height: 680px) {
  .sidebar .nav-icons .nav-icon-btn { width: 40px; height: 40px; }
  .sidebar .bottom-icons .icon-btn-sm { width: 34px; height: 34px; }
  .sidebar .nav-icons, .sidebar .bottom-icons { gap: 4px; }
}
/* desktop sidebar height: 700-760px screens get the compact sizes too */
@media (min-width: 701px) and (max-height: 760px) {
  .sidebar { padding: 14px 0; }
  .side-logo .logo-badge { width: 40px; height: 40px; }
  .sidebar .nav-icons .nav-icon-btn { width: 42px; height: 42px; }
  .sidebar .bottom-icons .icon-btn-sm { width: 36px; height: 36px; }
  .sidebar .nav-icons, .sidebar .bottom-icons { gap: 6px; }
  .side-avatar { width: 32px; height: 32px; margin-top: 2px; }
}

/* ---------------------------------------------------------------- my account (#account) */
.side-avatar { text-decoration: none; cursor: pointer; transition: box-shadow 0.2s ease; }
.side-avatar:hover, .side-avatar.active { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--accent-orange); }
.account-view { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.account-side, .account-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.profile-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.profile-avatar { width: 64px; height: 64px; font-size: 1.6rem; }
.profile-text h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.profile-text p { color: var(--text-muted); font-size: 0.88rem; margin: 2px 0 8px; overflow-wrap: anywhere; }
.profile-meta { font-size: 0.8rem; }
.role-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 0.76rem; font-weight: 600; white-space: nowrap;
  background: var(--border-light); color: var(--text-sub);
}
.role-badge.role-superadmin { background: var(--accent-orange-light); color: var(--accent-orange); }
.role-badge.role-admin { background: var(--accent-green-bg); color: var(--accent-green); }
.role-badge.role-operator { background: var(--accent-yellow-bg); color: #b45309; }
.cell-sub { display: block; color: var(--text-muted); font-size: 0.8rem; font-weight: 400; overflow-wrap: anywhere; }
.audit-card h2 { font-size: 1.05rem; }
.audit-card > p { font-size: 0.82rem; margin-top: 2px; }
.audit-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.audit-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 0.84rem; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }
.audit-list li:last-child { border-bottom: 0; }

@media (max-width: 1100px) {
  .account-view { grid-template-columns: minmax(0, 1fr); }
}

/* my permissions: role, total, one row per group with its icon, count and permission chips */
.perms-card { display: flex; flex-direction: column; gap: 14px; }
.perms-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.perms-head h2 { font-size: 1.05rem; }
.perms-note { color: var(--text-muted); font-size: 0.84rem; margin-top: -6px; line-height: 1.5; }
.perms-total { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-main); }
.perms-count { font-size: 0.82rem; color: var(--text-muted); }
.perms-count strong { font-size: 1.15rem; color: var(--text-main); }
.perms-total .kpi-bar { background: var(--border-light); }
.perm-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.perm-group { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.perm-group:last-child { border-bottom: 0; }

.perm-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.perm-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.perm-title strong { font-size: 0.88rem; }
.perm-n { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--bg-main); }
.perm-n.full { color: var(--accent-green); background: var(--accent-green-bg); }
.perm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 0.76rem; line-height: 1.35; border: 1px solid var(--border-light); color: var(--text-sub); background: var(--card-bg);
}
.perm-chip svg { flex-shrink: 0; width: 12px; height: 12px; }
.perm-chip.yes svg { color: var(--accent-green); }
.perm-chip.no { color: var(--text-muted); background: var(--bg-main); border-style: dashed; }
.perms-compare { align-self: stretch; }

/* roles comparison: cards per role, then the permission matrix */
.rm-intro { font-size: 0.86rem; margin-bottom: 14px; }
.role-cards { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.role-card {
  --role: var(--text-muted); --role-bg: var(--bg-main);
  display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-light); background: var(--card-bg);
}
.role-option { --role: var(--text-muted); --role-bg: var(--bg-main); }
.role-card.role-superadmin, .role-option.role-superadmin { --role: var(--accent-orange); --role-bg: var(--accent-orange-light); }
.role-card.role-admin, .role-option.role-admin { --role: var(--accent-green); --role-bg: var(--accent-green-bg); }
.role-card.role-operator, .role-option.role-operator { --role: var(--accent-yellow); --role-bg: var(--accent-yellow-bg); }
.role-card.mine { border-color: var(--role); box-shadow: 0 0 0 1px var(--role) inset; }
.role-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role-card-head strong { font-size: 0.9rem; }
.role-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--role); box-shadow: 0 0 0 4px var(--role-bg); flex-shrink: 0; }
.role-mine { font-size: 0.68rem; font-weight: 600; color: var(--role); background: var(--role-bg); padding: 1px 8px; border-radius: var(--radius-pill); }
.role-card p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; flex: 1; }
.role-card-foot { display: grid; gap: 5px; font-size: 0.76rem; color: var(--text-muted); }
.role-card-foot strong { color: var(--text-main); font-size: 0.95rem; }
.role-card-foot .kpi-bar span { background: var(--role); }

.roles-matrix-wrap { overflow-x: auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.roles-matrix { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.roles-matrix th, .roles-matrix td { padding: 9px 8px; text-align: left; }
.roles-matrix th:first-child { padding-left: 14px; }
.roles-matrix thead th { position: sticky; top: 0; background: var(--card-bg); border-bottom: 1px solid var(--border-light); text-align: center; white-space: nowrap; }
.roles-matrix thead .rm-corner { text-align: left; font-size: 0.74rem; font-weight: 600; color: var(--text-muted); }
.rm-role { display: inline-block; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; background: var(--bg-main); color: var(--text-sub); }
.rm-role.role-superadmin { background: var(--accent-orange-light); color: var(--accent-orange); }
.rm-role.role-admin { background: var(--accent-green-bg); color: var(--accent-green); }
.rm-role.role-operator { background: var(--accent-yellow-bg); color: #b45309; }
.roles-matrix .rm-group th {
  background: var(--bg-main); font-weight: 600; font-size: 0.8rem; color: var(--text-main);
  display: table-cell; padding: 8px 12px;
}

.roles-matrix .rm-row th { font-weight: 400; color: var(--text-sub); min-width: 160px; }
.roles-matrix .rm-row + .rm-row th, .roles-matrix .rm-row + .rm-row td { border-top: 1px solid var(--border-light); }
.roles-matrix .rm-row:hover th, .roles-matrix .rm-row:hover td { background: var(--bg-main); }
.rm-cell { text-align: center !important; width: 15%; }
.rm-cell.mine, .roles-matrix thead th.mine { background: color-mix(in srgb, var(--accent-orange) 6%, transparent); }
.rm-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; }
.rm-mark.yes { background: var(--accent-green-bg); color: var(--accent-green); }
.rm-mark.yes svg { width: 13px; height: 13px; stroke-width: 2.6; }
.rm-mark.no::before { content: ""; width: 8px; height: 2px; border-radius: 1px; background: var(--border-muted, var(--text-muted)); opacity: 0.5; }
@media (max-width: 560px) {
  .role-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .roles-matrix .rm-row th { min-width: 150px; position: sticky; left: 0; background: var(--card-bg); }
}

/* user form: icon header, inputs with icons, role picker cards */
.modal-overlay .modal-box.modal-user { max-width: 640px; }
.modal-overlay .modal-box .modal-header.modal-header-rich { align-items: flex-start; gap: 12px; }
.modal-heading { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.modal-icon {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-orange-light); color: var(--accent-orange);
}
.modal-sub { color: var(--text-muted); font-size: 0.86rem; margin-top: 3px; line-height: 1.45; }

.role-picker { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.role-picker legend { font-size: 0.82rem; font-weight: 600; color: var(--text-sub); margin-bottom: 8px; padding: 0; }
.role-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.role-option {
  position: relative; display: grid; gap: 6px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--card-bg);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.role-option:hover { border-color: var(--border-muted); }
.role-option input { position: absolute; opacity: 0; pointer-events: none; }
.role-option-head { display: flex; align-items: center; gap: 8px; padding-right: 32px; }
.role-option-head strong { font-size: 0.86rem; color: var(--text-main); }
.role-option-n { margin-left: auto; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); background: var(--bg-main); padding: 1px 7px; border-radius: var(--radius-pill); }
.role-option-desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.45; }
.role-option-check {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-muted); color: transparent; transition: all 0.2s ease;
}
.role-option-check svg { width: 12px; height: 12px; stroke-width: 3; }
.role-option:has(input:checked) { border-color: var(--role); background: var(--role-bg); box-shadow: 0 0 0 1px var(--role) inset; }
.role-option:has(input:checked) .role-option-check { background: var(--role); border-color: var(--role); color: #fff; }
.role-option:has(input:checked) .role-option-n { background: var(--card-bg); }
.role-option:has(input:focus-visible) { box-shadow: 0 0 0 1px var(--role) inset, var(--focus); }
.role-locked {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 18px;
  border-radius: var(--radius-md); background: var(--bg-main); color: var(--text-sub); font-size: 0.84rem; line-height: 1.5;
}
.role-locked-icon { color: var(--text-muted); margin-top: 1px; flex-shrink: 0; display: inline-flex; }
@media (max-width: 560px) {
  .role-options { grid-template-columns: minmax(0, 1fr); }
  .modal-icon { width: 38px; height: 38px; border-radius: 12px; }
}

/* ---------------------------------------------------------------- device control tab */
.control-view { overflow-y: auto; }

.cv-small { display: block; font-size: 0.78rem; margin-top: 2px; }
.cv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.cv-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 10px 0; }
.cv-row > label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--text-sub); min-width: 120px; }
.cv-row > label.cv-grow { flex: 1 1 260px; }
.cv-row .field-input { min-width: 0; }
.cv-left { justify-content: flex-start; gap: 10px; align-items: center; flex-wrap: wrap; }
.cv-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.cv-list > li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-main); border-radius: var(--radius-md); font-size: 0.86rem; flex-wrap: wrap; }
.cv-list > li > span:first-child { min-width: 0; }

.lc-body { width: 100%; font-family: inherit; font-variant-numeric: tabular-nums; font-size: 0.8rem; resize: vertical; }
.lc-out { max-height: 360px; overflow: auto; margin-top: 12px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-orange-light); color: var(--accent-orange); font-size: 0.72rem; font-weight: 600; vertical-align: middle; }
.check-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; color: var(--text-sub); cursor: pointer; }
.check-row input { margin-top: 3px; accent-color: var(--accent-orange); }
.form-hint { font-size: 0.78rem; color: var(--text-muted); margin: -4px 0 12px; }
.photo-source { display: block; font-size: 0.75rem; margin-top: 6px; text-align: center; max-width: 140px; }
.person-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.person-actions .btn-action-secondary { display: inline-flex; align-items: center; gap: 6px; }

/* schedule editor: one row per week day, periods inline */
.sched { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.sched-day { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; background: var(--bg-main); border-radius: var(--radius-md); }
.sched-name { font-size: 0.82rem; font-weight: 600; }
.sched-secs { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-sec { display: inline-flex; align-items: center; gap: 4px; }
.sched-sec .field-input { width: auto; padding: 4px 6px; font-size: 0.8rem; }

/* connection modal: simulator profiles and device presets */
.sim-profiles { border: 0; margin-top: 12px; display: grid; gap: 8px; }
.sim-profiles legend { font-weight: 600; font-size: 0.86rem; margin-bottom: 6px; }
.sim-profile { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--card-bg); cursor: pointer; }
.sim-profile:has(input:checked) { border-color: var(--accent-orange); }
.sim-profile input { margin-top: 4px; accent-color: var(--accent-orange); }
.sim-profile small { display: block; color: var(--text-muted); font-size: 0.78rem; }

.modal-overlay .modal-box .form-group input[type=date] { width: 100%; padding: 12px 14px; border: 1px solid var(--border-muted); border-radius: var(--radius-md); background: var(--card-bg); color: var(--text-main); font-size: 0.9rem; }
[data-theme="dark"] .modal-overlay .modal-box .form-group input[type=date] { color-scheme: dark; }

@media (max-width: 1100px) {
  .cv-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sched-day { grid-template-columns: minmax(0, 1fr) auto; }
  .sched-secs { grid-column: 1 / -1; order: 3; }
}

/* ---------------------------------------------------------------- sign-in page */
.login-page { flex: 1 1 auto; width: 100%; min-height: 100dvh; background: var(--bg-main); display: flex; align-items: center; justify-content: center; }
.login-wrap { margin: auto; width: 100%; max-width: 420px; padding: 24px 16px; }
.login-card { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.login-card form { display: flex; flex-direction: column; gap: 6px; }
.login-card h1 { font-size: 1.4rem; }
.login-card .field-label { margin-top: 10px; }
.login-btn { margin-top: 16px; width: 100%; }
.login-foot { text-align: center; font-size: 0.78rem; margin-top: 14px; }

/* saved terminals in the connection dialog */
.term-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.term-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--card-bg); flex-wrap: wrap; }
.term-item.active { border-color: var(--accent-orange); }
.term-item small { display: block; color: var(--text-muted); font-size: 0.76rem; }

.secret-box { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 1.1rem; padding: 12px 14px; background: var(--bg-main); border-radius: var(--radius-md); user-select: all; word-break: break-all; }

.cv-list-checks { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }

/* add-terminal wizard */

.wizard { border: 1px solid var(--border-muted); border-radius: var(--radius-lg); padding: 16px 18px; margin-top: 8px; background: var(--card-bg); }

.wiz-steps { list-style: none; display: flex; gap: 6px; margin: 12px 0 16px; padding: 0; }
.wiz-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); padding: 6px 8px; border-radius: var(--radius-md); background: var(--bg-main); }
.wiz-steps li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--border-light); font-weight: 600; font-size: 0.75rem; }
.wiz-steps li.active { color: var(--text-main); font-weight: 600; }
.wiz-steps li.active span { background: var(--accent-orange); color: #fff; }
.wiz-steps li.done span { background: var(--accent-green); color: #fff; }
.wiz-found { font-size: 0.86rem; margin-bottom: 10px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--accent-green-bg); }

/* ---------------------------------------------------------------- overall dashboard: one card per terminal */
.overview.has-fleet { grid-template-areas: "kpi" "fleet" "attn" "recent" "flow"; }
@media (min-width: 701px) {
  .overview.has-fleet { grid-template-areas: "kpi kpi" "fleet fleet" "attn recent" "flow flow"; }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .overview.has-fleet { grid-template-rows: auto auto minmax(0, 1fr) 170px; }
}
.fleet-card { grid-area: fleet; padding: 14px 18px; min-width: 0; }
.fleet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fleet-head h2 { font-size: 1rem; margin-right: auto; }

/* source switcher in the page head */
.source-switch { margin-left: auto; margin-right: 8px; }
.source-switch select { min-width: 220px; max-width: 320px; font-weight: 600; }
@media (max-width: 700px) { .source-switch { width: 100%; margin: 6px 0 0; } .source-switch select { width: 100%; max-width: none; } }

/* "pick a terminal" panel (people / control in all-terminals mode) */

/* =====================================================================
   Terminals at scale: source picker, overview cards, one-terminal panel,
   per-terminal groups (activity, people), terminal list, control page.
   ===================================================================== */

/* ---------------------------------------------------------------- small helpers */
.btn-action-primary.btn-sm, .btn-action-secondary.btn-sm, .btn-submit.btn-sm { padding: 7px 14px; font-size: 0.8rem; gap: 6px; }

.icon-btn-ghost {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border-light);
  background: var(--card-bg); color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s;
}
.icon-btn-ghost:hover { color: var(--text-main); border-color: var(--border-muted); }
.icon-btn-ghost:disabled svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seg.seg-sm { padding: 3px; }
.seg.seg-sm .seg-btn { padding: 5px 12px; font-size: 0.78rem; }
.warn-text { color: var(--warn-text); font-weight: 600; }
.count-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 7px;
  border-radius: var(--radius-pill); background: var(--bg-main); border: 1px solid var(--border-light);
  color: var(--text-sub); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle;
}

/* status dots shared by the picker, cards and lists */
.term-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-muted); flex-shrink: 0; }
.term-dot.online,
.term-dot.checked { background: var(--accent-green); }
.term-dot.offline,
.term-dot.auth,
.term-dot.locked { background: var(--accent-red); }
.term-dot.new { background: var(--accent-yellow); }

/* ---------------------------------------------------------------- source picker */
.source-switch { position: relative; margin-left: auto; margin-right: 8px; }

@media (max-width: 700px) {
  .source-switch { width: 100%; margin: 6px 0 0; }
  
  
}

/* ---------------------------------------------------------------- overview: all terminals */
.fleet-card { grid-area: fleet; padding: 16px 18px; min-width: 0; }
.fleet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.fleet-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.fleet-head h2 { font-size: 1rem; margin: 0; }

.fleet-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.fleet-empty { padding: 12px 2px; font-size: 0.86rem; }

/* ---------------------------------------------------------------- overview: one terminal */

/* ---------------------------------------------------------------- a card number's list (modal) */

/* ---------------------------------------------------------------- per-terminal groups (activity, people) */

/* ---------------------------------------------------------------- connection dialog: the terminal list */

.term-list {
  list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0;
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow-y: auto; max-height: min(420px, 52dvh);
}
.term-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border-light); border-radius: 0; background: var(--card-bg);
}
.term-item:last-child { border-bottom: 0; }
.term-item:hover { background: var(--bg-main); }
.term-item.active { background: var(--accent-orange-light); border-color: var(--border-light); box-shadow: none; }

.term-item small { display: block; color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wizard { margin-top: 0; }

@media (max-width: 640px) {
  .term-item { grid-template-columns: auto minmax(0, 1fr); }
  
  
}

/* ---------------------------------------------------------------- terminal picker (management in all mode) */

/* ---------------------------------------------------------------- control page */

.cv-row .field-input { border-radius: var(--radius-md); }
.cv-list > li { border: 1px solid var(--border-light); }

@media (max-width: 1023px) {
  table.data-table tbody tr:has(> td.empty-cell) { display: block; }
  
}

/* ---------------------------------------------------------------- activity on / off (subscriptions) */

/* ---------------------------------------------------------------- all terminals at scale: summary chips + compact table */
.fleet-head h2 { display: inline-flex; align-items: center; gap: 8px; }

.fleet-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.fleet-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px;
  border: 1px solid var(--border-light); border-radius: var(--radius-pill); background: var(--card-bg);
  color: var(--text-sub); font-family: var(--font-family); font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fleet-chip:hover { border-color: var(--border-muted); }
.fleet-chip b {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--bg-main);
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; color: var(--text-main);
}
.fleet-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-muted); }
.fleet-chip.ok .dot { background: var(--accent-green); }
.fleet-chip.off .dot { background: var(--accent-red); }
.fleet-chip.off b { background: var(--accent-red-bg); color: var(--accent-red); }
.fleet-chip.warn .dot { background: var(--accent-yellow); }
.fleet-chip.warn b { background: var(--accent-yellow-bg); color: var(--warn-text); }
.fleet-chip.active { border-color: var(--primary-bg); background: var(--primary-bg); color: var(--primary-fg); }
.fleet-chip.active b { background: rgba(255, 255, 255, 0.18); color: var(--primary-fg); }
.fleet-chip-act { margin-left: auto; }
.fleet-chip-act svg { width: 13px; height: 13px; }

.ft-sort {
  width: 100%; display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border: 0; background: transparent;
  color: var(--text-muted); font-family: var(--font-family); font-size: 0.74rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
th.n .ft-sort { justify-content: center; }
.ft-sort:hover, .ft-sort.on { color: var(--text-main); }
.ft-arrow { font-size: 0.7rem; opacity: 0.45; }
.ft-sort.on .ft-arrow { opacity: 1; color: var(--accent-orange); }

/* phones: each terminal is a short card - name and status, four numbers, actions */
@media (max-width: 700px) {
  
  .fleet-chip-act { margin-left: 0; }
  
  
  
  
  
  
  
  
  
  
  
  
  
}
@media (min-width: 1024px) and (min-height: 700px) {
  /* a large fleet: the lists below keep a usable height, the overview scrolls instead of squeezing them */
  .overview.has-fleet { overflow-y: auto; grid-template-rows: auto auto minmax(240px, 1fr) 170px; padding-right: 2px; scrollbar-width: thin; }
  
}
@media (max-width: 700px) {
  .fleet-tools { width: 100%; }
  .fleet-tools .seg { width: auto; flex: 1; }
  .fleet-chips { gap: 4px; }
}

/* ---------------------------------------------------------------- compact terminal tiles (cards view) */
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; align-content: start; }
.fc-grid.many { max-height: min(400px, 44dvh); overflow-y: auto; padding: 2px 4px 2px 2px; scrollbar-width: thin; }
.fc {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 10px 10px 9px 12px; background: var(--card-bg);
  border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: border-color 0.15s, box-shadow 0.15s;
}
.fc:hover { border-color: var(--border-muted); box-shadow: var(--shadow-card); }
.fc::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.fc.off::before { background: var(--accent-red); }

.fc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fc-name strong { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-name small { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc.off .fc-name strong { color: var(--accent-red); }

@media (max-width: 700px) {
  .fc-grid { grid-template-columns: minmax(0, 1fr); }
  .fc-grid.many { max-height: 460px; }
}
@media (max-width: 700px) {
  .fleet-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .fleet-chips::-webkit-scrollbar { display: none; }
  .fleet-chip, .fleet-chip-act { flex-shrink: 0; white-space: nowrap; }
}

/* ---------------------------------------------------------------- terminals page (#program) at scale */

.dev-chips { flex-shrink: 0; }
.dev-chips:empty { display: none; }
.dev-count { font-size: 0.76rem; margin-left: 4px; }
.dev-chips .fleet-chip-act + .dev-count { margin-left: 8px; }

/* activity toggle: green = on (click turns off), yellow = off (click turns on) */

/* ---------------------------------------------------------------- branch page: pick terminals from your own list */
.bp-lead { font-size: 0.86rem; margin: 0 0 12px; }

/* ---------------------------------------------------------------- branch terminal picker, refined */
.bp-lead { font-size: 0.86rem; color: var(--text-muted); margin: -6px 0 14px; }
.bp-lead strong { color: var(--text-main); }

/* ---------------------------------------------------------------- arrival against the branch start: early / on time / late */
.arrival { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.arrival .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.arrival.early { color: var(--early); }
.arrival.early .dot { background: var(--early); }
.arrival.ontime { color: var(--accent-green); }
.arrival.ontime .dot { background: var(--accent-green); }
.arrival.late { color: var(--accent-red); }
.arrival.late .dot { background: var(--accent-red); }
.arrival small { font-weight: 400; color: var(--text-muted); margin-left: 2px; }
.fleet-chip.early .dot { background: var(--early); }
.fleet-chip.early b { background: var(--early-bg); color: var(--early); }

/* ---------------------------------------------------------------- branches page at scale */

.br-hours { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------------------------------------------------------------- attendance: arrival and departure per person per day */

.att-day { display: flex; align-items: center; gap: 6px; }
.att-day .field-input { width: 150px; border-radius: var(--radius-md); color-scheme: light; }
[data-theme="dark"] .att-day .field-input { color-scheme: dark; }
.att-day .link-btn { font-weight: 600; padding: 0 4px; }
.att-panel > .fleet-chips { flex-shrink: 0; }
.arrival.pending { color: var(--text-muted); font-weight: 400; }
.arrival.pending .dot { background: var(--border-muted); }

@media (max-width: 1023px) {
  
  
  
  
  
  
  
  
  
  .att-day { width: 100%; }
  .att-day .field-input { flex: 1; width: auto; }
}

/* ---------------------------------------------------------------- arrival / departure colours: early & overtime green, late & leaving early red */
.arrival.good, .arrival.early { color: var(--accent-green); }
.arrival.good .dot, .arrival.early .dot { background: var(--accent-green); }
.arrival.bad, .arrival.late { color: var(--accent-red); }
.arrival.bad .dot, .arrival.late .dot { background: var(--accent-red); }
.arrival.ok, .arrival.ontime { color: var(--text-sub); font-weight: 600; }
.arrival.ok .dot, .arrival.ontime .dot { background: var(--border-muted); }
.t-good { color: var(--accent-green) !important; font-weight: 600; }
.t-bad { color: var(--accent-red) !important; font-weight: 600; }
.mark-good { color: var(--accent-green); font-weight: 600; }
.mark-bad { color: var(--accent-red); font-weight: 600; }
.mark-ok { color: var(--text-sub); }

.detail-events .arrival { font-size: 0.74rem; }

/* ---------------------------------------------------------------- arrived after working hours: its own status (amber) */
.arrival.after { color: var(--warn-text); }
.arrival.after .dot { background: var(--accent-yellow); }
.t-after { color: var(--warn-text) !important; font-weight: 600; }
.mark-after { color: var(--warn-text); font-weight: 600; }
.kind.after { color: var(--warn-text); }
.kind.after .dot { background: var(--accent-yellow); }

.fleet-chip.after .dot { background: var(--accent-yellow); }
.fleet-chip.after b { background: var(--accent-yellow-bg); color: var(--warn-text); }
.toast-item.warn .toast-dot { background: var(--accent-yellow); }

/* a repeat pass / a pass that is not judged: quiet grey */
.arrival.repeat { color: var(--text-muted); font-weight: 400; }
.arrival.repeat .dot { background: var(--border-muted); }
.mark-repeat { color: var(--text-muted); }

/* ---------------------------------------------------------------- copy a person: per-terminal result */

/* ---------------------------------------------------------------- control → device: compact, informative cards */

.dv-warn { margin: 0 0 12px; padding: 10px 12px 10px 28px; border-radius: var(--radius-md); background: var(--accent-yellow-bg); color: var(--warn-text); font-size: 0.82rem; }
.dv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-card { min-width: 0; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--card-bg); }
.dv-span { grid-column: 1 / -1; }
.dv-card > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.86rem; font-weight: 600; color: var(--text-main); }
.dv-card > h3 svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.dv-card > h3 small { margin-left: auto; font-size: 0.72rem; font-weight: 400; }
.dv-kv { margin: 0; display: flex; flex-direction: column; }
.dv-kv > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border-light); }
.dv-kv > div:first-child { border-top: 0; padding-top: 0; }
.dv-kv dt { font-size: 0.76rem; color: var(--text-muted); }
.dv-kv dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.84rem; font-weight: 600; }
.dv-val { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-kv .code { font-size: 0.8rem; color: var(--text-main); }

.dv-caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.dv-caps li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md); background: var(--bg-main); min-width: 0; }
.dv-caps li > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.dv-caps strong { font-size: 0.82rem; }
.dv-caps small { font-size: 0.72rem; color: var(--text-muted); }
.dv-mark { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; }
.dv-caps .yes .dv-mark { background: var(--accent-green-bg); color: var(--accent-green); }
.dv-caps .no .dv-mark { background: var(--accent-red-bg); color: var(--accent-red); }
.dv-caps .unk .dv-mark { background: var(--accent-yellow-bg); color: var(--warn-text); }
.dv-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 600; background: var(--bg-main); color: var(--text-sub); }
.dv-pill.on { background: var(--accent-green-bg); color: var(--accent-green); }
.dv-pill.off { background: var(--accent-red-bg); color: var(--accent-red); }
.dv-pill.warn { background: var(--accent-yellow-bg); color: var(--warn-text); }

@media (max-width: 1100px) { .dv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .dv-kv > div { grid-template-columns: 100px minmax(0, 1fr); } }

/* ---------------------------------------------------------------- control: pick a terminal (100+) */

/* fixed side columns so every row lines up */

/* ---------------------------------------------------------------- terminal cards: minimal row, opens to the full tile */
.fc-grid { align-items: start; gap: 8px; }
.fc { padding: 0; gap: 0; overflow: hidden; }
.fc-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; min-height: 52px;
  border: 0; background: transparent; color: var(--text-main); font-family: var(--font-family); text-align: left; cursor: pointer;
}
.fc-toggle:hover { background: var(--bg-main); }
.fc-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-orange); }
.fc-toggle .term-dot { flex-shrink: 0; }
.fc-toggle .fc-name { flex: 1; }
.fc-badge {
  flex-shrink: 0; max-width: 46%; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-main);
  color: var(--text-sub); font-size: 0.7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-badge.bad { background: var(--accent-red-bg); color: var(--accent-red); }
.fc-badge.warn { background: var(--accent-yellow-bg); color: var(--warn-text); }
.fc-chev { flex-shrink: 0; display: inline-flex; color: var(--text-muted); transition: transform 0.18s ease; }
.fc.open .fc-chev { transform: rotate(180deg); }
.fc.open { border-color: var(--border-muted); box-shadow: var(--shadow-card); }
.fc.open .fc-toggle { border-bottom: 1px solid var(--border-light); }

/* ---------------------------------------------------------------- one terminal in a window */

.fc-toggle:hover .fc-chev { color: var(--accent-orange); }

/* ---------------------------------------------------------------- terminal panel / window body: tidy tiles + details */

/* ---------------------------------------------------------------- reports: timesheet */
/* compact page: title row, filters, one summary line, one table; details live in modals */

/* title row */
.rp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.rp-title h3 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.rp-period { font-size: 0.82rem; color: var(--text-sub); }
.rp-sep { margin: 0 7px; color: var(--text-muted); }
.rp-top-actions { display: flex; align-items: center; gap: 8px; }
.rp-btn { height: 36px; padding: 0 14px; font-size: 0.82rem; gap: 7px; }
.rp-btn svg { width: 16px; height: 16px; }
.rp-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-light); background: var(--card-bg); color: var(--text-sub); cursor: pointer; transition: background 0.15s, color 0.15s; }
.rp-icon-btn svg { width: 17px; height: 17px; }
.rp-icon-btn:hover { background: var(--rp-hover); color: var(--text-main); }
.rp-icon-btn:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 1px; }

/* filters: one row */
.rp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.rp-toolbar .field-input { height: 36px; font-size: 0.82rem; }
.rp-toolbar select.field-input { min-width: 170px; }
.rp-toolbar .field-search { margin-left: auto; width: 220px; }
.rp-range { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.rp-range .field-input { width: 142px; border-radius: var(--radius-md); color-scheme: light; }
[data-theme="dark"] .rp-range .field-input { color-scheme: dark; }

/* summary line */
.rp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 9px 14px; margin-bottom: 12px; border-radius: var(--radius-md); background: var(--rp-surface); font-size: 0.8rem; color: var(--text-sub); }
.rp-stat b { font-size: 0.92rem; font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; margin-right: 4px; }
.rp-strip-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.rp-flag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--card-bg); font: inherit; font-size: 0.76rem; color: var(--text-sub); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.rp-flag b { font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; }
.rp-flag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.rp-flag:hover { border-color: var(--border-muted); }
.rp-flag:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 1px; }
.rp-flag.on { border-color: var(--text-sub); }
.rp-flag.bad .dot { background: var(--accent-red); }
.rp-flag.bad b { color: var(--accent-red); }
.rp-flag.good .dot { background: var(--accent-green); }
.rp-flag.good b { color: var(--accent-green); }
.rp-flag.zero { opacity: 0.6; }

/* table: fixed column widths, numbers right-aligned, one line per person */
.rp-table-wrap { border: 1px solid var(--rp-line); border-radius: var(--radius-md); }
#rpTable { table-layout: fixed; min-width: 980px; font-size: 0.84rem; }
#rpTable col.w-name { width: auto; }
#rpTable col.w-days { width: 82px; }
#rpTable col.w-worked { width: 128px; }
#rpTable col.w-avg { width: 108px; }
#rpTable col.w-flag { width: 150px; }
#rpTable col.w-abs { width: 100px; }
#rpTable col.w-over { width: 124px; }
#rpTable col.w-more { width: 40px; }
#rpTable thead th { height: 42px; padding: 0; background: var(--rp-head); border-bottom: 1px solid var(--rp-line); }
#rpTable .ft-sort { height: 42px; padding: 0 16px; gap: 4px; font-size: 0.74rem; font-weight: 600; color: var(--text-muted); }
#rpTable .ft-sort:hover { color: var(--text-main); }
#rpTable .ft-sort.on { color: var(--text-main); }
#rpTable .ft-arrow { min-width: 10px; }
#rpTable th.n .ft-sort { flex-direction: row-reverse; justify-content: flex-start; }
#rpTable th.n .ft-arrow { min-width: 0; }
#rpTable th.n .ft-arrow:empty { display: none; }
#rpTable th.c-more { width: 40px; }
#rpTable tbody tr td { height: 58px; padding: 0 16px; border-bottom: 1px solid var(--rp-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rpTable tbody tr:last-child td { border-bottom: 0; }
#rpTable tbody tr:hover { background: var(--rp-hover); }
#rpTable td.n { text-align: right; font-variant-numeric: tabular-nums; }
#rpTable th.is-sorted, #rpTable td.is-sorted { background: var(--rp-sorted); }
#rpTable td.c-more { padding: 0 12px 0 0; text-align: right; }
.rp-chev { color: var(--text-muted); opacity: 0.4; vertical-align: middle; transition: transform 0.15s, opacity 0.15s, color 0.15s; }
#rpTable tbody tr:hover .rp-chev, #rpTable tbody tr:focus-visible .rp-chev { opacity: 1; color: var(--accent-orange); transform: translateX(2px); }

.rp-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rp-person-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-name { font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; }
.rp-meta { font-size: 0.74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.rp-code { margin-left: 8px; padding: 1px 6px; border-radius: 5px; background: var(--rp-surface); font-size: 0.7rem; font-weight: 500; color: var(--text-sub); }
.rp-av { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 0.76rem; font-weight: 700; color: var(--text-sub); background: var(--rp-surface); }
.rp-av.lg { width: 44px; height: 44px; font-size: 0.9rem; }
.rp-av.av-0 { background: #eef2ff; color: #4f46e5; }
.rp-av.av-1 { background: #ecfdf5; color: #047857; }
.rp-av.av-2 { background: #fff7ed; color: #c2410c; }
.rp-av.av-3 { background: #f0f9ff; color: #0369a1; }
.rp-av.av-4 { background: #fdf2f8; color: #be185d; }
.rp-av.av-5 { background: #f4f4f5; color: #52525b; }
[data-theme="dark"] .rp-av[class*="av-"] { background: var(--rp-surface); }
[data-theme="dark"] .rp-av.av-0 { color: #a5b4fc; } [data-theme="dark"] .rp-av.av-1 { color: #6ee7b7; } [data-theme="dark"] .rp-av.av-2 { color: #fdba74; }
[data-theme="dark"] .rp-av.av-3 { color: #7dd3fc; } [data-theme="dark"] .rp-av.av-4 { color: #f9a8d4; } [data-theme="dark"] .rp-av.av-5 { color: #d4d4d8; }

.rp-hm { font-weight: 600; color: var(--text-main); }
.rp-zero { color: var(--text-muted); opacity: 0.5; }
.rp-min { margin-left: 8px; font-size: 0.74rem; color: var(--text-muted); }
.rp-cnt { display: inline-flex; align-items: center; justify-content: flex-end; }
.rp-pill { display: inline-block; min-width: 24px; padding: 2px 8px; border-radius: var(--radius-pill); text-align: center; font-weight: 600; font-size: 0.78rem; line-height: 1.45; background: var(--rp-surface); color: var(--text-main); }
.rp-pill.good { background: var(--accent-green-bg); color: var(--accent-green); }
.rp-pill.bad { background: var(--accent-red-bg); color: var(--accent-red); }
.rp-pill.after { background: var(--accent-yellow-bg); color: var(--warn-text); }
.rp-worked .rp-hm { display: block; line-height: 1.2; }
.rp-worked .rp-bar { display: block; width: 72px; height: 4px; margin: 5px 0 0 auto; }
.rp-bar-bg { fill: var(--rp-line); }
.rp-bar-fg { fill: var(--text-sub); opacity: 0.5; }

/* export modal */
.rp-export { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rp-export-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--rp-line); background: var(--card-bg); color: var(--text-main); text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.rp-export-opt:hover { background: var(--rp-hover); border-color: var(--border-muted); }
.rp-export-opt:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 1px; }
.rp-export-opt > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.rp-export-opt b { font-size: 0.9rem; font-weight: 600; }
.rp-export-opt small { font-size: 0.76rem; color: var(--text-muted); }
.rp-export-ico { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--rp-surface); color: var(--text-sub); }
.rp-export-ico svg { width: 18px; height: 18px; }
.rp-export-ico.xlsx { background: var(--accent-green-bg); color: var(--accent-green); }

/* statistics + person modal: tiles */
.rp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }

.rp-chip { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--rp-surface); min-width: 0; }
.rp-chip span { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }
.rp-chip b { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-chip small { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-chip.bad { background: var(--accent-red-bg); }
.rp-chip.bad b { color: var(--accent-red); }
.rp-chip.good { background: var(--accent-green-bg); }
.rp-chip.good b { color: var(--accent-green); }
.rp-chip.after { background: var(--accent-yellow-bg); }
.rp-chip.after b { color: var(--warn-text); }
.rp-leaders { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; }
.rp-leaders > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--rp-line); font-size: 0.8rem; }
.rp-leaders dt { color: var(--text-muted); font-weight: 600; }
.rp-leaders dd { margin: 0; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; }

/* person modal: summary, charts, days on one time axis */
.pm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pm-head .bp-lead { margin: 0; color: var(--text-sub); }
.pm-chips { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }

.pm-charts { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.pm-chart { padding: 14px 16px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--card-bg); min-width: 0; }
.pm-chart header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pm-chart h3 { font-size: 0.86rem; font-weight: 700; margin: 0; color: var(--text-main); }
.pm-legend-line { font-size: 0.74rem; color: var(--text-sub); }
.pm-canvas { position: relative; height: 190px; }
.pm-canvas.sm { height: 150px; width: 150px; flex-shrink: 0; }
.pm-donut { display: flex; align-items: center; gap: 18px; }
.pm-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.pm-donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-main); }
.pm-donut-legend li b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-donut-legend li span { text-align: right; font-size: 0.74rem; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.pm-donut-legend i { width: 10px; height: 10px; border-radius: 3px; }
.k-ok { background: #64748b; } .k-late { background: #ef4444; } .k-left { background: #f97316; } .k-over { background: #10b981; } .k-after { background: #f59e0b; } .k-absent { background: #b91c1c; }

/* days table */
.pm-days { max-height: min(46dvh, 460px); overflow-y: auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); }
table.data-table.pm-table { table-layout: fixed; min-width: 900px; font-size: 0.86rem; }
.pm-table col.w-date { width: 140px; }
.pm-table col.w-io { width: 200px; }
.pm-table col.w-num { width: 110px; }
.pm-table col.w-num-sm { width: 80px; }
table.data-table.pm-table thead th { position: sticky; top: 0; z-index: 2; height: 40px; padding: 0 14px; background: var(--card-bg); border-bottom: 1px solid var(--border-muted); font-size: 0.74rem; font-weight: 700; color: var(--text-sub); }
table.data-table.pm-table th.n, table.data-table.pm-table td.n { text-align: right; }
table.data-table.pm-table tbody tr td { height: 58px; padding: 0 14px; border-bottom: 1px solid var(--border-light); color: var(--text-main); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.data-table.pm-table tbody tr:last-child td { border-bottom: 0; }
table.data-table.pm-table tbody tr:hover td { background: var(--bg-main); }
table.data-table.pm-table tbody tr.is-weekend td:first-child { box-shadow: none; }
table.data-table.pm-table tbody tr.k-row-absent td { background: rgba(239, 68, 68, 0.05); }
table.data-table.pm-table tbody tr.k-row-off td, table.data-table.pm-table tbody tr.k-row-none td { background: var(--bg-main); color: var(--text-sub); }

.pm-date { display: flex; flex-direction: column; gap: 2px; }
.pm-date b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-date small { font-size: 0.74rem; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; }
.pm-axis-h { padding: 0 14px !important; }
.pm-axis { display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 600; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.pm-axis span { width: 0; display: flex; justify-content: center; }
.pm-bar-cell { padding-top: 0 !important; padding-bottom: 0 !important; }
.pm-bar-wrap { position: relative; display: block; }
.pm-bar-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--card-bg); font-size: 0.72rem; font-weight: 600; color: var(--text-sub); }
.pm-bar-note.bad { color: #b91c1c; }

.db { display: block; width: 100%; height: 22px; overflow: visible; }
.db-track { fill: var(--border-light); }
.db-tick { stroke: var(--border-light); stroke-width: 1; }
.db-plan { fill: rgba(100, 116, 139, 0.12); }
.db-on { fill: #475569; }
.db-early { fill: #6ee7b7; }
.db-over { fill: #10b981; }
.db-after { fill: #f59e0b; }
.db-gap { fill: rgba(239, 68, 68, 0.16); stroke: #ef4444; stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.db-mark { stroke: var(--text-main); stroke-width: 2; }
[data-theme="dark"] .db-on { fill: #cbd5e1; }
[data-theme="dark"] .db-plan { fill: rgba(203, 213, 225, 0.12); }

.db-io { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-io b { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-main); }
.db-io small { font-size: 0.74rem; font-weight: 600; line-height: 1.3; white-space: normal; color: var(--text-sub); }
table.data-table.pm-table tbody tr td:has(.db-io) { white-space: normal; }
.db-io small.good { color: #059669; }
.db-io small.bad { color: #dc2626; }
.db-io small.after { color: #d97706; }
.db-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.db-num.muted { font-weight: 600; color: var(--text-sub); }
.db-none { color: var(--text-muted); }
.db-delta { display: block; font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.db-delta.good { color: #059669; }
.db-delta.bad { color: #dc2626; }

.pm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 0.76rem; color: var(--text-sub); }
.pm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pm-legend i { display: inline-block; width: 18px; height: 8px; border-radius: 2px; }
.pm-legend .lg-plan { background: rgba(100, 116, 139, 0.18); height: 12px; }
.pm-legend .lg-on { background: #475569; }
.pm-legend .lg-early { background: #6ee7b7; }
.pm-legend .lg-gap { background: rgba(239, 68, 68, 0.16); border: 1px dashed #ef4444; }
.pm-legend .lg-over { background: #10b981; }
.pm-legend .lg-after { background: #f59e0b; }

@media (max-width: 1100px) {
  .pm-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pm-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .pm-days { max-height: none; border: 0; }
  table.data-table.pm-table { table-layout: auto; min-width: 0; }
  .pm-table colgroup { display: none; }
  table.data-table.pm-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 6px; }
  table.data-table.pm-table tbody tr td { height: auto; padding: 0; border: 0; white-space: normal; background: transparent !important; }
  table.data-table.pm-table tbody tr td:nth-child(1) { grid-column: 1 / -1; }
  table.data-table.pm-table tbody tr td.pm-bar-cell { grid-column: 1 / -1; }
  table.data-table.pm-table tbody tr td.n { text-align: left; }
  table.data-table.pm-table tbody tr td:nth-child(6) { display: none; }
  .pm-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-donut { flex-direction: column; align-items: stretch; }
  .pm-canvas.sm { margin: 0 auto; }
}

/* rules modal */
.rp-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.rp-help > div { padding: 10px 12px; border-radius: var(--radius-md); background: var(--rp-surface); }
.rp-help dt { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; margin-bottom: 3px; }
.rp-help dt .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.rp-help .good dt .dot { background: var(--accent-green); }
.rp-help .bad dt .dot { background: var(--accent-red); }
.rp-help .after dt .dot { background: var(--accent-yellow); }
.rp-help dd { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-sub); }

@media (max-width: 1023px) {
  .rp-toolbar .field-search { margin-left: 0; }
  .rp-range { flex: 1 1 100%; }
  .rp-range .field-input { flex: 1; width: auto; }
  .rp-strip-flags { margin-left: 0; }
  .rp-table-wrap { border: 0; }
  #rpTable { table-layout: auto; min-width: 0; }
  #rpTable colgroup { display: none; }
  #rpTable tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 14px;
    margin-bottom: 8px; border: 1px solid var(--rp-line); border-radius: var(--radius-md); background: var(--card-bg);
  }
  #rpTable tbody tr td { height: auto; padding: 0; border: 0; overflow: visible; }
  #rpTable tbody td.c-name { grid-column: 1 / -1; }
  #rpTable td.c-more { display: none; }
  #rpTable td.n { text-align: left; font-size: 0.82rem; }
  #rpTable td.n::before { display: block; font-size: 0.68rem; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
  #rpTable td:nth-child(2)::before { content: "დღეები"; } #rpTable td:nth-child(3)::before { content: "ნამუშევარი"; }
  #rpTable td:nth-child(4)::before { content: "საშ. მოსვლა"; } #rpTable td:nth-child(5)::before { content: "დაგვიანება"; }
  #rpTable td:nth-child(6)::before { content: "ადრე წასვლა"; } #rpTable td:nth-child(7)::before { content: "გაცდენა"; }
  #rpTable td:nth-child(8)::before { content: "ზეგანაკვეთური"; }
  #rpTable tbody tr td.empty-cell { grid-column: 1 / -1; }
  .rp-cnt { justify-content: flex-start; }
  .rp-worked .rp-bar { margin: 5px 0 0; }
  .rp-help { grid-template-columns: minmax(0, 1fr); }
  .rp-leaders > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 640px) {
  
  .rp-top-actions .rp-btn span { display: none; }
  .rp-top-actions .rp-btn { width: 36px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .rp-chev, .rp-flag { transition: none; } }

/* print: only the report (Save as PDF from the print dialog) */
.rp-print { display: none; }
@media print {
  body.printing-report { background: #fff !important; color: #000; height: auto !important; overflow: visible !important; }
  body.printing-report > *:not(.main-wrapper), body.printing-report .main-wrapper > *:not(.main-area),
  body.printing-report .main-area > *:not(#tab-reports), body.printing-report #tab-reports > *:not(.rp-print) { display: none !important; }
  body.printing-report .main-wrapper, body.printing-report .main-area, body.printing-report #tab-reports { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; }
  body.printing-report .rp-print { display: block !important; font-family: var(--font-family); }
  .rp-print h1 { font-size: 16pt; margin: 0 0 4pt; }
  .rp-print > p { font-size: 9pt; margin: 0 0 10pt; color: #444; }
  .rp-print table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
  .rp-print th, .rp-print td { border: 1px solid #ccc; padding: 3pt 5pt; text-align: left; }
  .rp-print th { background: #f1f3f6; }
  .rp-print tr { break-inside: avoid; }
  .rp-print .rp-print-foot { margin-top: 10pt; font-size: 8pt; color: #666; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* staff: guided empty states, banner, schedule rows */
.empty-guide { padding: 28px 20px; text-align: center; border: 1px dashed var(--border-light); border-radius: var(--radius-md); margin: 12px 0; }
.empty-guide h3 { font-size: 1rem; margin-bottom: 6px; }
.empty-guide p { color: var(--text-sub); font-size: 0.86rem; max-width: 560px; margin: 0 auto 14px; line-height: 1.5; }
.staff-banner { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.tag.tag-soft, .tag-soft { color: var(--text-sub); display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-main); border: 1px solid var(--border-light); font-size: 0.75rem; margin: 1px 0; }
.cv-form .field-label { display: block; margin-top: 4px; }
#schedForm .sched-day { grid-template-columns: 140px minmax(0, 1fr) auto; }
.cv-list > li.row-click { cursor: pointer; }
.cv-list > li.row-click:hover { border-color: var(--accent-orange); }
@media (max-width: 640px) { #schedForm .sched-day { grid-template-columns: minmax(0, 1fr) auto; } }

/* overview: first steps */

.ob-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ob-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-main); border: 1px solid var(--border-light); }
.ob-step.next { border-color: var(--accent-orange); }
.ob-step.done { opacity: 0.6; }
.ob-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; background: var(--card-bg); border: 1px solid var(--border-light); }
.ob-step.done .ob-num { background: var(--accent-green, #16a34a); color: #fff; border-color: transparent; }
.ob-step.next .ob-num { background: var(--accent-orange); color: #fff; border-color: transparent; }
.ob-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-body small { color: var(--text-sub); font-size: 0.8rem; line-height: 1.45; }
@media (max-width: 640px) { .ob-step { grid-template-columns: 28px minmax(0, 1fr); } .ob-step > button { grid-column: 2; justify-self: start; } }

/* overall dashboard header: one quiet status line instead of counters, chips and toggles */
.fleet-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.8rem; color: var(--text-sub); }
.fleet-status .fs-part { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fleet-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.fleet-status .ok .dot { background: var(--accent-green); }
.fleet-status .off { color: var(--accent-red); }
.fleet-status .off .dot { background: var(--accent-red); }
.fleet-status .warn { color: var(--warn-text); }

.fc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.fc.off::before { display: none; }
.fc.off .fc-name strong { color: var(--text-main); }

/* status pills: colour + number; the meaning is in the tooltip (hover or keyboard focus) */
.fleet-status { gap: 6px; }
.fleet-status .fs-part { position: relative; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--bg-main); border: 1px solid var(--border-light); font-size: 0.78rem; cursor: help; color: var(--text-main); }
.fleet-status .fs-part b { font-variant-numeric: tabular-nums; }
.fleet-status .fs-part svg { width: 12px; height: 12px; }
.fleet-status .fs-part.ok { background: var(--accent-green-bg); border-color: transparent; }
.fleet-status .fs-part.off { background: var(--accent-red-bg); border-color: transparent; color: var(--accent-red); }
.fleet-status .fs-part.warn { background: var(--accent-yellow-bg); border-color: transparent; color: var(--warn-text); }
.fleet-status .fs-part:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 1px; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  padding: 6px 10px; border-radius: 8px; background: var(--text-main); color: var(--card-bg);
  font-size: 0.74rem; font-weight: 500; line-height: 1.35; white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.15s, transform 0.15s; z-index: 50;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* terminal cards: their own surface, so they stand out on the white panel */
.fc { background: var(--bg-main); border-color: var(--border-light); }
.fc-toggle:hover { background: var(--card-bg); }
.fc:hover { border-color: var(--border-muted); }
.fc.off { background: var(--accent-red-bg); border-color: transparent; }
.fc.off .fc-toggle:hover { background: transparent; }
.fc.off .fc-badge.bad { background: var(--card-bg); }
.fc .fc-badge { background: var(--card-bg); }
.fc .fc-badge.bad { color: var(--accent-red); }

/* people list: face thumbnail next to the name */

@keyframes thumb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- activity: monitoring tables */
/* operator view: coloured counters (each one filters), a filter button + modal, one clean table, details in a modal */
.act-top .seg-btn { text-decoration: none; }
.act-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.act-live { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--accent-green); }
.act-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); animation: act-pulse 2s infinite; }
@keyframes act-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); } 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

/* counters */
.act-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 10px; margin-bottom: 14px; }
.act-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); border: 2px solid transparent; background: #f3f4f6; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.1s; min-width: 0; }
.act-kpi b { font-size: 1.55rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: #1f2937; }
.act-kpi span { font-size: 0.78rem; font-weight: 600; color: #4b5563; }
.act-kpi:hover { border-color: rgba(0, 0, 0, 0.08); }
.act-kpi:active { transform: translateY(1px); }
.act-kpi:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.act-kpi.good { background: #e7f8f0; } .act-kpi.good b { color: #059669; } .act-kpi.good span { color: #047857; }
.act-kpi.bad { background: #fdecec; } .act-kpi.bad b { color: #dc2626; } .act-kpi.bad span { color: #b91c1c; }
.act-kpi.warn { background: #fef5e1; } .act-kpi.warn b { color: #d97706; } .act-kpi.warn span { color: #b45309; }
.act-kpi.muted { background: #eef0f4; } .act-kpi.muted b { color: #475569; } .act-kpi.muted span { color: #64748b; }
.act-kpi.on { border-color: currentColor; }
.act-kpi.good.on { border-color: #10b981; } .act-kpi.bad.on { border-color: #ef4444; } .act-kpi.warn.on { border-color: #f59e0b; } .act-kpi.muted.on { border-color: #94a3b8; }
.act-kpi-last { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px dashed var(--border-muted); min-width: 0; }
.act-kpi-last span { font-size: 0.72rem; font-weight: 600; color: var(--text-sub); }
.act-kpi-last b { font-size: 1rem; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.act-kpi-last small { font-size: 0.74rem; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .act-kpi { background: #24262c; }
[data-theme="dark"] .act-kpi b { color: #f3f4f6; } [data-theme="dark"] .act-kpi span { color: #cbd5e1; }
[data-theme="dark"] .act-kpi.good { background: rgba(16, 185, 129, 0.14); } [data-theme="dark"] .act-kpi.good b, [data-theme="dark"] .act-kpi.good span { color: #34d399; }
[data-theme="dark"] .act-kpi.bad { background: rgba(239, 68, 68, 0.14); } [data-theme="dark"] .act-kpi.bad b, [data-theme="dark"] .act-kpi.bad span { color: #f87171; }
[data-theme="dark"] .act-kpi.warn { background: rgba(245, 158, 11, 0.14); } [data-theme="dark"] .act-kpi.warn b, [data-theme="dark"] .act-kpi.warn span { color: #fbbf24; }
[data-theme="dark"] .act-kpi.muted { background: #2a2d34; } [data-theme="dark"] .act-kpi.muted b, [data-theme="dark"] .act-kpi.muted span { color: #cbd5e1; }

/* toolbar: search, filter button, active filters */
.act-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.act-toolbar .field-input { height: 38px; font-size: 0.84rem; }
.act-toolbar .field-search { width: 280px; }
.act-filter-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-muted); background: var(--card-bg); color: var(--text-main); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.act-filter-btn svg { width: 16px; height: 16px; }
.act-filter-btn:hover { background: var(--bg-main); }
.act-filter-btn:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 1px; }
.act-filter-btn.on { border-color: var(--accent-orange); color: var(--accent-orange); }
.act-filter-btn b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent-orange); color: #fff; font-size: 0.72rem; }
.act-tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: var(--radius-pill); background: var(--accent-orange-light); color: var(--accent-orange-hover); font-size: 0.8rem; font-weight: 600; }
.act-tag button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; }
.act-tag button:hover { background: rgba(255, 94, 58, 0.15); }
.act-count { order: 10; margin-left: auto; font-size: 0.8rem; font-weight: 500; color: var(--text-sub); font-variant-numeric: tabular-nums; }

/* filter modal */
.act-fgroup { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.act-fgroup legend { font-size: 0.78rem; font-weight: 700; color: var(--text-sub); margin-bottom: 8px; padding: 0; }
.act-fopts { display: flex; flex-wrap: wrap; gap: 6px; }
.act-fopt { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-muted); background: var(--card-bg); color: var(--text-main); font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.act-fopt b { font-weight: 700; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.act-fopt .dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.act-fopt.good .dot { background: #10b981; } .act-fopt.bad .dot { background: #ef4444; } .act-fopt.warn .dot { background: #f59e0b; }
.act-fopt:hover { background: var(--bg-main); }
.act-fopt:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 1px; }
.act-fopt.active { background: var(--primary-bg); border-color: transparent; color: var(--primary-fg); }
.act-fopt.active b { color: var(--primary-fg); opacity: 0.85; }

/* table: no frame, light dividers, strong text */
table.data-table.act-table { table-layout: fixed; min-width: 940px; font-size: 0.86rem; }
.act-table col.w-time { width: 118px; }
.act-table col.w-result { width: 230px; }
.act-table col.w-assess { width: 220px; }
.act-table col.w-where { width: 220px; }
.act-table col.w-branch { width: 250px; }

.act-table col.w-worked { width: 120px; }
.act-table col.w-more { width: 40px; }
table.data-table.act-table thead th { height: 42px; padding: 0 14px; background: transparent; border-bottom: 1px solid var(--border-muted); font-size: 0.76rem; font-weight: 700; color: var(--text-sub); }
table.data-table.act-table th.n, table.data-table.act-table td.n { text-align: right; }
table.data-table.act-table tbody tr td { height: 62px; padding: 0 14px; border-bottom: 1px solid var(--border-light); color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.data-table.act-table tbody tr.row-click:hover td { background: var(--bg-main); }
table.data-table.act-table tbody tr.is-denied td { background: rgba(239, 68, 68, 0.045); }
table.data-table.act-table tbody tr.is-denied:hover td { background: rgba(239, 68, 68, 0.08); }
table.data-table.act-table tbody tr.is-new td { background: var(--accent-orange-light); }
table.data-table.act-table tbody tr.act-day-row td { height: 40px; padding: 14px 14px 6px; vertical-align: bottom; border-bottom: 1px solid var(--border-light); background: transparent; }
.act-day-row span { font-size: 0.8rem; font-weight: 700; color: var(--text-main); }

.act-time { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.act-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--accent-orange); color: #fff; font-size: 0.64rem; font-weight: 700; vertical-align: 2px; }
.act-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.act-face { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; object-fit: cover; background: #eef0f4; }
.act-face.face-empty svg { width: 18px; height: 18px; color: #94a3b8; }
.act-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; max-width: 100%; }
.act-name { font-size: 0.9rem; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.act-name.unknown { font-weight: 500; color: var(--text-sub); }
.act-code { margin-left: 8px; padding: 1px 6px; border-radius: 5px; background: #eef0f4; font-size: 0.72rem; font-weight: 600; color: var(--text-sub); }
.act-sub { display: block; max-width: 100%; font-size: 0.78rem; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-strong { font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.act-dash { color: var(--text-muted); }
.act-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; }
.act-pill.good { background: #dcf5ea; color: #047857; }
.act-pill.bad { background: #fde2e2; color: #b91c1c; }
.act-pill.muted { background: #e9ecf1; color: #475569; }
[data-theme="dark"] .act-pill.good { background: rgba(16, 185, 129, 0.18); color: #34d399; }
[data-theme="dark"] .act-pill.bad { background: rgba(239, 68, 68, 0.18); color: #f87171; }
[data-theme="dark"] .act-pill.muted, [data-theme="dark"] .act-code, [data-theme="dark"] .act-face { background: #2a2d34; color: #cbd5e1; }
.act-marks { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; max-width: 100%; }
.act-marks .arrival { white-space: nowrap; font-weight: 600; }

.act-more { text-align: right; padding-right: 10px !important; }
.act-chev { color: var(--text-muted); transition: transform 0.15s, color 0.15s; vertical-align: middle; }
table.data-table.act-table tbody tr:hover .act-chev, table.data-table.act-table tbody tr:focus-visible .act-chev { color: var(--accent-orange); transform: translateX(2px); }

/* detail modal */
.act-detail { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: start; }
.act-detail-photo .detail-img { width: 180px; height: 180px; border-radius: var(--radius-md); object-fit: cover; }
.act-verdict { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 12px; background: #eef0f4; }
.act-verdict b { font-size: 1rem; font-weight: 700; color: #334155; }
.act-verdict span { font-size: 0.82rem; color: #475569; }
.act-verdict.good { background: #e7f8f0; } .act-verdict.good b { color: #047857; } .act-verdict.good span { color: #065f46; }
.act-verdict.bad { background: #fdecec; } .act-verdict.bad b { color: #b91c1c; } .act-verdict.bad span { color: #991b1b; }
[data-theme="dark"] .act-verdict { background: #2a2d34; } [data-theme="dark"] .act-verdict b, [data-theme="dark"] .act-verdict span { color: #e5e7eb; }
[data-theme="dark"] .act-verdict.good { background: rgba(16, 185, 129, 0.15); } [data-theme="dark"] .act-verdict.bad { background: rgba(239, 68, 68, 0.15); }
.act-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.act-facts > div { min-width: 0; }
.act-facts > div.wide { grid-column: 1 / -1; }
.act-facts dt { font-size: 0.74rem; font-weight: 600; color: var(--text-sub); margin-bottom: 2px; }
.act-facts dd { margin: 0; font-size: 0.88rem; font-weight: 500; color: var(--text-main); }
.act-history { margin-top: 18px; }
.act-history h3 { font-size: 0.84rem; font-weight: 700; margin: 0 0 8px; }
.act-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.act-history button { display: grid; grid-template-columns: 120px auto minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 0.84rem; text-align: left; color: var(--text-main); cursor: pointer; }
.act-history button:hover { background: var(--bg-main); }
.act-note { margin: 14px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-sub); }

@media (max-width: 1200px) {
  .act-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .act-kpi-last { grid-column: span 3; }
}
@media (max-width: 1023px) {
  .act-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .act-kpi { padding: 8px 10px; }
  .act-kpi b { font-size: 1.2rem; }
  .act-kpi span { font-size: 0.7rem; line-height: 1.25; }
  .act-kpi-last { grid-column: auto; padding: 8px 10px; }
  .act-kpi-last b { font-size: 0.9rem; }
  .act-count { margin-left: 0; }
  .act-toolbar .field-search { width: 100%; }
  table.data-table.act-table { table-layout: auto; min-width: 0; }
  .act-table colgroup { display: none; }
  table.data-table.act-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 4px; }
  table.data-table.act-table tbody tr td { height: auto; padding: 0; border: 0; white-space: normal; background: transparent !important; }
  table.data-table.act-table tbody tr.is-denied { background: rgba(239, 68, 68, 0.05); border-radius: 10px; padding: 12px 10px; }
  table.data-table.act-table tbody tr.is-new { background: var(--accent-orange-light); border-radius: 10px; padding: 12px 10px; }
  table.data-table.act-table tbody tr.act-day-row { display: block; padding: 12px 4px 4px; border: 0; }
  table.data-table.act-table tbody tr.act-day-row td, #actPasses tbody tr.act-day-row td:nth-child(1) { display: block; padding: 0; border: 0; text-align: left; }
  #actPasses tbody tr td:nth-child(1) { grid-column: 2; grid-row: 1; text-align: right; }
  #actPasses tbody tr td:nth-child(2) { grid-column: 1; grid-row: 1; }
  #actPasses tbody tr td:nth-child(3), #actPasses tbody tr td:nth-child(4), #actPasses tbody tr td:nth-child(5), #actPasses tbody tr td:nth-child(6) { grid-column: 1 / -1; }
  #actPasses tbody tr.is-denied td:nth-child(4), #actPasses tbody tr.is-unknown td:nth-child(4) { display: none; }
  #actAttend tbody tr td:nth-child(1) { grid-column: 1; }
  #actAttend tbody tr td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; }
  #actAttend tbody tr td:nth-child(2) { grid-column: 1 / -1; }
  #actAttend tbody tr td:nth-child(3) { grid-column: 1; }
  #actAttend tbody tr td:nth-child(4) { grid-column: 2; text-align: right; }
  #actAttend thead { display: none; }
  table.data-table.act-table td.act-more { display: none; }
  
  .act-detail { grid-template-columns: minmax(0, 1fr); }
  .act-detail-photo .detail-img { width: 100%; height: auto; max-height: 260px; }
  .act-facts { grid-template-columns: minmax(0, 1fr); }
  .act-history button { grid-template-columns: auto auto minmax(0, 1fr); }
  .act-history button .act-chev { display: none; }
}
@media (prefers-reduced-motion: reduce) { .act-live-dot { animation: none; } .act-kpi, .act-chev { transition: none; } }

/* activity: day bar (attendance table + pass modal) */
.act-table col.w-who { width: 260px; }
#actAttend col.w-io { width: 190px; }
table.data-table.act-table th.act-axis-h { padding: 0 18px; }
.act-axis, .act-day-axis { display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 600; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.act-axis span, .act-day-axis span { width: 0; display: flex; justify-content: center; }
table.data-table.act-table td.act-bar-cell { padding: 0 18px; overflow: visible; }
#actAttend .db-io small { white-space: normal; }
#actAttend .db-io small.ok, .act-day-card .db-io small.ok { color: #059669; }

.act-day-card { margin-top: 16px; padding: 14px 16px 16px; border-radius: var(--radius-md); background: var(--bg-main); }
.act-day-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.act-day-card h3 { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--text-main); }
.act-day-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; font-size: 0.8rem; font-weight: 600; }
.act-day-axis { margin-bottom: 4px; }
.act-day-card .db-track { fill: var(--card-bg); }
.act-day-io { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.act-day-io > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm, 8px); background: var(--card-bg); min-width: 0; }
.act-day-io > div > span:first-child { font-size: 0.72rem; font-weight: 600; color: var(--text-sub); }
.act-day-io .db-io small { white-space: normal; }
@media (max-width: 1023px) {
  .act-day-io { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act-day-card header { flex-wrap: wrap; }
}

/* activity: today at a glance (flow by hour + refused with photo) */
.act-watch { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.act-flow, .act-denied { padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg-main); min-width: 0; }
.act-flow header, .act-denied header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.act-flow h3, .act-denied h3 { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--text-main); display: inline-flex; align-items: center; gap: 8px; }
.act-flow-sum { font-size: 0.78rem; font-weight: 600; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.act-flow-svg { display: block; width: 100%; height: 84px; overflow: visible; }
.act-flow-hit { fill: transparent; }
.act-flow-col.has { cursor: pointer; }
.act-flow-col.has:hover .act-flow-hit, .act-flow-col:focus-visible .act-flow-hit { fill: rgba(100, 116, 139, 0.10); }
.act-flow-col:focus { outline: none; }
.act-flow-col.on .act-flow-hit { fill: rgba(100, 116, 139, 0.18); }
.act-flow-col.now .act-flow-hit { fill: rgba(16, 185, 129, 0.08); }
.act-flow-base { fill: var(--border-muted); }
.act-flow-ok { fill: #10b981; }
.act-flow-bad { fill: #ef4444; }
.act-flow-axis { display: flex; margin-top: 4px; font-size: 0.68rem; font-weight: 600; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.act-flow-axis span { flex: 1 1 0; text-align: center; min-width: 0; }
.act-flow-axis span.now { color: #059669; font-weight: 800; }
.act-flow-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.74rem; color: var(--text-sub); }
.act-flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.act-flow-legend i { width: 10px; height: 10px; border-radius: 3px; }
.act-flow-legend .lg-ok { background: #10b981; }
.act-flow-legend .lg-bad { background: #ef4444; }
.act-flow-legend .hint { margin-left: auto; color: var(--text-muted); }

.act-denied h3 b { min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); background: #fee2e2; color: #b91c1c; font-size: 0.74rem; display: inline-flex; align-items: center; justify-content: center; }
.act-denied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.act-denied li button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.act-denied li button:hover, .act-denied li button:focus-visible { background: var(--card-bg); }
.act-denied-face { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--card-bg); color: var(--text-muted); }
.act-denied .act-name { font-size: 0.84rem; }
.act-denied .act-sub { color: #b91c1c; }
.act-denied-time { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-main); }
.act-denied-ok { margin: 18px 0 0; font-size: 0.84rem; font-weight: 600; color: #059669; }
[data-theme="dark"] .act-denied h3 b { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
[data-theme="dark"] .act-denied .act-sub { color: #fca5a5; }
@media (max-width: 1023px) {
  .act-watch { grid-template-columns: minmax(0, 1fr); }
  .act-flow-legend .hint { display: none; }
}

/* activity: the tables scroll inside the panel (desktop one-screen layout); head and day labels stay on top */
.act-table col.w-dayctx { width: 150px; }
@media (min-width: 1024px) { #actPasses { min-width: 1100px; } }
.act-kind { font-size: 0.76rem; font-weight: 600; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; }
.act-kind.k-in { color: #059669; }
.act-kind.k-out { color: #2563eb; }
.act-kind.k-bad { color: #b91c1c; }
.act-of { font-weight: 600; color: var(--text-sub); }
.act-time .act-sub { font-family: inherit; }
.pm-bar-note.wait, .db-io small.wait { color: #2563eb; }
[data-theme="dark"] .act-kind.k-out, [data-theme="dark"] .pm-bar-note.wait, [data-theme="dark"] .db-io small.wait { color: #93c5fd; }
[data-theme="dark"] .act-kind.k-bad { color: #fca5a5; }
@media (min-width: 1024px) {
  table.data-table.act-table thead th { position: sticky; top: 0; z-index: 3; background: var(--card-bg); }
  #actPasses tbody tr.act-day-row td { position: sticky; top: 42px; z-index: 2; background: var(--card-bg); }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .tab-content > .panel-card.act-card { overflow-y: auto; }
  .att-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .act-card > .table-wrap.act-scroll, .att-panel > .table-wrap.act-scroll { flex: 1 1 auto; min-height: 260px; overflow: auto; overscroll-behavior: contain; }
  .act-card .pager, .att-panel > .act-kpis, .att-panel > .act-toolbar, .act-card > .act-kpis, .act-card > .act-watch, .act-card > .act-toolbar { flex-shrink: 0; }
}

/* reports: the table scrolls inside the panel (desktop one-screen layout), the head stays on top */
@media (min-width: 1024px) {
  #rpTable thead th { position: sticky; top: 0; z-index: 3; }
  #rpTable thead th.is-sorted { background: linear-gradient(var(--rp-sorted), var(--rp-sorted)), var(--rp-head); }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .tab-content > .panel-card.rp-card { overflow-y: auto; }
  .rp-card > .table-wrap.rp-table-wrap { flex: 1 1 auto; min-height: 260px; overflow: auto; overscroll-behavior: contain; }
  .rp-card > :not(.table-wrap) { flex-shrink: 0; }
}

/* terminals: health counters, one clear row per terminal, details in a modal */
.trm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); }
#trmTable col.w-state { width: 22%; }
#trmTable col.w-last { width: 14%; }
#trmTable col.w-addr { width: 15%; }
#trmTable col.w-branch { width: 17%; }
#trmTable col.w-acts { width: 148px; }
#trmTable td.cell-actions { overflow: visible; text-align: right; }
#trmTable .row-actions { justify-content: flex-end; }
.trm-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trm-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18); }
.trm-dot.good { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16); }
.trm-dot.warn { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
.trm-dot.bad { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16); }
.trm-current { margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-orange-light); color: var(--accent-orange); font-size: 0.7rem; font-weight: 700; vertical-align: 1px; }
.trm-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.trm-stale { color: #d97706; }
.trm-none { color: var(--text-sub); font-weight: 600; }
.act-pill.warn { background: #fef3c7; color: #b45309; }
[data-theme="dark"] .act-pill.warn { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }

.trm-actions { flex-wrap: wrap; }
.trm-actions .btn-cancel { display: inline-flex; align-items: center; gap: 6px; }
.trm-actions .btn-cancel.danger { margin-right: auto; color: #dc2626; }
table.data-table.act-table#trmTable { min-width: 0; }
@media (min-width: 1024px) and (min-height: 700px) {
  .tab-content > .panel-card.trm-card { overflow-y: auto; }
  .trm-card > .table-wrap.act-scroll { flex: 1 1 auto; min-height: 220px; overflow: auto; overscroll-behavior: contain; }
  .trm-card > :not(.table-wrap) { flex-shrink: 0; }
}
@media (max-width: 1023px) {
  .trm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trm-kpis .act-kpi-last { grid-column: 1 / -1; }
  #trmTable tbody tr td:nth-child(1) { grid-column: 1; grid-row: 1; }
  #trmTable tbody tr td:nth-child(6) { grid-column: 2; grid-row: 1; }
  #trmTable tbody tr td:nth-child(2), #trmTable tbody tr td:nth-child(3), #trmTable tbody tr td:nth-child(4), #trmTable tbody tr td:nth-child(5) { grid-column: 1 / -1; }
  .trm-actions .btn-cancel.danger { margin-right: 0; }
}
.act-verdict.warn { background: #fef5e1; } .act-verdict.warn b { color: #b45309; } .act-verdict.warn span { color: #92400e; }
[data-theme="dark"] .act-verdict.warn { background: rgba(245, 158, 11, 0.15); } [data-theme="dark"] .act-verdict.warn b, [data-theme="dark"] .act-verdict.warn span { color: #fbbf24; }

/* terminals: the detail modal (status header, three key numbers, grouped facts) */
.trm-hero { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-lg); background: #eef0f4; margin-bottom: 12px; }
.trm-hero-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--card-bg); color: #64748b; }
.trm-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trm-hero-text b { font-size: 1.02rem; font-weight: 700; color: #334155; }
.trm-hero-text span { font-size: 0.82rem; color: #475569; line-height: 1.4; }
.trm-hero-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 0.82rem; font-weight: 700; color: var(--text-main); text-align: right; }
.trm-hero-meta small { font-size: 0.74rem; font-weight: 500; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.trm-hero.good { background: #e7f8f0; } .trm-hero.good .trm-hero-ico { color: #059669; } .trm-hero.good .trm-hero-text b { color: #047857; } .trm-hero.good .trm-hero-text span { color: #065f46; }
.trm-hero.warn { background: #fef5e1; } .trm-hero.warn .trm-hero-ico { color: #d97706; } .trm-hero.warn .trm-hero-text b { color: #b45309; } .trm-hero.warn .trm-hero-text span { color: #92400e; }
.trm-hero.bad { background: #fdecec; } .trm-hero.bad .trm-hero-ico { color: #dc2626; } .trm-hero.bad .trm-hero-text b { color: #b91c1c; } .trm-hero.bad .trm-hero-text span { color: #991b1b; }
.trm-hero .trm-current { vertical-align: 2px; }

.trm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.trm-stats > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--card-bg); min-width: 0; box-shadow: none; }
.trm-stats span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; color: var(--text-sub); }
.trm-stats b { font-size: 1.2rem; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1.2; }
.trm-stats small { font-size: 0.75rem; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trm-stats > div.s-good { box-shadow: none; } .trm-stats > div.s-good b { color: #047857; }
.trm-stats > div.s-ok { box-shadow: none; }
.trm-stats > div.s-warn { box-shadow: none; } .trm-stats > div.s-warn b { color: #b45309; }

.trm-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trm-group { min-width: 0; padding: 12px 14px 6px; border-radius: var(--radius-md); background: var(--bg-main); }
.trm-group h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 0.8rem; font-weight: 700; color: var(--text-main); }
.trm-group h3 svg { color: var(--text-sub); }
.trm-group dl { margin: 0; }
.trm-group dl > div { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-top: 1px solid var(--border-light); min-width: 0; }
.trm-group dl > div:first-child { border-top: 0; }
.trm-group dt { font-size: 0.72rem; font-weight: 600; color: var(--text-sub); }
.trm-group dd { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--text-main); overflow-wrap: anywhere; }
.trm-group dd.trm-mono { font-size: 0.82rem; }
.trm-proto { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--card-bg); font-size: 0.78rem; }
.trm-proto.secure { background: #e7f8f0; color: #047857; }
.trm-proto.plain { background: #fef3c7; color: #b45309; }
.trm-ok { display: inline-flex; align-items: center; gap: 5px; color: #047857; }
[data-theme="dark"] .trm-hero { background: rgba(148, 163, 184, 0.12); }
[data-theme="dark"] .trm-hero.good { background: rgba(16, 185, 129, 0.14); } [data-theme="dark"] .trm-hero.warn { background: rgba(245, 158, 11, 0.14); } [data-theme="dark"] .trm-hero.bad { background: rgba(239, 68, 68, 0.14); }
[data-theme="dark"] .trm-hero .trm-hero-text b, [data-theme="dark"] .trm-hero .trm-hero-text span { color: var(--text-main); }
[data-theme="dark"] .trm-proto.secure, [data-theme="dark"] .trm-ok { color: #34d399; } [data-theme="dark"] .trm-proto.plain { color: #fbbf24; background: rgba(245, 158, 11, 0.16); }
@media (max-width: 1023px) {
  .trm-stats, .trm-groups { grid-template-columns: minmax(0, 1fr); }
  .trm-hero { flex-wrap: wrap; }
  .trm-hero-meta { align-items: flex-start; text-align: left; width: 100%; }
}

/* control: header with live status, terminal picker cards */

.cv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-pill); background: #eef0f4; color: #475569; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.cv-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cv-chip.good { background: #e7f8f0; color: #047857; }
.cv-chip.warn { background: #fef3c7; color: #b45309; }
.cv-chip.bad { background: #fdecec; color: #b91c1c; }

[data-theme="dark"] .cv-chip { background: rgba(148, 163, 184, 0.14); color: var(--text-main); }
[data-theme="dark"] .cv-chip.good { background: rgba(16, 185, 129, 0.16); color: #34d399; }
[data-theme="dark"] .cv-chip.warn { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
[data-theme="dark"] .cv-chip.bad { background: rgba(239, 68, 68, 0.16); color: #f87171; }

/* control: blocks inside a section */

.link-btn.danger { color: #dc2626; }

/* door: message preview */
.scr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; margin-top: 10px; }

.scr-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scr-preview small { font-size: 0.72rem; color: var(--text-sub); text-align: center; }
.scr-frame { width: 200px; min-height: 250px; border-radius: 22px; padding: 26px 16px; background: #0f172a; border: 6px solid #1e293b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18); }

.scr-frame b { font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }

/* door mode cards */

/* schedule: a 00-24 line per day */
.day-line { display: block; width: 100%; height: 12px; }
.dl-track { fill: var(--border-light); }
.dl-tick { stroke: var(--card-bg); stroke-width: 6; }
.dl-on { fill: #10b981; }
.dl-closed { fill: #ef4444; }
.sched-day { grid-template-columns: 104px minmax(140px, 1fr) minmax(0, 1.7fr) auto; gap: 8px 14px; padding: 8px 12px; background: var(--card-bg); border: 1px solid var(--border-light); }
.sched-day.empty .sched-name { color: var(--text-sub); }
.sched-line { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sched-hours { display: flex; justify-content: space-between; font-size: 0.62rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sched-hours i { font-style: normal; width: 0; display: flex; justify-content: center; }
.sched-hours i:first-child { justify-content: flex-start; }
.sched-hours i:last-child { justify-content: flex-end; }
.sched-none { font-size: 0.78rem; color: var(--text-sub); }

/* people lists, templates, inputs as cards */

.sw { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.sw-track { width: 38px; height: 22px; border-radius: 11px; background: var(--border-muted); transition: background 0.15s; position: relative; }
.sw-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.sw input:checked + .sw-track { background: #10b981; }
.sw input:checked + .sw-track::after { transform: translateX(16px); }
.sw input:focus-visible + .sw-track { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.sw input:disabled + .sw-track { opacity: 0.6; }

/* activity receiving: what arrives, the technical part folded */

.cv-list strong svg { vertical-align: -2px; color: var(--text-sub); }

@media (max-width: 1023px) {
  
  .scr-grid { grid-template-columns: minmax(0, 1fr); }
  
  .sched-day { grid-template-columns: minmax(0, 1fr) auto; }
  .sched-day .sched-name { grid-column: 1; grid-row: 1; }
  .sched-day > .link-btn { grid-column: 2; grid-row: 1; }
  .sched-day .sched-line, .sched-day .sched-secs { grid-column: 1 / -1; }
  
  
}

/* control: terminal picker as a full-width table */
.cv-pick .section-head h2 { margin: 0 0 4px; font-size: 1.05rem; }
#tpTable col.w-state { width: 24%; }
#tpTable col.w-last { width: 14%; }
#tpTable col.w-today { width: 14%; }
#tpTable col.w-addr { width: 13%; }
#tpTable col.w-go { width: 130px; }
table.data-table.act-table#tpTable { min-width: 0; }
#tpTable td.cell-actions { overflow: visible; text-align: right; }
#tpTable .cv-chip { align-self: flex-start; padding: 2px 10px; font-size: 0.74rem; }
#tpTable .tp-bad { color: #dc2626; font-weight: 600; }
@media (max-width: 1023px) {
  #tpTable tbody tr td:nth-child(1) { grid-column: 1; grid-row: 1; }
  #tpTable tbody tr td:nth-child(6) { grid-column: 2; grid-row: 1; }
  #tpTable tbody tr td:nth-child(2), #tpTable tbody tr td:nth-child(3), #tpTable tbody tr td:nth-child(4), #tpTable tbody tr td:nth-child(5) { grid-column: 1 / -1; }
}

/* control v3: one full-height panel - header, tabs, scrolling content; compact rows, details in modals */
.cv-shell { padding: 0; overflow: hidden; }
.cv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 14px 20px; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }

.cv-top-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.cv-scroll { padding: 16px 20px 20px; min-width: 0; }

.cv-loading { margin: 8px 0; font-size: 0.84rem; color: var(--text-sub); }
.cv-hint { margin: 10px 0 0; font-size: 0.76rem; color: var(--text-sub); line-height: 1.45; }
.cv-expect { font-weight: 800; letter-spacing: 0.02em; color: var(--text-main); }
@media (min-width: 1024px) and (min-height: 700px) {
  .tab-content > .panel-card.cv-shell { display: flex; flex-direction: column; min-height: 0; }
  .cv-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}

/* tiles: the essentials of a section */
.cv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cv-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--bg-main); min-width: 0; box-shadow: none; }
.cv-tile span { font-size: 0.72rem; font-weight: 600; color: var(--text-sub); }
.cv-tile b { font-size: 0.95rem; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-tile small { font-size: 0.72rem; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tile.good { box-shadow: none; } .cv-tile.good b { color: #047857; }
.cv-tile.warn { box-shadow: none; } .cv-tile.warn b { color: #b45309; }
.cv-tile.bad { box-shadow: none; } .cv-tile.bad b { color: #b91c1c; }

.cv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cv-actions .danger { margin-left: auto; }

/* door: two actions */

.cv-act-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-orange-light); color: var(--accent-orange); }
.cv-act-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-act-text b { font-size: 0.88rem; font-weight: 700; }
.cv-act-text small { font-size: 0.74rem; color: var(--text-sub); line-height: 1.35; }

/* fields (modals and the door mode) */
.cv-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cv-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.76rem; font-weight: 600; color: var(--text-sub); min-width: 0; margin-bottom: 10px; }
.cv-form .cv-field { margin-bottom: 0; }
.cv-field small { font-size: 0.74rem; font-weight: 500; color: var(--text-sub); }
.cv-field .field-input { border-radius: var(--radius-md); }
.cv-field-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.cv-field-row > .cv-field { flex: 1 1 160px; }
.cv-field-row > .cv-field.cv-id { flex: 0 0 110px; }
.cv-field-row > .cv-field.cv-grow { flex: 3 1 240px; }
.cv-field-row > .check-row, .cv-field-row > button { margin-bottom: 10px; }
.scr-grid { margin-top: 0; }

/* door mode */

/* compact rows (lists, templates, inputs, subscriptions) */

.cv-warn { color: #d97706; font-size: 0.72rem; font-weight: 600; }
.cv-select { padding: 6px 10px; font-size: 0.8rem; max-width: 260px; }

.week-dots { display: inline-flex; gap: 3px; }
.week-dots i { width: 26px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.64rem; font-weight: 700; background: var(--bg-main); color: var(--text-muted); }
.week-dots i.on { background: #d1fae5; color: #047857; }
[data-theme="dark"] .week-dots i.on { background: rgba(16, 185, 129, 0.2); color: #34d399; }

@media (max-width: 1023px) {
  .cv-top { padding: 12px 14px; }
  .cv-top-actions { margin-left: 0; width: 100%; }
  
  
  .cv-scroll { padding: 14px; }
  
  
  
  
  
  
  .cv-actions .danger { margin-left: 0; }
}

/* control v4: header, a clear section menu (site segmented control), headings with actions, site tables */
.cv-top { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 16px 22px; }
.cv-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cv-id-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-orange-light); color: var(--accent-orange); }
.cv-id-text { min-width: 0; }
.cv-id-text h2 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.cv-id-text p { margin: 3px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 0.78rem; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.cv-id-text .cv-chip { padding: 2px 9px; font-size: 0.72rem; }
.cv-top-stats { display: flex; justify-content: center; margin: 0; min-width: 0; }
.cv-top-stats > div { display: flex; flex-direction: column; gap: 1px; padding: 0 20px; border-left: 1px solid var(--border-light); min-width: 0; }
.cv-top-stats > div:first-child { border-left: 0; }
.cv-top-stats dt { font-size: 0.7rem; font-weight: 600; color: var(--text-sub); white-space: nowrap; }
.cv-top-stats dd { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--text-main); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-top-stats dd em { font-style: normal; color: #dc2626; font-weight: 600; }
.cv-top-actions { display: flex; align-items: center; gap: 8px; margin: 0; }

.cv-nav-bar { padding: 10px 22px; border-bottom: 1px solid var(--border-light); background: var(--bg-main); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.cv-nav-bar::-webkit-scrollbar { display: none; }
.cv-seg { background: var(--card-bg); flex-wrap: nowrap; }
.cv-seg .seg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 0.82rem; color: var(--text-sub); }
.cv-seg .seg-btn svg { flex-shrink: 0; opacity: 0.85; }
.cv-seg .seg-btn:hover { background: var(--bg-main); }
.cv-seg .seg-btn.active, .cv-seg .seg-btn.active:hover { background: var(--primary-bg); color: var(--primary-fg); }
.cv-seg .seg-btn.active svg { opacity: 1; }
.cv-seg .seg-btn:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 1px; }

.cv-scroll { padding: 18px 22px 22px; }
.cv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cv-head-text { min-width: 0; flex: 1 1 320px; }
.cv-head-text h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-main); }
.cv-head-text p { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-sub); line-height: 1.45; max-width: 720px; }
.cv-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-gap { margin-top: 14px; }
.cv-hint-top { margin: 0 0 12px; }

/* dropdown */
.cv-menu { position: relative; display: inline-flex; }
.cv-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
.cv-menu.open .cv-menu-btn svg { transform: rotate(180deg); }
.cv-menu-dots { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border-light); background: var(--card-bg); color: var(--text-sub); cursor: pointer; }
.cv-menu-dots:hover, .cv-menu.open .cv-menu-dots { background: var(--bg-main); color: var(--text-main); }
.cv-menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 240px; padding: 6px; border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--card-bg); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); display: flex; flex-direction: column; }
.cv-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--text-main); text-align: left; cursor: pointer; }
.cv-menu-pop button svg { color: var(--text-sub); flex-shrink: 0; }
.cv-menu-pop button:hover:not(:disabled), .cv-menu-pop button:focus-visible { background: var(--bg-main); }
.cv-menu-pop button:disabled { opacity: 0.5; cursor: default; }
.cv-menu-pop button.danger, .cv-menu-pop button.danger svg { color: #dc2626; }
.cv-menu-pop hr { border: 0; border-top: 1px solid var(--border-light); margin: 4px 2px; }

/* tiles in the site look (as the terminal details) */
.cv-tile { background: var(--card-bg); border: 1px solid var(--border-light); padding: 12px 14px; }

/* door: two choices */
.cv-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.cv-choice-item { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); background: var(--card-bg); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.cv-choice-item:hover { border-color: var(--accent-orange); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); }
.cv-choice-item:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }

/* the section tables */
table.data-table.act-table.cv-table { min-width: 0; }
table.data-table.act-table.cv-table tbody tr td { height: 56px; }
.cv-table td.cell-actions { text-align: right; overflow: visible; }
.cv-table .row-actions { justify-content: flex-end; }
.cv-table tr.cv-row-on td:first-child { box-shadow: none; }
.cv-table .cv-select { max-width: 280px; }
.cv-table .cv-warn { color: #d97706; }
#cvLibs col, #cvLibs th:nth-child(3), #cvLibs th:nth-child(4) { width: 110px; }
#cvLibs th:nth-child(2) { width: 22%; }
#cvLibs th:last-child, #cvInputs th:last-child { width: 64px; }
#cvTpls th:nth-child(2) { width: 230px; }
#cvTpls th:last-child, #cvSubs th:last-child { width: 96px; }
#cvInputs th:nth-child(2) { width: 120px; }
#cvInputs th:nth-child(3) { width: 34%; }

.week-dots i.closed { background: #fee2e2; color: #b91c1c; }

@media (max-width: 1180px) {
  .cv-top { grid-template-columns: minmax(0, 1fr) auto; }
  .cv-top-stats { grid-column: 1 / -1; justify-content: flex-start; order: 3; }
  .cv-top-stats > div:first-child { padding-left: 0; }
}
@media (max-width: 1023px) {
  .cv-top { padding: 14px; }
  .cv-top-stats > div { padding: 0 12px; }
  .cv-nav-bar { padding: 8px 10px; }
  .cv-scroll { padding: 14px; }
  table.data-table.act-table.cv-table tbody tr td { height: auto; }
  .cv-table tbody tr td:first-child { grid-column: 1; grid-row: 1; }
  .cv-table tbody tr td:last-child { grid-column: 2; grid-row: 1; }
  .cv-table tbody tr td:not(:first-child):not(:last-child) { grid-column: 1 / -1; text-align: left; }
  .cv-table td[data-l]::before { content: attr(data-l) ": "; font-size: 0.74rem; font-weight: 600; color: var(--text-sub); }
  
  
  .cv-menu-pop { right: auto; left: 0; }
  .cv-head-actions .cv-menu-pop { right: 0; left: auto; }
}
.cv-nav-bar { overflow: visible; }
.cv-seg { flex-wrap: wrap; border-radius: 16px; }

/* plain tiles: no frame, no side accent - the value colour carries the state */
.cv-tile, .trm-stats > div { border: 0; background: var(--bg-main); box-shadow: none; padding: 12px 14px; }
.cv-tile b { font-size: 0.95rem; }

/* control: the section menu - plain pills on the card, the active one dark */
.cv-nav-bar { padding: 12px 22px 12px; background: transparent; border-bottom: 1px solid var(--border-light); }
.cv-seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.cv-seg .seg-btn { padding: 7px 14px; border-radius: var(--radius-pill); background: transparent; color: var(--text-sub); font-size: 0.82rem; font-weight: 600; transition: background 0.15s, color 0.15s; }
.cv-seg .seg-btn:hover { background: var(--bg-main); color: var(--text-main); }
.cv-seg .seg-btn.active, .cv-seg .seg-btn.active:hover { background: var(--primary-bg); color: var(--primary-fg); }
.cv-top { border-bottom: 0; padding-bottom: 6px; }
@media (max-width: 1023px) {
  .cv-nav-bar { padding: 8px 14px; overflow-x: auto; }
  .cv-seg { flex-wrap: nowrap; }
}

/* control: the screen message form - counters, lines, a preview of exactly what is sent */
.cv-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cv-count-ch { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cv-count-ch.full { color: #d97706; }
.cv-field .field-input.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }

.cv-note-warn { margin: 0; padding: 8px 12px; border-radius: var(--radius-md); background: var(--accent-yellow-bg); color: var(--warn-text); font-size: 0.78rem; line-height: 1.45; }
.cv-errors { margin: 0; padding: 8px 12px 8px 28px; border-radius: var(--radius-md); background: var(--accent-red-bg); color: var(--accent-red); font-size: 0.78rem; }
.scr-frame b.empty { color: #64748b; font-weight: 600; }

.scr-frame { min-height: 270px; }

/* screen message preview, as in the LAPI doc: a pop-up card (lines) and the text prompt in the lower left */
.scr-frame { justify-content: flex-end; align-items: stretch; gap: 10px; padding: 16px 12px 14px; text-align: left; }

.scr-prompt { align-self: flex-start; max-width: 100%; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; overflow-wrap: anywhere; }
.scr-prompt.empty { opacity: 0.55; font-weight: 600; }
 
 
.scr-prompt.c2 { background: rgba(239, 68, 68, 0.28); color: #fca5a5; } 
 
 

/* a pass: the document's example - a green card, the text as its title, the lines under it */

/* door schedule: now, mode, office hours, the week (green = recognition, red = locked, blue = open) */
.dm-now { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--bg-main); margin-bottom: 14px; }
.dm-now small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-sub); }
.dm-now b { font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.dm-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: #94a3b8; }
.dm-now.auth .dm-dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); }
.dm-now.closed .dm-dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
.dm-now.open .dm-dot { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18); }
.dm-block { padding: 14px 0; border-top: 1px solid var(--border-light); }
.dm-block:first-of-type { border-top: 0; }
.dm-label { display: block; font-size: 0.84rem; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.dm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dm-row .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; }
.dm-seg { flex-wrap: wrap; }
.dm-seg .seg-btn { display: inline-flex; align-items: center; gap: 7px; }
.dm-desc { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-sub); line-height: 1.45; }
.dm-err { margin: 8px 0 0; font-size: 0.8rem; font-weight: 600; color: #dc2626; }
.dm-hours { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px; }
.dm-time { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; font-weight: 600; color: var(--text-sub); }
.dm-time .field-input { width: 130px; border-radius: var(--radius-md); }
.dm-days { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dm-day { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-light); background: var(--card-bg); font: inherit; font-size: 0.76rem; font-weight: 700; color: var(--text-sub); cursor: pointer; }
.dm-day.on { background: #d1fae5; border-color: #6ee7b7; color: #047857; }
.dm-day:disabled { cursor: default; opacity: 0.7; }
.dm-custom { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: var(--text-sub); }
.dm-week { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.dm-week-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 12px; padding: 6px 10px; border-radius: 8px; }
.dm-week-row.today { background: var(--bg-main); }
.dm-week-row.axis { padding-top: 0; }
.dm-week-name { font-size: 0.82rem; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
.dm-week-name small { font-size: 0.66rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--accent-orange-light); color: var(--accent-orange); }
.dm-week-text { font-size: 0.76rem; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.day-line.door { height: 14px; }
.dl-auth { fill: #a7f3d0; }
.dl-open { fill: #60a5fa; }
.day-line.door .dl-closed { fill: #f87171; }
.dm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 12px; font-size: 0.74rem; color: var(--text-sub); }
.dm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dm-legend i { width: 14px; height: 8px; border-radius: 2px; }
.dm-legend .lg-auth { background: #a7f3d0; } .dm-legend .lg-closed { background: #f87171; } .dm-legend .lg-open { background: #60a5fa; }
.dm-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dm-inline .dm-label { margin: 0; }
.dm-inline small { font-size: 0.76rem; color: var(--text-sub); }
[data-theme="dark"] .dm-day.on { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.4); color: #34d399; }
[data-theme="dark"] .dl-auth { fill: rgba(16, 185, 129, 0.45); }
@media (max-width: 1023px) {
  .dm-week-row { grid-template-columns: 90px minmax(0, 1fr); }
  .dm-week-text { grid-column: 1 / -1; }
}

/* control header: four tiles (icon, number, label) instead of the plain row */
.cv-ts-row { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 8px; justify-content: center; }
.cv-ts-row > .cv-ts { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 0; border-radius: 12px; background: var(--bg-main); min-width: 0; }
.cv-ts-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--card-bg); color: var(--text-sub); }
.cv-ts-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cv-ts-text b { font-size: 1rem; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-ts-text small { font-size: 0.7rem; font-weight: 600; color: var(--text-sub); white-space: nowrap; }
.cv-ts.good .cv-ts-ico { background: #d1fae5; color: #059669; } .cv-ts.good b { color: #047857; }
.cv-ts.bad .cv-ts-ico { background: #fee2e2; color: #dc2626; } .cv-ts.bad b { color: #b91c1c; }
[data-theme="dark"] .cv-ts.good .cv-ts-ico { background: rgba(16, 185, 129, 0.18); color: #34d399; } [data-theme="dark"] .cv-ts.good b { color: #34d399; }
[data-theme="dark"] .cv-ts.bad .cv-ts-ico { background: rgba(239, 68, 68, 0.18); color: #f87171; } [data-theme="dark"] .cv-ts.bad b { color: #f87171; }
@media (max-width: 1180px) { .cv-ts-row { justify-content: start; } }
@media (max-width: 1023px) { .cv-ts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } }
.cv-ts-row > .cv-ts, .cv-ts-row > .cv-ts:first-child { flex-direction: row; border-left: 0; padding: 8px 14px 8px 8px; }

/* how a person passed: a small tag (face, card, QR...) */
.pm-method { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; margin-left: 6px; border-radius: var(--radius-pill); background: var(--bg-main); color: var(--text-sub); font-size: 0.7rem; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.pm-method.compact { padding: 2px 4px; gap: 0; }
.pm-method.m-card, .pm-method.m-qr { background: #e0e7ff; color: #4338ca; }
.pm-method.m-face { background: #ecfeff; color: #0e7490; }
.pm-method.m-password, .pm-method.m-fingerprint, .pm-method.m-idcard { background: #fef3c7; color: #b45309; }
[data-theme="dark"] .pm-method.m-card, [data-theme="dark"] .pm-method.m-qr { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
[data-theme="dark"] .pm-method.m-face { background: rgba(6, 182, 212, 0.16); color: #67e8f9; }
.act-pill-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.act-pill-row .pm-method { margin-left: 6px; }
/* person form: the card number + read it on the terminal */
.pf-card { display: flex; gap: 8px; align-items: center; }
.pf-card input { flex: 1; min-width: 0; }
.pf-card .btn-sm { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.pf-card .btn-sm.on { background: var(--accent-orange-light); color: var(--accent-orange); }
.pf-hint { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--accent-orange); font-weight: 600; }