/* =============================================================
   Unicraft - custom styles (layered on Tailwind CDN)
   Light theme: white cards on a pale grey page, slate text, orange accent
   (the Unicraft look is at the end).
   The ink-* names are kept from the dark theme and now run light to darker:
   950 the page, 900 cards, 850 a raised surface, 800 hover and fields, 700 borders.
   ============================================================= */

:root {
  --ink-950: #fafafa;
  --ink-900: #ffffff;
  --ink-850: #f8fafc;
  --ink-800: #f1f5f9;
  --ink-700: #e2e8f0;
  --brand-400: #2563eb;
  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --brand-50: #eff6ff;
  --text: #344256;
  --heading: #0f172a;
  --text-muted: #65758b;
  color-scheme: light;
}

html, body { background: var(--ink-950); color: var(--text); }
/* An iPhone enlarges text it thinks too small - in a report shrunk to fit the
   screen, that is all of it, and it spills out of its boxes. Sizes stay as set.
   (Tailwind does this for the app; the report previews are pages of their own.) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Sidebar navigation ---------- */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  transition: background-color 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--ink-800); color: var(--heading); }
.nav-link.active { background: var(--ink-800); color: var(--heading); font-weight: 600; }
.nav-link.active .nav-icon { color: var(--brand-500); }
.nav-icon { width: 1.1rem; height: 1.1rem; fill: currentColor; flex-shrink: 0; color: #65758b; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--brand-500); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-600); }
.btn-secondary { background: #fff; color: var(--heading); border: 1px solid var(--ink-700); }
.btn-secondary:hover:not(:disabled) { background: var(--ink-800); }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }

/* ---------- Form controls ---------- */
.select-dark,
.input-dark {
  background: #fff;
  border: 1px solid var(--ink-700);
  color: var(--heading);
  border-radius: 0.375rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
}
.select-dark:focus, .input-dark:focus { border-color: var(--brand-500); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.select-dark {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2365758b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.1rem;
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* ---------- Modules / panels ---------- */
.module-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Phones and tablets: the Projects buttons go on top, side by side across the
   width, and the title gets the whole line under them. */
@media (max-width: 1023px) {
  .projects-header { flex-direction: column-reverse; align-items: stretch; }
  .projects-actions > .btn { flex: 1; justify-content: center; }
}
@media (max-width: 479px) {
  /* Tailwind's items-center on the same element would win without !important. */
  .projects-actions { flex-direction: column; align-items: stretch !important; width: 100%; }
  .projects-actions > .btn { width: 100%; justify-content: center; }
}

.panel {
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.panel-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.75rem;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 8rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
}
.panel.empty-state { min-height: 16rem; border-style: dashed; }

/* ---------- KPI cards ---------- */
.kpi-card {
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kpi-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
}
.kpi-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
}
.kpi-value {
  margin-top: 0.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.kpi-meta { margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
.kpi-value.positive { color: #16a34a; }
.kpi-value.negative { color: #dc2626; }

/* Today's NBG dollar rate, at the right of the top bar */
.fx-rate {
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
  font-size: 0.8125rem; color: #475569;
  padding: 0.25rem 0.625rem; border: 1px solid var(--ink-700); border-radius: 9999px;
}
.fx-rate:hover { border-color: #94a3b8; }
.fx-rate b { color: #0f172a; font-weight: 600; }
.fx-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: #94a3b8; }
.fx-diff { font-size: 0.75rem; color: #64748b; }
@media (max-width: 480px) { .fx-label, .fx-diff { display: none; } }

/* $ / ₾ - which currency the app shows amounts in */
.currency-switch {
  margin-left: auto; display: inline-flex; flex-shrink: 0;
  border: 1px solid var(--ink-700); border-radius: 9999px; overflow: hidden;
}
.currency-switch:not(.hidden) + .fx-rate { margin-left: 0.5rem; }

/* ქართ / ENG: the language the app is shown in */
.lang-toggle {
  display: inline-flex; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--ink-700); border-radius: 9999px;
}
.lang-toggle button {
  padding: 0.25rem 0.65rem; font-size: 0.8125rem; font-weight: 600; color: #64748b; background: transparent;
}
.lang-toggle button:hover { color: #0f172a; }
.lang-toggle button.is-active { background: #0f172a; color: #fff; cursor: default; }
/* In the project top bar it sits at the right, before the dollar rate. */
.currency-switch.hidden + .lang-toggle { margin-left: auto; }
.currency-switch:not(.hidden) + .lang-toggle { margin-left: 0.5rem; }
.lang-toggle + .fx-rate { margin-left: 0.5rem; }

/* Shown and hidden by the app (it toggles .hidden): the display is set only
   while shown, so the class list never names two displays at once. */
.show-block:not(.hidden) { display: block; }
.show-grid:not(.hidden) { display: grid; }
.currency-switch button {
  padding: 0.25rem 0.7rem; font-size: 0.8125rem; font-weight: 600; color: #64748b; background: transparent;
}
.currency-switch button:hover { color: #0f172a; }
.currency-switch button.is-active { background: #0f172a; color: #fff; }

/* ---------- Status chips ---------- */
.status-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}
.status-done        { background: #dcfce7; color: #15803d; }
.status-in_progress { background: #dbeafe; color: #1d4ed8; }
.status-pending     { background: #f1f5f9; color: #475569; }
.status-blocked     { background: #fee2e2; color: #b91c1c; }

.status-handed      { background: #e0f2fe; color: #0369a1; }

/* ---------- Timetable ---------- */
.task-pct-cell { width: 5.5rem; }
.task-pct { display: flex; align-items: center; gap: 0.2rem; }
.task-pct span { font-size: 0.75rem; color: var(--text-muted); }
.task-pct-input {
  width: 3.6rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.8rem;
  text-align: right;
  color: var(--heading);
  background: #fff;
  border: 1px solid var(--ink-700);
  border-radius: 0.375rem;
}
.task-pct-bar { position: relative; height: 3px; margin-top: 0.3rem; border-radius: 999px; background: var(--ink-700); }
.task-pct-bar > div { height: 100%; border-radius: 999px; background: #16a34a; }
/* Where the item's own dates say it should be by today. */
.task-pct-plan {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  border-radius: 1px;
  background: #64748b;
}
.task-pct-hint { display: block; margin-top: 0.25rem; font-size: 0.65rem; color: var(--text-muted); }
.task-pct-hint.is-behind { color: #dc2626; }
.task-check {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  accent-color: #16a34a;
}
.data-table tr.is-done .task-name { color: var(--text-muted); text-decoration: line-through; }
.data-table tr.is-overdue td { background: #fef2f2; }
.data-table tr.is-overdue .task-name { color: #991b1b; }
.data-table .task-name { color: var(--heading); font-weight: 500; }
.select-inline {
  min-width: 10rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.8rem;
  background-color: #fff;
}
.select-inline:hover { background-color: var(--ink-850); }
/* The timetable's contractor picker: a long company name is cut short (the
   full name is in its tooltip and in the open list) so the table doesn't
   scroll sideways. */
.select-contractor {
  min-width: 0;
  width: 10rem;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.kpi-value-sm { font-size: 1.4rem; overflow-wrap: anywhere; }

/* ---------- Data tables (BOQ, cash flow) ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--ink-850);
  border-bottom: 1px solid var(--ink-700);
  white-space: nowrap;
}
.data-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--ink-800);
  vertical-align: top;
  color: var(--text);
}
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--ink-850); }
.data-table tfoot td { font-weight: 600; color: var(--heading); border-top: 1px solid var(--ink-700); border-bottom: 0; }
.data-table tr.is-cancelled td { opacity: 0.45; }
.data-table tr.is-cancelled p:first-child { text-decoration: line-through; }
.data-table tr.is-current td { background: var(--brand-50); }
.data-table tr.is-muted td { color: var(--text-muted); font-style: italic; }

.variance-over  { color: #dc2626; font-weight: 600; }
.variance-under { color: #16a34a; }

.table-action {
  padding: 0.2rem 0.45rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--brand-500);
}
.table-action:hover { background: var(--brand-50); color: var(--brand-600); }
.table-action.is-danger { color: #dc2626; }
.table-action.is-danger:hover { background: #fef2f2; color: #b91c1c; }

/* ---------- Daily logs + Ask Gemini ---------- */
.ask-panel { border-color: #bfdbfe; }
.ask-badge {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.375rem;
  background: var(--brand-50);
  color: var(--brand-500);
  font-size: 0.85rem;
}
.ask-answer {
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  color: var(--heading);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
}
.ask-answer .ask-q { margin-bottom: 0.4rem; font-size: 0.75rem; color: var(--text-muted); white-space: normal; }
/* The question, with the Georgian / English toggle beside it. */
.ask-answer .ask-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  white-space: normal; /* the box is pre-wrap for the answer itself */
}
.ask-answer .ask-head .ask-q { margin-bottom: 0; }
.ask-langs { display: flex; flex-shrink: 0; gap: 0.25rem; }
.ask-lang {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--text);
  background: #fff;
  white-space: nowrap;
}
.ask-lang:hover { border-color: var(--brand-500); color: var(--brand-500); }
.ask-lang.is-active {
  background: var(--brand-50);
  border-color: var(--brand-500);
  color: var(--brand-600);
}

.log-card {
  padding: 1rem 1.1rem;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.log-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
.log-card-date { font-weight: 600; color: var(--heading); }
.log-card-meta { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); }
.log-card-actions { display: flex; gap: 0.25rem; white-space: nowrap; }
.log-card-crew { margin-bottom: 0.6rem; font-size: 0.75rem; color: var(--text-muted); }
/* A delay that was running this day - the crew above is the evidence for it. */
.log-card-delays { margin-bottom: 0.6rem; font-size: 0.75rem; color: #b45309; }
.log-card-defects { margin-bottom: 0.6rem; font-size: 0.75rem; color: #475569; }
.log-card-defects span:first-child { font-weight: 600; }

/* ---------- A finish pushed out by delays, on the timetable ---------- */
/* The promised date stays readable but struck through; the one the item is now
   held to sits under it, with the days it gained. */
.finish-was { display: block; font-size: 0.75rem; color: var(--text-muted); text-decoration: line-through; }
.finish-extended { display: block; color: #0369a1; cursor: help; }
.finish-ext-days {
  margin-left: 0.25rem; padding: 0 0.35rem; border-radius: 999px;
  background: #e0f2fe; font-size: 0.6875rem; font-weight: 600;
}

/* ---------- Work a delay held up, on the delay form ---------- */
/* Scrolls once there are more items than fit, so the rest of the form stays reachable. */
.impact-list {
  max-height: 13rem; overflow-y: auto;
  border: 1px solid var(--ink-700); border-radius: 0.375rem;
  background: var(--ink-850);
}
.impact-row {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.45rem 0.625rem;
  border-bottom: 1px solid var(--ink-700);
}
.impact-row:last-child { border-bottom: 0; }
.impact-row input[type="checkbox"] { flex: none; accent-color: var(--brand-500); }
.impact-row-name { min-width: 0; flex: 1; font-size: 0.8125rem; color: var(--heading); }
.impact-row-who { display: block; font-size: 0.6875rem; color: var(--text-muted); }
.impact-list .empty-state { border: 0; }

/* Open / closed, on the safety register */
.chip-ok, .chip-open {
  display: inline-block; padding: 0.1rem 0.5rem;
  border-radius: 999px; font-size: 0.6875rem; font-weight: 600;
}
.chip-ok { background: #dcfce7; color: #15803d; }
.chip-open { background: #fef3c7; color: #b45309; }

/* ---------- Site photos ---------- */
.photo-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.photo-tile { position: relative; width: 84px; height: 84px; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; }
.photo-drop {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; line-height: 18px;
  border-radius: 999px; border: 1px solid var(--ink-700);
  background: #fff; color: var(--heading); font-size: 14px;
}
.photo-drop:hover { background: #dc2626; color: #fff; }
.photo-add {
  display: inline-block; padding: 0.4rem 0.75rem;
  border: 1px dashed #cbd5e1; border-radius: 0.375rem;
  font-size: 0.8125rem; color: var(--text); cursor: pointer; background: #fff;
}
.photo-add:hover { border-color: var(--brand-500); color: var(--brand-500); }
.photo-strip { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.6rem; }
.photo-thumb { width: 64px; height: 64px; border-radius: 0.375rem; overflow: hidden; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb:hover { outline: 2px solid var(--brand-500); }

/* The photo viewer stays dark: pictures read best on black. */
.modal-photo { width: min(60rem, calc(100vw - 2rem)); padding: 0; background: #0f172a; border-color: #0f172a; }
.photo-view { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem 1rem; }
.photo-view img { max-width: 100%; max-height: calc(100vh - 10rem); border-radius: 0.375rem; }
.photo-view .modal-close { position: absolute; top: 0.5rem; right: 0.75rem; z-index: 1; color: #cbd5e1; }
.photo-view .modal-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.photo-view-note { margin-top: 0.5rem; font-size: 0.75rem; color: #94a3b8; }
.photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 0.25rem 0.75rem; border-radius: 0.375rem;
  background: rgba(15, 23, 42, 0.7); color: #e2e8f0; font-size: 1.75rem; line-height: 1;
}
.photo-prev { left: 0.5rem; }
.photo-next { right: 0.5rem; }
.photo-nav:hover { background: rgba(30, 41, 59, 0.95); }
.log-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.log-notes p { white-space: pre-wrap; font-size: 0.85rem; color: var(--text); }
.log-notes .log-lang { display: block; margin-bottom: 0.2rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-500); }
@media (max-width: 639px) { .log-notes { grid-template-columns: 1fr; } }

/* ---------- Projects list ---------- */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}
.project-card {
  position: relative;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.project-card:hover { border-color: #93c5fd; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); transform: translateY(-2px); }
.project-card.is-active { border-color: var(--brand-500); }
.project-card-open {
  display: block;
  width: 100%;
  padding: 1.25rem;
  text-align: left;
  border-radius: inherit;
}
.project-card-delete {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}
.project-card:hover .project-card-delete,
.project-card-delete:focus-visible { opacity: 1; }
.project-card-delete:hover { background: #fef2f2; color: #dc2626; }
@media (hover: none) { .project-card-delete { opacity: 1; } }

.project-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}
.project-stats dt { font-size: 0.7rem; color: var(--text-muted); }
.project-stats dd { font-size: 1rem; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.project-stats dd.is-alert { color: #dc2626; }

/* ---------- Modals (native <dialog>) ---------- */
.modal {
  width: min(48rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  margin: auto;
  background: var(--ink-900);
  color: var(--text);
  border: 1px solid var(--ink-700);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}
.modal-sm { width: min(24rem, calc(100vw - 2rem)); }
.modal-wide { width: min(72rem, calc(100vw - 2rem)); }
.modal::backdrop { background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(2px); }
/* Sign-in: solid backdrop so nothing behind it shows */
#modal-login::backdrop, #modal-set-password::backdrop { background: #fafafa; backdrop-filter: none; } /* literal: older browsers don't pass CSS variables into ::backdrop */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ink-700);
}
.modal-header h2 { font-size: 1.05rem; font-weight: 600; color: var(--heading); }
.modal-body { padding: 1.25rem; max-height: 65vh; overflow-y: auto; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ink-700);
  background: var(--ink-850);
  border-radius: 0 0 0.5rem 0.5rem;
}
.modal-close {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
}
.modal-close:hover { background: var(--ink-800); color: var(--heading); }

.form-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--heading);
}
.check-row input { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--brand-500); flex-shrink: 0; }
.check-row small { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: var(--text-muted); }
.form-error {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
}
.input-dark::placeholder { color: #94a3b8; }
textarea.input-dark { resize: vertical; }
.select-dark:disabled { opacity: 0.6; }

/* ---------- Who is signed in: the name on its line, the role under it ---------- */
.signed-in { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; max-width: 100%; vertical-align: middle; }
.signed-in-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-tag { max-width: 100%; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.role-tag.is-admin { background: var(--brand-50); color: var(--brand-600); }
.role-tag.is-manager { background: #ecfdf5; color: #047857; }
.role-tag.is-viewer { background: var(--ink-800); color: #475569; }

/* ---------- Users & access ---------- */
/* What each role may do, with how many accounts have it. */
.role-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.role-card {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.85rem 1rem; border: 1px solid var(--ink-700); border-radius: 0.5rem; background: var(--ink-900);
}
.role-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; flex-shrink: 0; }
.role-icon svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.role-card.is-admin .role-icon { background: var(--brand-50); color: var(--brand-600); }
.role-card.is-manager .role-icon { background: #ecfdf5; color: #047857; }
.role-card.is-viewer .role-icon { background: var(--ink-800); color: #475569; }
.role-name { font-size: 0.875rem; font-weight: 600; color: var(--heading); }
.role-what { margin-top: 0.15rem; font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); }
.role-count { margin-left: auto; padding-left: 0.25rem; font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: var(--heading); font-variant-numeric: tabular-nums; }

.access-toolbar { display: flex; align-items: center; gap: 0.75rem; }
.access-toolbar .input-dark { flex: 1; min-width: 0; }

/* One account to a card: who, the role switch and its buttons, then its projects. */
.access-card { padding: 1rem; border: 1px solid var(--ink-700); border-radius: 0.5rem; background: var(--ink-900); }
.access-card.is-admin { border-color: #bfdbfe; background: linear-gradient(180deg, #f8fbff, #fff); }
.access-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.avatar {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; flex-shrink: 0;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
  background: hsl(var(--hue, 215) 80% 93%); color: hsl(var(--hue, 215) 55% 30%);
}
.access-who { flex: 1 1 14rem; min-width: 0; }
.access-name { font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-meta { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-meta .is-warn { color: #b45309; }
.access-actions { display: flex; gap: 0.15rem; }
.role-badge {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-600); font-size: 0.8rem; font-weight: 600;
}
.role-badge svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }

/* A two-way switch (the role): the chosen side lifts out of the track. */
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--ink-700); border-radius: 0.5rem; background: var(--ink-800); }
.seg button {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 0.375rem;
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.seg button svg { width: 0.95rem; height: 0.95rem; fill: currentColor; flex-shrink: 0; }
.seg button:hover:not([aria-pressed="true"]):not(:disabled) { color: var(--heading); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--heading); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05); }
.seg button[data-role="manager"][aria-pressed="true"] { color: #047857; }
.seg button:disabled { opacity: 0.5; cursor: not-allowed; }

.icon-btn { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.375rem; color: var(--text-muted); transition: background-color 0.15s, color 0.15s; }
.icon-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.icon-btn:hover { background: var(--brand-50); color: var(--brand-600); }
.icon-btn.is-danger:hover { background: #fef2f2; color: #b91c1c; }

.access-projects { margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px dashed var(--ink-700); }
.access-projects-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; font-size: 0.75rem; }
.access-projects-title { font-weight: 600; color: var(--heading); }
.access-projects-count { padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--ink-800); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.access-projects-count.is-zero { background: #fef3c7; color: #b45309; }
.link-btn { font-size: 0.75rem; font-weight: 600; color: var(--brand-500); }

/* The master admin's home: one folder per company (renderCompanyFolders) */
.company-folder { position: relative; display: flex; flex-direction: column; gap: 0.6rem; text-align: left; width: 100%;
                  padding: 1.25rem; border-radius: 0.9rem; background: var(--ink-900); border: 1px solid var(--ink-700);
                  transition: border-color .15s, box-shadow .15s, transform .15s; }
.company-folder:hover { border-color: #e8541a; box-shadow: 0 10px 30px -18px rgba(232,84,26,.7); transform: translateY(-2px); }
.company-folder .folder-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.7rem; display: grid; place-items: center;
                               background: rgba(232,84,26,.12); color: #e8541a; }
.company-folder .folder-icon svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.company-folder .folder-name { font-size: 1.05rem; font-weight: 600; color: var(--heading, #0f172a); }
.company-folder .folder-meta { font-size: 0.8rem; color: #64758b; }
.company-folder .folder-status { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; }
.company-folder .folder-status.is-active { background: #dcfce7; color: #15803d; }
.company-folder .folder-status.is-trial { background: #fef3c7; color: #b45309; }
.company-folder .folder-status.is-suspended { background: #fee2e2; color: #b91c1c; }
.company-folder.is-new { border-style: dashed; align-items: center; justify-content: center; color: #64758b; min-height: 9rem; }
.company-folder.is-new:hover { color: #e8541a; }
.link-btn:hover { color: var(--brand-600); text-decoration: underline; }

/* A project an account can open: tap to give it, tap again to take it back. */
.chip-toggles { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem; border: 1px solid var(--ink-700); border-radius: 999px;
  background: #fff; font-size: 0.8rem; color: var(--text);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.chip-toggle svg { width: 0.9rem; height: 0.9rem; fill: currentColor; flex-shrink: 0; opacity: 0.4; }
.chip-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-toggle small { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
.chip-toggle:hover { border-color: var(--brand-500); }
.chip-toggle[aria-pressed="true"] { border-color: #93c5fd; background: var(--brand-50); color: var(--brand-600); font-weight: 600; }
.chip-toggle[aria-pressed="true"] svg { opacity: 1; }
.chip-toggle[aria-pressed="true"] small { color: #3b82f6; font-weight: 400; }
.access-note { margin-top: 0.6rem; font-size: 0.75rem; color: var(--text-muted); }

/* Sees money, Every project: switches that light up when on. */
.access-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.access-legend-note { font-size: 0.75rem; color: var(--text-muted); }
.flag-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border: 1px dashed var(--ink-700); border-radius: 0.375rem; background: #fff;
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.flag-toggle svg { width: 0.95rem; height: 0.95rem; fill: currentColor; flex-shrink: 0; }
.flag-toggle:hover:not(:disabled) { border-color: var(--brand-500); color: var(--heading); }
.flag-toggle[aria-pressed="true"] { border-style: solid; border-color: #fcd34d; background: #fffbeb; color: #b45309; }
.flag-toggle[data-access-flag="all_projects"][aria-pressed="true"] { border-color: #a5b4fc; background: #eef2ff; color: #4338ca; }
.flag-toggle:disabled { opacity: 0.5; cursor: not-allowed; }

/* Logs waiting for the administrator: the banner over the list, the tag on each, the count on a project card. */
.log-inbox {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.9rem; border: 1px solid #fde68a; border-radius: 0.5rem; background: #fffbeb;
  font-size: 0.85rem; color: #92400e;
}
.log-tag { padding: 0.05rem 0.5rem; border-radius: 999px; background: #fef3c7; color: #b45309; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.project-card-inbox { margin-top: 0.6rem; font-size: 0.75rem; font-weight: 600; color: #b45309; }
.access-note.is-warn { color: #b45309; }

@media (max-width: 767px) {
  .role-legend { grid-template-columns: 1fr; gap: 0.5rem; }
  .role-card { padding: 0.7rem 0.85rem; }
}
/* A phone: the name and the buttons on one line, the role switch (or the
   administrator's badge, under the name) on the line below. */
@media (max-width: 639px) {
  .access-who { flex: 1 1 8rem; }
  .access-actions { order: 2; }
  .access-head .seg { order: 3; width: 100%; }
  .access-head .seg button { flex: 1; justify-content: center; }
  .access-head .role-badge { order: 3; margin-left: 3.25rem; }
}

/* ---------- Toasts ---------- */
.toast {
  max-width: 24rem;
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  color: var(--heading);
  background: #fff;
  border: 1px solid var(--ink-700);
  border-left: 3px solid #64748b;
  border-radius: 0.375rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  animation: toast-in 0.2s ease-out;
}
.toast-success { border-left-color: #16a34a; }
.toast-error   { border-left-color: #dc2626; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- PDF export (light, print-friendly) ---------- */
/* html2canvas finds where text sits on its line by setting a 1px image beside
   a sample of it, in a hidden div of its own at the end of <body>. Tailwind
   makes every image a block, which drops that one to the next line - so every
   line of text in a render came out a few pixels low, off its chips and badges.
   Kept inline, it measures the baseline it is meant to. */
body > div[style*="visibility: hidden"] > img { display: inline !important; }


.pdf-offscreen {
  position: fixed;
  top: 0;
  left: -10000px;
  pointer-events: none;
}

.pdf-page {
  width: 718px; /* A4 (794px @ 96dpi) minus 10mm side margins */
  background: #fff;
  color: #0f172a;
  font-family: 'Inter', 'Noto Sans Georgian', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
/* English line under each Georgian label */
.pdf-page em { font-style: normal; font-weight: 400; color: #64748b; }
.pdf-page th em,
.pdf-facts span em { display: block; font-size: 0.85em; }
.pdf-page h2 em { font-size: 0.85em; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.pdf-summary-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pdf-lang {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #b45309;
}
.pdf-page h1 { font-size: 22px; font-weight: 700; color: #0f172a; line-height: 1.35; }
.pdf-page h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #0f172a;
  margin-bottom: 8px;
}
.pdf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid #f59e0b;
}
.pdf-header > div:first-child { min-width: 0; }
.pdf-header-date { text-align: right; flex: none; }
.pdf-header-date [data-field="date-ka"],
.pdf-header-date [data-field="date-en"] { white-space: nowrap; }
.pdf-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #b45309;
}
.pdf-muted  { color: #64748b; }
.pdf-strong { font-weight: 700; }
/* A trade listed under the contractor who brought it. */
.pdf-indent { color: #475569; font-size: 0.95em; }

.pdf-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.pdf-facts > div {
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.pdf-facts span { display: block; font-size: 10px; color: #64748b; }
.pdf-facts strong { display: block; font-size: 14px; color: #0f172a; }

.pdf-section { margin-top: 18px; }
.pdf-note { margin-top: 6px; font-size: 10px; font-style: italic; color: #64748b; }
.pdf-notes { white-space: pre-wrap; }

.pdf-page table { width: 100%; border-collapse: collapse; font-size: 11px; }
/* Every cell sits in the middle of its row and centred across it, prose and
   figures included: a short entry next to a long one no longer hangs from the
   top of a tall row. */
.pdf-page th, .pdf-page td {
  border: 1px solid #cbd5e1;
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}
.pdf-page th { background: #f1f5f9; font-weight: 600; }
/* Figures keep tabular digits so they stay the same width down the column. */
.pdf-page .num { font-variant-numeric: tabular-nums; }
.pdf-page .pdf-empty { color: #64748b; font-style: italic; text-align: center; }
.pdf-page tr.pdf-group-row td { background: #f1f5f9; font-weight: 700; color: #0f172a; }
.pdf-page .pdf-bi { white-space: pre-line; }

/* Photos sit in a table, two to a row: the row is the unit that stays whole
   across a page break.
   Each photo keeps its own proportions and is never cropped. The frame used to
   be a fixed height that cropped the overflow, but html2canvas does not clip
   reliably, so the full-height picture spilled over the one beneath it. Half a
   column wide, a landscape shot comes out about 230px tall, which is the size
   these were drawn at anyway. */
/* The gap between rows is cell padding, not border-spacing: html2canvas draws
   the one and quietly ignores the other, which left the rows touching. */
.pdf-photos { width: 100%; border-collapse: collapse; }
.pdf-photos td { width: 50%; padding: 0 0 14px; border: 0; vertical-align: top; }
.pdf-photos td + td { padding-left: 14px; }
.pdf-photos td > div { border-radius: 4px; line-height: 0; text-align: center; }
/* A photo is fitted inside the column and a fixed height, never cropped or
   stretched: both bounds are maximums, so the picture keeps its own shape and
   gives way on whichever side runs out first. The height cap is what makes the
   gaps even - without it a row is as tall as its taller photo, and the shorter
   one leaves slack beneath it while the other pair almost touch. A landscape
   shot fills the height exactly, which is the normal case here. */
.pdf-photos img {
  display: inline-block;
  max-width: 100%;
  max-height: 230px;
  width: auto;
  height: auto;
  border-radius: 4px;
}
/* A heading stays with the photos (or the table) it introduces, and is never
   sliced through the middle - half a line of Georgian reads as other letters. */
.pdf-page h2, .pdf-page h3 {
  page-break-after: avoid; break-after: avoid;
  page-break-inside: avoid; break-inside: avoid;
}
.pdf-page tr, .pdf-page td, .pdf-page th { page-break-inside: avoid; break-inside: avoid; }

/* ---------- Document sign-off (all generated documents) ---------- */
.doc-signature {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  width: 60%;
}
.doc-signature-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #b45309;
}
.doc-signature-name { margin-top: 4px; font-size: 14px; font-weight: 700; color: #0f172a; }
/* The job title is long enough in Georgian that the English cannot follow it
   on the same line, so it sits underneath - one language to a line, unbroken. */
.doc-signature-title { font-size: 11.5px; color: #334155; white-space: nowrap; }
.doc-signature-title-en { font-size: 11px; color: #64748b; white-space: nowrap; }
.doc-signature-name span,
.doc-signature-title span { font-weight: 400; color: #64748b; }
/* The signature sits on the line, not above it. The mark is in normal flow, so
   it can never spill into the title however tall it is; the negative margin
   beneath pulls the line up under the ink, the way a pen crosses it. */
.doc-signature-sign { width: 220px; margin-top: 16px; }
.doc-signature-mark {
  display: block;
  width: 130px;
  height: auto;
  /* The writing sits in the top third of the image and the rest is the tail of
     the last stroke. Drawn 130px wide the image is ~85px tall, and the writing
     rests at about 30px from its top - so the rule is pulled up to meet it and
     the pen appears to have been put to the line. The tail carries on below,
     the way a descender does. */
  margin: 0 0 -55px 8px;
}
.doc-signature-line {
  padding-top: 4px;
  border-top: 1px solid #94a3b8;
  font-size: 10px;
  color: #64748b;
}
/* Two side by side (the daily report: who wrote the log, who approves it). */
.doc-signatures {
  display: flex;
  gap: 40px;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.doc-signatures .doc-signature { flex: 1 1 0; width: auto; margin: 0; padding: 0; border: 0; }

/* ---------- Project report (bilingual, print-ready) ---------- */
/* The report is never shown on screen: it is built off-screen and saved. */

.rpt { font-size: 11.5px; }
.rpt em { font-style: normal; font-weight: 400; color: #64748b; margin-left: 3px; }
.rpt th em { display: block; font-size: 0.85em; margin-left: 0; }
.rpt h2 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
  font-size: 13px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}
.rpt h2 em { font-size: 0.85em; margin-left: 4px; }
.rpt-section { margin-top: 22px; }
.rpt-muted { color: #64748b; }
.rpt-neg { color: #be123c; font-weight: 600; } /* a loss, in red */
.rpt-strong { font-weight: 700; }
.rpt-none { color: #94a3b8; font-style: italic; }
.rpt-none em { display: inline; margin-left: 4px; }

.rpt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  border-bottom: 4px solid #f59e0b;
}
.rpt-header h1 { color: #fff; font-size: 24px; margin: 2px 0; }
.rpt-header .rpt-muted { color: #cbd5e1; }
.rpt-header-date { text-align: right; }
.rpt-client { margin-top: 4px; color: #fde68a; font-size: 11px; }
.rpt-client strong { color: #fff; }
/* The English spelling sits under the Georgian one, so a long client name
   breaks between languages instead of mid-word. */
.rpt-client-en { display: block; color: #fff; font-weight: 600; }
.rpt-currency { margin-top: 3px; color: #cbd5e1; font-size: 10.5px; }
.rpt-currency em { color: #94a3b8; margin-left: 4px; }
.pdf-client { margin-top: 2px; font-weight: 600; color: #334155; }
.pdf-client:empty { display: none; }
.rpt-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fbbf24;
}

.rpt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rpt-tiles-4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
/* The manpower chart with its average beside it, the day's logs underneath. */
.rpt-activity {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}
.rpt-activity .rpt-columns { margin: 0; }
.rpt-activity .rpt-tile { margin: 0; }
.rpt-tile {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #94a3b8;
  border-radius: 6px;
  background: #f8fafc;
}
.rpt-tile span { display: block; font-size: 10px; color: #475569; }
.rpt-tile span em { display: block; margin-left: 0; }
.rpt-tile strong { display: block; margin-top: 2px; font-size: 18px; color: #0f172a; }
.rpt-tile small { display: block; margin-top: 2px; font-size: 10px; color: #64748b; }
.rpt-tile small em { margin-left: 2px; }
.rpt-tile-ok  { border-left-color: #059669; }
.rpt-tile-bad { border-left-color: #e11d48; }
.rpt-tile-bad strong { color: #be123c; }
.rpt-tile-warn { border-left-color: #d97706; }
.rpt-tile-muted { border-left-color: #94a3b8; }
.rpt-tile-muted strong { color: #64748b; }
/* A figure that is short of where it should be, and the note under a table. */
.rpt-late { color: #be123c; font-weight: 700; }
.rpt-block { display: block; margin-left: 0; }
.rpt-foot-note { margin-top: 6px; color: #64748b; font-size: 10px; }
.rpt-foot-note em { margin-left: 4px; }


.rpt-chip {
  display: inline-block;
  text-align: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  /* Each language stays on its own line: a count must not leave its unit. */
  white-space: nowrap;
}
.rpt th { white-space: normal; }
/* A heading row inside a table: the room the lines under it belong to. */
.rpt tr.rpt-group-row td { background: #f1f5f9; font-weight: 700; color: #0f172a; }
.rpt-ok   { background: #d1fae5; color: #047857; }
.rpt-bad   { background: #ffe4e6; color: #be123c; }
.rpt-warn  { background: #fef3c7; color: #b45309; }
.rpt-muted.rpt-chip, .rpt-chip.rpt-muted { background: #f1f5f9; color: #475569; }
/* In a table the column is narrow and some Georgian labels are long, so a chip
   there wraps rather than pushing its way out of the cell. */
.rpt td .rpt-chip { white-space: normal; }

.rpt table { margin-top: 4px; }
.rpt tbody tr:nth-child(even) td { background: #f8fafc; }
.rpt tr.rpt-current td { background: #fffbeb; }
/* A month heading inside a table, above the work due that month. */
.rpt tr.rpt-month-row td { font-weight: 700; background: #eef2f7; border-top: 1px solid #cbd5e1; }
.rpt tr.rpt-month-row.rpt-current td { background: #fef3c7; }
.rpt tr.rpt-month-row em { font-weight: 400; color: #64748b; }
.rpt tfoot td { font-weight: 700; background: #f1f5f9; }
.rpt td em { margin-left: 3px; }

.rpt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.rpt-log { padding: 10px 12px; margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 6px; }
.rpt-log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.rpt-log-meta { margin-left: auto; color: #475569; }
.rpt-log-meta em { margin-left: 3px; }
.rpt-crew { margin-bottom: 6px; font-size: 10.5px; }
.rpt-notes { white-space: pre-wrap; }
.rpt-notes-en { color: #475569; }

/* Report palette: plan = slate, done = green, active = blue, paid = amber, overdue = rose */
.rpt-info { background: #dbeafe; color: #1d4ed8; }
.rpt-dark { background: #1e293b; color: #fff; }

/* Section heading with a right-hand note */
.rpt-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  border-bottom: 2px solid #0f172a;
}
.rpt .rpt-h h2 { margin: 0; padding-bottom: 7px; border: 0; font-size: 14px; line-height: 1.5; }
.rpt-h-note { font-size: 10.5px; font-weight: 600; color: #475569; }
.rpt-sub-h { margin: 16px 0 6px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.rpt h2, .rpt h3, .rpt .rpt-h, .rpt .rpt-sub-h { page-break-after: avoid; break-after: avoid; }
/* Nothing here may be cut through the middle by a page break: a heading sliced
   halfway down the line renders as a different Georgian word entirely. */
.rpt h2, .rpt h3, .rpt .rpt-h, .rpt .rpt-sub-h, .rpt p, .rpt .rpt-legend,
.rpt .rpt-tile, .rpt .rpt-panel, .rpt tr, .rpt td, .rpt th, .rpt .rpt-chart {
  page-break-inside: avoid;
  break-inside: avoid;
}
.rpt-sub-h em { margin-left: 4px; }

/* Header */
.rpt-header { display: block; padding: 20px 22px 16px; }
.rpt-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rpt-header-top > div:first-child { flex: 1 1 auto; min-width: 0; }
.rpt-header-date { flex: 0 0 auto; }
.rpt-header h1 { font-size: 26px; letter-spacing: -0.01em; }
.rpt-h1-en { margin-top: -2px; font-size: 15px; font-weight: 600; color: #e2e8f0; }
.rpt-sub { color: #cbd5e1; }
.rpt-verdict {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.rpt-verdict-ok { background: #059669; color: #fff; }
.rpt-verdict-bad { background: #e11d48; color: #fff; }
.rpt-verdict-muted { background: #475569; color: #fff; }
.rpt-verdict-warn { background: #d97706; color: #fff; }

.rpt-strip { margin-top: 16px; }
.rpt-strip em { color: #94a3b8; }
.rpt-strip-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: #cbd5e1; }
.rpt-strip-ends strong { color: #fff; margin-left: 3px; }
.rpt-strip-late { color: #fda4af !important; }
.rpt-strip-track {
  position: relative;
  height: 14px;
  margin: 6px 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.rpt-strip-time { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: rgba(245, 158, 11, 0.75); }
.rpt-strip-work { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: #34d399; }
.rpt-strip-today { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #fff; }
.rpt-strip-today span {
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}
.rpt-strip-legend { margin-top: 14px; font-size: 10px; color: #cbd5e1; }
.rpt-strip-legend strong { color: #fff; margin-left: 2px; }
.rpt-dot { margin: 0 6px; color: #64748b; }

/* At a glance */
.rpt-glance { display: grid; grid-template-columns: 340px 1fr; gap: 12px; align-items: stretch; }
.rpt-ring-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.rpt-ring { flex-shrink: 0; }
.rpt-ring-legend { flex: 1; min-width: 0; }
.rpt-ring-legend p { display: flex; align-items: center; gap: 4px; margin: 4px 0; font-size: 10.5px; line-height: 1.25; }
.rpt-ring-legend p > span em { display: block; }
.rpt-ring-legend strong { font-size: 13px; }
.rpt-ring-legend em { margin-left: 0; }
.rpt-ring-legend strong { margin-left: auto; }
.rpt-ring-legend p.rpt-gap { display: block; margin-top: 8px; font-weight: 700; color: #0f172a; }
.rpt-gap em { margin-left: 3px; }
.rpt-tiles-2 { grid-template-columns: 1fr 1fr; }

/* Colour swatches used in legends (always next to a text label) */
.rpt-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; margin-right: 4px; }
.rpt-sw-round { border-radius: 999px; }
.rpt-sw-ok { background: #059669; }
.rpt-sw-plan { background: #64748b; }
.rpt-sw-plan-light { background: #cbd5e1; }
.rpt-sw-info { background: #3b82f6; }
.rpt-sw-bad { background: #e11d48; }
.rpt-sw-warn { background: #f59e0b; }
.rpt-sw-muted { background: #cbd5e1; }
.rpt-sw-dark { background: #1e293b; }

/* Every room, by floor: the colour is the status, the number is the room. */
.rpt-rooms { margin-top: 8px; }
.rpt-room-block + .rpt-room-block { margin-top: 8px; }
.rpt-room-block-name { font-size: 10px; font-weight: 700; color: #334155; margin-bottom: 2px; }
.rpt-room-block-name em { color: #64748b; margin-left: 3px; }
.rpt-room-floor { display: flex; gap: 6px; padding: 3px 0; border-top: 1px solid #f1f5f9; }
.rpt-room-floor:first-child { border-top: 0; }
.rpt-room-floor-name {
  flex: 0 0 62px;
  padding-top: 2px;
  font-size: 9px;
  color: #475569;
  text-align: right;
}
.rpt-room-floor-name em { display: block; margin-left: 0; font-size: 8.5px; color: #94a3b8; }
.rpt-room-list { display: flex; flex-wrap: wrap; gap: 3px; }
.rpt-room {
  display: inline-block;
  min-width: 20px;
  padding: 2px 3px;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: #334155;
  background: #f8fafc;
}
.rpt-room-muted { background: #f8fafc; color: #64748b; }
/* A room with work recorded in it: a dot in its corner (the room's pop-up in
   the interactive report lists the work). */
.rpt-room-has-work { position: relative; }
.rpt-room-has-work::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 5px; height: 5px; border-radius: 999px; background: #2563eb; border: 1px solid #fff;
}
.rpt-room-key { min-width: 12px; height: 10px; padding: 0; vertical-align: middle; }
/* Only the interactive (.html) report shows these - the PDF and Word can't be clicked. */
.rpt .rpt-html-only { display: none; }
.rpt-click-note { margin: 6px 0 8px; font-size: 10px; color: #1d4ed8; }
.rpt-click-key { display: block; margin-top: 4px; }
.rpt-pop-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 11px; color: #334155; }
.rpt-pop-notes { margin: 0 0 10px; font-size: 11px; color: #475569; white-space: pre-wrap; }
.rpt-room-info  { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
.rpt-room-ok    { background: #d1fae5; border-color: #a7f3d0; color: #047857; }
.rpt-room-dark  { background: #1e293b; border-color: #1e293b; color: #fff; }
.rpt-sw-fill { background: linear-gradient(90deg, #1e293b 50%, #94a3b8 50%); }
.rpt-sw-line { display: inline-block; width: 14px; height: 0; margin-right: 4px; vertical-align: middle; border-top: 2px solid; }
.rpt-sw-today { border-color: #e11d48; }
.rpt-sw-end { border-color: #0f172a; border-top-style: dashed; }
.rpt-sw-plan-line { border-color: #64748b; border-top-style: dashed; }
.rpt-sw-paid-line { border-color: #f59e0b; }
.rpt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; font-size: 10px; color: #334155; }
.rpt-legend-item { display: inline-flex; align-items: center; }
.rpt-legend em { margin-left: 3px; }

/* Needs attention / next 14 days */
.rpt-panel { padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; }
.rpt-panel h3 { margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.rpt-panel h3 em { margin-left: 4px; }
.rpt-alert-list, .rpt-ahead { margin: 0; padding: 0; list-style: none; }
.rpt-alert-list li { display: flex; gap: 7px; padding: 5px 0; border-top: 1px solid #f1f5f9; font-size: 10.5px; }
.rpt-alert-list li:first-child { border-top: 0; }
.rpt-alert-list b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  font-size: 10px;
  color: #fff;
}
.rpt-alert-bad b { background: #e11d48; }
.rpt-alert-warn b { background: #f59e0b; }
.rpt-alert-list em { display: block; margin-left: 0; }
.rpt-ongoing-note {
  margin: 6px 0 2px;
  padding: 7px 10px;
  border-left: 3px solid #e11d48;
  border-radius: 4px;
  background: #fff1f2;
  color: #be123c;
  font-size: 10.5px;
  font-weight: 600;
}
.rpt-all-good { padding: 8px 10px; border-radius: 6px; background: #ecfdf5; color: #047857; font-weight: 600; }
.rpt-all-good em { color: #059669; margin-left: 4px; }
.rpt-ahead li { display: flex; gap: 8px; padding: 4px 0; border-top: 1px solid #f1f5f9; font-size: 10.5px; }
.rpt-ahead li:first-child { border-top: 0; }
.rpt-ahead-date {
  flex-shrink: 0;
  width: 40px;
  padding: 1px 0;
  border-radius: 4px;
  background: #0f172a;
  color: #fff;
  font-weight: 700;
  text-align: center;
  align-self: flex-start;
}
.rpt-ahead-what em { display: block; margin-left: 0; font-size: 9.5px; }

/* Timeline (Gantt) */
.rpt-gantt { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.rpt-g-row { display: flex; align-items: stretch; border-top: 1px solid #f1f5f9; }
.rpt-g-row:nth-child(odd):not(.rpt-g-head) { background: #fcfdfe; }
.rpt-g-head { border-top: 0; background: #f1f5f9; font-size: 10px; font-weight: 600; }
.rpt-g-label { flex: 0 0 196px; padding: 5px 8px; min-width: 0; }
.rpt-g-label strong { display: block; font-size: 10.5px; line-height: 1.3; }
.rpt-g-label span { display: block; font-size: 9px; color: #64748b; line-height: 1.3; }
.rpt-g-label .rpt-g-en { font-size: 9.5px; color: #334155; }
.rpt-g-head .rpt-g-label em { display: block; margin-left: 0; }
.rpt-g-track { position: relative; flex: 1; min-height: 34px; }
.rpt-g-months { min-height: 30px; }
.rpt-g-month {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 4px 0 0 3px;
  border-left: 1px solid #cbd5e1;
  font-size: 9.5px;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
}
.rpt-g-month em { display: block; margin-left: 0; font-size: 9px; }
.rpt-g-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #eef2f6; }
.rpt-g-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #e11d48; z-index: 2; }
.rpt-g-end { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #0f172a; z-index: 2; }
.rpt-g-bar {
  position: absolute;
  top: 50%;
  height: 14px;
  margin-top: -7px;
  border-radius: 4px;
  overflow: hidden;
  z-index: 1;
}
.rpt-g-fill { height: 100%; }
.rpt-g-done     { background: #6ee7b7; } .rpt-g-done .rpt-g-fill     { background: #059669; }
.rpt-g-active   { background: #bfdbfe; } .rpt-g-active .rpt-g-fill   { background: #2563eb; }
.rpt-g-overdue  { background: #fecdd3; } .rpt-g-overdue .rpt-g-fill  { background: #e11d48; }
.rpt-g-upcoming { background: #e2e8f0; } .rpt-g-upcoming .rpt-g-fill { background: #64748b; }
/* Time a delay added to an item: past the end of its planned bar, in the sky
   blue the timetable uses for an extension. */
.rpt-g-ext {
  position: absolute; top: 50%; height: 14px; margin-top: -7px;
  border-radius: 0 4px 4px 0; background: #7dd3fc; z-index: 1;
}
/* A bar with an extension is one shape with it: rounded at its start and at
   the extension's end, square where the two meet. */
.rpt-g-bar-extended { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rpt-sw-ext { background: #7dd3fc; }
/* The promised finish, where delays have pushed it out, struck through. The
   line is drawn here rather than with text-decoration, which html2canvas puts
   along the top of the digits, where it reads as an overline. */
/* A box of its own, so the line spans the date and not the whole label - and
   specific enough to beat .rpt-g-label span, which makes every span a block. */
.rpt span.rpt-was { position: relative; display: inline-block; font-size: inherit; color: #0f172a; }
.rpt span.rpt-was::after {
  content: ''; position: absolute; left: 0; right: 0; top: 52%;
  border-top: 1px solid #0f172a;
}
.rpt-g-pct { flex: 0 0 108px; padding: 5px 8px 5px 4px; text-align: right; }
.rpt-g-pct strong { display: block; font-size: 11px; }
.rpt-g-head .rpt-g-pct em { display: block; margin-left: 0; }
/* Centred against the bar, so a two-line label never drags the figure up. */
.rpt-g-row:not(.rpt-g-head) .rpt-g-pct {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rpt-g-state { display: block; font-size: 8px; font-weight: 600; line-height: 1.25; color: #64748b; overflow-wrap: normal; }
.rpt-g-state-overdue { color: #be123c; }
.rpt-g-state-done { color: #047857; }
.rpt-g-state-active { color: #1d4ed8; }

/* Charts */
.rpt-chart { margin: 4px 0 10px; padding: 10px 0 0; }
.rpt-chart svg { display: block; }
.rpt-compact { font-size: 10.5px; }
.rpt-compact th, .rpt-compact td { padding: 4px 7px; }
/* The punch list sheet: the defect itself gets the room, read from the left;
   the last column is left empty for whoever checks it to sign. */
.rpt-punch td:nth-child(2), .rpt-punch td:nth-child(3) { text-align: left; }
.rpt-punch th:nth-child(3) { width: 34%; }
.rpt-punch th:last-child { width: 11%; }
/* One NCR to a sheet: the facts as label / value, boxes to write in, and a
   signature block for each side. */
.ncr-facts th { width: 32%; text-align: left; background: #f8fafc; }
.ncr-facts td { text-align: left; }
.ncr-box { min-height: 44px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 4px; }
.ncr-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 6px; }
.ncr-tick span { font-size: 14px; margin-right: 4px; }
.ncr-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.ncr-sign { border: 1px solid #cbd5e1; border-radius: 4px; padding: 8px 10px; }
.ncr-sign p { margin: 0 0 12px; }

/* One delay to a table, headings down the side. Across the top, eight columns
   left each value an eighth of the page, narrower than some of its own words -
   and html2canvas cannot draw a word the browser has had to split: it draws it
   whole, over its neighbour. Down the side, every value has the page's width. */
.rpt-delay { table-layout: fixed; margin-bottom: 8px; }
.rpt-delay th[scope="row"] { width: 120px; }
/* Stripes mark one record from the next in a list; here every row is the same one. */
.rpt .rpt-delay tbody tr:nth-child(even) td { background: none; }

/* Horizontal bars: cost per item, delays per cause */
.rpt-hbars { display: grid; gap: 5px; margin-bottom: 10px; }
.rpt-hbar { display: grid; grid-template-columns: 180px 1fr 150px; align-items: center; gap: 8px; font-size: 10.5px; }
.rpt-hbar-label { line-height: 13px; }
.rpt-hbar-label em { display: block; color: #475569; }
.rpt-hbar-track { height: 14px; }
.rpt-hbar-budget { position: relative; height: 100%; border-radius: 3px; background: #cbd5e1; overflow: visible; }
.rpt-hbar-done { height: 100%; border-radius: 3px; background: #059669; }
.rpt-hbar-paid { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #f59e0b; }
.rpt-hbar-cause { height: 100%; border-radius: 3px; background: #e11d48; }
.rpt-hbar-value { text-align: right; font-weight: 700; }
.rpt-hbar-value em { display: block; margin-left: 0; font-weight: 400; font-size: 9.5px; }
.rpt-hbar-value em em { display: inline; margin-left: 2px; }

/* Contractor cards */
.rpt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rpt-card { padding: 10px 12px; border: 1px solid #e2e8f0; border-top: 3px solid #0f172a; border-radius: 8px; }
.rpt-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
/* The name gives way to the chip, which no longer wraps. */
.rpt-card-head > div:first-child { min-width: 0; }
.rpt-card-head .rpt-chip { flex-shrink: 0; }
.rpt-card-head strong { display: block; font-size: 12px; }
.rpt-card-head .rpt-muted { display: block; font-size: 10px; }
.rpt-segbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #f1f5f9; }
.rpt-segbar-lg { height: 14px; margin-top: 4px; }
.rpt-seg { display: block; height: 100%; }
.rpt-seg-ok { background: #059669; }
.rpt-seg-warn { background: #f59e0b; }
.rpt-seg-bad { background: #e11d48; }
.rpt-seg-muted { background: #cbd5e1; }
.rpt-seg-info { background: #3b82f6; }
.rpt-seg-dark { background: #1e293b; }
.rpt-card-stats { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 6px 0; font-size: 9.5px; color: #334155; }
.rpt-card-stats span { display: inline-flex; align-items: center; }
.rpt-card-stats b { margin-right: 3px; }
.rpt-card-stats em { margin-left: 3px; }
.rpt-card-money { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid #f1f5f9; font-size: 10px; }
/* Each figure: its Georgian label, the English under it, then the figure. Side
   by side on one line the two languages ran into the number and wrapped
   wherever they liked. */
.rpt-card-money em { display: block; margin: 0; }
.rpt-card-value { display: block; margin-top: 2px; }
.rpt-minibar { height: 4px; margin-top: 4px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.rpt-minibar i { display: block; height: 100%; background: #f59e0b; }
.rpt-card-contact { margin-top: 6px; font-size: 9.5px; color: #64748b; }

/* Rooms */
.rpt-type-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rpt-type { padding: 3px 9px; border-radius: 999px; background: #f1f5f9; font-size: 10px; color: #334155; }

/* Manpower columns */
.rpt-columns {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 110px;
  padding: 18px 4px 0;
  border-bottom: 1px solid #cbd5e1;
}
.rpt-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; max-width: 48px; height: 100%; }
.rpt-col-bar { border-radius: 3px 3px 0 0; background: #334155; }
.rpt-col-value { margin-bottom: 2px; text-align: center; font-size: 9.5px; font-weight: 700; }
.rpt-col-label { position: absolute; bottom: -15px; left: 0; right: 0; text-align: center; font-size: 8.5px; color: #64748b; }
.rpt-col-note { margin: 20px 0 10px; font-size: 10px; }
.rpt-col-note em { margin-left: 2px; }

@media print {
  #sidebar, header, #sidebar-overlay { display: none !important; }
  body { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Delays page: bar lists ---------- */
.bar-list { display: grid; gap: 0.55rem; }
.bar-list-row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 3.5rem; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.bar-list-label { color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-list-track { height: 0.6rem; border-radius: 999px; background: var(--ink-700); overflow: hidden; }
.bar-list-fill { display: block; height: 100%; border-radius: 999px; background: #ef4444; }
.bar-list-value { text-align: right; font-weight: 600; color: #dc2626; font-variant-numeric: tabular-nums; }

/* A crew line in the daily log: contractor, trade, headcount, remove. */
.crew-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 5.5rem auto;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 640px) {
  .crew-row { grid-template-columns: 1fr 1fr; }
  .crew-row > :last-child { justify-self: end; }
}

.log-card-work { margin: 0.25rem 0 0.5rem; padding-left: 1rem; list-style: disc; font-size: 0.8rem; color: var(--text); }
.log-card-work li { margin: 0.1rem 0; }
.log-card-work .text-slate-500 { font-size: 0.75rem; }

/* Floor tabs over the room list: one floor at a time instead of a long scroll. */
.floor-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.floor-totals { margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--text-muted); }
.floor-totals b { color: var(--heading); }
.floor-tab {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text);
  background: #fff;
  white-space: nowrap;
}
.floor-tab:hover { border-color: var(--brand-500); color: var(--brand-400); }
.floor-tab.is-active {
  background: var(--brand-50);
  border-color: var(--brand-500);
  color: var(--brand-400);
}

/* View-only accounts: every control that writes is hidden, and the timetable's
   inline fields can be read but not changed. A project manager (body.can-log)
   sees the same, plus New Daily Log - and in its form only the day's text, the
   date and photos: the rest is the administrator's [data-admin-only]. */
body.read-only:not(.can-log) #btn-new-log-page,
body.read-only:not(.can-log) #btn-new-defect,
body.read-only [data-admin-only] { display: none !important; }
/* The project manager's own log, the day it was written and until it is
   processed: Edit comes back (the ID outranks the hide list below), but a
   photo already stored cannot be struck out. */
body.read-only.can-log #daily-logs-container [data-log-edit].is-own { display: inline-block !important; }
body.read-only [data-photo-drop^="kept"] { display: none !important; }
/* Without Sees money: every budget, payment and cost, and the BOQ & Cash Flow page. */
body.no-money [data-money] { display: none !important; }
@media (min-width: 640px) { body.no-money .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The administrator's: logs still waiting to be processed. */
body.read-only #log-inbox { display: none !important; }
body.read-only :is(
  #btn-new-project, #btn-edit-project, #btn-access, .project-card-delete,
  #btn-new-delay, #btn-new-event, #btn-new-variation,
  #btn-add-unit, #btn-rooms-import, #btn-add-task, #btn-import-mpp, #btn-baseline,
  #btn-add-contractor, #btn-add-rental, #btn-add-material, #btn-add-money-in,
  [data-money-in-edit], [data-money-in-delete],
  [data-task-edit], [data-task-delete], [data-unit-edit], [data-unit-delete],
  [data-contractor-edit], [data-contractor-delete], [data-rental-edit], [data-rental-delete],
  [data-material-edit], [data-material-delete], [data-material-paid],
  [data-log-edit], [data-log-delete], [data-delay-edit], [data-delay-delete],
  [data-event-edit], [data-event-delete], [data-variation-edit], [data-variation-delete],
  [data-site-pay], [data-site-pay-delete], [data-payment-delete],
  [data-room-work-edit], [data-room-work-delete], #form-room-work, #form-payment,
  #form-contract, [data-contract-delete],
  /* Nor tools a client has no use for: the rooms' Excel template, the archive
     (the administrator hands it over), and Ask Gemini (each question is paid for). */
  #btn-rooms-template, #archive-block, #form-ask,
  /* Nor the help texts and notes written for whoever fills the project in. */
  .hint, #finance-position, #cash-position
) { display: none !important; }
body.read-only :is([data-task-pct], [data-task-contractor]) { pointer-events: none; opacity: 0.75; }

/* Punch list: the filters over the defects, side by side (stacked on a phone). */
.defect-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.defect-filters select { min-width: 10rem; }
/* An NCR in the list: its number, and how serious it is. */
.ncr-tag { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.ncr-no { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.05rem 0.45rem; border-radius: 0.3rem;
  background: var(--brand-50); color: var(--brand-600); }
.ncr-fields { border-left: 3px solid var(--brand-500, #f59e0b); padding-left: 0.75rem; }
@media (max-width: 639px) { .defect-filters select { flex: 1 1 100%; } }

/* =============================================================
   Phones and tablets
   ============================================================= */

/* ---------- Bottom tab bar: phones and portrait tablets ---------- */
.bottom-nav { display: none; }
@media (max-width: 1023px) {
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--ink-700);
  }
  .bottom-nav a, .bottom-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
    min-height: 3.25rem; border-radius: 0.6rem;
    font-size: 0.68rem; font-weight: 500; color: var(--text-muted); text-decoration: none;
  }
  .bottom-nav svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
  .bottom-nav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav .active { color: var(--brand-500); background: var(--brand-50); font-weight: 600; }
  /* The bar replaces the menu button, and the page scrolls clear of it. */
  #sidebar-toggle { display: none; }
  #main-content { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Top bar on a phone: the essentials only ---------- */
@media (max-width: 639px) {
  #topbar-project-location { display: none; }
  .fx-rate { display: none; }
  .currency-switch button { padding: 0.25rem 0.55rem; }
  .lang-toggle button { padding: 0.25rem 0.5rem; }
  .module-header { flex-wrap: wrap; align-items: flex-start; }
  .module-header > :first-child { flex: 1 1 100%; }
}

/* ---------- Tables become cards on a phone ---------- */
/* Each cell carries its column's heading (js/mobile.js), shown on its left. */
@media (max-width: 639px) {
  .data-table, .data-table tbody, .data-table tfoot, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tbody tr, .data-table tfoot tr {
    margin-bottom: 0.6rem; padding: 0.4rem 0.8rem;
    background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: 0.75rem;
  }
  .data-table tbody tr:hover { background: var(--ink-900); }
  .data-table tfoot tr { background: var(--ink-850); }
  .data-table td, .data-table tfoot td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
    padding: 0.35rem 0; border: 0; text-align: right; white-space: normal;
  }
  .data-table td + td { border-top: 1px dashed var(--ink-800); }
  .data-table td::before {
    content: attr(data-label); flex-shrink: 0; max-width: 45%;
    font-size: 0.72rem; color: var(--text-muted); text-align: left;
  }
  /* A cell with no heading (row buttons, a total's label) takes the whole line. */
  .data-table td[data-label=""]::before, .data-table td:not([data-label])::before { display: none; }
  .data-table td[data-label=""] { justify-content: flex-start; text-align: left; }
  .data-table td[data-label=""]:last-child { justify-content: flex-end; flex-wrap: wrap; }
  .data-table td.task-name { font-size: 0.95rem; }
  .data-table td:empty, .data-table td[data-empty] { display: none; }
  .data-table .num { white-space: normal; }
}

/* ---------- Pop-ups slide up from the bottom on a phone ---------- */
@media (max-width: 639px) {
  dialog.modal:not(.modal-photo):not(.report-preview) {
    width: 100vw; max-width: 100vw; max-height: 94vh;
    margin: auto 0 0; border-radius: 1rem 1rem 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  dialog.modal:not(.modal-photo):not(.report-preview)[open] { animation: sheet-up 0.22s ease-out; }
  .modal-body { max-height: calc(94vh - 8.5rem); }
  .modal-footer { border-radius: 0; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
}
@keyframes sheet-up { from { transform: translateY(2.5rem); opacity: 0.6; } to { transform: none; opacity: 1; } }

/* ---------- Fingers, not a mouse ---------- */
@media (pointer: coarse) {
  .btn { min-height: 2.75rem; }
  .btn-sm { min-height: 2.4rem; }
  .table-action { padding: 0.5rem 0.65rem; font-size: 0.8rem; }
  .nav-link { min-height: 2.75rem; }
  .modal-close { width: 2.75rem; height: 2.75rem; }
  /* 16px keeps iPhone from zooming in on every field it focuses. */
  input, select, textarea { font-size: 16px !important; }
  .input-dark, .select-dark { min-height: 2.75rem; }
  .floor-tab { padding: 0.5rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.modal[open] { animation: none; }
}

/* Until sign-in is known the app is not drawn - just the mark, so no page
   shows for a moment before the sign-in box covers it. */
body.auth-pending #view-projects,
body.auth-pending #view-workspace { visibility: hidden; }
/* While sign-in is being checked, the Unicraft splash (#splash, styled in
   index.html so it shows before this file arrives) covers the page. */

/* ---------- The week at a glance ---------- */
.week-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.week-stats div { padding: 0.6rem 0.75rem; border: 1px solid var(--ink-700); border-radius: 0.6rem; background: var(--ink-850); }
.week-stats b { display: block; font-size: 1.3rem; color: var(--heading); }
.week-stats span { font-size: 0.75rem; color: var(--text-muted); }
.week-list { display: grid; gap: 0.35rem; font-size: 0.85rem; }
.week-list li { line-height: 1.4; }
.latest-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; }
.latest-photos button { display: block; padding: 0; border-radius: 0.5rem; overflow: hidden; background: var(--ink-850); }
.latest-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 639px) { .latest-photos { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Report preview: the whole screen, a bar of actions on top ---------- */
.report-preview {
  width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100vh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: #eef2f6;
}
.report-preview[open] { display: flex; flex-direction: column; }
.report-preview::backdrop { background: rgba(15, 23, 42, 0.5); }
.preview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.6rem 1rem; padding-top: calc(0.6rem + env(safe-area-inset-top));
  background: #fff; border-bottom: 1px solid var(--ink-700);
}
.preview-title { font-weight: 600; color: var(--heading); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
/* An iPhone sizes a frame to its content, not to the screen: held at 1px wide
   with a min-width of 100%, it can only be as wide as its box, and the box
   scrolls. Elsewhere this changes nothing. */
.preview-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
#preview-frame { display: block; width: 1px; min-width: 100%; height: 100%; border: 0; background: #eef2f6; }
.preview-close { flex-shrink: 0; }
@media (max-width: 639px) {
  /* Title and ✕ on the first line, the three actions full width under them. */
  .preview-bar { display: grid; grid-template-columns: 1fr auto; padding: 0.5rem 0.75rem; row-gap: 0.4rem; }
  .preview-title { grid-column: 1; grid-row: 1; font-size: 0.9rem; white-space: normal; }
  .preview-close { grid-column: 2; grid-row: 1; }
  .preview-actions { grid-column: 1 / -1; grid-row: 2; }
  .preview-actions .btn { flex: 1; justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ---------- Phone: cards read as cards ---------- */
@media (max-width: 639px) {
  /* An item's name is its card's title, above everything else. */
  .data-table tbody tr { display: flex; flex-direction: column; }
  .data-table td.task-name {
    order: -1; display: block; text-align: left; font-size: 0.95rem; font-weight: 600;
    padding-bottom: 0.45rem; border-top: 0;
  }
  .data-table td.task-name::before { display: none; }
  .data-table td.task-name + td { border-top: 1px dashed var(--ink-800); }
  /* Big amounts stay on one line: smaller, never broken mid-number. */
  .kpi-value-sm { font-size: 1.15rem; overflow-wrap: normal; white-space: nowrap; }
}
/* A client reads the figures; nothing about them should look like a field to fill in. */
body.read-only .task-pct-input { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
body.read-only .select-contractor { appearance: none; -webkit-appearance: none; border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
@media (max-width: 639px) {
  /* A client's contractor reads in full, not cut to the width of a field. */
  body.read-only .select-contractor { max-width: none; width: auto; text-align: right; text-overflow: clip; }
}

/* A project card's figure that is a word ("Today", "3 days ago"), not a number. */
.project-stats dd.is-text { font-size: 0.85rem; padding-top: 0.15rem; white-space: nowrap; }

/* Date fields: iPhone and Android give them a width of their own, which can
   run past the edge of the box they sit in. */
input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; min-width: 0; max-width: 100%; width: 100%;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }

/* =============================================================
   Unicraft look - the website's black and orange on the app's frame
   The sign-in screens are the website's own; the sidebar, the top bars and
   the phone's bottom bar are black with orange; buttons, links and marks are
   orange. Where people work - tables, forms, reports - stays light, for
   reading dense figures all day and for printing. Nothing here blurs or
   moves continuously, so a phone on site stays quick.
   ============================================================= */
:root {
  --brand-400: #e8541a;
  --brand-500: #e8541a;
  --brand-600: #c2410c;
  --brand-50: #fff1ea;
  --uc-black: #0b0b0e;
  --uc-black-2: #141418;
  --uc-line: rgba(255, 255, 255, 0.08);
  --uc-text: #c9c9d1;
  --uc-muted: #8b8b96;
  --uc-grad: linear-gradient(100deg, #ff7a3d 0%, #e8541a 50%, #f08a3e 100%);
}
.select-dark:focus, .input-dark:focus { box-shadow: 0 0 0 3px rgba(232, 84, 26, 0.18); }

/* Buttons: the website's orange */
.btn { border-radius: 0.55rem; transition: background-color .15s, border-color .15s, opacity .15s, box-shadow .2s, transform .2s; }
.btn-primary { background: var(--uc-grad); color: #fff; box-shadow: 0 6px 18px -8px rgba(232, 84, 26, 0.7); }
.btn-primary:hover:not(:disabled) { background: var(--uc-grad); box-shadow: 0 10px 24px -8px rgba(232, 84, 26, 0.85); transform: translateY(-1px); }
.btn-secondary:hover:not(:disabled) { border-color: #f3b598; }

/* Cards lift a little under the pointer */
.project-card { transition: border-color .2s, box-shadow .2s, transform .2s; }
@media (hover: hover) {
  .project-card:hover { border-color: #f3b598; box-shadow: 0 14px 34px -20px rgba(232, 84, 26, 0.6); transform: translateY(-2px); }
}

/* ---------- The bars: black, with the orange glow of the website ---------- */
.app-bar {
  background: radial-gradient(600px 120px at 90% 0%, rgba(232, 84, 26, 0.22), transparent 70%), var(--uc-black);
  border-bottom: 1px solid var(--uc-line);
  color: var(--uc-text);
}
.app-bar .text-white { color: #fafafa; }
.app-bar .text-slate-500 { color: var(--uc-muted); }
.app-bar .text-slate-400 { color: #a1a1aa; }
.app-bar .hover\:text-white:hover { color: #fff; }
.app-bar .hover\:bg-ink-800:hover { background: rgba(255, 255, 255, 0.06); }
.app-bar .border-ink-700 { border-color: var(--uc-line); }
.app-bar .lang-toggle, .app-bar .currency-switch { border-color: rgba(255, 255, 255, 0.14); }
.app-bar .lang-toggle button, .app-bar .currency-switch button { color: var(--uc-muted); }
.app-bar .lang-toggle button:hover, .app-bar .currency-switch button:hover { color: #fff; }
.app-bar .lang-toggle button.is-active { background: #e8541a; color: #fff; }
.app-bar .currency-switch button.is-active, .app-bar .currency-switch button[aria-pressed="true"] { background: #e8541a; color: #fff; }
.app-bar .fx-rate { border-color: rgba(255, 255, 255, 0.14); color: var(--uc-text); background: transparent; }
.app-bar .fx-rate b { color: #fff; }
.app-bar .select-dark { background-color: var(--uc-black-2); border-color: rgba(255, 255, 255, 0.14); color: #fafafa; }
.app-bar .role-tag.is-admin { background: rgba(232, 84, 26, 0.18); color: #ff9a66; }
.app-bar .role-tag.is-manager { background: rgba(74, 222, 128, 0.14); color: #86efac; }
.app-bar .role-tag.is-viewer { background: rgba(255, 255, 255, 0.08); color: var(--uc-text); }

/* ---------- The sidebar ---------- */
#sidebar { background: var(--uc-black); border-right: 1px solid var(--uc-line); color: var(--uc-text); }
#sidebar .sidebar-brand { border-bottom: 1px solid var(--uc-line);
  background: radial-gradient(260px 90px at 0% 0%, rgba(232, 84, 26, 0.25), transparent 70%); }
#sidebar .border-ink-700 { border-color: var(--uc-line); }
#sidebar .text-slate-500 { color: var(--uc-muted); }
#sidebar .text-slate-400 { color: #a1a1aa; }
#sidebar .hover\:text-white:hover { color: #fff; }
#sidebar .text-white { color: #fafafa; }
#sidebar .nav-link { position: relative; color: #b4b4bd; }
#sidebar .nav-link .nav-icon { color: #71717a; transition: color .15s; }
#sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
#sidebar .nav-link:hover .nav-icon { color: #ff9a66; }
#sidebar .nav-link.active { background: linear-gradient(90deg, rgba(232, 84, 26, 0.22), rgba(232, 84, 26, 0.04)); color: #fff; }
#sidebar .nav-link.active .nav-icon { color: #ff7a3d; }
#sidebar .nav-link.active::before { content: ''; position: absolute; left: -0.75rem; top: 0.35rem; bottom: 0.35rem; width: 3px; border-radius: 0 3px 3px 0; background: #e8541a; }
#sidebar * { scrollbar-color: #3f3f46 transparent; }

/* ---------- The phone's bottom bar ---------- */
@media (max-width: 1023px) {
  .bottom-nav { background: rgba(11, 11, 14, 0.97); backdrop-filter: none; border-top: 1px solid var(--uc-line); }
  .bottom-nav a, .bottom-nav button { color: #8b8b96; }
  .bottom-nav .active { color: #ff7a3d; background: rgba(232, 84, 26, 0.14); }
}

/* ---------- Sign-in and choosing a password: the website ---------- */
#modal-login::backdrop, #modal-set-password::backdrop {
  background:
    radial-gradient(700px circle at 88% 8%, rgba(232, 84, 26, 0.38), transparent 60%),
    radial-gradient(600px circle at 4% 100%, rgba(255, 159, 67, 0.16), transparent 60%),
    url("../../assets/unicraft-mark-faint.svg") no-repeat right -140px center / 640px,
    #0a0a0b;
  backdrop-filter: none;
}
#modal-login, #modal-set-password {
  background: linear-gradient(180deg, #17171b, #111114);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.1rem;
  color: var(--uc-text);
  box-shadow: 0 40px 120px -30px rgba(232, 84, 26, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  width: min(26rem, calc(100vw - 2rem));
}
#modal-login .modal-body, #modal-set-password .modal-body { padding: 1.9rem; }
#modal-login .text-white, #modal-set-password .text-white { color: #fafafa; }
#modal-login h2, #modal-set-password h2 { font-size: 1.35rem; }
#modal-login .text-slate-500, #modal-set-password .text-slate-500 { color: var(--uc-muted); }
#modal-login .text-slate-400 { color: #a1a1aa; }
#modal-login .text-brand-400 { color: #ff7a3d; }
#modal-login a, #modal-login .hover\:underline:hover { color: inherit; }
#modal-login .form-label, #modal-set-password .form-label { color: #d4d4d8; }
#modal-login .input-dark, #modal-set-password .input-dark {
  background: #1c1c21; border-color: rgba(255, 255, 255, 0.12); color: #fafafa; padding: 0.65rem 0.85rem; border-radius: 0.6rem;
}
#modal-login .input-dark::placeholder, #modal-set-password .input-dark::placeholder { color: #6b6b75; }
#modal-login .input-dark:focus, #modal-set-password .input-dark:focus { border-color: #e8541a; box-shadow: 0 0 0 3px rgba(232, 84, 26, 0.25); }
#modal-login .btn-primary, #modal-set-password .btn-primary { padding: 0.8rem 1rem; font-size: 0.95rem; color: #140700; }
#modal-login .text-emerald-400 { color: #4ade80; }
#modal-login .form-error, #modal-set-password .form-error { color: #fca5a5; }
/* The whole card shows - no scroll of its own (other dialogs keep theirs) */
#modal-login .modal-body, #modal-set-password .modal-body { max-height: none; overflow: visible; }
#modal-login, #modal-set-password { overflow-y: auto; }
.auth-form { display: flex; flex-direction: column; gap: 0.85rem; }
.auth-fields { display: flex; flex-direction: column; gap: 0.85rem; }
.auth-fields.hidden { display: none; }
.auth-form .form-label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; }
.auth-title { font-size: 1.35rem; font-weight: 700; color: #fafafa; line-height: 1.3; }
.auth-sub { margin-top: 0.15rem; font-size: 0.88rem; color: var(--uc-muted); line-height: 1.45; }
.auth-links { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.82rem; }
.auth-links button { text-align: left; }
.auth-terms { font-size: 0.75rem; color: var(--uc-muted); text-align: center; line-height: 1.5; }
.auth-terms a { color: #a1a1aa; }
#modal-login input:-webkit-autofill, #modal-set-password input:-webkit-autofill {
  -webkit-text-fill-color: #fafafa; -webkit-box-shadow: 0 0 0 1000px #1c1c21 inset; caret-color: #fafafa;
}
@media (max-width: 639px) {
  #modal-login, #modal-set-password { border-radius: 1.2rem 1.2rem 0 0; width: 100%; }
  #modal-login::backdrop, #modal-set-password::backdrop {
    background:
      radial-gradient(420px circle at 80% 15%, rgba(232, 84, 26, 0.4), transparent 60%),
      url("../../assets/unicraft-mark-faint.svg") no-repeat center 18% / 300px,
      #0a0a0b;
  }
}

/* ---------- Georgian: no capitals, no letter spacing, a little larger ----------
   Small spaced capitals suit English labels; Georgian turned to capitals
   (Mtavruli) and spread out reads broken and tiny. The reports keep their
   own rules (bilingual already). */
html[lang="ka"] .fx-label, html[lang="ka"] .avatar, html[lang="ka"] .ncr-no { letter-spacing: 0; }
html[lang="ka"] .text-xs { font-size: 0.8rem; line-height: 1.15rem; }
html[lang="ka"] .form-label { font-size: 0.85rem; }

/* The sign-in card's top: the logo, and the language switch at its right */
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#modal-login .lang-toggle, #modal-set-password .lang-toggle { border-color: rgba(255, 255, 255, 0.14); }
#modal-login .lang-toggle button, #modal-set-password .lang-toggle button { color: var(--uc-muted); }
#modal-login .lang-toggle button:hover, #modal-set-password .lang-toggle button:hover { color: #fff; }
#modal-login .lang-toggle button.is-active, #modal-set-password .lang-toggle button.is-active { background: #e8541a; color: #fff; }
/* An error on the dark card: dark red, not the light theme's pink */
#modal-login .form-error, #modal-set-password .form-error {
  background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); color: #fca5a5;
}

/* ---------- Users & access: a slim row per person, a panel for one ---------- */
.access-toolbar .select-dark { width: auto; }
.access-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.access-filters:empty { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--ink-700); background: #fff; font-size: 0.8rem; font-weight: 500; color: var(--text); }
.filter-chip b { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.filter-chip:hover { border-color: #f3b598; }
.filter-chip.is-on { background: #e8541a; border-color: #e8541a; color: #fff; }
.filter-chip.is-on b { color: rgba(255, 255, 255, 0.8); }
.filter-chip.is-warn:not(.is-on) { border-color: #fcd34d; background: #fffbeb; color: #b45309; }
.access-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.access-layout.has-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
.access-rows { display: flex; flex-direction: column; border: 1px solid var(--ink-700); border-radius: 0.6rem; background: #fff; overflow: hidden; }
.access-rows > .empty-state { border: 0; }
.access-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 8.5rem 8.5rem 6.5rem 1rem; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.55rem 0.85rem; text-align: left; border-bottom: 1px solid var(--ink-800); background: #fff;
  transition: background-color .12s; }
.access-row:last-child { border-bottom: 0; }
.access-row:hover { background: var(--ink-850); }
.access-row.is-open { background: var(--brand-50); box-shadow: inset 3px 0 0 #e8541a; }
.access-row .avatar { width: 2rem; height: 2rem; font-size: 0.72rem; }
.row-who { display: flex; flex-direction: column; min-width: 0; }
.row-name { font-size: 0.875rem; font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-email { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-chip { justify-self: start; font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.role-chip.is-admin { background: var(--brand-50); color: var(--brand-600); }
.role-chip.is-manager { background: #ecfdf5; color: #047857; }
.role-chip.is-viewer { background: var(--ink-800); color: #475569; }
.row-projects { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text); white-space: nowrap; }
.row-money svg { width: 0.9rem; height: 0.9rem; fill: #047857; }
.row-seen { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; text-align: right; }
.row-seen.is-warn { color: #b45309; font-weight: 600; }
.row-open { width: 1rem; height: 1rem; fill: #94a3b8; }
.access-row.is-open .row-open { fill: #e8541a; }
.access-detail { position: sticky; top: 0; max-height: calc(65vh - 6rem); overflow-y: auto; }
.access-detail .access-card { border-color: var(--ink-700); }
.detail-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.detail-title { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.access-group { border-bottom: 1px solid var(--ink-700); }
.access-group:last-child { border-bottom: 0; }
.access-group > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; cursor: pointer; list-style: none;
  background: var(--ink-850); font-weight: 700; color: var(--heading); position: sticky; top: 0; z-index: 1; }
.access-group > summary::-webkit-details-marker { display: none; }
.access-group > summary::before { content: '›'; color: #e8541a; font-size: 1.1rem; transition: transform .15s; }
.access-group[open] > summary::before { transform: rotate(90deg); }
.group-count { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); background: #fff;
  border: 1px solid var(--ink-700); border-radius: 999px; padding: 0 0.5rem; }
@media (max-width: 767px) {
  .access-row { grid-template-columns: auto minmax(0, 1fr) auto 1rem; }
  .row-projects, .row-seen { display: none; }
  .access-layout.has-detail { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the panel covers the dialog, with its own close button */
  .access-detail:not(.hidden) { position: fixed; inset: 0; z-index: 70; max-height: none; padding: 1rem;
    background: var(--ink-950); overflow-y: auto; }
}
/* Focus on a language switch button is drawn inside it, not clipped at the pill's edge */
.lang-toggle button:focus-visible { outline-offset: -2px; }
/* The role switch fits the panel: three equal buttons, wrapping words on a phone */
.access-detail .seg { display: flex; width: 100%; }
.access-detail .seg button { flex: 1 1 0; justify-content: center; min-width: 0; }
@media (max-width: 767px) {
  .access-detail .seg button { padding: 0.35rem 0.3rem; font-size: 0.72rem; white-space: normal; line-height: 1.2; }
  .access-detail .seg button svg { display: none; }
}