/* Layout: fixed right sidebar on desktop; sticky scrolling nav bar + card lists on tablet/phone. Light/dark via tokens. */
:root{--bg:#f3f5f8;--pn:#ffffff;--tx:#1c2733;--mu:#5d6b7a;--bd:#d9e0e8;--pr:#1b5fb5;--prh:#164f96;--onpr:#ffffff;--ok:#1a7f45;--wr:#b97a00;--bad:#c23636;--side:#16324f;--sidetx:#dbe6f2;--th:#eaeff5;--hov:#edf1f6;--late:#fdf0f0;--gbg:#dcf2e5;--gtx:#146c39;--rbg:#fbe0e0;--rtx:#a52a2a;--ybg:#fcefc9;--ytx:#7a5300;--tag:#e6ebf1;--hint:#eaf3ff;--hintbd:#b5d1f3;--bar:#e3e9f0;--inp:#ffffff;--shadow:#0004}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1720;--pn:#18222e;--tx:#e6edf4;--mu:#98a6b5;--bd:#2c3a49;--pr:#4a8fe0;--prh:#5b9be6;--onpr:#06121f;--ok:#4ccb83;--wr:#e0a422;--bad:#ef6b6b;--side:#0b121a;--sidetx:#c5d3e0;--th:#1f2c3a;--hov:#223142;--late:#2d1a1d;--gbg:#173626;--gtx:#7fe0a8;--rbg:#3b1d20;--rtx:#ff9b9b;--ybg:#3a2e0e;--ytx:#f0c75e;--tag:#243242;--hint:#14263b;--hintbd:#27486f;--bar:#243242;--inp:#101a24;--shadow:#000a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f1720;--pn:#18222e;--tx:#e6edf4;--mu:#98a6b5;--bd:#2c3a49;--pr:#4a8fe0;--prh:#5b9be6;--onpr:#06121f;--ok:#4ccb83;--wr:#e0a422;--bad:#ef6b6b;--side:#0b121a;--sidetx:#c5d3e0;--th:#1f2c3a;--hov:#223142;--late:#2d1a1d;--gbg:#173626;--gtx:#7fe0a8;--rbg:#3b1d20;--rtx:#ff9b9b;--ybg:#3a2e0e;--ytx:#f0c75e;--tag:#243242;--hint:#14263b;--hintbd:#27486f;--bar:#243242;--inp:#101a24;--shadow:#000a;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Cairo,Tahoma,"Segoe UI",sans-serif;background:var(--bg);color:var(--tx);font-size:15px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--side)}
#app{display:flex;min-height:100vh}
aside{width:230px;background:var(--side);color:#fff;padding:16px 0;position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0}
aside .logo{padding:0 18px 14px;font-weight:700;font-size:16px;border-bottom:1px solid #ffffff22;margin-bottom:8px}
aside .logo small{display:block;font-weight:400;opacity:.7;font-size:12px}
#nav a{display:block;padding:10px 18px;color:var(--sidetx);text-decoration:none}
#nav a:hover{background:#ffffff14}
#nav a.on{background:var(--pr);color:var(--onpr);font-weight:600}
main{flex:1;min-width:0;padding-block:22px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1{margin:0 0 16px;font-size:22px}h2{margin-top:0}h3{margin:0 0 10px;font-size:16px}
.panel{background:var(--pn);border:1px solid var(--bd);border-radius:10px;padding:16px;margin-bottom:16px;min-width:0}
.hint{background:var(--hint);border-color:var(--hintbd)}
.muted{color:var(--mu)}.c{text-align:center}.red{color:var(--bad)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--pn);border:1px solid var(--bd);border-radius:10px;padding:14px 16px;cursor:pointer;border-right:5px solid var(--pr)}
.card:hover{background:var(--hov)}.card.warn{border-right-color:var(--wr)}.card.bad{border-right-color:var(--bad)}
.cn{font-size:30px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}.cl{color:var(--mu);font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bars .bar{display:flex;align-items:center;gap:8px;margin:7px 0}.bl{width:120px;font-size:13px;flex-shrink:0}
.bt{flex:1;background:var(--bar);border-radius:6px;height:14px;overflow:hidden}.bf{background:var(--pr);height:100%}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;align-items:center}.sp{flex:1}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{border:1px solid var(--bd);border-radius:7px;padding:7px 10px;background:var(--inp);width:100%;min-width:0}
.toolbar input,.toolbar select{width:auto;min-width:150px}
button{border:1px solid var(--bd);background:var(--pn);border-radius:7px;padding:7px 14px;cursor:pointer}
button:hover{background:var(--hov)}
button.pri{background:var(--pr);color:var(--onpr);border-color:var(--pr)}button.pri:hover{background:var(--prh)}
button.sm{padding:3px 9px;font-size:12px;margin-inline-start:4px}button.ok{color:var(--ok);border-color:var(--ok)}button.del{color:var(--bad);border-color:var(--bad)}
:focus-visible{outline:2px solid var(--pr);outline-offset:2px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.chip{padding:4px 12px;border:1px solid var(--bd);border-radius:20px;background:var(--pn);cursor:pointer;font-size:13px}.chip.on{background:var(--pr);color:var(--onpr);border-color:var(--pr)}
.scroll{overflow-x:auto}.tw{padding:10px}.cnt{color:var(--mu);font-size:13px;margin-bottom:6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--th);text-align:right;padding:8px 10px;white-space:nowrap;cursor:pointer}
td{padding:7px 10px;border-bottom:1px solid var(--bd);vertical-align:top}
tr.late td{background:var(--late)}td.act{white-space:nowrap}
.tag{display:inline-block;padding:2px 9px;border-radius:12px;font-size:12px;background:var(--tag)}.tag.g{background:var(--gbg);color:var(--gtx)}.tag.r{background:var(--rbg);color:var(--rtx)}.tag.y{background:var(--ybg);color:var(--ytx)}
dialog{border:none;border-radius:12px;padding:20px;width:min(760px,95vw);max-height:92vh;box-shadow:0 10px 40px var(--shadow);background:var(--pn);color:var(--tx)}
dialog::backdrop{background:#0008}
dialog#cf{width:min(420px,92vw)}
.fg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.fg label{display:block;min-width:0}.fg label span,.fg .lb{display:block;font-size:13px;color:var(--mu);margin-bottom:3px}.fg .full{grid-column:1/-1}
.chk{display:flex!important;gap:8px;align-items:center}.chk input{width:auto}
.fb{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.msg{color:var(--bad);margin-top:8px;min-height:18px}
.rh{border-bottom:2px solid var(--pr);padding-bottom:8px;margin-bottom:10px}
.phw{display:flex;flex-wrap:wrap;gap:8px}
.pht{position:relative;width:84px;height:84px;border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.pht img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pht .x{position:absolute;top:3px;left:3px;width:24px;height:24px;padding:0;border-radius:50%;background:#000b;color:#fff;border:none;line-height:22px}
.phadd{width:84px;height:84px;border:2px dashed var(--bd);border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--mu);cursor:pointer;padding:4px}
.phadd:hover{background:var(--hov)}
img.th{width:28px;height:28px;object-fit:cover;border-radius:4px;vertical-align:middle}
button.ph{display:inline-flex;align-items:center;gap:4px}
dialog#pv{width:min(960px,96vw);background:#111;color:#fff;padding:12px}
.pvh{display:flex;gap:8px;align-items:center;margin-bottom:8px}.pvh button{background:#222;color:#fff;border-color:#444}
.pvm{display:flex;align-items:center;gap:8px}.pvm img{flex:1;min-width:0;max-width:100%;max-height:78vh;object-fit:contain;background:#000}
.pvm .nav{font-size:24px;padding:8px 14px;background:#222;color:#fff;border-color:#444}
#toast{position:fixed;inset-inline:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin:auto;width:max-content;max-width:calc(100vw - 32px);background:var(--tx);color:var(--bg);padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;text-align:center}
#toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* tablet and phone: top nav bar, one-column panels */
@media (max-width:900px){
  #app{flex-direction:column}
  aside{width:auto;height:auto;position:sticky;top:env(safe-area-inset-top,0px);z-index:30;padding:0 max(0px,env(safe-area-inset-right,0px)) 0 max(0px,env(safe-area-inset-left,0px));display:flex;align-items:center;overflow:visible}
  aside .logo{border:0;margin:0;padding:6px 14px;font-size:14px;white-space:nowrap}
  aside .logo small{display:none}
  #nav{display:flex;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  #nav a{white-space:nowrap;padding:14px 14px}
  .grid2{grid-template-columns:1fr}
  main{padding-block:16px}
  input,select,textarea{font-size:16px}
}
/* phone */
@media (max-width:700px){
  aside .logo{display:none}
  h1{font-size:20px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:12px}.cn{font-size:26px}
  .toolbar input,.toolbar select{flex:1 1 100%;min-width:0}
  .toolbar .sp{display:none}
  .toolbar button{flex:1 1 auto}
  .fg{grid-template-columns:1fr}
  .bl{width:90px}
  .panel{padding:12px}
  #dlg,#pv{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  #dlg .fb{position:sticky;bottom:-16px;background:var(--pn);padding:10px 0;margin-bottom:-8px;border-top:1px solid var(--bd)}
  #tbl .scroll{overflow:visible}
  #tbl table,#tbl tbody,#tbl tr,#tbl td{display:block;width:100%}
  #tbl thead{display:none}
  #tbl tr{background:var(--pn);border:1px solid var(--bd);border-radius:10px;margin-bottom:10px;padding:4px 12px}
  #tbl tr.late{background:var(--late)}
  #tbl td,#tbl tr.late td{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px dashed var(--bd);background:none;overflow-wrap:anywhere;white-space:normal}
  #tbl td::before{content:attr(data-label);color:var(--mu);font-size:12px;flex:0 0 36%;max-width:36%}
  #tbl td:empty{display:none}
  #tbl td.c{justify-content:center}#tbl td.c::before{display:none}
  #tbl td.act{flex-wrap:wrap;gap:6px;border-bottom:0;padding-top:10px}
  #tbl td.act::before{display:none}
  #tbl td.act button{margin:0}
}
@media (pointer:coarse){
  button,select,input:not([type=checkbox]){min-height:44px}
  button.sm{min-height:38px;padding:6px 12px}
  .chip{padding:8px 14px}
  #nav a{min-height:44px;display:flex;align-items:center}
}
@media print{aside,.noprint,.toolbar,#toast,body::before{display:none!important}main{padding:0}.panel{border:none}body{background:#fff;color:#000}}

/* governance */
#nav .ng{display:block;padding:12px 18px 4px;font-size:11px;letter-spacing:.3px;color:var(--sidetx);opacity:.6}
h3.sec{margin:6px 0 10px}
table.hm{width:auto;min-width:260px}table.hm th{cursor:default;text-align:center;position:static}table.hm td{text-align:center;width:48px;height:38px;font-weight:700;border:1px solid var(--bd)}
td.h1{background:var(--gbg);color:var(--gtx)}td.h2{background:var(--ybg);color:var(--ytx)}td.h3{background:#f6c9a0;color:#6b3300}td.h4{background:var(--rbg);color:var(--rtx)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) td.h3{background:#5a3512;color:#ffc58f}}
:root[data-theme="dark"] td.h3{background:#5a3512;color:#ffc58f}
@media (max-width:900px){#nav .ng{display:none}}

/* ---- server mode ---- */
body.auth aside, body.auth main { visibility: hidden; }
#auth { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.authbox { width: min(420px, 100%); margin: 0; }
.authbox h1 { font-size: 20px; }
.authbox label { display: block; margin-top: 10px; }
.authbox label span { display: block; font-size: 13px; color: var(--mu); margin-bottom: 3px; }
#syncpill { position: fixed; inset-block-end: max(12px, env(safe-area-inset-bottom)); inset-inline-start: 12px; z-index: 20; padding: 5px 12px; border-radius: 16px; font-size: 12px; background: var(--pn); border: 1px solid var(--bd); color: var(--mu); box-shadow: 0 2px 8px var(--shadow); pointer-events: none; }
#syncpill.sync { color: var(--wr); } #syncpill.offline, #syncpill.error { color: var(--bad); border-color: var(--bad); } #syncpill.ok { opacity: .8; }
a.btnlink { display: inline-block; border: 1px solid var(--bd); background: var(--pn); color: var(--tx); border-radius: 7px; padding: 7px 14px; text-decoration: none; }
a.btnlink.pri { background: var(--pr); color: var(--onpr); border-color: var(--pr); }
#who { padding: 12px 18px; margin-top: 8px; border-top: 1px solid #ffffff22; color: var(--sidetx); font-size: 13px; }
@media (max-width: 900px) { #who { display: none; } }
body.role-viewer [data-act="add"], body.role-viewer [data-act="edit"], body.role-viewer [data-act="del"], body.role-viewer [data-act="import"],
body.role-viewer [data-act="closeTicket"], body.role-viewer [data-act="closePl"], body.role-viewer [data-act="doneTask"], body.role-viewer [data-act="runPm"],
body.role-viewer [data-act="doneInit"], body.role-viewer [data-act="closeRisk"], body.role-viewer [data-act="tpl"] { display: none !important; }