/* ═══════════════════════════════════════════════════════════════════════════
   TimeMaster AI — Design System
   Tokens: CSS custom properties for all 4 themes
   Components: Navbar, TabBar, Buttons, Cards, Tables, Badges, Inputs,
               Toggles, Chips, AI Panel, Layout, Save Pill
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THEME TOKENS ─────────────────────────────────────────────────────────── */

/* Level Colors — fixed across all themes */
:root {
  --level-1: #2d7a4f;
  --level-2: #6b4fa0;
  --level-3: #c47c1a;
  --level-4: #1a6b9a;
}

[data-theme="national"], :root {
  /* Backgrounds */
  --bg-body:       #eef5f0;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-muted:      #f3faf5;
  --bg-alt:        #f3faf5;   /* alias for --bg-muted (legacy compat) */
  --bg-elevated:   #fbfdfc;
  --bg-input:      #ffffff;

  /* Borders */
  --border:        #d8e7de;
  --border-strong: #bbd4c5;
  --border-subtle: #e9f1ec;

  /* Text */
  --text:           #062a22;
  --text-secondary: #1f4a3e;
  --text-muted:     #5d7a70;
  --text-dim:       #8aa39a;

  /* Primary (green) */
  --primary:        #0a4a3b;
  --primary-hover:  #0d5f4c;
  --primary-soft:   rgba(10, 74, 59, .08);
  --primary-softer: rgba(10, 74, 59, .04);

  /* Accent (crimson) */
  --accent:      #c8102e;
  --accent-soft: rgba(200, 16, 46, .10);

  /* Semantic */
  --gold:    #c9a227;
  --success: #0f8a5b;
  --warning: #d97706;
  --danger:  #c8102e;
  --info:    #0e6ba8;

  /* Semantic soft backgrounds */
  --success-soft: rgba(15, 138, 91, .10);
  --warning-soft: rgba(217, 119, 6, .10);
  --danger-soft:  rgba(200, 16, 46, .10);
  --info-soft:    rgba(14, 107, 168, .10);
  --gold-soft:    rgba(201, 162, 39, .10);

  /* Semantic borders */
  --success-border: rgba(15, 138, 91, .28);
  --warning-border: rgba(217, 119, 6, .28);
  --danger-border:  rgba(200, 16, 46, .28);
  --info-border:    rgba(14, 107, 168, .28);

  /* Shadows */
  --shadow-sm: 0 1px 2px  rgba(6, 42, 34, .04);
  --shadow:    0 4px 16px rgba(6, 42, 34, .06);
  --shadow-lg: 0 16px 40px rgba(6, 42, 34, .10);

  /* Table / Row */
  --row-hover:      rgba(10, 74, 59, .04);
  --row-alt:        #f7faf8;
  --chip-bg:        #f3faf5;
  --chip-active-bg: rgba(10, 74, 59, .08);

  /* Gradient */
  --gradient: linear-gradient(135deg, #0a4a3b 0%, #117b60 100%);
}

[data-theme="night"] {
  --bg-body:       #111827;
  --bg-surface:    #1f2937;
  --bg-card:       #1f2937;
  --bg-muted:      #243040;
  --bg-alt:        #243040;
  --bg-elevated:   #2a3649;
  --bg-input:      #1f2937;

  --border:        #374151;
  --border-strong: #4b5563;
  --border-subtle: #2d3a4a;

  --text:           #f0f6ff;
  --text-secondary: #9db4c9;
  --text-muted:     #6b8099;
  --text-dim:       #455870;

  --primary:        #818cf8;
  --primary-hover:  #6366f1;
  --primary-soft:   rgba(129, 140, 248, .15);
  --primary-softer: rgba(129, 140, 248, .07);

  --accent:      #f472b6;
  --accent-soft: rgba(244, 114, 182, .15);

  --gold:    #fbbf24;
  --success: #34d399;
  --warning: #fbbf24;
  --danger:  #f87171;
  --info:    #60a5fa;

  --success-soft: rgba(52, 211, 153, .15);
  --warning-soft: rgba(251, 191, 36, .15);
  --danger-soft:  rgba(248, 113, 113, .15);
  --info-soft:    rgba(96, 165, 250, .15);
  --gold-soft:    rgba(251, 191, 36, .15);

  --success-border: rgba(52, 211, 153, .35);
  --warning-border: rgba(251, 191, 36, .35);
  --danger-border:  rgba(248, 113, 113, .35);
  --info-border:    rgba(96, 165, 250, .35);

  --shadow-sm: 0 1px 2px  rgba(0, 0, 0, .20);
  --shadow:    0 4px 16px rgba(0, 0, 0, .30);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .40);

  --row-hover:      rgba(129, 140, 248, .06);
  --row-alt:        #243040;
  --chip-bg:        #2a3649;
  --chip-active-bg: rgba(129, 140, 248, .15);

  --gradient: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
}

[data-theme="light"] {
  --bg-body:       #f0f4f8;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-muted:      #e8f0f9;
  --bg-alt:        #e8f0f9;
  --bg-elevated:   #f8fafc;
  --bg-input:      #ffffff;

  --border:        #d1dde9;
  --border-strong: #b0c4d8;
  --border-subtle: #e2ecf5;

  --text:           #0d1b2a;
  --text-secondary: #2a4a6a;
  --text-muted:     #5572a0;
  --text-dim:       #8eaac8;

  --primary:        #1e40af;
  --primary-hover:  #1d4ed8;
  --primary-soft:   rgba(30, 64, 175, .08);
  --primary-softer: rgba(30, 64, 175, .04);

  --accent:      #dc2626;
  --accent-soft: rgba(220, 38, 38, .10);

  --gold:    #d97706;
  --success: #059669;
  --warning: #d97706;
  --danger:  #dc2626;
  --info:    #0284c7;

  --success-soft: rgba(5, 150, 105, .10);
  --warning-soft: rgba(217, 119, 6, .10);
  --danger-soft:  rgba(220, 38, 38, .10);
  --info-soft:    rgba(2, 132, 199, .10);
  --gold-soft:    rgba(217, 119, 6, .10);

  --success-border: rgba(5, 150, 105, .28);
  --warning-border: rgba(217, 119, 6, .28);
  --danger-border:  rgba(220, 38, 38, .28);
  --info-border:    rgba(2, 132, 199, .28);

  --shadow-sm: 0 1px 2px  rgba(0, 20, 50, .04);
  --shadow:    0 4px 16px rgba(0, 20, 50, .07);
  --shadow-lg: 0 16px 40px rgba(0, 20, 50, .12);

  --row-hover:      rgba(30, 64, 175, .04);
  --row-alt:        #f0f7ff;
  --chip-bg:        #e8f0f9;
  --chip-active-bg: rgba(30, 64, 175, .08);

  --gradient: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

[data-theme="calm"] {
  --bg-body:       #f2f0fc;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-muted:      #ede9ff;
  --bg-alt:        #ede9ff;
  --bg-elevated:   #faf9ff;
  --bg-input:      #ffffff;

  --border:        #d5cff5;
  --border-strong: #b8b0e8;
  --border-subtle: #e8e4ff;

  --text:           #1e1048;
  --text-secondary: #3d2a80;
  --text-muted:     #7060aa;
  --text-dim:       #a898cc;

  --primary:        #6d28d9;
  --primary-hover:  #5b21b6;
  --primary-soft:   rgba(109, 40, 217, .08);
  --primary-softer: rgba(109, 40, 217, .04);

  --accent:      #db2777;
  --accent-soft: rgba(219, 39, 119, .10);

  --gold:    #d97706;
  --success: #059669;
  --warning: #d97706;
  --danger:  #db2777;
  --info:    #0284c7;

  --success-soft: rgba(5, 150, 105, .10);
  --warning-soft: rgba(217, 119, 6, .10);
  --danger-soft:  rgba(219, 39, 119, .10);
  --info-soft:    rgba(2, 132, 199, .10);
  --gold-soft:    rgba(217, 119, 6, .10);

  --success-border: rgba(5, 150, 105, .28);
  --warning-border: rgba(217, 119, 6, .28);
  --danger-border:  rgba(219, 39, 119, .28);
  --info-border:    rgba(2, 132, 199, .28);

  --shadow-sm: 0 1px 2px  rgba(30, 16, 72, .04);
  --shadow:    0 4px 16px rgba(30, 16, 72, .07);
  --shadow-lg: 0 16px 40px rgba(30, 16, 72, .12);

  --row-hover:      rgba(109, 40, 217, .04);
  --row-alt:        #f5f3ff;
  --chip-bg:        #ede9ff;
  --chip-active-bg: rgba(109, 40, 217, .08);

  --gradient: linear-gradient(135deg, #5b21b6 0%, #8b5cf6 100%);
}

/* ── RESET + BASE ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Cairo', sans-serif;
  background: var(--bg-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  color: inherit;
}

::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg-body); }
::-webkit-scrollbar-thumb:hover  { background: var(--primary); }

/* ── NAVBAR ───────────────────────────────────────────────────────────────── */

.navbar {
  height: 64px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  box-shadow: 0 4px 14px rgba(10, 74, 59, .25);
  flex-shrink: 0;
}
.brand-mark::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid #fff;
}
.brand-mark svg { width: 22px; height: 22px; }

.brand-title {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.2px;
  line-height: 1.1;
}
.brand-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.1;
  margin-top: 2px;
}

.nav-divider  { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
.nav-spacer   { flex: 1; }
.nav-actions  { display: flex; align-items: center; gap: 8px; }

.nav-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.nav-breadcrumb .crumb-current { color: var(--text); font-weight: 600; }
.nav-breadcrumb .crumb-sep     { color: var(--text-dim); font-size: 10px; }

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.icon-btn:hover  { background: var(--primary-soft); color: var(--primary); }
.icon-btn svg    { width: 18px; height: 18px; }

.theme-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.theme-btn:hover { border-color: var(--primary); color: var(--primary); }

.theme-swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 0 1px var(--border-strong);
  flex-shrink: 0;
}

.theme-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.theme-option {
  width: 100%;
  text-align: end;
  padding: .55rem 1rem;
  background: transparent;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  transition: background .15s;
}
.theme-option:last-child        { border-bottom: none; }
.theme-option:hover             { background: var(--bg-muted); }
.theme-option.active            { background: var(--primary-soft); color: var(--primary); }
.theme-option-label             { font-weight: 700; }
.theme-option-desc              { font-size: 10px; opacity: .65; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .15s;
}
.user-chip:hover { border-color: var(--border-strong); }

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.user-name { font-size: 13px; font-weight: 700; }
.user-role { font-size: 10px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

/* ── TABBAR ───────────────────────────────────────────────────────────────── */

.tabbar-wrap {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 64px;
  z-index: 40;
}

.tabbar {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  padding: 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }

.tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }

.tab-num {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--chip-bg);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.tab-btn.active .tab-num { background: var(--primary); color: #fff; }

.tab-progress     { height: 3px; background: var(--border-subtle); }
.tab-progress-bar { height: 100%; background: var(--gradient); transition: width .4s ease; }

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */

.page-wrap {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  padding: 20px 24px 80px;
  align-items: start;
}
.main-col  { min-width: 0; }
.aside-col {
  position: sticky;
  top: 148px;
  max-height: calc(100vh - 168px);
}

/* ── PAGE HEADER ──────────────────────────────────────────────────────────── */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.page-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.h-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.h-ico svg  { width: 18px; height: 18px; }
.page-sub   { margin-top: 6px; color: var(--text-muted); font-size: 13px; font-weight: 500; }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  line-height: 1;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn-ghost {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

.mini-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: border-color .15s, color .15s;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  line-height: 1;
}
.mini-btn:hover      { border-color: var(--primary); color: var(--primary); }
.mini-btn.solid      { background: var(--primary); color: #fff; border-color: var(--primary); }
.mini-btn.solid:hover { background: var(--primary-hover); }

/* ── INFO BANNER ──────────────────────────────────────────────────────────── */

.info-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--primary-softer);
  border: 1px solid var(--border);
  border-right: 3px solid var(--primary);
  border-radius: 10px;
  margin-bottom: 14px;
}
.ib-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ib-ico svg           { width: 15px; height: 15px; }
.info-banner h4       { margin: 0; font-size: 13px; font-weight: 700; }
.info-banner p        { margin: 3px 0 0; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.info-banner strong   { color: var(--primary); }

/* ── FILTER PANEL ─────────────────────────────────────────────────────────── */

.filter-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.filter-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-title svg { width: 14px; height: 14px; color: var(--primary); }
.filter-actions   { display: flex; gap: 8px; }
.table-chips      { display: flex; flex-wrap: wrap; gap: 6px; }

.tchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  font-family: 'Cairo', sans-serif;
}
.tchip:hover      { border-color: var(--primary); }
.tchip.on         { background: var(--chip-active-bg); border-color: var(--primary); color: var(--primary); }
.tchip .tnum {
  width: 18px; height: 18px;
  background: var(--bg-surface);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
.tchip.on .tnum   { background: var(--primary); color: #fff; }

/* ── CARD ─────────────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 18px;
}
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-elevated);
}
.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
}
.num-badge {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.card-title small { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-right: 6px; }
.card-meta        { font-size: 11px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 8px; }

.lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--bg-muted);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}
.lock-pill svg { width: 11px; height: 11px; }

/* ── TABLE ────────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

table.grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
table.grid thead th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .3px;
  padding: 11px 14px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.grid tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}
table.grid tbody tr:hover        { background: var(--row-hover); }
table.grid tbody tr:last-child td { border-bottom: none; }

.row-num {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}

.cell-edit {
  background: var(--bg-elevated);
  border: 1px solid transparent;
  color: var(--text);
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 7px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cell-edit:hover { border-color: var(--border-strong); }
.cell-edit:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  background: var(--bg-input);
}
.cell-edit:disabled { opacity: .5; cursor: not-allowed; }

.cell-fixed {
  display: inline-block;
  background: var(--bg-muted);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  font-weight: 700;
}
.cell-fixed.lock                 { padding-right: 22px; position: relative; }
.cell-fixed.lock::before         { content: '🔒'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 9px; opacity: .5; }

.symbol-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  min-width: 42px;
}

/* Sub-rows */
tr.sub-row td:first-child                 { padding-right: 30px; position: relative; }
tr.sub-row td:first-child::before         { content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 1px; background: var(--border-strong); }
tr.sub-row td:first-child::after          { content: ''; position: absolute; right: 6px; top: 0; bottom: 50%; width: 1px; background: var(--border-strong); }
tr.sub-row                                { background: var(--row-alt); }
tr.sub-row .name-cell                     { color: var(--text-secondary); font-weight: 600; font-size: 12px; }

/* ── STATUS BADGES ────────────────────────────────────────────────────────── */

.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.st-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.st-mandatory  { background: rgba(15, 138, 91, .10); color: var(--success); }
.st-conditional { background: rgba(217, 119, 6, .12); color: var(--warning); }
.st-disabled   { background: var(--accent-soft); color: var(--accent); }

.st-select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  transition: opacity .15s;
}
.st-select:hover                    { opacity: .85; }
.st-select::after                   { content: '▾'; font-size: 9px; margin-right: 3px; opacity: .6; }
.st-select.st-mandatory             { border-color: rgba(15, 138, 91, .3); }
.st-select.st-conditional           { border-color: rgba(217, 119, 6, .3); }
.st-select.st-disabled              { border-color: rgba(200, 16, 46, .25); }

/* ── TOGGLE ───────────────────────────────────────────────────────────────── */

.toggle {
  width: 36px; height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; right: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.toggle.on             { background: var(--primary); }
.toggle.on::after      { transform: translateX(-16px); }
.toggle.lock           { background: #999; cursor: not-allowed; opacity: .6; }

/* ── SEGMENTED CONTROL ────────────────────────────────────────────────────── */

.seg {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}
.seg button {
  height: 24px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Cairo', sans-serif;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg button.on   { background: var(--bg-surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.seg button.lock { cursor: not-allowed; opacity: .45; }

/* ── LEVEL TABS ───────────────────────────────────────────────────────────── */

.level-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-muted);
  border-radius: 11px;
  border: 1px solid var(--border);
  margin: 14px 18px 0;
}
.level-tab {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  transition: background .15s, color .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cairo', sans-serif;
  border: none;
  background: none;
  cursor: pointer;
}
.level-tab.active { background: var(--bg-surface); color: var(--primary); box-shadow: var(--shadow-sm); }

/* ── SUB-TABS ─────────────────────────────────────────────────────────────── */

.subtabs {
  display: flex;
  gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
.stab {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  font-family: 'Cairo', sans-serif;
  transition: background .15s, color .15s, box-shadow .15s;
}
.stab.on {
  background: var(--bg-surface);
  color: var(--primary);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.stab-count {
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--bg-muted);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  transition: background .15s, color .15s;
}
.stab.on .stab-count { background: var(--primary-soft); color: var(--primary); }

/* ── SESSION BUTTONS ──────────────────────────────────────────────────────── */

.sess-row     { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.sess-divider { width: 1px; height: 18px; background: var(--border-strong); margin: 0 6px; }
.sess-meta    { font-size: 10px; color: var(--text-dim); font-weight: 600; margin-right: 8px; }

.sess-btn {
  height: 28px;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  transition: background .15s, color .15s, border-color .15s;
}
.sess-btn.on        { background: var(--primary); color: #fff; border-color: var(--primary); }
.sess-btn.h2        { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.sess-btn.h2.on     { background: var(--accent); color: #fff; border-color: var(--accent); }
.sess-btn.invalid   { background: var(--accent-soft); color: var(--accent); border: 1.5px dashed var(--accent); }

/* ── CHECKBOX ─────────────────────────────────────────────────────────────── */

.ck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  user-select: none;
}
.ck-box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.ck.on .ck-box           { background: var(--primary); border-color: var(--primary); }
.ck.on .ck-box::after    { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); }

/* ── NUMERIC INPUT & SELECT ───────────────────────────────────────────────── */

.num-input {
  height: 30px;
  width: 74px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  font-family: 'Cairo', sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.num-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  background: var(--bg-input);
}

.sel {
  height: 30px;
  padding: 0 28px 0 10px;
  border-radius: 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Cairo', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%235d7a70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: left 8px center;
  cursor: pointer;
  transition: border-color .15s;
}
.sel:focus { outline: none; border-color: var(--primary); }

/* ── SPLIT / VOLUME CELLS ─────────────────────────────────────────────────── */

.split-input  { display: flex; gap: 4px; align-items: center; }
.split-plus   { color: var(--text-dim); font-size: 11px; font-weight: 700; }

.split-box {
  height: 30px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}
.split-box.h2 { background: var(--accent-soft); color: var(--accent); }

.vol-cell {
  display: inline-block;
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  text-align: center;
  line-height: 26px;
}
.vol-total { background: var(--gradient); color: #fff; }

/* ── PATTERN PREVIEW ──────────────────────────────────────────────────────── */

.pattern-preview { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  background: var(--bg-muted);
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  border: 1px solid var(--border-subtle);
}
.pp-chip.subg {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
  font-size: 10px;
}

/* ── MULTI-CHIPS ──────────────────────────────────────────────────────────── */

.mchips  { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mchip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  transition: background .15s, color .15s, border-color .15s;
}
.mchip.on        { background: var(--primary); color: #fff; border-color: var(--primary); }
.mchip.alt.on    { background: var(--gold); color: #fff; border-color: var(--gold); }
.mchip.warn      { background: rgba(217, 119, 6, .12); color: var(--warning); border: 1.5px dashed var(--warning); }
.mchip-add       { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--text-dim); }
.mchip-add:hover { border-color: var(--primary); color: var(--primary); }

/* ── FACILITY TYPE TAGS ───────────────────────────────────────────────────── */

.fac-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
}
.fac-type.room     { background: rgba(14, 107, 168, .10); color: var(--info); }
.fac-type.building { background: rgba(201, 162, 39, .14); color: var(--gold); }

/* ── PAIRING GRID (TABLE 10) ──────────────────────────────────────────────── */

.pair-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px;
}
.pair-col {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.pair-col.disabled { opacity: .5; }

.pair-col-head {
  padding: 10px 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pair-col-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pair-col-body { padding: 12px; }

.pair-row {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  transition: border-color .15s;
}
.pair-row:last-child { margin-bottom: 0; }
.pair-row:hover      { border-color: var(--border-strong); }

.pair-row-head {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pair-subj {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.pair-subj span {
  padding: 2px 6px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 4px;
  font-weight: 700;
}

.strat-radio  { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.strat-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border: 1px solid transparent;
  font-family: 'Cairo', sans-serif;
  transition: background .15s, color .15s, border-color .15s;
}
.radio {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s;
}
.strat-opt.on                  { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.strat-opt.on .radio           { border-color: var(--primary); }
.strat-opt.on .radio::after    { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--primary); }

.mode-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .15s, background .15s, color .15s;
  font-family: 'Cairo', sans-serif;
}
.mode-card:hover { border-color: var(--primary-soft); }
.mode-card.on    { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.mode-card .mn {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.mode-card.on .mn { background: var(--primary); color: #fff; }

/* ── AI PANEL ─────────────────────────────────────────────────────────────── */

.ai-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 168px);
  min-height: 560px;
}

.ai-head {
  background: var(--gradient);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.ai-head::after {
  content: '';
  position: absolute;
  top: -30px; left: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 16, 46, .30), transparent 70%);
}

.ai-avatar {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.ai-avatar svg       { width: 20px; height: 20px; }
.ai-avatar::after    { content: ''; position: absolute; bottom: -2px; left: -2px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #0a4a3b; }

.ai-title            { flex: 1; position: relative; z-index: 1; }
.ai-title .name      { font-weight: 800; font-size: 13px; }
.ai-title .role      { font-size: 10px; color: rgba(255, 255, 255, .8); margin-top: 1px; display: flex; align-items: center; gap: 5px; }
.ai-title .role::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #22c55e; }

.ai-context {
  background: var(--bg-elevated);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ctx-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  font-size: 10px;
}
.ctx-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }

.ai-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg       { display: flex; gap: 9px; max-width: 95%; }
.msg .av   { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
.msg.bot .av   { background: var(--gradient); color: #fff; }
.msg.user      { flex-direction: row-reverse; align-self: flex-end; }
.msg.user .av  { background: var(--accent-soft); color: var(--accent); }

.bubble { padding: 9px 12px; border-radius: 11px; font-size: 12.5px; line-height: 1.55; }
.msg.bot  .bubble { background: var(--bg-muted); border: 1px solid var(--border-subtle); border-top-right-radius: 4px; }
.msg.user .bubble { background: var(--primary); color: #fff; border-top-left-radius: 4px; }
.bubble strong    { color: var(--primary); font-weight: 800; }
.msg.user .bubble strong { color: #fff; }
.bubble code      { background: var(--bg-surface); padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 11px; color: var(--text); }

.quick-actions {
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.quick-actions button {
  height: 26px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  transition: border-color .15s, color .15s;
}
.quick-actions button:hover { border-color: var(--primary); color: var(--primary); }

.ai-input {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-surface);
  flex-shrink: 0;
}
.input-wrap {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 8px 10px;
  transition: border-color .15s;
}
.input-wrap:focus-within { border-color: var(--primary); }
.input-wrap textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-size: 12.5px;
  min-height: 22px;
  max-height: 80px;
  color: var(--text);
  font-family: 'Cairo', sans-serif;
}

.send-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(10, 74, 59, .25);
  cursor: pointer;
  transition: opacity .15s, transform .15s;
  border: none;
}
.send-btn:hover { opacity: .9; transform: translateY(-1px); }
.send-btn svg   { width: 16px; height: 16px; }

/* ── SAVE PILL ────────────────────────────────────────────────────────────── */

.save-pill {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px 8px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  z-index: 60;
  font-family: 'Cairo', sans-serif;
}
.save-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(15, 138, 91, .20);
}

/* ── PLACEHOLDER TAB ──────────────────────────────────────────────────────── */

.tab-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.ph-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3rem;
  text-align: center;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow);
}
.ph-num {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  margin: 0 auto 1.25rem;
}

/* ── TAB 2 — LEVEL PALETTE ────────────────────────────────────────────────── */

:root,
[data-theme="national"],
[data-theme="light"],
[data-theme="calm"] {
  --y1: #0e6ba8; --y1-soft: rgba(14, 107, 168, .10);
  --y2: #0f8a5b; --y2-soft: rgba(15, 138, 91,  .10);
  --y3: #d97706; --y3-soft: rgba(217, 119, 6,  .12);
  --y4: #7c3aed; --y4-soft: rgba(124, 58, 237, .10);
}
[data-theme="night"] {
  --y1: #60a5fa; --y1-soft: rgba(96, 165, 250, .12);
  --y2: #34d399; --y2-soft: rgba(52, 211, 153, .12);
  --y3: #fbbf24; --y3-soft: rgba(251, 191, 36, .12);
  --y4: #c084fc; --y4-soft: rgba(192, 132, 252, .12);
}

/* ── TAB 2 — SECTION 1: INSTITUTION INFO ─────────────────────────────────── */

.info-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  gap: 14px;
  padding: 18px;
}

.field             { display: flex; flex-direction: column; gap: 6px; }
.field label       { font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: .2px; display: flex; align-items: center; gap: 6px; }
.field label .req  { color: var(--accent); font-size: 13px; line-height: 1; }
.field-hint        { font-size: 10px; color: var(--text-dim); font-weight: 500; }

.tx {
  height: 44px;
  padding: 0 14px;
  border-radius: 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Cairo', sans-serif;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.tx:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
  background: var(--bg-input);
}

/* ── TAB 2 — SECTION 2: LEVEL CARDS ──────────────────────────────────────── */

.summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gradient);
  color: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(10, 74, 59, .18);
  position: relative;
  overflow: hidden;
}
.summary-bar::after {
  content: '';
  position: absolute;
  top: -30px; left: -20px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 16, 46, .30), transparent 70%);
}
.summary-label {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.summary-label svg { width: 22px; height: 22px; }
.summary-label .lbl { font-size: 13px; font-weight: 600; opacity: .9; }
.summary-label .val { font-size: 12px; font-weight: 600; opacity: .75; margin-top: 2px; }
.summary-num {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
  line-height: 1;
}
.summary-num small { font-size: 13px; font-weight: 600; opacity: .8; margin-right: 6px; }

.level-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  transition: box-shadow .15s;
}
.level-card:hover { box-shadow: var(--shadow); }

.level-card[data-y="1"] .lc-side { background: linear-gradient(135deg, var(--y1) 0%, #1488c8 100%); }
.level-card[data-y="2"] .lc-side { background: linear-gradient(135deg, var(--y2) 0%, #13a06b 100%); }
.level-card[data-y="3"] .lc-side { background: linear-gradient(135deg, var(--y3) 0%, #f59e0b 100%); }
.level-card[data-y="4"] .lc-side { background: linear-gradient(135deg, var(--y4) 0%, #9659f7 100%); }

.lc-side {
  padding: 16px 18px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.lc-side::after {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
}
.lc-side h3    { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; position: relative; z-index: 1; }
.lc-sub        { font-size: 11px; opacity: .85; font-weight: 500; margin-top: 4px; position: relative; z-index: 1; }

.lc-input-wrap {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(6px);
}
.lc-input-wrap label { font-size: 11px; font-weight: 700; color: #fff; opacity: .9; flex: 1; }
.lc-input {
  height: 34px;
  width: 64px;
  background: #fff;
  border: none;
  border-radius: 7px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  font-family: 'Cairo', sans-serif;
}
.lc-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }

.lc-body {
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  align-content: flex-start;
  background: var(--bg-elevated);
  min-height: 80px;
}

.class-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 12px;
  min-width: 82px;
  transition: transform .15s, box-shadow .15s;
  cursor: default;
}
.class-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.class-chip .cc-name  { font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
.class-chip .cc-subs  { font-size: 10px; color: var(--text-muted); margin-top: 3px; display: flex; gap: 5px; font-weight: 600; }
.class-chip .cc-subs span { padding: 1px 5px; border-radius: 4px; background: var(--bg-muted); }

/* Per-year chip colors */
.level-card[data-y="1"] .class-chip { border-color: rgba(14, 107, 168, .30); background: var(--y1-soft); }
.level-card[data-y="1"] .class-chip .cc-name { color: var(--y1); }
.level-card[data-y="2"] .class-chip { border-color: rgba(15, 138, 91, .30);  background: var(--y2-soft); }
.level-card[data-y="2"] .class-chip .cc-name { color: var(--y2); }
.level-card[data-y="3"] .class-chip { border-color: rgba(217, 119, 6, .30);  background: var(--y3-soft); }
.level-card[data-y="3"] .class-chip .cc-name { color: var(--y3); }
.level-card[data-y="4"] .class-chip { border-color: rgba(124, 58, 237, .30); background: var(--y4-soft); }
.level-card[data-y="4"] .class-chip .cc-name { color: var(--y4); }

/* ── TAB 2 — SECTION 3: STAFF ACCORDION ──────────────────────────────────── */

.subj-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  transition: box-shadow .15s;
}
.subj-card.expanded { box-shadow: var(--shadow); }

.subj-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--bg-elevated);
  border-bottom: 1px solid transparent;
  transition: background .15s;
}
.subj-card.expanded .subj-head { border-bottom-color: var(--border-subtle); }
.subj-head:hover                { background: var(--row-alt); }

.subj-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}

.subj-info        { flex: 1; min-width: 0; }
.subj-info h4     { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.2; }
.subj-info .si-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-weight: 500; }
.subj-info code   { background: var(--bg-muted); padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 11px; }

.count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  white-space: nowrap;
}
.count-badge svg  { width: 12px; height: 12px; }
.count-badge.zero { background: rgba(217, 119, 6, .12); color: var(--warning); }

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  transition: background .15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.add-btn:hover { background: var(--primary-hover); }
.add-btn svg   { width: 14px; height: 14px; flex-shrink: 0; }

.chev { width: 20px; height: 20px; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; }
.subj-card.expanded .chev { transform: rotate(-180deg); }

.subj-body { display: none; }
.subj-card.expanded .subj-body { display: block; }

table.staff {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
table.staff thead th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--border-subtle);
}
table.staff tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}
table.staff tbody tr:last-child td { border-bottom: none; }
table.staff tbody tr:hover { background: var(--row-hover); }

.id-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--bg-muted);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.id-pill svg { width: 10px; height: 10px; opacity: .6; }

.name-input {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Cairo', sans-serif;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.name-input:hover { border-color: var(--border-strong); }
.name-input:focus { outline: none; border-color: var(--primary); background: var(--bg-input); box-shadow: 0 0 0 3px var(--primary-soft); }
.name-input.empty { font-style: italic; color: var(--text-dim); font-weight: 500; }

.sec-select {
  height: 32px;
  padding: 0 28px 0 10px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Cairo', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%235d7a70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: left 8px center;
  cursor: pointer;
  transition: border-color .15s;
  width: 100%;
}
.sec-select:focus     { outline: none; border-color: var(--primary); }
.sec-select.has-value { border-color: var(--gold); background-color: rgba(201, 162, 39, .06); }

.del-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
  border: none;
}
.del-btn:hover { background: var(--accent-soft); color: var(--accent); }
.del-btn svg   { width: 14px; height: 14px; }

.gap-row { background: var(--bg-elevated); opacity: .55; }
.gap-marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--border-subtle) 4px, var(--border-subtle) 8px);
  padding: 2px 8px;
  border-radius: 5px;
}

/* ── TAB 2 — SECTION 4: ROOMS ─────────────────────────────────────────────── */

.mode-banner {
  display: flex;
  gap: 6px;
  padding: 0 18px 14px;
  flex-wrap: wrap;
  align-items: center;
}
.mb-hint { font-size: 10px; color: var(--text-dim); font-weight: 600; margin-right: auto; }

.mb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: 'Cairo', sans-serif;
}
.mb-tab.on {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
}
.mb-num {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.mb-tab.on .mb-num { background: var(--primary); color: #fff; }

table.rooms {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
table.rooms thead th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .3px;
  padding: 11px 14px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
table.rooms tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
table.rooms tbody tr:last-child td { border-bottom: none; }
table.rooms tbody tr:hover { background: var(--row-hover); }

.num-input-lg {
  height: 34px;
  width: 64px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  font-family: 'Cairo', sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.num-input-lg:focus { outline: none; border-color: var(--primary); background: var(--bg-input); box-shadow: 0 0 0 3px var(--primary-soft); }
.num-input-lg.warn  { border-color: var(--warning); background: rgba(217, 119, 6, .06); }

.room-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

.rchip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
}
.rchip.main  { background: var(--primary-soft); color: var(--primary); border-color: rgba(10, 74, 59, .20); }
.rchip.y1    { background: var(--y1-soft); color: var(--y1); border-color: rgba(14, 107, 168, .20); }
.rchip.y2    { background: var(--y2-soft); color: var(--y2); border-color: rgba(15, 138, 91, .20); }
.rchip.y3    { background: var(--y3-soft); color: var(--y3); border-color: rgba(217, 119, 6, .20); }
.rchip.y4    { background: var(--y4-soft); color: var(--y4); border-color: rgba(124, 58, 237, .20); }
.rchip-warn  { font-size: 10px; color: var(--warning); font-weight: 700; margin-right: 6px; }

.fac-cell  { display: flex; align-items: center; gap: 10px; }
.fac-icon  { width: 34px; height: 34px; border-radius: 9px; background: var(--bg-muted); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.fac-name  { font-weight: 700; color: var(--text); font-size: 13px; }
.fac-sym-t { font-size: 10px; color: var(--text-muted); font-weight: 600; margin-top: 1px; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .page-wrap               { grid-template-columns: 1fr; }
  .aside-col               { position: static; max-height: none; }
  .ai-card                 { height: auto; min-height: 480px; }
  .pair-grid               { grid-template-columns: 1fr; }
  .navbar                  { padding: 0 16px; gap: 10px; }
  .nav-breadcrumb          { display: none; }
  .page-wrap               { padding: 16px 16px 80px; }
  .info-grid               { grid-template-columns: 1fr; }
  .level-card              { grid-template-columns: 1fr; }
}