/* Personnel Tracker – mobile-first styles.
   Idea: a factory punch clock. One big round button does the job;
   colour tells you your state from across the room. */

:root {
    --bg: #E8ECF0;
    --surface: #FFFFFF;
    --ink: #1C2630;
    --muted: #5A6773;
    --line: #CAD2DA;
    --brand: #2B4C6F;
    --brand-ink: #FFFFFF;

    --work: #16774A;
    --work-soft: #DDEFE5;
    --break: #A86A06;
    --break-soft: #F6EAD2;
    --stop: #A8342A;
    --stop-soft: #F5DEDB;
    --off: #6B7782;
    --off-soft: #E3E7EB;

    --font: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;

    --radius-sm: 6px;
    --radius: 12px;
    --nav-h: 64px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #11171E;
        --surface: #1A222C;
        --ink: #E5EBF0;
        --muted: #93A1AD;
        --line: #2D3946;
        --brand: #8EB3D9;
        --brand-ink: #10161C;

        --work: #43BE84;
        --work-soft: #183528;
        --break: #E6AA3E;
        --break-soft: #3A2C12;
        --stop: #E36B5F;
        --stop-soft: #3C1D1A;
        --off: #8995A0;
        --off-soft: #232D38;

        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    min-height: 100vh;
    padding-top: env(safe-area-inset-top, 0px);
}

body.has-nav { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }

h1, h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .75rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }

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

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.muted { color: var(--muted); }
em.muted { font-style: normal; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Top bar and navigation ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--ink);
    text-decoration: none;
}

.whoami { display: flex; align-items: center; gap: .75rem; font-size: .95rem; }
.whoami form { margin: 0; }
.whoami-name { color: var(--muted); }

.link-button {
    background: none; border: 0; padding: .25rem 0;
    color: var(--brand); font: inherit; cursor: pointer; text-decoration: underline;
}

/* Bottom tab bar on phones */
.tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tab {
    flex: 1;
    height: var(--nav-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--muted);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 500;
}

.tab svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.tab.is-active { color: var(--brand); }

/* On wider screens the tabs move into the top bar */
@media (min-width: 760px) {
    body.has-nav { padding-bottom: 0; }
    .tabs {
        position: static;
        border: 0;
        padding: 0;
        background: none;
        gap: .25rem;
    }
    .tab {
        flex: none;
        height: auto;
        flex-direction: row;
        gap: .4rem;
        padding: .5rem .85rem;
        border-radius: var(--radius-sm);
        font-size: .95rem;
    }
    .tab svg { width: 18px; height: 18px; }
    .tab.is-active { background: var(--off-soft); color: var(--ink); }
}

@media (max-width: 420px) {
    .whoami-name { display: none; }
}

/* ---------- Page ---------- */

.page {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    min-width: 0;
}

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: .5rem;
}
.panel-head h1 { margin: 0; }

.summary-line { margin: 0 0 1rem; color: var(--muted); }
.summary-line strong { color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; }

/* ---------- Clock (the memorable part) ---------- */

.clock {
    --state: var(--off);
    --state-soft: var(--off-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 6px solid var(--state);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 2rem;
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    text-align: center;
}
.state-working { --state: var(--work); --state-soft: var(--work-soft); }
.state-break   { --state: var(--break); --state-soft: var(--break-soft); }
.state-off     { --state: var(--off); --state-soft: var(--off-soft); }

.clock-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--state-soft);
    font-weight: 600;
}
.status-since { font-weight: 400; color: var(--muted); }

.status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--state, var(--off));
    flex: none;
}
.state-working .clock-status .status-dot { animation: pulse 2s ease-in-out infinite; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--work) 55%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--work) 0%, transparent); }
}

.clock-face { display: grid; gap: .1rem; }
.clock-label { color: var(--muted); font-size: .95rem; }
.clock-time {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3.5rem, 18vw, 5.5rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.clock-sub { color: var(--muted); font-variant-numeric: tabular-nums; }
.clock-sub output { color: var(--break); font-weight: 600; }

.clock-actions {
    display: grid;
    justify-items: center;
    gap: 1rem;
    margin: 0;
}

/* The punch button: big, round, impossible to miss with a gloved thumb */
.punch {
    --c: var(--work);
    width: min(62vw, 220px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0;
    background: var(--c);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    cursor: pointer;
    box-shadow:
        0 0 0 8px color-mix(in srgb, var(--c) 18%, transparent),
        0 6px 0 color-mix(in srgb, var(--c) 70%, #000);
    transition: transform .08s ease, box-shadow .08s ease;
    -webkit-tap-highlight-color: transparent;
}
.punch:active {
    transform: translateY(5px);
    box-shadow:
        0 0 0 8px color-mix(in srgb, var(--c) 18%, transparent),
        0 1px 0 color-mix(in srgb, var(--c) 70%, #000);
}
.punch-start { --c: var(--work); }
.punch-pause { --c: var(--break); }
@media (prefers-color-scheme: dark) {
    .punch { color: #0F151B; }
}

.punch-icon svg { width: 40px; height: 40px; fill: currentColor; }

.btn-end {
    min-height: 52px;
    min-width: 200px;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--stop);
    background: transparent;
    color: var(--stop);
    font: 600 1.15rem var(--font-display);
    cursor: pointer;
}
.btn-end:active { background: var(--stop-soft); }

.clock-actions.is-sending { opacity: .6; pointer-events: none; }

/* ---------- Timeline of today ---------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: .55rem 0 .55rem 1rem;
    border-left: 3px solid var(--line);
    position: relative;
}
.tl-item::before {
    content: "";
    position: absolute;
    left: -7px; top: 1rem;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--off);
}
.tl-start::before { border-color: var(--work); }
.tl-break::before { border-color: var(--break); }
.tl-end::before   { border-color: var(--stop); }
.tl-item time {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    min-width: 3.2rem;
}

/* ---------- Alerts ---------- */

.alert {
    margin: 0;
    padding: .7rem 1rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid;
    text-align: left;
    width: 100%;
    max-width: 30rem;
}
.alert:empty { display: none; }
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert-ok { background: var(--work-soft); border-color: var(--work); }
.alert-error { background: var(--stop-soft); border-color: var(--stop); }
.validation-summary-valid { display: none; }

/* ---------- Forms ---------- */

.stack { display: grid; gap: 1rem; }

.field { display: grid; gap: .3rem; font-weight: 500; }
.field input, .field select, .inline-form select {
    font: inherit;
    font-weight: 400;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .65rem .75rem;
    min-height: 48px;
    width: 100%;
}
.field input:focus, .field select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.field-error { color: var(--stop); font-weight: 400; font-size: .9rem; }
.input-validation-error { border-color: var(--stop) !important; }

.check { display: flex; align-items: center; gap: .6rem; min-height: 48px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--brand); }

.grid-form { display: grid; gap: 1rem; }
@media (min-width: 640px) {
    .grid-form { grid-template-columns: 1fr 1fr; align-items: end; }
    .grid-form .alert { grid-column: 1 / -1; }
}

.pair { display: grid; gap: 1rem; }
@media (min-width: 560px) { .pair { grid-template-columns: 1fr 1fr; } }

.break-edit {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .75rem;
    margin: 0;
    display: grid;
    gap: .75rem;
}
@media (min-width: 560px) { .break-edit { grid-template-columns: 1fr 1fr auto; align-items: end; } }

.filter-form { display: grid; gap: 1rem; }
@media (min-width: 640px) {
    .filter-form { grid-template-columns: repeat(3, 1fr); align-items: end; }
    .filter-actions { grid-column: 1 / -1; }
}
.filter-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.inline-form { margin: 0; }
.inline-form select { min-height: 40px; width: auto; padding: .4rem .6rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .6rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: 600 1rem var(--font);
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { border-color: var(--brand); filter: brightness(1.08); }
.btn-danger { color: var(--stop); border-color: var(--stop); }
.btn-block { width: 100%; }
.btn-small { min-height: 38px; padding: .35rem .7rem; font-size: .9rem; }

.danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------- Login ---------- */

.login {
    max-width: 24rem;
    width: 100%;
    margin: 8vh auto 0;
    text-align: center;
}
.login .stack { text-align: left; margin-top: 1.5rem; }
/* Company logo: white on black, shown on its own black plate so it looks
   the same in light and dark mode. */
.login-logo {
    margin: 0 auto 1rem;
    width: min(100%, 300px);
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
}
.login-logo img {
    display: block;
    width: 100%;
    height: auto;
}
@media (prefers-color-scheme: dark) {
    .login-logo { box-shadow: 0 0 0 1px var(--line); }
}

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.rows { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rows th {
    text-align: left;
    font-weight: 500;
    color: var(--muted);
    font-size: .9rem;
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.rows td { padding: .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rows tr:last-child td { border-bottom: 0; }
.rows tr.is-inactive td { color: var(--muted); }

.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.row-actions form { margin: 0; }
.pin-form { display: flex; gap: .3rem; }
.pin-form input {
    width: 7rem; min-height: 38px;
    padding: .3rem .5rem;
    font: inherit;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}

.small-link { font-size: .9rem; margin-left: .5rem; }

.tag {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .85rem;
    white-space: nowrap;
}
.tag-break { background: var(--break-soft); color: var(--break); }

/* ---------- History ---------- */

.day + .day { margin-top: 1.25rem; }
.day-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--ink);
    padding-bottom: .25rem;
    margin-bottom: .25rem;
}
.day-head h2 { margin: 0; font-size: 1.15rem; }
.day-total { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* ---------- Team board ---------- */

.subnav {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
}
.subnav a {
    padding: .6rem .9rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.subnav a.is-active { color: var(--ink); border-bottom-color: var(--brand); }

.board { list-style: none; margin: 0; padding: 0; }
.board-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "dot who hours"
        ".   state state";
    gap: .15rem .75rem;
    align-items: center;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
}
.board-row:last-child { border-bottom: 0; }
.board-row .status-dot { grid-area: dot; background: var(--state); }
.board-who { grid-area: who; display: grid; min-width: 0; }
.board-who .muted { font-size: .9rem; }
.board-state { grid-area: state; display: flex; gap: .5rem; font-size: .95rem; color: var(--state); font-weight: 500; }
.board-state .muted { font-weight: 400; }
.board-hours { grid-area: hours; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; text-align: right; }

@media (min-width: 640px) {
    .board-row {
        grid-template-columns: auto 2fr 1.5fr auto;
        grid-template-areas: "dot who state hours";
    }
}

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

/* ---------- Language switcher ---------- */

.lang { display: flex; gap: 2px; }
.lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 .35rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}
.lang abbr { text-decoration: none; }
.lang a:hover { color: var(--ink); }
.lang a.is-active { background: var(--off-soft); color: var(--ink); }

.login-lang { display: flex; justify-content: flex-end; margin-bottom: 1rem; }

/* ---------- Report totals ---------- */

.kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 1.25rem;
}
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpis div { border-left: 3px solid var(--brand); padding: .15rem 0 .15rem .75rem; }
.kpis dt { color: var(--muted); font-size: .9rem; }
.kpis dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.kpis small { font-family: var(--font); font-weight: 400; font-size: .85rem; color: var(--muted); }

.rows .num { text-align: right; }
.rows tfoot th, .rows tfoot td {
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    padding: .6rem;
    font-weight: 600;
    text-align: left;
}
.rows tfoot .num { text-align: right; }

.tag-edited { background: var(--off-soft); color: var(--muted); margin-left: .35rem; cursor: help; }
.nowrap { white-space: nowrap; }

/* Shift editor: date + start + end in one row on wider screens */
.time-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .time-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.hint { margin: -.25rem 0 0; color: var(--muted); font-size: .9rem; }