/* ===========================================================================
   FPV COURSE HUB — shared design system (Droneden brand)
   Register: product/tool. Restrained green accent on neutral canvas. RTL. L+D.
   Green scale --g50…--g800 derived from Droneden brand green #45982f.
   Content tabs MUST reuse these classes; do not invent parallel styles.
   =========================================================================== */
:root{
  --bg:#ffffff; --surface:#f6f8f5; --surface2:#fbfcfb; --panel:#ffffff;
  --ink:#1c231e; --ink2:#3d4640; --muted:#6c746d; --faint:#9aa29a;
  --border:#e7ebe6; --border2:#eef1ed; --hover:rgba(28,35,30,0.045); --hover2:#f4f6f3;
  --g50:#f0f7ec; --g100:#dcecd2; --g200:#bfdcb0; --g300:#93c579; --g400:#68ad4b;
  --g500:#45982f; --g600:#3a8127; --g700:#2f6a20; --g800:#264f19;
  --accent:var(--g600); --focus:var(--g500); --sel:var(--g50);
  --blue:#1e7ab9; --cyan:#caf1f8; --danger:#d64545;
  --pill-gray-bg:#ecefec; --pill-gray-tx:#4a524c;
  --pill-blue-bg:#dbe8f2; --pill-blue-tx:#1b4f74;
  --pill-purple-bg:#e8e0f0; --pill-purple-tx:#492c66;
  --pill-orange-bg:#f5e1cd; --pill-orange-tx:#7a3f16;
  --pill-yellow-bg:#f3e7c9; --pill-yellow-tx:#6b5015;
  --pill-green-bg:#d8eccf; --pill-green-tx:#2c5720;
  --pill-red-bg:#f6dcda; --pill-red-tx:#7a2620;
  --r-sm:6px; --r:8px; --r-lg:12px;
  --shadow-sm:0 1px 2px rgba(22,33,22,.06);
  --shadow-md:0 6px 22px rgba(22,33,22,.12),0 1px 2px rgba(22,33,22,.05);
  --ring:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent);
  --ease:cubic-bezier(.22,1,.36,1);
  --z-drop:50; --z-sticky:20;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141613; --surface:#1b1f18; --surface2:#181b15; --panel:#1a1e17;
    --ink:#e7ebe3; --ink2:#c3c9bd; --muted:#98a08f; --faint:#6d7563;
    --border:#2a2f25; --border2:#242820; --hover:rgba(255,255,255,0.05); --hover2:#20241c;
    --g50:#1a2b13; --g100:#22381a; --g200:#2f4d24; --g300:#4a7c37; --g400:#5cb03f;
    --g500:#68bd49; --g600:#7cc95f; --g700:#9ad683; --g800:#bfe6ad;
    --accent:var(--g500); --focus:var(--g500); --sel:rgba(92,176,63,.16);
    --blue:#6bb2e0; --cyan:#2a6a86; --danger:#e06b6b;
    --pill-gray-bg:#2c312a; --pill-gray-tx:#c3c9bd;
    --pill-blue-bg:#1d3648; --pill-blue-tx:#9cc6e4;
    --pill-purple-bg:#332745; --pill-purple-tx:#c7b1de;
    --pill-orange-bg:#43301d; --pill-orange-tx:#e0af86;
    --pill-yellow-bg:#403819; --pill-yellow-tx:#ddc985;
    --pill-green-bg:#22401b; --pill-green-tx:#9ad683;
    --pill-red-bg:#3f221f; --pill-red-tx:#e6a6a0;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 8px 26px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  }
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"Assistant","Heebo","Rubik",-apple-system,"SF Hebrew","Arial Hebrew",system-ui,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:var(--accent); text-decoration:none; }
.num{ direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.mono{ font-family:"SF Mono",ui-monospace,Menlo,monospace; }

/* ---------- shell ---------- */
header.hub{ display:flex; align-items:center; gap:16px; padding:0 24px; height:56px;
  border-bottom:1px solid var(--border); position:sticky; top:0;
  background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(1.4) blur(8px); z-index:var(--z-sticky); }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{ color:var(--g500); display:flex; }
.brand .wordmark{ font-weight:800; letter-spacing:.06em; font-size:14px; }
.brand .bar{ width:1px; height:18px; background:var(--border); margin:0 2px; }
.brand .ctx{ color:var(--muted); font-size:12.5px; font-weight:500; }
nav.tabs{ display:flex; gap:1px; margin-inline-start:auto; flex-wrap:wrap; }
nav.tabs .t{ padding:6px 11px; border-radius:var(--r-sm); color:var(--muted); font-size:13px; user-select:none;
  cursor:pointer; text-decoration:none; transition:background .16s var(--ease),color .16s var(--ease); }
nav.tabs .t:hover{ background:var(--hover); color:var(--ink2); }
nav.tabs .t.active{ color:var(--g700); background:var(--g50); font-weight:650; }
nav.tabs .t.soon{ opacity:.5; cursor:default; font-size:12.5px; }
nav.tabs .t.soon:hover{ background:transparent; color:var(--muted); }
nav.tabs .t.soon::after{ content:"בקרוב"; font-size:9px; color:var(--faint); margin-inline-start:5px;
  border:1px solid var(--border); border-radius:20px; padding:1px 5px; }

/* ---------- page frame ---------- */
main{ max-width:1220px; margin:0 auto; padding:30px 24px 96px; }
.page-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:3px; flex-wrap:wrap; }
h1.page{ font-size:28px; font-weight:800; letter-spacing:-.02em; margin:0; }
.page-head .tag{ font-size:12px; color:var(--g700); background:var(--g50); border-radius:20px; padding:3px 10px; font-weight:600; }
.sub{ color:var(--muted); margin:0 0 24px; font-size:13.5px; max-width:78ch; line-height:1.6; }
.sub b{ color:var(--ink2); }

/* ---------- generic content primitives (content tabs use these) ---------- */
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm); }
.panel + .panel{ margin-top:16px; }
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.subhead{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 12px; }
h2.sec{ font-size:19px; font-weight:750; letter-spacing:-.01em; margin:30px 0 14px; }
h3.sec{ font-size:15px; font-weight:700; margin:18px 0 8px; }
.lede{ font-size:14.5px; color:var(--ink2); line-height:1.6; }
.muted{ color:var(--muted); } .faint{ color:var(--faint); }

/* KPI strip (overview) — inline figures, not a card grid */
.kpi-strip{ display:flex; align-items:stretch; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 20px; }
.kpi{ display:flex; flex-direction:column; gap:3px; }
.kpi .kl{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.kpi .kv{ font-size:22px; font-weight:750; letter-spacing:-.01em; }
.kpi .kh{ font-size:11px; color:var(--faint); }
.kpi-sep{ width:1px; align-self:stretch; background:var(--border); }

/* callout — the single green focal element pattern (deadline etc.) */
.callout{ display:flex; flex-direction:column; gap:2px; justify-content:center; padding:12px 16px;
  background:var(--g50); border:1px solid color-mix(in srgb,var(--g400) 30%,transparent); border-radius:var(--r); }
.callout .cv{ font-size:20px; font-weight:800; color:var(--g700); letter-spacing:-.01em; }
.callout .cl{ font-size:11px; color:var(--g700); opacity:.85; }
.callout.warn{ background:var(--pill-yellow-bg); border-color:transparent; }
.callout.warn .cv,.callout.warn .cl{ color:var(--pill-yellow-tx); }

/* badges + pills (shared) */
.badge{ display:inline-flex; align-items:center; border-radius:5px; padding:2px 9px; font-size:12px; line-height:1.55; font-weight:600; margin:0 0 0 4px; white-space:nowrap; }
.badge.core{ background:var(--g50); color:var(--g700); }        /* [ליבה] */
.badge.flex{ background:var(--pill-blue-bg); color:var(--pill-blue-tx); }   /* [גמיש] */
.badge.ext{ background:var(--pill-gray-bg); color:var(--pill-gray-tx); }    /* [הרחבה] */
.badge.star{ background:var(--pill-yellow-bg); color:var(--pill-yellow-tx); }
.pill{ display:inline-flex; align-items:center; border-radius:5px; padding:2px 9px; font-size:12px; line-height:1.55; margin:1px 0 1px 4px; white-space:nowrap; font-weight:500; }
.pill.gray{ background:var(--pill-gray-bg); color:var(--pill-gray-tx); }
.pill.blue{ background:var(--pill-blue-bg); color:var(--pill-blue-tx); }
.pill.purple{ background:var(--pill-purple-bg); color:var(--pill-purple-tx); }
.pill.orange{ background:var(--pill-orange-bg); color:var(--pill-orange-tx); }
.pill.yellow{ background:var(--pill-yellow-bg); color:var(--pill-yellow-tx); }
.pill.green{ background:var(--pill-green-bg); color:var(--pill-green-tx); }
.pill.red{ background:var(--pill-red-bg); color:var(--pill-red-tx); }

/* checklist / rule-list (ops, requirements) */
.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--border2); font-size:13.5px; }
.checklist li:last-child{ border-bottom:0; }
.checklist .ck{ color:var(--g500); flex:none; margin-top:1px; font-weight:700; }
.rule-list{ counter-reset:rn; list-style:none; margin:0; padding:0; }
.rule-list li{ position:relative; padding:11px 0 11px 0; border-bottom:1px solid var(--border2); font-size:13.5px; display:flex; gap:12px; }
.rule-list li:last-child{ border-bottom:0; }
.rule-list .rn{ counter-increment:rn; }
.rule-list .rn::before{ content:counter(rn); display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  background:var(--g50); color:var(--g700); border-radius:6px; font-size:12px; font-weight:700; flex:none; }

/* timeline (schedule / critical path) */
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ position:relative; padding:0 20px 20px 0; border-inline-start:2px solid var(--border); margin-inline-start:6px; }
.timeline li::before{ content:""; position:absolute; inset-inline-start:-7px; top:2px; width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--g500); }
.timeline li:last-child{ border-inline-start-color:transparent; padding-bottom:0; }
.timeline .tt{ font-weight:650; font-size:14px; }
.timeline .td{ font-size:12.5px; color:var(--muted); }

/* ---------- database component (data tabs: equipment/students/instructors) ---------- */
.db{ border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow-sm); overflow:visible; }
.db-head{ display:flex; align-items:center; gap:4px; padding:9px 14px 0; border-bottom:1px solid var(--border2); flex-wrap:wrap; }
.view{ padding:8px 12px; font-size:13.5px; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer;
  display:flex; align-items:center; gap:7px; margin-bottom:-1px; border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:color .16s var(--ease),background .16s var(--ease); }
.view:hover{ color:var(--ink2); background:var(--hover); }
.view.active{ color:var(--ink); border-bottom-color:var(--g500); font-weight:650; }
.view .ico{ color:var(--faint); font-size:12px; }
.view.active .ico{ color:var(--g500); }
.db-tools{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; padding-bottom:7px; flex-wrap:wrap; }
.search{ display:flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:var(--r-sm); padding:5px 10px;
  background:var(--bg); transition:box-shadow .16s var(--ease),border-color .16s var(--ease); }
.search:focus-within{ border-color:var(--g400); box-shadow:var(--ring); }
.search .ic{ color:var(--faint); font-size:13px; }
.search input{ border:0; outline:0; background:transparent; color:var(--ink); font-size:13px; width:140px; font-family:inherit; }
.rollup{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.rollup b{ color:var(--ink); font-weight:650; }
.btn{ font-size:12.5px; color:var(--muted); border:1px solid var(--border); background:var(--bg); border-radius:var(--r-sm);
  padding:5px 10px; cursor:pointer; font-family:inherit; transition:background .16s var(--ease),color .16s var(--ease); }
.btn:hover{ background:var(--hover); color:var(--ink2); }
.tbl-wrap{ overflow-x:auto; }
table.grid-tbl{ width:100%; border-collapse:collapse; }
table.grid-tbl thead th{ text-align:right; font-size:11.5px; font-weight:600; color:var(--muted); padding:9px 14px;
  border-bottom:1px solid var(--border2); white-space:nowrap; cursor:pointer; user-select:none; transition:color .16s var(--ease),background .16s var(--ease); }
table.grid-tbl thead th:hover{ background:var(--hover); color:var(--ink2); }
table.grid-tbl thead th.na{ cursor:default; } table.grid-tbl thead th.na:hover{ background:transparent; color:var(--muted); }
table.grid-tbl thead th .pico{ opacity:.5; margin-inline-end:6px; font-size:10.5px; font-weight:700; }
table.grid-tbl thead th .arr{ font-size:9px; margin-inline-start:5px; color:var(--g500); }
table.grid-tbl tbody td{ padding:9px 14px; border-bottom:1px solid var(--border2); vertical-align:middle; font-size:13.5px; cursor:text; transition:background .12s var(--ease); }
table.grid-tbl tbody td[data-type="status"],table.grid-tbl tbody td[data-type="select"]{ cursor:pointer; }
table.grid-tbl tbody td[data-type="check"]{ cursor:pointer; text-align:center; }
table.grid-tbl tbody tr{ transition:background .12s var(--ease); }
table.grid-tbl tbody tr:hover{ background:var(--hover2); }
table.grid-tbl td.title{ font-weight:650; color:var(--ink); }
/* editable-cell affordance — hovering any editable cell frames it so it's obvious you can edit, before clicking */
table.grid-tbl tbody td[data-k]{ position:relative; }
table.grid-tbl tbody td[data-k]:hover{ background:var(--sel); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--g500) 40%,transparent); border-radius:5px; }
table.grid-tbl tbody td[data-type="select"]:hover::after,
table.grid-tbl tbody td[data-type="status"]:hover::after{ content:"▾"; position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--g600); pointer-events:none; }
table.grid-tbl tbody td[data-type="check"]:hover{ box-shadow:none; }
table.grid-tbl tbody td[data-type="check"]:hover .chk{ border-color:var(--g500); }
.pill.status .d{ width:6px; height:6px; border-radius:50%; margin-inline-end:6px; }
.d.gray{ background:#9aa29a;} .d.yellow{ background:#c69a24;} .d.blue{ background:var(--blue);} .d.green{ background:var(--g500);} .d.red{ background:var(--danger);} .d.purple{background:#8a5fb0;} .d.orange{background:#c07a2a;}
.ghost{ color:var(--faint); }
.linkcell{ display:inline-flex; align-items:center; gap:6px; }
.linkcell .go{ font-size:12px; color:var(--blue); }
.chk{ display:inline-flex; width:17px; height:17px; border:1.5px solid var(--border); border-radius:5px; align-items:center; justify-content:center; color:transparent; font-size:11px; }
.chk.on{ background:var(--g500); border-color:var(--g500); color:#fff; }
.cellinput{ width:100%; min-width:70px; border:0; outline:0; background:var(--sel);
  box-shadow:0 0 0 2px var(--focus) inset; border-radius:var(--r-sm); padding:4px 7px; font:inherit; color:var(--ink); }
.rowdel{ opacity:0; cursor:pointer; color:var(--faint); font-size:16px; text-align:center; width:26px; transition:opacity .12s var(--ease),color .12s var(--ease); }
tr:hover .rowdel{ opacity:1; } .rowdel:hover{ color:var(--danger); }
table.grid-tbl tfoot td{ padding:10px 14px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--border); }
table.grid-tbl tfoot td b{ color:var(--ink); font-weight:650; }
.newrow td{ color:var(--muted); font-size:13px; padding:10px 14px; cursor:pointer; transition:background .14s var(--ease),color .14s var(--ease); }
.newrow td .plus{ color:var(--g500); font-weight:700; margin-inline-end:4px; }
.newrow:hover td{ background:var(--g50); color:var(--g700); }
.note{ font-size:12px; color:var(--muted); margin-top:14px; line-height:1.7; }
.note b{ color:var(--ink2); }

/* dropdown menu (shared, escapes overflow via body-append + fixed coords) */
.menu{ position:absolute; z-index:var(--z-drop); background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow-md); padding:6px; min-width:158px; animation:pop .14s var(--ease); transform-origin:top right; }
@keyframes pop{ from{ opacity:0; transform:translateY(-5px) scale(.98);} to{ opacity:1; transform:none;} }
.menu .opt{ display:flex; align-items:center; padding:6px 8px; border-radius:var(--r-sm); cursor:pointer; font-size:13px; transition:background .12s var(--ease); }
.menu .opt:hover{ background:var(--hover); }

/* empty-state for stub/other tabs */
.empty{ text-align:center; padding:70px 20px; color:var(--muted); }
.empty .big{ font-size:34px; margin-bottom:10px; }
.empty h2{ font-size:18px; color:var(--ink); margin:0 0 6px; font-weight:700; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }
@media (max-width:640px){ main{ padding:22px 14px 80px; } header.hub{ padding:0 14px; } .brand .ctx{ display:none; } nav.tabs{ gap:0; } }