/* =========================================================
   SCHEDMATE v4 — FINAL DESIGN SYSTEM (OWNER MVP)
   SAFE OVERRIDE • NO JS TOUCH • DARK MODE FIXED
========================================================= */

/* ------------------------------
   1. DESIGN TOKENS
------------------------------ */
:root {
  --bg-main: #f5f7fb;
  --bg-card: #ffffff;
  --bg-soft: #eef2f8;

  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-invert: #ffffff;

  --border-soft: rgba(15, 23, 42, 0.08);
  --accent: #6366f1;
  --accent-glow: rgba(99, 102, 241, 0.35);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 4px 14px rgba(0,0,0,.06);
  --shadow-md: 0 12px 28px rgba(0,0,0,.08);
}

/* DARK MODE */
body.dark {
  --bg-main: #0b1220;
  --bg-card: #0f172a;
  --bg-soft: #111827;

  --text-main: #e5e7eb;
  --text-muted: #94a3b8;

  --border-soft: rgba(255,255,255,.08);
}

/* ------------------------------
   2. GLOBAL RESET
------------------------------ */
body {
  background: var(--bg-main);
  color: var(--text-main);
}

h1, h2, h3, h4 {
  color: var(--text-main);
}

small, .muted {
  color: var(--text-muted);
}

/* ------------------------------
   3. CARDS & SECTIONS
------------------------------ */
.sm-card,
.card,
.dashboard-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
}

/* ------------------------------
   4. KPI / OVERVIEW FIX
------------------------------ */
.kpi-row,
.overview-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kpi-label {
  color: var(--text-muted);
  font-size: 13px;
}

.kpi-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
}

/* ------------------------------
   5. UPCOMING BOOKINGS LINE FIX
------------------------------ */
.upcoming-booking,
.booking-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.upcoming-booking::before {
  content: "";
  width: 4px;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
}

/* ------------------------------
   6. TABLES & LISTS
------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
}

td {
  padding: 12px 8px;
  color: var(--text-main);
}

/* ------------------------------
   7. DROPDOWNS (DARK MODE FIX)
------------------------------ */
select,
option {
  background: var(--bg-card);
  color: var(--text-main);
}

body.dark select,
body.dark option {
  background: #020617;
  color: #e5e7eb;
}

/* ------------------------------
   8. STATUS PILLS
------------------------------ */
.status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.status-pill.completed {
  background: rgba(34,197,94,.15);
  color: #22c55e;
}

.status-pill.pending {
  background: rgba(234,179,8,.15);
  color: #eab308;
}

/* ------------------------------
   9. MODALS (SIZE + FOOTER)
------------------------------ */
/* NOTE (v108): this file predates the current modal markup, where .sm-modal is
   the full-viewport centering layer and .sm-modal-card is the card. The old
   card-sizing declarations that used to live here (max-width:720px;
   width:calc(100% - 32px); max-height:90vh; display:flex) were still capping
   the *overlay* at 720px wide, so every dialog rendered left-aligned instead
   of centered. Card sizing is owned by .sm-modal-card in modal.css. */

.sm-modal-body {
  overflow-y: auto;
  padding: 20px;
}

.sm-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-soft);
}

/* ------------------------------
   10. CALENDAR MODAL PRICE FIX
------------------------------ */
.calendar-price,
.booking-price {
  font-weight: 600;
  color: var(--text-main);
}

/* ------------------------------
   11. BUTTONS
------------------------------ */
button,
.btn {
  border-radius: var(--radius-sm);
}

.btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 0 0 transparent;
}

.btn-primary:hover {
  box-shadow: 0 0 18px var(--accent-glow);
}

/* ------------------------------
   12. SAFETY (CLICK FIX)
------------------------------ */
.sm-card *,
.sm-modal * {
  pointer-events: auto;
}
.plan-locked .dashboard-view {
  pointer-events: none;
  filter: grayscale(1) blur(1px);
}

.plan-locked::after {
  content: "Your trial has ended. Upgrade to continue.";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  color: white;
  font-size: 20px;
  display: grid;
  place-items: center;
  z-index: 9999;
}

/* ============================================================
   OVERRIDE: Plan gating is handled by dashboard.js (view locks)
   - Prevent legacy .plan-locked CSS from freezing the whole UI
============================================================ */
.plan-locked .dashboard-view{ pointer-events:auto !important; filter:none !important; }
.plan-locked::after{ display:none !important; content:none !important; }

/* ============================================================
   SCHEDMATE — HELP TOOLTIP UI
   - Use: <span class="sm-help" data-tooltip="...">?</span>
   - Requires: /js/ui/tooltip.js (already loaded in dashboard)
============================================================ */
.sm-help-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  cursor:help;
  user-select:none;
  border:1px solid rgba(120,130,150,.35);
  background:rgba(255,255,255,.06);
  color:rgba(230,235,245,.95);
}

.sm-help:focus{
  outline:2px solid rgba(120,160,255,.55);
  outline-offset:2px;
}

#global-tooltip{
  position:fixed;
  z-index:99999;
  max-width:280px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(18,20,26,.92);
  color:rgba(245,246,250,.96);
  font-size:12px;
  line-height:1.35;
  letter-spacing:.1px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}

#global-tooltip.visible{
  opacity:1;
  transform:translateY(0);
}