/* ============================================================
   MUSTAQER — THERAPEUTIC PROGRAMS MODULE  (البرامج العلاجية)
   css/tp-module.css
   Brand: light neutral, soft gold, child-development identity
   RTL · responsive · print-ready A4
   ============================================================ */

/* ──────────────────────────────────────────────
   DESIGN TOKENS
────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --tp-bg          : #F7F5EF;
  --tp-bg2         : #FFFFFF;
  --tp-bg3         : #F0EDE3;
  --tp-surface     : #FFFFFF;
  --tp-surface2    : #FAFAF6;

  /* Brand palette — soft gold / warm amber */
  --tp-gold        : #C49A00;
  --tp-gold-l      : #E6B800;
  --tp-gold-xl     : #F5C518;
  --tp-gold-bg     : #FFFBEA;
  --tp-gold-border : #F5E076;

  /* Accent — soft violet */
  --tp-primary     : #6D28D9;
  --tp-primary-l   : #7C3AED;
  --tp-primary-xl  : #A78BFA;
  --tp-primary-bg  : #F5F3FF;
  --tp-primary-border: #DDD6FE;

  /* Green — success / executed */
  --tp-green       : #16A34A;
  --tp-green-l     : #22C55E;
  --tp-green-bg    : #F0FDF4;
  --tp-green-border: #BBF7D0;

  /* Red — danger */
  --tp-red         : #DC2626;
  --tp-red-bg      : #FFF0F0;
  --tp-red-border  : #FECACA;

  /* Sky — reception */
  --tp-sky         : #0284C7;
  --tp-sky-bg      : #F0F9FF;
  --tp-sky-border  : #BAE6FD;

  /* Amber — pending/warning */
  --tp-amber       : #D97706;
  --tp-amber-bg    : #FFFBEB;
  --tp-amber-border: #FDE68A;

  /* Text */
  --tp-text        : #1A1209;
  --tp-text2       : #44403C;
  --tp-text3       : #78716C;
  --tp-muted       : #A8A29E;

  /* Borders */
  --tp-border      : #E7E2D6;
  --tp-border2     : #D6D0C4;

  /* Shadows */
  --tp-shadow-sm   : 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --tp-shadow      : 0 3px 12px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
  --tp-shadow-lg   : 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --tp-shadow-xl   : 0 16px 48px rgba(0,0,0,.16), 0 4px 16px rgba(0,0,0,.08);

  /* Radii */
  --tp-radius-sm   : 8px;
  --tp-radius      : 14px;
  --tp-radius-lg   : 20px;
  --tp-radius-xl   : 28px;

  /* Header — tp-module inner nav sits below global header (62px) */
  --tp-header-h    : 62px;   /* global header height */
  --tp-nav-h       : 52px;   /* tp inner nav bar height */
}

/* ──────────────────────────────────────────────
   RESET & BASE
────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background  : var(--tp-bg);
  color       : var(--tp-text);
  font-family : 'Cairo', sans-serif;
  font-size   : 15px;
  min-height  : 100vh;
  direction   : rtl;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar              { width: 7px; height: 7px; }
::-webkit-scrollbar-track        { background: var(--tp-bg3); }
::-webkit-scrollbar-thumb        { background: var(--tp-border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--tp-muted); }

/* ──────────────────────────────────────────────
   UTILITY
────────────────────────────────────────────── */
.hidden           { display: none !important; }
.req-star         { color: var(--tp-red); margin-right: .15rem; }
.tp-text-gold     { color: var(--tp-gold); }
.tp-text-primary  { color: var(--tp-primary); }
.tp-text-green    { color: var(--tp-green); }
.tp-text-muted    { color: var(--tp-muted); }

/* ══════════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════════ */
.tp-login-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(145deg, #FFFBF0 0%, #F5F0E8 40%, #EDE8DA 100%);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.tp-login-screen.hidden { display: none !important; }

.tp-login-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.tp-login-circle { position: absolute; border-radius: 50%; }
.tp-login-circle:nth-child(1) {
  width: 520px; height: 520px; top: -130px; right: -100px;
  background: radial-gradient(circle, rgba(196,154,0,.12) 0%, transparent 70%);
}
.tp-login-circle:nth-child(2) {
  width: 420px; height: 420px; bottom: -100px; left: -80px;
  background: radial-gradient(circle, rgba(109,40,217,.08) 0%, transparent 70%);
}

.tp-login-box {
  position: relative; z-index: 1;
  background: var(--tp-surface);
  border: 1.5px solid var(--tp-gold-border);
  border-radius: var(--tp-radius-xl);
  padding: 2.5rem 2.25rem;
  width: 100%; max-width: 440px;
  box-shadow: var(--tp-shadow-xl);
  animation: tpFadeInUp .55s ease forwards;
}

@keyframes tpFadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes tpShake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-6px); }
  40%,80% { transform:translateX(6px); }
}
.shake { animation: tpShake .42s ease; }

.tp-login-brand {
  text-align: center; margin-bottom: 1.75rem;
}
.tp-login-logo {
  height: 56px; width: auto; margin-bottom: .75rem;
  filter: drop-shadow(0 2px 6px rgba(196,154,0,.2));
}
.tp-login-title {
  font-size: 1.05rem; font-weight: 800; color: var(--tp-text);
}
.tp-login-sub {
  font-size: .82rem; color: var(--tp-gold); font-weight: 600;
  margin-top: .2rem;
}

.tp-login-form { display: flex; flex-direction: column; gap: 1rem; }

.tp-form-group { display: flex; flex-direction: column; gap: .35rem; }
.tp-form-group label {
  font-size: .82rem; font-weight: 700; color: var(--tp-text2);
}
.tp-form-group label i { margin-left: .35rem; color: var(--tp-gold); }

.tp-input {
  width: 100%;
  background: var(--tp-surface2);
  border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  padding: .65rem 1rem;
  font-family: 'Cairo', sans-serif;
  font-size: .88rem;
  color: var(--tp-text);
  transition: border-color .2s, box-shadow .2s;
  direction: rtl;
  text-align: right;
}
.tp-input:focus {
  outline: none;
  border-color: var(--tp-gold-l);
  box-shadow: 0 0 0 3px rgba(196,154,0,.14);
}
.tp-input::placeholder { color: var(--tp-muted); }

/* Select dropdown — RTL, rounded, proper width */
select.tp-input,
.tp-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A8A29E' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .75rem center;
  padding-left: 2.25rem;
  text-align: right;
  direction: rtl;
}
select.tp-input option { direction: rtl; text-align: right; }

/* Textarea — normal */
textarea.tp-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.65;
}

/* Notes textarea — enlarged for clinician */
.tp-textarea--notes {
  min-height: 120px;
  padding: .85rem 1rem;
  border-radius: var(--tp-radius-sm);
  font-size: .88rem;
  line-height: 1.7;
  width: 100%;
  background: var(--tp-surface2);
  border: 1.5px solid var(--tp-border);
  color: var(--tp-text);
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', sans-serif;
  transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.tp-textarea--notes:focus {
  outline: none;
  border-color: var(--tp-gold-l);
  box-shadow: 0 0 0 3px rgba(196,154,0,.14);
}
.tp-textarea--notes::placeholder {
  color: var(--tp-muted);
  font-style: italic;
}

.tp-pwd-wrap { position: relative; }
.tp-pwd-wrap .tp-input { padding-left: 2.8rem; }
.tp-pwd-eye {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--tp-muted); font-size: .9rem; padding: .2rem;
  transition: color .2s;
}
.tp-pwd-eye:hover { color: var(--tp-gold); }

.tp-login-error {
  display: none; background: var(--tp-red-bg); border: 1px solid var(--tp-red-border);
  color: var(--tp-red); border-radius: var(--tp-radius-sm);
  padding: .5rem .75rem; font-size: .82rem; font-weight: 600; text-align: center;
}
.tp-login-error.visible { display: block; }

.tp-btn-login {
  width: 100%; padding: .75rem;
  background: linear-gradient(135deg, var(--tp-gold-l), var(--tp-gold));
  color: #fff; border: none; border-radius: var(--tp-radius);
  font-family: 'Cairo', sans-serif; font-size: .95rem; font-weight: 800;
  cursor: pointer; box-shadow: 0 4px 16px rgba(196,154,0,.35);
  transition: all .2s; margin-top: .25rem;
}
.tp-btn-login:hover {
  box-shadow: 0 6px 24px rgba(196,154,0,.5);
  transform: translateY(-1px);
}
.tp-btn-login:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.tp-login-footer {
  text-align: center; margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--tp-border);
}
.tp-back-link {
  color: var(--tp-text3); font-size: .8rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem; font-weight: 600;
  transition: color .2s;
}
.tp-back-link:hover { color: var(--tp-gold); }
.tp-back-link i { font-size: .75rem; }

/* ══════════════════════════════════════════════
   MAIN APP WRAPPER
══════════════════════════════════════════════ */
.tp-app { display: flex; flex-direction: column; min-height: 100vh; }
.tp-app.hidden { display: none !important; }

/* ══════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════ */
.tp-header {
  position: sticky;
  /* Sit directly below the global header (62px) */
  top: var(--tp-header-h, 62px);
  z-index: 200;
  background: var(--tp-surface);
  border-bottom: 1.5px solid var(--tp-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  height: 52px;
}
.tp-header-inner {
  max-width: 1280px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.5rem;
}

/* Hide brand (shown in global header instead) */
.tp-header-brand { display: none !important; }

/* Hide user badge + back/logout buttons from tp-module header (they're in global header) */
.tp-header-actions .tp-user-badge,
.tp-header-actions .tp-btn-back,
.tp-header-actions .tp-btn-logout { display: none !important; }

/* Keep admin actions visible (manage link etc.) */
.tp-header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.tp-header-logo { height: 40px; width: auto; }
.tp-header-title {
  font-size: .92rem; font-weight: 900; color: var(--tp-text);
  line-height: 1.2;
}
.tp-header-sub {
  font-size: .7rem; color: var(--tp-gold); font-weight: 600;
}

/* Nav */
.tp-header-nav {
  display: flex; align-items: center; gap: .3rem;
  flex: 1; overflow-x: auto; padding: 0 .5rem;
}
.tp-header-nav::-webkit-scrollbar { display: none; }

.tp-nav-btn {
  display: flex; align-items: center; gap: .35rem;
  padding: .45rem .85rem; border-radius: var(--tp-radius-sm);
  background: none; border: 1.5px solid transparent;
  font-family: 'Cairo', sans-serif; font-size: .8rem; font-weight: 700;
  color: var(--tp-text3); cursor: pointer; white-space: nowrap;
  transition: all .2s;
}
.tp-nav-btn:hover {
  background: var(--tp-gold-bg);
  color: var(--tp-gold);
  border-color: var(--tp-gold-border);
}
.tp-nav-btn.active {
  background: var(--tp-gold-bg);
  color: var(--tp-gold);
  border-color: var(--tp-gold-l);
  box-shadow: var(--tp-shadow-sm);
}
.tp-nav-btn i { font-size: .8rem; }

/* Header actions */
.tp-header-actions {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
}
.tp-user-badge {
  display: flex; align-items: center; gap: .5rem;
  background: var(--tp-bg3); border: 1px solid var(--tp-border);
  border-radius: 20px; padding: .3rem .7rem .3rem .5rem;
}
.tp-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tp-gold-l), var(--tp-gold));
  color: #fff; font-size: .8rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tp-user-info { line-height: 1.15; }
.tp-user-name  { font-size: .77rem; font-weight: 700; color: var(--tp-text); }
.tp-user-role  { font-size: .68rem; color: var(--tp-gold); font-weight: 600; }

.tp-btn-back, .tp-btn-logout {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--tp-radius-sm);
  border: 1.5px solid var(--tp-border);
  background: var(--tp-surface); color: var(--tp-text3);
  font-size: .85rem; cursor: pointer; text-decoration: none;
  transition: all .2s;
}
.tp-btn-back:hover  { border-color: var(--tp-gold); color: var(--tp-gold); background: var(--tp-gold-bg); }
.tp-btn-logout:hover { border-color: var(--tp-red); color: var(--tp-red); background: var(--tp-red-bg); }

/* ══════════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════════ */
.tp-main {
  flex: 1; max-width: 1280px; width: 100%;
  margin: 0 auto; padding: 1.75rem 1.5rem 3rem;
}

/* Views */
.tp-view { display: none; }
.tp-view.active { display: block; animation: tpFadeIn .3s ease; }

@keyframes tpFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────
   VIEW HEADER
────────────────────────────────────────────── */
.tp-view-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem;
}
.tp-view-header h2 {
  font-size: 1.25rem; font-weight: 900; color: var(--tp-text);
  display: flex; align-items: center; gap: .5rem;
}
.tp-view-header h2 i { color: var(--tp-gold); font-size: 1.1rem; }
.tp-view-header p {
  font-size: .83rem; color: var(--tp-text3); margin-top: .25rem;
}

/* ──────────────────────────────────────────────
   CARD COMPONENT
────────────────────────────────────────────── */
.tp-card {
  background: var(--tp-surface);
  border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  box-shadow: var(--tp-shadow-sm);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem;
}
.tp-card-title {
  font-size: .92rem; font-weight: 800; color: var(--tp-text);
  margin-bottom: .9rem;
  display: flex; align-items: center; gap: .4rem;
  padding-bottom: .65rem; border-bottom: 1px solid var(--tp-border);
}
.tp-card-title i { color: var(--tp-gold); }

/* ──────────────────────────────────────────────
   LOADING / EMPTY STATES
────────────────────────────────────────────── */
.tp-loading {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: 3rem 1.5rem; color: var(--tp-muted);
  font-size: .88rem;
}
.tp-loading i { color: var(--tp-gold); }

.tp-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: 4rem 1.5rem; color: var(--tp-muted);
  font-size: .88rem; text-align: center;
}
.tp-empty i { color: var(--tp-border2); }

/* ══════════════════════════════════════════════
   BROWSE VIEW
══════════════════════════════════════════════ */
.tp-browse-toolbar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-bottom: 1.5rem;
}
.tp-search-bar {
  display: flex; align-items: center; gap: .5rem;
  background: var(--tp-surface); border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius); padding: .45rem .9rem;
  flex: 1; min-width: 220px; max-width: 380px;
  transition: border-color .2s, box-shadow .2s;
}
.tp-search-bar:focus-within {
  border-color: var(--tp-gold-l);
  box-shadow: 0 0 0 3px rgba(196,154,0,.12);
}
.tp-search-bar i { color: var(--tp-muted); font-size: .85rem; flex-shrink: 0; }
.tp-search-bar input {
  border: none; background: none; outline: none;
  font-family: 'Cairo', sans-serif; font-size: .88rem; color: var(--tp-text);
  width: 100%; direction: rtl;
}
.tp-search-bar input::placeholder { color: var(--tp-muted); }

/* Category filters */
.tp-cat-filters {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.tp-cat-btn {
  display: flex; align-items: center; gap: .3rem;
  padding: .4rem .85rem; border-radius: 20px;
  border: 1.5px solid var(--tp-border); background: var(--tp-surface);
  font-family: 'Cairo', sans-serif; font-size: .78rem; font-weight: 700;
  color: var(--tp-text3); cursor: pointer;
  transition: all .2s;
}
.tp-cat-btn:hover { border-color: var(--tp-gold); color: var(--tp-gold); background: var(--tp-gold-bg); }
.tp-cat-btn.active {
  background: var(--tp-gold-bg); border-color: var(--tp-gold-l);
  color: var(--tp-gold); box-shadow: var(--tp-shadow-sm);
}
.tp-cat-btn i { font-size: .75rem; }

/* Programs grid */
.tp-programs-grid { display: flex; flex-direction: column; gap: 2rem; }

.tp-category-section {}
.tp-category-header {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--tp-border);
}
.tp-cat-icon {
  width: 36px; height: 36px; border-radius: var(--tp-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.tp-category-header h3 {
  font-size: 1rem; font-weight: 900; color: var(--tp-text);
}
.tp-category-header .tp-cat-count {
  font-size: .72rem; color: var(--tp-muted); font-weight: 600;
  background: var(--tp-bg3); border-radius: 20px; padding: .1rem .5rem;
  margin-right: auto;
}

.tp-programs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* Program card */
.tp-prog-card {
  background: var(--tp-surface);
  border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  padding: 1.1rem 1.2rem 1rem;
  cursor: pointer;
  transition: transform .22s, box-shadow .22s, border-color .22s;
  box-shadow: var(--tp-shadow-sm);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .6rem;
}
.tp-prog-card::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
  background: var(--pc, var(--tp-gold-l));
  border-radius: var(--tp-radius-lg) var(--tp-radius-lg) 0 0;
}
.tp-prog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tp-shadow);
  border-color: var(--tp-gold-border);
}
.tp-prog-card:focus-visible { outline: 2px solid var(--tp-gold); }

.tp-pc-head {
  display: flex; align-items: flex-start; gap: .6rem;
}
.tp-pc-icon {
  width: 40px; height: 40px; border-radius: var(--tp-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
  background: var(--tp-gold-bg); border: 1px solid var(--tp-gold-border);
}
.tp-pc-name {
  font-size: .9rem; font-weight: 800; color: var(--tp-text);
  line-height: 1.3; flex: 1;
}
.tp-pc-sub {
  font-size: .73rem; color: var(--tp-text3); margin-top: .15rem;
}
.tp-pc-meta {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.tp-pc-badge {
  font-size: .7rem; font-weight: 700; border-radius: 20px;
  padding: .15rem .55rem; display: inline-flex; align-items: center; gap: .25rem;
}
.tp-pc-badge--sessions {
  background: var(--tp-primary-bg); color: var(--tp-primary);
  border: 1px solid var(--tp-primary-border);
}
.tp-pc-badge--price {
  background: var(--tp-green-bg); color: var(--tp-green);
  border: 1px solid var(--tp-green-border);
}
.tp-pc-badge--stages {
  background: var(--tp-gold-bg); color: var(--tp-gold);
  border: 1px solid var(--tp-gold-border);
}

/* ══════════════════════════════════════════════
   PROGRAM DETAIL VIEW
══════════════════════════════════════════════ */
.tp-breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--tp-text3);
  margin-bottom: 1.25rem;
}
.tp-breadcrumb-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: none; cursor: pointer;
  font-family: 'Cairo', sans-serif; font-size: .8rem;
  font-weight: 700; color: var(--tp-gold);
  padding: .3rem .5rem; border-radius: var(--tp-radius-sm);
  transition: background .2s;
}
.tp-breadcrumb-btn:hover { background: var(--tp-gold-bg); }
.tp-breadcrumb-sep { color: var(--tp-border2); }

.tp-detail-content {}

.tp-detail-hero {
  background: var(--tp-surface);
  border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  padding: 1.5rem; margin-bottom: 1.25rem;
  display: flex; align-items: flex-start; gap: 1rem;
  box-shadow: var(--tp-shadow-sm);
}
.tp-dh-icon {
  width: 56px; height: 56px; border-radius: var(--tp-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
  background: var(--tp-gold-bg); border: 2px solid var(--tp-gold-border);
}
.tp-dh-body { flex: 1; }
.tp-dh-name {
  font-size: 1.2rem; font-weight: 900; color: var(--tp-text); margin-bottom: .25rem;
}
.tp-dh-cat  { font-size: .78rem; color: var(--tp-gold); font-weight: 700; }
.tp-dh-desc { font-size: .85rem; color: var(--tp-text3); margin-top: .5rem; line-height: 1.6; }

.tp-detail-stats {
  display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .85rem;
}
.tp-ds-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
}
.tp-ds-pill--sessions { background: var(--tp-primary-bg); color: var(--tp-primary); border: 1px solid var(--tp-primary-border); }
.tp-ds-pill--price    { background: var(--tp-green-bg); color: var(--tp-green); border: 1px solid var(--tp-green-border); }
.tp-ds-pill--stages   { background: var(--tp-gold-bg); color: var(--tp-gold); border: 1px solid var(--tp-gold-border); }

.tp-goals-list {
  list-style: none; display: flex; flex-direction: column; gap: .4rem;
}
.tp-goals-list li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .85rem; color: var(--tp-text2); line-height: 1.5;
}
.tp-goals-list li::before {
  content: '✦'; color: var(--tp-gold); font-size: .6rem; margin-top: .35rem; flex-shrink: 0;
}

/* Stages accordion */
.tp-stages-list { display: flex; flex-direction: column; gap: .65rem; }
.tp-stage-item {
  background: var(--tp-surface2);
  border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius);
  overflow: hidden;
}
.tp-stage-header {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem;
}
.tp-stage-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--tp-gold-bg); border: 1.5px solid var(--tp-gold-border);
  color: var(--tp-gold); font-size: .72rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tp-stage-name { flex: 1; font-size: .88rem; font-weight: 700; color: var(--tp-text); }
.tp-stage-sessions {
  font-size: .76rem; font-weight: 700;
  background: var(--tp-primary-bg); color: var(--tp-primary);
  border-radius: 20px; padding: .15rem .55rem;
}
.tp-stage-price {
  font-size: .76rem; font-weight: 700;
  background: var(--tp-green-bg); color: var(--tp-green);
  border-radius: 20px; padding: .15rem .55rem;
}
.tp-stage-body {
  padding: 0 1rem .8rem;
  font-size: .82rem; color: var(--tp-text3); line-height: 1.6;
}
.tp-stage-start-btn {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .5rem;
  background: none; border: 1.5px solid var(--tp-primary-border);
  border-radius: var(--tp-radius-sm); padding: .3rem .7rem;
  font-family: 'Cairo', sans-serif; font-size: .76rem; font-weight: 700;
  color: var(--tp-primary); cursor: pointer; transition: all .2s;
}
.tp-stage-start-btn:hover { background: var(--tp-primary-bg); }

.tp-detail-cta {
  margin-top: 1.5rem; display: flex; gap: .75rem; flex-wrap: wrap;
}

/* ══════════════════════════════════════════════
   CREATE PLAN VIEW
══════════════════════════════════════════════ */
.tp-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .85rem; margin-bottom: .85rem;
}
.tp-form-row:last-child { margin-bottom: 0; }

/* Plan mode tabs */
.tp-mode-tabs {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.tp-mode-tab {
  display: flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem; border-radius: var(--tp-radius-sm);
  border: 1.5px solid var(--tp-border);
  background: var(--tp-surface); font-family: 'Cairo', sans-serif;
  font-size: .8rem; font-weight: 700; color: var(--tp-text3);
  cursor: pointer; transition: all .2s;
}
.tp-mode-tab:hover { border-color: var(--tp-gold); color: var(--tp-gold); background: var(--tp-gold-bg); }
.tp-mode-tab.active {
  background: var(--tp-gold-bg); border-color: var(--tp-gold-l);
  color: var(--tp-gold); box-shadow: var(--tp-shadow-sm);
}
.tp-mode-panel { display: none; }
.tp-mode-panel.active { display: block; animation: tpFadeIn .25s ease; }

/* Stages selection grid */
.tp-stages-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: .6rem;
}
.tp-stage-check-label {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem; border-radius: var(--tp-radius-sm);
  border: 1.5px solid var(--tp-border); background: var(--tp-surface);
  cursor: pointer; transition: all .2s; font-size: .8rem; font-weight: 600;
  color: var(--tp-text);
}
.tp-stage-check-label input { accent-color: var(--tp-primary); }
.tp-stage-check-label:hover { border-color: var(--tp-gold); background: var(--tp-gold-bg); }
.tp-stage-check-label.checked { border-color: var(--tp-primary); background: var(--tp-primary-bg); color: var(--tp-primary); }

/* Mixed items (legacy — kept for compat) */
.tp-mixed-items { display: flex; flex-direction: column; gap: .65rem; margin-bottom: .85rem; }
.tp-mixed-item {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: .6rem; align-items: end;
  background: var(--tp-surface2); border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm); padding: .75rem;
}

/* ═══════════════════════════════════════════════════════
   PROGRAM ICON CARDS — CREATE PLAN  v4.0
═══════════════════════════════════════════════════════ */
.tp-prog-hint {
  display: flex; align-items: center; gap: .4rem;
  background: var(--tp-gold-bg); border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm); padding: .55rem .85rem;
  font-size: .78rem; color: var(--tp-text3); font-weight: 600;
  margin-bottom: 1rem;
}
.tp-prog-hint i { color: var(--tp-gold); font-size: .85rem; flex-shrink: 0; }

/* Programs grid */
.tp-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
}

/* Single program card */
.tp-prog-card {
  display: flex; flex-direction: column; align-items: center;
  gap: .35rem; padding: .85rem .5rem;
  border-radius: var(--tp-radius);
  border: 2px solid var(--tp-border);
  background: var(--tp-surface);
  cursor: pointer; transition: all .25s;
  text-align: center; position: relative;
}
.tp-prog-card:hover {
  border-color: var(--tp-gold);
  background: var(--tp-gold-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(196,154,0,.12);
}
.tp-prog-card.active {
  border-color: var(--tp-gold);
  background: var(--tp-gold-bg);
  box-shadow: 0 0 0 3px rgba(196,154,0,.15), 0 4px 16px rgba(196,154,0,.12);
}
.tp-prog-card.has-selection {
  border-color: var(--tp-primary);
  background: rgba(124,58,237,.06);
}
.tp-prog-card.has-selection::after {
  content: '\f058'; /* fa-check-circle */
  font-family: 'Font Awesome 5 Free'; font-weight: 900;
  position: absolute; top: 6px; left: 6px;
  font-size: .7rem; color: var(--tp-primary);
}

.tp-prog-card-icon {
  font-size: 1.8rem; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.1));
}
.tp-prog-card-name {
  font-size: .72rem; font-weight: 700;
  color: var(--tp-text); line-height: 1.3;
  max-height: 2.6em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tp-prog-card-sessions {
  font-size: .62rem; color: var(--tp-muted); font-weight: 600;
}

/* Expanded stages panel */
.tp-prog-panel {
  background: var(--tp-surface);
  border: 2px solid var(--tp-gold);
  border-radius: var(--tp-radius);
  padding: 1rem;
  margin-bottom: .75rem;
  animation: tpSlideDown .25s ease;
}
@keyframes tpSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tp-prog-panel-header {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .85rem; padding-bottom: .65rem;
  border-bottom: 1px solid var(--tp-border);
}
.tp-prog-panel-icon { font-size: 1.5rem; }
.tp-prog-panel-info { flex: 1; }
.tp-prog-panel-name {
  font-size: .92rem; font-weight: 800; color: var(--tp-text);
}
.tp-prog-panel-meta {
  font-size: .72rem; color: var(--tp-muted); font-weight: 600;
  display: flex; gap: .6rem; margin-top: .15rem;
}
.tp-prog-panel-close {
  background: var(--tp-surface2); border: 1px solid var(--tp-border);
  color: var(--tp-text3); padding: .35rem .55rem; border-radius: var(--tp-radius-sm);
  cursor: pointer; font-size: .78rem; transition: all .2s;
}
.tp-prog-panel-close:hover {
  background: #FEF2F2; border-color: #FECACA; color: #DC2626;
}

/* Full program option */
.tp-full-prog-option {
  display: flex; align-items: center; gap: .65rem;
  background: linear-gradient(135deg, rgba(196,154,0,.06), rgba(196,154,0,.02));
  border: 1.5px solid var(--tp-gold);
  border-radius: var(--tp-radius-sm);
  padding: .75rem 1rem; cursor: pointer; transition: all .2s;
  margin-bottom: .75rem;
}
.tp-full-prog-option:hover {
  background: var(--tp-gold-bg);
  box-shadow: 0 2px 10px rgba(196,154,0,.12);
}
.tp-full-prog-option.selected {
  background: var(--tp-gold-bg);
  border-color: var(--tp-gold);
  box-shadow: 0 0 0 3px rgba(196,154,0,.12);
}
.tp-full-prog-option input[type="radio"] {
  accent-color: var(--tp-gold); width: 16px; height: 16px; flex-shrink: 0;
}
.tp-full-prog-label {
  flex: 1; font-size: .85rem; font-weight: 700; color: var(--tp-text);
}
.tp-full-prog-label small {
  display: block; font-size: .72rem; color: var(--tp-muted); font-weight: 600;
  margin-top: .1rem;
}
.tp-full-prog-price {
  font-size: .82rem; font-weight: 800; color: var(--tp-primary);
  white-space: nowrap;
}

/* Stages separator */
.tp-stages-separator {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .65rem; color: var(--tp-muted); font-size: .72rem; font-weight: 700;
}
.tp-stages-separator::before,
.tp-stages-separator::after {
  content: ''; flex: 1; height: 1px; background: var(--tp-border);
}

/* Stage check items (reuse existing tp-stage-check-item) */
.tp-stages-list {
  display: flex; flex-direction: column; gap: .45rem;
}

.tp-stage-check-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .65rem .85rem; border-radius: var(--tp-radius-sm);
  border: 1.5px solid var(--tp-border); background: var(--tp-surface);
  cursor: pointer; transition: all .2s;
}
.tp-stage-check-item:hover {
  border-color: var(--tp-gold); background: rgba(196,154,0,.03);
}
.tp-stage-check-item.checked {
  border-color: var(--tp-primary);
  background: rgba(124,58,237,.04);
  box-shadow: 0 0 0 2px rgba(124,58,237,.08);
}
.tp-stage-check-item input[type="checkbox"] {
  accent-color: var(--tp-primary); width: 16px; height: 16px;
  flex-shrink: 0; margin-top: .15rem;
}
.tp-sci-name {
  font-size: .84rem; font-weight: 700; color: var(--tp-text);
}
.tp-sci-num {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tp-gold-bg); color: var(--tp-gold); border: 1px solid var(--tp-border);
  border-radius: 4px; padding: .05rem .35rem; font-size: .68rem;
  font-weight: 800; margin-left: .3rem;
}
.tp-sci-info {
  font-size: .74rem; color: var(--tp-muted); font-weight: 600;
  margin-top: .15rem; display: flex; align-items: center; gap: .3rem;
}
.tp-sci-info i { color: var(--tp-gold); font-size: .68rem; }
.tp-sci-price {
  font-size: .82rem; font-weight: 800; color: var(--tp-primary);
  white-space: nowrap; flex-shrink: 0; align-self: center;
}
.tp-sci-price-hidden {
  color: var(--tp-border2); font-size: .75rem; flex-shrink: 0; align-self: center;
}

/* Responsive */
@media (max-width: 600px) {
  .tp-prog-grid { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .tp-prog-card { padding: .65rem .35rem; }
  .tp-prog-card-icon { font-size: 1.4rem; }
  .tp-prog-card-name { font-size: .65rem; }
}
@media (max-width: 400px) {
  .tp-prog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Plan Summary */
.tp-plan-summary {
  background: var(--tp-surface2); border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius); padding: .85rem;
}
.tp-summary-empty {
  text-align: center; color: var(--tp-muted); font-size: .82rem;
  padding: 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.tp-summary-empty i { font-size: 1.5rem; color: var(--tp-border2); }
.tp-summary-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: var(--tp-radius-sm);
  background: var(--tp-surface); border: 1px solid var(--tp-border);
  margin-bottom: .35rem; font-size: .82rem;
}
.tp-si-prog { font-size: .7rem; color: var(--tp-text3); }
.tp-si-name { font-weight: 700; color: var(--tp-text); font-size: .82rem; }
.tp-si-sessions {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .73rem; font-weight: 700; white-space: nowrap;
  background: var(--tp-primary-bg); color: var(--tp-primary);
  border-radius: 20px; padding: .15rem .5rem; flex-shrink: 0;
}
.tp-si-price {
  font-size: .73rem; font-weight: 700; white-space: nowrap;
  background: var(--tp-green-bg); color: var(--tp-green);
  border-radius: 20px; padding: .15rem .5rem; flex-shrink: 0;
}
.tp-si-price-hidden {
  font-size: .73rem; color: var(--tp-muted); flex-shrink: 0;
}
.tp-si-remove {
  background: none; border: none; cursor: pointer;
  color: var(--tp-muted); font-size: .75rem; padding: .2rem;
  border-radius: 4px; transition: all .2s; flex-shrink: 0;
}
.tp-si-remove:hover { color: var(--tp-red); background: var(--tp-red-bg); }

/* Plan totals */
.tp-plan-totals {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: .65rem .75rem; border-radius: var(--tp-radius-sm);
  background: var(--tp-gold-bg); border: 1.5px solid var(--tp-gold-border);
  margin-top: .65rem; font-size: .83rem;
}
.tp-totals-sessions { font-weight: 800; color: var(--tp-primary); }
.tp-totals-price    { font-weight: 800; color: var(--tp-green); }

/* ══════════════════════════════════════════════
   PLANS LIST VIEW
══════════════════════════════════════════════ */
.tp-plans-toolbar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-bottom: 1.25rem;
}
.tp-status-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.tp-status-tab {
  padding: .4rem .85rem; border-radius: 20px;
  border: 1.5px solid var(--tp-border); background: var(--tp-surface);
  font-family: 'Cairo', sans-serif; font-size: .78rem; font-weight: 700;
  color: var(--tp-text3); cursor: pointer; transition: all .2s;
}
.tp-status-tab:hover { border-color: var(--tp-gold); color: var(--tp-gold); background: var(--tp-gold-bg); }
.tp-status-tab.active {
  background: var(--tp-gold-bg); border-color: var(--tp-gold-l); color: var(--tp-gold);
}

/* Table */
.tp-table-wrap { overflow-x: auto; border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-sm); }
.tp-table {
  width: 100%; border-collapse: collapse;
  background: var(--tp-surface); border-radius: var(--tp-radius-lg);
  overflow: hidden;
}
.tp-table thead { background: var(--tp-bg3); }
.tp-table thead th {
  padding: .75rem 1rem; font-size: .76rem; font-weight: 800;
  color: var(--tp-text2); text-align: right; border-bottom: 2px solid var(--tp-border);
  white-space: nowrap;
}
.tp-table tbody tr {
  border-bottom: 1px solid var(--tp-border);
  transition: background .18s;
}
.tp-table tbody tr:last-child { border-bottom: none; }
.tp-table tbody tr:hover { background: var(--tp-bg3); }
.tp-table td {
  padding: .7rem 1rem; font-size: .82rem; color: var(--tp-text2);
  vertical-align: middle;
}
.tp-row-done td  { opacity: .72; }

.tp-child-cell { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tp-child-name { font-weight: 800; color: var(--tp-text); }
.tp-gender-tag {
  font-size: .65rem; background: var(--tp-bg3); color: var(--tp-text3);
  border-radius: 20px; padding: .1rem .45rem; font-weight: 700;
}

/* Status badges */
.tp-status-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 800; border-radius: 20px;
  padding: .25rem .65rem; white-space: nowrap;
}
.tp-status-done {
  background: var(--tp-green-bg); color: var(--tp-green); border: 1px solid var(--tp-green-border);
}
.tp-status-pending {
  background: var(--tp-amber-bg); color: var(--tp-amber); border: 1px solid var(--tp-amber-border);
}
.tp-status-archived {
  background: #F5F5F4; color: #78716C; border: 1px solid #D6D3D1;
}

/* Table action buttons */
.tp-tbl-actions { display: flex; gap: .3rem; flex-wrap: nowrap; }
.tp-btn-icon {
  width: 30px; height: 30px; border-radius: var(--tp-radius-sm);
  border: 1.5px solid var(--tp-border);
  background: var(--tp-surface); color: var(--tp-text3);
  cursor: pointer; font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.tp-btn-view:hover         { border-color: var(--tp-primary); color: var(--tp-primary); background: var(--tp-primary-bg); }
.tp-btn-print-icon:hover   { border-color: var(--tp-gold); color: var(--tp-gold); background: var(--tp-gold-bg); }
.tp-btn-success-icon:hover { border-color: var(--tp-green); color: var(--tp-green); background: var(--tp-green-bg); }
.tp-btn-danger-icon:hover  { border-color: var(--tp-red); color: var(--tp-red); background: var(--tp-red-bg); }

/* ══════════════════════════════════════════════
   PLAN DETAIL VIEW
══════════════════════════════════════════════ */
.tp-plan-detail-header {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: .75rem; margin-bottom: 1.25rem;
  background: var(--tp-surface); border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-lg); padding: 1.25rem; box-shadow: var(--tp-shadow-sm);
}
.tp-pdh-field label {
  display: block; font-size: .7rem; font-weight: 700; color: var(--tp-muted);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .2rem;
}
.tp-pdh-field .val {
  font-size: .88rem; font-weight: 700; color: var(--tp-text);
}

.tp-plan-items-table {
  width: 100%; border-collapse: collapse;
  font-size: .82rem;
}
.tp-plan-items-table th {
  padding: .6rem .85rem; background: var(--tp-bg3);
  font-size: .75rem; font-weight: 800; color: var(--tp-text2);
  text-align: right; border-bottom: 2px solid var(--tp-border);
}
.tp-plan-items-table td {
  padding: .6rem .85rem; border-bottom: 1px solid var(--tp-border);
  color: var(--tp-text2);
}
.tp-plan-items-table tfoot tr {
  background: var(--tp-gold-bg);
  font-weight: 800;
}
.tp-plan-items-table tfoot td { color: var(--tp-gold); border-bottom: none; }

.tp-plan-detail-actions {
  display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.5rem;
}

/* ── Program Description & Goals (Plan Detail) ── */
.tp-pd-program-card {
  border-right: 4px solid var(--tp-gold);
}
.tp-pd-section {
  margin-bottom: 1.1rem;
}
.tp-pd-section:last-child {
  margin-bottom: 0;
}
.tp-pd-section-label {
  font-size: .82rem;
  font-weight: 800;
  color: var(--tp-gold);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .6rem;
}
.tp-pd-section-label i {
  font-size: .8rem;
}
.tp-pd-desc-text {
  font-size: .86rem;
  color: #44403C;
  line-height: 1.75;
  padding: .7rem 1rem;
  background: #FEFCE8;
  border-radius: 10px;
  border: 1px solid #FEF08A;
  margin: 0;
}
.tp-pd-goals-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.tp-pd-goal-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .84rem;
  color: #44403C;
  line-height: 1.55;
  padding: .5rem .8rem;
  background: #F0FDF4;
  border-radius: 8px;
  border: 1px solid #BBF7D0;
}
.tp-pd-goal-item i {
  color: #16A34A;
  margin-top: 3px;
  flex-shrink: 0;
  font-size: .78rem;
}
.tp-pd-stage-detail {
  padding: .85rem 1rem;
  background: #F8FAFC;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  margin-bottom: .65rem;
}
.tp-pd-stage-detail:last-child {
  margin-bottom: 0;
}
.tp-pd-stage-name {
  font-size: .84rem;
  font-weight: 800;
  color: #6D28D9;
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .5rem;
}
.tp-pd-stage-name i {
  font-size: .75rem;
  color: #7C3AED;
}
.tp-pd-stage-desc {
  font-size: .82rem;
  color: #64748B;
  line-height: 1.65;
  margin: 0 0 .5rem;
  padding-right: .5rem;
}
.tp-pd-stage-detail .tp-pd-goals-list .tp-pd-goal-item {
  background: #EFF6FF;
  border-color: #BFDBFE;
  font-size: .8rem;
}
.tp-pd-stage-detail .tp-pd-goals-list .tp-pd-goal-item i {
  color: #3B82F6;
}

/* ══════════════════════════════════════════════
   RECEPTION VIEW
══════════════════════════════════════════════ */
.tp-reception-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap: .85rem; margin-bottom: 1.5rem;
}
.tp-stat-card {
  display: flex; align-items: center; gap: .75rem;
  background: var(--tp-surface); border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius); padding: .9rem 1rem;
  box-shadow: var(--tp-shadow-sm);
}
.tp-stat-icon {
  width: 40px; height: 40px; border-radius: var(--tp-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.tp-stat-val   { font-size: 1.2rem; font-weight: 900; line-height: 1; }
.tp-stat-label { font-size: .72rem; color: var(--tp-muted); font-weight: 600; margin-top: .2rem; }

.tp-reception-filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.tp-btn-primary, .tp-btn-secondary, .tp-btn-success,
.tp-btn-danger,  .tp-btn-outline,   .tp-btn-sm,
.tp-btn-gold {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: var(--tp-radius-sm); cursor: pointer;
  font-family: 'Cairo', sans-serif; font-weight: 700;
  transition: all .2s; white-space: nowrap; border: 1.5px solid transparent;
  text-decoration: none;
}
.tp-btn-primary {
  background: linear-gradient(135deg, var(--tp-gold-l), var(--tp-gold));
  color: #fff; font-size: .85rem; padding: .55rem 1.1rem;
  box-shadow: 0 3px 12px rgba(196,154,0,.3);
  border-color: var(--tp-gold);
}
.tp-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(196,154,0,.45); transform: translateY(-1px);
}
.tp-btn-secondary {
  background: var(--tp-surface); color: var(--tp-text2);
  border-color: var(--tp-border); font-size: .85rem; padding: .55rem 1.1rem;
}
.tp-btn-secondary:hover { background: var(--tp-bg3); border-color: var(--tp-border2); }
.tp-btn-success {
  background: var(--tp-green); color: #fff; font-size: .85rem; padding: .55rem 1.1rem;
  border-color: var(--tp-green); box-shadow: 0 3px 12px rgba(22,163,74,.3);
}
.tp-btn-success:hover { box-shadow: 0 6px 20px rgba(22,163,74,.45); transform: translateY(-1px); }
.tp-btn-success:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.tp-btn-danger {
  background: var(--tp-red); color: #fff; font-size: .85rem; padding: .55rem 1.1rem;
  border-color: var(--tp-red);
}
.tp-btn-danger:hover { opacity: .9; transform: translateY(-1px); }
.tp-btn-outline {
  background: var(--tp-surface); color: var(--tp-text2);
  border-color: var(--tp-border); font-size: .85rem; padding: .55rem 1.1rem;
}
.tp-btn-outline:hover { border-color: var(--tp-gold); color: var(--tp-gold); background: var(--tp-gold-bg); }
.tp-btn-sm {
  font-size: .75rem; padding: .35rem .75rem;
  background: var(--tp-surface); color: var(--tp-text2);
  border-color: var(--tp-border);
}
.tp-btn-sm:hover { border-color: var(--tp-gold); color: var(--tp-gold); background: var(--tp-gold-bg); }
.tp-btn-sm.tp-btn-primary {
  background: linear-gradient(135deg, var(--tp-gold-l), var(--tp-gold));
  color: #fff; border-color: var(--tp-gold); font-size: .75rem; padding: .35rem .75rem;
  box-shadow: 0 2px 8px rgba(196,154,0,.25);
}
.tp-btn-sm.tp-btn-danger { background: var(--tp-red); color: #fff; border-color: var(--tp-red); }
.tp-btn-sm.tp-btn-outline { font-size: .75rem; padding: .35rem .75rem; }

/* ══════════════════════════════════════════════
   ADMIN MANAGE VIEW
══════════════════════════════════════════════ */
.tp-manage-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem;
}
@media (max-width: 768px) {
  .tp-manage-layout { grid-template-columns: 1fr; }
}

.tp-manage-programs-panel, .tp-manage-edit-panel {
  background: var(--tp-surface); border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-lg); overflow: hidden; box-shadow: var(--tp-shadow-sm);
}
.tp-manage-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; background: var(--tp-bg3);
  border-bottom: 1.5px solid var(--tp-border);
  font-size: .85rem; font-weight: 800; color: var(--tp-text);
}
.tp-manage-panel-header i { color: var(--tp-gold); }
.tp-manage-list { overflow-y: auto; max-height: 540px; }
.tp-manage-list-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; cursor: pointer;
  border-bottom: 1px solid var(--tp-border);
  transition: background .18s;
}
.tp-manage-list-item:last-child { border-bottom: none; }
.tp-manage-list-item:hover { background: var(--tp-gold-bg); }
.tp-manage-list-item.active { background: var(--tp-gold-bg); border-right: 3px solid var(--tp-gold); }
.tp-mli-icon { font-size: 1.1rem; flex-shrink: 0; }
.tp-mli-name { font-size: .83rem; font-weight: 700; color: var(--tp-text); }
.tp-mli-cat  { font-size: .7rem; color: var(--tp-muted); }
.tp-mli-stages {
  font-size: .68rem; background: var(--tp-bg3); color: var(--tp-text3);
  border-radius: 20px; padding: .1rem .45rem; margin-right: auto; white-space: nowrap;
}

.tp-manage-edit-body {
  padding: 1.1rem; overflow-y: auto; max-height: 580px;
}
.tp-manage-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .6rem; padding: 3rem 1.5rem; color: var(--tp-muted); text-align: center; font-size: .85rem;
}
.tp-admin-form { display: flex; flex-direction: column; gap: .75rem; }

.tp-stage-edit-item {
  background: var(--tp-surface2); border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-sm); padding: .85rem; margin-bottom: .65rem;
}
.tp-stage-edit-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .65rem; font-size: .8rem; font-weight: 800; color: var(--tp-text);
}
.tp-stage-edit-num { display: flex; align-items: center; gap: .3rem; color: var(--tp-primary); }

/* ── قسم الخدمات العلاجية داخل نموذج تعديل المرحلة ── */
.tp-stage-svc-section {
  background: #FAFAF6;
  border: 1.5px solid #EDE8D0;
  border-radius: 8px;
  padding: .75rem .85rem;
  margin: .65rem 0 .5rem;
}
.tp-stage-svc-title {
  font-size: .78rem; font-weight: 800; color: var(--tp-gold);
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .65rem; flex-wrap: wrap;
}
.tp-stage-svc-hint {
  font-size: .68rem; font-weight: 600; color: var(--tp-muted);
  background: var(--tp-gold-bg); border-radius: 10px;
  padding: .1rem .45rem;
}
.tp-home-toggle-label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 700; color: var(--tp-text);
  cursor: pointer; user-select: none;
}
.tp-stage-svc-total {
  display: flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--tp-text3); font-weight: 700;
  background: #F3F0FF; border: 1px solid #DDD6FE;
  border-radius: 20px; padding: .2rem .65rem;
  align-self: center; justify-self: end;
  white-space: nowrap;
}
.tp-stage-svc-total strong { color: #7C3AED; font-size: .85rem; }

.tp-add-stage-btn {
  width: 100%; padding: .55rem;
  background: var(--tp-surface2); border: 2px dashed var(--tp-border2);
  border-radius: var(--tp-radius-sm); font-family: 'Cairo', sans-serif;
  font-size: .8rem; font-weight: 700; color: var(--tp-text3);
  cursor: pointer; transition: all .2s; margin-bottom: .65rem;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.tp-add-stage-btn:hover { border-color: var(--tp-gold); color: var(--tp-gold); background: var(--tp-gold-bg); }

.tp-save-program-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--tp-gold-l), var(--tp-gold));
  color: #fff; border: none; border-radius: var(--tp-radius-sm);
  padding: .65rem; font-family: 'Cairo', sans-serif;
  font-size: .88rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 12px rgba(196,154,0,.3); transition: all .2s;
}
.tp-save-program-btn:hover { box-shadow: 0 6px 20px rgba(196,154,0,.45); transform: translateY(-1px); }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.tp-footer {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 1rem 1.5rem;
  background: var(--tp-surface); border-top: 1px solid var(--tp-border);
  font-size: .76rem; color: var(--tp-muted);
}
.tp-footer-logo { height: 22px; width: auto; opacity: .7; }

/* ══════════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════════ */
.tp-toast {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: var(--tp-radius);
  font-size: .83rem; font-weight: 700;
  box-shadow: var(--tp-shadow-lg); animation: tpToastIn .28s ease;
  pointer-events: auto; max-width: 320px;
}
@keyframes tpToastIn {
  from { opacity:0; transform:translateY(8px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.tp-toast-success { background: var(--tp-green);   color: #fff; }
.tp-toast-danger  { background: var(--tp-red);     color: #fff; }
.tp-toast-warning { background: var(--tp-amber);   color: #fff; }
.tp-toast-info    { background: var(--tp-primary); color: #fff; }

/* ══════════════════════════════════════════════
   EXECUTION MODAL
══════════════════════════════════════════════ */
.tp-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(26,18,9,.45);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.tp-modal-backdrop.open { opacity: 1; pointer-events: all; }

.tp-modal {
  position: fixed; z-index: 1001;
  top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.95);
  background: var(--tp-surface);
  border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-xl);
  box-shadow: var(--tp-shadow-xl);
  width: 96%; max-width: 1100px; max-height: 92vh;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: all .28s cubic-bezier(.34,1.56,.64,1);
}
.tp-modal.open {
  opacity: 1; pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.tp-modal-header {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1.25rem 1.5rem; border-bottom: 1.5px solid var(--tp-border);
  flex-shrink: 0;
}
.tp-modal-header h3 {
  font-size: 1rem; font-weight: 900; color: var(--tp-text);
  display: flex; align-items: center; gap: .4rem;
}
.tp-modal-header h3 i { color: var(--tp-green); }
.tp-modal-sub { font-size: .77rem; color: var(--tp-text3); margin-top: .2rem; line-height: 1.5; }
.tp-modal-close {
  width: 32px; height: 32px; border-radius: var(--tp-radius-sm);
  background: none; border: 1.5px solid var(--tp-border);
  cursor: pointer; color: var(--tp-text3); font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s; margin-right: auto;
}
.tp-modal-close:hover { border-color: var(--tp-red); color: var(--tp-red); background: var(--tp-red-bg); }

.tp-modal-body {
  flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem;
  display: flex; flex-direction: column; gap: .85rem;
}

/* Execution modal — child strip */
.exec-child-strip {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.exec-child-badge, .exec-file-badge, .exec-sel-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 700; border-radius: 20px; padding: .25rem .65rem;
}
.exec-child-badge { background: var(--tp-gold-bg); color: var(--tp-gold); border: 1px solid var(--tp-gold-border); }
.exec-file-badge  { background: var(--tp-primary-bg); color: var(--tp-primary); border: 1px solid var(--tp-primary-border); }
.exec-sel-badge   { background: var(--tp-bg3); color: var(--tp-text3); border: 1px solid var(--tp-border); }

/* Bulk row */
.exec-bulk-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.exec-bulk-hint { font-size: .72rem; color: var(--tp-muted); margin-right: auto; }

/* Items list */
.exec-items-list {
  display: flex; flex-direction: column; gap: .4rem;
  max-height: 180px; overflow-y: auto;
  padding: .25rem;
}
.exec-items-list::-webkit-scrollbar { width: 4px; }
.exec-items-list::-webkit-scrollbar-thumb { background: var(--tp-border2); border-radius: 4px; }

.exec-item-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .85rem;
  background: var(--tp-surface2); border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-sm); cursor: pointer;
  transition: all .2s;
}
.exec-item-row:hover { border-color: var(--tp-gold-border); background: var(--tp-gold-bg); }
.exec-item-row.exec-row-off {
  opacity: .5; background: var(--tp-bg3); border-style: dashed;
}

.exec-item-info { flex: 1; min-width: 0; }
.exec-item-prog  { font-size: .7rem; color: var(--tp-text3); }
.exec-item-stage { font-size: .83rem; font-weight: 700; color: var(--tp-text); }

.exec-item-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex-shrink: 0;
}
.exec-sessions {
  font-size: .72rem; font-weight: 700;
  background: var(--tp-primary-bg); color: var(--tp-primary);
  border-radius: 20px; padding: .15rem .5rem;
  display: inline-flex; align-items: center; gap: .2rem;
}
.exec-price {
  font-size: .72rem; font-weight: 700;
  background: var(--tp-green-bg); color: var(--tp-green);
  border-radius: 20px; padding: .15rem .5rem;
}

/* Totals bar — hidden from display; DOM kept for tpExecRecalcTotals() logic */
.exec-totals-bar {
  display: none !important;
}
.exec-total-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--tp-text2);
}
.exec-total-item i { color: var(--tp-gold); }
.exec-total-item strong { font-weight: 900; color: var(--tp-text); }
.exec-total-price-val { color: var(--tp-green) !important; font-size: .9rem; }

.tp-modal-footer {
  display: flex; justify-content: flex-start; gap: .65rem;
  padding: 1rem 1.5rem; border-top: 1.5px solid var(--tp-border);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tp-main { padding: 1.25rem 1rem 2.5rem; }
  .tp-header-inner { padding: 0 1rem; }
  .tp-header-title { font-size: .85rem; }
  .tp-header-sub { display: none; }
  .tp-programs-cards { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
}
@media (max-width: 600px) {
  .tp-header-brand { gap: .4rem; }
  .tp-header-logo { height: 32px; }
  .tp-header-nav { gap: .2rem; }
  .tp-nav-btn span { display: none; }
  .tp-nav-btn i { font-size: .95rem; }
  .tp-user-info { display: none; }
  .tp-programs-cards { grid-template-columns: 1fr; }
  .tp-form-row { grid-template-columns: 1fr; }
  .tp-mixed-item { grid-template-columns: 1fr; }
  .tp-plan-detail-header { grid-template-columns: 1fr 1fr; }
  .tp-reception-stats { grid-template-columns: 1fr 1fr; }
  .tp-modal { width: 98%; max-height: 95vh; }
}

/* ══════════════════════════════════════════════
   BROWSE — PROGRAM CARD (JS-rendered)
══════════════════════════════════════════════ */
.tp-cat-section-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 900; color: var(--tp-text);
  margin: 1.5rem 0 .75rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--tp-border);
}
.tp-cat-section-title i { font-size: .85rem; }
.tp-cat-count {
  font-size: .7rem; color: var(--tp-muted); background: var(--tp-bg3);
  border-radius: 20px; padding: .1rem .5rem; margin-right: auto; font-weight: 600;
}
.tp-subcat-heading {
  font-size: .8rem; font-weight: 700; color: var(--tp-text3);
  margin: .85rem 0 .45rem; padding-right: .75rem;
  border-right: 3px solid var(--tp-gold-border);
}

.tp-program-card {
  background: var(--tp-surface);
  border: 1.5px solid var(--tp-border);
  border-top: 3px solid var(--card-color, var(--tp-gold));
  border-radius: var(--tp-radius-lg);
  padding: 1rem 1.15rem .9rem;
  cursor: pointer; box-shadow: var(--tp-shadow-sm);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  display: flex; flex-direction: column; gap: .55rem;
  margin-bottom: .85rem;
}
.tp-program-card:hover {
  transform: translateY(-3px); box-shadow: var(--tp-shadow);
  border-color: var(--card-color, var(--tp-gold-border));
}
.tp-pc-header {
  display: flex; align-items: flex-start; gap: .6rem;
}
.tp-pc-icon {
  width: 38px; height: 38px; border-radius: var(--tp-radius-sm);
  background: var(--tp-gold-bg); border: 1px solid var(--tp-gold-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.tp-pc-name { font-size: .88rem; font-weight: 800; color: var(--tp-text); line-height: 1.3; }
.tp-pc-cat  { font-size: .7rem; color: var(--tp-muted); margin-top: .1rem; }
.tp-pc-desc { font-size: .77rem; color: var(--tp-text3); line-height: 1.5; }
.tp-pc-footer {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding-top: .55rem; border-top: 1px solid var(--tp-border);
}
.tp-pc-sessions {
  font-size: .73rem; font-weight: 700; color: var(--tp-primary);
  background: var(--tp-primary-bg); border-radius: 20px; padding: .15rem .55rem;
  flex: 1;
}
.tp-pc-price-wrap { display: flex; align-items: center; gap: .35rem; }
.tp-pc-price-orig  { font-size: .7rem; color: var(--tp-muted); text-decoration: line-through; }
.tp-pc-price-final { font-size: .8rem; font-weight: 800; color: var(--tp-green); }
.tp-pc-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .73rem; font-weight: 700; cursor: pointer;
  background: var(--tp-gold-bg); color: var(--tp-gold);
  border: 1px solid var(--tp-gold-border); border-radius: 20px;
  padding: .2rem .65rem; transition: all .2s; white-space: nowrap;
  font-family: 'Cairo', sans-serif;
}
.tp-pc-btn:hover { background: var(--tp-gold-l); color: #fff; border-color: var(--tp-gold-l); }

/* ══════════════════════════════════════════════
   PROGRAM DETAIL (JS-rendered classes)
══════════════════════════════════════════════ */
.tp-detail-header {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--tp-surface); border: 1.5px solid var(--tp-border);
  border-top: 4px solid var(--detail-color, var(--tp-gold));
  border-radius: var(--tp-radius-lg); padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem; box-shadow: var(--tp-shadow-sm);
}
.tp-detail-icon {
  width: 52px; height: 52px; border-radius: var(--tp-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
  background: var(--tp-gold-bg); border: 2px solid var(--tp-gold-border);
}
.tp-detail-info { flex: 1; }
.tp-detail-name { font-size: 1.15rem; font-weight: 900; color: var(--tp-text); }
.tp-detail-cat  { font-size: .78rem; color: var(--tp-gold); font-weight: 700; margin-top: .2rem; }
.tp-detail-desc { font-size: .83rem; color: var(--tp-text3); margin-top: .45rem; line-height: 1.6; }
.tp-detail-meta {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem;
}
.tp-detail-meta-item {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .76rem; font-weight: 700; color: var(--tp-text3);
  background: var(--tp-bg3); border-radius: 20px; padding: .2rem .6rem;
}
.tp-detail-meta-item i { color: var(--tp-gold); }

/* Price box in detail view */
.tp-price-box {
  background: var(--tp-green-bg); border: 1.5px solid var(--tp-green-border);
  border-radius: var(--tp-radius); padding: 1rem 1.25rem;
  display: inline-block; margin-bottom: .75rem;
}
.tp-price-box-title {
  font-size: .8rem; font-weight: 700; color: var(--tp-green);
  display: flex; align-items: center; gap: .35rem; margin-bottom: .4rem;
}
.tp-price-orig {
  font-size: .8rem; color: var(--tp-muted); text-decoration: line-through; margin-bottom: .2rem;
}
.tp-price-final { font-size: 1.5rem; font-weight: 900; color: var(--tp-green); }
.tp-price-currency { font-size: .85rem; color: var(--tp-green); }

/* Stage price table */
.tp-stage-price-table {
  width: 100%; border-collapse: collapse; font-size: .82rem;
  background: var(--tp-surface); border-radius: var(--tp-radius-sm); overflow: hidden;
}
.tp-stage-price-table th {
  padding: .5rem .75rem; background: var(--tp-bg3); text-align: right;
  font-size: .75rem; font-weight: 800; color: var(--tp-text2);
  border-bottom: 1px solid var(--tp-border);
}
.tp-stage-price-table td {
  padding: .45rem .75rem; border-bottom: 1px solid var(--tp-border); color: var(--tp-text);
}
.tp-stage-price-table tr:last-child td { border-bottom: none; }

/* Stage desc / footer in detail */
.tp-stage-desc { font-size: .8rem; color: var(--tp-text3); line-height: 1.55; }
.tp-stage-footer {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .5rem;
}
.tp-stage-info {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .73rem; font-weight: 700; color: var(--tp-primary);
  background: var(--tp-primary-bg); border-radius: 20px; padding: .15rem .5rem;
}
.tp-stage-price {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .73rem; font-weight: 700; color: var(--tp-green);
  background: var(--tp-green-bg); border-radius: 20px; padding: .15rem .5rem;
}
.tp-stage-price-hidden {
  font-size: .72rem; color: var(--tp-muted); display: inline-flex; align-items: center; gap: .25rem;
}

/* Plan preview (full-program select) */
.tp-plan-preview {
  background: var(--tp-gold-bg); border: 1.5px solid var(--tp-gold-border);
  border-radius: var(--tp-radius-sm); padding: .75rem .9rem;
  margin-top: .5rem;
}
.tp-plan-preview.hidden { display: none; }
.tp-plan-preview-name {
  font-size: .88rem; font-weight: 800; color: var(--tp-text);
  display: flex; align-items: center; gap: .35rem; margin-bottom: .4rem;
}
.tp-plan-preview-info { display: flex; flex-wrap: wrap; gap: .5rem; }
.tp-plan-preview-info-item {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .75rem; font-weight: 700; color: var(--tp-text3);
  background: var(--tp-bg3); border-radius: 20px; padding: .15rem .5rem;
}
.tp-stage-tag {
  font-size: .72rem; background: var(--tp-surface); color: var(--tp-text3);
  border: 1px solid var(--tp-border); border-radius: 20px; padding: .1rem .5rem;
}

/* ══════════════════════════════════════════════
   PRINT — A4 PROFESSIONAL LAYOUT
══════════════════════════════════════════════ */

/* Keep print view hidden on screen — use visibility:hidden + height:0 to
   prevent it from taking up layout space (fixes blank first page bug) */
.tp-print-view {
  position: absolute !important;
  width: 0 !important; height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  top: -9999px !important; left: -9999px !important;
}
/* When actively printing (JS adds .show-print before calling window.print()) */
.tp-print-view.show-print {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  overflow: auto !important;
  visibility: visible !important;
  z-index: 999999 !important;
  background: #fff !important;
  padding: 20px !important;
  top: 0 !important; left: 0 !important;
}

@media print {
  /* ── Force color rendering ── */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* ── Page setup ── */
  @page {
    size: A4 portrait;
    margin: 15mm 14mm 15mm 14mm;
  }

  /* ── Reset html & body ── */
  html, body {
    background: #FFFFFF !important;
    color: #1A1209 !important;
    font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important;
    font-size: 11pt !important;
    direction: rtl !important;
    margin: 0 !important; padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* ── CRITICAL: hide EVERYTHING except print content ──
     Using body > * selector with !important to ensure no layout artifacts */
  body > * {
    display: none !important;
  }

  /* Show ONLY the print view */
  body > #tp-print-view,
  #tp-print-view {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: #FFFFFF !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 0 !important; left: 0 !important;
    z-index: auto !important;
  }

  /* Global header — always hidden in print */
  #global-header { display: none !important; }

  /* ── No blank page before content ── */
  html { page-break-before: avoid !important; }
  body { page-break-before: avoid !important; }
  #tp-print-view { page-break-before: avoid !important; }
  .tp-print-view { page-break-before: avoid !important; }
  .tp-print-page { page-break-before: avoid !important; margin-top: 0 !important; }

  /* ── Print page container ── */
  .tp-print-page {
    width: 100% !important; max-width: 100% !important;
    background: #FFFFFF !important; color: #1A1209 !important;
    font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important;
    font-size: 11pt !important; line-height: 1.5 !important;
    direction: rtl !important;
    padding: 0 !important; margin: 0 !important;
    box-shadow: none !important;
    display: block !important;
  }

  /* ── Print header ── */
  .tp-print-header {
    display: flex !important; align-items: center; gap: 14px;
    padding-bottom: 12px;
    border-bottom: 2.5pt solid #C49A00 !important;
    margin-bottom: 16px; margin-top: 0 !important;
  }
  .tp-print-logo { height: 52px; width: auto; filter: none !important; }
  .tp-print-clinic {
    font-size: 10pt; color: #78716C !important; font-weight: 600;
    margin-bottom: 3px;
  }
  .tp-print-title {
    font-size: 16pt !important; font-weight: 900 !important; color: #1A1209 !important;
    margin: 0; line-height: 1.2;
  }
  .tp-print-date { font-size: 9pt; color: #78716C !important; margin-top: 3px; }

  /* ── Section titles ── */
  .tp-print-section-title {
    font-size: 11pt !important; font-weight: 900 !important; color: #C49A00 !important;
    margin: 14px 0 8px !important;
    padding-bottom: 4px !important;
    border-bottom: 1pt solid #F5E076 !important;
    display: flex !important; align-items: center; gap: 5px;
  }

  /* ── Child info grid ── */
  .tp-print-child-grid {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px 14px !important;
    margin-bottom: 14px !important;
    background: #FFFBEA !important;
    border: 1pt solid #F5E076 !important;
    border-radius: 6pt !important; padding: 10px 12px !important;
  }
  .tp-print-child-field label {
    display: block !important; font-size: 8pt !important; font-weight: 700 !important;
    color: #78716C !important; text-transform: uppercase;
    letter-spacing: .03em; margin-bottom: 2px;
  }
  .tp-print-child-field .val {
    font-size: 10.5pt !important; font-weight: 800 !important; color: #1A1209 !important;
  }

  /* ── Items table ── */
  .tp-print-items-table {
    width: 100% !important; border-collapse: collapse !important;
    margin-bottom: 12px !important; font-size: 10.5pt !important;
  }
  .tp-print-items-table thead { background: #F7F5EF !important; }
  .tp-print-items-table th {
    padding: 7px 9px !important; text-align: right !important;
    font-size: 9.5pt !important; font-weight: 800 !important; color: #44403C !important;
    border: 1pt solid #D6D0C4 !important;
    background: #F7F5EF !important;
  }
  .tp-print-items-table td {
    padding: 6px 9px !important;
    border: 1pt solid #E7E2D6 !important;
    color: #1A1209 !important; vertical-align: middle;
  }
  .tp-print-items-table tbody tr:nth-child(even) td {
    background: #FAFAF6 !important;
  }
  .tp-print-items-table tfoot td {
    font-weight: 900 !important;
    background: #FFFBEA !important;
    border: 1pt solid #F5E076 !important;
    color: #C49A00 !important;
    font-size: 11pt !important;
  }

  /* ── Price box ── */
  .tp-print-price-box {
    background: #F0FDF4 !important; border: 1.5pt solid #BBF7D0 !important;
    border-radius: 6pt !important; padding: 10px 14px !important;
    margin: 12px 0 !important; display: inline-block !important; min-width: 200px;
  }
  .tp-print-price-final {
    font-size: 18pt !important; font-weight: 900 !important; color: #16A34A !important;
    line-height: 1.2 !important; margin-top: 4px !important;
  }

  /* ── Goals ── */
  .tp-print-goals ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 20px; }
  .tp-print-goals li {
    font-size: 10pt; color: #44403C; line-height: 1.55;
    padding: 3px 0; break-inside: avoid;
    display: flex; align-items: flex-start; gap: 5px;
  }
  .tp-print-goals li::before { content: '✦'; color: #C49A00; font-size: 7pt; margin-top: 4pt; flex-shrink: 0; }

  /* ── Notes box ── */
  .tp-print-notes-box {
    background: #FFFBEA !important; border: 1pt solid #F5E076 !important;
    border-radius: 6pt !important; padding: 9px 12px !important;
    font-size: 10pt !important; color: #44403C !important; line-height: 1.6 !important;
    margin: 8px 0 !important; white-space: pre-wrap !important;
  }

  /* ── Footer ── */
  .tp-print-footer {
    display: flex !important; justify-content: space-between; align-items: center;
    margin-top: 20px !important; padding-top: 8px !important;
    border-top: 1pt solid #E7E2D6 !important;
    font-size: 8.5pt !important; color: #A8A29E !important;
  }

  /* ── Page break rules ── */
  .tp-print-child-grid,
  .tp-print-price-box,
  .tp-print-goals,
  .tp-print-notes-box { page-break-inside: avoid !important; break-inside: avoid !important; }
  .tp-print-section-title { page-break-after: avoid !important; break-after: avoid !important; }
  .tp-print-header        { page-break-after: avoid !important; break-after: avoid !important; }
}
  }
  .tp-print-child-field label {
    display: block !important; font-size: 8pt !important; font-weight: 700 !important;
    color: #78716C !important; text-transform: uppercase;
    letter-spacing: .03em; margin-bottom: 2px;
  }
  .tp-print-child-field .val {
    font-size: 10.5pt !important; font-weight: 800 !important; color: #1A1209 !important;
  }

  /* ── Items table ── */
  .tp-print-items-table {
    width: 100% !important; border-collapse: collapse !important;
    margin-bottom: 12px !important; font-size: 10.5pt !important;
  }
  .tp-print-items-table thead { background: #F7F5EF !important; }
  .tp-print-items-table th {
    padding: 7px 9px !important; text-align: right !important;
    font-size: 9.5pt !important; font-weight: 800 !important; color: #44403C !important;
    border: 1pt solid #D6D0C4 !important;
    background: #F7F5EF !important;
  }
  .tp-print-items-table td {
    padding: 6px 9px !important;
    border: 1pt solid #E7E2D6 !important;
    color: #1A1209 !important; vertical-align: middle;
  }
  .tp-print-items-table tbody tr:nth-child(even) td {
    background: #FAFAF6 !important;
  }
  .tp-print-items-table tfoot td {
    font-weight: 900 !important;
    background: #FFFBEA !important;
    border: 1pt solid #F5E076 !important;
    color: #C49A00 !important;
    font-size: 11pt !important;
  }

  /* ── Price box ── */
  .tp-print-price-box {
    background: #F0FDF4 !important; border: 1.5pt solid #BBF7D0 !important;
    border-radius: 6pt !important; padding: 10px 14px !important;
    margin: 12px 0 !important; display: inline-block !important; min-width: 200px;
  }
  .tp-print-price-final {
    font-size: 18pt !important; font-weight: 900 !important; color: #16A34A !important;
    line-height: 1.2 !important; margin-top: 4px !important;
  }

  /* ── Goals ── */
  .tp-print-goals ul {
    margin: 0; padding: 0;
    list-style: none; columns: 2; column-gap: 20px;
  }
  .tp-print-goals li {
    font-size: 10pt; color: #44403C; line-height: 1.55;
    padding: 3px 0; break-inside: avoid;
    display: flex; align-items: flex-start; gap: 5px;
  }
  .tp-print-goals li::before {
    content: '✦'; color: #C49A00; font-size: 7pt;
    margin-top: 4pt; flex-shrink: 0;
  }

  /* ── Notes box ── */
  .tp-print-notes-box {
    background: #FFFBEA !important; border: 1pt solid #F5E076 !important;
    border-radius: 6pt !important; padding: 9px 12px !important;
    font-size: 10pt !important; color: #44403C !important; line-height: 1.6 !important;
    margin: 8px 0 !important;
    white-space: pre-wrap !important;
  }

  /* ── Footer ── */
  .tp-print-footer {
    display: flex !important; justify-content: space-between; align-items: center;
    margin-top: 20px !important; padding-top: 8px !important;
    border-top: 1pt solid #E7E2D6 !important;
    font-size: 8.5pt !important; color: #A8A29E !important;
  }

  /* ── Avoid bad page breaks ── */
  .tp-print-child-grid,
  .tp-print-price-box,
  .tp-print-goals,
  .tp-print-notes-box { page-break-inside: avoid !important; }

  .tp-print-section-title { page-break-after: avoid !important; }
  .tp-print-header        { page-break-after: avoid !important; }
}

/* ── Screen-side print preview container ── */
.tp-print-view.show-print {
  display: block;
  background: #fff;
  position: fixed; inset: 0; z-index: 99999;
  overflow: auto; padding: 20px;
}
.tp-print-page {
  max-width: 210mm; margin: 0 auto;
  background: #fff; padding: 15mm;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  direction: rtl; font-family: 'Cairo', sans-serif;
  color: #1A1209;
}
/* Screen-only print header/content styles (for preview) */
.tp-print-header {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 12px; border-bottom: 3px solid #C49A00;
  margin-bottom: 16px;
}
.tp-print-logo   { height: 50px; width: auto; }
.tp-print-clinic { font-size: .75rem; color: #78716C; font-weight: 600; margin-bottom: 3px; }
.tp-print-title  { font-size: 1.35rem; font-weight: 900; color: #1A1209; margin: 0; }
.tp-print-date   { font-size: .72rem; color: #78716C; margin-top: 3px; }

.tp-print-section-title {
  font-size: .9rem; font-weight: 900; color: #C49A00;
  margin: 14px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid #F5E076;
}
.tp-print-child-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px;
  margin-bottom: 14px; background: #FFFBEA;
  border: 1px solid #F5E076; border-radius: 8px; padding: 10px 12px;
}
.tp-print-child-field label {
  display: block; font-size: .65rem; font-weight: 700;
  color: #78716C; text-transform: uppercase; margin-bottom: 2px;
}
.tp-print-child-field .val {
  font-size: .88rem; font-weight: 800; color: #1A1209;
}
.tp-print-items-table {
  width: 100%; border-collapse: collapse; font-size: .83rem;
}
.tp-print-items-table th {
  padding: 7px 9px; background: #F7F5EF; text-align: right;
  font-size: .78rem; font-weight: 800; color: #44403C;
  border: 1px solid #D6D0C4;
}
.tp-print-items-table td {
  padding: 6px 9px; border: 1px solid #E7E2D6; color: #1A1209;
}
.tp-print-items-table tbody tr:nth-child(even) td { background: #FAFAF6; }
.tp-print-items-table tfoot td {
  font-weight: 900; background: #FFFBEA; border: 1px solid #F5E076;
  color: #C49A00; font-size: .9rem;
}
.tp-print-price-box {
  background: #F0FDF4; border: 1.5px solid #BBF7D0; border-radius: 8px;
  padding: 10px 14px; margin: 12px 0; display: inline-block;
}
.tp-print-price-final {
  font-size: 1.5rem; font-weight: 900; color: #16A34A; margin-top: 4px;
}
.tp-print-goals ul {
  list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: 20px;
}
.tp-print-goals li {
  font-size: .83rem; color: #44403C; padding: 3px 0;
  break-inside: avoid; display: flex; align-items: flex-start; gap: 5px;
}
.tp-print-goals li::before {
  content: '✦'; color: #C49A00; font-size: .6rem; margin-top: 3px; flex-shrink: 0;
}
.tp-print-notes-box {
  background: #FFFBEA; border: 1px solid #F5E076; border-radius: 8px;
  padding: 9px 12px; font-size: .83rem; color: #44403C; line-height: 1.6;
}
.tp-print-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 20px; padding-top: 8px; border-top: 1px solid #E7E2D6;
  font-size: .72rem; color: #A8A29E;
}

/* ============================================================
   PATIENT JOURNEY VIEW — رحلة العلاج
   ============================================================ */

/* ── Wrap ── */
.tj-wrap { min-height: 50vh; }

.tj-loading, .tj-error {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 4rem; gap: 1rem;
  color: var(--tp-muted); font-size: .9rem;
}
.tj-error { color: #EF4444; }

/* ── Header ── */
.tj-header {
  display: flex; align-items: flex-start; gap: 1rem;
  background: #fff; border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius); padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.tj-header-info { flex: 1; min-width: 0; }
.tj-child-name  { font-size: 1.35rem; font-weight: 900; color: var(--tp-text); margin-bottom: .3rem; }
.tj-meta        { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .8rem; color: var(--tp-muted); }
.tj-meta span   { display: flex; align-items: center; gap: .3rem; }
.tj-header-actions { display: flex; gap: .5rem; flex-shrink: 0; flex-wrap: wrap; }

/* ── Status badge extras ── */
.tp-status-archived { background: #F5F5F5; color: #6B7280; border: 1px solid #E0E0E0; }
.tp-status-active   { background: #ECFDF5; color: #16A34A; border: 1px solid #A7F3D0; }

/* ── Stats grid ── */
.tj-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem; margin-bottom: 1.25rem;
}
.tj-stat-card {
  background: #fff; border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-sm); padding: 1rem;
  display: flex; align-items: center; gap: .75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.tj-stat-icon  { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tj-stat-value { font-size: 1.25rem; font-weight: 900; color: var(--tp-text); }
.tj-stat-label { font-size: .72rem; color: var(--tp-muted); margin-top: .15rem; }

/* ── Overall bar ── */
.tj-overall-bar-wrap { margin-bottom: 1.5rem; }
.tj-overall-bar-label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--tp-muted); margin-bottom: .4rem; }
.tj-overall-bar  { height: 10px; background: var(--tp-border); border-radius: 5px; overflow: hidden; }
.tj-overall-fill { height: 100%; background: linear-gradient(90deg, #C49A00, #F5C518); border-radius: 5px; transition: width .5s ease; }

/* ── Section title ── */
.tj-section-title {
  font-size: .92rem; font-weight: 800; color: var(--tp-text);
  margin: 1.25rem 0 .75rem;
  display: flex; align-items: center; gap: .4rem;
}
.tj-section-title i { color: var(--tp-gold); }

/* ── Timeline ── */
.tj-timeline { display: flex; flex-direction: column; gap: 0; }
.tj-stage-item { display: flex; gap: 0; cursor: pointer; }
.tj-stage-item--upcoming { opacity: .75; }

.tj-stage-connector { display: flex; flex-direction: column; align-items: center; padding: 0 1rem 0 0; width: 36px; flex-shrink: 0; }
.tj-stage-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 2.5px solid #D1D5DB;
  transition: all .2s;
}
.tj-stage-item:hover .tj-stage-dot { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(196,154,0,.15); }
.tj-stage-line { flex: 1; width: 2px; background: #E5E7EB; margin: 2px 0; min-height: 20px; }

.tj-stage-body { flex: 1; padding-bottom: 1rem; min-width: 0; }
.tj-stage-card {
  background: #fff; border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-radius-sm); padding: .85rem 1rem;
  transition: box-shadow .2s, border-color .2s;
}
.tj-stage-item:hover .tj-stage-card { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: var(--tp-gold-l); }
.tj-stage-item.tj-stage-active .tj-stage-card {
  border-color: var(--tp-gold);
  background: #FFFDF5;
  box-shadow: 0 4px 20px rgba(196,154,0,.15);
}

.tj-stage-card-header { display: flex; align-items: center; gap: .75rem; }
.tj-stage-info  { flex: 1; min-width: 0; }
.tj-stage-name  { font-size: .9rem; font-weight: 700; color: var(--tp-text); margin-bottom: .2rem; }
.tj-stage-sub   { display: flex; flex-wrap: wrap; gap: .3rem .65rem; font-size: .75rem; color: var(--tp-muted); }
.tj-stage-badge { padding: .15rem .5rem; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.tj-stage-badge--completed { background: #ECFDF5; color: #16A34A; }
.tj-stage-badge--current   { background: #FFFBEA; color: #C49A00; }
.tj-stage-badge--upcoming  { background: #F5F5F5; color: #9CA3AF; }

.tj-stage-prog-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; min-width: 70px; }
.tj-stage-prog-bar  { width: 60px; height: 5px; background: #E8E8E8; border-radius: 3px; overflow: hidden; }
.tj-stage-prog-fill { height: 100%; border-radius: 3px; }
.tj-stage-prog-pct  { font-size: .7rem; font-weight: 700; }

.tj-stage-rec { font-size: .76rem; font-weight: 600; margin-top: .5rem; padding: .3rem .6rem; border-radius: 6px; }
.tj-stage-rec--next    { background: #ECFDF5; color: #16A34A; }
.tj-stage-rec--support { background: #FFFBEA; color: #C49A00; }
.tj-stage-rec--repeat  { background: #FEF2F2; color: #EF4444; }

/* ── Stage Panel ── */
.tj-stage-panel {
  background: #fff; border: 2px solid var(--tp-gold);
  border-radius: var(--tp-radius); padding: 1.5rem;
  margin-top: 1.5rem; margin-bottom: 2rem;
  box-shadow: 0 4px 24px rgba(196,154,0,.1);
}
.tj-sp-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.tj-sp-title  { font-size: 1rem; font-weight: 800; color: var(--tp-text); }
.tj-sp-sub    { font-size: .8rem; color: var(--tp-muted); margin-top: .2rem; }
.tj-sp-rec    { font-size: .8rem; font-weight: 700; padding: .4rem .75rem; border-radius: 8px; white-space: nowrap; }
.tj-sp-rec--next    { background: #ECFDF5; color: #16A34A; }
.tj-sp-rec--support { background: #FFFBEA; color: #C49A00; }
.tj-sp-rec--repeat  { background: #FEF2F2; color: #EF4444; }

/* ── Auto Summary ── */
.tj-summary-box { background: #FFFBEA; border: 1px solid #F5E076; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.tj-summary-label { font-size: .8rem; font-weight: 700; color: #C49A00; margin-bottom: .5rem; }
.tj-summary-edit {
  width: 100%; min-height: 80px; padding: .65rem .85rem;
  font-family: 'Cairo', sans-serif; font-size: .85rem; line-height: 1.65;
  border: 1.5px solid #F5E076; border-radius: 8px; background: #fff;
  color: var(--tp-text); resize: vertical; direction: rtl; text-align: right;
}
.tj-summary-edit:focus { outline: none; border-color: #C49A00; box-shadow: 0 0 0 3px rgba(196,154,0,.12); }

/* ── Sessions Table ── */
.tj-sessions-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.tj-sessions-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tj-sessions-table th { background: #F9F7EF; padding: .55rem .75rem; text-align: right; font-weight: 700; border-bottom: 2px solid #EDE8D0; white-space: nowrap; }
.tj-sessions-table td { padding: .55rem .75rem; border-bottom: 1px solid #F0EDE3; vertical-align: middle; }
.tj-sessions-table tr:last-child td { border-bottom: none; }
.tj-session-done td { color: #6B7280; }
.tj-sessions-empty { text-align: center; color: #9CA3AF; padding: 1.5rem; }

.tj-score-badge { padding: .2rem .5rem; border-radius: 10px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.tj-sess-notes  { max-width: 200px; color: #6B7280; }
.tj-sess-num    { font-weight: 700; color: #4F46E5; font-size: .85rem; }

/* ── Add Session Form ── */
.tj-add-session-wrap { margin-top: 1rem; }
.tj-add-form {
  background: #F9F9F9; border: 1.5px solid #E0E0E0; border-radius: 10px;
  padding: 1rem 1.25rem; margin-top: .75rem;
}
.tj-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: .75rem; }
.tj-form-field { display: flex; flex-direction: column; gap: .3rem; }
.tj-form-field label { font-size: .78rem; font-weight: 700; color: #374151; }
.tj-form-field--full { grid-column: 1 / -1; }
.tj-form-input { /* inherits tp-input */ }
.tj-form-actions { display: flex; gap: .65rem; justify-content: flex-end; margin-top: .75rem; }

/* ── Score Selector ── */
.tj-score-selector { display: flex; gap: .4rem; flex-wrap: wrap; }
.tj-score-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: .4rem .7rem; border: 1.5px solid #E0E0E0; border-radius: 8px;
  background: #fff; cursor: pointer; transition: all .15s;
  min-width: 64px;
}
.tj-score-btn:hover { border-color: var(--tp-gold); background: #FFFBEA; }
.tj-score-btn--active { border-color: var(--tp-gold); background: #FFFBEA; box-shadow: 0 0 0 3px rgba(196,154,0,.12); }
.tj-score-num { font-size: 1.1rem; font-weight: 900; color: var(--tp-gold); }
.tj-score-lbl { font-size: .66rem; color: #6B7280; margin-top: 1px; }

/* ── Sessions complete message ── */
.tj-sessions-complete { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 8px; font-size: .85rem; color: #16A34A; font-weight: 700; margin-top: .75rem; }

/* ── Clinician Notes section ── */
.tj-notes-section { margin-top: 1.5rem; }
.tj-notes-content { background: #FFF9EC; border: 1px solid #F5E076; border-radius: 10px; padding: .85rem 1rem; font-size: .85rem; line-height: 1.65; color: var(--tp-text); }

/* ============================================================
   SMART SUMMARY TEMPLATES PANEL
   ============================================================ */
.tpt-box {
  background: #fff; border-radius: 14px;
  max-width: 760px; width: 100%; margin: 2rem auto;
  max-height: 90vh; overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 8px 48px rgba(0,0,0,.18);
}
.tpt-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; gap: .75rem;
}
.tpt-header h3 { font-size: 1.05rem; font-weight: 900; color: var(--tp-text); }

.tpt-form-wrap {
  background: #F9F9F9; border: 1.5px solid #E0E0E0; border-radius: 10px;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.tpt-form-title { font-size: .82rem; font-weight: 700; color: var(--tp-gold); margin-bottom: .75rem; }
.tpt-form-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: .65rem; margin-bottom: .65rem; }

.tpt-section { margin-bottom: 1.5rem; }
.tpt-section-label { font-size: .85rem; font-weight: 800; color: var(--tp-text); margin-bottom: .65rem; padding-bottom: .4rem; border-bottom: 2px solid #F5E076; display: flex; align-items: center; gap: .4rem; }
.tpt-section-label i { color: var(--tp-gold); }
.tpt-empty { font-size: .8rem; color: #9CA3AF; padding: .5rem; }

.tpt-card { background: #F9F9F9; border: 1.5px solid #E0E0E0; border-radius: 10px; padding: .85rem 1rem; margin-bottom: .65rem; }
.tpt-card--inactive { opacity: .55; }
.tpt-card-header { display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; flex-wrap: wrap; }
.tpt-card-meta  { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 1; }
.tpt-card-actions { display: flex; gap: .35rem; }

.tpt-level-badge { padding: .2rem .55rem; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.tpt-level-program { background: #EEF2FF; color: #4F46E5; }
.tpt-level-stage   { background: #F0FDF4; color: #16A34A; }
.tpt-condition { font-size: .82rem; font-weight: 700; color: var(--tp-text); }
.tpt-range { font-size: .76rem; color: #6B7280; }
.tpt-text { font-size: .82rem; color: #44403C; line-height: 1.6; border-top: 1px solid #E8E8E8; padding-top: .5rem; }

/* ============================================================
   ARCHIVED ROW STYLE
   ============================================================ */
.tp-row-archived td { opacity: .65; }
.tp-row-archived { background: #F9F9F9 !important; }

/* ============================================================
   CLINICIAN OVERRIDE PANEL
   ============================================================ */
.tj-override-panel {
  background: #F3F0FF; border: 1.5px solid #DDD6FE;
  border-radius: 10px; padding: .85rem 1rem; margin-top: .75rem;
}
.tj-override-options {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem;
}
.tj-override-opt {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem; border-radius: 8px; cursor: pointer;
  border: 1.5px solid #DDD6FE; background: #fff; font-size: .8rem;
  font-family: 'Cairo', sans-serif; font-weight: 600;
  transition: all .15s; user-select: none;
}
.tj-override-opt input[type="radio"] { display: none; }
.tj-override-opt:hover { border-color: #7C3AED; background: #EDE9FE; }
.tj-override-opt--active {
  border-color: #7C3AED; background: #EDE9FE; color: #5B21B6;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.tj-override-saved {
  font-size: .75rem; color: #16A34A; font-weight: 600;
  display: flex; align-items: center; gap: .3rem; margin-top: .4rem;
}

/* ============================================================
   TABLET-FRIENDLY SESSION TABLE
   ============================================================ */
@media (max-width: 900px) {
  .tj-sessions-table { font-size: .76rem; }
  .tj-sessions-table th, .tj-sessions-table td { padding: .4rem .5rem; }
  .tj-sess-notes { max-width: 120px; }
  .tj-form-grid { grid-template-columns: 1fr 1fr; }
  .tj-overview-grid { grid-template-columns: 1fr 1fr; }
  .tj-sp-header { flex-direction: column; }
}

@media (max-width: 600px) {
  .tj-sessions-table-wrap { font-size: .72rem; }
  .tj-form-grid { grid-template-columns: 1fr; }
  .tj-score-selector { justify-content: space-between; }
  .tj-score-btn { min-width: 56px; padding: .35rem .5rem; }
  .tj-header { flex-direction: column; gap: .75rem; }
  .tj-header-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .tj-overview-grid { grid-template-columns: 1fr 1fr; }
  .tj-timeline { gap: 0; }
  .tj-stage-connector { padding: 0 .6rem 0 0; width: 28px; }
  /* Hide less important columns on mobile */
  .tj-sessions-table th:nth-child(4),
  .tj-sessions-table td:nth-child(4),
  .tj-sessions-table th:nth-child(6),
  .tj-sessions-table td:nth-child(6) { display: none; }
}

/* ============================================================
   STATUS TAB FOR ARCHIVED
   ============================================================ */
.tp-status-tab[data-status="مؤرشف"] {
  color: #6B7280;
}
.tp-status-tab[data-status="مؤرشف"].active {
  background: #F5F5F5; color: #4B5563; border-color: #9CA3AF;
}

/* ============================================================
   PROGRESS REPORT LINK IN BUTTON
   ============================================================ */
.tp-btn-view {
  background: #EEF2FF; color: #4F46E5;
}
.tp-btn-view:hover { background: #4F46E5; color: #fff; }

/* ============================================================
   EXTENSION NOTICE IN RECEPTION TABLE (Issue 3 fix)
   ============================================================ */
.tp-ext-notice-wrap {
  margin-top: .35rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.tp-ext-notice {
  display: inline-flex; align-items: flex-start; gap: .3rem;
  background: #F3F0FF; color: #7C3AED;
  border: 1px solid #DDD6FE; border-radius: 6px;
  padding: .25rem .55rem; font-size: .7rem; font-weight: 700;
  line-height: 1.4; max-width: 260px;
}
.tp-ext-notice i { flex-shrink: 0; margin-top: .1rem; }

/* ============================================================
   STAGE OUTCOME ENGINE — TOE COMPONENTS
   ============================================================ */

/* ── Outcome badge ── */
.toe-outcome-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .65rem; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
  white-space: nowrap; letter-spacing: .01em;
}
.toe-outcome-completed    { /* injected via inline style from color */ }
.toe-outcome-needs_support{ /* injected via inline style from color */ }
.toe-outcome-repeat       { /* injected via inline style from color */ }

/* ── Outcome section inside stage panel ── */
.toe-outcome-section {
  background: #F9F9F9; border: 1.5px solid #E0E0E0;
  border-radius: 10px; padding: 1rem 1.15rem;
  margin-bottom: 1rem; display: flex; flex-direction: column; gap: .75rem;
}
.toe-outcome-row {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.toe-outcome-row-label {
  font-size: .8rem; font-weight: 700; color: #374151;
  display: flex; align-items: center; gap: .35rem; white-space: nowrap;
}

/* ── Extension section ── */
.toe-ext-section { /* within outcome-section */ }
.toe-ext-section-title {
  font-size: .82rem; font-weight: 800; color: #374151;
  margin-bottom: .5rem; display: flex; align-items: center; gap: .35rem;
}

.toe-ext-card {
  border: 1.5px solid #DDD6FE; background: #F3F0FF;
  border-radius: 10px; padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.toe-ext-header { display: flex; align-items: flex-start; gap: .65rem; flex-wrap: wrap; }
.toe-ext-icon   { font-size: 1.35rem; line-height: 1; flex-shrink: 0; margin-top: .1rem; }
.toe-ext-info   { flex: 1; min-width: 0; }
.toe-ext-label  { font-size: .85rem; font-weight: 800; margin-bottom: .2rem; }
.toe-ext-desc   { font-size: .78rem; color: #4B5563; line-height: 1.55; }

.toe-ext-accepted-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #ECFDF5; color: #16A34A; border: 1px solid #A7F3D0;
  border-radius: 20px; padding: .2rem .65rem; font-size: .74rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0; align-self: flex-start;
}

.toe-ext-sessions {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.7); border-radius: 8px;
  padding: .4rem .75rem; font-size: .82rem;
}
.toe-ext-sess-count { font-weight: 800; font-size: .9rem; }

.toe-ext-modify-wrap { display: flex; align-items: center; gap: .5rem; }
.toe-ext-input {
  border: 1.5px solid #DDD6FE; border-radius: 8px; padding: .3rem .5rem;
  font-family: 'Cairo', sans-serif; font-size: .82rem; color: #374151;
  text-align: center; background: #fff;
}
.toe-ext-input:focus { outline: none; border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }

.toe-ext-actions {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  padding-top: .5rem; border-top: 1px solid rgba(221,214,254,.5);
}
.toe-ext-accept-btn {
  background: #7C3AED; color: #fff;
  border: none; border-radius: 8px; padding: .45rem 1rem;
  font-family: 'Cairo', sans-serif; font-size: .8rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: .35rem;
  transition: background .15s, transform .1s;
}
.toe-ext-accept-btn:hover { background: #6D28D9; transform: translateY(-1px); }

/* ── Admin rules modal ── */
.toe-admin-box {
  background: #fff; border-radius: 14px;
  max-width: 800px; width: calc(100% - 2rem); margin: 2rem auto;
  max-height: 88vh; overflow-y: auto; padding: 1.5rem;
  box-shadow: 0 8px 48px rgba(0,0,0,.2);
}
.toe-admin-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: .5rem;
}
.toe-tab-btn {
  background: #F3F4F6; color: #374151; border: 1.5px solid #E0E0E0;
  border-radius: 8px; padding: .4rem .85rem;
  font-family: 'Cairo', sans-serif; font-size: .82rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: .35rem; transition: all .15s;
}
.toe-tab-btn:hover { background: #E5E7EB; }
.toe-tab-btn.active { background: #C49A00; color: #fff; border-color: #C49A00; }

.toe-admin-section { /* container for rules content */ }
.toe-admin-info {
  font-size: .8rem; color: #44403C; background: #FFFBEA;
  border: 1px solid #F5E076; border-radius: 8px;
  padding: .65rem .9rem; margin-bottom: 1rem; line-height: 1.6;
  display: flex; gap: .4rem; align-items: flex-start;
}
.toe-admin-info i { flex-shrink: 0; margin-top: .15rem; }

.toe-rules-table {
  width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: 1rem;
}
.toe-rules-table th {
  background: #F9F7EF; padding: .5rem .75rem; text-align: right;
  font-weight: 700; border-bottom: 2px solid #EDE8D0;
}
.toe-rules-table td { padding: .4rem .6rem; border-bottom: 1px solid #F0EDE3; vertical-align: middle; }
.toe-rules-table tr:last-child td { border-bottom: none; }

.toe-mini-input {
  border: 1.5px solid #E0E0E0; border-radius: 6px; padding: .3rem .5rem;
  font-family: 'Cairo', sans-serif; font-size: .78rem; color: #374151;
  width: 100%; min-width: 56px; background: #fff;
}
.toe-mini-input:focus { outline: none; border-color: #C49A00; box-shadow: 0 0 0 2px rgba(196,154,0,.12); }
.toe-mini-input.toe-wide { min-width: 130px; }
.toe-mini-input.toe-icon { width: 52px; min-width: 52px; text-align: center; }
.toe-color-input { width: 36px; height: 30px; border: 1.5px solid #E0E0E0; border-radius: 6px; padding: 1px; cursor: pointer; }

.toe-toggle-wrap {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: #374151; font-weight: 600; cursor: pointer;
}
.toe-toggle-wrap input { accent-color: #C49A00; width: 16px; height: 16px; }

/* ============================================================
   ISSUE 1 FIX — PROGRAM LIST + SELECT DROPDOWN UI
   Ensures visibility, correct stacking and overflow handling
   ============================================================ */

/* Program list panel — ensure it doesn't clip items */
.tp-manage-programs-panel {
  position: relative;          /* stacking context for absolute children */
  min-width: 0;                /* prevent grid overflow */
}

/* Program list container — already has max-height; ensure no clip */
.tp-manage-list {
  overflow-y: auto;
  max-height: 540px;
  position: relative;
}

/* Each program list item — full block, no clipping */
.tp-manage-list-item {
  display: flex !important;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Program name — truncate gracefully */
.tp-mli-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

/* Plan creation: program select dropdown — ensure full z-index stack */
.tp-plan-section { position: relative; }

#plan-stages-program-select,
#plan-program-select,
select.tp-input,
.tp-select {
  position: relative;
  z-index: 10;          /* above card shadows */
}

/* Browse program cards grid — ensure proper overflow */
.tp-programs-grid {
  position: relative;
  overflow: visible;   /* allow dropdowns to escape */
}

/* Fix any potential hidden overflow on the create-plan card */
#view-create-plan .tp-card {
  overflow: visible;
}

/* Stage checkboxes container — scrollable if many stages */
#plan-stages-checkboxes {
  max-height: 320px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

/* Mixed items container */
#plan-mixed-items {
  max-height: 300px;
  overflow-y: auto;
}

/* Dropdown select native options — proper RTL display */
select.tp-input option,
.tp-select option {
  direction: rtl;
  text-align: right;
  padding: .3rem .5rem;
}

/* ============================================================
   THERAPEUTIC SERVICES BREAKDOWN  v3.3
   Shared across: stage checklist, plan summary, plan detail,
   journey header, journey stage cards, PDF print
   ============================================================ */

/* Service tag base */
.tp-svc-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .48rem; border-radius: 20px;
  font-size: .68rem; font-weight: 700; white-space: nowrap;
  line-height: 1.4;
}
.tp-svc-indiv   { background: #EEF2FF; color: #4F46E5; }
.tp-svc-parent  { background: #F0FDF4; color: #16A34A; }
.tp-svc-support { background: #FFFBEA; color: #C49A00; }
.tp-svc-home    { background: #F5F3FF; color: #7C3AED; }

/* Service total badge */
.tp-svc-total {
  font-size: .65rem; color: var(--tp-muted); font-weight: 600;
  margin-right: .2rem;
}

/* Container inside stage checklist */
.tp-sci-services {
  display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem;
}

/* Container inside plan summary item */
.tp-si-services {
  display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem;
}

/* Container inside plan detail table cell */
.tp-svc-breakdown {
  display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .3rem;
}

/* Journey header service summary */
.tj-svc-summary {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem;
}

/* Journey stage card service row */
.tj-stage-services {
  display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem;
}

/* ── PDF print services section ── */
@media print {
  .tp-svc-tag {
    border: 1px solid currentColor;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.tp-print-services-grid {
  display: flex; flex-wrap: wrap; gap: .6rem;
  padding: .75rem 1rem; margin-bottom: 1rem;
  background: #F9F7EF; border: 1.5px solid #EDE8D0;
  border-radius: 8px;
}
.tp-print-svc-item {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid #E0E0E0;
  border-radius: 6px; padding: .3rem .65rem;
  font-size: 9pt;
}
.tp-print-svc-label { font-weight: 600; color: #374151; }
.tp-print-svc-val   { font-weight: 800; color: #C49A00; }

/* ══ v3.4 — group_sessions + services_included_in_price ══ */

/* Exec modal: service note below stage name */
.exec-svc-note {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .67rem; font-weight: 600; margin-top: .2rem;
  padding: .1rem .35rem; border-radius: 10px;
}
.exec-svc-note--incl  { background: #ECFDF5; color: #065F46; }
.exec-svc-note--ext   { background: #FEF9C3; color: #92400E; }

/* group_sessions tag color */
.tp-svc-group { background: #FFF7ED; color: #EA580C; }

/* EPC: service chips inside cards */
.epc-svc-summary {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin-top: .5rem; padding-top: .45rem;
  border-top: 1px solid #F0EDE3;
}
.epc-svc-chip {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .12rem .42rem; border-radius: 20px;
  font-size: .65rem; font-weight: 700; white-space: nowrap;
}
.epc-svc-indiv-chip  { background: #EEF2FF; color: #4F46E5; }
.epc-svc-parent-chip { background: #F0FDF4; color: #16A34A; }
.epc-svc-group-chip  { background: #FFF7ED; color: #EA580C; }
.epc-svc-home-chip   { background: #F5F3FF; color: #7C3AED; }
.epc-svc-incl-chip   { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }

/* EPC: micro tags inside Card B stage rows */
.epc-svc-micro-wrap {
  display: inline-flex; gap: .15rem; align-items: center; margin-right: .25rem;
}
.epc-svc-micro {
  display: inline-flex; align-items: center; gap: .1rem;
  padding: .05rem .28rem; border-radius: 8px;
  font-size: .6rem; font-weight: 800; line-height: 1.3;
}
.epc-svc-indiv   { background: #EEF2FF; color: #4F46E5; }
.epc-svc-parent  { background: #F0FDF4; color: #16A34A; }
.epc-svc-group   { background: #FFF7ED; color: #EA580C; }
.epc-svc-home    { background: #F5F3FF; color: #7C3AED; }

/* EPC: note row inside Card A */
.epc-svc-note-row {
  display: flex; align-items: center; gap: .3rem;
  margin-top: .35rem; padding: .2rem .4rem;
  background: #FEF2F2; border-radius: 6px;
  font-size: .67rem;
}
.epc-svc-note-txt { font-weight: 600; }

/* ── Admin rules modal: higher z-index than all other modals ── */
#toe-admin-modal.tp-modal-backdrop {
  z-index: 1200 !important;
}

/* ════════════════════════════════════════════════════════════
   THERAPEUTIC ACTIVITIES (v4.0)  — tp-activities.js
════════════════════════════════════════════════════════════ */

/* ── Service Activities Section ── */
.tja-services-section {
  margin-top: 1.25rem;
  border-top: 2px solid #F3EFE0;
  padding-top: 1rem;
}

.tja-svc-section-title {
  font-size: .82rem;
  font-weight: 800;
  color: #C49A00;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
}

.tja-svc-group-block {
  margin-bottom: 1rem;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
}

.tja-svc-group-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  font-size: .78rem;
}

.tja-svc-group-icon { font-size: .85rem; flex-shrink: 0; }
.tja-svc-group-label { font-weight: 700; flex: 1; }
.tja-svc-group-count {
  font-size: .7rem; font-weight: 700;
  color: #6B7280;
  background: #fff;
  padding: .1rem .45rem;
  border-radius: 20px;
  border: 1px solid #E5E7EB;
}

.tja-svc-items { padding: .4rem .5rem; display: flex; flex-direction: column; gap: .35rem; }

.tja-svc-item {
  padding: .4rem .6rem;
  border-radius: 6px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  transition: background .15s;
}
.tja-svc-item--done { background: #F0FDF4; border-color: #BBF7D0; }

.tja-svc-item-main {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.tja-svc-cb-wrap {
  display: flex; align-items: center; gap: .4rem;
  cursor: pointer; flex: 1; min-width: 0;
}

.tja-svc-item-label {
  font-size: .8rem; font-weight: 600; color: #374151;
}
.tja-svc-done-lbl { color: #6B7280; text-decoration: line-through; }

.tja-svc-date {
  font-size: .68rem; color: #9CA3AF;
  background: #F3F4F6;
  padding: .1rem .4rem; border-radius: 10px;
}
.tja-svc-done-badge { color: #16A34A; font-size: .85rem; }

.tja-svc-note {
  margin-top: .3rem;
  font-size: .73rem;
  color: #6B7280;
  padding-right: 1.2rem;
  font-style: italic;
}

.tja-svc-note-input {
  margin-top: .4rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .4rem .5rem;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
}

.tja-date-input, .tja-textarea {
  font-size: .78rem !important;
  padding: .3rem .5rem !important;
}

.tja-note-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: .25rem;
}

/* ── Stage completion / pending banners ── */
.tja-stage-complete-banner {
  margin-top: .75rem;
  padding: .55rem 1rem;
  background: #ECFDF5;
  border: 1px solid #6EE7B7;
  border-radius: 8px;
  color: #065F46;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.tja-svc-pending-banner {
  margin-top: .75rem;
  padding: .55rem 1rem;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  color: #92400E;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Stage card: service progress indicator ── */
.tja-stage-svc-progress {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  color: #EA580C;
  background: #FFF7ED;
  padding: .12rem .45rem;
  border-radius: 20px;
  border: 1px solid #FED7AA;
  margin-top: .2rem;
}
.tja-svc-prog-icon { font-size: .72rem; }
.tja-svc-prog-text { font-weight: 700; }
.tja-svc-prog-done { color: #16A34A; }
.tja-svc-prog-pending { color: #9CA3AF; font-size: .68rem; }

/* ── Stage panel: service progress pill ── */
.tja-sp-svc-progress {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .73rem;
  background: #FFF7ED;
  color: #EA580C;
  padding: .15rem .5rem;
  border-radius: 20px;
  border: 1px solid #FED7AA;
  font-weight: 600;
}
.tja-sp-svc-pending {
  color: #9CA3AF;
  font-size: .68rem;
}

/* ── Reception dashboard: needs tags ── */
.tja-needs-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .35rem;
}

.tja-need-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .14rem .5rem;
  border-radius: 20px;
  font-size: .66rem;
  font-weight: 700;
  white-space: nowrap;
}

.tja-need-sessions  { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.tja-need-services  { background: #FFF7ED; color: #C2410C; border: 1px solid #FED7AA; }
.tja-need-extension { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; }

/* ── Report: services completion tags ── */
.pr-svc-completion {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-top: .3rem;
}
.pr-svc-completion-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .5rem; border-radius: 20px;
  font-size: .65rem; font-weight: 700;
}

/* ── Overview grid: flexible to handle 5 cards ── */
.tj-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .6rem;
  margin-bottom: 1rem;
}


/* ── Summary templates panel: proper z-index ── */
#tpt-panel.tp-modal-backdrop {
  z-index: 1100 !important;
}

/* ── Override outcome button inside outcome row ── */
.toe-override-outcome-btn { align-self: flex-start; }

/* ── Price badge in stage panel (reception only) ── */
.toe-price-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #ECFDF5; color: #16A34A; border: 1px solid #A7F3D0;
  border-radius: 20px; padding: .2rem .65rem;
  font-size: .76rem; font-weight: 700; white-space: nowrap;
}

  .toe-admin-box { padding: 1rem; }
  .toe-rules-table { font-size: .72rem; }
  .toe-rules-table th, .toe-rules-table td { padding: .3rem .4rem; }
  .toe-ext-header { gap: .4rem; }
  .toe-ext-actions { flex-direction: column; align-items: flex-start; }
  .toe-ext-accept-btn { width: 100%; justify-content: center; }
}