/* ============================================================================
 * CONTROLS — Soft Neutral / Pill  (Phase 1)
 * ----------------------------------------------------------------------------
 * Loaded by ALL FOUR area headers (admin, employee, client, public), which is
 * why every control primitive lives here rather than in a new file no header
 * links yet. Surfaces live in cards.css, the other globally loaded sheet.
 *
 * Every legacy class name is preserved and restyled in place — no markup edit
 * is required anywhere. New vocabulary (.btn-ghost, .btn-icon, .kebab-btn,
 * .chip, .status-dot, .input-field, .checkbox-custom, .segmented-control) is
 * added so pages can start adopting it.
 *
 * Spec: UI_REDESIGN_PROMPT.md. Tokens are defined in each area's variables.css.
 * (Never write a slash-star-slash path inside a CSS comment — it ends it early
 *  and the parser then swallows the rule that follows.)
 * ========================================================================== */

/* -- base button ---------------------------------------------------------- */
.btn {
  height: var(--control-h);
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:focus,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -- variants -------------------------------------------------------------
 * Near-black is the primary action colour. The accent is reserved for the one
 * hero CTA per screen (.btn-accent) — that is the core rule of this language.
 * ------------------------------------------------------------------------- */
.btn-primary {
  background: var(--ink-strong);
  color: var(--canvas);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background: var(--ink);
  color: var(--canvas);
  box-shadow: none;
}
.btn-primary:focus-visible { box-shadow: var(--focus-ring); }

.btn-secondary {
  background: var(--surface-sunken);
  color: var(--ink);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--border-hairline);
  color: var(--ink-strong);
}

.btn-ghost,
.btn-outline,
.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--border-hairline);
  color: var(--ink);
}
.btn-ghost:hover,
.btn-outline:hover,
.btn-outline-primary:hover {
  background: var(--surface-sunken);
  color: var(--ink-strong);
}
.btn-outline.focus,
.btn-outline:focus,
.btn-outline-primary.focus,
.btn-outline-primary:focus { box-shadow: var(--focus-ring); }

.btn-accent {
  background: var(--accent);
  color: var(--ink-on-solid);
}
.btn-accent:hover { background: var(--accent); opacity: 0.9; color: var(--ink-on-solid); }

.btn-success,
.btn-outline-success { background: var(--positive); color: var(--ink-on-solid); }
.btn-success:hover,
.btn-outline-success:hover { background: var(--positive); opacity: 0.9; color: var(--ink-on-solid); }

.btn-danger { background: var(--negative); color: var(--ink-on-solid); }
.btn-danger:hover { background: var(--negative); opacity: 0.9; color: var(--ink-on-solid); }

.btn-warning,
.btn-outline-warning { background: var(--caution); color: var(--ink-on-solid); }
.btn-warning:hover,
.btn-outline-warning:hover { background: var(--caution); opacity: 0.9; color: var(--ink-on-solid); }

.btn-info { background: var(--info); color: var(--ink-on-solid); }
.btn-info:hover { background: var(--info); opacity: 0.9; color: var(--ink-on-solid); }

/* -- sizes ---------------------------------------------------------------- */
.btn-sm,
.btn-group-sm > .btn {
  height: var(--control-h-sm);
  padding: 0 16px;
  font-size: 13px;
}

.btn-lg { height: var(--control-h-lg); padding: 0 26px; font-size: 15px; }

/* -- groups --------------------------------------------------------------- */
.btn-group { display: inline-flex; gap: 8px; }
.btn-group .btn { border-radius: var(--r-pill); }

@media (max-width: 768px) {
  .btn-group { flex-direction: column; align-items: stretch; }
}

/* -- icon-only buttons ---------------------------------------------------
 * Never carry a text label.
 * ------------------------------------------------------------------------- */
.btn-icon {
  width: var(--icon-btn);
  height: var(--icon-btn);
  padding: 0;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-icon:hover { background: var(--border-hairline); color: var(--ink-strong); }
.btn-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-icon-sm { width: var(--icon-btn-sm); height: var(--icon-btn-sm); }

/* kebab / overflow menu trigger — sits at the far right of headers and rows */
.kebab-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.kebab-btn:hover { color: var(--ink-strong); background: var(--surface-sunken); }

/* -- legacy round action buttons (kept: ~heavily used in table rows) ------ */
.action-btn {
  width: var(--icon-btn);
  height: var(--icon-btn);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  padding: 0;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.action-btn:hover { text-decoration: none; }

.action-btn-primary   { background: var(--info-soft);     color: var(--info); }
.action-btn-primary:hover   { background: var(--info);     color: var(--ink-on-solid); }
.action-btn-info      { background: var(--info-soft);     color: var(--info); }
.action-btn-info:hover      { background: var(--info);     color: var(--ink-on-solid); }
.action-btn-success   { background: var(--positive-soft); color: var(--positive); }
.action-btn-success:hover   { background: var(--positive); color: var(--ink-on-solid); }
.action-btn-warning   { background: var(--caution-soft);  color: var(--caution); }
.action-btn-warning:hover   { background: var(--caution);  color: var(--ink-on-solid); }
.action-btn-danger    { background: var(--negative-soft); color: var(--negative); }
.action-btn-danger:hover    { background: var(--negative); color: var(--ink-on-solid); }
.action-btn-secondary { background: var(--surface-sunken); color: var(--ink-muted); }
.action-btn-secondary:hover { background: var(--border-hairline); color: var(--ink-strong); }

.action-btn-group { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }

@media (max-width: 768px) { .action-btn { width: var(--icon-btn-sm); height: var(--icon-btn-sm); font-size: 12px; } }
@media (max-width: 576px) { .action-btn-group { justify-content: flex-start; gap: 8px; } }

/* -- chips / badges -------------------------------------------------------
 * Soft tint background + solid text. Never a fully saturated solid badge.
 * .badge is the legacy name, .chip the new one — identical styling.
 * ------------------------------------------------------------------------- */
.chip,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.chip-positive, .badge-success { background: var(--positive-soft); color: var(--positive); }
.chip-negative, .badge-danger  { background: var(--negative-soft); color: var(--negative); }
.chip-caution,  .badge-warning { background: var(--caution-soft);  color: var(--caution); }
.chip-info,     .badge-info    { background: var(--info-soft);     color: var(--info); }
.chip-accent,   .badge-primary { background: var(--accent-soft);   color: var(--accent); }
.chip-neutral,  .badge-secondary {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  border: 1px solid var(--border-hairline);
}

/* -- status: a coloured dot plus plain text ------------------------------- */
.status-dot-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-muted); }
.status-dot.is-positive { background: var(--positive); }
.status-dot.is-negative { background: var(--negative); }
.status-dot.is-caution  { background: var(--caution); }
.status-dot.is-info     { background: var(--info); }

/* -- form fields ----------------------------------------------------------
 * Field primitives live in this sheet because it is the one loaded in every
 * area; forms.css is page-declared only. Move them once Phase 2 adds the link.
 * ------------------------------------------------------------------------- */
.input-field {
  height: var(--control-h);
  width: 100%;
  background: var(--surface-sunken);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-field);
  color: var(--ink-strong);
  font-family: var(--font);
  font-size: 13.5px;
  padding: 0 16px;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.input-field::placeholder { color: var(--ink-muted); }
.input-field:focus { border-color: var(--accent); background: var(--surface); }
.input-field.pill { border-radius: var(--r-pill); padding-left: 40px; }
.input-field.rounded { border-radius: var(--r-field); }

.field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.search-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; max-width: 320px; }
.search-input-wrapper svg,
.search-input-wrapper > i {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
  stroke: var(--ink-muted);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}

.checkbox-custom {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-sunken);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.checkbox-custom.checked {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--canvas);
}

/* -- header action row ----------------------------------------------------
 * The cart button and the user-menu trigger had no CSS anywhere, so they
 * rendered as raw browser controls. They belong to the header, but public
 * does not load header-new.css — this sheet is the one every area loads.
 * The .header-actions row itself is already laid out by public-global.css —
 * not duplicated here.
 * ------------------------------------------------------------------------- */
.header-icon-btn {
  position: relative;
  width: var(--icon-btn);
  height: var(--icon-btn);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  flex: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.header-icon-btn:hover { background: var(--border-hairline); color: var(--ink-strong); text-decoration: none; }
.header-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.header-icon-btn i { font-size: 15px; }

/* count sits on the button, as a soft chip — not a saturated dot */
.header-icon-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--surface);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.header-actions .dropdown-toggle.user-info {
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ink-muted);
}
.header-actions .dropdown-toggle.user-info:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-pill); }

.header-actions .user-avatar {
  width: var(--icon-btn);
  height: var(--icon-btn);
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background: var(--surface-sunken);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.header-actions .user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* -- segmented control / view switcher ------------------------------------ */
.segmented-control {
  background: var(--surface-sunken);
  border: 1px solid var(--border-hairline);
  padding: 4px;
  border-radius: var(--r-pill);
  display: inline-flex;
  gap: 4px;
}
.segmented-btn {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.segmented-btn.active {
  background: var(--surface);
  color: var(--ink-strong);
  box-shadow: var(--shadow-soft);
  font-weight: 600;
}

/* Soft Neutral leftovers — Bootstrap-style solid badge utilities */
.badge.bg-success,
.badge-success.bg-success,
.bg-success.badge {
  background: var(--positive-soft) !important;
  color: var(--positive) !important;
}
.badge.bg-danger,
.badge-danger.bg-danger,
.bg-danger.badge {
  background: var(--negative-soft) !important;
  color: var(--negative) !important;
}
.badge.bg-warning,
.badge-warning.bg-warning,
.bg-warning.badge {
  background: var(--caution-soft) !important;
  color: var(--caution) !important;
}
.badge.bg-info,
.badge-info.bg-info,
.bg-info.badge {
  background: var(--info-soft) !important;
  color: var(--info) !important;
}
.badge.bg-primary,
.badge-primary.bg-primary,
.bg-primary.badge {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.badge.bg-secondary,
.badge-secondary.bg-secondary,
.bg-secondary.badge {
  background: var(--neutral-soft) !important;
  color: var(--ink-muted) !important;
}
.badge.bg-purple {
  background: var(--info-soft) !important;
  color: var(--info) !important;
}