/* ============================================================
   TMG 2026 SYSTEM — shared component vocabulary (the .tmg-* layer)
   Load LAST (after tmg-modern-2026.css). Built on the existing --tmg-* tokens
   so Website, Admin, Agent, Owners, Booking speak ONE language.
   Contract: docs/UI_2026_COMPONENT_STANDARD.md. Add tokens, never raw hex.
   ============================================================ */

:root {
  /* Brand display type — unify front + back office on ONE family (matches the
     public site). Data-dense tables keep the inherited sans via --tmg-font. */
  --tmg-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Reconcile tokens that drifted between apps so accents match everywhere. */
  --tmg-gradient: linear-gradient(134deg, #4b1853 0%, #b27f2c 95%, #a87c2c 100%);
  --tmg-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tmg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tmg-duration: 0.22s;
  /* Semantic status — kept separate from the brand accent. */
  --tmg-ok: #1f9d63;   --tmg-ok-bg: #e7f6ee;
  --tmg-warn: #b8791f; --tmg-warn-bg: #fbf1df;
  --tmg-danger: #c0392b; --tmg-danger-bg: #fbeae8;
  --tmg-info: #3a6ea5; --tmg-info-bg: #eaf1f8;
}

/* Brand type on headings + system components (scoped — no blast radius on data tables). */
.tmg-2026 h1, .tmg-2026 h2, .tmg-2026 h3,
.tmg-2026 .tmg-h, .tmg-2026 [class^="tmg-"], .tmg-2026 [class*=" tmg-"] {
  font-family: var(--tmg-font-display);
}
.tmg-2026 h1, .tmg-2026 h2, .tmg-2026 h3 { text-wrap: balance; letter-spacing: -0.01em; }
.tmg-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tmg-text-muted); font-weight: 600; }
.tmg-num { font-variant-numeric: tabular-nums; }

/* ---- Card ---- */
.tmg-card {
  background: var(--tmg-surface, #fff); border: 1px solid var(--tmg-border, #e4e6ef);
  border-radius: var(--tmg-radius-lg, 14px); box-shadow: var(--tmg-shadow-sm);
  padding: 1.15rem 1.25rem; transition: box-shadow var(--tmg-duration) var(--tmg-ease),
    transform var(--tmg-duration) var(--tmg-ease);
}
.tmg-card--hover:hover { box-shadow: var(--tmg-shadow-md); transform: translateY(-2px); }
.tmg-card__head { display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin: -1.15rem -1.25rem 1rem; padding: .85rem 1.25rem; border-bottom:1px solid var(--tmg-border-light,#eef0f6);
  font-weight:700; }

/* ---- Buttons ---- */
.tmg-btn {
  display:inline-flex; align-items:center; gap:.45rem; font: inherit; font-weight:600;
  font-family: var(--tmg-font-display); line-height:1; cursor:pointer; white-space:nowrap;
  padding:.6rem .95rem; border-radius: var(--tmg-radius, 10px); border:1px solid transparent;
  transition: transform .05s var(--tmg-ease-spring), background var(--tmg-duration) var(--tmg-ease),
    border-color var(--tmg-duration) var(--tmg-ease), box-shadow var(--tmg-duration) var(--tmg-ease);
}
.tmg-btn:active { transform: translateY(1px) scale(.985); }
.tmg-btn--primary { background: var(--tmg-gradient); color:#fff; box-shadow: var(--tmg-shadow-sm); }
.tmg-btn--primary:hover { filter: brightness(1.05); box-shadow: var(--tmg-shadow-md); }
.tmg-btn--solid { background: var(--tmg-purple); color:#fff; }
.tmg-btn--solid:hover { background: var(--tmg-purple-hover, #5d2066); }
.tmg-btn--ghost { background: transparent; color: var(--tmg-text); border-color: var(--tmg-border); }
.tmg-btn--ghost:hover { border-color: var(--tmg-purple-light, #7a3a8a); color: var(--tmg-purple); }
.tmg-btn--danger { background: var(--tmg-danger-bg); color: var(--tmg-danger); border-color: #f0c8c2; }

/* ---- Inputs ---- */
.tmg-field { display:flex; flex-direction:column; gap:.35rem; }
.tmg-input, .tmg-2026 .form-control.tmg-input {
  font: inherit; padding:.55rem .7rem; border-radius: var(--tmg-radius-sm, 6px);
  border:1px solid var(--tmg-border); background: var(--tmg-surface,#fff); color: var(--tmg-text);
  transition: border-color var(--tmg-duration) var(--tmg-ease), box-shadow var(--tmg-duration) var(--tmg-ease);
}
.tmg-input:focus { outline:none; border-color: var(--tmg-purple-light,#7a3a8a);
  box-shadow: 0 0 0 3px rgba(75,24,83,.14); }

/* ---- Badges (semantic only) ---- */
.tmg-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; padding:.28rem .55rem; border-radius:999px; line-height:1; }
.tmg-badge--ok{ background:var(--tmg-ok-bg); color:var(--tmg-ok); }
.tmg-badge--warn{ background:var(--tmg-warn-bg); color:var(--tmg-warn); }
.tmg-badge--danger{ background:var(--tmg-danger-bg); color:var(--tmg-danger); }
.tmg-badge--info{ background:var(--tmg-info-bg); color:var(--tmg-info); }
.tmg-badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ---- Steps / stepper (folds the acquisition .ho-* stepper in over time) ---- */
.tmg-steps { display:flex; flex-direction:column; gap:.3rem; }
.tmg-step { display:flex; align-items:center; gap:.6rem; padding:.4rem .1rem; }
.tmg-step__dot { width:16px; height:16px; border-radius:50%; flex:0 0 auto; background:var(--tmg-border);
  box-shadow: inset 0 0 0 2px var(--tmg-surface,#fff); transition: background var(--tmg-duration) var(--tmg-ease); }
.tmg-step.is-done .tmg-step__dot { background: var(--tmg-ok); }
.tmg-step.is-active .tmg-step__dot { background: var(--tmg-gold); box-shadow:0 0 0 4px rgba(178,127,44,.22); }
.tmg-step__detail { color: var(--tmg-text-muted); font-size:.72rem; }

/* ---- Tabs / segmented ---- */
.tmg-tabs { display:inline-flex; gap:.25rem; padding:.25rem; background: var(--tmg-surface-2,#f8f9fa);
  border:1px solid var(--tmg-border); border-radius: var(--tmg-radius, 10px); }
.tmg-tab { font: inherit; font-weight:600; cursor:pointer; border:0; background:transparent; color: var(--tmg-text-secondary,#52576e);
  padding:.45rem .8rem; border-radius: var(--tmg-radius-sm,6px); transition: background var(--tmg-duration) var(--tmg-ease); }
.tmg-tab[aria-selected="true"]{ background: var(--tmg-surface,#fff); color: var(--tmg-purple); box-shadow: var(--tmg-shadow-sm); }

/* ---- Toast (success/error feedback) ---- */
.tmg-toast { position:fixed; right:20px; bottom:20px; z-index:1080; display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem; border-radius: var(--tmg-radius,10px); background: var(--tmg-surface,#fff);
  border:1px solid var(--tmg-border); box-shadow: var(--tmg-shadow-md); font-weight:600;
  transform: translateY(12px); opacity:0; transition: transform .3s var(--tmg-ease-spring), opacity .3s var(--tmg-ease); }
.tmg-toast.is-on { transform: translateY(0); opacity:1; }
.tmg-toast--ok { border-left:4px solid var(--tmg-ok); }
.tmg-toast--danger { border-left:4px solid var(--tmg-danger); }

/* ---- Focus + motion hygiene (from the reduced-motion lesson) ---- */
.tmg-2026 :focus-visible { outline:2px solid var(--tmg-gold-light,#d4a84e); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  .tmg-card, .tmg-btn, .tmg-toast, .tmg-step__dot, .tmg-input { transition-duration: .01ms; }
}