/* Naveo brand (Brand Book 2026): Dark Amethyst #140D40 primary, Watermelon #EE1952 accent and CTAs,
   Electric Sapphire #4761FF supporting colour for graphics and charts, Alice Blue #E0E4ED light surfaces,
   Söhne with Arial as the fallback face. */
:root{--amethyst:#140D40;--watermelon:#EE1952;--sapphire:#4761FF;--alice:#E0E4ED;
  --ground:#E0E4ED;--panel:#FFFFFF;--line:#C9CEDC;--ink:#140D40;--ink2:#5B5878;--accent:#EE1952;--link:#4761FF;
  --band:#EEF0F6;--warn:#EE1952;--bar:#140D40;--bar-ink:#FFFFFF;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--ground:#0B0824;--panel:#140D40;--line:#2A2468;--ink:#FFFFFF;--ink2:#B9B6D6;
  --band:#1E1756;--warn:#FF5C85;--bar:#0B0824;--bar-ink:#FFFFFF;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:14px "Söhne",Arial,sans-serif}
header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;background:var(--bar);color:var(--bar-ink)}
header h1{font-size:17px;font-weight:600;margin:0 auto 0 0;display:flex;align-items:center;gap:10px;letter-spacing:.01em}
header h1 img{height:26px;width:26px}
header h1 small{font-weight:400;opacity:.7;font-size:13px;margin-left:2px}
header .status,header label{color:var(--bar-ink);opacity:.8}
header button,header a button{background:transparent;color:var(--bar-ink);border-color:rgba(255,255,255,.28)}
header button:hover{border-color:var(--bar-ink)}
header select{background:transparent;color:var(--bar-ink);border-color:rgba(255,255,255,.28);padding:4px 6px}
header select option{color:#140D40;background:#fff}
header button.primary,header a button.primary{background:var(--accent);border-color:var(--accent);opacity:1}
main{padding:14px 18px;max-width:1500px;margin:0 auto}
button{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font:13px inherit;cursor:pointer}
button:hover{border-color:var(--sapphire)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.rowbtn{padding:1px 7px;font-size:12px;line-height:1.5}
button.del{color:var(--warn)}
button:disabled{opacity:.4;cursor:default}
input,select{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 8px;font:13px inherit}
input[type=number]{width:64px;font-variant-numeric:tabular-nums}
input[type=date]{width:140px}
input:focus,select:focus{outline:2px solid var(--sapphire);outline-offset:-1px}
a{color:var(--link)}
.status{color:var(--ink2);font-size:12px}
.muted{color:var(--ink2)}
.warn-text{color:var(--warn);font-weight:600}
#chartwrap{overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;position:relative}
#chartwrap svg{display:block}
.bar{cursor:default}
#tooltip{position:fixed;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;max-width:340px;display:none;box-shadow:0 6px 24px rgba(20,13,64,.18);z-index:9}
#tooltip b{display:block;margin-bottom:2px;color:var(--ink)}
#tooltip .t2{color:var(--ink2);margin-top:2px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--amethyst);color:#fff;padding:9px 16px;border-radius:8px;font-size:13px;display:none;max-width:min(620px,92vw);line-height:1.45;z-index:10;box-shadow:0 6px 24px rgba(20,13,64,.3)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:14px}
.panel h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);margin:0 0 8px;font-weight:600}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);padding:4px 6px;border-bottom:2px solid var(--line);font-weight:600}
th[data-k]{cursor:pointer;user-select:none;white-space:nowrap}
th[data-k]:hover,th.sorted{color:var(--sapphire)}
td{padding:3px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
td input[type=text]{width:100%}
tr.drag-over-top td{border-top:2px solid var(--sapphire)}
tr.drag-over-bot td{border-bottom:2px solid var(--sapphire)}
tr.dragging{opacity:.4}
td.drag{cursor:grab;color:var(--ink2);width:18px;text-align:center;user-select:none}
tr.done td{opacity:.55}
tr.backlog td:first-child{border-left:3px solid var(--watermelon)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border-radius:20px;padding:6px 14px}
.tabs button[aria-selected=true]{background:var(--amethyst);border-color:var(--amethyst);color:#fff}
@media (prefers-color-scheme:dark){.tabs button[aria-selected=true]{background:var(--sapphire);border-color:var(--sapphire)}}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.row label{font-size:12px;color:var(--ink2)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.person{border:1px solid var(--line);border-radius:12px;padding:10px 12px;border-top:3px solid var(--sapphire)}
.person h3{margin:0 0 6px;font-size:14px;display:flex;gap:6px;align-items:center}
.person h3 input[type=text]{font-weight:600;border:none;background:transparent;padding:2px 0;flex:1;font-size:14px}
ul.leave{list-style:none;padding:0;margin:6px 0}
ul.leave li{display:flex;gap:8px;align-items:center;padding:2px 0;font-size:13px}
.hint{color:var(--ink2);font-size:12px;line-height:1.5;margin:8px 0 0}
/* :not([hidden]) so the hidden attribute still wins over display:flex */
.ctx:not([hidden]){position:fixed;z-index:11;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px;box-shadow:0 6px 24px rgba(20,13,64,.18);display:flex;flex-direction:column;min-width:150px}
.ctx button{border:none;background:transparent;text-align:left;padding:7px 12px;border-radius:5px}
.ctx button:hover{background:var(--band)}
.lbl{cursor:context-menu}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);padding:16px 18px;min-width:300px}
dialog::backdrop{background:rgba(20,13,64,.55)}
/* sign-in: the brand gradient (Dark Amethyst → Electric Sapphire → Watermelon) behind a white card */
body.login-page{min-height:100vh;background:linear-gradient(160deg,#140D40 0%,#4761FF 55%,#EE1952 100%);color:#140D40}
.login{max-width:380px;margin:12vh auto;background:#fff;border-radius:14px;padding:26px 28px;box-shadow:0 20px 60px rgba(20,13,64,.35)}
.login h1{font-size:18px;margin:0 0 16px;display:flex;align-items:center;gap:10px;color:#140D40}
.login h1 img{height:30px;width:30px}
.login label{font-size:12px;color:#5B5878;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.login input{width:100%;margin:4px 0 12px;background:#fff;color:#140D40;border-color:#C9CEDC}
.login .err{color:#EE1952;font-size:13px;min-height:18px}
details summary{cursor:pointer;color:var(--ink2);font-size:13px}
.delivered li{font-size:13px;padding:1px 0}
.delivered b{color:var(--ink2);font-weight:600}