/*
 * XActions design system
 * @author nich (@nichxbt)
 * Licensed under the Apache License, Version 2.0
 *
 * Single source of truth for the dashboard look. Loaded LAST on every page that
 * uses the shared shell (dashboard/js/sidebar.js), so it wins the cascade over
 * page-level \3c style> blocks without needing !important.
 *
 *   1. Tokens          colours, type, spacing, radius, layout sizes
 *   2. Base            reset, typography, links, focus, scrollbars
 *   3. Shell           fixed sidebar, mobile top bar, page frame
 *   4. Page frame      header, content, related panel, footer
 *   5. Components      buttons, cards, forms, tables, badges, alerts, modals...
 *   6. Legacy classes  page-specific class names mapped onto the components above
 */

@import url("/css/shell.css?v=4");

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg-primary);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before, body::after { content: none; display: none; }

/* Element defaults sit in :where() so a page can still size its own content. */
:where(h1, h2, h3, h4, h5, h6) { color: var(--text-primary); line-height: 1.25; margin-top: 0; }
:where(h1) { font-size: var(--fs-xl); font-weight: 600; }
:where(h2) { font-size: var(--fs-lg); font-weight: 600; }
:where(h3) { font-size: var(--fs-md); font-weight: 600; }

:where(a) { color: var(--text-link); }
:where(a:hover) { color: var(--accent-hover); }

:where(img, svg, video, canvas) { max-width: 100%; }
svg.ico { display: inline-block; flex: none; vertical-align: -3px; }
h1 > svg.ico, h2 > svg.ico, h3 > svg.ico { margin-right: var(--space-2); }

code, kbd, pre, samp { font-family: var(--font-mono); }
:where(code) { font-size: 0.9em; }
:where(:not(pre) > code) { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); padding: 1px 6px; }
:where(pre) { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); overflow: auto; max-width: 100%; }:where(pre) code { background: none; border: 0; padding: 0; font-size: var(--fs-sm); }
:where(hr) { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

::selection { background: rgba(47, 129, 247, 0.35); }

* { scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: var(--radius); border: 2px solid var(--bg-primary); }
::-webkit-scrollbar-track { background: transparent; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-nav {
  position: absolute; left: var(--space-2); top: -48px; z-index: calc(var(--z-modal) + 1);
  background: var(--accent); color: #fff; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius); text-decoration: none;
}
.skip-nav:focus { top: var(--space-2); }

/* 4. Page frame ------------------------------------------------------------ */
/* One column to the right of the sidebar, on every page: content, optional related
   panel, footer, stacked in that order. A column (not a wrapping row), so no child
   can ever be squeezed beside another. */
body > .layout, body > .app-layout {
  display: flex; flex-direction: column;
  width: 100%; max-width: none; min-height: calc(100dvh - var(--sticky-offset)); margin: 0; padding: 0; gap: 0;
}
body > .layout > main, body > .layout > .main-content,
body > .app-layout > main, body > .app-layout > .main-content, body > .app-layout > .container {
  flex: 1 0 auto; width: 100%; min-width: 0; max-width: none; margin: 0;
  border: 0; background: transparent;
}
body > .layout > .footer, body > .layout > footer,
body > .app-layout > .footer, body > .app-layout > footer {
  flex: none; width: 100%; max-width: none; order: 5;
}

/* Related links panel (was a right rail): below the content, same width everywhere. */
body > .layout > .sidebar-right, body > .app-layout > .sidebar-right {
  flex: none; order: 3; position: static; width: 100%; height: auto; overflow: visible;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); align-items: start;
  padding: var(--space-5) var(--page-pad); margin: 0;
  border: 0; border-top: 1px solid var(--border); background: transparent;
}
.sidebar-right .sidebar-card, .sidebar-right .tips-card, .sidebar-right .stats-card { margin: 0; }

.main-header, .page-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--page-pad);
  background: var(--bg-primary); border-bottom: 1px solid var(--border);
  backdrop-filter: none;
}
.main-header h1, .page-header h1, .page-title { margin: 0; font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); }
.main-header p, .page-header p, .page-subtitle { margin: 0; color: var(--text-secondary); font-size: var(--fs-md); }

.breadcrumb { padding: var(--space-3) var(--page-pad) 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.main-header .breadcrumb, .page-header .breadcrumb { padding: 0; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-link); text-decoration: underline; }

.article { max-width: var(--article-max); padding: var(--space-5) var(--page-pad); }
.article h2 { margin: var(--space-5) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.article p, .article li { color: var(--text-primary); }
.article .intro, .article .lead { color: var(--text-secondary); font-size: var(--fs-lg); }

.footer, body > footer {
  padding: var(--space-5) var(--page-pad); border-top: 1px solid var(--border);
  color: var(--text-secondary); font-size: var(--fs-sm);
  background: transparent;
}
.footer a, body > footer a { color: var(--text-secondary); }
.footer a:hover, body > footer a:hover { color: var(--text-link); }
body > footer { width: 100%; }

/* 5. Components ------------------------------------------------------------ */
/* Buttons */
:where(.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .button) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 32px; padding: 5px var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-tertiary); color: var(--text-primary);
  font: inherit; font-size: var(--fs-md); font-weight: 500; line-height: 20px;
  text-decoration: none; cursor: pointer; box-shadow: none; transform: none;
  transition: background-color 0.1s, border-color 0.1s;
}
:where(.btn:hover, .btn-secondary:hover, .button:hover) { background: var(--bg-hover); color: var(--text-primary); }
:where(.btn:disabled, .btn[aria-disabled="true"], .btn-primary:disabled), button:disabled { opacity: 0.55; cursor: not-allowed; }
:where(.btn--primary, .btn-primary, .btn.primary) {
  background: var(--btn); border-color: rgba(240, 246, 252, 0.1); color: #fff;
}
:where(.btn--primary:hover, .btn-primary:hover, .btn.primary:hover) { background: var(--btn-hover); color: #fff; }
:where(.btn--danger, .btn-danger) { background: var(--danger-solid); border-color: rgba(240, 246, 252, 0.1); color: #fff; }
:where(.btn--danger:hover, .btn-danger:hover) { background: #b62324; color: #fff; }
:where(.btn--ghost, .btn-ghost, .btn--secondary, .btn-secondary) { background: transparent; }
:where(.btn--ghost:hover, .btn-ghost:hover, .btn--secondary:hover, .btn-secondary:hover) { background: var(--bg-tertiary); }
:where(.btn--sm) { min-height: 28px; padding: 3px var(--space-3); font-size: var(--fs-sm); }
:where(.btn--lg) { min-height: 40px; padding: var(--space-2) var(--space-5); font-size: var(--fs-lg); }
:where(.btn--block) { display: flex; width: 100%; }

/* Cards */
:where(.card, .stat-card, .feature-card, .tool-card, .script-card, .info-card, .sidebar-card, .stats-card, .tips-card, .operation-card, .auto-card, .download-box, .faq-item, .hosted-card, .meet-card, .stat-box) {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: none; color: var(--text-primary);
}
:where(.card) { padding: var(--space-4); }
:where(.card__header) { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); font-weight: 600; }
:where(.card__title) { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
:where(.card__body) { color: var(--text-secondary); }
:where(.card__footer) { padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--border); }
:where(.sidebar-card) { padding: var(--space-4); }
:where(.sidebar-card h3) { margin: 0 0 var(--space-3); font-size: var(--fs-md); font-weight: 600; }
:where(.sidebar-card a) {
  display: block; padding: 6px 0; border-bottom: 1px solid var(--border-muted);
  color: var(--text-secondary); font-size: var(--fs-sm); text-decoration: none;
}
:where(.sidebar-card a:last-child) { border-bottom: 0; }
:where(.sidebar-card a:hover) { color: var(--text-link); }
:where(.card:hover, .feature-card:hover, .tool-card:hover, .script-card:hover, .auto-card:hover) { transform: none; box-shadow: none; }

/* Forms */
input, select, textarea { font: inherit; }
:where(.input, .select), :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  width: 100%; min-height: 32px; padding: 5px 12px;
  background: var(--bg-inset); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: var(--fs-md); line-height: 20px; box-shadow: none;
}
:where(.textarea), :where(textarea) { min-height: 80px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
:where(.input:focus, .select:focus), input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
:where(.label), :where(label) { color: var(--text-primary); font-size: var(--fs-md); font-weight: 600; }
:where(.input-group) { display: flex; gap: var(--space-2); }
:where(.form-group) { margin-bottom: var(--space-4); }
:where(.hint, .help-text) { color: var(--text-secondary); font-size: var(--fs-xs); }

/* Tables */
:where(.table), :where(table) { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
:where(th) { text-align: left; padding: var(--space-2) var(--space-3); background: var(--bg-secondary); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-primary); } 
:where(td) { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-muted); color: var(--text-primary); vertical-align: top; }
:where(tr:hover td) { background: rgba(110, 118, 129, 0.06); }
:where(.table-wrap) { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }

/* Badges, alerts, status */
:where(.badge, .cat-badge, .tag, .pill, .count-badge, .status-badge, .conn-badge) {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 var(--space-2); min-height: 20px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: 500; line-height: 18px; box-shadow: none;
}
:where(.badge--primary, .badge--info, .badge-info) { color: var(--accent); border-color: rgba(47, 129, 247, 0.4); background: var(--accent-light); }
:where(.badge--success, .badge-success) { color: var(--success); border-color: rgba(63, 185, 80, 0.4); background: var(--success-bg); }
:where(.badge--warning, .badge-warning) { color: var(--warning); border-color: rgba(210, 153, 34, 0.4); background: var(--warning-bg); }
:where(.badge--danger, .badge--error, .badge-error) { color: var(--error); border-color: rgba(248, 81, 73, 0.4); background: var(--error-bg); }

:where(.alert) { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); }
:where(.alert--success) { border-color: rgba(63, 185, 80, 0.4); background: var(--success-bg); }
:where(.alert--warning) { border-color: rgba(210, 153, 34, 0.4); background: var(--warning-bg); }
:where(.alert--error, .alert--danger) { border-color: rgba(248, 81, 73, 0.4); background: var(--error-bg); }

/* Loading, empty and error states */
:where(.empty-state, .loading-state, .error-state) {
  padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-secondary);
  border: 1px dashed var(--border); border-radius: var(--radius);
}
:where(.error-state) { color: var(--error); border-color: rgba(248, 81, 73, 0.4); }
:where(.spinner) {
  width: 16px; height: 16px; display: inline-block; vertical-align: -3px;
  border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%;
  animation: xa-spin 0.8s linear infinite;
}
@keyframes xa-spin { to { transform: rotate(360deg); } }

/* Tabs */
:where(.tabs) { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
:where(.tab, .tab-btn) {
  padding: var(--space-2) var(--space-3); border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--text-secondary); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
}
:where(.tab:hover, .tab-btn:hover) { color: var(--text-primary); }
:where(.tab.active, .tab-btn.active) { color: var(--text-primary); border-bottom-color: var(--accent); }

/* Modals, dropdowns, toasts */
:where(.modal-overlay, .modal-backdrop) {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
  background: rgba(1, 4, 9, 0.8); backdrop-filter: none;
}
:where(.modal, .settings-modal) {
  width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(1, 4, 9, 0.85); padding: var(--space-5);
}
:where(.dropdown-menu, .menu) {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(1, 4, 9, 0.8);
}
:where(.toast) {
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(1, 4, 9, 0.8);
  padding: var(--space-3) var(--space-4);
}

/* Code blocks */
:where(.code-block) { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
:where(.code-block pre) { margin: 0; border: 0; border-radius: 0; }
:where(.copy-btn) {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 3px var(--space-3); border: 1px solid rgba(240, 246, 252, 0.1); border-radius: var(--radius);
  background: var(--btn); color: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; box-shadow: none;
}
:where(.copy-btn:hover) { background: var(--btn-hover); }

/* 6. Legacy page classes ---------------------------------------------------- */
/* Page-specific names that predate the shell, mapped onto the components above. */
.bookmarklet, .send-btn, .server-btn, .download-btn, .tbtn--primary, .btn--start, .btn--save, .btn--toggle.btn--start,
#btn-analyze-voice, #btn-generate, #btn-calendar {
  background: var(--btn); color: #fff; border: 1px solid rgba(240, 246, 252, 0.1);
  border-radius: var(--radius); font-weight: 500; box-shadow: none; background-image: none; text-decoration: none; cursor: pointer;
}
.bookmarklet:hover, .server-btn:hover, .download-btn:hover, .tbtn--primary:hover, .btn--start:hover, .btn--save:hover,
.send-btn:not(:disabled):hover, #btn-analyze-voice:hover, #btn-generate:hover, #btn-calendar:hover { background: var(--btn-hover); color: #fff; }
.server-btn.secondary { background: transparent; color: var(--text-primary); border-color: var(--border); }
.server-btn.secondary:hover { background: var(--bg-tertiary); }
.btn--stop, .btn-emergency, .tbtn--danger { background: var(--danger-solid); color: #fff; border: 1px solid rgba(240, 246, 252, 0.1); border-radius: var(--radius); box-shadow: none; background-image: none; }
.btn--stop:hover, .btn-emergency:hover, .tbtn--danger:hover { background: #b62324; }
.btn--settings, .btn--cancel { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; }
.btn--settings:hover, .btn--cancel:hover { background: var(--bg-hover); }
.tbtn, .palette-btn, .icon-btn, .quality-btn, .lane-select, .meet-cta { border-radius: var(--radius); box-shadow: none; transform: none; }

.search-input { background: var(--bg-inset); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius); }
.search-input:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }

.auto-card--running { border-color: var(--success); }
.auto-card__icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0; }
.auto-card__badge { border-radius: var(--radius); box-shadow: none; }
.status-unhealthy, .status-badge.status-unhealthy { background: var(--danger-solid); color: #fff; border-radius: var(--radius); box-shadow: none; }
.header-stat__val { color: var(--text-primary); }

.feature-icon, .script-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
/* An icon box whose pictograph had no stroke equivalent still shows a neutral icon. */
:is(.feature-icon, .script-icon, .operation-icon):empty::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav-links a { border-radius: var(--radius); }

/* Any leftover decorative gradient or glow collapses to the flat surface. */
[style*="linear-gradient"], [style*="radial-gradient"] {
  background-image: none !important; background-color: var(--bg-secondary) !important;
}

/* Tables never widen the page: they scroll inside their own box on narrow screens. */
@media (max-width: 1024px) {
  main table:not(.tv-lightweight-charts table), .article table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Grids of cards must be allowed to shrink below their longest label. */
.script-grid { grid-template-columns: minmax(0, 1fr); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .main-header, .page-header { top: var(--topbar-h); }
}

@media (max-width: 640px) {
  :root { --page-pad: 12px; }
  .main-header, .page-header { padding: var(--space-3) var(--page-pad); }
  .main-header h1, .page-header h1 { font-size: var(--fs-lg); }
  .modal { padding: var(--space-4); }
  .input-group { flex-wrap: wrap; }
  body > .layout > .sidebar-right, body > .app-layout > .sidebar-right { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── Mask icons: glyph replacements for CSS-generated content (arrows, checks, disclosure) ── */
:root {
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  --ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --ico-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ico-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}