* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--font-size);
}

.hidden { display: none !important; }

/* Cross-fade between light and dark, only during a switch (js/theme.js adds the
   class for 600ms) so it never slows down hover effects. box-shadow is left out:
   animating it makes text re-rasterize and flicker once at the end. The pill's
   highlight and the logos are left out, as this would replace their own
   transitions: the highlight's slide and the logos' 0.6s opacity fade. */
html.theme-transition,
html.theme-transition *:not(.theme-pill-thumb, .logo-for-light, .logo-for-dark) {
    transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease !important;
}

/* ===== Header ===== */
/* Every item in the bar is this tall, so the bar is the same height signed out
   (brand only) as signed in (brand, tabs and user menu). */
.top-bar {
    --top-bar-item-height: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 3px solid var(--accent);
}
.brand { display: flex; align-items: center; min-height: var(--top-bar-item-height); font-size: 20px; font-weight: 700; margin: 0; }
/* Both logos are stacked, and the one for the current theme fades in. */
.brand-logo { position: relative; width: 28px; height: 28px; margin-right: 8px; }
.brand-logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.6s ease; }
.brand-logo .logo-for-dark, [data-theme="dark"] .brand-logo .logo-for-light { opacity: 0; }
[data-theme="dark"] .brand-logo .logo-for-dark { opacity: 1; }
.brand-accent { color: var(--accent-text); }
.tab-bar { display: flex; gap: 4px; }
.tab {
    border: none;
    background: none;
    color: var(--text-muted);
    height: var(--top-bar-item-height);
    padding: 0 14px;
    border-radius: 6px;
    font: inherit;
    font-size: 18px;
    cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface-muted); color: var(--primary); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.user-menu { position: relative; margin-left: auto; height: var(--top-bar-item-height); display: flex; align-items: center; }
.user-menu-trigger {
    height: var(--top-bar-item-height);
    padding: 0 12px;
    border: 1px solid transparent;
    background: none;
    color: var(--text-muted);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu:hover .user-menu-trigger, .user-menu-trigger[aria-expanded="true"] {
    color: var(--text);
    background: var(--surface-muted);
    border-color: var(--border);
}
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 200px;
    padding: 5px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 18px var(--shadow);
}
/* Bridges the gap above the dropdown so hovering across it keeps it open. */
.user-menu-dropdown::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; }
.user-menu-item {
    display: block;
    width: 100%;
    border: none;
    background: none;
    color: var(--text);
    text-align: right;
    padding: 8px 10px;
}
.user-menu-item:hover { background: var(--surface-muted); }

/* Theme pill: a segmented control, one icon per choice, with a highlight that
   slides under the selected one (the reaction-test coach page's language pill). */
.theme-pill {
    position: relative;
    display: flex;
    margin: 3px 2px 6px;
    padding: 3px;
    background: var(--surface-muted);
    border-radius: 999px;
}
.theme-pill-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 4);
    background: var(--raised);
    border-radius: 999px;
    box-shadow: 0 1px 2px var(--shadow);
    pointer-events: none;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.6s ease;
}
.theme-pill-segment {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    padding: 6px 0;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    transition: color 0.18s;
}
.theme-pill-segment:hover, .theme-pill-segment.active { color: var(--text); }
.theme-pill-segment svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Layout ===== */
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.card h2 { margin-top: 0; font-size: 19px; font-weight: 700; }
.centered { text-align: center; max-width: 520px; margin: 48px auto; }
.hint { color: var(--text-muted); font-size: var(--font-size-small); }
.hint-error { color: var(--danger); }
/* A card title with controls on the same line, at the right. */
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card-header h2 { margin: 0; }

/* ===== Buttons and inputs ===== */
button {
    font: inherit;
    cursor: pointer;
    border-radius: 6px;
    padding: 7px 14px;
}
.button-primary { background: var(--primary); color: var(--primary-text); border: 1px solid var(--primary); font-weight: 500; }
.button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button-quiet { background: none; color: var(--primary); border: 1px solid var(--border); }
.button-quiet:hover { border-color: var(--primary); background: var(--surface-muted); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 1px;
}
input[type="range"], input[type="checkbox"] { accent-color: var(--primary); }
.button-danger, .button-primary.button-danger, .button-primary.button-danger:hover { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.icon-button:hover { border-color: var(--primary); background: var(--surface-muted); }
.button-link { background: none; border: none; padding: 2px 4px; color: var(--primary); text-decoration: underline; font-size: var(--font-size-small); }
.button-small { padding: 4px 10px; font-size: var(--font-size-small); }
.button-large { font-size: 22px; padding: 14px 40px; }

/* Boxes keep the full text size, even inside a label's smaller text. */
input, select, textarea {
    font: inherit;
    font-size: var(--font-size);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
}
label { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-small); color: var(--text-muted); }
label.checkbox { flex-direction: row; align-items: center; color: var(--text); }
/* Example text shown in an empty box: it starts with "Example:" and is in
   italics, so it cannot be mistaken for something already entered. */
.example-placeholder::placeholder { font-style: italic; }

/* ===== Use tab ===== */
.clock-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; }
.clock-card-settings-slot { position: absolute; top: 12px; right: 12px; }
.entries-count input { width: 100px; }
.clock-status { font-size: 20px; }
.earlier-clock-in { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.earlier-clock-in-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px; }
.earlier-clock-in .hint { margin: 0; }

/* ===== Tables ===== */
.table-scroll { overflow-x: auto; }
/* Only as wide as its columns: stretching to fill the space would hand any
   room a narrowed column frees to the others, so set widths would not hold. */
.timesheet-table { border-collapse: collapse; }
.timesheet-table th, .timesheet-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.timesheet-table th { font-size: var(--font-size-small); font-weight: 700; color: var(--text-muted); }
.timesheet-table th.sortable { cursor: pointer; user-select: none; }
.timesheet-table td.number { text-align: right; font-variant-numeric: tabular-nums; }
.timesheet-table tr.clickable { cursor: pointer; }
.timesheet-table tr.clickable:hover { background: var(--surface-muted); }
.timesheet-table tr.group-row td { background: var(--group-row); font-weight: 700; }
.timesheet-table tr.total-row td { font-weight: 700; border-top: 2px solid var(--primary); }
/* A column the user gave a width, in characters, to (--column-width); the 20px is the cell's padding. */
.timesheet-table .fixed-width {
    width: calc(var(--column-width) + 20px);
    min-width: calc(var(--column-width) + 20px);
    max-width: calc(var(--column-width) + 20px);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Workload columns: hours under what was expected stand out. */
.timesheet-table td.hours-under { color: var(--danger); }
.timesheet-table td.hours-over { color: var(--hours-over); }
.timesheet-summary { color: var(--text-muted); margin-bottom: 8px; }

.view-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }

/* ===== Admin tab ===== */
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.inline-form input[name="initials"], .inline-form input[name="hourlyRate"] { width: 100px; }
.list-editors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
#currencyInput { width: 80px; }
.workload-selects { margin: 0 0 12px; align-items: flex-end; }
.holiday-schedule-list { max-width: 560px; }

/* ===== Dialogs ===== */
dialog {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    width: min(640px, calc(100vw - 32px));
    padding: 20px;
}
dialog::backdrop { background: var(--backdrop); }
dialog h2 { margin-top: 0; }
fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 12px 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.span-2 { grid-column: span 2; }
.column-picker { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.column-picker-row { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.column-picker-row.first-unchecked { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
.column-picker .icon-button { padding: 2px 9px; line-height: 1.2; }
.column-picker .column-width { width: 80px; padding: 2px 6px; }
.column-picker .icon-button:disabled { opacity: 0.3; cursor: default; border-color: var(--border); background: none; }
/* The date and times while clocking out: shown, following the clock, but not editable. */
.entry-time-field input:disabled { background: var(--surface-muted); color: var(--text); opacity: 1; cursor: default; }
.computed-hours { display: flex; align-items: baseline; gap: 8px; font-size: var(--font-size-small); color: var(--text-muted); }
.computed-hours strong { font-size: 22px; color: var(--primary); font-variant-numeric: tabular-nums; }
.dialog-buttons { display: flex; gap: 8px; margin-top: 16px; }
.spacer { flex: 1; }

/* ===== Toast ===== */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--background);
    padding: 10px 18px;
    border-radius: 8px;
    max-width: calc(100vw - 32px);
}
.toast.toast-error { background: var(--danger); color: #fff; }

@media (max-width: 600px) {
    .form-grid, .list-editors { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .user-menu { margin-left: 0; }
    .user-menu-dropdown { right: auto; left: 0; }
    /* Keep the clock status clear of the settings button when it sits in the corner. */
    .clock-card:has(#clockCardSettingsSlot:not(:empty)) { padding-top: 56px; }
}