/* ============================================================
   Meridian CRM — components.css
   Buttons, inputs, menus, modals, toasts, badges, avatars,
   tabs, fields, tables, empty states, banners, stage ramp.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-13); font-weight: 500;
  white-space: nowrap; user-select: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn svg { flex-shrink: 0; }
.btn:hover { background: var(--surface-alt); box-shadow: var(--shadow-sm); }
.btn:active { background: var(--surface-sunken); transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-primary:active { background: var(--brand-strong); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.06); background: var(--danger); }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.06); background: var(--success); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--hover-layer); box-shadow: none; }
.btn-ghost:active { background: var(--active-layer); }
.btn-soft { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); }
.btn-soft:hover { background: var(--brand-softer); border-color: var(--border); box-shadow: none; }
html[data-theme="dark"] .btn-soft { color: var(--brand); }
.btn-sm { height: 26px; padding: 0 10px; font-size: var(--fs-12); border-radius: var(--r-sm); }
.btn-lg { height: 38px; padding: 0 18px; font-size: var(--fs-14); }
.btn-block { width: 100%; }
.btn-icon { width: 32px; height: 32px; padding: 0; }
.btn-icon.btn-sm { width: 26px; height: 26px; }
.btn-img { width: 36px; height: 36px; padding: 0; border-radius: 50%; }

/* ---------- Inputs ---------- */
.input, .select, .textarea {
  width: 100%;
  height: 32px; padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.textarea { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7890' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.input-sm { height: 26px; font-size: var(--fs-12); border-radius: var(--r-sm); padding: 0 8px; }
.input-ghost { border-color: transparent; background: transparent; }
.input-ghost:hover { background: var(--hover-layer); }
.input-ghost:focus { background: var(--surface); border-color: var(--brand); }

.checkbox { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong); border-radius: 3.5px; background: var(--surface);
  display: inline-grid; place-content: center; cursor: pointer; transition: all var(--t-fast) var(--ease); }
.checkbox:hover { border-color: var(--brand); }
.checkbox:checked { background: var(--brand); border-color: var(--brand); }
.checkbox:checked::after { content: ""; width: 8px; height: 8px; transform: translateY(0.5px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.checkbox:indeterminate { background: var(--brand); border-color: var(--brand); }
.checkbox:indeterminate::after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: #fff; }
.switch { appearance: none; -webkit-appearance: none; width: 34px; height: 19px; border-radius: var(--r-pill);
  background: var(--border-strong); position: relative; cursor: pointer; transition: background var(--t-fast) var(--ease); flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform var(--t-med) var(--ease); }
.switch:checked { background: var(--success); }
.switch:checked::after { transform: translateX(15px); }
input[type="radio"].radio { appearance: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface); cursor: pointer; transition: all var(--t-fast); }
input[type="radio"].radio:checked { border-color: var(--brand); border-width: 4.5px; }
input[type="date"].input, input[type="time"].input, input[type="datetime-local"].input { min-width: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }

/* Search affordance */
.searchbox { position: relative; display: flex; align-items: center; }
.searchbox > .searchbox-icon { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; display: inline-flex; }
.searchbox .input { padding-left: 30px; }

/* ---------- Field rows (forms) ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { font-size: var(--fs-12); color: var(--text-soft); font-weight: 550; display: flex; align-items: center; gap: 4px; }
.field-label .req { color: var(--danger); font-weight: 700; }
.field-help { font-size: var(--fs-11); color: var(--text-muted); }
.field-error { display: flex; align-items: flex-start; gap: 5px; font-size: var(--fs-12); color: var(--danger); animation: fieldErrIn var(--t-med) var(--ease); }
.field-error svg { flex-shrink: 0; margin-top: 1px; }
@keyframes fieldErrIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.field.invalid .input, .field.invalid .select, .field.invalid .textarea { border-color: var(--danger); }
.field-warning { font-size: var(--fs-11); color: var(--warning); display: flex; gap: 5px; align-items: center; }

/* ---------- Menus / dropdowns ---------- */
.menu {
  min-width: 190px; max-width: 340px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 5px;
  z-index: 2400;
  animation: menuIn var(--t-med) var(--ease);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(0.985); } to { opacity: 1; transform: none; } }
.menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 10px;
  border-radius: var(--r-md);
  font-size: var(--fs-13); color: var(--text);
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.menu-item svg { color: var(--text-muted); flex-shrink: 0; }
.menu-item:hover, .menu-item.menu-focus { background: var(--hover-layer); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger svg { color: var(--danger); }
.menu-item.disabled { opacity: 0.45; pointer-events: none; }
.menu-item .menu-sub { margin-left: auto; color: var(--text-faint); }
.menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.menu-header { padding: 8px 10px 4px; font-size: var(--fs-11); font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.menu-scroll { max-height: 380px; overflow-y: auto; }

/* ---------- Popover / panel ---------- */
.popover {
  position: absolute; z-index: 2350;
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: menuIn var(--t-med) var(--ease);
}

/* ---------- Modals ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--scrim);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 16px 16px;
  overflow-y: auto;
  animation: scrimIn var(--t-med) var(--ease-in-out);
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 560px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  max-height: 84vh;
  animation: modalIn var(--t-slow) var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal.modal-wide { max-width: 760px; }
.modal.modal-narrow { max-width: 420px; }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
}
.modal-title { font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.01em; }
.modal-subtitle { font-size: var(--fs-13); color: var(--text-muted); margin-top: 2px; }
.modal-body { padding: var(--sp-2) var(--sp-6) var(--sp-4); overflow-y: auto; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.modal-foot .foot-left { margin-right: auto; }
.modal.closing { animation: modalOut var(--t-fast) var(--ease) forwards; }
.modal-scrim.closing { animation: scrimOut var(--t-fast) var(--ease) forwards; }
@keyframes modalOut { to { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes scrimOut { to { opacity: 0; } }

/* ---------- Toasts ---------- */
#toast-root { position: fixed; top: calc(var(--topbar-h) + 12px); right: 16px; z-index: 4000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(380px, calc(100vw - 32px)); }
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--elevated); color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px 12px;
  animation: toastIn var(--t-slow) var(--ease);
}
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.error { border-left-color: var(--danger); }
.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast.success .toast-icon { color: var(--success); }
.toast.warning .toast-icon { color: var(--warning); }
.toast.error .toast-icon { color: var(--danger); }
.toast.info .toast-icon { color: var(--info); }
.toast-msg { font-size: var(--fs-13); line-height: 1.4; min-width: 0; }
.toast-action { font-size: var(--fs-12); font-weight: 650; color: var(--brand); padding: 2px 4px; border-radius: var(--r-sm); margin-top: 3px; }
.toast-action:hover { background: var(--brand-soft); text-decoration: none; }
.toast-close { margin-left: auto; color: var(--text-faint); flex-shrink: 0; padding: 2px; border-radius: var(--r-sm); }
.toast-close:hover { color: var(--text); background: var(--hover-layer); }
.toast.out { animation: toastOut var(--t-med) var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px) scale(0.97); } }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.01em;
  background: var(--neutral-soft); color: var(--text-soft);
  white-space: nowrap; max-width: 100%;
}
.badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge .badge-label { overflow: hidden; text-overflow: ellipsis; }
.badge-lg { height: 24px; font-size: var(--fs-12); padding: 0 10px; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-brand   { background: var(--brand-soft);   color: var(--brand-strong); }
html[data-theme="dark"] .badge-brand { color: var(--brand); }
.badge-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }

/* Status → tone */
.tone-queued   { background: var(--neutral-soft); color: var(--text-soft); }
.tone-progress { background: var(--info-soft); color: var(--info); }
.tone-hold     { background: var(--warning-soft); color: var(--warning); }
.tone-done     { background: var(--success-soft); color: var(--success); }
.tone-escalate { background: var(--danger-soft); color: var(--danger); }

/* Stage color ramp (used for opportunity stage chips, kanban columns, path) */
.stage-c-0 { --sc: #94a3b8; } /* Prospecting */
.stage-c-1 { --sc: #7f9cf5; } /* Qualification */
.stage-c-2 { --sc: #5f8fe8; } /* Needs Analysis */
.stage-c-3 { --sc: #38b48b; } /* Value Proposition */
.stage-c-4 { --sc: #b8a02c; } /* Proposal */
.stage-c-5 { --sc: #e8912b; } /* Price Quote */
.stage-c-6 { --sc: #e0563f; } /* Negotiation */
.stage-c-7 { --sc: #26a269; } /* Closed Won */
.stage-c-8 { --sc: #8b95a8; } /* Closed Lost */
html[data-theme="dark"] .stage-c-0 { --sc: #74809a; }
html[data-theme="dark"] .stage-c-1 { --sc: #8fa3f7; }
html[data-theme="dark"] .stage-c-2 { --sc: #7ba1f0; }
html[data-theme="dark"] .stage-c-3 { --sc: #4cc294; }
html[data-theme="dark"] .stage-c-4 { --sc: #d4b83a; }
html[data-theme="dark"] .stage-c-5 { --sc: #f0a35a; }
html[data-theme="dark"] .stage-c-6 { --sc: #f0786a; }
html[data-theme="dark"] .stage-c-7 { --sc: #43c587; }
html[data-theme="dark"] .stage-c-8 { --sc: #74809a; }
.badge-stage { background: color-mix(in srgb, var(--sc) 16%, transparent); color: var(--sc); }

/* ---------- Avatars ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: hsl(var(--av-h, 210) 55% 46%);
  color: #fff; font-size: var(--fs-11); font-weight: 650; letter-spacing: 0.02em;
  flex-shrink: 0; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  text-transform: uppercase;
}
.avatar-lg { width: 40px; height: 40px; font-size: var(--fs-14); }
.avatar-xl { width: 52px; height: 52px; font-size: var(--fs-18); }
.avatar-sm { width: 21px; height: 21px; font-size: var(--fs-9); }
.avatar-sq { border-radius: var(--r-md); }

/* Object identity square (icon tile) */
.obj-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--oc, var(--neutral)) 15%, transparent);
  color: var(--oc, var(--neutral));
  flex-shrink: 0;
}
.obj-tile-lg { width: 40px; height: 40px; border-radius: var(--r-lg); }

/* ---------- Tabs ---------- */
.tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 4px; margin-right: var(--sp-4);
  font-size: var(--fs-14); font-weight: 550; color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--text); }
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px;
  background: transparent; border-radius: 2px 2px 0 0;
  transition: background var(--t-med) var(--ease);
}
.tab[aria-selected="true"] { color: var(--brand); }
.tab[aria-selected="true"]::after { background: var(--brand); }
.tab .tab-count { font-size: var(--fs-11); color: var(--text-faint); font-weight: 600; }
.tabs-pill { border: 0; gap: 4px; background: var(--surface-sunken); padding: 3px; border-radius: var(--r-md); }
.tabs-pill .tab { padding: 5px 12px; margin: 0; border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: 600; }
.tabs-pill .tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.tabs-pill .tab[aria-selected="true"]::after { display: none; }

/* ---------- Tables ---------- */
.tbl-wrap { overflow: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
table.tbl { width: 100%; font-size: var(--fs-13); border-collapse: separate; border-spacing: 0; }
.tbl th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--fs-11); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0 10px; height: 34px;
  text-align: left; white-space: nowrap;
}
.tbl td {
  height: var(--row-h);
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-density="compact"] .tbl td { padding: 0 8px; }
.tbl tbody tr { transition: background var(--t-fast) var(--ease); }
.tbl tbody tr:hover { background: var(--hover-layer); }
.tbl tbody tr.row-selected { background: var(--selected-layer); }
.tbl tbody tr.row-selected:hover { background: var(--selected-layer); }
.tbl tbody tr.cursor-row { outline: 2px solid var(--brand); outline-offset: -2px; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--text); background: var(--surface-sunken); }
.sort-ind { display: inline-flex; margin-left: 4px; opacity: 0; color: var(--brand); transition: opacity var(--t-fast); }
.tbl th.sort-asc .sort-ind, .tbl th.sort-desc .sort-ind { opacity: 1; }
.col-resizer { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; }
.col-resizer:hover, .col-resizer.active { background: var(--brand-soft); }
.th-inner { display: inline-flex; align-items: center; gap: 2px; position: relative; }
.cell-dirty { box-shadow: inset 0 0 0 1.5px var(--warning); background: var(--warning-soft); border-radius: 3px; }
.cell-error { box-shadow: inset 0 0 0 1.5px var(--danger); background: var(--danger-soft); border-radius: 3px; }
.cell-editable { cursor: text; position: relative; }
.cell-editable:hover::after {
  content: ""; position: absolute; inset: 2px; border-radius: 3px;
  box-shadow: inset 0 0 0 1.25px var(--brand);
  pointer-events: none;
}
.cell-editor { width: 100%; height: calc(var(--row-h) - 6px); border: 1.5px solid var(--brand); border-radius: 4px;
  background: var(--surface); padding: 0 7px; font-size: var(--fs-13); box-shadow: 0 0 0 3px var(--brand-soft); }
.cell-editor-num { text-align: right; }

/* ---------- Empty states ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  padding: var(--sp-10) var(--sp-6);
  color: var(--text-muted);
}
.empty-state svg { color: var(--text-faint); margin-bottom: 6px; }
.empty-title { font-size: var(--fs-16); font-weight: 650; color: var(--text-soft); }
.empty-body { font-size: var(--fs-13); max-width: 380px; line-height: 1.55; }

/* ---------- Banners ---------- */
.banner {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--r-lg); padding: 10px 14px; font-size: var(--fs-13);
  border: 1px solid transparent;
}
.banner svg { flex-shrink: 0; margin-top: 1px; }
.banner-info { background: var(--info-soft); color: var(--text); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.banner-info svg { color: var(--info); }
.banner-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.banner-warning svg { color: var(--warning); }
.banner-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.banner-danger svg { color: var(--danger); }
.banner-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.banner-success svg { color: var(--success); }

/* ---------- Chips (filters / selections) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 4px 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  font-size: var(--fs-12); font-weight: 550; color: var(--text-soft);
  max-width: 260px;
}
.chip .chip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-clear { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; color: var(--text-muted); flex-shrink: 0; }
.chip-clear:hover { background: var(--active-layer); color: var(--text); }
.chip.active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand-strong); }
html[data-theme="dark"] .chip.active { color: var(--brand); }

/* ---------- Progress / meters ---------- */
.meter { height: 6px; background: var(--surface-sunken); border-radius: var(--r-pill); overflow: hidden; min-width: 60px; }
.meter-fill { height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease); }
.meter-fill.over { background: var(--success); }
.meter-fill.under { background: var(--warning); }

/* ---------- Dropdown typeahead list ---------- */
.typeahead { position: absolute; z-index: 2500; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: menuIn var(--t-med) var(--ease); }
.ta-section { padding: 4px; }
.ta-section + .ta-section { border-top: 1px solid var(--border); }
.ta-label { padding: 6px 10px 3px; font-size: var(--fs-11); font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.ta-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-md); cursor: pointer; }
.ta-item:hover, .ta-item.ta-focus { background: var(--hover-layer); }
.ta-item .ta-title { font-size: var(--fs-13); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-item .ta-sub { font-size: var(--fs-11); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-empty { padding: 14px 10px; text-align: center; color: var(--text-muted); font-size: var(--fs-13); }
mark { background: var(--warning-soft); color: inherit; border-radius: 2px; padding: 0 1px; }