/* CladGuard interface refinements.
   Loaded after the utility classes on every app page. Selectors start with :root so they win over the
   Tailwind runtime stylesheet without !important. The aim is one calm, consistent look: a single amber
   accent, semantic green/red, readable type sizes, no glow or gradient effects. */

:root {
  --cg-bg: #0b1120;
  --cg-surface: #111827;
  --cg-surface-2: #0f172a;
  --cg-line: #1f2937;
  --cg-line-strong: #334155;
  --cg-text: #e5e7eb;
  --cg-muted: #94a3b8;
  --cg-accent: #f59e0b;
  --cg-accent-hover: #fbbf24;
  --cg-accent-ink: #1c1206;
  color-scheme: dark;
}

/* ---------- Type ---------- */
:root body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:root .font-black { font-weight: 700; }
:root .font-extrabold { font-weight: 700; }
:root h1, :root h2 { letter-spacing: -0.015em; }
:root h1.font-black, :root h2.font-black { font-weight: 700; }

/* Tiny text is hard to read on site in daylight; lift the smallest sizes a notch. */
:root .text-\[10px\] { font-size: 11px; line-height: 1.45; }
:root .text-\[11px\] { font-size: 12px; line-height: 1.5; }

/* Monospace is kept for genuine codes only. Prices and figures use Inter with aligned digits. */
:root .font-mono { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; }
:root code, :root kbd, :root .font-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Badge-style labels ("UK EDITION", "FREE SAMPLE") read as quiet eyebrows instead of terminal tags. */
:root span.font-mono[class*="rounded"] {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
}

/* ---------- Accent: flat, no gradients or glow ---------- */
:root .bg-gradient-to-r.from-amber-500,
:root .bg-gradient-to-br.from-amber-400,
:root .bg-gradient-to-br.from-amber-500,
:root .bg-gradient-to-r.from-emerald-500 { background-image: none; }
:root .bg-gradient-to-r.from-amber-500,
:root .bg-gradient-to-br.from-amber-400,
:root .bg-gradient-to-br.from-amber-500 { background-color: var(--cg-accent); }
:root .bg-gradient-to-r.from-amber-500:hover { background-color: var(--cg-accent-hover); }
:root .bg-gradient-to-r.from-emerald-500 { background-color: #059669; }
:root .bg-gradient-to-r.from-emerald-500:hover { background-color: #10b981; }
:root .bg-gradient-to-r.from-purple-600,
:root .bg-gradient-to-br.from-purple-600,
:root .bg-gradient-to-br.from-purple-900 { background-image: none; background-color: #1e293b; }

:root [class*="shadow-amber-500"],
:root [class*="shadow-purple-"],
:root [class*="shadow-emerald-"] { --tw-shadow-color: rgb(0 0 0 / 0.25); --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3); }
:root .shadow-xl, :root .shadow-lg { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 4px 12px -2px rgb(0 0 0 / 0.25); }

/* The assistant uses the app's neutral palette rather than a separate purple brand. */
:root .text-purple-200, :root .text-purple-300, :root .text-purple-400 { color: #cbd5e1; }
:root .bg-purple-600 { background-color: #334155; }
:root .hover\:bg-purple-500:hover { background-color: #475569; }
:root [class*="bg-purple-500\/"] { background-color: rgb(148 163 184 / 0.12); }
:root [class*="bg-purple-600\/"] { background-color: rgb(148 163 184 / 0.12); }
:root [class*="hover\:bg-purple-600\/"]:hover { background-color: rgb(148 163 184 / 0.2); }
:root [class*="border-purple-500"] { border-color: var(--cg-line-strong); }
:root .focus\:border-purple-500:focus { border-color: var(--cg-accent); }

/* ---------- Buttons & controls ---------- */
:root button, :root a, :root summary, :root [role="button"] { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
:root button:active:not(:disabled) { transform: translateY(0.5px); }
:root :focus { outline: none; }
:root :focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; border-radius: 0.5rem; }

:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
:root select,
:root textarea { transition: border-color .15s, box-shadow .15s; }
:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
:root select:focus,
:root textarea:focus { border-color: var(--cg-accent); box-shadow: 0 0 0 3px rgb(245 158 11 / 0.18); outline: none; }
:root ::placeholder { color: #64748b; opacity: 1; }
:root input[type="checkbox"], :root input[type="radio"] { accent-color: var(--cg-accent); }

/* Desktop scrollbars that match the dark surfaces. */
@media (hover: hover) {
  :root * { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
  :root *::-webkit-scrollbar { width: 10px; height: 10px; }
  :root *::-webkit-scrollbar-thumb { background: #334155; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
  :root *::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- App navigation ---------- */
:root .saas-mode-btn { font-weight: 600; font-size: 0.8125rem; color: #94a3b8; padding: 0.5rem 0.7rem; }
:root .saas-mode-btn i { font-size: 0.8rem; opacity: 0.85; }
:root .saas-mode-btn.is-active { color: #fff; background: transparent; box-shadow: inset 0 -2px 0 var(--cg-accent); border-radius: 0.5rem 0.5rem 0 0; }
:root .saas-mode-btn.is-active i { color: var(--cg-accent); opacity: 1; }

:root .bnav-btn { font-size: 11px; font-weight: 600; gap: 0.25rem; color: #94a3b8; }
:root .bnav-btn i { font-size: 1.05rem; width: 3.25rem; height: 1.85rem; line-height: 1.85rem; text-align: center; border-radius: 999px; transition: background-color .15s, color .15s; }
:root .bnav-btn.is-active { color: #fff; }
:root .bnav-btn.is-active i { transform: none; background: rgb(245 158 11 / 0.16); color: #fcd34d; }
:root .bnav-btn:active { background: transparent; }
:root .bnav-btn:active i { background: #1e293b; }

/* "More" sheet as a grouped list (like a native settings screen) */
.sheet-group-title { padding: 0 0.25rem 0.4rem; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; }
.sheet-list { display: grid; gap: 1px; background: var(--cg-line); border: 1px solid var(--cg-line); border-radius: 1rem; overflow: hidden; }
/* Grid gaps only appear between rows that are actually shown, so rows hidden by plan or role leave no stray divider. */
.sheet-row { display: flex; width: 100%; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem; background: var(--cg-surface-2); font-size: 0.875rem; font-weight: 500; color: var(--cg-text); text-align: left; }
.sheet-row > i:first-child { width: 1.25rem; text-align: center; color: #94a3b8; }
.sheet-row::after { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; margin-left: auto; color: #475569; }
.sheet-row:active, .sheet-row:hover { background: #1e293b; }
.sheet-row.hidden { display: none; }
.sheet-row.is-danger, .sheet-row.is-danger > i:first-child { color: #fca5a5; }
/* A group whose rows are all hidden by plan, permission or role disappears with its heading. */
.sheet-group:not(:has(.sheet-row:not(.hidden):not(.feature-locked))) { display: none; }
body.role-operative .sheet-group:not(:has(.sheet-row:not(.hidden):not(.feature-locked):not([data-office]))) { display: none; }

/* Tabs inside the document preview */
:root .doc-tab-btn { font-weight: 600; font-size: 0.8125rem; color: #cbd5e1; }
:root .doc-tab-btn.is-active { background: #f8fafc; border-color: #f8fafc; color: #0f172a; font-weight: 600; }

/* ---------- Cards & surfaces ---------- */
:root .saas-mode-pane h2.text-xl { font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; color: #fff; }
:root .saas-mode-pane h2 + p.text-xs { font-size: 0.8125rem; line-height: 1.25rem; color: var(--cg-muted); max-width: 46rem; margin-top: 0.2rem; }
:root .saas-mode-pane section.bg-slate-900 { border-color: var(--cg-line); }
:root .saas-mode-pane h3.text-sm.font-black { font-weight: 600; font-size: 0.9rem; }

/* Toasts and dialogs */
:root #appModal > div, :root #signOffModal > div { border-color: var(--cg-line-strong); box-shadow: 0 24px 60px -12px rgb(0 0 0 / 0.6); }
:root #appModalTitle { font-weight: 600; font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Public landing page ---------- */
.lp-wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .lp-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fbbf24; }
.lp-eyebrow::before { content: ''; width: 1.25rem; height: 2px; background: currentColor; border-radius: 2px; }
.lp-h2 { font-size: 1.625rem; line-height: 2.1rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
@media (min-width: 768px) { .lp-h2 { font-size: 2rem; line-height: 2.5rem; } }
.lp-lead { font-size: 0.975rem; line-height: 1.65; color: #94a3b8; }
.lp-card { background: var(--cg-surface-2); border: 1px solid var(--cg-line); border-radius: 1rem; }
.lp-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; background: rgb(245 158 11 / 0.1); color: #fbbf24; border: 1px solid rgb(245 158 11 / 0.2); }
.lp-list li { display: flex; gap: 0.6rem; font-size: 0.875rem; line-height: 1.5; color: #cbd5e1; }
.lp-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; color: #f59e0b; margin-top: 0.3rem; flex-shrink: 0; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.25rem; border-radius: 0.75rem; font-size: 0.9rem; font-weight: 600; line-height: 1.2; }
.lp-btn-primary { background: var(--cg-accent); color: var(--cg-accent-ink); }
.lp-btn-primary:hover { background: var(--cg-accent-hover); }
.lp-btn-ghost { background: transparent; color: #e2e8f0; border: 1px solid var(--cg-line-strong); }
.lp-btn-ghost:hover { background: #1e293b; }
.lp-nav a { font-size: 0.875rem; font-weight: 500; color: #94a3b8; }
.lp-nav a:hover { color: #fff; }
.lp-field label, .lp-field > span { display: block; font-size: 0.8125rem; font-weight: 500; color: #cbd5e1; margin-bottom: 0.35rem; }
.lp-input { width: 100%; background: #0b1120; border: 1px solid var(--cg-line-strong); border-radius: 0.6rem; padding: 0.65rem 0.8rem; color: #fff; font-size: 0.9rem; }
.lp-step-num { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; background: #1e293b; color: #fbbf24; border: 1px solid #334155; }
.lp-price { font-size: 2rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lp-hero-grid { background-image: linear-gradient(rgb(148 163 184 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(148 163 184 / 0.05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 30% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 30% 0%, #000 30%, transparent 75%); }