:root{
  --bg:#F5F7F4;
  --surface:#FFFFFF;
  --surface-alt:#EEF2ED;
  --border:#DCE3DE;
  --text:#212B27;
  --text-muted:#5B675F;
  --accent:#1F6F5C;
  --accent-contrast:#FFFFFF;
  --accent-soft:#E4F0EC;
  --money:#A3690E;
  --money-strong:#6B4809;
  --money-soft:#F6E9CE;
  --status-bg:#E6F0E3;
  --status-border:#BFDAB9;
  --status-text:#2F5C2D;
  --danger:#B23A34;
  --danger-soft:#F7E3E1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131917; --surface:#1B231F; --surface-alt:#212B27; --border:#2E3A34;
    --text:#E7ECE8; --text-muted:#9AA79F; --accent:#4FBFA0; --accent-contrast:#0B1512;
    --accent-soft:#1C3831; --money:#E3A94A; --money-strong:#F0C878; --money-soft:#3A2C12;
    --status-bg:#1F3320; --status-border:#35502F; --status-text:#9CCB96;
    --danger:#E2685F; --danger-soft:#3A211F;
  }
}
:root[data-theme="dark"]{
  --bg:#131917; --surface:#1B231F; --surface-alt:#212B27; --border:#2E3A34;
  --text:#E7ECE8; --text-muted:#9AA79F; --accent:#4FBFA0; --accent-contrast:#0B1512;
  --accent-soft:#1C3831; --money:#E3A94A; --money-strong:#F0C878; --money-soft:#3A2C12;
  --status-bg:#1F3320; --status-border:#35502F; --status-text:#9CCB96;
  --danger:#E2685F; --danger-soft:#3A211F;
}

*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

html,body{margin:0; padding:0; background:var(--bg); color:var(--text);}
body{
  font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  direction:rtl;
}
.ltr{direction:ltr; font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;}
.num{font-family:"IBM Plex Mono","IBM Plex Sans",monospace; font-variant-numeric:tabular-nums;}
[hidden]{display:none !important;}
button, input, select{font-family:inherit;}
input, select, textarea{color:var(--text);}
input::placeholder, textarea::placeholder{color:var(--text-muted); opacity:1;}
button:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.shell{max-width:1440px; margin:0 auto; padding:20px 24px 60px;}

/* ---- login ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px 26px;}
.login-card h1{font-size:19px; margin:0 0 4px;}
.login-card p{font-size:13px; color:var(--text-muted); margin:0 0 20px;}
.login-card .field{margin-bottom:14px;}
.login-card label{display:block; font-size:12.5px; font-weight:600; color:var(--text-muted); margin-bottom:6px;}
.login-card input{width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:14px;}
.login-error{color:var(--danger); font-size:12.5px; margin-top:10px; min-height:16px;}

/* ---- topbar ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border);}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{width:34px; height:34px; border-radius:8px; background:var(--accent); color:var(--accent-contrast); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex:none;}
.brand-text h1{font-size:17px; font-weight:700; margin:0; line-height:1.2;}
.brand-text p{font-size:12px; color:var(--text-muted); margin:2px 0 0;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.sync-pill{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); background:var(--surface-alt); border:1px solid var(--border); border-radius:999px; padding:5px 12px;}
.sync-dot{width:7px; height:7px; border-radius:50%; background:var(--accent);}
.sync-dot.offline{background:var(--danger);}
.userchip{font-size:12.5px; color:var(--text-muted);}
.logout-btn{font-size:12.5px; font-weight:600; color:var(--text-muted); background:none; border:1px solid var(--border); border-radius:7px; padding:6px 12px; cursor:pointer;}
.logout-btn:hover{border-color:var(--accent); color:var(--accent);}

.screennav{display:flex; gap:8px; margin-bottom:20px;}
.screennav button{font-size:14px; font-weight:600; cursor:pointer; padding:9px 18px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted);}
.screennav button[aria-pressed="true"]{background:var(--accent); color:var(--accent-contrast); border-color:var(--accent);}
.screennav button:hover:not([aria-pressed="true"]){color:var(--text); border-color:var(--accent);}

.panel{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin-bottom:16px;}
.panel h2{font-size:14px; font-weight:700; margin:0 0 14px;}
.panel h2 .hint{font-weight:500; color:var(--text-muted); font-size:12px; margin-inline-start:8px;}

.chiprow{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.chip{font-size:13px; font-weight:600; padding:7px 14px; border-radius:8px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text-muted); cursor:pointer;}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}

.formgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.field{display:flex; flex-direction:column; gap:6px; position:relative;}
.field label{font-size:12px; font-weight:600; color:var(--text-muted);}
.field label.ltr{text-align:right;}
.field input, .field select{font-size:13.5px; padding:8px 10px; border-radius:7px; border:1px solid var(--border); background:var(--bg); color:var(--text);}
.field input[readonly]{color:var(--text-muted); background:var(--surface-alt);}
.field.span2{grid-column:span 2;}
.field.span4{grid-column:span 4;}

.autocomplete-list{position:absolute; top:100%; right:0; left:0; z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:8px; margin-top:4px; max-height:190px; overflow-y:auto; box-shadow:0 6px 18px rgba(0,0,0,.12);}
.autocomplete-list button{display:block; width:100%; text-align:right; padding:8px 12px; font-size:13px; background:none; border:none; cursor:pointer; color:var(--text);}
.autocomplete-list button:hover, .autocomplete-list button.active{background:var(--accent-soft); color:var(--accent);}

.workers-box{grid-column:span 4; border:1px dashed var(--border); border-radius:9px; padding:12px 14px; background:var(--surface-alt);}
.workers-box > p{font-size:12px; font-weight:600; color:var(--text); margin:0 0 10px;}
.worker-row{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border);}
.worker-row:last-of-type{border-bottom:none;}
.worker-row .wname{font-weight:600; font-size:13.5px; flex:1;}
.worker-row .wvervoer{display:flex; align-items:center; gap:6px;}
.worker-row .wvervoer input{width:64px; font-family:"IBM Plex Mono",monospace; font-size:13px; padding:5px 7px; border-radius:6px; border:1px solid var(--border); background:var(--surface); text-align:center;}
.worker-row .wvervoer span{font-size:12px; color:var(--text-muted);}
.worker-row .wremove{background:none; border:none; color:var(--danger); cursor:pointer; font-size:14px; padding:2px 6px;}
.add-worker-row{display:flex; gap:8px; margin-top:10px; align-items:center; position:relative;}
.add-worker-row input{flex:1; font-size:13px; padding:7px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface);}
.add-worker-row button{font-size:12.5px; font-weight:700; color:var(--accent-contrast); background:var(--accent); border:none; border-radius:6px; padding:7px 14px; cursor:pointer;}

.btnrow{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.btn{font-size:13.5px; font-weight:700; cursor:pointer; padding:10px 20px; border-radius:8px; border:1px solid transparent;}
.btn-primary{background:var(--accent); color:var(--accent-contrast);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-danger{background:var(--surface); color:var(--danger); border-color:var(--danger-soft);}
.btn-danger:hover{background:var(--danger-soft);}
.btn-money{background:var(--money); color:#1B1200;}
.btn-money:hover{filter:brightness(1.05);}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.toolbar{display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap;}
.search-wrap{flex:1; min-width:220px;}
.search-wrap input{width:100%; font-size:13.5px; padding:9px 14px; border-radius:8px; border:1px solid var(--border); background:var(--surface);}
.stat{display:flex; flex-direction:column; gap:2px; padding:6px 16px; border-inline-start:1px solid var(--border);}
.stat .num{font-size:17px; font-weight:700;}
.stat .lbl{font-size:11.5px; color:var(--text-muted);}

.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:var(--surface); max-height:62vh; overflow-y:auto;}
table{border-collapse:collapse; width:100%; direction:ltr; text-align:center; font-size:12.8px;}
thead th{position:sticky; top:0; background:var(--surface-alt); color:var(--text-muted); font-weight:600; font-size:11.5px; letter-spacing:.02em; padding:10px 10px; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none;}
thead th:hover{color:var(--accent);}
tbody td{padding:9px 10px; border-bottom:1px solid var(--border); white-space:nowrap; color:var(--text);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:nth-child(even){background:var(--surface-alt);}
tbody tr.status-ok{background:var(--status-bg);}
tbody tr.status-ok td:first-child{box-shadow:inset 3px 0 0 var(--status-border);}
tbody tr{cursor:pointer;}
.status-chip{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--status-text); background:var(--surface); border:1px solid var(--status-border); border-radius:999px; padding:2px 9px; margin-inline-start:6px;}
.money-cell{color:var(--money); font-weight:700;}
td.name-cell{font-weight:600; text-align:right; padding-inline-end:14px;}
input[type="checkbox"]{width:15px; height:15px; accent-color:var(--accent);}
.empty-row td{text-align:center; color:var(--text-muted); padding:26px 10px;}

/* ---- filter popover ---- */
.filter-pop{position:fixed; z-index:60; width:230px; max-height:320px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.18); display:flex; flex-direction:column;}
.filter-pop input{margin:8px; padding:7px 10px; border-radius:6px; border:1px solid var(--border); font-size:12.5px;}
.filter-pop .fp-list{overflow-y:auto; padding:0 8px 8px; flex:1;}
.filter-pop label{display:flex; align-items:center; gap:7px; font-size:12.5px; padding:4px 4px; cursor:pointer;}
.filter-pop .fp-actions{display:flex; gap:6px; padding:8px; border-top:1px solid var(--border);}
.filter-pop .fp-actions button{flex:1; font-size:12px; padding:6px; border-radius:6px; cursor:pointer;}

/* ---- payroll screen ---- */
.filterbar{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;}
.filterbar .field{min-width:160px;}
.chipselect{display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:7px; background:var(--bg); min-height:38px;}
.name-chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:4px 6px 4px 10px;}
.name-chip button{background:none; border:none; color:inherit; cursor:pointer; font-size:13px; width:16px; height:16px; display:flex; align-items:center; justify-content:center;}

.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px;}
.stattile{border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:var(--surface-alt);}
.stattile .lbl{font-size:12px; color:var(--text-muted); font-weight:600;}
.stattile .val{font-size:22px; font-weight:700; margin-top:4px;}
.stattile.money .val{color:var(--money);}

.scenario-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.scenario-card{border:1.5px solid var(--border); border-radius:11px; padding:16px; cursor:pointer; background:var(--surface);}
.scenario-card[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft);}
.scenario-card .stitle{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; margin-bottom:10px;}
.scenario-card .radio{width:16px; height:16px; border-radius:50%; border:2px solid var(--border); flex:none; position:relative;}
.scenario-card[aria-pressed="true"] .radio{border-color:var(--accent);}
.scenario-card[aria-pressed="true"] .radio::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent);}
.scenario-card .srow{display:flex; align-items:center; gap:8px; margin-top:8px;}
.scenario-card .srow label{font-size:12px; color:var(--text-muted); flex:1;}
.scenario-card .srow input{width:70px; font-family:"IBM Plex Mono",monospace; font-size:13px; text-align:center; padding:6px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text);}

.final-panel{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:16px; padding:18px 22px; border-radius:11px; background:var(--money-soft); border:1px solid var(--status-border);}
.final-panel .flbl{font-size:13px; font-weight:600; color:var(--money-strong);}
.final-panel .fbreak{font-size:12px; color:var(--text-muted); margin-top:3px;}
.final-panel .fval{font-size:30px; font-weight:700; color:var(--money);}

/* ---- manage lists screen ---- */
.mgr-addrow{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center;}
.mgr-addrow input{flex:1; min-width:130px; font-size:13px; padding:8px 10px; border-radius:7px; border:1px solid var(--border); background:var(--bg); color:var(--text);}
#mgr_emp_body td, #mgr_proj_body td, #mgr_werk_body td{text-align:right;}
.mgr-actions{display:flex; gap:6px; justify-content:flex-end;}
.mgr-actions button{font-size:11.5px; padding:5px 10px; border-radius:6px;}

/* ---- edit modal ---- */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:20px; z-index:80;}
.modal{width:100%; max-width:760px; max-height:88vh; overflow-y:auto; background:var(--surface); border-radius:14px; padding:22px; border:1px solid var(--border);}
.modal h3{margin:0 0 16px; font-size:15px;}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); font-size:13px; padding:10px 18px; border-radius:8px; z-index:100;}