/* ============================================================
   REEF GROUP — Competency Framework Dashboard
   Design tokens
   ============================================================ */
:root{
  --cream:      #F5EFE6;
  --cream-2:    #FBF7F0;
  --white:      #FFFFFF;
  --dark:       #4A2C1A;
  --dark-2:     #3A2213;
  --rose:       #B07A5A;
  --rose-light: #C49A78;
  --taupe:      #D4B896;
  --taupe-2:    #E5D2B8;

  --ink:        #3A2B20;
  --ink-soft:   #7A6A5A;
  --ink-faint:  #A6957F;

  --green:      #27AE60;
  --green-dark: #1E8449;
  --amber:      #E67E22;
  --amber-2:    #F2C572;
  --red:        #C0392B;

  --band-above:   #1E8449;
  --band-meets:   #3FA65C;
  --band-approach:#E0A83E;
  --band-dev:     #E07B39;
  --band-critical:#C0392B;
  --band-na:      #E8E0D3;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(74,44,26,.06), 0 1px 1px rgba(74,44,26,.04);
  --shadow-md: 0 6px 20px rgba(74,44,26,.10);
  --shadow-lg: 0 16px 40px rgba(74,44,26,.16);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --sidebar-w: 264px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--taupe-2); color: var(--dark); }

a{ color: var(--rose); text-decoration:none; }
a:hover{ text-decoration:underline; }

button{ font-family:inherit; cursor:pointer; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--taupe); border-radius:10px; border:2px solid var(--cream); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  color: var(--cream);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:22px 22px 18px;
  border-bottom:1px solid rgba(245,239,230,.12);
}
.brand-mark{
  width:38px; height:38px;
  flex-shrink:0;
}
.brand-text{ line-height:1.15; }
.brand-text .t1{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:.04em; color:var(--cream); }
.brand-text .t2{ font-size:10px; letter-spacing:.16em; color:var(--rose-light); text-transform:uppercase; margin-top:2px; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:14px 12px; }
.nav-group-label{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(245,239,230,.38); margin:16px 10px 8px;
}
.nav-group-label:first-child{ margin-top:4px; }

.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:8px; margin-bottom:2px;
  color: rgba(245,239,230,.72);
  font-size:13.5px; font-weight:500;
  cursor:pointer;
  border:1px solid transparent;
  transition: background .15s ease, color .15s ease;
  position:relative;
}
.nav-item svg{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background: rgba(245,239,230,.06); color:var(--cream); }
.nav-item.active{
  background: rgba(176,122,90,.22);
  color: var(--cream);
  border-color: rgba(176,122,90,.4);
}
.nav-item.active svg{ opacity:1; }
.nav-item.active::before{
  content:"";
  position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:2px;
  background: var(--rose-light);
}
.nav-item .nav-badge{
  margin-left:auto;
  font-size:10px; font-weight:700;
  background: rgba(192,57,43,.85);
  color:#fff; border-radius:999px; padding:1px 7px;
}

.sidebar-foot{
  padding:16px 20px 20px;
  border-top:1px solid rgba(245,239,230,.12);
  font-size:11px; color:rgba(245,239,230,.4);
  display:flex; align-items:center; gap:8px;
}
.sidebar-foot .dot{ color:var(--rose-light); }

/* ---------- Main ---------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; overflow:hidden; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; gap:20px;
  background: var(--cream-2);
  border-bottom:1px solid var(--taupe-2);
  flex-shrink:0;
}
.topbar-title .eyebrow{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose); font-weight:600; margin-bottom:4px;
}
.topbar-title h1{
  font-family:var(--font-display); font-size:30px; font-weight:600;
  margin:0; color:var(--dark); letter-spacing:.01em;
}
.topbar-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

.topbar-actions{ display:flex; align-items:center; gap:10px; }

.view-scroll{ flex:1; overflow-y:auto; padding:28px 32px 60px; }
.view{ display:none; animation: fadeUp .35s ease; }
.view.active{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.card{
  background:var(--white);
  border:1px solid var(--taupe-2);
  border-radius:var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad{ padding:22px; }

.section-heading{
  display:flex; align-items:baseline; gap:10px; margin: 6px 0 16px;
}
.section-heading h2{
  font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--dark); margin:0;
}
.section-heading .diamond{ color:var(--rose); font-size:13px; }
.section-heading .count{ font-size:12px; color:var(--ink-faint); font-weight:500; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  font-size:12.5px; font-weight:600;
  border:1px solid var(--taupe-2);
  background:var(--white); color:var(--ink-soft);
  cursor:pointer; transition:.15s ease;
  white-space:nowrap;
}
.pill:hover{ border-color:var(--rose-light); color:var(--dark); }
.pill.active{ background:var(--dark); color:var(--cream); border-color:var(--dark); }
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }

.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  letter-spacing:.01em;
}
.badge-basic{ background:#EFE6DA; color:#7A5C3E; }
.badge-practitioner{ background:#E9D6BE; color:#6E4B27; }
.badge-advanced{ background:var(--rose-light); color:#fff; }
.badge-expert{ background:var(--rose); color:#fff; }
.badge-strategic{ background:var(--dark); color:var(--cream); }
.badge-na{ background:var(--band-na); color:var(--ink-faint); }

.badge-above{ background:var(--band-above); color:#fff; }
.badge-meets{ background:var(--band-meets); color:#fff; }
.badge-approach{ background:var(--band-approach); color:#4a3410; }
.badge-dev{ background:var(--band-dev); color:#fff; }
.badge-critical{ background:var(--band-critical); color:#fff; }

.input, select.input{
  font-family:inherit; font-size:13px; color:var(--ink);
  background:var(--white); border:1px solid var(--taupe-2); border-radius:8px;
  padding:9px 12px; outline:none; transition:border-color .15s ease;
}
.input:focus{ border-color:var(--rose); }
.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; padding-right:32px; min-width:160px; }
.select-wrap::after{
  content:""; position:absolute; right:12px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:8px; font-size:13px; font-weight:600;
  border:1px solid var(--taupe-2); background:var(--white); color:var(--dark);
  transition:.15s ease;
}
.btn:hover{ border-color:var(--rose); }
.btn-primary{ background:var(--rose); color:#fff; border-color:var(--rose); }
.btn-primary:hover{ background:var(--dark); border-color:var(--dark); }
.btn svg{ width:15px; height:15px; }

.search{
  display:flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--taupe-2); border-radius:8px;
  padding:9px 14px; min-width:240px;
}
.search svg{ width:15px; height:15px; color:var(--ink-faint); flex-shrink:0; }
.search input{ border:none; outline:none; font-size:13px; width:100%; background:transparent; color:var(--ink); }

table{ width:100%; border-collapse:collapse; font-size:13px; }
th{
  text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:700; padding:11px 14px; border-bottom:2px solid var(--taupe-2);
  cursor:pointer; user-select:none; white-space:nowrap;
}
th:hover{ color:var(--dark); }
th .arrow{ opacity:.4; font-size:10px; margin-left:3px; }
td{ padding:12px 14px; border-bottom:1px solid var(--cream-2); color:var(--ink); }
tbody tr{ transition:background .12s ease; cursor:pointer; }
tbody tr:hover{ background:var(--cream-2); }

.kpi-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:26px; }
.kpi{
  background:var(--white); border:1px solid var(--taupe-2); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow-sm);
}
.kpi .kpi-label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.kpi .kpi-value{ font-family:var(--font-display); font-size:34px; font-weight:600; color:var(--dark); margin-top:6px; line-height:1; }
.kpi .kpi-value.accent-red{ color:var(--red); }
.kpi .kpi-value.accent-green{ color:var(--green-dark); }
.kpi .kpi-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:6px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

hr.rule{ border:none; border-top:1px solid var(--taupe-2); margin:22px 0; }

.tooltip{
  position:fixed; z-index:999; pointer-events:none;
  background:var(--dark); color:var(--cream);
  font-size:11.5px; padding:8px 12px; border-radius:8px;
  box-shadow:var(--shadow-lg); max-width:240px; line-height:1.4;
  opacity:0; transition:opacity .1s ease;
}
.tooltip.show{ opacity:1; }
.tooltip b{ color:#fff; }

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--dark); color:var(--cream); padding:13px 22px; border-radius:10px;
  font-size:13px; font-weight:500; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:.25s ease; z-index:1000;
  display:flex; align-items:center; gap:10px;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg{ width:16px; height:16px; color:var(--green); }

/* ============================================================
   OVERVIEW
   ============================================================ */
.hero-band{
  background: radial-gradient(120% 160% at 0% 0%, #5A3A26 0%, var(--dark) 55%, var(--dark-2) 100%);
  border-radius: 16px; color:var(--cream); padding:30px 34px; margin-bottom:26px;
  position:relative; overflow:hidden;
}
.hero-band::after{
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%; border:1px solid rgba(196,154,120,.35);
}
.hero-band::before{
  content:""; position:absolute; right:20px; bottom:-90px; width:180px; height:180px;
  border-radius:50%; border:1px solid rgba(196,154,120,.25);
}
.hero-band .eyebrow{ color:var(--rose-light); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.hero-band h1{ font-family:var(--font-display); font-size:32px; margin:8px 0 10px; font-weight:600; max-width:640px; position:relative; }
.hero-band p{ color:rgba(245,239,230,.75); max-width:560px; font-size:13.5px; line-height:1.6; position:relative; }

.pillar-mini-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; position:relative; }
.pillar-mini{
  background:rgba(245,239,230,.06); border:1px solid rgba(245,239,230,.16);
  border-radius:10px; padding:14px 16px; display:flex; gap:12px; align-items:center;
  cursor:pointer; transition:.15s ease;
}
.pillar-mini:hover{ background:rgba(245,239,230,.12); }
.pillar-mini .icon-wrap{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pillar-mini .icon-wrap svg{ width:18px; height:18px; }
.pillar-mini .pm-title{ font-size:13px; font-weight:700; color:var(--cream); }
.pillar-mini .pm-sub{ font-size:11px; color:rgba(245,239,230,.55); }

/* ============================================================
   PILLARS VIEW
   ============================================================ */
.pillar-block{ margin-bottom:34px; }
.pillar-header{
  display:flex; align-items:center; gap:16px; padding:20px 24px; border-radius:14px; margin-bottom:16px;
  color:#fff; position:relative; overflow:hidden;
}
.pillar-header .ph-icon{
  width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pillar-header .ph-icon svg{ width:28px; height:28px; }
.pillar-header h3{ font-family:var(--font-display); font-size:22px; margin:0 0 4px; font-weight:600; }
.pillar-header p{ margin:0; font-size:12.5px; opacity:.85; max-width:520px; }
.pillar-header .ph-count{
  margin-left:auto; text-align:right;
}
.pillar-header .ph-count .n{ font-family:var(--font-display); font-size:30px; font-weight:600; }
.pillar-header .ph-count .l{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }

.ph-core{ background:linear-gradient(120deg,#8C5A3C,#B07A5A); }
.ph-behavioral{ background:linear-gradient(120deg,#6E4B27,#9A6B3F); }
.ph-leadership{ background:linear-gradient(120deg,#4A2C1A,#6E4326); }

.comp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.comp-card{
  background:var(--white); border:1px solid var(--taupe-2); border-radius:12px;
  padding:16px 17px; cursor:pointer; transition:.15s ease; position:relative;
}
.comp-card:hover{ box-shadow:var(--shadow-md); border-color:var(--rose-light); transform:translateY(-2px); }
.comp-card .cc-icon{
  width:34px; height:34px; border-radius:9px; background:var(--cream-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.comp-card .cc-icon svg{ width:18px; height:18px; color:var(--rose); }
.comp-card .cc-title{ font-size:13.5px; font-weight:700; color:var(--dark); margin-bottom:5px; }
.comp-card .cc-def{ font-size:11.5px; color:var(--ink-soft); line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.comp-card .cc-arrow{ position:absolute; top:16px; right:16px; color:var(--ink-faint); font-size:14px; }

/* ============================================================
   MATRIX VIEW
   ============================================================ */
.matrix-table-wrap{ overflow-x:auto; }
table.matrix{ min-width:920px; }
table.matrix th{ background:var(--dark); color:var(--cream); border-bottom:none; }
table.matrix th:first-child{ border-radius:8px 0 0 0; }
table.matrix th:last-child{ border-radius:0 8px 0 0; }
table.matrix td{ text-align:center; vertical-align:middle; }
table.matrix td.cell-grade{ text-align:left; font-weight:700; color:var(--dark); }
table.matrix td.cell-joblevel{ text-align:left; }
table.matrix tr:nth-child(even) td.cell-grade, table.matrix tr:nth-child(even) td.cell-joblevel{ background:var(--cream-2); }
.level-chip{
  display:inline-block; min-width:96px; padding:6px 4px; border-radius:7px;
  font-size:11.5px; font-weight:700; color:#fff;
}
.lvl-1{ background:#D9C3A5; color:#5B3F22; }
.lvl-2{ background:#C49A78; color:#fff; }
.lvl-3{ background:#A8724F; color:#fff; }
.lvl-4{ background:#8A5233; color:#fff; }
.lvl-5{ background:#4A2C1A; color:#F5EFE6; }
.lvl-na{ background:var(--band-na); color:var(--ink-faint); font-weight:600; }
/* Full-bleed level cells in the Matrix table (edge-to-edge color fill,
   matching the reference design) - distinct from the small .level-chip
   pill used by the legend below the table. */
table.matrix td.cell-level{ font-weight:700; font-size:13px; border-left:1px solid rgba(255,255,255,.35); }
table.matrix td.cell-level.lvl-1{ background:#E5D2B8; color:#5B3F22; }
table.matrix td.cell-level.lvl-2{ background:#C49A78; color:#fff; }
table.matrix td.cell-level.lvl-3{ background:#A8724F; color:#fff; }
table.matrix td.cell-level.lvl-4{ background:#8A5233; color:#fff; }
table.matrix td.cell-level.lvl-5{ background:#4A2C1A; color:#F5EFE6; }
table.matrix td.cell-level.lvl-na{ background:var(--band-na); color:var(--ink-faint); font-weight:600; }

.matrix-legend{ display:flex; gap:14px; align-items:center; margin-top:16px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-soft); }
.matrix-legend .lg-item{ display:flex; align-items:center; gap:6px; }
.matrix-legend .lg-swatch{ width:14px; height:14px; border-radius:4px; }

/* ============================================================
   ENGINE VIEW
   ============================================================ */
.engine-toolbar{ display:flex; gap:12px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.engine-list{ display:flex; flex-direction:column; gap:10px; }
.engine-item{ background:var(--white); border:1px solid var(--taupe-2); border-radius:12px; overflow:hidden; }
.engine-item-head{ display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer; }
.engine-item-head .ei-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.engine-item-head .ei-tag{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.tag-core{ background:#EFE0CE; color:#7A5228; }
.tag-behavioral{ background:#E7D3BB; color:#6E4B27; }
.tag-leadership{ background:#DCC5A6; color:#4A2C1A; }
.icon-core{ background:#B07A5A; }
.icon-behavioral{ background:#8C5A3C; }
.icon-leadership{ background:#4A2C1A; }
.engine-item-head .ei-title{ font-size:14.5px; font-weight:700; color:var(--dark); }
.engine-item-head .ei-def{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; max-width:640px; }
.engine-item-head .ei-chevron{ margin-left:auto; color:var(--ink-faint); transition:transform .2s ease; flex-shrink:0; }
.engine-item.open .ei-chevron{ transform:rotate(180deg); }
.engine-item-body{ display:none; border-top:1px solid var(--cream-2); padding:18px 20px 20px; background:var(--cream-2); }
.engine-item.open .engine-item-body{ display:block; }

.level-tabs{ display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.level-tab{
  padding:7px 14px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer;
  border:1px solid var(--taupe-2); background:var(--white); color:var(--ink-soft);
}
.level-tab.active{ color:#fff; border-color:transparent; }

.level-panel .lp-meta{ display:flex; gap:18px; margin-bottom:14px; font-size:11.5px; color:var(--ink-soft); }
.level-panel .lp-meta b{ color:var(--dark); }
.indicator-list{ margin:0 0 14px; padding:0; list-style:none; }
.indicator-list li{
  display:flex; gap:10px; padding:8px 0; font-size:12.5px; color:var(--ink); line-height:1.5;
  border-bottom:1px dashed var(--taupe-2);
}
.indicator-list li:last-child{ border-bottom:none; }
.indicator-list li .num{ color:var(--rose); font-weight:700; flex-shrink:0; }
.evidence-box{
  background:var(--white); border:1px solid var(--taupe-2); border-radius:8px; padding:12px 14px;
  font-size:11.5px; color:var(--ink-soft); margin-bottom:10px;
}
.evidence-box b{ color:var(--dark); }
.source-line{ font-size:11px; color:var(--ink-faint); font-style:italic; }

/* ============================================================
   EMPLOYEES VIEW
   ============================================================ */
.emp-toolbar{ display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.emp-toolbar-left{ display:flex; gap:10px; flex-wrap:wrap; }
.avatar{
  width:30px; height:30px; border-radius:50%; background:var(--rose-light); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-right:10px;
}
.name-cell{ display:flex; align-items:center; }
.grade-chip{ font-weight:700; color:var(--dark); background:var(--cream-2); padding:2px 8px; border-radius:6px; font-size:11.5px; }

.drawer-backdrop{ position:fixed; inset:0; background:rgba(58,34,19,.35); z-index:90; opacity:0; pointer-events:none; transition:.2s ease; }
.drawer-backdrop.show{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:-420px; width:420px; height:100vh; background:var(--white);
  box-shadow:var(--shadow-lg); z-index:91; transition:right .25s ease; display:flex; flex-direction:column;
}
.drawer.show{ right:0; }
.drawer-head{ padding:22px 24px; border-bottom:1px solid var(--taupe-2); display:flex; align-items:start; justify-content:space-between; }
.drawer-head h3{ font-family:var(--font-display); font-size:20px; margin:0 0 4px; color:var(--dark); }
.drawer-head .dh-sub{ font-size:12px; color:var(--ink-soft); }
.drawer-close{ background:none; border:none; color:var(--ink-faint); font-size:20px; padding:2px; }
.drawer-body{ flex:1; overflow-y:auto; padding:20px 24px; }
.drawer-score-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--cream-2); }
.drawer-score-row .ds-name{ font-size:12.5px; color:var(--ink); }
.drawer-score-bar{ flex:1; height:6px; background:var(--cream-2); border-radius:4px; margin:0 12px; overflow:hidden; }
.drawer-score-bar > div{ height:100%; border-radius:4px; }

.plan-drawer{
  position:fixed; top:0; right:-680px; width:680px; max-width:92vw; height:100vh; background:var(--cream-2);
  box-shadow:var(--shadow-lg); z-index:95; transition:right .28s ease; display:flex; flex-direction:column;
}
.plan-drawer.show{ right:0; }
html[dir="rtl"] .plan-drawer{ right:auto; left:-680px; }
html[dir="rtl"] .plan-drawer.show{ left:0; }
.plan-drawer-backdrop{ position:fixed; inset:0; background:rgba(58,34,19,.45); z-index:94; opacity:0; pointer-events:none; transition:.2s ease; }
.plan-drawer-backdrop.show{ opacity:1; pointer-events:auto; }
.plan-head{ padding:22px 26px; border-bottom:1px solid var(--taupe-2); background:var(--white); display:flex; align-items:start; justify-content:space-between; gap:12px; flex-shrink:0; }
.plan-head h3{ font-family:var(--font-display); font-size:21px; margin:0 0 4px; color:var(--dark); }
.plan-head .ph-sub{ font-size:12px; color:var(--ink-soft); }
.plan-body{ flex:1; overflow-y:auto; padding:22px 26px 90px; }
.plan-foot{ padding:14px 26px; border-top:1px solid var(--taupe-2); background:var(--white); display:flex; gap:10px; flex-shrink:0; }
.plan-summary-card{ background:var(--white); border:1px solid var(--taupe-2); border-radius:12px; padding:16px 18px; margin-bottom:18px; }
.plan-item{ background:var(--white); border:1px solid var(--taupe-2); border-left:4px solid var(--rose); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
html[dir="rtl"] .plan-item{ border-left:1px solid var(--taupe-2); border-right:4px solid var(--rose); }
.plan-item.critical{ border-left-color:var(--band-critical); }
html[dir="rtl"] .plan-item.critical{ border-right-color:var(--band-critical); }
.plan-item-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.plan-item-title{ font-weight:700; font-size:14px; color:var(--dark); }
.plan-item-tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600; }
.plan-item-row{ font-size:12.5px; color:var(--ink); margin-top:6px; line-height:1.55; }
.plan-item-row b{ color:var(--dark); }
.plan-item ul{ margin:4px 0 0; padding-left:18px; }
html[dir="rtl"] .plan-item ul{ padding-left:0; padding-right:18px; }
.plan-item li{ font-size:12.5px; color:var(--ink); margin-bottom:3px; }
.plan-milestones{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.plan-milestone{ background:var(--cream-2); border:1px solid var(--taupe-2); border-radius:8px; padding:6px 10px; font-size:11px; color:var(--ink-soft); flex:1; min-width:120px; }
.plan-milestone b{ display:block; color:var(--dark); font-size:11.5px; }
.plan-milestone.done{ background:#EAF6EE; border-color:var(--green); }
.plan-milestone-check{ display:flex; align-items:flex-start; gap:6px; cursor:pointer; }
.plan-milestone-check input[type="checkbox"]{ margin-top:3px; flex-shrink:0; cursor:pointer; }
.plan-milestone-check input[type="checkbox"]:disabled{ cursor:default; }

/* ============================================================
   EVALUATION ENGINE
   ============================================================ */
.eval-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:22px; align-items:start; }
.eval-selectors{ display:flex; flex-direction:column; gap:14px; }
.eval-field label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:6px; }
.eval-field select, .eval-field .input{ width:100%; }
.assigned-level-box{
  display:flex; align-items:center; gap:12px; background:var(--cream-2); border:1px solid var(--taupe-2);
  border-radius:10px; padding:12px 16px; margin-top:6px;
}
.assigned-level-box .al-label{ font-size:11px; color:var(--ink-soft); }
.assigned-level-box .al-value{ font-size:14px; font-weight:700; color:var(--dark); }

.rating-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px dashed var(--taupe-2); }
.rating-row:last-child{ border-bottom:none; }
.rating-row .rr-text{ flex:1; font-size:12.5px; color:var(--ink); line-height:1.45; }
.rating-row select{ width:190px; flex-shrink:0; }

.rr-attach-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rr-attach-btn{
  display:inline-flex; align-items:center; gap:6px; background:none; border:1px dashed var(--taupe-2);
  border-radius:8px; padding:4px 10px; font-size:11px; color:var(--ink-soft); cursor:pointer;
}
.rr-attach-btn:hover{ background:var(--cream-2); color:var(--dark); }
.rr-attach-btn:disabled{ opacity:.45; cursor:not-allowed; }
.rr-attach-list{ display:flex; gap:8px; flex-wrap:wrap; }
.rr-attach-chip{ font-size:11px; color:var(--rose); text-decoration:none; }
.rr-attach-chip:hover{ text-decoration:underline; }

.rater-aggregate-info{ font-size:11.5px; color:var(--ink-soft); margin-top:10px; padding-top:10px; border-top:1px solid var(--cream-2); }
.stage-locked-notice{ font-size:11.5px; color:var(--rose); margin-top:10px; background:var(--cream-2); border-radius:8px; padding:8px 10px; }

.result-card{ position:sticky; top:0; }
.result-metric{ display:flex; align-items:baseline; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--cream-2); }
.result-metric:last-child{ border-bottom:none; }
.result-metric .rm-label{ font-size:12px; color:var(--ink-soft); }
.result-metric .rm-value{ font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--dark); }
.result-band{ text-align:center; padding:14px; border-radius:10px; margin-top:14px; color:#fff; }
.result-band .rb-label{ font-size:15px; font-weight:700; }
.result-band .rb-sub{ font-size:11px; opacity:.85; margin-top:2px; }

/* ============================================================
   HEATMAP VIEW
   ============================================================ */
.heatmap-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.heatmap-wrap{ overflow:auto; max-height:560px; border:1px solid var(--taupe-2); border-radius:12px; background:var(--white); }
table.heat{ border-collapse:separate; border-spacing:0; font-size:11.5px; }
table.heat thead th{
  position:sticky; top:0; background:var(--dark); color:var(--cream); z-index:3;
  font-size:10px; padding:10px 6px; white-space:nowrap; border-bottom:none;
  writing-mode: horizontal-tb;
}
table.heat thead th.row-head-col{ left:0; z-index:4; text-align:left; padding-left:14px; min-width:180px; }
table.heat tbody th{
  position:sticky; left:0; background:var(--white); z-index:2; text-align:left;
  padding:8px 14px; font-weight:700; color:var(--dark); border-right:2px solid var(--taupe-2);
  white-space:nowrap; font-size:11.5px;
}
table.heat td{
  width:46px; height:34px; text-align:center; border:1px solid rgba(255,255,255,.6);
  font-weight:700; color:#fff; cursor:default; transition:transform .1s ease;
  font-size:10.5px;
}
table.heat td:hover{ transform:scale(1.12); outline:2px solid var(--dark); position:relative; z-index:5; }
table.heat td.na{ background:var(--band-na) !important; color:var(--ink-faint); font-weight:500; }
table.heat tbody tr:hover th{ background:var(--cream-2); }

.heat-legend{ display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; }
.heat-legend .hl-item{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-soft); }
.heat-legend .hl-swatch{ width:16px; height:16px; border-radius:4px; }

.analytics-row{ display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:20px; margin-top:22px; }
.mini-bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.mini-bar-row .mb-label{ width:82px; font-size:11.5px; color:var(--ink-soft); flex-shrink:0; }
.mini-bar-track{ flex:1; height:10px; background:var(--cream-2); border-radius:6px; overflow:hidden; }
.mini-bar-fill{ height:100%; border-radius:6px; }
.mini-bar-val{ width:42px; text-align:right; font-size:11.5px; font-weight:700; color:var(--dark); flex-shrink:0; }

.donut-wrap{ display:flex; align-items:center; gap:20px; }
.donut{ width:130px; height:130px; border-radius:50%; flex-shrink:0; }
.donut-legend{ display:flex; flex-direction:column; gap:8px; font-size:11.5px; }
.donut-legend .dl-item{ display:flex; align-items:center; gap:8px; }
.donut-legend .dl-swatch{ width:11px; height:11px; border-radius:3px; }
.donut-legend .dl-count{ margin-left:auto; font-weight:700; color:var(--dark); padding-left:14px; }

.gap-list{ display:flex; flex-direction:column; gap:10px; }
.gap-row{ display:flex; align-items:center; gap:12px; padding:9px 12px; background:var(--cream-2); border-radius:8px; }
.gap-row .gr-rank{ font-family:var(--font-display); font-size:16px; color:var(--rose); font-weight:700; width:20px; }
.gap-row .gr-text{ flex:1; }
.gap-row .gr-name{ font-size:12px; font-weight:700; color:var(--dark); }
.gap-row .gr-scope{ font-size:10.5px; color:var(--ink-faint); }
.gap-row .gr-val{ font-family:var(--font-display); font-size:17px; font-weight:700; }

/* ============================================================
   REFERENCES
   ============================================================ */
.ref-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ref-card{ background:var(--white); border:1px solid var(--taupe-2); border-radius:12px; padding:18px 20px; }
.ref-card .rc-head{ display:flex; align-items:start; gap:12px; margin-bottom:10px; }
.ref-card .rc-icon{ width:36px; height:36px; border-radius:9px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--rose); }
.ref-card .rc-name{ font-size:14px; font-weight:700; color:var(--dark); }
.ref-card .rc-type{ font-size:11px; color:var(--ink-faint); margin-top:2px; }
.ref-card .rc-row{ font-size:11.5px; color:var(--ink-soft); margin-top:8px; line-height:1.5; }
.ref-card .rc-row b{ color:var(--dark); font-weight:700; }
.ref-card .rc-link{ font-size:11.5px; word-break:break-all; }
.methodology-note{
  background:var(--cream-2); border:1px dashed var(--taupe); border-radius:10px; padding:16px 18px;
  font-size:12px; color:var(--ink-soft); line-height:1.6; margin-top:18px;
}
.methodology-note b{ color:var(--dark); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px){
  .kpi-grid{ grid-template-columns:repeat(3,1fr); }
  .analytics-row{ grid-template-columns:1fr; }
  .eval-grid{ grid-template-columns:1fr; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .sidebar{ display:none; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   V2 ADDITIONS — RTL support, Guide, 3-stage Evaluation, Logo,
   Language toggle
   ============================================================ */

/* ---------- Real logo ---------- */
.brand-logo-img{ width:34px; height:34px; object-fit:contain; flex-shrink:0; display:block; }
.brand-logo-wrap{ width:46px; height:46px; background:var(--cream); border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:5px; }
.topbar-logo-img{ width:30px; height:30px; object-fit:contain; }

/* ---------- Language toggle ---------- */
.lang-toggle{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:8px; font-size:12.5px; font-weight:700;
  border:1px solid var(--taupe-2); background:var(--white); color:var(--dark);
  cursor:pointer; transition:.15s ease;
}
.lang-toggle:hover{ border-color:var(--rose); background:var(--cream-2); }
.lang-toggle svg{ width:15px; height:15px; color:var(--rose); }

/* ============================================================
   RTL OVERRIDES
   ============================================================ */
/* Safety net: right-align text by default in RTL, with an escape hatch
   (.ltr-force) for content that must stay LTR regardless of direction
   (IDs, codes, dates, embedded English terms). */
html[dir="rtl"] body{ font-family: 'Inter', 'Tajawal', 'Segoe UI', sans-serif; text-align:right; }
html[dir="rtl"] .ltr-force{ direction:ltr; display:inline-block; text-align:left; }

html[dir="rtl"] .sidebar{ border-left:1px solid rgba(245,239,230,.1); border-right:none; }
html[dir="rtl"] .nav-item.active::before{ left:auto; right:-12px; }
html[dir="rtl"] .kpi-value, html[dir="rtl"] .section-heading h2, html[dir="rtl"] .topbar-title h1{ font-family:'Cormorant Garamond','Amiri','Inter',serif; }
html[dir="rtl"] table.matrix td.cell-grade, html[dir="rtl"] table.matrix td.cell-joblevel{ text-align:right; }
html[dir="rtl"] th{ text-align:right; }
html[dir="rtl"] table.heat thead th.row-head-col{ text-align:right; padding-right:14px; }
html[dir="rtl"] table.heat tbody th{ text-align:right; border-right:none; border-left:2px solid var(--taupe-2); }
html[dir="rtl"] .name-cell .avatar{ margin-right:0; margin-left:10px; }
html[dir="rtl"] .nav-item svg, html[dir="rtl"] .btn svg{ margin-left:0; }
html[dir="rtl"] .drawer{ right:auto; left:-420px; }
html[dir="rtl"] .drawer.show{ left:0; right:auto; }
html[dir="rtl"] .comp-card .cc-arrow{ right:auto; left:16px; transform:scaleX(-1); }
html[dir="rtl"] .result-metric, html[dir="rtl"] .drawer-score-row, html[dir="rtl"] .gap-row{ flex-direction:row; }
html[dir="rtl"] .eval-stage-track{ flex-direction:row-reverse; }
html[dir="rtl"] .stage-connector{ transform:scaleX(-1); }

/* Icon-then-label components: mirror so the icon sits on the trailing
   (reading-start) side instead of staying physically on the left. */
html[dir="rtl"] .nav-item, html[dir="rtl"] .btn, html[dir="rtl"] .lang-toggle{ flex-direction:row-reverse; }
html[dir="rtl"] .topbar-actions{ flex-direction:row-reverse; }
html[dir="rtl"] .btn-row, html[dir="rtl"] #navRow{ flex-direction:row-reverse; }
html[dir="rtl"] .sidebar-brand{ flex-direction:row-reverse; }
html[dir="rtl"] .brand-text{ text-align:right; }
html[dir="rtl"] .emp-toolbar, html[dir="rtl"] .heatmap-toolbar, html[dir="rtl"] .eval-filter-toolbar, html[dir="rtl"] .engine-toolbar{ flex-direction:row-reverse; }
html[dir="rtl"] .search{ flex-direction:row-reverse; }
html[dir="rtl"] .search input{ text-align:right; }

/* ============================================================
   COMPETENCY GUIDE
   ============================================================ */
.guide-tabs{ display:flex; gap:8px; margin-bottom:20px; border-bottom:2px solid var(--taupe-2); padding-bottom:0; }
.guide-tab{
  padding:11px 18px; font-size:13px; font-weight:700; color:var(--ink-soft);
  cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px;
  transition:.15s ease;
}
.guide-tab:hover{ color:var(--dark); }
.guide-tab.active{ color:var(--dark); border-bottom-color:var(--rose); }
.guide-panel{ display:none; }
.guide-panel.active{ display:block; }

.guide-pillar-card{ background:var(--white); border:1px solid var(--taupe-2); border-radius:12px; padding:22px 24px; margin-bottom:16px; }
.guide-pillar-card .gp-head{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.guide-pillar-card .gp-icon{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.guide-pillar-card h3{ font-family:var(--font-display); font-size:19px; color:var(--dark); margin:0; }
.guide-pillar-card .gp-count{ margin-left:auto; font-size:11px; color:var(--ink-faint); font-weight:700; text-transform:uppercase; }
.guide-pillar-card p{ font-size:13px; color:var(--ink-soft); line-height:1.65; margin:0; }
.guide-pillar-card .gp-list{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.guide-pillar-card .gp-chip{ font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:999px; background:var(--cream-2); color:var(--dark); border:1px solid var(--taupe-2); }

.proficiency-row{ display:grid; grid-template-columns:220px 1fr; gap:20px; padding:20px 0; border-bottom:1px dashed var(--taupe-2); }
.proficiency-row:last-child{ border-bottom:none; }
.proficiency-row .pr-name{ font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--dark); }
.proficiency-row .pr-stars{ display:flex; gap:3px; margin-top:8px; }
.proficiency-row .pr-stars .star{ width:16px; height:16px; border-radius:50%; background:var(--taupe-2); }
.proficiency-row .pr-stars .star.filled{ background:var(--rose); }
.proficiency-row ul{ margin:0; padding:0; list-style:none; }
.proficiency-row li{ font-size:12.5px; color:var(--ink); padding:5px 0 5px 18px; position:relative; line-height:1.5; }
.proficiency-row li::before{ content:"\2022"; position:absolute; left:0; color:var(--rose); font-weight:700; }
html[dir="rtl"] .proficiency-row li{ padding:5px 18px 5px 0; }
html[dir="rtl"] .proficiency-row li::before{ left:auto; right:0; }

.rubric-scale-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.rubric-scale-card{ background:var(--white); border:1px solid var(--taupe-2); border-radius:10px; padding:16px; text-align:center; }
.rubric-scale-card .rsc-score{ font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--rose); }
.rubric-scale-card .rsc-label{ font-size:12px; font-weight:700; color:var(--dark); margin:6px 0 4px; }
.rubric-scale-card .rsc-desc{ font-size:11px; color:var(--ink-soft); line-height:1.45; }

.rubric-formula-table{ width:100%; border-collapse:collapse; margin-bottom:24px; }
.rubric-formula-table th{ background:var(--dark); color:var(--cream); text-align:left; padding:10px 14px; font-size:11px; }
.rubric-formula-table td{ padding:11px 14px; border-bottom:1px solid var(--cream-2); font-size:12.5px; vertical-align:top; }
.rubric-formula-table code{ background:var(--cream-2); padding:2px 6px; border-radius:4px; font-family:var(--font-mono); font-size:11px; color:var(--dark); }

/* ============================================================
   3-STAGE EVALUATION ENGINE
   ============================================================ */
.eval-stage-track{ display:flex; align-items:center; gap:0; margin-bottom:24px; }
.eval-stage-step{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:10px 16px; border-radius:10px; transition:.15s ease; }
.eval-stage-step:hover{ background:var(--cream-2); }
.eval-stage-step.active{ background:var(--dark); }
.eval-stage-step .es-num{ width:28px; height:28px; border-radius:50%; background:var(--taupe-2); color:var(--dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.eval-stage-step.active .es-num{ background:var(--rose); color:#fff; }
.eval-stage-step.done .es-num{ background:var(--green); color:#fff; }
.eval-stage-step .es-text{ display:flex; flex-direction:column; }
.eval-stage-step .es-title{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.eval-stage-step.active .es-title{ color:#fff; }
.eval-stage-step .es-sub{ font-size:10.5px; color:var(--ink-faint); }
.eval-stage-step.active .es-sub{ color:rgba(245,239,230,.65); }
.stage-connector{ flex:1; height:2px; background:var(--taupe-2); margin:0 4px; }

.eval-compare-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:18px; }
.eval-compare-card{ background:var(--cream-2); border:1px solid var(--taupe-2); border-radius:10px; padding:16px; text-align:center; }
.eval-compare-card .ecc-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; }
.eval-compare-card .ecc-value{ font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--dark); margin:6px 0; }
.eval-compare-card .ecc-band{ font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:999px; display:inline-block; color:#fff; }

.calibration-note{ margin-top:16px; }
.calibration-note label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.calibration-note textarea{
  width:100%; min-height:70px; font-family:inherit; font-size:12.5px; padding:10px 12px;
  border:1px solid var(--taupe-2); border-radius:8px; resize:vertical; color:var(--ink);
}
.readonly-badge{ font-size:10px; font-weight:700; color:var(--ink-faint); background:var(--cream-2); padding:2px 8px; border-radius:999px; margin-left:8px; }

/* Delta indicator for self vs manager comparison */
.delta-pill{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.delta-up{ background:#DCEFE1; color:var(--green-dark); }
.delta-down{ background:#F9DEDB; color:var(--red); }
.delta-flat{ background:var(--cream-2); color:var(--ink-faint); }

/* ============================================================
   HEATMAP GROUPED HEADER (pillar group row + full-name row)
   ============================================================ */
table.heat thead tr.heat-group-row th.heat-group-cell{
  position:sticky; top:0; z-index:3; color:#fff; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:7px 4px; text-align:center;
  border-left:2px solid var(--cream); border-bottom:1px solid rgba(255,255,255,.3);
}
table.heat thead tr.heat-name-row th.heat-name-cell{
  position:sticky; top:26px; z-index:3; background:var(--dark); color:var(--cream);
  font-size:9.5px; font-weight:600; padding:8px 3px; min-width:90px; max-width:90px;
  white-space:normal; line-height:1.25; vertical-align:middle; border-left:1px solid rgba(255,255,255,.15);
}
table.heat thead tr.heat-name-row th.heat-name-cell span{ display:block; word-break:break-word; }
table.heat thead th.row-head-col{ top:0; z-index:4; vertical-align:middle; }
table.heat td{ min-width:90px; }
html[dir="rtl"] table.heat thead tr.heat-group-cell{ border-left:none; border-right:2px solid var(--cream); }
html[dir="rtl"] table.heat thead tr.heat-name-row th.heat-name-cell{ border-left:none; border-right:1px solid rgba(255,255,255,.15); }

/* ============================================================
   EVALUATION ENGINE — filters, period row, indicator notes
   ============================================================ */
.eval-filter-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.eval-period-row{ display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; padding-bottom:18px; border-bottom:1px dashed var(--taupe-2); }
.rating-row{ flex-direction:column; align-items:stretch; gap:8px; }
.rating-row .rr-top{ display:flex; align-items:center; gap:14px; }
.rating-row .rr-top .rr-text{ flex:1; }
.rating-row .rr-top select{ width:190px; flex-shrink:0; }
.rating-row .rr-note{
  width:100%; min-height:44px; font-family:inherit; font-size:11.5px; padding:8px 10px;
  border:1px solid var(--taupe-2); border-radius:7px; resize:vertical; color:var(--ink);
  background:var(--cream-2);
}
.rating-row .rr-note::placeholder{ color:var(--ink-faint); }

/* ---------------- Login screen ---------------- */
.login-screen{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 160% at 0% 0%, #5A3A26 0%, var(--dark) 55%, var(--dark-2) 100%);
}
.login-card{
  background:var(--cream); border-radius:18px; padding:44px 46px; width:440px; max-width:90vw;
  box-shadow:var(--shadow-lg); text-align:center;
}
.login-logo{ width:64px; height:64px; margin:0 auto 18px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; padding:8px; }
.login-logo img{ width:100%; height:100%; object-fit:contain; }
.login-card h1{ font-family:var(--font-display); font-size:24px; color:var(--dark); margin:0 0 6px; }
.login-card p{ font-size:12.5px; color:var(--ink-soft); margin:0 0 26px; }
.login-role-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.login-role-card{
  border:2px solid var(--taupe-2); border-radius:12px; padding:16px 10px; cursor:pointer; transition:.15s ease;
  background:#fff;
}
.login-role-card:hover{ border-color:var(--rose-light); }
.login-role-card.selected{ border-color:var(--rose); background:var(--cream-2); }
.login-role-card svg{ width:26px; height:26px; color:var(--rose); margin-bottom:8px; }
.login-role-card .lr-title{ font-size:12.5px; font-weight:700; color:var(--dark); }
.login-role-card .lr-sub{ font-size:10px; color:var(--ink-faint); margin-top:2px; }
.login-card input[type=text]{ width:100%; margin-bottom:18px; text-align:center; }

/* ---------------- Role-based visibility ---------------- */
.role-hidden{ display:none !important; }

/* ---------------- Settings page ---------------- */
.settings-section{ background:var(--white); border:1px solid var(--taupe-2); border-radius:12px; padding:22px 24px; margin-bottom:18px; }
.settings-section h3{ font-family:var(--font-display); font-size:17px; color:var(--dark); margin:0 0 4px; }
.settings-section .ss-desc{ font-size:12px; color:var(--ink-soft); margin-bottom:16px; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--cream-2); gap:16px; }
.settings-row:last-child{ border-bottom:none; }
.settings-row .sr-label{ font-size:12.5px; font-weight:600; color:var(--dark); }
.settings-row .sr-sub{ font-size:11px; color:var(--ink-faint); margin-top:2px; }
.data-source-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; }
.data-source-badge.sample{ background:#FDEBD0; color:#8A5A00; }
.data-source-badge.uploaded{ background:#DCEFE1; color:var(--green-dark); }
.mock-user-table td, .mock-user-table th{ font-size:12px; }
.role-badge{ font-size:10px; font-weight:700; padding:3px 10px; border-radius:999px; }
.role-badge.admin{ background:var(--dark); color:#fff; }
.role-badge.manager{ background:var(--rose); color:#fff; }
.role-badge.employee{ background:var(--taupe-2); color:var(--dark); }

html[dir="rtl"] .login-card{ direction:rtl; }