/* ═══════════════════════════════════════════════
   BUILDUP — Design System
   Exact match to HTML prototype CSS variables
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
  --navy:        #14143B;
  --navy-deep:   #0e0e2c;
  --text:        #14143B;
  --muted:       #8A8AA8;
  --label:       #6E6E8F;
  --border:      #E4E4F0;
  --border-2:    #D9D9E7;
  --bg:          #F5F5FA;
  --info-bg:     #EEF0FF;
  --hover:       #F1F2FB;
  --red:         #FF3B47;
  --green:       #22C55E;
  --orange:      #F59E0B;
  --shadow:      0 1px 2px rgba(20,20,59,.04);
  --shadow-md:   0 4px 16px rgba(20,20,59,.08);
  --table-head:  #EEEFFB;
  --radius:      8px;
  --radius-lg:   12px;
}

html, body {
  margin: 0; padding: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ─── App Shell ─────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }
.app-boot { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.app-boot-spinner { width:36px; height:36px; border-radius:999px; border:3px solid var(--border); border-top-color:var(--navy); animation:app-boot-spin .7s linear infinite; }
@keyframes app-boot-spin { to { transform:rotate(360deg); } }

/* ─── Sidebar ───────────────────────────────── */
.sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  transition: transform .25s ease;
}
.logo { padding: 0 24px 28px; display: flex; align-items: center; gap: 8px; }
.logo-mark {
  width: 36px; height: 36px;
  background: var(--navy);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-mark svg { width: 20px; height: 20px; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text .b { font-weight: 800; font-size: 22px; letter-spacing: -0.5px; color: var(--navy); }
.logo-text .b span { color: var(--red); }
.logo-text .e { font-size: 9px; letter-spacing: 4px; color: var(--navy); margin-top: 3px; font-weight: 600; }
.nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius);
  color: var(--navy);
  text-decoration: none;
  font-weight: 500; font-size: 14px;
  cursor: pointer; user-select: none;
  transition: background .15s;
}
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: #EEEEF7; font-weight: 600; }
.nav-item .chev { margin-left: auto; color: var(--muted); transition: transform .2s; }
.nav-item.open .chev { transform: rotate(180deg); }
.nav-item svg { flex-shrink: 0; opacity: .75; }
.nav-item.active svg { opacity: 1; }
.sub-nav {
  display: flex; flex-direction: column;
  padding-left: 28px; margin: 2px 0 6px 26px;
  border-left: 1px solid var(--border);
}
.sub-item {
  padding: 8px 14px; color: var(--label);
  font-size: 13px; font-weight: 500;
  text-decoration: none; border-radius: 6px;
  cursor: pointer; transition: background .15s, color .15s;
}
.sub-item:hover { background: var(--bg); color: var(--navy); }
.sub-item.active { color: var(--navy); font-weight: 600; }

/* ─── Main ──────────────────────────────────── */
.main-content { margin-left: 260px; flex: 1; min-width: 0; display: flex; flex-direction: column; transition: margin .25s ease; }

/* ─── Sidebar collapse toggle ───────────────── */
.sidebar-collapsed .sidebar { transform: translateX(-100%); }
.sidebar-collapsed .main-content { margin-left: 0; }
[dir="rtl"] .sidebar-collapsed .sidebar { transform: translateX(100%); }
[dir="rtl"] .sidebar-collapsed .main-content { margin-right: 0; }

/* ─── Topbar ────────────────────────────────── */
.topbar {
  height: 72px; background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 32px; gap: 24px;
  position: sticky; top: 0; z-index: 50;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.lang-wrap { position: relative; }
.lang { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); cursor: pointer; padding: 6px 8px; border-radius: var(--radius); transition: background .15s; }
.lang:hover { background: var(--bg); }
.flag {
  height: 19px; border-radius: 3px; overflow: hidden;
  flex-shrink: 0; display: inline-flex; align-items: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10);
}
.flag svg { display: block; height: 19px; width: auto; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,20,59,.12); padding: 6px; min-width: 180px;
}
.lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--navy);
  transition: background .12s;
}
.lang-opt:hover { background: var(--bg); }
.lang-opt.active { background: #EEEEF7; }
.topbar-divider { width: 1px; height: 24px; background: var(--border); }
.bell-wrap { position: relative; cursor: pointer; color: var(--navy); }
.bell-badge {
  position: absolute; top: -6px; right: -8px;
  background: var(--red); color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  padding: 2px 6px; min-width: 18px; text-align: center;
}
.avatar-btn { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.avatar-circle {
  width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
}
.avatar-name { font-weight: 600; font-size: 14px; }

/* ─── Page Content ──────────────────────────── */
.page-content { padding: 24px 32px 48px; flex: 1; }
.page-card {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 36px 40px;
  box-shadow: var(--shadow); min-height: calc(100vh - 72px - 72px);
}
.page-title { font-size: 30px; font-weight: 800; color: var(--navy); margin: 0 0 28px; }

/* ─── Tabs ──────────────────────────────────── */
.tabs { display: flex; align-items: center; gap: 36px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.tab {
  padding: 12px 4px; font-size: 17px; font-weight: 600;
  color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color .15s; white-space: nowrap;
}
.tab:hover { color: var(--navy); }
.tab.active { color: var(--navy); border-bottom-color: var(--navy); }

/* ─── Toolbar ───────────────────────────────── */
.toolbar-wrap { position: relative; margin-bottom: 24px; }
.toolbar { display: flex; align-items: center; gap: 12px; }
.search-wrap {
  flex: 1; max-width: 320px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 14px; height: 42px; color: var(--muted);
}
.search-wrap input { border: none; background: transparent; outline: none; font-size: 14px; color: var(--text); font-family: inherit; width: 100%; }
.search-wrap input::placeholder { color: var(--muted); }
.filter-btn {
  width: 42px; height: 42px; border: 1px solid var(--border); background: #fff;
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--navy); transition: background .15s;
}
.filter-btn:hover { background: var(--bg); }
.add-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 20px; height: 42px; background: var(--navy); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.add-btn:hover { background: var(--navy-deep); }

/* ─── Table ─────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead tr { background: var(--table-head); }
th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 13px; color: var(--label); white-space: nowrap; }
td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hover); }
td.name { font-weight: 600; }
td.col-code { font-family: monospace; font-size: 13px; color: var(--label); font-weight: 600; }

/* ─── Pills ─────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-active   { background: #EDFAF3; color: #15803D; }
.pill-inactive { background: #F3F4F6; color: #6B7280; }
.pill-pending  { background: #FFF7ED; color: #C2410C; }
.pill-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

/* ─── Icon Buttons ──────────────────────────── */
.actions-cell { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 34px; height: 34px; border: 1px solid var(--border); background: #fff;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--navy); transition: background .15s;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--hover); }
.icon-btn.danger:hover { background: #FFF0F0; color: var(--red); border-color: #FFD0D3; }

/* ─── Pagination ────────────────────────────── */
.pagination { display: flex; align-items: center; padding-top: 20px; gap: 16px; color: var(--navy); font-size: 14px; font-weight: 500; }
.per-page { display: flex; align-items: center; gap: 8px; }
.per-page-select { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; background: #fff; }
.per-page-dropdown { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; outline: none; }
.per-page-count { color: var(--muted); font-weight: 400; font-size: 13px; }
.pages { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.page-arrow { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); }
.page-arrow:disabled { opacity: .4; cursor: default; }

/* ─── Buttons ───────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 24px; height: 44px; border-radius: var(--radius); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--border-2); }
.btn-outline:hover { background: var(--bg); }
.btn-danger  { background: #FFF0F0; color: var(--red); border-color: #FFD0D3; }
.btn-danger:hover { background: #FFE0E2; }
.btn-sm { padding: 0 16px; height: 36px; font-size: 13px; }

/* ─── Forms ─────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--label); }
.form-label .req { color: var(--red); margin-left: 2px; }
.form-input { width: 100%; padding: 14px 16px; border: 1px solid #D7DDEB; border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--navy); background: #fff; outline: none; transition: border-color .15s; }
.form-input:focus { border-color: var(--navy); }
.input-error { border-color: #e53e3e !important; background: #fff5f5 !important; }
.input-error:focus { border-color: #c53030 !important; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.input-error { animation: shake .35s ease; }
.form-input::placeholder { color: #B7BDD0; }
textarea.form-input { resize: vertical; min-height: 80px; line-height: 1.5; }
select.form-input { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316224C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.form-select { width: 100%; padding: 14px 16px; border: 1px solid #D7DDEB; border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--navy); background: #fff; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316224C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.form-select:focus { border-color: var(--navy); }

/* ─── Stepper ───────────────────────────────── */
.stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0 auto 36px; max-width: 640px; }
.step { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: #B7BDD0; }
.step-circle { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #B7BDD0; background: #fff; color: #B7BDD0; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 13px; flex-shrink: 0; }
.step.active .step-circle { border-color: var(--navy); color: var(--navy); background: #fff; }
.step.active .step-label  { color: var(--navy); font-weight: 600; }
.step.done   .step-circle { border-color: var(--navy); background: var(--navy); color: #fff; }
.step.done   .step-label  { color: var(--label); }
.step-label { white-space: nowrap; }
.step-connector { flex: 0 0 80px; height: 1px; background: #D7DDEB; margin: 0 16px; }
.step-connector.done { background: var(--navy); }

/* ─── Back Button ───────────────────────────── */
.back-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: var(--navy); font-size: 15px; font-weight: 600; font-family: inherit; padding: 0; margin-bottom: 24px; }
.back-btn:hover { opacity: .75; }

/* ─── Footer Bar ────────────────────────────── */
.footer-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 20px 40px; border-top: 1px solid var(--border); background: #fff; position: sticky; bottom: 0; }

/* ─── Cards ─────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; background: var(--info-bg); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--navy); }

/* ─── Empty State ───────────────────────────── */
.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; gap: 16px; }
.empty-state h3 { font-size: 18px; font-weight: 700; margin: 0; }
.empty-state p  { color: var(--muted); font-size: 14px; margin: 0; max-width: 320px; }

/* ─── Athlete Banner ────────────────────────── */
.athlete-banner { display: flex; align-items: center; gap: 20px; background: var(--navy); border-radius: var(--radius-lg); padding: 20px 28px; color: #fff; margin-bottom: 28px; }
.athlete-banner .ava { width: 56px; height: 56px; border-radius: 999px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.athlete-banner .info h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.athlete-banner .info p  { margin: 0; font-size: 13px; opacity: .75; }

/* ─── Score Card ────────────────────────────── */
.score-card { background: linear-gradient(135deg, var(--navy) 0%, #1e1e5a 100%); color: #fff; border-radius: var(--radius-lg); padding: 28px; margin-bottom: 28px; }
.score-number { font-size: 52px; font-weight: 800; line-height: 1; }
.score-grade  { font-size: 22px; font-weight: 700; opacity: .85; }
.score-label  { font-size: 14px; opacity: .65; margin-top: 4px; }
.score-bar { height: 8px; background: rgba(255,255,255,.2); border-radius: 999px; margin-top: 16px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 999px; background: #fff; transition: width .6s ease; }

/* ─── Grid ──────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }

/* ─── Section Headers ───────────────────────── */
.section-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.section-title { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 16px; }
.section-subtitle { font-size: 13px; color: var(--muted); margin: -10px 0 18px; }

/* ─── Section Block (Add/Detail pages) ─────── */
.section-block { border: 1px solid #DCE3F2; border-radius: 14px; overflow: hidden; margin-bottom: 28px; }
.section-block-head { background: #EEF1F9; padding: 16px 26px; font-weight: 600; font-size: 16px; color: var(--navy); }
.section-block-body { padding: 22px 26px 26px; }
.kv-row { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.kv-row:last-child { border-bottom: none; }
.kv-label { font-size: 13px; color: var(--label); min-width: 160px; flex-shrink: 0; padding-top: 1px; }
.kv-value { font-size: 13px; font-weight: 600; color: var(--navy); flex: 1; }
/* ─── Value Block (inside Measurement) ──────── */
.value-block { background: #F5F8FE; border: 1px solid #E0E7F5; border-radius: 12px; padding: 22px 24px 26px; }
.value-title { font-weight: 600; color: var(--navy); font-size: 15px; margin: 0 0 18px 0; }
/* ─── Add Value Button ──────────────────────── */
.add-value-btn { background: transparent; border: none; padding: 16px 4px 4px; display: inline-flex; align-items: center; gap: 10px; font-family: inherit; color: var(--navy); font-size: 15px; font-weight: 500; cursor: pointer; }
.add-value-btn svg { width: 22px; height: 22px; }
.add-value-btn:hover { opacity: 0.75; }
.remove-value-btn { background: transparent; border: 1px solid #E5E7EF; border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #8A91A4; transition: all .15s; flex-shrink: 0; }
.remove-value-btn svg { width: 14px; height: 14px; }
.remove-value-btn:hover { border-color: var(--red); color: var(--red); background: #FFF5F5; }
/* ─── Field Helpers ─────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 14px; font-weight: 500; color: var(--navy); }
.field-label .req { color: var(--red); }
.field-help { font-size: 12px; color: #8A91A4; margin-top: 2px; }
.required-hint { font-size: 13px; color: var(--red); margin: 0 0 18px 0; }
/* ─── Form Footer ───────────────────────────── */
.form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; }
.footer-right { display: flex; align-items: center; gap: 14px; }
/* ─── Page Head (Add/Create pages) ──────────── */
.page-head { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; }
.page-head .back-btn { margin-bottom: 0; width: 36px; height: 36px; flex-shrink: 0; }
/* Alert */
.alert-success { background: #ECFDF5; border: 1px solid #6EE7B7; border-radius: 10px; padding: 12px 18px; font-size: 14px; font-weight: 500; color: #065F46; margin-bottom: 20px; }
.page-title { font-size: 28px; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -0.3px; }

/* ─── ACWR ──────────────────────────────────── */
.acwr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; }

/* ─── Range Input ───────────────────────────── */
input[type=range] { width: 100%; accent-color: var(--navy); height: 6px; cursor: pointer; }

/* ─── Utilities ─────────────────────────────── */
.text-muted { color: var(--muted); }
.text-label { color: var(--label); }
.fw-700 { font-weight: 700; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ─── Login ─────────────────────────────────── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 48px; width: 100%; max-width: 440px; box-shadow: 0 8px 32px rgba(20,20,59,.08); }
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
.login-title { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.login-sub { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
.login-error { background: #FFF0F0; border: 1px solid #FFD0D3; color: var(--red); border-radius: var(--radius); padding: 12px 16px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.login-hint { background: var(--info-bg); border-radius: var(--radius); padding: 14px 16px; margin-top: 20px; }
.login-hint p { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--label); }
.login-hint code { font-size: 12px; color: var(--navy); display: block; line-height: 1.8; }

/* ─── Create Template Step 3 Builder ────────── */
.tpl-info-banner { background:var(--info-bg);color:var(--navy);border-radius:8px;padding:14px 18px;font-size:13.5px;margin:0 0 24px;display:flex;align-items:center;gap:12px; }
.tpl-panel { border:1.5px solid var(--border-2);border-radius:12px;padding:22px;background:#fff;display:flex;flex-direction:column; }
.tpl-panel-target { border-color:var(--navy); }
.tpl-panel-head { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px; }
.tpl-panel-title { font-size:20px;font-weight:700;color:var(--navy);margin:0 0 4px;display:flex;align-items:center;gap:10px; }
.tpl-panel-sub { font-size:13px;color:var(--muted);margin:0; }
.tpl-panel-counter { background:var(--navy);color:#fff;border-radius:999px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700; }
.tpl-clear-btn { background:transparent;color:var(--red);border:1px solid #F5C2C6;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit; }
.tpl-lib-search { flex:1;display:flex;align-items:center;border:1px solid var(--border-2);border-radius:8px;padding:0 14px;background:#fff; }
.tpl-lib-search svg { color:var(--muted);flex-shrink:0; }
.tpl-lib-search input { flex:1;border:none;outline:none;padding:11px 10px;font-family:inherit;font-size:13.5px;color:var(--navy);background:transparent; }
.tpl-lib-search input::placeholder { color:#B5B5C9; }
.tpl-filter-btn { width:46px;border:1px solid var(--border-2);border-radius:8px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--navy); }
.tpl-pill { padding:7px 16px;border-radius:999px;background:#fff;border:1px solid var(--border-2);color:var(--navy);font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;white-space:nowrap; }
.tpl-pill.active { background:var(--navy);color:#fff;border-color:var(--navy); }
.tpl-metric-card { border:1px solid var(--border-2);border-radius:10px;padding:14px 16px;background:#fff;display:flex;align-items:center;gap:14px; }
.tpl-metric-card.selected { background:#F1F2FB;border-color:var(--navy); }
.tpl-checkbox { width:22px;height:22px;border:1.5px solid #C9CADC;border-radius:6px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#fff; }
.tpl-checkbox.checked { background:var(--navy);border-color:var(--navy); }
.tpl-tag { background:#ECECF3;color:var(--navy);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:500; }
.tpl-add-circle { width:30px;height:30px;border-radius:999px;border:1.5px solid var(--border-2);background:#fff;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
.tpl-add-circle:hover { background:var(--hover); }
.tpl-middle-arrow { display:flex;align-items:center;justify-content:center;position:relative; }
.tpl-middle-arrow::before { content:'';position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:var(--border); }
.tpl-arrow-btn { width:44px;height:44px;border-radius:999px;background:var(--navy);color:#fff;border:none;display:inline-flex;align-items:center;justify-content:center;z-index:1;cursor:default; }
.tpl-section-wrap { margin-bottom:16px;cursor:pointer;border-radius:12px;transition:box-shadow .15s,transform .15s; }
.tpl-section-wrap:not(.active):hover { box-shadow:0 0 0 2px #C9CADC; }
/* Active (currently-selected) section — clear ring + accent header */
.tpl-section-wrap.active { box-shadow:0 0 0 3px #7F77DD, 0 6px 18px rgba(127,119,221,.22); }
.tpl-section-wrap.active .tpl-section-head { background:#3C3489; }
.tpl-section-wrap.active .tpl-section-body { border-color:#7F77DD; }
.tpl-section-wrap.active .tpl-section-num { background:#7F77DD; }
.tpl-section-active-badge { width:22px;height:22px;border-radius:999px;background:#22C55E;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
.tpl-section-head { background:var(--navy);border-radius:10px;padding:8px;display:flex;align-items:center;gap:10px;color:#fff; }
.tpl-section-head.attached { border-radius:10px 10px 0 0; }
.tpl-section-num { width:32px;height:32px;background:rgba(255,255,255,.12);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0;font-size:14px; }
.tpl-section-name-input { flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px 12px;color:#fff;font-weight:600;font-size:14px;font-family:inherit;outline:none; }
.tpl-section-close { width:32px;height:32px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-style:solid;flex-shrink:0; }
.tpl-section-weight { display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:0 10px;height:34px;color:#fff;flex-shrink:0; }
.tpl-section-weight input { width:38px;background:transparent;border:none;outline:none;color:#fff;font-weight:700;font-size:14px;font-family:inherit;text-align:right;-moz-appearance:textfield; }
.tpl-section-weight input::-webkit-outer-spin-button, .tpl-section-weight input::-webkit-inner-spin-button { -webkit-appearance:none;margin:0; }
.tpl-section-weight span { font-weight:700;font-size:14px;opacity:.85; }
.tpl-section-body { border:1.5px solid var(--navy);border-top:none;border-radius:0 0 10px 10px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:10px; }
.tpl-metric-row { display:flex;align-items:center;gap:12px;border:1px solid #C8CAE6;background:#F1F2FB;border-radius:10px;padding:12px 14px; }
.tpl-drag-handle { display:grid;grid-template-columns:repeat(2,4px);grid-template-rows:repeat(3,4px);gap:3px;flex-shrink:0; }
.tpl-drag-handle span { width:4px;height:4px;border-radius:999px;background:#B5B7D5; }
.tpl-row-remove { background:transparent;border:none;cursor:pointer;color:var(--red);padding:4px;display:inline-flex;align-items:center;justify-content:center; }
.tpl-drop-more { border-top:1.5px dashed #C9CADC;padding:14px 8px 4px;text-align:center;color:var(--muted);font-size:13px;margin-top:4px; }
.tpl-drop-area { border:1.5px dashed #C9CADC;border-top:none;border-radius:0 0 10px 10px;padding:22px;text-align:center;color:var(--muted);font-size:13.5px;background:#fff; }
.tpl-add-section { width:100%;margin-top:8px;border:1.5px dashed #C9CADC;background:#FAFAFD;border-radius:10px;padding:18px;text-align:center;color:var(--navy);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit; }
.tpl-add-section:hover { background:var(--hover); }

/* ─── Create Template — Form Step 1 ─────────── */
.tpl-section-title { font-size:17px;font-weight:700;color:var(--navy);margin:28px 0 12px; }
.tpl-form-card { border:1px solid var(--border-2);border-radius:12px;padding:24px;background:#fff;margin-bottom:4px; }
.tpl-check-row { display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none; }
.field-hint { color:var(--muted);font-size:11.5px;margin-top:4px; }

/* ─── Metric Details Sidebar ────────────────── */
.det-sidebar-card { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 20px; overflow: hidden; background: #fff; }
.det-field-label { color: var(--muted); font-size: 13px; font-weight: 400; margin-bottom: 6px; display: block; }
.det-field-value { color: var(--navy); font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.det-pill-full { display: flex; align-items: center; justify-content: center; padding: 9px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; width: 100%; }
.det-pill-green  { background: #D4F4DD; color: #1E9A53; }
.det-pill-red    { background: #FEE2E2; color: #B91C1C; }
.det-pill-amber  { background: #FCE7BF; color: #B7791F; }
.det-pill-blue   { background: var(--info-bg); color: var(--navy); }
.det-pill-muted  { background: var(--bg); color: var(--muted); }

/* ─── Create Template — Step 2 Link Button ──── */
.tpl-link-btn { background:var(--navy);color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap; }
.tpl-link-btn:hover { opacity:.9; }

/* ─── Create Template — Step 4 Preview ─────── */
.prev-head-banner { display:flex;align-items:center;justify-content:space-between;gap:16px;background:#F1F2FB;border:1.5px solid #C8CAE6;border-radius:12px;padding:20px 24px;margin-bottom:20px; }
.prev-grid { display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start; }
.prev-left-col { display:flex;flex-direction:column;gap:16px; }
.prev-right-col { display:flex;flex-direction:column;gap:16px; }
.prev-card { background:#fff;border:1.5px solid var(--border-2);border-radius:12px;padding:20px;overflow:hidden; }
.prev-card-head { font-size:14px;font-weight:700;color:var(--navy);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);display:flex;align-items:center; }
.prev-kv-row { display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--border); }
.prev-kv-row:last-child { border-bottom:none; }
.prev-kv-key { font-size:12.5px;color:var(--muted);white-space:nowrap; }
.prev-kv-val { font-size:13.5px;color:var(--navy);font-weight:600;text-align:right;word-break:break-word; }
.prev-sec-card { background:#fff;border:1.5px solid var(--border-2);border-radius:12px;overflow:hidden; }
.prev-sec-head { display:flex;align-items:center;gap:12px;background:var(--navy);padding:14px 18px; }
.prev-sec-num { width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;flex-shrink:0; }
.prev-sec-head span:last-child { color:#fff; }
.prev-sec-body { padding:14px 18px;display:flex;flex-direction:column;gap:0; }
.prev-metric-row { display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border); }
.prev-metric-row:last-child { border-bottom:none; }
.prev-sec-foot { display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#FAFAFD;border-top:1px solid var(--border); }

/* ─── Sortable table headers ─────────────────── */
.th-sort { cursor:pointer;user-select:none;white-space:nowrap; }
.th-sort:hover { color:var(--navy); }
.sort-icon { display:inline-flex;align-items:center;margin-left:5px;opacity:.35;vertical-align:middle; }
.th-sort.th-active { color:var(--navy); }
.th-sort.th-active .sort-icon { opacity:1; }

/* ─── Filter Panel ────────────────────────────── */
.filter-panel { background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-top:8px;margin-bottom:12px;box-shadow:0 4px 16px rgba(20,20,59,.07); }
.filter-cols { display:grid;gap:20px; }
.filter-cols-3 { grid-template-columns:repeat(3,1fr); }
.filter-cols-2 { grid-template-columns:repeat(2,1fr); }
.filter-group-lbl { font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px; }
.fp-pills { display:flex;flex-wrap:wrap;gap:6px; }
.fp { font-size:12.5px;padding:5px 12px;border-radius:20px;border:1px solid var(--border-2);background:#fff;color:var(--label);cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .1s,color .1s; }
.fp:hover { border-color:var(--navy);color:var(--navy); }
.fp.fp-on { background:#EEEDFE;border-color:#AFA9EC;color:#3C3489;font-weight:600; }
.fp.fp-green { background:#EAF3DE;border-color:#97C459;color:#3B6D11;font-weight:600; }
.active-chips { display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:12px; }
.ach { display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 11px;border-radius:20px;background:#EEEDFE;border:1px solid #AFA9EC;color:#3C3489;font-weight:500; }
.ach-green { background:#EAF3DE !important;border-color:#97C459 !important;color:#3B6D11 !important; }
.ach-x { cursor:pointer;opacity:.55;line-height:1;font-size:14px; }
.clear-all { font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer; }
.filter-btn-on { background:#EEEDFE !important;border-color:#AFA9EC !important;color:#3C3489 !important; }
.filter-count { background:#3C3489;color:#fff;border-radius:999px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;margin-left:2px; }

/* ─── Calculation info modal ──────────────────── */
.calc-info-btn { display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.14);border:none;color:#fff;cursor:pointer;padding:0;transition:background .15s; }
.calc-info-btn:hover { background:rgba(255,255,255,.28); }
.calc-modal-overlay { position:fixed;inset:0;background:rgba(20,20,59,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px; }
.calc-modal { background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.3); }
.calc-modal-head { display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;border-radius:16px 16px 0 0; }
.calc-modal-head h3 { margin:0;font-size:18px;font-weight:800;color:var(--navy); }
.calc-modal-close { width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center; }
.calc-modal-close:hover { background:var(--bg); }
.calc-modal-body { padding:22px 24px; }
.calc-step { display:flex;gap:14px;margin-bottom:18px; }
.calc-step-num { flex-shrink:0;width:28px;height:28px;border-radius:999px;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px; }
.calc-step strong { display:block;color:var(--navy);font-size:14.5px;margin-bottom:3px; }
.calc-step p { margin:0;font-size:13px;color:var(--muted);line-height:1.55; }
.calc-breakdown-title { font-size:12px;font-weight:700;color:var(--label);letter-spacing:.05em;text-transform:uppercase;margin:22px 0 10px; }
.calc-table { width:100%;border-collapse:collapse;font-size:13px; }
.calc-table th { text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:6px 10px;border-bottom:1px solid var(--border); }
.calc-table td { padding:9px 10px;border-bottom:1px solid var(--border);color:var(--navy); }
.calc-table tfoot td { border-top:2px solid var(--border);border-bottom:none;font-weight:700;background:var(--info-bg); }
.calc-grades { display:flex;flex-wrap:wrap;gap:8px; }
.calc-grades span { background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font-size:13px;color:var(--navy); }
[dir="rtl"] .calc-table th { text-align:right; }

/* ─── Dashboard ───────────────────────────────── */
.dash-kpis { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px; }
.dash-kpi { padding:18px 22px; }
.dash-kpi-label { font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:600;letter-spacing:.4px;text-transform:uppercase; }
.dash-kpi-num { font-size:34px;font-weight:800;color:var(--navy);line-height:1; }
.dash-kpi-sub { font-size:12px;color:var(--muted);margin-top:5px; }
.dash-grid-2-1 { display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px;align-items:start; }
.dash-grid-1-1 { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;align-items:start; }
.dash-card-head { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px; }
.dash-card-sub { font-size:12px;color:var(--muted); }
.dash-empty { padding:28px 0;text-align:center;color:var(--muted);font-size:13px; }
.dash-safe { display:flex;align-items:center;gap:10px;padding:18px 4px;color:#178a44;font-size:13.5px;font-weight:500; }
/* ACWR alerts */
.dash-acwr-row { display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border); }
.dash-acwr-row:last-child { border-bottom:none; }
.dash-acwr-badge { display:inline-block;margin-top:3px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px; }
/* rankings */
.dash-rank-row { display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border); }
.dash-rank-row:last-child { border-bottom:none; }
.dash-rank-num { width:26px;height:26px;border-radius:8px;background:var(--bg);color:var(--label);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0; }
.dash-rank-num.top { background:var(--navy);color:#fff; }
.dash-rank-num.warn { background:#FFE7E7;color:#FF3B47; }
.dash-score-pill { font-weight:800;font-size:14px;padding:3px 11px;border-radius:999px; }
.dash-score-pill.green { background:#E7F8EE;color:#178a44; }
.dash-score-pill.red { background:#FFE7E7;color:#FF3B47; }
/* bars */
.dash-bar-row { display:flex;align-items:center;gap:12px;margin-bottom:14px; }
.dash-bar-label { width:96px;flex-shrink:0;font-size:13px;color:var(--navy);font-weight:600; }
.dash-bar-track { flex:1;height:9px;background:var(--bg);border-radius:999px;overflow:hidden; }
.dash-bar-fill { height:100%;border-radius:999px;transition:width .6s; }
.dash-bar-val { width:30px;flex-shrink:0;text-align:right;font-size:13px;font-weight:700;color:var(--navy); }
/* events */
.dash-event-row { display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--border); }
.dash-event-row:last-child { border-bottom:none; }
.dash-event-date { width:46px;height:46px;border-radius:10px;background:var(--info-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0; }
.dash-event-day { font-weight:800;font-size:17px;color:var(--navy);line-height:1; }
.dash-event-mon { font-size:10px;color:var(--label);text-transform:uppercase;font-weight:700; }
.dash-event-in { font-size:12px;font-weight:600;color:var(--muted);flex-shrink:0; }
/* recent */
.dash-recent-row { display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer; }
.dash-recent-row:last-child { border-bottom:none; }
.dash-avatar { width:36px;height:36px;border-radius:999px;background:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0; }
@media (max-width:1100px){ .dash-kpis{grid-template-columns:repeat(2,1fr);} .dash-grid-2-1,.dash-grid-1-1{grid-template-columns:1fr;} }
[dir="rtl"] .dash-bar-val { text-align:left; }

/* ─── Athlete Import wizard ───────────────────── */
.imp-stepper { display:flex;align-items:center;gap:0;margin:22px 0 8px;padding:0 6px; }
.imp-step { display:flex;align-items:center;gap:10px; }
.imp-step-dot { width:30px;height:30px;border-radius:999px;background:var(--bg);border:1.5px solid var(--border-2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;transition:.2s; }
.imp-step-lbl { font-size:13px;font-weight:600;color:var(--muted); }
.imp-step-active .imp-step-dot { background:var(--navy);border-color:var(--navy);color:#fff; }
.imp-step-active .imp-step-lbl { color:var(--navy); }
.imp-step-done .imp-step-dot { background:var(--green);border-color:var(--green);color:#fff; }
.imp-step-done .imp-step-lbl { color:var(--navy); }
.imp-step-line { flex:1;height:2px;background:var(--border);margin:0 14px;border-radius:2px;min-width:30px; }
.imp-step-line-done { background:var(--green); }

.imp-body { margin-top:24px; }
.imp-info { display:flex;gap:16px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px;background:#fff; }
.imp-info-num { width:28px;height:28px;border-radius:999px;background:var(--info-bg);color:var(--navy);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.imp-info-title { font-size:15px;font-weight:700;color:var(--navy); }
.imp-info-sub { font-size:13px;color:var(--muted);margin-top:3px; }
.imp-cols-hint { display:flex;flex-wrap:wrap;gap:6px;margin-top:14px; }
.imp-tag { font-size:12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:3px 9px;color:var(--label,#555); }
.imp-tag b { color:var(--red); }
.imp-allowed { margin-top:12px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted); }
.imp-allowed b { color:var(--navy);font-weight:600; }

.imp-drop { display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px;padding:26px;border:2px dashed var(--border-2);border-radius:var(--radius-lg);color:var(--muted);cursor:pointer;transition:.15s;text-align:center;position:relative; }
.imp-drop:hover { border-color:var(--navy);background:var(--info-bg); }
.imp-drop input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
.imp-drop-main { font-size:14px;font-weight:600;color:var(--navy);margin-top:6px; }
.imp-drop-sub { font-size:12px;color:var(--muted); }
.imp-error-box { margin-top:12px;background:#FFF1F2;border:1px solid #FECDD3;color:var(--red);border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600; }

.imp-summary { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.imp-sum-card { background:var(--bg);border-radius:var(--radius-lg);padding:16px 18px;border:1px solid var(--border); }
.imp-sum-n { font-size:26px;font-weight:800;color:var(--navy);line-height:1; }
.imp-sum-l { font-size:12px;color:var(--muted);font-weight:600;margin-top:6px; }
.imp-sum-new { background:#ECFDF5;border-color:#A7F3D0; }
.imp-sum-new .imp-sum-n { color:#059669; }
.imp-sum-dup { background:#FFFBEB;border-color:#FDE68A; }
.imp-sum-dup .imp-sum-n { color:#D97706; }
.imp-sum-err { background:#FFF1F2;border-color:#FECDD3; }
.imp-sum-err .imp-sum-n { color:var(--red); }
.imp-row-err { background:#FFF8F8; }
.imp-row-dup { background:#FFFDF5; }

.imp-done-check { width:64px;height:64px;border-radius:999px;background:#ECFDF5;color:#059669;display:inline-flex;align-items:center;justify-content:center;border:2px solid #A7F3D0; }

[dir="rtl"] .imp-tag b, [dir="rtl"] .imp-allowed b { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

.subsport-chip { display:inline-block; font-size:11.5px; font-weight:600; background:var(--info-bg); color:var(--navy); padding:2px 9px; border-radius:6px; }

/* ─── Sub-Sports management ───────────────────── */
.ss-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px; margin-top:24px; }
.ss-card { border:1px solid var(--border); border-radius:var(--radius-lg); background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.ss-card-head { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:var(--info-bg); font-weight:700; color:var(--navy); font-size:14px; }
.ss-count { background:var(--navy); color:#fff; font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.ss-list { padding:8px 12px; display:flex; flex-direction:column; gap:6px; min-height:30px; }
.ss-empty { color:var(--muted); font-size:12.5px; padding:8px 2px; }
.ss-row { display:flex; align-items:center; gap:8px; }
.ss-row-off .ss-name { opacity:.5; text-decoration:line-through; }
.ss-name { flex:1; border:1px solid transparent; border-radius:7px; padding:7px 9px; font-size:13.5px; color:var(--navy); background:var(--bg); font-family:inherit; outline:none; transition:border-color .15s; min-width:0; }
.ss-name:focus { border-color:var(--navy); background:#fff; }
.ss-toggle { width:26px; height:26px; border-radius:7px; border:1px solid var(--border-2); background:#fff; color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ss-toggle.on { background:var(--green); border-color:var(--green); }
.ss-del { width:26px; height:26px; border-radius:7px; border:1px solid var(--border-2); background:#fff; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:.15s; }
.ss-del:hover { color:var(--red); border-color:var(--red); background:#FFF1F2; }
.ss-add { display:flex; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--border); }
.ss-add-input { flex:1; border:1px solid var(--border-2); border-radius:8px; padding:8px 11px; font-size:13px; font-family:inherit; color:var(--navy); outline:none; min-width:0; }
.ss-add-input:focus { border-color:var(--navy); }
.ss-add-btn { width:34px; flex-shrink:0; border-radius:8px; border:none; background:var(--navy); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.ss-add-btn:disabled { opacity:.4; cursor:not-allowed; }
.ss-err { color:var(--red); font-size:12px; font-weight:600; padding:0 14px 10px; }

/* ─── RTL (Arabic) ────────────────────────────── */
[dir="rtl"] body, [dir="rtl"] { font-family: 'Tajawal', 'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif; }

/* Arabic optically smaller than Latin — bump ~1px across text-bearing elements */
[dir="rtl"] body { font-size: 15px; }
[dir="rtl"] .nav-item, [dir="rtl"] .sub-item, [dir="rtl"] .tab,
[dir="rtl"] th, [dir="rtl"] td, [dir="rtl"] table,
[dir="rtl"] .field-label, [dir="rtl"] .form-input, [dir="rtl"] .form-label,
[dir="rtl"] .kv-label, [dir="rtl"] .kv-value, [dir="rtl"] .det-field-label, [dir="rtl"] .det-field-value,
[dir="rtl"] .section-block-head, [dir="rtl"] .pill, [dir="rtl"] .fp, [dir="rtl"] .ach,
[dir="rtl"] .btn, [dir="rtl"] .add-btn, [dir="rtl"] .chip, [dir="rtl"] .search-wrap input { font-size: 15px; }
[dir="rtl"] .filter-group-lbl { font-size: 11.5px; }
[dir="rtl"] .tab { font-size: 17px; }
[dir="rtl"] .page-title { font-size: 31px; }

/* Sidebar flips to the right */
[dir="rtl"] .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .main-content { margin-left: 0; margin-right: 260px; }
[dir="rtl"] .sub-nav { padding-left: 0; padding-right: 28px; border-left: none; border-right: 1px solid var(--border); margin: 2px 26px 6px 0; }
[dir="rtl"] .nav-item .chev { margin-left: 0; margin-right: auto; }

/* Topbar */
[dir="rtl"] .topbar-right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .bell-badge { right: auto; left: -8px; }

/* Tables & lists */
[dir="rtl"] th { text-align: right; }
[dir="rtl"] .pages { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sort-icon { margin-left: 0; margin-right: 5px; }
[dir="rtl"] .per-page-select { margin-left: 0; margin-right: 6px; }

/* Toolbar */
[dir="rtl"] .search-wrap input { text-align: right; }
[dir="rtl"] .filter-count { margin-left: 0; margin-right: 2px; }

/* Forms */
[dir="rtl"] .form-label .req { margin-left: 0; margin-right: 2px; }
[dir="rtl"] select.form-input, [dir="rtl"] .form-select { background-position: left 16px center; padding-right: 16px; padding-left: 44px; }

/* Preview cards */
[dir="rtl"] .prev-kv-val { text-align: left; }