/* Design tokens. The shadcn-equivalent semantic names (--primary,
 * --card, --border, --ring, --radius, ...) are reproduced by hand so the
 * UI kit in ui/*.mjs can imitate shadcn without importing Tailwind. The
 * existing color-mode switch (data-color-mode + body classes) is kept.
 * --primary / --accent are overridden at runtime by the shell with the
 * brand colors from GET /api/theme. */
body {
 --background: #ffffff;
 --foreground: #101729;
 --card: #ffffff;
 --card-foreground: #101729;
 --muted: #f9fafc;
 --muted-foreground: #677489;
 --accent: #f1f5f9;
 --accent-foreground: #0f172a;
 --secondary: #f1f5f9;
 --secondary-foreground: #0f172a;
 --primary: #475569;
 --primary-foreground: #ffffff;
 --destructive: #dc2626;
 --destructive-foreground: #ffffff;
 --border: #e2e8f0;
 --input: #cbd5e1;
 --ring: #94a3b8;
 --radius-sm: 6px;
 --radius-md: 10px;
 --radius-lg: 14px;

 /* legacy aliases kept for older dated layers' parity */
 --background-color: var(--background);
 --text-color: var(--foreground);
 --heading-color: var(--foreground);
 --subheading-color: var(
  --muted-foreground
 );
 --content-background-color: var(
  --muted
 );

 margin: 0;
 background-color: var(--background);
 color: var(--foreground);
 font-family:
  ui-sans-serif,
  system-ui,
  -apple-system,
  'Segoe UI',
  Roboto,
  Helvetica,
  Arial,
  sans-serif;
 font-feature-settings:
  'rlig' 1,
  'calt' 1;
 -webkit-font-smoothing: antialiased;
}

body[data-color-mode='dark'],
body.color-mode-dark {
 --background: #000000;
 --foreground: #efe8d6;
 --card: #0b0a08;
 --card-foreground: #efe8d6;
 --muted: #060503;
 --muted-foreground: #988b76;
 --accent: #16140f;
 --accent-foreground: #efe8d6;
 --secondary: #16140f;
 --secondary-foreground: #efe8d6;
 --primary: #e2dcc7;
 --primary-foreground: #101729;
 --destructive: #ef4444;
 --destructive-foreground: #0b0a08;
 --border: #26241d;
 --input: #2f2c23;
 --ring: #6b6557;
}

@media (prefers-color-scheme: dark) {
 body[data-color-mode='system'],
 body.color-mode-system {
  --background: #000000;
  --foreground: #efe8d6;
  --card: #0b0a08;
  --card-foreground: #efe8d6;
  --muted: #060503;
  --muted-foreground: #988b76;
  --accent: #16140f;
  --accent-foreground: #efe8d6;
  --secondary: #16140f;
  --secondary-foreground: #efe8d6;
  --primary: #e2dcc7;
  --primary-foreground: #101729;
  --destructive: #ef4444;
  --destructive-foreground: #0b0a08;
  --border: #26241d;
  --input: #2f2c23;
  --ring: #6b6557;
 }
}

* {
 box-sizing: border-box;
}

h1,
h2,
h3 {
 color: var(--foreground);
 margin: 0;
}

h2 {
 color: var(--muted-foreground);
}

a {
 color: inherit;
}

/* button (imitates shadcn Button) */
.btn {
 display: inline-flex;
 flex-shrink: 0;
 align-items: center;
 justify-content: center;
 gap: 8px;
 height: 36px;
 padding: 0 16px;
 border: 1px solid transparent;
 border-radius: var(--radius-md);
 background: var(--primary);
 color: var(--primary-foreground);
 font: inherit;
 font-size: 14px;
 font-weight: 500;
 line-height: 1;
 white-space: nowrap;
 cursor: pointer;
 transition:
  background-color 0.15s,
  color 0.15s,
  border-color 0.15s,
  box-shadow 0.15s;
}

.btn:focus-visible {
 outline: none;
 box-shadow: 0 0 0 3px
  color-mix(
   in srgb,
   var(--ring) 50%,
   transparent
  );
}

.btn:disabled {
 opacity: 0.5;
 pointer-events: none;
}

.btn-spinner {
 width: 14px;
 height: 14px;
 border: 2px solid currentColor;
 border-right-color: transparent;
 border-radius: 999px;
 flex-shrink: 0;
 animation: btn-spin 0.7s linear
  infinite;
}

.btn[data-loading='false']
 .btn-spinner {
 display: none;
}

.btn-content {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}

@keyframes btn-spin {
 to {
  transform: rotate(360deg);
 }
}

.btn svg {
 width: 16px;
 height: 16px;
 flex-shrink: 0;
}

.btn-outline {
 background: var(--background);
 border-color: var(--border);
 color: var(--foreground);
}

.btn-outline:hover {
 background: var(--accent);
 color: var(--accent-foreground);
}

.btn-ghost {
 background: transparent;
 color: var(--foreground);
}

.btn-ghost:hover {
 background: var(--accent);
 color: var(--accent-foreground);
}

.btn-secondary {
 background: var(--secondary);
 color: var(--secondary-foreground);
}

.btn-destructive {
 background: var(--destructive);
 color: var(--destructive-foreground);
}

.btn-link {
 background: transparent;
 color: var(--primary);
 text-decoration-line: underline;
 text-underline-offset: 4px;
 height: auto;
 padding: 0;
}

.btn-default:hover {
 background: color-mix(
  in srgb,
  var(--primary) 90%,
  black
 );
}

.btn-sm {
 height: 32px;
 padding: 0 12px;
 font-size: 13px;
}

.btn-lg {
 height: 40px;
 padding: 0 24px;
}

.btn-icon {
 width: 36px;
 height: 36px;
 padding: 0;
}

.btn-block {
 width: 100%;
}

.btn-start {
 justify-content: flex-start;
}

/* card */
.card {
 display: flex;
 flex-direction: column;
 min-width: 0;
 gap: 24px;
 padding: 24px 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
 color: var(--card-foreground);
 box-shadow: 0 1px 2px
  rgba(16, 23, 41, 0.05);
}

.card-header {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding: 0 24px;
}

.card-title {
 font-weight: 600;
 line-height: 1.1;
}

.card-description {
 font-size: 14px;
 color: var(--muted-foreground);
}

.card-content {
 min-width: 0;
 padding: 0 24px;
}

.card-footer {
 display: flex;
 align-items: center;
 padding: 0 24px;
}

/* badge */
.badge {
 display: inline-flex;
 width: fit-content;
 flex-shrink: 0;
 align-items: center;
 justify-content: center;
 gap: 4px;
 padding: 2px 8px;
 border: 1px solid transparent;
 border-radius: 9999px;
 background: var(--primary);
 color: var(--primary-foreground);
 font-size: 12px;
 font-weight: 500;
 white-space: nowrap;
}

.badge-secondary {
 background: var(--secondary);
 color: var(--secondary-foreground);
}

.badge-outline {
 background: transparent;
 border-color: var(--border);
 color: var(--foreground);
}

.badge-destructive {
 background: var(--destructive);
 color: var(--destructive-foreground);
}

/* input / textarea / select / label */
.input,
.textarea,
select,
input,
textarea {
 width: 100%;
 padding: 9px 12px;
 background: var(--background);
 border: 1px solid var(--input);
 border-radius: var(--radius-md);
 color: var(--foreground);
 font: inherit;
 font-size: 14px;
 box-sizing: border-box;
}

.textarea,
textarea {
 min-height: 80px;
 resize: vertical;
}

/* Color inputs ignore line-height, so they render shorter than text inputs.
 * Pin them to the same total height: content (1lh) + padding (18px) + border
 * (2px), matching a default text input. */
input[type='color'] {
 height: calc(1lh + 20px);
 padding: 4px;
 cursor: pointer;
}

.input:focus-visible,
.textarea:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
 outline: none;
 border-color: var(--ring);
 box-shadow: 0 0 0 3px
  color-mix(
   in srgb,
   var(--ring) 40%,
   transparent
  );
}

.label {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 14px;
 font-weight: 500;
 color: var(--foreground);
}

/* separator */
.separator {
 flex-shrink: 0;
 background: var(--border);
 border: 0;
}

.separator[data-orientation='horizontal'] {
 height: 1px;
 width: 100%;
 margin: 0;
}

.separator[data-orientation='vertical'] {
 width: 1px;
 align-self: stretch;
}

/* tabs */
.tabs {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.tabs-list {
 display: inline-flex;
 gap: 4px;
 padding: 4px;
 width: fit-content;
 border-radius: var(--radius-md);
 background: var(--muted);
}

.tab-trigger {
 padding: 6px 12px;
 border: 0;
 border-radius: var(--radius-sm);
 background: transparent;
 color: var(--muted-foreground);
 font: inherit;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
}

.tab-trigger.active {
 background: var(--background);
 color: var(--foreground);
 box-shadow: 0 1px 2px
  rgba(16, 23, 41, 0.08);
}

.tab-content {
 display: none;
}

.tab-content.active {
 display: block;
}

/* dialog */
.dialog-overlay {
 position: fixed;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px;
 background: rgba(0, 0, 0, 0.5);
 z-index: 50;
}

.dialog {
 width: 100%;
 max-width: 30rem;
 display: flex;
 flex-direction: column;
 gap: 16px;
 padding: 24px;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
 color: var(--card-foreground);
 box-shadow: 0 10px 30px
  rgba(0, 0, 0, 0.25);
}

.dialog-title {
 font-size: 18px;
 font-weight: 600;
}

.dialog-description {
 font-size: 14px;
 color: var(--muted-foreground);
}

.dialog-footer {
 display: flex;
 justify-content: flex-end;
 gap: 8px;
}

/* avatar */
.avatar {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 overflow: hidden;
 border-radius: var(--radius-md);
 background: var(--primary);
 color: var(--primary-foreground);
 font-size: 13px;
 font-weight: 700;
 flex-shrink: 0;
}

.avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* dropdown-menu */
.dropdown {
 position: relative;
}

.dropdown-menu {
 position: absolute;
 z-index: 40;
 min-width: 240px;
 margin-top: 6px;
 padding: 6px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 color: var(--card-foreground);
 box-shadow: 0 10px 30px
  rgba(0, 0, 0, 0.18);
}

.dropdown-menu[hidden] {
 display: none;
}

.dropdown-label {
 padding: 6px 8px;
 font-size: 12px;
 font-weight: 600;
 color: var(--muted-foreground);
}

.dropdown-separator {
 height: 1px;
 margin: 6px 0;
 background: var(--border);
 border: 0;
}

.dropdown-item {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 padding: 8px;
 border: 0;
 border-radius: var(--radius-sm);
 background: transparent;
 color: var(--foreground);
 font: inherit;
 font-size: 14px;
 text-align: left;
 cursor: pointer;
}

.dropdown-item:hover {
 background: var(--accent);
 color: var(--accent-foreground);
}

/* scroll-area */
.scroll-area {
 overflow: auto;
 max-height: 320px;
}

/* layout: shell / sidebar / content */
.app-shell {
 display: flex;
 --sidebar-width: 248px;
 min-height: 100vh;
}

.app-shell.sidebar-collapsed {
 --sidebar-width: 0px;
}

.sidebar {
 display: flex;
 flex-direction: column;
 position: sticky;
 top: 0;
 width: var(--sidebar-width);
 height: 100vh;
 max-height: 100vh;
 flex-shrink: 0;
 border-right: 1px solid var(--border);
 background: var(--card);
 transition:
  width 0.15s ease,
  border-color 0.15s ease;
 overflow: visible;
}

.sidebar-collapsed .sidebar {
 width: 0;
 border-right-color: transparent;
 overflow: hidden;
 visibility: hidden;
}

.sidebar-collapse-toggle {
 position: fixed;
 z-index: 40;
 top: 8px;
 left: calc(var(--sidebar-width) + 8px);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 color: var(--foreground);
 box-shadow: none;
 cursor: pointer;
 transition:
  left 0.15s ease,
  background-color 0.15s,
  color 0.15s,
  box-shadow 0.15s;
}

.sidebar-collapse-toggle:hover {
 background: var(--accent);
 color: var(--accent-foreground);
 box-shadow: 0 8px 24px
  rgba(16, 23, 41, 0.12);
}

.sidebar-collapse-toggle:focus-visible {
 outline: none;
 box-shadow:
  0 8px 24px rgba(16, 23, 41, 0.12),
  0 0 0 3px
   color-mix(
    in srgb,
    var(--ring) 40%,
    transparent
   );
}

.sidebar-collapse-toggle svg {
 width: 18px;
 height: 18px;
}

.sidebar-top {
 padding: 12px;
 border-bottom: 1px solid var(--border);
}

.sidebar-nav {
 display: flex;
 flex-direction: column;
 gap: 4px;
 flex: 1;
 min-height: 0;
 overflow: auto;
 padding: 12px;
}

.nav-section-label {
 margin: 14px 8px 4px;
 color: var(--muted-foreground);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.nav-item {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 padding: 8px 12px;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--muted-foreground);
 font: inherit;
 font-size: 14px;
 font-weight: 500;
 text-align: left;
 cursor: pointer;
}

.nav-item:hover {
 background: var(--accent);
 color: var(--accent-foreground);
}

.nav-item.active {
 background: var(--accent);
 color: var(--foreground);
}

.nav-item svg {
 width: 16px;
 height: 16px;
}

.sidebar-bottom {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 12px;
 border-top: 1px solid var(--border);
}

.sidebar-footer-row {
 display: flex;
 align-items: center;
 gap: 6px;
}

.sidebar-footer-row > .btn,
.sidebar-footer-row > .dropdown {
 flex: 1;
 min-width: 0;
}

.sidebar-footer-row > .dropdown > .btn {
 width: 100%;
}

.sidebar-footer-row
 > .dropdown:first-child
 > .btn {
 padding-left: 6px;
}

.sidebar-footer-row .dropdown-menu {
 top: auto;
 bottom: calc(100% + 6px);
 margin-top: 0;
}

.profile-trigger-text {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.color-mode-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 36px;
 height: 36px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--muted);
 color: var(--muted-foreground);
 font: inherit;
 cursor: pointer;
 transition:
  background-color 0.15s,
  color 0.15s,
  box-shadow 0.15s;
}

.color-mode-toggle:hover {
 background: var(--accent);
 color: var(--foreground);
}

.color-mode-toggle:focus-visible {
 outline: none;
 box-shadow: 0 0 0 3px
  color-mix(
   in srgb,
   var(--ring) 40%,
   transparent
  );
}

.color-mode-toggle svg {
 width: 16px;
 height: 16px;
}

.profile-header {
 align-items: center;
 gap: 12px;
}

.profile-header-text {
 min-width: 0;
}

.profile-name {
 font-size: 16px;
 font-weight: 600;
}

.profile-section-title {
 font-size: 14px;
 font-weight: 600;
}

.main {
 display: flex;
 flex-direction: column;
 position: relative;
 flex: 1;
 min-width: 0;
}

.page-loading-bar {
 position: absolute;
 z-index: 30;
 top: 0;
 left: 0;
 width: 0;
 height: 2px;
 background: var(--primary);
 opacity: 0;
 transition:
  width 0.5s ease,
  opacity 0.15s ease;
}

.page-loading-bar.active {
 width: 72%;
 opacity: 1;
}

.page-loading-bar.complete {
 width: 100%;
}

.content-loading {
 display: flex;
 min-height: 240px;
 align-items: center;
 justify-content: center;
 gap: 10px;
}

.portal-starting {
 position: fixed;
 inset: 0;
 z-index: 100;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 12px;
 background: var(--background);
 color: var(--muted-foreground);
 font-size: 14px;
 opacity: 1;
 pointer-events: none;
 transition: opacity 0.25s linear;
}

.portal-starting-exit {
 opacity: 0;
}

.portal-starting .loading-spinner {
 transition: transform 0.25s linear;
}

/* On exit, the spinner zooms to 10x as the overlay fades. animation:none frees
 * the transform property (the spin keyframes otherwise override it). */
.portal-starting-exit .loading-spinner {
 animation: none;
 transform: scale(10);
}

.loading-spinner {
 width: 18px;
 height: 18px;
 border: 2px solid currentColor;
 border-right-color: transparent;
 border-radius: 999px;
 color: var(--muted-foreground);
 animation: btn-spin 0.7s linear
  infinite;
}

.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 56px;
 padding: 0 24px;
 border-bottom: 1px solid var(--border);
 background: var(--card);
}

.topbar .crumb {
 font-size: 14px;
 color: var(--muted-foreground);
}

.topbar .crumb b {
 color: var(--foreground);
 font-weight: 600;
}

section.content {
 flex: 1;
 overflow: auto;
 background: var(--muted);
}

.page {
 padding: 32px;
 max-width: 64rem;
 min-height: 100%;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.page-grid {
 display: grid;
 min-width: 0;
 gap: 16px;
 margin-top: 16px;
}

.muted {
 color: var(--muted-foreground);
 font-size: 14px;
}

.row {
 display: flex;
 align-items: center;
 gap: 12px;
}

.workspace-row {
 width: 100%;
 padding: 0;
 border: 0;
 background: transparent;
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.user-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 0;
 border-bottom: 1px solid var(--border);
}

.user-row:last-child {
 border-bottom: 0;
}

.user-row-main {
 min-width: 0;
}

.user-row-title {
 font-weight: 600;
}

.user-row-actions {
 flex-shrink: 0;
}

.spread {
 justify-content: space-between;
}

.stack {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.stack[hidden] {
 display: none;
}

.paper {
 padding: 16px;
}

/* customer-menu (top-left switcher) */
.customer-menu {
 position: relative;
}

.customer-trigger {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 padding: 8px;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--foreground);
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.customer-trigger:hover {
 background: var(--accent);
}

.customer-static {
 cursor: default;
}

.customer-static:hover {
 background: transparent;
}

.customer-trigger .ct-text {
 display: flex;
 flex-direction: column;
 flex: 1;
 min-width: 0;
 align-items: flex-start;
 text-align: left;
}

.customer-trigger > svg:last-child {
 margin-left: auto;
 flex-shrink: 0;
}

.customer-trigger .ct-name {
 font-size: 14px;
 font-weight: 600;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.customer-trigger .ct-sub {
 font-size: 12px;
 color: var(--muted-foreground);
}

.customer-search {
 margin-bottom: 6px;
 text-align: left;
}

.customer-trigger
 + .dropdown-menu,
.customer-trigger + .dropdown-menu * {
 text-align: left;
}

.customer-item-check {
 margin-left: auto;
 color: #00ba7c;
}

/* gate (login + customer picker) */
.gate {
 display: grid;
 gap: 16px;
 margin: 4rem auto;
 max-width: 22rem;
 padding: 0 16px;
}

.color-mode-select {
 justify-self: start;
 width: auto;
}

.gate form {
 display: grid;
 gap: 12px;
}

.gate .switcher {
 display: flex;
 gap: 8px;
 font-size: 13px;
}

.gate .error {
 color: var(--destructive);
 font-size: 13px;
}

.gate .pick-list {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

/* mock banner */
.mock-banner {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 60;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 8px 12px;
 background: #f59e0b;
 color: #111827;
 font-size: 13px;
 font-weight: 600;
 box-shadow: 0 -1px 6px
  rgba(0, 0, 0, 0.2);
}

/* data table */
.table-wrap {
 overflow-x: auto;
 width: 100%;
 max-width: 100%;
 min-width: 0;
}

.table {
 width: 100%;
 border-collapse: collapse;
 font-size: 14px;
}

.table th {
 text-align: left;
 padding: 8px 10px;
 font-weight: 500;
 color: var(--muted-foreground);
 border-bottom: 1px solid var(--border);
 white-space: nowrap;
}

.table td {
 padding: 8px 10px;
 border-bottom: 1px solid var(--border);
 vertical-align: top;
}

.table tbody tr:last-child td {
 border-bottom: 0;
}

.table .num {
 text-align: right;
 font-variant-numeric: tabular-nums;
}

/* view helpers */
.toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin: 8px 0;
 flex-wrap: wrap;
}

.field {
 display: flex;
 flex-direction: column;
 min-width: 0;
 gap: 4px;
}

.field-grid {
 display: grid;
 gap: 12px;
 grid-template-columns: 1fr 1fr;
}

.empty {
 color: var(--muted-foreground);
 font-size: 14px;
 padding: 16px 0;
}

.link-inline {
 color: var(--primary);
 text-decoration: none;
 font-size: 13px;
}

.link-inline:hover {
 text-decoration: underline;
}

.status-banner {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 font-size: 13px;
 margin-top: 8px;
}

.status-banner.warn {
 border-color: #f59e0b;
}

.status-banner.info {
 border-color: #3b82f6;
}

.status-banner.danger {
 border-color: var(--destructive);
 color: var(--destructive);
}

/* badge color variants (status palettes) */
.badge-success {
 background: transparent;
 border-color: #16a34a;
 color: #16a34a;
}

.badge-warning {
 background: transparent;
 border-color: #d97706;
 color: #d97706;
}

.badge-info {
 background: transparent;
 border-color: #2563eb;
 color: #2563eb;
}

/* switch */
.switch {
 position: relative;
 display: inline-flex;
 align-items: center;
 width: 36px;
 height: 20px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: 9999px;
 background: var(--muted);
 cursor: pointer;
 transition: background 0.15s ease;
}

.switch:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

.switch-on {
 background: var(--primary);
 border-color: var(--primary);
}

.switch-thumb {
 position: absolute;
 left: 2px;
 width: 14px;
 height: 14px;
 border-radius: 9999px;
 background: var(--background);
 transition: transform 0.15s ease;
}

.switch-on .switch-thumb {
 transform: translateX(16px);
}

/* popover */
.popover {
 position: relative;
 display: inline-flex;
}

.popover-panel {
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 z-index: 40;
 min-width: 220px;
 max-width: 320px;
 padding: 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(
  --popover,
  var(--card)
 );
 color: var(--foreground);
 box-shadow: 0 8px 24px
  rgba(0, 0, 0, 0.18);
 font-size: 13px;
}

/* collapse */
.collapse {
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.collapse-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 padding: 10px 12px;
 border: none;
 background: transparent;
 color: var(--foreground);
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
}

.collapse-header span {
 text-align: left;
}

.collapse-header svg {
 transition: transform 0.15s ease;
 flex-shrink: 0;
}

.collapse-body {
 padding: 0 12px 12px;
}

/* integration status pills */
.pill-row {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin: 8px 0;
}

.pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 4px 10px;
 border: 1px solid var(--border);
 border-radius: 9999px;
 background: transparent;
 color: var(--foreground);
 font-size: 12px;
 cursor: pointer;
}

.pill-dot {
 width: 8px;
 height: 8px;
 border-radius: 9999px;
 background: var(--muted-foreground);
}

.pill-dot.ok {
 background: #16a34a;
}

.pill-dot.warn {
 background: #d97706;
}

.pill-dot.off {
 background: var(--destructive);
}

.pill-dot.info {
 background: #2563eb;
}

/* drift / inline warning text */
.text-danger {
 color: var(--destructive);
}

.text-warn {
 color: #d97706;
}

.text-ok {
 color: #16a34a;
}

/* Feature-specific styles live in their own files loaded by index.html:
 *   tasks.css     — task comment thread
 *   vault.css     — key/value field rows
 *   billing.css   — summary cards + Stripe footer
 *   settings.css  — permissions table + associations editor */