/* Shared styles for every page rendered in templates/layout.php. */

:root { color-scheme:light; --bg:#f1f5f9; --panel:#ffffff; --line:#dbe2ea; --text:#0f172a;
        --muted:#64748b; --accent:#0369a1; --accent2:#0284c7; --ok:#16a34a; --bad:#dc2626;
        --btn:#0284c7; --btn-hover:#0369a1; --on-btn:#ffffff;
        --flash-bg:#dcfce7; --flash-text:#14532d; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#0f172a; --panel:#1e293b; --line:#334155;
        --text:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; --accent2:#0ea5e9; --ok:#22c55e;
        --bad:#f87171; --btn:#0ea5e9; --btn-hover:#38bdf8; --on-btn:#00131f;
        --flash-bg:#0b3b2e; --flash-text:#bbf7d0; }
/* Without JavaScript there is no data-theme, so follow the system setting. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { color-scheme:dark; --bg:#0f172a; --panel:#1e293b; --line:#334155;
        --text:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; --accent2:#0ea5e9; --ok:#22c55e;
        --bad:#f87171; --btn:#0ea5e9; --btn-hover:#38bdf8; --on-btn:#00131f;
        --flash-bg:#0b3b2e; --flash-text:#bbf7d0; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       background:var(--bg); color:var(--text); }
:root { --rail:56px; --sidebar:240px; }
.shell { padding-left:var(--rail); transition:padding-left .2s ease; }
header { background:var(--panel); border-bottom:1px solid var(--line); }
header nav { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:.5rem;
      padding:.75rem 1rem; flex-wrap:wrap; }
header nav a { color:var(--text); text-decoration:none; padding:.35rem .6rem; border-radius:.4rem; }
header nav a:hover { background:var(--line); }
header nav a.active { color:var(--accent); background:var(--bg); }
header .context { font-weight:700; color:var(--accent); margin-right:.5rem; }
header .spacer { flex:1; }
header .user { color:var(--muted); font-size:.9rem; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:20; overflow:hidden auto;
           background:var(--panel); border-right:1px solid var(--line); padding:.6rem .5rem;
           transition:width .2s ease; }
.sidebar ul { list-style:none; margin:0; padding:0; }
.sidebar .item, .sidebar summary { display:flex; align-items:center; gap:.75rem; height:2.5rem;
           padding:0 .5rem; border-radius:.4rem; color:var(--text); text-decoration:none;
           cursor:pointer; white-space:nowrap; list-style:none; }
.sidebar summary::-webkit-details-marker { display:none; }
.sidebar .item:hover, .sidebar summary:hover { background:var(--line); }
.sidebar .active > .item, .sidebar .active > details > summary { background:var(--bg); color:var(--accent); }
.sidebar .toggle { background:none; width:100%; margin-bottom:.6rem; font:inherit; font-weight:700; }
.sidebar .icon { flex:none; width:24px; height:24px; fill:none; stroke:currentColor;
                 stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sidebar .label, .sidebar .chevron { opacity:0; transition:opacity .15s ease; }
.sidebar .chevron { margin-left:auto; transition:transform .2s ease, opacity .15s ease; }
.sidebar details[open] .chevron { transform:rotate(90deg); }
.sidebar .pages { display:none; }
.sidebar .pages a { display:block; padding:.4rem .5rem .4rem 2.9rem; border-radius:.4rem;
                    color:var(--muted); text-decoration:none; font-size:.92rem; white-space:nowrap; }
.sidebar .pages a:hover { background:var(--line); color:var(--text); }
.sidebar .pages a.active { color:var(--accent); }
.sidebar-open .sidebar { width:var(--sidebar); }
.sidebar-open .sidebar .label, .sidebar-open .sidebar .chevron { opacity:1; }
.sidebar-open .sidebar details[open] .pages { display:block; }
@media (min-width: 900px) {
    .sidebar-open .shell { padding-left:var(--sidebar); }
}
main { max-width:1200px; margin:1.5rem auto; padding:0 1rem; }
h1 { font-size:1.5rem; margin:.2rem 0 1rem; }
h2 { font-size:1.1rem; margin:1.5rem 0 .6rem; color:var(--muted); }
.flash { background:var(--flash-bg); border:1px solid var(--ok); color:var(--flash-text);
         padding:.6rem .8rem; border-radius:.5rem; margin-bottom:1rem; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:.6rem;
         padding:1rem 1.2rem; margin-bottom:1.2rem; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; font-size:.85rem; text-transform:uppercase; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
form.inline { display:flex; gap:.6rem; flex-wrap:wrap; align-items:end; }
label.checkbox { display:flex; align-items:center; gap:.4rem; color:var(--text);
         font-size:.9rem; margin:.15rem 0; }
label.checkbox input { width:auto; padding:0; }
form.inline-access { display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; margin:0; }
.role-row { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap;
         padding:.9rem 0; border-bottom:1px solid var(--line); }
.role-row:last-child { border-bottom:0; }
button.link.danger { color:var(--danger, #c0392b); }
label { display:block; font-size:.8rem; color:var(--muted); margin-bottom:.2rem; }
input, select, textarea { background:var(--bg); border:1px solid var(--line); color:var(--text);
         padding:.45rem .55rem; border-radius:.4rem; font:inherit; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent2); }
button { background:var(--btn); color:var(--on-btn); border:0; padding:.5rem .9rem;
         border-radius:.4rem; font-weight:600; cursor:pointer; }
button:hover { background:var(--btn-hover); }
button.theme-toggle { display:flex; background:none; color:var(--muted); padding:.35rem; }
button.theme-toggle:hover { background:var(--line); color:var(--text); }
.theme-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
                    stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .sun, [data-theme="dark"] .theme-toggle .moon { display:none; }
[data-theme="dark"] .theme-toggle .sun { display:block; }
button.link { background:none; color:var(--accent); padding:0; font-weight:400; }
a.btn { color:var(--accent); text-decoration:none; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:.6rem; padding:1rem; }
.stat .label { color:var(--muted); font-size:.85rem; }
.stat .value { font-size:1.6rem; font-weight:700; margin-top:.3rem; }
a.stat.context { color:inherit; text-decoration:none; }
a.stat.context:hover { border-color:var(--accent2); }
/* Team overview employee cards (timesheet-employees.php). */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:1.5rem;
         margin-bottom:1.2rem; }
.panel.card { margin-bottom:0; padding:1.6rem 1.8rem; display:flex; flex-direction:column;
         gap:1.4rem; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.card-head h2 { margin:0; font-size:1.4rem; }
.card-figures { display:flex; flex-direction:column; gap:.2rem; }
.card-figures > div { display:flex; align-items:baseline; justify-content:space-between;
                      gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line); }
.card-figures > div:last-child { border-bottom:0; }
.card-figures .label { color:var(--muted); font-size:.9rem; }
.card-figures .value { font-size:1.45rem; font-weight:700; white-space:nowrap;
                       font-variant-numeric:tabular-nums; }
.card-links { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.4rem; }
/* Customer page: main content with a right-hand admin toolbar (timesheet-customer.php). */
.worksheet { display:flex; gap:1.5rem; align-items:flex-start; }
.worksheet-main { flex:1; min-width:0; }
.worksheet-tools { width:340px; flex:none; position:sticky; top:1.5rem; }
.worksheet-tools .panel:last-child { margin-bottom:0; }
@media (max-width: 900px) {
    .worksheet { flex-direction:column; }
    .worksheet-tools { width:auto; align-self:stretch; position:static; }
}
.muted { color:var(--muted); }
.fields { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.9rem 1rem; }
.fields .wide { grid-column:1 / -1; }
.fields input, .fields textarea { width:100%; }
textarea { resize:vertical; }
.badge { display:inline-block; padding:.1rem .55rem; border-radius:999px; font-size:.8rem;
         font-weight:600; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.badge.ok { color:var(--ok); border-color:var(--ok); }
.badge.bad { color:var(--bad); border-color:var(--bad); }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.88rem; }
.error { color:var(--bad); }
.actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.actions form { margin:0; }
button.secondary { background:none; color:var(--accent); border:1px solid var(--line); }
button.secondary:hover { background:var(--line); }
pre.output { background:var(--bg); border:1px solid var(--line); border-radius:.4rem; padding:.75rem;
             overflow:auto; max-height:28rem; white-space:pre-wrap; word-break:break-word; margin:.5rem 0 0; }
.table-wrap { overflow-x:auto; }
@media (max-width: 600px) {
    .fields { grid-template-columns:1fr; }
}

/* Utilities, used instead of inline style attributes. */
[hidden] { display:none !important; }
.m-0 { margin:0; }
.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }
.mb-1 { margin-bottom:1rem; }
.mt-gap { margin-top:1.2rem; }
.hint { margin:.3rem 0 0; }
.full { width:100%; }
.grow { flex:1; min-width:220px; }
.row { display:flex; gap:.5rem; align-items:center; }
.row.between { justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.row.loose { gap:1.2rem; }
.row > .fill { flex:1; }
.nowrap { white-space:nowrap; }
.end { margin-left:auto; }
.self-center { align-self:center; }
.stat.flat { border:0; padding:0; }
.stat .label.spaced { margin-top:.8rem; }
.panel.narrow { max-width:380px; margin:3rem auto; }
label.choice { font-size:1rem; color:var(--text); }
.actions.start { justify-content:flex-start; margin-top:1rem; }
.error.detail { margin-top:.3rem; max-width:22rem; }
form.inline-delete { display:inline; margin:0 0 0 .6rem; }

/* Period tabs + hours-per-month bar chart (timesheet-dashboard.php). */
.tabs { display:flex; gap:.25rem; flex-wrap:wrap; }
.tabs .tab { background:none; color:var(--muted); border:1px solid var(--line);
             padding:.3rem .7rem; font-size:.85rem; font-weight:600; border-radius:.4rem; }
.tabs .tab:hover { background:var(--line); color:var(--text); }
.tabs .tab.is-active { background:var(--bg); color:var(--accent); border-color:var(--accent2); }
.chart-head { display:flex; justify-content:flex-end; font-size:.78rem; margin-bottom:.3rem; }
.chart-plot { position:relative; width:100%; height:220px; }
.chart-svg { position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.chart-line { fill:none; stroke:var(--accent2); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart-area { fill:var(--accent2); opacity:.12; stroke:none; }
.chart-dot { position:absolute; width:8px; height:8px; margin:-4px; border-radius:50%;
             background:var(--panel); border:2px solid var(--accent2); }
.chart-dot:hover { background:var(--accent); border-color:var(--accent); }
.chart-value { position:absolute; transform:translate(-50%, -160%); color:var(--text); font-size:.72rem;
               font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; pointer-events:none; }
.chart-xlabels { position:relative; height:1rem; margin-top:.5rem; }
.chart-xlabel { position:absolute; transform:translateX(-50%); color:var(--muted); font-size:.72rem;
                white-space:nowrap; }

/* Run log entries (deployment-log.php). */
.run { border-bottom:1px solid var(--line); padding:.6rem 0; }
.run > summary { cursor:pointer; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

/* Remote folder picker (deployment-project-form.php). */
.picker { width:min(640px, 94vw); border:1px solid var(--line); border-radius:.6rem;
          background:var(--panel); color:var(--text); padding:1rem; }
.picker-path { margin:.6rem 0; }
.picker-list { list-style:none; margin:0; padding:0; max-height:22rem; overflow:auto;
               border:1px solid var(--line); border-radius:.4rem; }
.picker-list ul { list-style:none; margin:0; padding:0; }
.picker-footer { margin-top:.8rem; }
.tree-row { padding:.35rem .6rem; padding-left:calc(.6rem + var(--depth, 0) * 1rem); cursor:pointer;
            border-bottom:1px solid var(--line); }
.tree-row.is-selected { background:var(--bg); }
.tree-toggle { display:inline-block; width:1.2rem; }