:root {
    --bg: #F2F3EE;
    --surface: #FFFFFF;
    --surface-2: #FBFBF8;
    --text: #1B1E19;
    --muted: #6B7268;
    --border: #E1E3D9;
    --accent: #1F6B45;
    --accent-ink: #FFFFFF;
    --accent-soft: #E4EFE6;
    --gold: #9C7A2E;
    --gold-soft: #F3ECD8;
    --positive: #1B7A4A;
    --negative: #B3432B;
    --warning: #D97706;
    --danger-solid: #B3432B;
    --danger-ink: #FFFFFF;
    --alert-error-bg: #FBEAE7;
    --alert-success-bg: #E7F3EC;
    --focus-ring: rgba(31, 107, 69, 0.15);
    --shadow-sm: 0 1px 2px rgba(30, 35, 25, 0.06);
    --shadow-md: 0 4px 14px rgba(30, 35, 25, 0.08), 0 2px 4px rgba(30, 35, 25, 0.05);
    --radius: 14px;
    --radius-sm: 9px;
    --font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Public Sans", sans-serif;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14170F;
        --surface: #1C2018;
        --surface-2: #20241B;
        --text: #ECEFE5;
        --muted: #9AA290;
        --border: #2B3024;
        --accent: #55A87A;
        --accent-ink: #0D140F;
        --accent-soft: #1F2B21;
        --gold: #D9B166;
        --gold-soft: #2A2415;
        --positive: #4ADE80;
        --negative: #F0876A;
        --warning: #F59E0B;
        --alert-error-bg: #3A2019;
        --alert-success-bg: #16281C;
        --focus-ring: rgba(85, 168, 122, 0.25);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #14170F;
    --surface: #1C2018;
    --surface-2: #20241B;
    --text: #ECEFE5;
    --muted: #9AA290;
    --border: #2B3024;
    --accent: #55A87A;
    --accent-ink: #0D140F;
    --accent-soft: #1F2B21;
    --gold: #D9B166;
    --gold-soft: #2A2415;
    --positive: #4ADE80;
    --negative: #F0876A;
    --warning: #F59E0B;
    --alert-error-bg: #3A2019;
    --alert-success-bg: #16281C;
    --focus-ring: rgba(85, 168, 122, 0.25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}

a { color: var(--accent); }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 30;
}

.brand {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.brand-root {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
}
.brand-root:hover { color: var(--accent); }

.brand-sep { color: var(--muted); font-weight: 400; }

.brand-current { color: var(--muted); font-weight: 600; }

/* Sprint-info in sans-serif: in de serif display-font was deze lange, kleine tekst
   moeilijk leesbaar. */
.brand-sprint {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text);
}

.topbar-right { display: flex; align-items: center; gap: 0.9rem; }

.app-version {
    text-align: center;
    padding: 1rem 0 1.5rem;
    color: var(--muted);
    font-size: 0.75rem;
}

.footer-easter-egg { color: inherit; text-decoration: none; opacity: 0.7; }
.footer-easter-egg:hover { text-decoration: underline; opacity: 1; }

.user-info { color: var(--muted); text-decoration: none; font-size: 0.88rem; font-weight: 600; }

.icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.icon-btn svg { width: 18px; height: 18px; display: block; }
.icon-btn:hover { border-color: var(--accent); color: var(--text); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.active { border-color: var(--accent); color: var(--accent); }

.container {
    max-width: 1560px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem;
}

.page-title { margin: 0 0 1.25rem; font-size: 1.7rem; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.card-header h2 { margin: 0; font-size: 1rem; font-family: var(--font-body); }

.card-body { padding: 1.2rem 1.3rem; }

.form-group { margin-bottom: 0.9rem; }

.form-group label {
    display: block;
    font-size: 0.88rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
}

.form-control {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-hint { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }

.form-hint code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}

.form-control-static { padding: 0.5rem 0; font-weight: 600; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-decoration: none;
    background: var(--surface-2);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}
.btn:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }

.btn-outline { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: var(--surface); border-color: var(--accent); }

.btn-danger { background: var(--danger-solid); color: var(--danger-ink); border-color: var(--danger-solid); }
.btn-danger:hover { filter: brightness(1.08); border-color: var(--danger-solid); }

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.82rem; }

.alert {
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.alert-success { background: var(--alert-success-bg); color: var(--positive); }
.alert-danger { background: var(--alert-error-bg); color: var(--negative); }
.alert-warning { background: var(--gold-soft); color: var(--gold); border-left: 3px solid var(--warning); }
.alert[hidden] { display: none; }

.text-muted { color: var(--muted); }
.text-center { text-align: center; }

.table-wrap { overflow-x: auto; padding-right: 1.25rem; }

table { width: 100%; border-collapse: collapse; }

th, td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 0.9rem;
}

th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Urenlog grid */
.sprint-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}


.page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 0;
    color: var(--muted);
    font-size: 0.9rem;
}
.page-loading-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: page-loading-spin 0.8s linear infinite;
}
@keyframes page-loading-spin {
    to { transform: rotate(360deg); }
}

/* Delimits the toolbox/sync action row between the Maintenance & Service grid
   and the regular ticket grid, without a "Toolbox" heading/card. */
.grid-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.25rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.grid-toolbar-left,
.grid-toolbar-right { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Vaste kolombreedtes zodat de reguliere en de Maintenance/Service-tabel exact
   dezelfde kolomindeling gebruiken en onder elkaar uitlijnen. */
.grid-table { table-layout: fixed; }
.grid-table th:first-child,
.grid-table td:first-child { width: 240px; }
.grid-table th:last-child,
.grid-table td:last-child { width: 90px; }

.grid-table td.hour-cell { padding: 0.35rem; }

.hour-input {
    width: 4.2rem;
    padding: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
}
.hour-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

.status-dot.draft { background: var(--gold); }
.status-dot.synced { background: var(--positive); }
.status-dot.error { background: var(--negative); }
.status-dot.external { background: var(--accent); }
.status-dot.conflict { background: var(--negative); box-shadow: 0 0 0 2px var(--alert-error-bg); }

#urenGrid h2 { margin-top: 1.75rem; font-size: 1rem; }

/* Datum in de overzichtstabel: altijd onderlijnd in de kleur van de dagstatus
   (zie dateUnderline() in actions/load_timesheet.php / js/urenlog.js). */
.day-date {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 4px solid var(--border);
    white-space: nowrap;
}
.day-date--done    { border-bottom-color: var(--positive); }
.day-date--partial,
.day-date--over    { border-bottom-color: var(--negative); }
.day-date--missing { border-bottom-color: var(--warning); }
.day-date--future,
.day-date--off     { border-bottom-color: var(--muted); }

/* H / H½: een klein tekstlabel i.p.v. een bolletje, zodat de kop niet vervormt. */
.day-status {
    margin-left: 0.3rem;
    font-weight: 700;
    font-size: 0.72rem;
}

.grid-table td.hour-cell--over {
    background: var(--alert-error-bg);
}
.grid-table td.hour-cell--over .hour-input {
    border-color: var(--negative);
}

.day-status--holiday { color: var(--muted); }

th.day-header--holiday { background: var(--surface-2); }

.grid-table td.hour-cell--holiday {
    background: var(--surface-2);
}
.grid-table td.hour-cell--holiday .hour-input {
    opacity: 0.5;
    cursor: not-allowed;
}

.day-status--half-holiday { color: var(--gold); }

th.day-header--half-holiday { background: var(--gold-soft); }

.grid-table td.hour-cell--half-holiday {
    background: var(--gold-soft);
}
.grid-table td.hour-cell--half-holiday .hour-input {
    border-color: var(--gold);
}

/* Vandaag: een accent-rand die los staat van de over/holiday-achtergrondkleuren,
   zodat de kolom herkenbaar blijft ongeacht welke andere status ze ook heeft. De
   kolom wordt in de overzichtstabel bovenaan afgesloten op de totaalrij (tfoot),
   en in elke tickettabel (zonder kop) bovenaan op de eerste en onderaan op de
   laatste ticketrij. */
th.day-header--today {
    box-shadow: inset 0 -3px 0 var(--accent);
}
.grid-table td.hour-cell--today {
    box-shadow: inset 3px 0 0 var(--accent), inset -3px 0 0 var(--accent);
}
.grid-table tbody tr:first-child td.hour-cell--today {
    box-shadow: inset 3px 0 0 var(--accent), inset -3px 0 0 var(--accent), inset 0 3px 0 var(--accent);
}
.grid-table tbody tr:last-child td.hour-cell--today {
    box-shadow: inset 3px 0 0 var(--accent), inset -3px 0 0 var(--accent), inset 0 -3px 0 var(--accent);
}
.grid-table tbody tr:only-child td.hour-cell--today {
    box-shadow: inset 3px 0 0 var(--accent), inset -3px 0 0 var(--accent), inset 0 3px 0 var(--accent), inset 0 -3px 0 var(--accent);
}
.grid-table tfoot th.day-header--today {
    box-shadow: inset 3px 0 0 var(--accent), inset -3px 0 0 var(--accent), inset 0 -3px 0 var(--accent);
}

.grid-table tbody tr.issue-row--mine {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}

.grid-table tbody tr.issue-row--was-mine {
    background: var(--gold-soft);
    box-shadow: inset 3px 0 0 var(--gold);
}

.grid-table tbody tr.issue-row--foreign {
    background: var(--alert-error-bg);
    box-shadow: inset 3px 0 0 var(--negative);
}

.issue-foreign-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--negative);
    border: 1px solid var(--negative);
    border-radius: 3px;
    padding: 0 0.3rem;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.issue-key { font-weight: 700; color: inherit; text-decoration: none; }
.issue-key:hover { text-decoration: underline; }

.remove-issue-form { display: inline; }
.remove-issue-btn {
    display: inline-block;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 0.2rem;
    margin-left: 0.15rem;
    cursor: pointer;
}
.remove-issue-btn:hover { color: var(--negative); }
.issue-summary {
    color: var(--muted);
    font-size: 0.8rem;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-table th:last-child,
.grid-table td:last-child { padding-left: 1.1rem; }

.grid-total { font-weight: 700; }

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}
.modal-overlay.open { display: flex; }

.modal {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    width: 100%;
    max-width: 340px;
}
.modal h2 { font-size: 1.05rem; margin-bottom: 1rem; }

.modal--settings { max-width: 640px; max-height: 85vh; overflow-y: auto; }

.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modal-title { font-size: 1.05rem; font-weight: 700; }

.auth-wrap {
    max-width: 380px;
    margin: 4rem auto;
}

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

.load-more { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; font-size: 0.85rem; }

/* "+" naast een sectietitel (bv. Internal) */
.section-add-btn {
    margin-left: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}
.section-add-btn:hover { border-color: var(--accent); }

.internal-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; }
.internal-list-item {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    text-align: left;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.internal-list-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.internal-list-item span { color: var(--muted); font-size: 0.85rem; }