/* PTO report / editor (pto.php, ptoa.php) — 2026 look, same palette as yearly.php and triage.php */
:root { --bg:#f0f2f5; --surface:#fff; --border:#dde1e7; --text:#111827; --text2:#4b5563; --text3:#888e99;
        --blue:#2563eb; --blue-h:#1d4ed8; --blue-bg:#eff6ff; --green-bg:#ecfdf5; --green:#047857; --amber-bg:#fffbeb; --amber:#b45309;
        --red:#b91c1c; --red-bg:#fef2f2; --hl:#fef9c3; --r:6px; --shadow:0 1px 2px rgba(0,0,0,.06);
        --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 var(--font); }

.toolbar { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow); }
.toolbar h1 { font-size:16px; margin:0 8px 0 0; font-weight:700; }
.toolbar form { display:flex; align-items:center; gap:6px; }
.toolbar label { color:var(--text2); font-size:12.5px; }
.toolbar input[type=date] { font:inherit; padding:5px 8px; border:1px solid var(--border); border-radius:var(--r); }
.toolbar .range { color:var(--text2); font-size:12.5px; margin-left:6px; }
.toolbar .range b { color:var(--text); }
.btn { display:inline-block; padding:6px 12px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); color:var(--text); text-decoration:none; font:inherit; font-size:13px; font-weight:600; cursor:pointer; line-height:1.3; }
.btn:hover { border-color:var(--blue); color:var(--blue); }
.btn--blue { background:var(--blue); border-color:var(--blue); color:#fff; } .btn--blue:hover { background:var(--blue-h); color:#fff; }
.tb-sep { flex:1; }

.flash { margin:12px 16px 0; padding:9px 14px; border-radius:var(--r); background:var(--green-bg); color:var(--green); border:1px solid #a7f3d0; }
.flash.warn { background:var(--amber-bg); color:var(--amber); border-color:#fcd34d; }

.wrap { padding:14px 16px 32px; display:grid; gap:14px; grid-template-columns:minmax(0,1fr); max-width:1100px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.card h2 { margin:0; padding:9px 12px; font-size:13.5px; font-weight:700; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.card h2 small { color:var(--text3); font-weight:500; }
.card .body { padding:10px 12px; }
.legend p { margin:0 0 8px; font-size:12.5px; color:var(--text2); }
.legend p:last-child { margin-bottom:0; }
.legend b { color:var(--text); }

table { width:100%; border-collapse:collapse; }
th { font-size:10.5px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.04em; padding:6px 10px 4px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:6px 10px; border-bottom:1px solid #eef0f3; vertical-align:middle; font-variant-numeric:tabular-nums; }
td.num, th.num { text-align:right; white-space:nowrap; }
td small { color:var(--text3); font-size:11px; font-weight:400; }
.muted { color:var(--text3); }
td.pos { color:var(--green); } td.neg { color:var(--red); } td.over { color:var(--amber); }

/* summary rows expand to the day list */
tr.person { cursor:pointer; }
tr.person:hover td { background:#f7f8fa; }
tr.person.hl td { background:var(--hl); }
tr.person.open td { background:var(--blue-bg); border-bottom-color:transparent; }
tr.person.hl.open td { background:var(--hl); }
tr.person:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
tr.person td.name { font-weight:600; }
tr.person td.name small { display:block; font-weight:400; }
.caret { display:inline-block; width:0; height:0; margin-right:7px; border:4px solid transparent; border-left:5px solid var(--text3); vertical-align:1px; transition:transform .12s; }
tr.person.open .caret { transform:rotate(90deg) translate(1px,1px); }
tr.detail > td { padding:0 10px 12px 28px; background:#fafbfc; }
tr.detail[hidden] { display:none; }
tfoot td { font-weight:600; color:var(--text2); border-top:2px solid #cfd5dd; border-bottom:0; background:#f3f5f8; }

/* day lists */
table.days { width:auto; min-width:60%; }
table.days th { padding:5px 8px 3px; border-bottom:1px solid var(--border); }
table.days td { padding:3px 8px; border-bottom:1px solid #eef0f3; font-size:13px; }
table.days tr:last-child td { border-bottom:0; }
table.days td.dow { color:var(--text2); width:40px; }
table.days td.date { white-space:nowrap; }
table.days tr.carry td.date { color:var(--amber); }
table.days tr.today td { background:var(--blue-bg); }
table.days tr.err td { background:var(--red-bg); }
table.days tr.errmsg td { color:var(--red); font-size:12px; padding-top:0; padding-bottom:6px; background:var(--red-bg); }
.tag { display:inline-block; padding:0 6px; border-radius:10px; background:#f3f4f6; border:1px solid var(--border); font-size:10.5px; line-height:1.6; color:var(--text2); white-space:nowrap; vertical-align:1px; }
.tag.night { background:#1f2937; border-color:#1f2937; color:#fff; }

/* admin form */
form.edit input[type=date], form.edit input[type=number], form.edit input[type=text] { font:inherit; font-size:13px; padding:4px 6px; border:1px solid var(--border); border-radius:4px; background:var(--surface); }
form.edit input[type=number] { width:68px; text-align:right; }
form.edit input[type=text] { width:100%; min-width:140px; }
form.edit td.chk { text-align:center; }
form.edit tr.new td { background:var(--green-bg); }
form.edit .actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; }
form.edit .hint { color:var(--text3); font-size:12px; }

@media (max-width: 720px) {
  .toolbar { padding:8px 10px; }
  .toolbar .range-carry { display:none; }
  .wrap { padding:10px; }
  th, td { padding:6px 6px; }
  tr.detail > td { padding:0 6px 10px 12px; }
  table.days { width:100%; min-width:0; }
  table.days th:nth-child(2), table.days td.dow { display:none; }
  form.edit input[type=text] { min-width:90px; }
}