/* ============================================================================
   Aurora Design System — Insurity
   aurora-components.css — faithful CSS recreations of @insurity/aurora-react
   component looks (class strings transcribed from dist/lib/index.js).
   Requires colors_and_type.css for tokens + fonts. Pair with Lucide for icons.
   ============================================================================ */

/* ----------------------------------------------------------- BUTTONS --- */
.au-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  white-space:nowrap; border-radius:9999px; font-family:var(--font-brand);
  font-weight:500; font-size:.875rem; line-height:1.25rem; cursor:pointer;
  border:1px solid transparent; transition:all .18s ease; user-select:none;
  height:2.25rem; padding:0 1rem;                       /* size: default h-9 */
}
.au-btn svg{ width:1rem; height:1rem; flex:none; }
.au-btn.sm{ height:2rem; padding:0 .75rem; gap:.375rem; }
.au-btn.lg{ height:2.5rem; padding:0 1.5rem; }
.au-btn:disabled,.au-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }

.au-btn.primary{
  background:var(--primary); color:var(--primary-foreground);
  border-color:var(--primary); box-shadow:var(--shadow-brand-strong);
}
.au-btn.primary:hover{ background:var(--brand-background); border-color:var(--brand-background); }
.au-btn.primary:active{ background:var(--brand-background-2); border-color:var(--brand-background-2); }

.au-btn.secondary{
  background:var(--background); color:var(--foreground); border:1px solid var(--border);
  box-shadow:var(--shadow-brand-subtle);
}
.au-btn.secondary:hover{ color:var(--brand-foreground); }
.au-btn.secondary:active{ background:var(--secondary); }

.au-btn.outline{
  background:var(--background); color:var(--foreground); border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.au-btn.outline:hover{ background:var(--accent); color:var(--accent-foreground); }

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

.au-btn.destructive{ background:var(--destructive); color:#fff; border-color:var(--destructive); }
.au-btn.destructive:hover{ background:var(--color-red-500); border-color:var(--color-red-500); }

.au-btn.link{ background:transparent; color:var(--primary); padding:0; height:auto; border:none; box-shadow:none; }
.au-btn.link:hover{ text-decoration:underline; text-underline-offset:4px; }

.au-btn.icon{ width:2.25rem; height:2.25rem; padding:0; }

/* ----------------------------------------------------------- BADGES --- */
.au-badge{
  display:inline-flex; align-items:center; justify-content:center; gap:.25rem;
  border-radius:9999px; border:1px solid transparent; height:1.5rem;
  padding:.125rem .5rem; font-size:.75rem; font-weight:600; line-height:1;
  font-family:var(--font-sans); white-space:nowrap; width:fit-content;
}
.au-badge svg{ width:.75rem; height:.75rem; }
/* strong (filled) */
.au-badge.strong          { background:var(--primary); color:var(--primary-foreground); }
.au-badge.strong.error    { background:var(--color-red-600);   color:#fff; }
.au-badge.strong.success  { background:var(--color-green-700); color:#fff; }
.au-badge.strong.warning  { background:var(--color-yellow-700);color:#fff; }
.au-badge.strong.info     { background:var(--color-blue-600);  color:#fff; }
.au-badge.strong.magenta  { background:var(--color-magenta-600);color:#fff; }
.au-badge.strong.cyan     { background:var(--color-cyan-700);  color:#fff; }
.au-badge.strong.purple   { background:var(--color-purple-600);color:#fff; }
.au-badge.strong.pink     { background:var(--color-pink-700);  color:#fff; }
/* subtle (tinted) */
.au-badge.subtle          { background:var(--secondary); color:var(--secondary-foreground); border-color:#525252; }
.au-badge.subtle.error    { background:var(--color-red-50);    color:var(--color-red-700);    border-color:var(--color-red-700); }
.au-badge.subtle.success  { background:var(--color-green-50);  color:var(--color-green-700);  border-color:var(--color-green-700); }
.au-badge.subtle.warning  { background:var(--color-yellow-50); color:var(--color-yellow-700); border-color:var(--color-yellow-700); }
.au-badge.subtle.info     { background:var(--color-blue-50);   color:var(--color-blue-700);   border-color:var(--color-blue-700); }
.au-badge.subtle.magenta  { background:var(--color-magenta-50);color:var(--color-magenta-700);border-color:var(--color-magenta-700); }
.dark .au-badge.subtle.error  { background:var(--color-red-950);   color:#fca5a5; }
.dark .au-badge.subtle.success{ background:var(--color-green-950); color:#86efac; }
.dark .au-badge.subtle.warning{ background:var(--color-yellow-950);color:#fde047; }
.dark .au-badge.subtle.info   { background:var(--color-blue-950);  color:#93c5fd; }

/* ----------------------------------------------------------- INPUTS --- */
.au-input{
  height:2.25rem; width:100%; min-width:0; border-radius:var(--radius-md);
  border:1px solid var(--input); background:transparent; padding:0 .75rem;
  font-family:var(--font-sans); font-size:.875rem; color:var(--foreground);
  box-shadow:var(--shadow-xs); transition:box-shadow .15s,border-color .15s; outline:none;
}
.au-input::placeholder{ color:var(--muted-foreground); }
.au-input:focus{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 50%,transparent); }
.au-input.invalid{ border-color:var(--destructive); box-shadow:0 0 0 3px color-mix(in srgb,var(--destructive) 25%,transparent); }
.au-input:disabled{ opacity:.5; cursor:not-allowed; }
.dark .au-input{ background:rgba(255,255,255,.04); }
textarea.au-input{ height:auto; min-height:4.5rem; padding:.5rem .75rem; resize:vertical; }
.au-label{ font-family:var(--font-sans); font-size:.875rem; font-weight:500; color:var(--foreground); display:block; }

/* ----------------------------------------------------------- CARD --- */
.au-card{
  background:var(--card); color:var(--card-foreground); border:1px solid var(--border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:1rem; padding:1.5rem;
}
.au-card-title{ font-family:var(--font-sans); font-weight:600; line-height:1.1; color:var(--card-foreground); }
.au-card-desc{ color:var(--muted-foreground); font-size:.875rem; }

/* ----------------------------------------------------------- STAT --- */
.au-stat-label{ color:var(--muted-foreground); font-size:.875rem; display:flex; align-items:center; justify-content:space-between; }
.au-stat-label svg{ width:1.1rem; height:1.1rem; color:var(--muted-foreground); }
.au-stat-value{ font-family:var(--font-brand); font-weight:300; font-size:2.75rem; line-height:1.1; color:var(--foreground); }
.au-stat-delta{ color:var(--muted-foreground); font-size:.875rem; }
.au-stat-delta.up{ color:var(--color-green-700); }
.au-stat-delta.down{ color:var(--color-red-600); }

/* ----------------------------------------------------------- ALERT --- */
.au-alert{
  display:grid; grid-template-columns:auto 1fr; gap:.25rem .75rem;
  border:1px solid var(--border); background:var(--card); color:var(--card-foreground);
  border-radius:var(--radius-lg); padding:.875rem 1rem;
}
.au-alert svg{ width:1rem; height:1rem; margin-top:.15rem; }
.au-alert-title{ font-weight:600; grid-column:2; }
.au-alert-desc{ grid-column:2; color:var(--muted-foreground); font-size:.875rem; }
.au-alert > svg{ grid-row:1/span 2; }
.au-alert.destructive,.au-alert.error{ background:var(--color-red-50); border-color:var(--color-red-500); color:var(--color-red-700); }
.au-alert.error .au-alert-desc{ color:var(--color-red-700); }
.dark .au-alert.error{ background:var(--color-red-950); color:#fca5a5; border-color:var(--color-red-700); }
.au-alert.warning{ background:var(--color-yellow-50); border-color:var(--color-yellow-700); color:var(--color-yellow-700); }
.au-alert.info{ background:var(--color-blue-50); border-color:var(--color-blue-600); color:var(--color-blue-700); }
.au-alert.success{ background:var(--color-green-50); border-color:var(--color-green-700); color:var(--color-green-700); }

/* ----------------------------------------------------------- CHIP --- */
.au-chip{
  display:inline-flex; align-items:center; gap:.375rem; border-radius:9999px;
  border:1px solid var(--border); background:var(--background); color:var(--foreground);
  height:1.75rem; padding:0 .75rem; font-size:.8125rem; font-family:var(--font-sans);
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.au-chip svg{ width:.875rem; height:.875rem; }
.au-chip:hover{ background:var(--accent); }
.au-chip.selected{ background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }

/* ----------------------------------------------------------- TABS --- */
.au-tabs{ display:inline-flex; gap:.25rem; background:var(--secondary); padding:.25rem; border-radius:var(--radius-lg); }
.au-tab{ border:none; background:transparent; padding:.375rem .75rem; border-radius:var(--radius-md);
  font-family:var(--font-sans); font-size:.875rem; font-weight:500; color:var(--muted-foreground); cursor:pointer; }
.au-tab.active{ background:var(--background); color:var(--foreground); box-shadow:var(--shadow-xs); }

/* ----------------------------------------------------------- TABLE --- */
.au-table{ width:100%; border-collapse:collapse; font-family:var(--font-sans); font-size:.875rem; }
.au-table th{ text-align:left; font-weight:600; color:var(--foreground); padding:.625rem .75rem; }
.au-table td{ padding:.625rem .75rem; border-top:1px solid var(--border); color:var(--foreground); }
.au-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.au-table th.num{ text-align:right; }

/* --------------------------------------------------- FORM CONTROLS --- */
.au-check{ width:1rem; height:1rem; border-radius:var(--radius-sm); border:1px solid var(--ring);
  display:inline-flex; align-items:center; justify-content:center; background:var(--background); }
.au-check.on{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
.au-check svg{ width:.75rem; height:.75rem; }
.au-radio{ width:1rem; height:1rem; border-radius:9999px; border:1px solid var(--ring); display:inline-flex;
  align-items:center; justify-content:center; }
.au-radio.on{ border-color:var(--primary); }
.au-radio.on::after{ content:""; width:.5rem; height:.5rem; border-radius:9999px; background:var(--primary); }
.au-switch{ width:2rem; height:1.15rem; border-radius:9999px; background:var(--input); position:relative; transition:background .15s; flex:none; }
.au-switch.on{ background:var(--primary); }
.au-switch::after{ content:""; position:absolute; top:50%; left:2px; transform:translateY(-50%);
  width:1rem; height:1rem; border-radius:9999px; background:var(--background); transition:left .15s; box-shadow:var(--shadow-xs); }
.au-switch.on::after{ left:calc(100% - 1rem - 2px); }
.au-slider{ height:.375rem; border-radius:9999px; background:var(--muted); position:relative; }
.au-slider .fill{ position:absolute; left:0; top:0; bottom:0; border-radius:9999px; background:var(--primary); }
.au-slider .thumb{ position:absolute; top:50%; transform:translate(-50%,-50%); width:1rem; height:1rem;
  border-radius:9999px; background:#fff; border:1px solid var(--primary); box-shadow:var(--shadow-sm); }

/* ----------------------------------------------------------- AVATAR --- */
.au-avatar{ width:2.25rem; height:2.25rem; border-radius:9999px; background:var(--primary);
  color:var(--primary-foreground); display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-brand); font-weight:500; font-size:.875rem; overflow:hidden; flex:none; }

/* --------------------------------------------------- SIDEBAR / NAV --- */
.au-navitem{ display:flex; align-items:center; gap:.625rem; padding:.5rem .625rem; border-radius:var(--radius-md);
  font-family:var(--font-sans); font-size:.875rem; color:var(--sidebar-foreground,var(--foreground)); cursor:pointer; transition:background .15s; }
.au-navitem svg{ width:1.125rem; height:1.125rem; flex:none; }
.au-navitem:hover{ background:var(--accent); }
.au-navitem.active{ background:var(--accent); font-weight:500; }

/* ----------------------------------------------------- BRAND MARK --- */
.au-logo{ display:inline-flex; align-items:center; gap:.6rem; }
.au-logo .mark{ width:1.9rem; height:1.9rem; flex:none; display:inline-block;
  background-color:var(--foreground);
  -webkit-mask:url(assets/insurity-logomark-black.svg) center/contain no-repeat;
  mask:url(assets/insurity-logomark-black.svg) center/contain no-repeat; }
/* legacy placeholder tile (kept for any older refs) */
.au-logo .tile{ width:2rem; height:2rem; border-radius:var(--radius-md); background:var(--brand-background); display:inline-block; flex:none; }
.au-logo .word{ font-family:var(--font-brand); font-weight:700; font-size:1.125rem; color:var(--foreground); letter-spacing:-.01em; white-space:nowrap; }

/* ----------------------------------------------------------- KBD --- */
.au-kbd{ display:inline-flex; align-items:center; justify-content:center; min-width:1.5rem; height:1.5rem;
  padding:0 .375rem; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--secondary);
  font-family:var(--font-mono); font-size:.75rem; color:var(--muted-foreground); }