/* =============================================================
   Honora Design System — Component Classes
   All values reference tokens from tokens.css (--color-*, --gradient-*,
   --radius-*, --shadow-*, etc.). No hex color values here.
   Naming convention: .h-{component}[-{modifier}]
   ============================================================= */

/* ---------------------------------------------------------------
   BASE STYLES
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------
   BUTTONS — .h-btn + variant + optional size modifier
   --------------------------------------------------------------- */
.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  transition: filter var(--dur-fast) ease, opacity var(--dur-fast) ease, transform 100ms ease;
}
.h-btn:active { transform: scale(0.98); }
.h-btn:hover  { filter: brightness(1.06); }

.h-btn-action {
  background: var(--gradient-action);
  color: #fff;
}
.h-btn-teal   { background: var(--color-teal);   color: #fff; }
.h-btn-violet { background: var(--color-violet);  color: #fff; }
.h-btn-ghost  {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.h-btn-text {
  background: transparent;
  color: var(--color-violet);
  padding: 6px 8px;
  border: none;
}

.h-btn-sm { padding: 8px 14px; font-size: 13px; }
.h-btn-lg { padding: 16px 24px; font-size: 17px; }
.h-btn-block { width: 100%; }

/* ---------------------------------------------------------------
   CARD
   --------------------------------------------------------------- */
.h-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------
   INPUTS — .h-field wraps label + control
   --------------------------------------------------------------- */
.h-field { display: flex; flex-direction: column; gap: 6px; }

.h-label {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.h-input,
.h-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-fast);
  appearance: none;
}
.h-input:focus,
.h-select:focus  { border-color: var(--color-teal); }

.h-input-violet              { border-color: var(--color-violet); }
.h-input-violet:focus        { border-color: var(--color-violet); }

/* ---------------------------------------------------------------
   TOGGLE — .h-toggle on the track span; data-on drives the state
   .honora-toggle-row already exists as the outer label class
   --------------------------------------------------------------- */
.honora-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  cursor: pointer;
}

.h-toggle {
  width: 44px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  border: 1px solid transparent;
  position: relative;
  transition: background var(--dur-med), border-color var(--dur-med);
  flex: none;
}

.h-toggle[data-on="true"] {
  background: var(--color-teal);
  border-color: var(--color-teal);
}

.h-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--dur-med);
  transform: translateX(0);
}

.h-toggle[data-on="true"]::after { transform: translateX(18px); }

/* ---------------------------------------------------------------
   BADGES — .h-badge + variant + optional .h-badge-dot
   --------------------------------------------------------------- */
.h-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.h-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex: none;
}

.h-badge-neutral { background: var(--color-surface-alt);       color: var(--color-text-muted); }
.h-badge-pos     { background: var(--color-money-positive-bg); color: var(--color-money-positive); }
.h-badge-neg     { background: var(--color-money-negative-bg); color: var(--color-money-negative); }
.h-badge-warn    { background: var(--color-warning-bg);        color: var(--color-warning); }
.h-badge-violet  { background: var(--color-violet-50);         color: var(--color-violet); }

/* ---------------------------------------------------------------
   ACTION TILE — .h-tile + optional variant
   .h-tile-icon color is driven by parent variant via descendant selector
   --------------------------------------------------------------- */
.h-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast);
}

.h-tile-ai {
  background: var(--gradient-ai);
  color: #fff;
  border-color: transparent;
}

.h-tile-quiet {
  background: var(--color-teal-50);
  border-color: var(--color-teal-100);
}

.h-tile-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon box color per variant — later declarations override earlier ones */
.h-tile .h-tile-icon        { background: var(--color-teal);             color: #fff; }
.h-tile-ai .h-tile-icon     { background: rgba(255, 255, 255, 0.18);     color: #fff; }
.h-tile-quiet .h-tile-icon  { background: var(--color-teal-100);         color: var(--color-teal); }

/* ---------------------------------------------------------------
   STAT CARD
   --------------------------------------------------------------- */
.h-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.h-stat-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.h-stat-big {
  font-size: 22px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.h-stat-pos .h-stat-big { color: var(--color-money-positive); }
.h-stat-neg .h-stat-big { color: var(--color-money-negative); }

/* ---------------------------------------------------------------
   NAVIGATION — MOBILE TOPBAR
   --------------------------------------------------------------- */
.h-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  height: 56px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ---------------------------------------------------------------
   NAVIGATION — MOBILE BOTTOM NAV
   --------------------------------------------------------------- */
.h-bottomnav {
  display: flex;
  align-items: stretch;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
}

.h-bottomnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.h-bottomnav-item[data-active="true"] { color: var(--color-teal); }

/* ---------------------------------------------------------------
   SIDEBAR — DESKTOP
   --------------------------------------------------------------- */
.h-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
}

.h-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.h-sidebar-item:hover                { background: var(--color-surface-alt); color: var(--color-text); }
.h-sidebar-item[data-active="true"]  { background: var(--color-teal-50);     color: var(--color-teal); }

/* ---------------------------------------------------------------
   LIST ROW
   --------------------------------------------------------------- */
.h-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast);
}

/* ---------------------------------------------------------------
   UTILITIES
   --------------------------------------------------------------- */
.h-money-pos   { color: var(--color-money-positive); }
.h-money-neg   { color: var(--color-money-negative); }

.h-text-muted  { color: var(--color-text-muted); }
.h-text-subtle { color: var(--color-text-subtle); }

.h-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.h-mono    { font-family: var(--font-mono); }

.h-kicker {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}