/* ============================================================
   DoctorQR Design System · v1.0
   Framework-agnostic tokens + components. Plain CSS custom props.
   Drop into any codebase (React / Vue / Blade / plain HTML).
   Fonts: Plus Jakarta Sans (display) · Public Sans (body/UI)
   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
   ============================================================ */

:root {
  /* ---- Brand / primary ---- */
  --dq-primary:        #B00D23;
  --dq-primary-hover:  #8E0A1C;
  --dq-primary-soft:   #F7DDE1;
  --dq-primary-tint:   #FBECEE;
  --dq-primary-on-dark:#F26178;

  /* ---- Ink & neutrals ---- */
  --dq-ink:     #16181C;  /* headings */
  --dq-body:    #333333;  /* body text */
  --dq-muted:   #8A929C;  /* secondary text */
  --dq-border:  #E0E0E0;  /* hairlines (spec) */
  --dq-border-2:#E4E6E9;  /* card borders (cool) */
  --dq-fill:    #EEEEEE;  /* neutral fill */
  --dq-canvas:  #F4F5F6;  /* app background */
  --dq-surface: #FFFFFF;  /* cards / sheets */
  --dq-panel:   #14161A;  /* dark rail / hero */
  --dq-panel-2: #20242C;

  /* ---- Steel accent (secondary) ---- */
  --dq-steel:      #7D96B9;
  --dq-steel-deep: #3F5F8F;
  --dq-steel-tint: #EAF0F8;

  /* ---- Status ---- */
  --dq-success:    #157347;  --dq-success-tint:#E6F3EC;
  --dq-warning:    #B4740E;  --dq-warning-tint:#FBF0DC; --dq-warning-text:#8A5A08;
  --dq-danger:     #B00D23;  --dq-danger-tint: #FBECEE;

  /* ---- Typography ---- */
  --dq-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --dq-font-ui:      'Public Sans', system-ui, sans-serif;

  --dq-text-display: 800 44px/1.05 var(--dq-font-display);
  --dq-text-h1:      700 32px/1.1  var(--dq-font-display);
  --dq-text-h2:      700 22px/1.2  var(--dq-font-display);
  --dq-text-title:   700 16px/1.3  var(--dq-font-display);
  --dq-text-body:    400 16px/1.6  var(--dq-font-ui);
  --dq-text-ui:      600 14px/1.4  var(--dq-font-ui);
  --dq-text-small:   500 13px/1.5  var(--dq-font-ui);
  --dq-text-eyebrow: 700 12px/1    var(--dq-font-ui); /* + letter-spacing:.12em; text-transform:uppercase */

  /* ---- Spacing (8pt) ---- */
  --dq-s1:4px; --dq-s2:8px; --dq-s3:12px; --dq-s4:16px;
  --dq-s6:24px; --dq-s8:32px; --dq-s12:48px; --dq-s16:64px;

  /* ---- Radius ---- */
  --dq-r-sm:8px; --dq-r-md:12px; --dq-r-lg:16px; --dq-r-pill:99px;

  /* ---- Elevation ---- */
  --dq-shadow-sm: 0 1px 2px rgba(20,22,26,.06);
  --dq-shadow-md: 0 4px 14px rgba(20,22,26,.09);
  --dq-shadow-lg: 0 14px 40px rgba(20,22,26,.14);
  --dq-shadow-modal: 0 20px 50px rgba(20,22,26,.24);
  --dq-ring: 0 0 0 3px rgba(176,13,35,.13); /* focus ring */
}

/* ---- Base ---- */
.dq { font-family:var(--dq-font-ui); color:var(--dq-body); -webkit-font-smoothing:antialiased; }
.dq *, .dq *::before, .dq *::after { box-sizing:border-box; }
.dq a { color:var(--dq-primary); text-decoration:none; }
.dq a:hover { color:var(--dq-primary-hover); }
.dq ::selection { background:var(--dq-primary-soft); color:#7A0918; }
.dq .tnum { font-variant-numeric:tabular-nums; }

/* ---- Type helpers ---- */
.dq-display { font:var(--dq-text-display); letter-spacing:-.03em; color:var(--dq-ink); margin:0; }
.dq-h1      { font:var(--dq-text-h1); letter-spacing:-.02em; color:var(--dq-ink); margin:0; }
.dq-h2      { font:var(--dq-text-h2); letter-spacing:-.01em; color:var(--dq-ink); margin:0; }
.dq-title   { font:var(--dq-text-title); color:var(--dq-ink); margin:0; }
.dq-body    { font:var(--dq-text-body); color:var(--dq-body); }
.dq-muted   { color:var(--dq-muted); }
.dq-eyebrow { font:var(--dq-text-eyebrow); letter-spacing:.12em; text-transform:uppercase; color:var(--dq-muted); }

/* ============================================================
   BUTTONS
   ============================================================ */
.dq-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border-radius:var(--dq-r-sm);
  font:600 15px var(--dq-font-ui); cursor:pointer; border:1px solid transparent;
  transition:background .14s, border-color .14s, color .14s;
}
.dq-btn--sm { height:36px; padding:0 14px; font-size:13px; }
.dq-btn--lg { height:52px; padding:0 26px; font-size:16px; }

.dq-btn--primary   { background:var(--dq-primary); color:#fff; box-shadow:0 1px 2px rgba(176,13,35,.3); }
.dq-btn--primary:hover { background:var(--dq-primary-hover); }
.dq-btn--secondary { background:#fff; color:var(--dq-ink); border-color:#DADCE0; }
.dq-btn--secondary:hover { background:var(--dq-canvas); border-color:#C7CBD1; }
.dq-btn--ghost     { background:transparent; color:var(--dq-primary); }
.dq-btn--ghost:hover { background:var(--dq-primary-tint); }
.dq-btn--danger    { background:#fff; color:var(--dq-primary); border-color:#E7B9C0; }
.dq-btn--danger:hover { background:var(--dq-primary-tint); }
.dq-btn--success   { background:var(--dq-success); color:#fff; box-shadow:0 2px 6px rgba(21,115,71,.24); }
.dq-btn--success:hover { background:#0F5A38; }
.dq-btn:disabled   { background:var(--dq-fill); color:#A6ADB5; cursor:not-allowed; box-shadow:none; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.dq-label { display:block; font:600 13px var(--dq-font-ui); color:var(--dq-ink); margin-bottom:7px; }
.dq-input, .dq-select, .dq-textarea {
  width:100%; border:1px solid #DADCE0; border-radius:var(--dq-r-sm);
  font:400 15px var(--dq-font-ui); color:var(--dq-ink); background:#fff;
  outline:none; transition:border-color .13s, box-shadow .13s;
}
.dq-input, .dq-select { height:46px; padding:0 14px; }
.dq-textarea { padding:11px 14px; line-height:1.5; resize:vertical; }
.dq-input:focus, .dq-select:focus, .dq-textarea:focus { border-color:var(--dq-primary); box-shadow:var(--dq-ring); }
.dq-input--error { border-color:var(--dq-primary); box-shadow:var(--dq-ring); }
.dq-hint  { margin-top:6px; font:400 12.5px var(--dq-font-ui); color:var(--dq-muted); }
.dq-error { margin-top:6px; font:500 12.5px var(--dq-font-ui); color:var(--dq-primary); }

/* Toggle switch */
.dq-switch { width:46px; height:26px; border-radius:var(--dq-r-pill); border:none; cursor:pointer;
  position:relative; background:#D2D5DA; transition:background .16s; padding:0; }
.dq-switch[aria-checked="true"], .dq-switch.is-on { background:var(--dq-success); }
.dq-switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:var(--dq-r-pill); background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .16s; }
.dq-switch[aria-checked="true"]::after, .dq-switch.is-on::after { left:23px; }

/* ============================================================
   CARD
   ============================================================ */
.dq-card {
  background:var(--dq-surface); border:1px solid var(--dq-border-2);
  border-radius:var(--dq-r-lg); box-shadow:var(--dq-shadow-sm);
}
.dq-card__pad { padding:var(--dq-s6); }

/* ============================================================
   STATUS PILLS  (subscription + appointment states)
   ============================================================ */
.dq-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:var(--dq-r-pill); font:700 12px var(--dq-font-ui);
}
.dq-pill__dot { width:7px; height:7px; border-radius:var(--dq-r-pill); background:currentColor; opacity:.9; }

.dq-pill--neutral { background:var(--dq-fill);         color:#6B727B; }  /* pending payment / deactivated */
.dq-pill--warning { background:var(--dq-warning-tint); color:var(--dq-warning-text); } /* submitted / past due */
.dq-pill--success { background:var(--dq-success-tint); color:var(--dq-success); }       /* confirmed / active */
.dq-pill--info    { background:var(--dq-steel-tint);   color:var(--dq-steel-deep); }    /* completed / trialing */
.dq-pill--danger  { background:var(--dq-danger-tint);  color:var(--dq-danger); }        /* rejected / refund */

/* ============================================================
   TABLE
   ============================================================ */
.dq-table { width:100%; border-collapse:collapse; }
.dq-table thead th {
  text-align:left; padding:13px 20px; background:#FAFAFB;
  font:700 12px var(--dq-font-ui); letter-spacing:.04em; text-transform:uppercase;
  color:var(--dq-muted); border-bottom:1px solid var(--dq-fill);
}
.dq-table tbody td { padding:14px 20px; font:500 14px var(--dq-font-ui); color:var(--dq-body); border-bottom:1px solid #F2F2F3; }
.dq-table tbody td.dq-td-strong { font-weight:600; color:var(--dq-ink); }
.dq-table tbody tr:last-child td { border-bottom:none; }
.dq-table tbody tr { transition:background .12s; }
.dq-table tbody tr:hover { background:#FAFAFB; }

/* ============================================================
   TOAST
   ============================================================ */
.dq-toast {
  display:flex; align-items:center; gap:11px; background:#fff;
  border:1px solid var(--dq-border-2); border-left:3px solid var(--dq-muted);
  border-radius:var(--dq-r-md); padding:13px 15px; box-shadow:var(--dq-shadow-md);
  font:600 13.5px var(--dq-font-ui); color:var(--dq-ink);
}
.dq-toast--success { border-left-color:var(--dq-success); }
.dq-toast--error   { border-left-color:var(--dq-primary); }
.dq-toast__icon { width:22px; height:22px; border-radius:var(--dq-r-pill); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font:700 13px var(--dq-font-ui); }

/* ============================================================
   MODAL
   ============================================================ */
.dq-modal { width:100%; max-width:360px; background:#fff; border-radius:var(--dq-r-lg);
  box-shadow:var(--dq-shadow-modal); overflow:hidden; }
.dq-modal__body { padding:24px 24px 4px; }
.dq-modal__actions { display:flex; gap:10px; padding:20px 24px 24px; }
.dq-modal__actions .dq-btn { flex:1; }
.dq-scrim { position:fixed; inset:0; background:rgba(20,22,26,.5); display:flex; align-items:center; justify-content:center; padding:20px; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.dq-empty { text-align:center; padding:34px 24px; }
.dq-empty__icon { width:46px; height:46px; border-radius:var(--dq-r-md); background:var(--dq-canvas);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px; color:var(--dq-steel); }

/* ============================================================
   APP SHELL (doctor portal / admin)
   ============================================================ */
.dq-shell { display:flex; min-height:100vh; background:var(--dq-canvas); }
.dq-sidebar { width:236px; flex:0 0 236px; background:#FBFBFC; border-right:1px solid var(--dq-fill);
  display:flex; flex-direction:column; }
.dq-sidebar--dark { background:var(--dq-panel); border-right-color:#23262C; color:#E7E9EC; }
.dq-navitem { display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:none;
  cursor:pointer; padding:9px 12px; border-radius:9px; margin-bottom:2px; background:transparent;
  font:600 14px var(--dq-font-ui); color:#4B535C; transition:background .13s; }
.dq-navitem:hover { background:#F0F1F3; }
.dq-navitem.is-active { background:var(--dq-primary-tint); color:var(--dq-primary); font-weight:700; }
.dq-sidebar--dark .dq-navitem { color:#9BA3AE; }
.dq-sidebar--dark .dq-navitem:hover { background:rgba(255,255,255,.05); }
.dq-sidebar--dark .dq-navitem.is-active { background:rgba(176,13,35,.16); color:#fff; }
.dq-navitem__count { margin-left:auto; background:var(--dq-primary); color:#fff; font:700 11px var(--dq-font-ui);
  border-radius:var(--dq-r-pill); padding:1px 7px; }

/* ---- Metric stat card ---- */
.dq-stat { background:#fff; border:1px solid var(--dq-border-2); border-radius:var(--dq-r-md);
  padding:16px; box-shadow:var(--dq-shadow-sm); }
.dq-stat__label { font:600 12.5px var(--dq-font-ui); color:var(--dq-muted); }
.dq-stat__value { font:800 28px var(--dq-font-display); color:var(--dq-ink); margin-top:6px; font-variant-numeric:tabular-nums; }
.dq-stat__value--accent { color:var(--dq-primary); }

/* ============================================================
   TABS (underline)
   ============================================================ */
.dq-tabs { display:flex; gap:24px; border-bottom:1px solid var(--dq-border-2); }
.dq-tab { background:none; border:none; border-bottom:2px solid transparent; padding:0 0 12px;
  margin-bottom:-1px; font:700 14px var(--dq-font-ui); color:var(--dq-muted); cursor:pointer; }
.dq-tab.is-active { border-bottom-color:var(--dq-primary); color:var(--dq-primary); }

/* ============================================================
   BRAND MARK  (see README for inline SVG glyph markup)
   ============================================================ */
.dq-logo { display:inline-flex; align-items:center; gap:11px; }
.dq-logo__glyph { width:34px; height:34px; border-radius:9px; background:var(--dq-primary);
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(176,13,35,.4); flex:0 0 auto; }
.dq-logo__word { font:800 19px var(--dq-font-display); letter-spacing:-.02em; color:var(--dq-ink); }
.dq-logo__word .qr { color:var(--dq-primary); }
.dq-logo--on-dark .dq-logo__word { color:#fff; }
.dq-logo--on-dark .dq-logo__word .qr { color:var(--dq-primary-on-dark); }