/* ============================================================
   Radar — Smart Services Mobile Design System
   Single bundled stylesheet (tokens + base + components + app).
   Dark by default · one fluorescent accent · pill buttons.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:"Clash Grotesk"; src:url("/fonts/ClashGrotesk-Extralight.otf") format("opentype"); font-weight:200; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("/fonts/ClashGrotesk-Light.otf") format("opentype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("/fonts/ClashGrotesk-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("/fonts/ClashGrotesk-Medium.otf") format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("/fonts/ClashGrotesk-Semibold.otf") format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("/fonts/ClashGrotesk-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("/fonts/SpaceGrotesk-Light.ttf") format("truetype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("/fonts/SpaceGrotesk-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("/fonts/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("/fonts/SpaceGrotesk-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("/fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/fonts/Inter-Variable.ttf") format("truetype"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Alexandria"; src:url("/fonts/Alexandria-Variable.ttf") format("truetype"); font-weight:100 900; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --color-bg-primary:#050505; --color-bg-secondary:#0b0b0b; --color-bg-elevated:#111111; --color-surface-subtle:#171717;
  --color-text-primary:#f5f5f3; --color-text-secondary:#a5a5a2; --color-text-tertiary:#737370; --color-text-inverse:#080808; --color-text-disabled:#50504e;
  --color-accent-primary:#eaff62; --color-accent-hover:#e0f550; --color-accent-active:#d2e83a; --color-accent-soft:rgba(234,255,98,.12);
  --color-border-default:#292929; --color-border-subtle:#1d1d1d; --color-border-accent:rgba(234,255,98,.35);
  --color-success:#6ee7a8; --color-success-soft:rgba(110,231,168,.12);
  --color-warning:#f5c451; --color-warning-soft:rgba(245,196,81,.12);
  --color-danger:#ff6b5e;  --color-danger-soft:rgba(255,107,94,.12);
  --color-info:#6fb6ff;     --color-info-soft:rgba(111,182,255,.12);

  --font-display:"Clash Grotesk","Space Grotesk",system-ui,sans-serif;
  --font-title:"Space Grotesk","Clash Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-wordmark:"Alexandria","Space Grotesk",system-ui,sans-serif;

  --text-display-md:3rem; --text-h1:2.25rem; --text-h2:1.75rem; --text-h3:1.375rem;
  --text-title:1.125rem; --text-body:.9375rem; --text-body-sm:.875rem; --text-label:.8125rem;
  --text-caption:.75rem; --text-eyebrow:.6875rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.5;
  --tracking-tight:-.03em; --tracking-snug:-.01em; --tracking-wide:.02em; --tracking-eyebrow:.18em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  --shadow-soft:0 12px 40px rgba(0,0,0,.28); --shadow-card:0 20px 60px rgba(0,0,0,.4);
  --glow-accent:0 0 40px rgba(234,255,98,.25); --focus-ring:0 0 0 3px rgba(234,255,98,.25);
  --glass-bg:rgba(8,8,8,.55); --glass-blur:blur(16px);
  --ease-out:cubic-bezier(.16,1,.3,1); --duration-base:240ms;
}

/* ---------- Base reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--color-bg-primary); color:var(--color-text-secondary);
  font-family:var(--font-body); font-size:var(--text-body); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{ margin:0; color:var(--color-text-primary); font-family:var(--font-display); font-weight:var(--weight-medium); line-height:var(--leading-snug); letter-spacing:var(--tracking-snug); }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--color-accent-primary); color:var(--color-text-inverse); }
*{ scrollbar-width:thin; scrollbar-color:var(--color-border-default) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--color-border-default); border-radius:var(--radius-pill); }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-xs); }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }

.eyebrow{ font-family:var(--font-title); font-size:var(--text-eyebrow); font-weight:var(--weight-medium); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-accent-primary); }
.muted{ color:var(--color-text-tertiary); }
.text-sm{ font-size:var(--text-body-sm); }
.mono{ font-family:var(--font-title); }

/* ============================================================
   App layout — sidebar + topbar
   ============================================================ */
.app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.sidebar{
  background:var(--color-bg-secondary); border-right:1px solid var(--color-border-subtle);
  padding:var(--space-6) var(--space-4); display:flex; flex-direction:column; gap:var(--space-6);
  position:sticky; top:0; height:100vh;
}
.brand{ display:flex; align-items:center; gap:var(--space-3); padding:0 var(--space-2); }
.brand img{ height:26px; width:auto; }
.brand .wordmark{ font-family:var(--font-wordmark); font-weight:700; letter-spacing:.04em; font-size:.95rem; color:var(--color-text-primary); }
.nav{ display:flex; flex-direction:column; gap:2px; }
.nav-label{ font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-text-tertiary); padding:var(--space-4) var(--space-3) var(--space-2); }
.nav a{
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius-sm);
  color:var(--color-text-secondary); font-size:var(--text-body-sm); transition:background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.nav a:hover{ background:var(--color-surface-subtle); color:var(--color-text-primary); }
.nav a.active{ background:var(--color-accent-soft); color:var(--color-accent-primary); }
.sidebar-foot{ margin-top:auto; border-top:1px solid var(--color-border-subtle); padding-top:var(--space-4); font-size:var(--text-caption); }
.sidebar-foot .name{ color:var(--color-text-primary); font-weight:var(--weight-medium); }

.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-5) var(--space-8); border-bottom:1px solid var(--color-border-subtle);
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); position:sticky; top:0; z-index:10;
}
.topbar h1{ font-size:var(--text-h2); }
.content{ padding:var(--space-8); max-width:1200px; width:100%; }

/* Centered auth / public shell */
.auth-shell{ min-height:100vh; display:grid; place-items:center; padding:var(--space-6);
  background:radial-gradient(1200px 600px at 50% -10%, rgba(234,255,98,.06), transparent 60%), var(--color-bg-primary); }
.auth-card{ width:100%; max-width:420px; }

/* ============================================================
   Components
   ============================================================ */
/* Buttons — pill, Clash Grotesk */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-display); font-weight:var(--weight-medium); font-size:var(--text-label);
  letter-spacing:var(--tracking-wide); border-radius:var(--radius-pill); border:1px solid transparent;
  padding:10px 20px; cursor:pointer; transition:all var(--duration-base) var(--ease-out); white-space:nowrap;
}
.btn:focus-visible{ box-shadow:var(--focus-ring); }
.btn-primary{ background:var(--color-accent-primary); color:var(--color-text-inverse); box-shadow:var(--glow-accent); }
.btn-primary:hover{ background:var(--color-accent-hover); transform:translateY(-1px); }
.btn-secondary{ background:var(--color-text-primary); color:var(--color-text-inverse); }
.btn-secondary:hover{ background:var(--color-accent-primary); }
.btn-outline{ background:transparent; color:var(--color-text-primary); border-color:var(--color-border-default); }
.btn-outline:hover{ border-color:var(--color-accent-primary); color:var(--color-accent-primary); background:var(--color-accent-soft); }
.btn-ghost{ background:transparent; color:var(--color-text-secondary); padding:8px 12px; }
.btn-ghost:hover{ color:var(--color-text-primary); background:var(--color-surface-subtle); }
.btn-danger{ background:var(--color-danger-soft); color:var(--color-danger); border-color:rgba(255,107,94,.3); }
.btn-danger:hover{ background:var(--color-danger); color:#fff; }
.btn-sm{ padding:6px 14px; font-size:var(--text-caption); }
.btn-lg{ padding:13px 26px; font-size:var(--text-body-sm); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Cards */
.card{ background:var(--color-bg-elevated); border:1px solid var(--color-border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); padding:var(--space-6); }
.card.accent{ border-top:2px solid var(--color-accent-primary); }
.card-title{ font-family:var(--font-title); font-size:var(--text-title); color:var(--color-text-primary); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-snug); }
.card + .card{ margin-top:var(--space-5); }

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-title); font-size:var(--text-caption); font-weight:var(--weight-medium); padding:3px 10px; border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap; }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-neutral{ background:var(--color-surface-subtle); color:var(--color-text-secondary); border-color:var(--color-border-default); }
.badge-accent{ background:var(--color-accent-soft); color:var(--color-accent-primary); border-color:var(--color-border-accent); }
.badge-success{ background:var(--color-success-soft); color:var(--color-success); }
.badge-warning{ background:var(--color-warning-soft); color:var(--color-warning); }
.badge-danger{ background:var(--color-danger-soft); color:var(--color-danger); }
.badge-info{ background:var(--color-info-soft); color:var(--color-info); }

/* Forms */
.field{ margin-bottom:var(--space-5); }
.field label, .form-label{ display:block; font-size:var(--text-label); font-weight:var(--weight-medium); color:var(--color-text-primary); margin-bottom:var(--space-2); }
.field .req{ color:var(--color-accent-primary); }
.hint{ font-size:var(--text-caption); color:var(--color-text-tertiary); margin-top:var(--space-2); }
.input, .select, textarea.input{
  width:100%; background:var(--color-surface-subtle); border:1px solid var(--color-border-default);
  border-radius:var(--radius-sm); color:var(--color-text-primary); font-family:var(--font-body); font-size:var(--text-body-sm);
  padding:10px 14px; transition:border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.input::placeholder, textarea.input::placeholder{ color:var(--color-text-disabled); }
.input:focus, .select:focus, textarea.input:focus{ outline:none; border-color:var(--color-accent-primary); box-shadow:var(--focus-ring); }
textarea.input{ min-height:96px; resize:vertical; }
.select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--color-text-tertiary) 50%),linear-gradient(135deg,var(--color-text-tertiary) 50%,transparent 50%); background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px; }
.field-error .input, .field-error .select{ border-color:var(--color-danger); }
.error-text{ color:var(--color-danger); font-size:var(--text-caption); margin-top:var(--space-2); }
.file-input{ color:var(--color-text-secondary); font-size:var(--text-body-sm); max-width:100%; }
.file-input::file-selector-button{
  font-family:var(--font-display); font-weight:var(--weight-medium); font-size:var(--text-caption); letter-spacing:var(--tracking-wide);
  background:transparent; color:var(--color-text-primary); border:1px solid var(--color-border-default);
  border-radius:var(--radius-pill); padding:6px 14px; margin-right:var(--space-3); cursor:pointer;
  transition:border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.file-input::file-selector-button:hover{ border-color:var(--color-accent-primary); color:var(--color-accent-primary); background:var(--color-accent-soft); }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--space-5); }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr; } .app{ grid-template-columns:1fr; } .sidebar{ position:static; height:auto; } }
.check-row{ display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-body-sm); }
.check-row input[type=checkbox]{ width:18px; height:18px; accent-color:var(--color-accent-primary); }

/* Alerts / flash */
.alert{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4); border-radius:var(--radius-sm); border:1px solid; font-size:var(--text-body-sm); margin-bottom:var(--space-5); }
.alert-info{ background:var(--color-info-soft); border-color:rgba(111,182,255,.3); color:var(--color-info); }
.alert-success{ background:var(--color-success-soft); border-color:rgba(110,231,168,.3); color:var(--color-success); }
.alert-warning{ background:var(--color-warning-soft); border-color:rgba(245,196,81,.3); color:var(--color-warning); }
.alert-danger{ background:var(--color-danger-soft); border-color:rgba(255,107,94,.3); color:var(--color-danger); }

/* Tables */
.table-wrap{ background:var(--color-bg-elevated); border:1px solid var(--color-border-default); border-radius:var(--radius-md); overflow:hidden; }
table.table{ width:100%; border-collapse:collapse; font-size:var(--text-body-sm); }
.table thead th{ text-align:left; font-family:var(--font-title); font-size:var(--text-caption); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-tertiary); font-weight:var(--weight-medium); padding:var(--space-4); border-bottom:1px solid var(--color-border-default); }
.table tbody td{ padding:var(--space-4); border-bottom:1px solid var(--color-border-subtle); color:var(--color-text-secondary); vertical-align:middle; }
.table tbody tr{ transition:background var(--duration-base) var(--ease-out); }
.table tbody tr:hover{ background:var(--color-surface-subtle); }
.table tbody tr:last-child td{ border-bottom:none; }
.table .code{ font-family:var(--font-title); color:var(--color-text-primary); font-weight:var(--weight-medium); }
.row-link{ cursor:pointer; }
.empty{ text-align:center; padding:var(--space-16) var(--space-6); color:var(--color-text-tertiary); }

/* Tabs */
.tabs{ display:flex; gap:var(--space-6); border-bottom:1px solid var(--color-border-default); margin-bottom:var(--space-6); }
.tabs a{ padding:var(--space-3) 0; font-family:var(--font-title); font-size:var(--text-body-sm); color:var(--color-text-tertiary); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a.active{ color:var(--color-text-primary); border-bottom-color:var(--color-accent-primary); }
.tabs a:hover{ color:var(--color-text-primary); }

/* Filters bar */
.filters{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-end; margin-bottom:var(--space-6); }
.filters .field{ margin-bottom:0; min-width:150px; }
.filters .field label{ font-size:var(--text-caption); color:var(--color-text-tertiary); }
.filters .input, .filters .select{ padding:8px 12px; }

/* Stat cards / dashboard */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-5); margin-bottom:var(--space-6); }
.stat{ background:var(--color-bg-elevated); border:1px solid var(--color-border-default); border-radius:var(--radius-md); padding:var(--space-5); }
.stat .label{ font-size:var(--text-caption); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-tertiary); }
.stat .value{ font-family:var(--font-display); font-size:var(--text-display-md); color:var(--color-text-primary); line-height:1; margin-top:var(--space-3); letter-spacing:var(--tracking-tight); }
.stat .value.accent{ color:var(--color-accent-primary); }
.bar-row{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); font-size:var(--text-body-sm); }
.bar-row .bar-label{ width:130px; color:var(--color-text-secondary); flex-shrink:0; }
.bar-track{ flex:1; height:10px; background:var(--color-surface-subtle); border-radius:var(--radius-pill); overflow:hidden; }
.bar-fill{ height:100%; background:var(--color-accent-primary); border-radius:var(--radius-pill); }
.bar-row .bar-num{ width:36px; text-align:right; color:var(--color-text-primary); font-family:var(--font-title); }

/* Detail layout */
.detail-grid{ display:grid; grid-template-columns:1fr 320px; gap:var(--space-6); align-items:start; }
@media (max-width:900px){ .detail-grid{ grid-template-columns:1fr; } }
.kv{ display:grid; grid-template-columns:1fr; gap:var(--space-4); }
.kv .k{ font-size:var(--text-caption); text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-tertiary); }
.kv .v{ color:var(--color-text-primary); margin-top:2px; }
.meta-list{ display:flex; flex-direction:column; gap:var(--space-4); }
.meta-list .k{ font-size:var(--text-caption); text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-tertiary); }

/* Comments & timeline */
.comment{ border:1px solid var(--color-border-subtle); border-radius:var(--radius-sm); padding:var(--space-4); margin-bottom:var(--space-3); background:var(--color-bg-secondary); }
.comment.internal{ border-color:var(--color-border-accent); background:var(--color-accent-soft); }
.comment .who{ font-size:var(--text-caption); color:var(--color-text-tertiary); margin-bottom:var(--space-2); }
.timeline{ list-style:none; padding:0; margin:0; }
.timeline li{ position:relative; padding:0 0 var(--space-4) var(--space-6); border-left:1px solid var(--color-border-default); }
.timeline li::before{ content:""; position:absolute; left:-4px; top:4px; width:7px; height:7px; border-radius:50%; background:var(--color-accent-primary); }
.timeline li:last-child{ border-left-color:transparent; }
.timeline .t{ color:var(--color-text-primary); font-size:var(--text-body-sm); }
.timeline .ts{ font-size:var(--text-caption); color:var(--color-text-tertiary); }

/* Utilities */
.stack{ display:flex; flex-direction:column; gap:var(--space-4); }
.row{ display:flex; gap:var(--space-3); align-items:center; }
.row.wrap{ flex-wrap:wrap; }
.between{ justify-content:space-between; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5); gap:var(--space-4); }
.section-head h2{ font-size:var(--text-h3); }
.mt-0{ margin-top:0; } .mb-4{ margin-bottom:var(--space-4); } .mb-6{ margin-bottom:var(--space-6); }
.divider{ height:1px; background:var(--color-border-subtle); margin:var(--space-5) 0; }
.right{ margin-left:auto; }

/* Checkbox row alignment fix — keep box and label on the same baseline */
.check-row{ align-items:center; }
.check-row label{ margin:0 !important; display:inline; font-weight:var(--weight-regular); color:var(--color-text-secondary); }
.check-row input[type=checkbox]{ flex:0 0 auto; margin:0; }

/* Sortable table headers */
.sort-link{ color:var(--color-text-tertiary); display:inline-flex; gap:4px; align-items:center; }
.sort-link:hover{ color:var(--color-text-primary); }
.table thead th .sort-link{ font:inherit; letter-spacing:inherit; text-transform:inherit; }

/* Dropzone (evidence upload) */
.dz-input{ display:none; }
.dropzone{
  border:1.5px dashed var(--color-border-default); border-radius:var(--radius-md);
  background:var(--color-surface-subtle); padding:var(--space-8) var(--space-6); text-align:center;
  cursor:pointer; transition:border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.dropzone:hover{ border-color:var(--color-accent-primary); }
.dropzone.is-dragover{ border-color:var(--color-accent-primary); background:var(--color-accent-soft); }
.dz-prompt{ color:var(--color-text-secondary); font-size:var(--text-body-sm); }
.dz-prompt strong{ color:var(--color-text-primary); }
.dz-list{ margin-top:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2); }
.dz-item{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); background:var(--color-bg-secondary); border:1px solid var(--color-border-subtle); border-radius:var(--radius-sm); font-size:var(--text-body-sm); }
.dz-item .dz-name{ color:var(--color-text-primary); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-item .dz-size{ color:var(--color-text-tertiary); font-size:var(--text-caption); }
.dz-item .dz-remove{ background:transparent; border:none; color:var(--color-text-tertiary); cursor:pointer; font-size:var(--text-body); padding:0 var(--space-2); }
.dz-item .dz-remove:hover{ color:var(--color-danger); }

/* ============================================================
   Tom Select — themed to behave exactly like a native .input/.select
   ------------------------------------------------------------
   Tom Select copies the original <select class="select"> classes onto
   its .ts-wrapper, so the global `.input,.select` field styles leak onto
   the wrapper and create a SECOND, misaligned box around the real control.
   Fix: neutralise the wrapper (transparent passthrough) and make
   .ts-control the single field box, mirroring .input. The open menu then
   attaches to the control as one panel.
   ============================================================ */

/* 1. Wrapper is a transparent passthrough — strip the leaked field box
      (border/padding/radius/shadow) and the leaked native-select caret.
      `.ts-wrapper.select` (0,2,0) outranks `.input,.select` (0,1,0). */
.ts-wrapper.select,
.ts-wrapper.input{
  font-family:var(--font-body);
  background:none; background-image:none;
  border:0; border-radius:0; padding:0; min-height:0; box-shadow:none;
}

/* 2. The control IS the field — mirror .input precisely. */
.ts-control{
  display:flex; align-items:center; flex-wrap:wrap;
  min-height:40px; padding:6px 14px;
  background:var(--color-surface-subtle) !important;
  border:1px solid var(--color-border-default) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--color-text-primary) !important;
  box-shadow:none !important;
  transition:border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.ts-control, .ts-control > input{ font-size:var(--text-body-sm) !important; line-height:1.5 !important; }
.ts-control > input{ color:var(--color-text-primary) !important; }
.ts-control > input::placeholder{ color:var(--color-text-disabled) !important; }

/* 3. Focus, menu closed — accent border + ring, like .input:focus. */
.ts-wrapper.focus:not(.dropdown-active) .ts-control{
  border-color:var(--color-accent-primary) !important;
  box-shadow:var(--focus-ring) !important;
}

/* 4. Open — control + menu form one attached panel (no ring, shared seam). */
.ts-wrapper.dropdown-active .ts-control{
  border-color:var(--color-accent-primary) !important;
  border-bottom-color:transparent !important;
  border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important;
  box-shadow:none !important;
}
.ts-dropdown{
  margin:0 !important; left:0; width:100%;
  background:var(--color-bg-elevated) !important;
  border:1px solid var(--color-accent-primary) !important; border-top:0 !important;
  border-radius:0 0 var(--radius-sm) var(--radius-sm) !important;
  box-shadow:var(--shadow-soft) !important;
  overflow:hidden !important;
}
.ts-dropdown .option{ padding:9px 14px !important; color:var(--color-text-secondary) !important; font-size:var(--text-body-sm); }
.ts-dropdown .option:hover,
.ts-dropdown .option.active{ background:var(--color-accent-soft) !important; color:var(--color-accent-primary) !important; }
.ts-dropdown .option[aria-selected="true"]{ color:var(--color-text-primary) !important; }
.ts-dropdown .no-results{ padding:9px 14px !important; color:var(--color-text-tertiary) !important; }

/* 5. Single-select caret. */
.ts-wrapper.single .ts-control:after{ border-color:var(--color-text-tertiary) transparent transparent !important; }

/* 6. Multi-select chips. */
.ts-wrapper.multi .ts-control{ padding:4px 14px; }
/* Once a value/chip is selected (single or multi), drop the leftover search
   placeholder — otherwise it lingers next to the chosen value ("Valor Selecciona…"). */
.ts-wrapper.has-items .ts-control > input::placeholder{ color:transparent !important; }
.ts-wrapper.multi .ts-control > .item{
  display:inline-flex; align-items:center; margin:2px 6px 2px 0;
  background:var(--color-accent-soft) !important; color:var(--color-accent-primary) !important;
  border:1px solid var(--color-border-accent) !important;
  border-radius:var(--radius-pill) !important; padding:2px 4px 2px 10px !important;
  font-size:var(--text-caption); line-height:1.4 !important;
}
.ts-wrapper.multi .ts-control > .item .remove{
  border-left:1px solid var(--color-border-accent) !important;
  color:var(--color-accent-primary) !important; padding:0 6px; margin-left:6px;
}
.ts-wrapper.multi .ts-control > .item .remove:hover{ background:transparent !important; color:var(--color-danger) !important; }