/* ═══════════════════════════════════════════════════════════════════
   SITHIYAM OS v5.1 — COMMON COMPONENT OVERRIDES
   Cards, tags, buttons, form fields, modals, toasts
   Load AFTER styles.css and design tokens.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
  box-shadow: var(--sh1);
  padding: 20px;
  transition: box-shadow .2s var(--eio), border-color .2s var(--eio);
}
.card:hover {
  box-shadow: var(--sh2);
  border-color: var(--b2);
}
.card.teal,
.card.gold {
  background: linear-gradient(135deg, var(--g9), var(--bgf));
  border-color: var(--gr);
}


/* ── Tags / Badges ─────────────────────────────────────────────── */
.tag {
  border-radius: var(--rp);
  padding: 4px 10px;
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
  text-transform: uppercase;
}

.tag-green, .tag--green, .tag-confirmed {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(26, 107, 90, .15);
}
.tag-blue, .tag--blue, .tag-sent {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: rgba(74, 101, 128, .15);
}
.tag-amber, .tag--amber, .tag-followup, .tag-follow-up {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(169, 101, 18, .15);
}
.tag-purple, .tag--purple {
  background: var(--violet-soft);
  color: var(--violet);
  border-color: rgba(139, 94, 106, .15);
}
.tag-red, .tag--red, .tag-cancelled {
  background: var(--red-soft);
  color: var(--red);
  border-color: rgba(183, 63, 63, .15);
}
.tag-gray, .tag--gray, .tag-draft {
  background: var(--bgr);
  color: var(--t4);
  border-color: var(--b1);
}
.tag-warn {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(169, 101, 18, .2);
  font-size: 10px;
}
.tag-gold {
  background: rgba(196, 154, 60, .10);
  color: var(--g3);
  border-color: var(--gr);
}


/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  border-radius: var(--rp);
  padding: 9px 18px;
  font-family: var(--fu);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--bgr);
  border: 1px solid var(--b1);
  color: var(--t2);
  cursor: pointer;
  transition: background .15s var(--eio), border-color .15s var(--eio), color .15s var(--eio), box-shadow .15s var(--eio);
}
.btn:hover {
  background: var(--gg);
  border-color: var(--b2);
  color: var(--t1);
}
.btn:active {
  border-color: var(--b3);
}

/* Gold primary button */
.btn-teal,
.btn-gold,
.btn--gold {
  background: linear-gradient(135deg, var(--g5), var(--g3));
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(139, 105, 20, .18);
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.btn-teal:hover,
.btn-gold:hover,
.btn--gold:hover {
  background: linear-gradient(135deg, var(--g4), var(--g2));
  box-shadow: 0 6px 20px rgba(139, 105, 20, .25);
  color: #fff;
}

/* Blue secondary */
.btn-blue,
.btn--blue {
  background: linear-gradient(135deg, #5B7A9A, var(--blue));
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(74, 101, 128, .18);
}
.btn-blue:hover,
.btn--blue:hover {
  box-shadow: 0 6px 20px rgba(74, 101, 128, .25);
  color: #fff;
}

/* Danger / destructive */
.btn-red,
.btn--red {
  background: none;
  border: none;
  color: var(--red);
  font-size: 14px;
}
.btn-red:hover,
.btn--red:hover {
  color: #943030;
  background: var(--red-soft);
}

/* Outline / ghost */
.btn-outline,
.btn--outline {
  background: transparent;
  border: 1px solid var(--b2);
  color: var(--t2);
}
.btn-outline:hover,
.btn--outline:hover {
  background: var(--gg);
  border-color: var(--gr);
  color: var(--g3);
}

/* Sizes */
.btn-sm { padding: 6px 12px; font-size: 11px; }
.btn-xs { padding: 3px 8px; font-size: 10px; border-radius: 9px; }
.btn-lg { padding: 12px 24px; font-size: 14px; }


/* ── Form Fields (.f wrapper) ──────────────────────────────────── */
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 100px;
}
.f > label,
.f > .lbl {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t4);
}


/* ── Inputs, Selects, Textareas ────────────────────────────────── */
input, select, textarea {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t1);
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  padding: 10px 12px;
  transition: border-color .15s var(--eio), box-shadow .15s var(--eio);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--g5);
  box-shadow: 0 0 0 3px var(--gr);
  outline: none;
}
input::placeholder, textarea::placeholder {
  color: var(--t5);
}
textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}
select {
  cursor: pointer;
}

/* Number inputs — narrower padding */
input[type="number"] {
  padding-right: 4px;
}

/* Disabled / readonly */
input:disabled, select:disabled, textarea:disabled,
input[readonly], select[readonly], textarea[readonly] {
  background: var(--bgr);
  color: var(--t4);
  border-color: var(--b0);
  cursor: not-allowed;
}


/* ── Score Cards / KPI Cards ───────────────────────────────────── */
.score-card,
.stat-card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
  padding: 18px 20px;
  box-shadow: var(--sh1);
}
.score-card h3,
.stat-card h3 {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t4);
  margin: 0 0 6px;
}
.score-card .value,
.stat-card .value {
  font-family: var(--fd);
  font-size: 28px;
  font-weight: 600;
  color: var(--t1);
}
.score-card .sub,
.stat-card .sub {
  font-size: 12px;
  color: var(--t4);
  margin-top: 4px;
}


/* ── Modals / Dialogs ──────────────────────────────────────────── */
.modal-overlay,
.vb-modal-overlay {
  background: rgba(26, 20, 10, .4) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-box,
.vb-modal-box,
#clientModal > div,
#vbChoiceModal > div > div {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r4) !important;
  box-shadow: var(--sh3);
}

/* Modal headers */
.modal-box h2,
.vb-modal-box h2,
.modal-box h3,
.vb-modal-box h3 {
  font-family: var(--fu);
  font-weight: 800;
  color: var(--t1);
}


/* ── Toasts ────────────────────────────────────────────────────── */
.toast {
  border-radius: var(--r2) !important;
  background: linear-gradient(135deg, var(--g5), var(--g3)) !important;
  color: #fff !important;
  box-shadow: 0 12px 36px rgba(139, 105, 20, .22) !important;
  font-family: var(--fu);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
}
.toast.error {
  background: linear-gradient(135deg, var(--red), #943030) !important;
}


/* ── Section Headers ───────────────────────────────────────────── */
.section-title,
.card > h3:first-child,
.card > h2:first-child {
  font-family: var(--fu);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--t1);
}
.section-subtitle {
  font-family: var(--fb);
  color: var(--t3);
  font-size: 13px;
}

/* Uppercase micro-labels used throughout */
.micro-label {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t5);
}


/* ── Tables ────────────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t4);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--b1);
}
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--b0);
  font-size: 13px;
  color: var(--t2);
}
tr:hover td {
  background: var(--gg);
}


/* ── Dividers / Lines ──────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--b0);
  margin: 16px 0;
}


/* ── Links ─────────────────────────────────────────────────────── */
a {
  color: var(--g3);
  text-decoration: none;
  transition: color .15s;
}
a:hover {
  color: var(--g2);
}


/* ── Typography Helpers ────────────────────────────────────────── */
.display-value {
  font-family: var(--fd);
  font-weight: 600;
  color: var(--t1);
}
.ui-label {
  font-family: var(--fu);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.body-text {
  font-family: var(--fb);
  color: var(--t2);
  line-height: 1.55;
}


/* ── Chip / Pill Buttons ───────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--rp);
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  background: var(--bgr);
  color: var(--t3);
  border: 1px solid var(--b0);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover {
  background: var(--gg);
  border-color: var(--gr);
  color: var(--g3);
}
.chip.active,
.chip.on {
  background: rgba(196, 154, 60, .10);
  border-color: var(--gr);
  color: var(--g3);
}


/* ── Empty States ──────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--t4);
}
.empty-state p {
  font-size: 13px;
  margin-top: 8px;
}


/* ── Loading / Skeleton ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bgr) 25%, var(--bgo) 50%, var(--bgr) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r1);
}


/* ── Intelligence: Heat-map Rates ──────────────────────────────── */
.heat-rate {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--fd);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.heat-rate--low  { background: var(--green-soft); color: var(--green); }
.heat-rate--mid  { background: var(--amber-soft); color: var(--amber); }
.heat-rate--high { background: rgba(196,154,60,.1); color: var(--g3); }
.heat-rate--premium { background: var(--red-soft); color: var(--red); }
.heat-rate--na   { background: var(--bgr); color: var(--t5); }


/* ── Intelligence: Health Ring ─────────────────────────────────── */
.health-ring-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.health-ring-factors {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.health-factor {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--t3);
}
.health-factor__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.health-factor__dot.ok      { background: var(--green); }
.health-factor__dot.partial { background: var(--amber); }
.health-factor__dot.missing { background: var(--red); }
.health-factor__dot.warning { background: var(--amber); }
.health-factor__dot.optional{ background: var(--t5); }


/* ── Intelligence: Sparkline Container ─────────────────────────── */
.sparkline-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sparkline-label {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t5);
}
.sparkline-value {
  font-family: var(--fd);
  font-size: 16px;
  font-weight: 600;
  color: var(--t1);
}


/* ── Intelligence: Command Palette Keyboard Nav ────────────────── */
.cmd-palette__result:focus,
.cmd-palette__result.highlighted {
  background: var(--bgr);
  outline: none;
}
.cmd-palette__result:active {
  background: var(--gg);
}