/* gcrm admin-panel theme (story-28-ui-usability-theme).
 * Self-contained, no external CDN dependency for function. Server-rendered
 * (sad.md ADR-2, no build step). UI Russian, identifiers English (AS-6). */

:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --sidebar: #1f2937;
  --sidebar-fg: #e5e7eb;
  --accent: #2563eb;
  --accent-fg: #ffffff;
  --border: #d1d5db;
  --text: #111827;
  --muted: #6b7280;
  --danger: #dc2626;
  --warn: #b45309; /* amber-700: warnings that are not errors (AA on white) */
  --ok: #16a34a;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* App shell: sidebar + topbar + main (admin-panel layout). */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}

.app-shell__sidebar {
  grid-area: sidebar;
  background: var(--sidebar);
  color: var(--sidebar-fg);
  padding: 20px 12px;
}

.app-shell__brand {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px 12px;
  color: #ffffff;
}

.app-shell__nav { display: flex; flex-direction: column; gap: 4px; }

.app-shell__nav a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--sidebar-fg);
}

.app-shell__nav a:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }

.app-shell__nav a.is-active {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

.app-shell__topbar {
  grid-area: topbar;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.app-shell__main {
  grid-area: main;
  padding: 28px;
}

/* Cards + tables. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; }

ul.clients, ul.resources, #packages-list, #clients-list, #resources-list {
  list-style: none; padding: 0; margin: 0;
}
ul.clients li, ul.resources li, #packages-list li,
#clients-list li, #resources-list li {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}

/* Forms + buttons. */
form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }

label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }

input, select {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--text);
  background: #fff;
}

input:focus, select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

button {
  align-self: flex-start;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }

/* Visible keyboard focus on EVERY interactive control (better-accessibility §2).
   A 2px accent ring with a 2px offset so it stays visible even on the accent-
   filled primary buttons (the offset places the ring on the light surface
   around the control). :focus-visible keeps it keyboard-only. */
button:focus-visible,
a:focus-visible,
.row-action:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Searchable combobox popup (better-ui: bordered elevated surface; better-
   accessibility: the active option is visibly highlighted for keyboard use). */
.combobox { position: relative; }
.combobox__options {
  list-style: none;
  margin: 2px 0 0;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--border, #d1d5db);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
.combobox__option { padding: 8px 12px; cursor: pointer; }
.combobox__option:hover,
.combobox__option--active {
  background: var(--accent);
  color: var(--accent-fg);
}
.combobox__empty { padding: 8px 12px; color: #6b7280; }

/* Auth pages: centered card. */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.auth__card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.auth__card form { max-width: none; }
.auth__card h1 { margin-top: 0; }

/* Status + messages. */
.error, [data-testid$="-error"] { color: var(--danger); font-weight: 600; }
.flash { color: var(--ok); font-weight: 600; margin: 12px 0; }
[data-status="paid"] { color: var(--ok); font-weight: 700; }
[data-status="unpaid"] { color: var(--danger); font-weight: 700; }

/* story-30: grouped servers view (Cloud / Robot / Manual sections). */
.servers-freshness {
  margin: 12px 0 20px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted, #6b7280);
  font-size: 0.9rem;
}
.servers-empty {
  margin: 24px 0;
  padding: 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted, #6b7280);
}
.servers-group { margin: 0 0 28px; }
.servers-group__heading {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.servers-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.servers-table th,
.servers-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.servers-table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #6b7280);
}
.servers-table [data-testid="server-cost"] { font-variant-numeric: tabular-nums; }
.server-ip { font-variant-numeric: tabular-nums; font-family: var(--mono, monospace); }
.server-ip-v6 { display: block; color: var(--muted, #6b7280); font-size: 0.85rem; }
.server-status { font-size: 0.85rem; }
.server-attributes dt { font-weight: 600; color: var(--muted, #6b7280); }
.server-attributes dd { margin: 0 0 8px; }
.price-source { color: var(--muted, #6b7280); font-size: 0.85rem; }
.admin-serviced,
.needs-allocation,
.missing { font-size: 0.8rem; }
.needs-allocation { color: var(--danger); font-weight: 600; }
.missing { color: var(--danger); }
.servers-subtotal td {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.02);
  border-bottom: none;
}
.servers-total-section {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 2px solid var(--border);
}
.servers-total__heading { margin: 0 0 8px; font-size: 1.05rem; }
.servers-total-cells { font-weight: 700; font-variant-numeric: tabular-nums; }
.servers-total-cells [data-testid="servers-total"] { margin-right: 16px; }

/* story-35: Hetzner ID, honest price-less notice, row actions. */
.server-hetzner-id { font-variant-numeric: tabular-nums; color: var(--muted, #6b7280); }
/* "цена не задана для N серверов" is a WARNING, not an error — a missing price
 * is a data gap the operator fills, not a failure (craft-review #4). Amber, not
 * danger red, so real errors stay visually distinct. */
.servers-priceless {
  display: inline-block;
  margin-left: 12px;
  color: var(--warn);
  font-weight: 600;
  font-size: 0.85rem;
}
.servers-priceless-total-wrap { margin-top: 8px; }

/* storage-box-fill-indicator: a storage box at >= 90 % fill is flagged amber
 * (warning, not error) — the number still renders, colour is not the only
 * signal. Mirrors the --warn token used by .servers-priceless. */
.disk-fill--warn {
  color: var(--warn);
  font-weight: 600;
}

/* craft-review #5: the server-card mutation controls, grouped in one labelled
 * section with each control a bordered card, so shares / admin-service / sync
 * read as distinct actions rather than a stack of loose forms. */
.server-manage {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #d1d5db);
}
.server-manage__control {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #d1d5db);
  border-radius: var(--radius);
}
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.server-actions { white-space: nowrap; }
.server-actions .server-delete-form {
  display: inline;
  margin: 0 0 0 12px;
  max-width: none;
}
.server-actions .server-delete {
  align-self: auto;
  padding: 4px 10px;
  font-size: 0.85rem;
}
.server-delete-note {
  display: inline-block;
  margin-left: 12px;
  color: var(--muted, #6b7280);
  font-size: 0.8rem;
}

/* craft-review #3 (2026-07-30): a compact "Hetzner" chip replaces the long
 * per-row sentence (the full explanation is a title/aria-label tooltip), so the
 * actions column stays readable across the ~69 synced rows. */
.server-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 999px;
  color: var(--muted, #6b7280);
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: help;
}

/* story-35 slice-2: consistent row actions across the eight sections.
 * The destructive action is DE-EMPHASIZED (a quiet outline/link, §7), the
 * primary/contextual actions stay bright; edit is a plain link. */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
}
.row-actions form,
.row-delete {
  display: inline;
  margin: 0;
  max-width: none;
}

.row-action {
  align-self: auto;
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.row-action:hover { text-decoration: none; }

/* Bright primary / contextual action. */
.row-action--primary {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
}
.row-action--primary:hover { filter: brightness(1.08); }

/* De-emphasized destructive action: a quiet danger-tinted outline, never a
 * bright filled button (back-office §7 — destructive is de-emphasized). */
.row-action--danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--border);
}
.row-action--danger:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: var(--danger);
}
.row-action:focus { outline: 2px solid var(--accent); }

/* story-36 slice-1: clients CRUD-by-standard (list table, filters, badges,
 * empty state, pagination, inline field error). */
.list-filters {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  max-width: none;
  margin: 12px 0 20px;
}
.list-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.list-table td { vertical-align: middle; }
/* Money cells on the list pages are right-aligned via ONE shared rule (§4 —
 * numbers right-aligned), tabular figures per the project's numeric convention.
 * Applied to both /clients and /accounts by the shared `num` class, never
 * per-page inline styles. */
.num, .cost-cell { text-align: right; font-variant-numeric: tabular-nums; }
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.badge--ok { background: rgba(22, 163, 74, 0.12); color: var(--ok); }
.badge--muted { background: rgba(107, 114, 128, 0.12); color: var(--muted); }
.badge--danger { background: rgba(220, 38, 38, 0.12); color: var(--danger); }
.links-cell .link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.link-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent, #2563eb);
  text-decoration: none;
}
.link-chip:hover { text-decoration: underline; }
.empty-state {
  margin: 24px 0;
  padding: 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted, #6b7280);
}
.field-error { margin: -6px 0 6px; }
.form-actions { flex-direction: row; gap: 12px; align-items: center; }
.pagination-next { display: inline-block; margin-top: 16px; font-weight: 600; }

/* story-35 slice-3: provenance footnote under a card heading — a quiet muted
 * line («Создал X, DD.MM; изменил Y, DD.MM»), never competing with content. */
.card-provenance {
  margin: -4px 0 12px;
  color: var(--muted, #6b7280);
  font-size: 0.85rem;
}