/* ============================================================
   HELIX REDESIGN SHIM — Bootstrap 4 → Helix bridge
   Phase 1 Commit 1, 2026-05-24

   PURPOSE
   Restyle the Bootstrap classes the tt-web Blade views already
   emit so an unrewritten page reads ~50–70% Helix. Markup stays
   identical; only the cascade changes. Rules live under
   .h-theme so opt-out pages are untouched.

   SCOPE
   Per merger plan §"Phase 1 deliverables":
     .btn / .btn-primary / button variants  → Helix buttons
     .form-control                          → Helix inputs
     .card                                  → Helix panel
     .modal                                 → Helix modal chrome
     .dropdown-menu                         → Helix menu pop
     .nav-tabs                              → Helix tablist
     .table                                 → Helix table
     .alert                                 → Helix alert
     .badge                                 → Helix chip

   This file is intentionally TRANSITIONAL. Phase 2 introduces
   <x-h-*> Blade components; once a page is rewritten to use
   those, the shim rules for its classes can be retired.
   ============================================================ */

/* ---- buttons ---- */
.h-theme .btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  cursor: pointer;
}
.h-theme .btn:focus,
.h-theme .btn:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  box-shadow: none;
}
.h-theme .btn-sm {
  padding: 6px 14px;
  font-size: 0.82rem;
}
.h-theme .btn-lg {
  padding: 13px 26px;
  font-size: 1rem;
}
.h-theme .btn-block {
  display: block;
  width: 100%;
}

.h-theme .btn-primary {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.h-theme .btn-primary:hover,
.h-theme .btn-primary:focus {
  background: var(--signal-strong, var(--signal));
  border-color: var(--signal-strong, var(--signal));
  color: #fff;
}

.h-theme .btn-secondary,
.h-theme .btn-default {
  background: var(--surface);
  border-color: var(--hairline-color, rgba(15,23,42,0.12));
  color: var(--ink);
}
.h-theme .btn-secondary:hover,
.h-theme .btn-default:hover {
  background: var(--paper-2);
  border-color: var(--ink);
}

.h-theme .btn-outline-primary {
  background: transparent;
  border-color: var(--signal);
  color: var(--signal);
}
.h-theme .btn-outline-primary:hover {
  background: var(--signal-tint, rgba(232,138,33,0.08));
  color: var(--signal);
}

.h-theme .btn-danger {
  background: var(--negative);
  border-color: var(--negative);
  color: #fff;
}
.h-theme .btn-danger:hover {
  background: var(--negative);
  border-color: var(--negative);
  filter: brightness(0.92);
}

.h-theme .btn-link {
  background: none;
  border: 0;
  color: var(--signal);
  padding: 4px 0;
  text-decoration: none;
}
.h-theme .btn-link:hover {
  color: var(--signal);
  text-decoration: underline;
}

/* ---- form controls ---- */
.h-theme .form-control,
.h-theme .custom-select {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-color, rgba(15,23,42,0.16));
  border-radius: var(--radius-sm, 6px);
  padding: 9px 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  box-shadow: none;
}
.h-theme .form-control:focus,
.h-theme .custom-select:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-tint, rgba(232,138,33,0.18));
  outline: none;
}
.h-theme .form-control[disabled],
.h-theme .form-control:disabled {
  background: var(--paper-2);
  color: var(--ink-soft);
}
.h-theme .form-group { margin-bottom: 16px; }
.h-theme .form-group > label,
.h-theme .form-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
  display: block;
}
.h-theme .form-text,
.h-theme small.form-text {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.h-theme .input-group .form-control { border-radius: var(--radius-sm, 6px); }
.h-theme .input-group-text {
  background: var(--paper-2);
  border: 1px solid var(--hairline-color, rgba(15,23,42,0.16));
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.h-theme .invalid-feedback { color: var(--negative); }
.h-theme .is-invalid {
  border-color: var(--negative) !important;
}

/* ---- card → Helix panel ---- */
.h-theme .card {
  background: var(--surface);
  border: 1px solid var(--hairline-color, rgba(15,23,42,0.10));
  border-radius: var(--radius-md, 10px);
  box-shadow: none;
}
.h-theme .card-header {
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline-color, rgba(15,23,42,0.10));
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.h-theme .card-body { padding: 18px; }
.h-theme .card-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--hairline-color, rgba(15,23,42,0.10));
  padding: 12px 18px;
}
.h-theme .card-title { font-family: var(--font-display); font-weight: 500; }

/* ---- modal chrome ---- */
.h-theme .modal-content {
  background: var(--surface);
  border: 1px solid var(--hairline-color, rgba(15,23,42,0.10));
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-md, 0 14px 40px rgba(11,18,32,0.18));
}
.h-theme .modal-header {
  border-bottom: 1px solid var(--hairline-color, rgba(15,23,42,0.10));
  padding: 18px 22px;
}
.h-theme .modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
}
.h-theme .modal-body { padding: 22px; }
.h-theme .modal-footer {
  border-top: 1px solid var(--hairline-color, rgba(15,23,42,0.10));
  padding: 14px 22px;
  gap: 10px;
}
.h-theme .modal-backdrop.show { opacity: 0.55; background: #0b1220; }

/* ---- dropdown menu ---- */
.h-theme .dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--hairline-color, rgba(15,23,42,0.10));
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md, 0 14px 40px rgba(11,18,32,0.14));
  padding: 6px 0;
  min-width: 200px;
}
.h-theme .dropdown-item {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 8px 16px;
  transition: background 120ms ease, color 120ms ease;
}
.h-theme .dropdown-item:hover,
.h-theme .dropdown-item:focus {
  background: var(--paper-2);
  color: var(--ink);
}
.h-theme .dropdown-divider {
  border-top: 1px solid var(--hairline-color, rgba(15,23,42,0.08));
  margin: 6px 0;
}
.h-theme .dropdown-header {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft, var(--slate));
  padding: 10px 16px 4px;
}

/* ---- nav-tabs ---- */
.h-theme .nav-tabs {
  border-bottom: 1px solid var(--hairline-color, rgba(15,23,42,0.10));
}
.h-theme .nav-tabs .nav-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 16px;
  background: transparent;
  margin-bottom: -1px;
}
.h-theme .nav-tabs .nav-link:hover { color: var(--ink); }
.h-theme .nav-tabs .nav-link.active {
  color: var(--ink);
  border-bottom-color: var(--signal);
  background: transparent;
}
.h-theme .tab-content { padding-top: 18px; }

/* ---- table ---- */
.h-theme .table {
  color: var(--ink);
  font-size: 0.9rem;
}
.h-theme .table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  border-bottom: 1px solid var(--hairline-color, rgba(15,23,42,0.16));
  border-top: 0;
  padding: 10px 12px;
}
.h-theme .table td,
.h-theme .table th {
  border-top: 1px solid var(--hairline-color, rgba(15,23,42,0.08));
  padding: 12px;
  vertical-align: middle;
}
.h-theme .table-hover tbody tr:hover { background: var(--paper-2); }
.h-theme .table-striped tbody tr:nth-of-type(odd) { background: var(--paper-2); }

/* ---- alert ---- */
.h-theme .alert {
  border: 1px solid var(--hairline-color, rgba(15,23,42,0.12));
  border-left: 3px solid var(--slate);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 16px;
  font-size: 0.9rem;
}
.h-theme .alert-success { border-left-color: var(--positive, #2f9e44); background: rgba(47,158,68,0.06); }
.h-theme .alert-danger,
.h-theme .alert-error    { border-left-color: var(--negative); background: rgba(216,71,67,0.06); }
.h-theme .alert-warning  { border-left-color: var(--signal); background: var(--signal-tint, rgba(232,138,33,0.06)); }
.h-theme .alert-info     { border-left-color: var(--slate); background: var(--paper-2); }

/* ---- badge → chip ---- */
.h-theme .badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: transparent;
}
.h-theme .badge-primary,
.h-theme .badge-info    { color: var(--signal); }
.h-theme .badge-success { color: var(--positive, #2f9e44); }
.h-theme .badge-danger  { color: var(--negative); }
.h-theme .badge-secondary { color: var(--slate); }

/* ---- pagination (used by DataTables wrappers + native) ---- */
.h-theme .pagination .page-item .page-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--hairline-color, rgba(15,23,42,0.12));
  margin: 0 2px;
  border-radius: var(--radius-sm, 6px);
}
.h-theme .pagination .page-item.active .page-link {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}

/* ---- list-group ---- */
.h-theme .list-group-item {
  background: var(--surface);
  border: 1px solid var(--hairline-color, rgba(15,23,42,0.10));
  color: var(--ink);
  padding: 12px 16px;
}
.h-theme .list-group-item.active {
  background: var(--signal-tint, rgba(232,138,33,0.10));
  border-color: var(--signal);
  color: var(--ink);
}

/* ---- progress bar ---- */
.h-theme .progress {
  background: var(--paper-2);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}
.h-theme .progress-bar { background: var(--signal); }

/* ---- Phase 1 C4 — header helpers (Helix path of layouts/v1/user/header.blade.php) ---- */

/* BS4 dropdown.js adds .show to .dropdown-menu on click; this lets our
   Helix popovers (.h-menu__pop) ride along without a custom click handler. */
.h-theme .h-menu__pop.dropdown-menu.show,
.h-theme .h-menu__pop.show { display: block; }

/* Nav-style trigger (Create / Strategies / Profile labels) — different shape
   from the default .h-menu__btn (which is an icon-only kebab in card heads). */
.h-theme .h-menu__btn--nav {
  padding: 8px 14px;
  font: 500 0.92rem/1.2 var(--font-body);
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.h-theme .h-menu__btn--nav:hover { color: var(--signal); background: transparent; }
.h-theme .h-menu__caret { font-size: 0.7em; opacity: 0.7; }

/* Right-anchored popover (used by the Profile menu so it doesn't clip the viewport) */
.h-theme .h-menu__pop.dropdown-menu-right { right: 0; left: auto; }
.h-theme .h-menu__pop--profile { min-width: 240px; max-height: 70vh; overflow-y: auto; }

/* Mobile hamburger (replaces .hamburger--squeeze in the Helix path; same
   [hamburger-js] attribute hook so app.js initHamburger still drives it) */
.h-theme .h-mobile-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.h-theme .h-mobile-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .18s, opacity .18s;
}
.h-theme .h-mobile-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.h-theme .h-mobile-toggle.is-active span:nth-child(2) { opacity: 0; }
.h-theme .h-mobile-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer — replaces .header__menu in the Helix path. Same [mobile-block-js]
   attribute hook so app.js initHamburger toggles .is-open on it. */
.h-theme .h-mobile-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(86vw, 340px);
  background: var(--surface);
  border-right: var(--hairline);
  z-index: 100;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .22s ease;
}
.h-theme .h-mobile-drawer.is-open { transform: translateX(0); }
.h-theme .h-mobile-drawer__inner { padding: 16px 14px 24px; }
.h-theme .h-mobile-drawer__section { margin-bottom: 18px; }
.h-theme .h-mobile-drawer__lbl {
  font: 600 0.60rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
  padding: 0 8px;
}

/* ---- Phase 1 C6 — footer helpers ---- */
.h-theme .h-footer__social {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.h-theme .h-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.h-theme .h-footer__social a:hover {
  color: var(--signal);
  border-color: var(--signal);
  background: var(--paper-2);
}
.h-theme .h-footer__appstore {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.h-theme .h-footer__appstore img { height: 38px; width: auto; }
.h-theme .h-footer__social-col h5 { margin-bottom: 12px; }

/* Primary button text stays light despite .h-theme a{color:inherit} (specificity fix) */
.h-theme .h-btn--primary { color: var(--paper); }
.h-theme .h-btn--primary:hover { color: #fff; }

/* ============================================================
   Functional-page bridges (2026-06-03) — for data/list/settings
   pages now wrapped in .h-theme via the v1 user layout.
   ============================================================ */

/* Content links must read as links again (.h-theme a{color:inherit}
   flattens them). Exclude buttons + chrome link roles. */
.h-theme a:not(.btn):not(.h-btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.close):not(.a-side__link):not(.h-menu__item) {
  color: var(--signal);
}
.h-theme a:not(.btn):not(.h-btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.close):hover {
  text-decoration: underline;
}
/* icon-font glyphs + table icons keep their own color (not link-blue) */
.h-theme table i, .h-theme td i, .h-theme th i,
.h-theme .icon-font { color: inherit; }

/* BS4 custom checkbox / switch */
.h-theme .custom-control-label::before {
  background: var(--field); border: 1px solid var(--rule-strong);
}
.h-theme .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--signal); border-color: var(--signal);
}

/* nav-pills active */
.h-theme .nav-pills .nav-link.active { background: var(--signal); color: var(--paper); }

/* table-responsive + zebra polish */
.h-theme .table-responsive { border: var(--hairline); border-radius: var(--radius-md); overflow: auto; }
.h-theme .table-striped tbody tr:nth-of-type(odd) { background: var(--paper-2); }