/*
 * Base stylesheet — Task 27 (spec 10.1/10.2).
 *
 * Component styles ported from the prototype (`../legacy/public/index.html`),
 * restyled to the Sterling branding: navy app header, orange primary buttons.
 * Everything references the design tokens from tokens.css — no raw palette
 * values except token definitions.
 */

* { box-sizing: border-box; }

/* Alpine-controlled elements must not flash before the (deferred) script boots. */
[x-cloak] { display: none !important; }

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

/* Navy application header (Sterling branding, spec 10.1) */
.app-header {
  background: var(--header-bg);
  color: var(--header-text);
}

.app-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--header-text);
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: 32px;
  width: auto;
}

.brand-app {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.9;
}

.container { max-width: 1100px; margin: 0 auto; padding: 24px; }

h1 { margin: 0 0 16px; font-size: 1.5rem; }
h2 { margin: 0 0 16px; font-size: 1.1rem; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  margin-bottom: 14px;
  background: var(--card);
}

textarea { font-family: ui-monospace, monospace; font-size: 0.85rem; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

button:hover:not(:disabled) { background: var(--primary-hover); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
button.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
button.secondary:hover:not(:disabled) { background: var(--bg); }
button.success { background: var(--success); }
button.danger { background: var(--danger); }
button.small { padding: 6px 10px; font-size: 0.85rem; }

/* Anchors rendered as buttons (Task 29 dashboard links: Go to dashboard,
   Connect Xero, pagination). */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
a.button:hover { background: var(--primary-hover); }
a.button.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
a.button.secondary:hover { background: var(--bg); }
/* The small row-action variant (e.g. the per-row "Push to Xero" link) must
   match button.small — a full-size .button in a table cell reads as huge. */
a.button.small { padding: 6px 10px; font-size: 0.85rem; }

/* The sync panel's filter row (source / mode selectors). */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-row > span { flex: 1; min-width: 140px; }

/* Date-range picker: radio pills on their OWN row below Source/Mode (the
   pills' label cannot share the flex-end baseline of the input labels).
   JS-free — the custom dates reveal via form:has(...) below. */
.range-row { margin-bottom: 14px; }
.field-label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.9rem; }
.range-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.range-row .range-picker { margin-bottom: 0; }
.range-option { position: relative; margin: 0; }
.range-option input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.range-option span {
  display: inline-flex;
  align-items: center;
  /* same metrics as inputs/selects — the pills sit on the same baseline and
     the "Date range" label lines up with Source/Mode (flex-end aligned row) */
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.range-option:hover span { color: var(--text); border-color: var(--muted); }
.range-option input:checked + span {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.range-option input:focus-visible + span { box-shadow: 0 0 0 3px var(--primary-soft); }
.sync-custom-dates { display: none; gap: 12px; margin-top: 12px; }
.sync-custom-dates > span { flex: 1; min-width: 140px; }
form:has(input[name="range"][value="custom"]:checked) .sync-custom-dates { display: flex; }

/* Card title with a trailing info icon (Synchronization). */
.card-title-row { display: flex; align-items: center; gap: 8px; }
.card-title-row h2 { margin: 0; }
/* Card title pushed to the edges — e.g. Invoices + the Refresh refetch link. */
.card-title-spread { justify-content: space-between; margin-bottom: 16px; }

/* Breathing room between the sync form and the progress panel below it. */
#sync-panel { margin-top: 16px; }

/* Segmented pill tabs (From Xero / From KSeF). */
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--card); color: var(--primary); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.status.connected { background: var(--pill-connected-bg); color: var(--pill-connected-text); }
.status.disconnected { background: var(--pill-disconnected-bg); color: var(--pill-disconnected-text); }
/* Pipeline status pills (Task 29 invoice table). */
.status.success { background: var(--pill-connected-bg); color: var(--pill-connected-text); }
.status.warning { background: #fef3c7; color: #92400e; }
.status.danger { background: var(--pill-disconnected-bg); color: var(--pill-disconnected-text); }
.status.muted { background: #f3f4f6; color: #4b5563; }
/* Failed/Rejected rows: the status pill doubles as the details-modal opener. */
a.status-link { text-decoration: none; cursor: pointer; }
a.status-link:hover { filter: brightness(0.94); }
a.status-link::after { content: " ⓘ"; font-weight: 400; }
.error-detail {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Both-sides badge: the invoice exists in Xero AND KSeF (green sync icon). */
.synced-cell { text-align: center; }
.synced-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

/* Status help list inside the Invoices info modal. */
.status-help-list { margin: 0 0 12px; padding-left: 20px; }
.status-help-list li { margin-bottom: 6px; }

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 0.95rem;
}
.alert.success { background: var(--pill-connected-bg); color: var(--pill-connected-text); }
.alert.error { background: var(--pill-disconnected-bg); color: var(--pill-disconnected-text); }
.alert.warning { background: #fef3c7; color: #92400e; }
.alert.info { background: #dbeafe; color: #1e40af; }
/* Terminal sync banner: status text on the left, "Sync again" on the right. */
#sync-progress.alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#sync-progress.alert .resync-form { margin: 0; flex-shrink: 0; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { font-weight: 600; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover { background: var(--bg); }
.checkbox-cell { text-align: center; }
.checkbox-cell input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* Invoice filter row: the fields share one line and the button bottoms out
   with the inputs (same margin as the inputs' own). */
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.actions > span { flex: 1; min-width: 130px; }
.actions button { margin-bottom: 14px; white-space: nowrap; }

.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 0.9rem; }
.empty { text-align: center; color: var(--muted); padding: 32px; }
.meta { color: var(--muted); font-size: 0.85rem; }
.hidden { display: none !important; }
.login-box { max-width: 420px; margin: 80px auto; }

/* Header navigation between the authenticated pages (Task 30). */
.app-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.app-nav a { color: var(--header-text); opacity: 0.85; text-decoration: none; padding: 6px 10px; border-radius: var(--radius); font-size: 0.9rem; }
.app-nav a:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.app-nav a.active { opacity: 1; font-weight: 600; }
/* The logout entry is a plain SSR form (POST + CSRF), styled as a nav link. */
.app-nav .nav-logout { margin: 0; }
.app-nav .nav-logout button {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--header-text); opacity: 0.85; padding: 6px 10px;
  border-radius: var(--radius); font-size: 0.9rem;
}
.app-nav .nav-logout button:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }

/* User menu (2026-09-24) — avatar + name/role on a native <details> summary;
   the dropdown panel holds the logout form. Zero JS. */
.user-menu { position: relative; margin-left: 8px; }
.user-menu-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px; border-radius: var(--radius); color: var(--header-text);
}
.user-menu-summary::-webkit-details-marker { display: none; }
.user-menu-summary:hover { background: rgba(255, 255, 255, 0.12); }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.user-name { font-size: 0.85rem; font-weight: 600; }
.user-role { font-size: 0.72rem; opacity: 0.75; text-transform: capitalize; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 170px; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}
/* Inside the white dropdown the logout entry drops the header-nav styling. */
.user-dropdown .nav-logout button {
  width: 100%; justify-content: flex-start;
  color: var(--text); opacity: 1; padding: 8px 10px;
}
.user-dropdown .nav-logout button:hover { background: var(--bg); opacity: 1; }

/* Page header: title row with the primary action on the right. */
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.page-header h1 { margin-bottom: 0; }

/* Company rows on the landing page — styled like the prototype's cards
   (`../legacy/public/index.html` .card): same padding, border, shadow and
   20 px rhythm, and no hover restyling (redesign 2026-09-24). */
.company-list { display: flex; flex-direction: column; gap: 20px; }
.company-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.company-row-info { min-width: 0; }
/* Card-title size/margins, like the prototype's card h2. */
.company-row-name { margin: 0 0 12px; font-size: 1.1rem; }
/* Connection blocks in the prototype's "Connection status" idiom:
   muted meta label above a dot pill. */
.company-row-status { display: flex; gap: 32px; flex-wrap: wrap; }
.company-row-conn .meta { margin: 0 0 6px; }
/* Labelled identity rows (Organisation / Tax ID) mirror the dashboard
   connection cards — muted label above the value, pill below. */
.company-row-conn .connection-detail { margin: 0 0 6px; }
.company-row-conn .connection-detail .connection-label { margin: 0; }
.company-row-conn .connection-detail .connection-value { margin: 0; }
.company-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.company-row-actions form { margin: 0; }
.empty-state .empty { padding: 32px; }

/* Square icon buttons (row edit/delete actions). */
a.icon-button { text-decoration: none; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--muted); cursor: pointer;
}
.icon-button:hover { color: var(--text); border-color: var(--muted); }
.icon-button.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--pill-disconnected-bg); }
/* Armed delete: the confirming submit — solid red, white icon. */
.icon-button.danger.armed { background: var(--danger); border-color: var(--danger); color: #ffffff; }

/* Rename / delete reveals — pure CSS :target (no JS; the trigger hides
   while its pop is open via :has). */
.row-rename-pop, .row-delete-pop { display: none; align-items: center; gap: 6px; }
.row-rename-pop:target, .row-delete-pop:target { display: inline-flex; }
.row-edit:has(.row-rename-pop:target) > .icon-button,
.row-delete:has(.row-delete-pop:target) > .icon-button { display: none; }
.row-rename-form { display: flex; align-items: center; gap: 6px; }
.row-rename-form input[type="text"] { width: 220px; margin-bottom: 0; }

/* Add-company modal — pure CSS :target: the hash opens it, any href="#_"
   closes it ("#_" matches no element, so closing never scrolls the page —
   a bare "#" scrolls to the top). Works with JS fully disabled and under
   the strict CSP. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50; padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  display: none; align-items: center; justify-content: center;
}
.modal-overlay:target { display: flex; }
/* Invisible layer catching clicks on the dark area (closes via href="#_"). */
.modal-overlay > .modal-overlay-close { position: absolute; inset: 0; }
.modal {
  position: relative; width: 100%; max-width: 440px; padding: 24px;
  background: var(--card); border-radius: var(--radius);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h2 { margin: 0; font-size: 1.15rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }

/* Invoice table — clickable number + the "new data" badge (2026-09-25).
   The number reads as text, not a link: text color + a dotted underline as
   the "clickable" affordance (same pattern as .login-forgot). */
a.invoice-number-link {
  color: var(--text); font-weight: 600; text-decoration: none;
  border-bottom: 1px dotted var(--muted);
}
a.invoice-number-link:hover { color: var(--primary); border-bottom-color: var(--primary); }
.badge-new {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: #dbeafe; color: #1e40af;
}

/* Invoice details modal — wider dialog, definition-grid sections, compact
   line/VAT tables, collapsible raw payload. */
.modal-wide { max-width: 760px; max-height: 85vh; overflow-y: auto; }
.details-section { margin-bottom: 16px; }
.details-section h3 { margin: 0 0 6px; font-size: 0.95rem; }
.details-grid {
  display: grid; grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 4px 14px; margin: 0; font-size: 0.9rem;
}
.details-grid dt { color: var(--muted); }
.details-grid dd { margin: 0; }
.details-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.details-table th, .details-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left;
}
.details-table th { color: var(--muted); font-weight: 600; }
.raw-payload { font-size: 0.85rem; }
.raw-payload summary { cursor: pointer; color: var(--muted); margin-bottom: 6px; }
.raw-payload pre {
  max-height: 240px; overflow: auto; padding: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.78rem;
}

/* KSeF API limits notice on the From KSeF tab (owner request 2026-09-28) —
   small-font info line with the info icon, between the tabs and the table. */
.ksef-limits-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 4px 0 14px; padding: 8px 12px;
  font-size: 0.85rem; line-height: 1.45; color: var(--muted);
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius);
}
.ksef-limits-note-icon { flex: none; margin-top: 2px; color: var(--primary); }
.ksef-limits-note p { margin: 0; }
.ksef-limits-note a { color: var(--primary); }

/* The AMBIGUOUS human-decision queue on the From KSeF tab (Task 37) — a
   tinted box per row with the explained candidates and its decision forms. */
.ambiguous-queue {
  margin: 4px 0 14px; padding: 14px 16px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius);
}
.ambiguous-queue h3 { margin: 0 0 6px; font-size: 0.95rem; }
.queue-row { padding: 10px 0; border-top: 1px solid #fde68a; }
.queue-row:first-of-type { border-top: none; }
.queue-row-head { margin: 0 0 8px; font-size: 0.9rem; }
.queue-candidates { background: var(--card); }
.queue-signals .status { margin-right: 4px; }
.queue-not-duplicate { margin: 8px 0 0; }

/* Login page footer link. */
.login-footer { text-align: center; margin-top: 14px; }
.login-forgot { color: var(--muted); font-size: 0.9rem; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.login-forgot:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* Connect-integrations card (2026-09-24): Xero on top, KSeF below, one card. */
.connect-block { margin-bottom: 20px; }
.connect-block:last-child { margin-bottom: 0; }
.connect-block h3 { margin: 0 0 8px; font-size: 1rem; }
.connect-ksef-head { display: flex; align-items: center; gap: 8px; }
.connect-ksef-head h3 { margin: 0; }
.connect-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* Info icon opening the certificate how-to modal. */
a.info-button { text-decoration: none; }
.info-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
}
.info-button:hover { color: var(--primary); border-color: var(--primary); }
.modal-body { font-size: 0.9rem; }
.modal-body ol { margin: 0 0 14px; padding-left: 22px; }
.modal-body li { margin-bottom: 6px; }

/* The info modal grows with each documented behavior — its body scrolls
   while the header stays put (owner request 2026-09-25). */
.modal-scroll { max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal-scroll .modal-body { overflow-y: auto; }

/* Quick one-day sync row (owner request 2026-09-25): one compact button per
   source at the top of the Synchronization panel. */
.quick-sync {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.quick-sync-label { font-size: 0.85rem; color: var(--muted); }
.quick-sync form { margin: 0; display: inline-flex; }

/* Certificate drop zone — a styled file input; drag & drop is a JS extra
   (upload.js), the click-to-browse flow works with JS fully disabled. */
.file-drop {
  position: relative; margin-bottom: 14px;
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 18px; text-align: center; background: var(--bg);
  transition: border-color 0.15s, background 0.15s;
}
.file-drop.drag-over, .file-drop:hover { border-color: var(--primary); background: var(--card); }
.file-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; margin-bottom: 0;
}
.file-drop-label { display: block; pointer-events: none; }
.file-drop-label strong { display: block; margin-bottom: 4px; }
.file-drop-label span { color: var(--muted); font-size: 0.85rem; }

/* The optional private-key zone sits under a divider, visually subordinate
   to the mandatory certificate drop zone above it (2026-09-24). */
.key-drop { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--border); }
.key-drop-caption { margin: 0 0 8px; }
.file-drop-small { padding: 10px 14px; }

/* Xero connect page: authorized-tenant radio list. */
.tenant-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-weight: 500;
}
.tenant-option:hover { border-color: var(--primary); }
.tenant-option input[type="radio"] { width: 18px; height: 18px; margin-bottom: 0; }

/* Compact forms inside table cells (Task 30 user-management actions). */
.inline-form { display: inline-flex; gap: 8px; align-items: center; margin: 0 8px 4px 0; }
.inline-form select { width: auto; margin-bottom: 0; padding: 6px 8px; }

/* Back link on the company dashboard (2026-09-24) — a quiet pill, not a raw <a>. */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px; padding: 4px 12px 4px 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--muted);
  font-size: 0.85rem; font-weight: 500; text-decoration: none;
}
.back-link:hover { color: var(--primary); border-color: var(--primary); }

/* Connection status cards (2026-09-24) — TWO separate cards side by side,
   each with a hand-drawn brand badge in the head (the vendor logos, drawn
   inline — spec 10.5: no hotlinking) and dot status pills per connection. */
.connection-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.connection-card-head h2 { margin: 0; }
.brand-badge { display: inline-flex; flex-shrink: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.brand-badge svg { display: block; }
.connection-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.connection-row:last-child { margin-bottom: 0; }
.connection-detail { margin-bottom: 12px; }
.connection-label {
  margin: 0 0 2px; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.connection-value { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
/* Borderless variant for the disconnect icons — a quiet glyph that only
   turns red on hover, no chrome. */
.icon-button.plain { border-color: transparent; background: transparent; }
.icon-button.plain:hover { color: var(--danger); border-color: transparent; background: transparent; }

/* Connect-integrations card expander — a hidden checkbox drives it (no JS);
   checked = rolled up. Rolled up by default once BOTH are connected. */
.connect-toggle { position: absolute; opacity: 0; pointer-events: none; }
.connect-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.connect-card-head h2 { margin: 0; }
.connect-toggle:checked ~ .connect-card-body { display: none; }
.connect-toggle:checked ~ .connect-card-head .connect-toggle-label svg { transform: rotate(180deg); }
.connect-toggle-label { cursor: pointer; }
.connect-toggle-label svg { transition: transform 0.15s; }