/* ==========================================================================
   ESTRATO — Component primitives (Button, Input, Table, Dialog, Tooltip,
   Dropdown, Checkbox, Switch, Empty state). Implements COMPONENTS.md.
   Depends on tokens.css - load that first.
   ========================================================================== */

/* ---- Button --------------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-ui); font-weight:600; font-size:var(--text-body-sm-size);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--duration-instant) var(--ease-emphasized-out), filter var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn .material-symbols-rounded{ font-size:18px; }

.btn-sm{ padding:var(--space-2) var(--space-3); font-size:var(--text-caption-size); border-radius:var(--radius-sm); }
.btn-lg{ padding:var(--space-4) var(--space-6); font-size:var(--text-body-size); }

.btn-primary{ background:var(--color-accent); color:var(--color-accent-on); box-shadow:var(--elevation-1); }
.btn-primary:hover:not(:disabled){ filter:brightness(1.06); }

.btn-secondary{ background:var(--color-surface); border-color:var(--color-border-strong); color:var(--color-text); }
.btn-secondary:hover:not(:disabled){ background:var(--color-surface-2); }

.btn-ghost{ background:transparent; color:var(--color-text-2); }
.btn-ghost:hover:not(:disabled){ background:var(--color-surface-2); color:var(--color-text); }

.btn-danger{ background:var(--color-danger-bg); color:var(--color-danger-text); }
.btn-danger:hover:not(:disabled){ filter:brightness(0.96); }

.btn-icon{ width:40px; height:40px; padding:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-text-2); border:1px solid transparent; }
.btn-icon:hover:not(:disabled){ background:var(--color-surface-2); color:var(--color-text); }
.btn-icon.is-active{ background:var(--color-accent-soft); color:var(--color-accent-2); }

/* ---- Input -----------------------------------------------------------------*/
.field{ display:flex; flex-direction:column; gap:var(--space-1); }
.field-label{ font-family:var(--font-ui); font-size:var(--text-caption-size); font-weight:700; color:var(--color-text-2); }
.field-input, .field-select{
  font-family:var(--font-ui); font-size:var(--text-body-sm-size); color:var(--color-text);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); min-height:40px;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  width:100%; box-sizing:border-box;
}
.field-input:hover, .field-select:hover{ border-color:var(--color-border-strong); }
.field-input:focus, .field-select:focus{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }
.field-input:disabled{ opacity:.45; }
.field-input.is-mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.field-hint{ font-size:var(--text-caption-size); color:var(--color-text-3); }

/* The native <option> popup ignores `color-scheme` in some browser/OS combos
   (it follows the OS theme instead of the page's), rendering unreadable
   default-dark-on-dark or default-light text. Chromium/Firefox DO respect
   explicit background-color/color set directly on <option>, so set those
   as a second, more reliable line of defense. */
.field-select option{ background-color:var(--color-surface); color:var(--color-text); }

/* Mobile: 16px min font-size stops iOS Safari's auto-zoom-on-focus, and a
   taller min-height meets the ~44px touch-target guideline. */
@media (max-width:1023px){
  .field-input, .field-select{ font-size:16px; min-height:44px; }
}

/* ---- Enhanced select (desktop only) -----------------------------------
   Windows Chromium ignores both `color-scheme` and <option> background-color
   for the native dropdown popup (confirmed: it renders with a fixed light
   popup no matter the page theme), so the real fix is a custom popup we
   fully control. select-enhance.js hides the native <select> and builds
   this trigger+panel next to it, dispatching a real `change` event back to
   the hidden select so every existing listener keeps working unmodified.
   Mobile keeps the native control - the OS picker there is fine as-is. */
.select-enhanced{ position:relative; }
.select-enhanced select{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.select-enhanced-trigger{
  font-family:var(--font-ui); font-size:var(--text-body-sm-size); color:var(--color-text);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); min-height:40px;
  width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  cursor:pointer; text-align:left; transition:border-color var(--duration-fast) var(--ease-standard);
}
.select-enhanced-trigger span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-enhanced-trigger:hover{ border-color:var(--color-border-strong); }
.select-enhanced-trigger:focus-visible{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }
.select-enhanced-trigger[disabled]{ opacity:.45; cursor:not-allowed; }
.select-enhanced-trigger .material-symbols-rounded{ font-size:18px; color:var(--color-text-3); flex-shrink:0; }
.select-enhanced-panel{
  position:absolute; top:calc(100% + 4px); left:0; min-width:100%; z-index:40;
  background:var(--color-surface); border:1px solid var(--elevation-border); box-shadow:var(--elevation-3);
  border-radius:var(--radius-md); padding:var(--space-1); max-height:280px; overflow-y:auto;
  display:none;
}
.select-enhanced-panel.is-open{ display:block; }
.select-enhanced-option{
  display:block; width:100%; text-align:left; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
  font-family:var(--font-ui); font-size:var(--text-body-sm-size); color:var(--color-text); background:none; border:0; cursor:pointer;
  white-space:nowrap;
}
.select-enhanced-option:hover, .select-enhanced-option.is-focused{ background:var(--color-surface-2); }
.select-enhanced-option[aria-selected="true"]{ font-weight:700; color:var(--color-accent); }
@media (max-width:1023px){
  /* Native control on mobile - restore it and hide the custom layer. */
  .select-enhanced select{ position:static; opacity:1; pointer-events:auto; }
  .select-enhanced-trigger, .select-enhanced-panel{ display:none !important; }
}
.field.has-error .field-input{ border-color:var(--color-danger-text); background:color-mix(in srgb, var(--color-danger-bg) 55%, var(--color-surface-2)); }
.field-error{ display:flex; align-items:center; gap:var(--space-1); font-size:var(--text-caption-size); color:var(--color-danger-text); font-weight:600; }
.field-error .material-symbols-rounded{ font-size:14px; }

/* ---- Checkbox / Switch ------------------------------------------------------*/
.checkbox{ width:18px; height:18px; border-radius:var(--radius-xs); border:1.5px solid var(--color-border-strong); appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.checkbox:checked{ background:var(--color-accent); border-color:var(--color-accent); }
.checkbox:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }

.radio{ width:18px; height:18px; border-radius:var(--radius-full); border:1.5px solid var(--color-border-strong); appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
.radio:checked{ border-color:var(--color-accent); }
.radio:checked::after{ content:""; width:9px; height:9px; border-radius:var(--radius-full); background:var(--color-accent); }
.radio:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }

.switch{ position:relative; display:inline-flex; width:38px; height:21px; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.switch-track{ position:absolute; inset:0; border-radius:var(--radius-full); background:var(--color-border-strong); transition:background var(--duration-fast) var(--ease-standard); }
.switch input:checked + .switch-track{ background:var(--color-accent); }
.switch-thumb{ position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:var(--radius-full); background:#fff; transition:left var(--duration-fast) var(--ease-standard); }
.switch input:checked ~ .switch-thumb{ left:19px; }
.switch input:focus-visible ~ .switch-track{ box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }

/* ---- Table -------------------------------------------------------------------*/
.table-wrap{ position:relative; overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.table{ width:100%; border-collapse:collapse; min-width:640px; }
.table thead th{ position:sticky; top:0; background:var(--color-surface-2); text-align:left; font-size:var(--text-caption-size); font-weight:700; color:var(--color-text-2); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); white-space:nowrap; }
.table tbody td{ padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); font-size:var(--text-body-sm-size); color:var(--color-text); vertical-align:middle; }
.table tbody tr{ transition:background var(--duration-fast) var(--ease-standard); }
.table tbody tr:hover{ background:var(--color-surface-2); }
.table tbody tr.is-selected{ background:var(--color-accent-soft); }
.table .amount{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }
.table-detail{ background:var(--color-surface-2); padding:var(--space-4) var(--space-6); font-size:var(--text-caption-size); color:var(--color-text-2); display:flex; gap:var(--space-6); flex-wrap:wrap; }

/* ---- Dialog --------------------------------------------------------------------*/
.dialog-scrim{ position:fixed; inset:0; background:rgba(10,17,30,.45); display:flex; align-items:center; justify-content:center; padding:var(--space-6); z-index:80; opacity:0; pointer-events:none; transition:opacity var(--duration-slow) var(--ease-standard); }
.dialog-scrim.is-open{ opacity:1; pointer-events:auto; }
.dialog-panel{ background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--elevation-4); border:1px solid var(--elevation-border); width:100%; max-width:520px; transform:scale(.955); opacity:0; transition:transform var(--duration-slow) var(--ease-emphasized-out), opacity var(--duration-base) var(--ease-emphasized-out); max-height:85vh; display:flex; flex-direction:column; }
.dialog-scrim.is-open .dialog-panel{ transform:scale(1); opacity:1; }
.dialog-header{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-6); border-bottom:1px solid var(--color-border); }
.dialog-body{ padding:var(--space-6); overflow-y:auto; }
.dialog-footer{ display:flex; justify-content:flex-end; gap:var(--space-3); padding:var(--space-6); border-top:1px solid var(--color-border); }

/* ---- Tooltip ---------------------------------------------------------------------*/
.tooltip{ position:relative; }
.tooltip::after{
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--color-text); color:var(--color-bg); font-family:var(--font-ui); font-size:11px; font-weight:600;
  padding:5px 9px; border-radius:var(--radius-sm); white-space:nowrap; pointer-events:none; opacity:0; box-shadow:var(--elevation-2);
  transition:opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  z-index:60;
}
.tooltip:hover::after, .tooltip:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); transition-delay:.15s; }

/* ---- Empty state -----------------------------------------------------------------*/
.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--space-16) var(--space-6); gap:var(--space-1); }
.empty-state .material-symbols-rounded{ font-size:32px; color:var(--color-text-3); margin-bottom:var(--space-2); }
.empty-state-title{ font-size:var(--text-h4-size); font-weight:700; color:var(--color-text); }
.empty-state-body{ font-size:var(--text-body-sm-size); color:var(--color-text-2); max-width:38ch; margin-bottom:var(--space-4); }
.empty-state-sm{ padding:var(--space-8) var(--space-4); }
.empty-state-sm .material-symbols-rounded{ font-size:22px; }

/* ---- Alert -----------------------------------------------------------------------*/
.alert{ display:flex; align-items:flex-start; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:var(--text-body-sm-size); font-weight:600; }
.alert .material-symbols-rounded{ font-size:18px; flex-shrink:0; }
.alert-warning{ background:var(--color-warning-bg); color:var(--color-warning-text); }
.alert-danger{ background:var(--color-danger-bg); color:var(--color-danger-text); }
.alert-info{ background:var(--color-info-bg); color:var(--color-info-text); }
.alert-success{ background:var(--color-success-bg); color:var(--color-success-text); }

/* ---- Form field group (COMPONENTS.md form-redesign pass) ------------------------*/
.field-group{ border:0; margin:0; padding:0; }
.field-group + .field-group{ margin-top:var(--space-8); padding-top:var(--space-8); border-top:1px solid var(--color-border); }
.field-group-legend{ font-size:var(--text-h4-size); font-weight:700; color:var(--color-text); margin-bottom:2px; padding:0; }
.field-group-desc{ font-size:var(--text-body-sm-size); color:var(--color-text-2); margin-bottom:var(--space-4); }
.field-group-body{ display:flex; flex-direction:column; gap:var(--space-4); }
.radio-option{ display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius-md); border:1px solid var(--color-border); cursor:pointer; }
.radio-option:has(.radio:checked){ border-color:var(--color-accent); background:var(--color-accent-soft); }
.radio-option-label{ display:block; font-size:var(--text-body-sm-size); font-weight:700; color:var(--color-text); }
.radio-option-desc{ display:block; font-size:12.5px; color:var(--color-text-2); margin-top:3px; line-height:1.4; }

/* ---- Chip / tag input (WhatsApp numbers, authorized senders) -------------------*/
.tag-input{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:44px; padding:6px 8px; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.tag-input:focus-within{ border-color:var(--color-accent); box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }
.tag-pill{ display:inline-flex; align-items:center; gap:4px; background:var(--color-accent-soft); color:var(--color-accent-2); font-family:var(--font-mono); font-size:12px; font-weight:600; padding:4px 4px 4px 10px; border-radius:var(--radius-full); }
.tag-pill button{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:var(--radius-full); border:0; background:transparent; color:var(--color-accent-2); cursor:pointer; }
.tag-pill button:hover{ background:rgba(0,0,0,.08); }
.tag-pill button .material-symbols-rounded{ font-size:13px; }
.tag-input input{ flex:1; min-width:160px; border:0; background:transparent; font-family:var(--font-ui); font-size:var(--text-body-sm-size); color:var(--color-text); outline:none; padding:4px; }

/* ---- Autosave status --------------------------------------------------------------*/
.autosave-status{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--color-text-3); }
.autosave-status .material-symbols-rounded{ font-size:15px; }
.autosave-status.is-saving{ color:var(--color-text-2); }
.autosave-status.is-saved{ color:var(--color-success-text); }
.autosave-status .spin{ animation:estrato-spin 0.8s linear infinite; }
@keyframes estrato-spin{ to{ transform:rotate(360deg); } }