:root{
  --bg:#f3f6f7; --panel:#ffffff; --text:#182226; --muted:#66787d;
  --border:#e2e8ea; --accent:#00707f; --accent2:#00949e; --accent-dark:#005a66; --accent-bg:#e2f2f4;
  --brand-red:#da2127;
  --good:#1a9c5e; --warn:#c2790a; --bad:#d3383e;
  --row-hover:#eaf5f6; --stripe:#f8fafb;
  --shadow: 0 1px 2px rgba(16,32,35,.05), 0 2px 10px rgba(16,32,35,.05);
  --shadow-lg: 0 12px 32px rgba(16,32,35,.18);
  --shadow-accent: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
  --radius: 16px;
  --radius-sm: 10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1517; --panel:#1a2326; --text:#e7eef0; --muted:#93a3a7;
    --border:#2b373b; --accent:#37b6c4; --accent2:#57c8d4; --accent-dark:#57c8d4; --accent-bg:#193338;
    --brand-red:#e8666b;
    --good:#4bd190; --warn:#f0ac4c; --bad:#f2777c;
    --row-hover:#1e2c2f; --stripe:#161f21;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 12px rgba(0,0,0,.24);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
    --shadow-accent: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
  }
}
:root[data-theme="dark"]{
  --bg:#0f1517; --panel:#1a2326; --text:#e7eef0; --muted:#93a3a7;
  --border:#2b373b; --accent:#37b6c4; --accent2:#57c8d4; --accent-dark:#57c8d4; --accent-bg:#193338;
  --brand-red:#e8666b;
  --good:#4bd190; --warn:#f0ac4c; --bad:#f2777c;
  --row-hover:#1e2c2f; --stripe:#161f21;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 12px rgba(0,0,0,.24);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  --shadow-accent: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="light"]{
  --bg:#f3f6f7; --panel:#ffffff; --text:#182226; --muted:#66787d;
  --border:#e2e8ea; --accent:#00707f; --accent2:#00949e; --accent-dark:#005a66; --accent-bg:#e2f2f4;
  --brand-red:#da2127;
  --good:#1a9c5e; --warn:#c2790a; --bad:#d3383e;
  --row-hover:#eaf5f6; --stripe:#f8fafb;
  --shadow: 0 1px 2px rgba(16,32,35,.05), 0 2px 10px rgba(16,32,35,.05);
  --shadow-lg: 0 12px 32px rgba(16,32,35,.18);
  --shadow-accent: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
*{box-sizing:border-box;}
html{
  background:
    radial-gradient(900px 420px at 100% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(700px 380px at -5% 0%, color-mix(in srgb, var(--brand-red) 6%, transparent), transparent 55%),
    var(--bg);
}
body{
  background:transparent; color:var(--text); direction:rtl; text-align:right;
  font-family:-apple-system,"Segoe UI",Arial,sans-serif; margin:0; padding:52px 28px 22px;
  font-size:14px; line-height:1.45;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

.brand-strip{
  text-align:center; font-size:11.5px; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;
}
.page-header{display:flex; align-items:center; gap:16px; margin-bottom:2px;}
.page-header-title{flex:1; min-width:0;}
.logo-badge{
  height:48px; width:auto; padding:6px 14px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow); flex-shrink:0;
  transition:transform .15s ease, box-shadow .15s ease;
}
.logo-badge:hover{transform:translateY(-1px); box-shadow:var(--shadow-lg);}
@media (max-width:700px){ .logo-badge{height:32px; padding:4px 8px;} }

h1{font-size:22px; margin:0 0 3px 0; font-weight:800; letter-spacing:-.015em;}
.sub{color:var(--muted); font-size:13px; margin-bottom:18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--good); display:inline-block; animation:pulse 2s infinite; box-shadow:0 0 0 4px color-mix(in srgb, var(--good) 18%, transparent);}
@keyframes pulse{0%{opacity:1;}50%{opacity:.35;}100%{opacity:1;}}

.stats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.stat{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:11px 18px; min-width:108px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.stat::before{content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--accent), var(--accent2));}
.stat:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.stat .num{font-size:20px; font-weight:800; letter-spacing:-.02em;}
.stat .lbl{font-size:11px; color:var(--muted); margin-top:2px;}

.toolbar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:12px;
  background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px;
  box-shadow:var(--shadow); position:relative; z-index:5;}
.toolbar input[type=text]{flex:1; min-width:160px; padding:9px 13px; border:1px solid var(--border);
  border-radius:999px; background:var(--bg); color:var(--text); font-size:13px; transition:border-color .12s, box-shadow .12s;}
.toolbar input[type=text]:focus, select:focus, input[type=date]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg);}

select{padding:9px 13px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--text); font-size:13px; cursor:pointer; transition:border-color .12s;}
select:hover{border-color:var(--accent);}
input[type=date]{padding:8px 11px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--text); font-size:13px;}

button{font-family:inherit;}
.btn-icon{vertical-align:-2px; margin-inline-end:6px;}
button.refresh{padding:9px 18px; border:none; border-radius:999px; color:#fff; font-size:13px; font-weight:700; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:var(--shadow-accent);
  transition:transform .1s ease, box-shadow .15s ease, filter .12s;}
button.refresh:hover{filter:brightness(1.08); transform:translateY(-1px);}
button.refresh:active{transform:scale(.97);}
button.refresh:disabled{opacity:.5; cursor:default; transform:none; box-shadow:none;}
button.preset{padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; transition:border-color .12s, color .12s, background .12s;}
button.preset:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-bg);}

.msel{position:relative; display:inline-block;}
.msel-btn{font-family:inherit; padding:9px 13px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--text); font-size:13px; cursor:pointer; transition:border-color .12s, color .12s, background .12s; white-space:nowrap;}
.msel-btn:hover{border-color:var(--accent);}
.msel-btn.active{border-color:var(--accent); color:var(--accent); background:var(--accent-bg); font-weight:600;}
.msel-panel{display:none; position:absolute; top:calc(100% + 6px); inset-inline-start:0; z-index:40; min-width:190px; max-height:280px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:6px;}
.msel-panel.open{display:block;}
.msel-opt{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap; transition:background .1s;}
.msel-opt:hover{background:var(--row-hover);}
.msel-opt input{cursor:pointer;}
.msel-empty{padding:10px; color:var(--muted); font-size:12px; text-align:center; white-space:nowrap;}

.reorder-list{display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px; margin-bottom:4px; background:var(--bg);}
.reorder-item{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; background:var(--panel);}
.reorder-item.dragging{opacity:.5; box-shadow:var(--shadow-lg);}
.reorder-handle{cursor:grab; color:var(--muted); font-size:15px; user-select:none; line-height:1;}
.reorder-handle:active{cursor:grabbing;}
.reorder-label{display:flex; align-items:center; gap:8px; font-size:13px; flex:1; cursor:pointer; user-select:none;}

.reason-badge{border:none; cursor:pointer; font:inherit; margin-inline-end:4px; transition:filter .1s;}
.reason-badge:hover{filter:brightness(0.9);}

.kpi-cell{display:inline-flex; align-items:center; gap:4px;}
.kpi-override-mark{color:var(--accent); font-size:12px; cursor:default;}
.kpi-edit-btn{border:1px solid var(--border); background:var(--panel); color:var(--muted); border-radius:8px;
  width:22px; height:22px; line-height:1; font-size:12px; cursor:pointer; padding:0; transition:border-color .12s, color .12s, background .12s;}
.kpi-edit-btn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-bg);}

.modal-overlay{display:none; position:fixed; inset:0; background:rgba(10,20,22,.55); backdrop-filter:blur(3px); z-index:50; align-items:center; justify-content:center;}
.modal-box{background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:22px; width:380px; max-width:90vw; box-shadow:var(--shadow-lg);
  animation:popIn .16s cubic-bezier(.2,.8,.3,1);}
.modal-box.wide{width:480px;}
@keyframes popIn{from{opacity:0; transform:scale(.96) translateY(6px);} to{opacity:1; transform:none;}}
.modal-box h3{margin:0 0 4px 0; font-size:16px; font-weight:800;}
.modal-box .auto-line{color:var(--muted); font-size:12px; margin-bottom:14px; line-height:1.5;}
.modal-box label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin:12px 0 5px;}
.modal-box select, .modal-box textarea, .modal-box input[type=text]{width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font-size:13px; font-family:inherit;}
.modal-box select:focus, .modal-box textarea:focus, .modal-box input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg);}
.modal-box textarea{resize:vertical; min-height:52px;}
.modal-actions{display:flex; gap:8px; margin-top:18px; justify-content:flex-end;}
.modal-actions button{padding:9px 18px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .12s, transform .06s, filter .12s;}
.modal-actions button:active{transform:scale(.97);}
.modal-actions .btn-save{border:none; background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; box-shadow:var(--shadow-accent);}
.modal-actions .btn-save:hover{filter:brightness(1.08);}
.modal-actions .btn-clear{border:1px solid var(--bad); background:transparent; color:var(--bad);}
.modal-actions .btn-clear:hover{background:color-mix(in srgb, var(--bad) 10%, transparent);}
.modal-actions .btn-cancel{border:1px solid var(--border); background:transparent; color:var(--text);}
.modal-actions .btn-cancel:hover{background:var(--stripe);}

label.chk{display:flex; align-items:center; gap:5px; font-size:13px; color:var(--muted); white-space:nowrap;}
.count-badge{color:var(--muted); font-size:12px; margin-inline-start:auto; white-space:nowrap; font-weight:600;}

.wrap-panel{overflow:auto; max-height:70vh; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow);}
table{border-collapse:collapse; width:100%; font-size:12.5px;}
thead th{position:sticky; top:0; background:color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  padding:10px 12px; text-align:right; color:var(--muted); font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.04em; cursor:pointer; white-space:nowrap; transition:color .12s;}
thead th:hover{color:var(--accent);}
tbody tr.trip-row{cursor:pointer; border-bottom:1px solid var(--border); transition:background .12s;}
tbody tr.trip-row:nth-child(4n+1){background:var(--stripe);}
tbody tr.trip-row:hover{background:var(--row-hover);}
tbody tr.trip-row.open{background:var(--accent-bg);}
td{padding:8px 12px; white-space:nowrap;}
.mono{font-variant-numeric:tabular-nums;}
.fallback-mark{color:var(--warn); font-weight:700; cursor:help; margin-inline-start:2px;}
tbody tr.trip-row.kpi-chain-row{background:color-mix(in srgb, var(--warn) 10%, transparent);}
tbody tr.trip-row.kpi-chain-row:hover{background:color-mix(in srgb, var(--warn) 18%, transparent);}
.tag{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.01em;}
.tag.good{background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good);}
.tag.warn{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn);}
.tag.bad{background:color-mix(in srgb, var(--bad) 16%, transparent); color:var(--bad);}
.tag.neutral{background:color-mix(in srgb, var(--muted) 16%, transparent); color:var(--muted);}
.caret{display:inline-block; transition:transform .15s; color:var(--muted); margin-inline-end:4px;}
tr.open .caret{transform:rotate(90deg);}

.details-row td{padding:0; background:var(--panel);}
.details-wrap{padding:14px 14px 20px 14px; border-bottom:1px solid var(--border); background:linear-gradient(var(--stripe), var(--panel) 44px);
  animation:fadeIn .15s ease;}
.details-wrap .meta{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:10px; font-size:12px; color:var(--muted);}
.details-wrap .meta b{color:var(--text);}
table.stops{width:100%; background:var(--bg); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow);}
table.stops th{position:static; background:var(--bg); font-size:10.5px; padding:7px 9px; backdrop-filter:none;}
table.stops td{padding:7px 9px; font-size:11.5px;}
table.stops tr:nth-child(even){background:color-mix(in srgb, var(--muted) 6%, transparent);}

.empty{padding:52px; text-align:center; color:var(--muted); font-size:13px;}
.footer-note{color:var(--muted); font-size:11px; margin-top:16px; line-height:1.6;}
.top-right-note{
  position:fixed; top:16px; right:16px; z-index:10;
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; color:var(--muted);
}
.user-badge{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted);
  background:var(--panel); border:1px solid var(--border); border-radius:999px;
  padding:5px 12px; box-shadow:var(--shadow);
}
.user-badge b{color:var(--text);}
.user-badge .role-label{color:var(--accent); font-size:11px; background:var(--accent-bg); border-radius:999px; padding:2px 8px;}
.user-badge a{color:var(--accent); text-decoration:none; font-weight:600;}
.user-badge a:hover{text-decoration:underline;}

/* Per-screen/per-action UI gating - server-side permission checks (auth.py/roles.py) are the
   real enforcement; elements carrying data-perm="permKey" get display:none set directly by
   loadCurrentUser()/applyPermGating() in kpi-common.js when the session's role lacks that
   permission, so no CSS rule is needed here. */