/* ─── Design tokens ───────────────────────────────────────── */
:root {
    --bg:           #f5f7fa;
    --surface:      #ffffff;
    --surface-alt:  #fafafa;
    --stripe:       #f4f5fa;
    --text:         #1a1a1a;
    --text-muted:   #666;
    --text-subtle:  #888;
    --text-nav:     #555;
    --border:       #e8eaed;
    --border-light: #f0f0f0;
    --accent:       #4285f4;
    --accent-hover: #1a73e8;
    --accent-ring:  rgba(66, 133, 244, 0.12);
    --nav-btn-text: #444;
    --nav-btn-hover-bg: #f0f4ff;
    --nav-btn-hover-border: #b3c2f0;
    --input-hover-border: #dadce0;
    --btn-disabled-bg:    #dadce0;
    --btn-disabled-text:  #aaa;
    --btn-delete-color:   #bbb;
    --btn-delete-hover:   #e53935;
    --shadow:       rgba(0, 0, 0, 0.07);
    --shadow-login: rgba(0, 0, 0, 0.08);
    --toast-ok-bg:     #e6f4ea;
    --toast-ok-text:   #1e6e2e;
    --toast-ok-border: #81c995;
    --toast-err-bg:     #fce8e6;
    --toast-err-text:   #c62828;
    --toast-err-border: #e57373;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:           #111113;
        --surface:      #1e1f22;
        --surface-alt:  #26272b;
        --stripe:       #25262a;
        --text:         #e8eaed;
        --text-muted:   #999;
        --text-subtle:  #666;
        --text-nav:     #aaa;
        --border:       #2e2f33;
        --border-light: #2a2b2f;
        --accent:       #8ab4f8;
        --accent-hover: #aecbfa;
        --accent-ring:  rgba(138, 180, 248, 0.15);
        --nav-btn-text: #ccc;
        --nav-btn-hover-bg:     #1e2a3a;
        --nav-btn-hover-border: #4a6080;
        --input-hover-border: #444;
        --btn-disabled-bg:   #333;
        --btn-disabled-text: #666;
        --btn-delete-color:  #555;
        --btn-delete-hover:  #ef5350;
        --shadow:       rgba(0, 0, 0, 0.4);
        --shadow-login: rgba(0, 0, 0, 0.5);
        --toast-ok-bg:     #1b3a23;
        --toast-ok-text:   #81c995;
        --toast-ok-border: #2d6a3f;
        --toast-err-bg:     #3b1a1a;
        --toast-err-text:   #e57373;
        --toast-err-border: #6d2626;
    }
}

/* ─── Base ────────────────────────────────────────────────── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family:
        system-ui,
        -apple-system,
        sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ─── Header ─────────────────────────────────────────────── */
header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}
header h1 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--text-nav);
}
.header-right a {
    color: var(--text-nav);
    text-decoration: none;
}
.header-right a:hover {
    color: var(--text);
}

/* ─── Page nav bar ────────────────────────────────────────── */
.page-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    max-width: 860px;
    margin: 0 auto;
}
.page-nav h2 {
    font-size: 1.15rem;
    font-weight: 600;
}
.nav-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--nav-btn-text);
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-size: 14px;
    transition: background 0.1s;
    min-width: 110px;
    justify-content: center;
}
.nav-btn:hover {
    background: var(--nav-btn-hover-bg);
    border-color: var(--nav-btn-hover-border);
}

/* ─── Layout ──────────────────────────────────────────────── */
.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px 64px;
}

.card {
    background: var(--surface);
    border-radius: 10px;
    box-shadow: 0 1px 6px var(--shadow);
    overflow: hidden;
}

/* ─── Bottom actions bar ──────────────────────────────────── */
.actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
}
.btn-export {
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0;
}
.btn-export:hover {
    text-decoration: underline;
}

/* ─── Table (shared) ──────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
}
thead th {
    padding: 11px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}
tbody tr:nth-child(odd):not(.link) {
    background: var(--stripe);
}
tbody td {
    padding: 9px 14px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-light);
}
tbody tr:last-child td {
    border-bottom: none;
}
tfoot td {
    padding: 10px 14px;
    font-size: 14px;
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
    border-bottom: none;
}
.col-hours {
    width: 80px;
    text-align: right;
}

/* ─── Week page ───────────────────────────────────────────── */
tr.total td {
    font-weight: 600;
    background: var(--surface-alt);
}
.muted {
    color: var(--text-muted);
}
tr.link td {
    padding: 10px 14px 4px;
    border-bottom: none;
}
tr.link a {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
tr.link a:hover {
    text-decoration: underline;
}

/* ─── Day page ────────────────────────────────────────────── */
#day-form thead .col-hours {
    padding-right: 20px;
}
#day-form tbody td {
    padding: 4px 6px;
}
#day-form tbody td:first-child {
    padding-left: 14px;
}
#day-form tbody td:last-child {
    width: 44px;
    text-align: center;
}
#day-form .col-hours {
    width: 100px;
}

input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 14px;
    background: transparent;
    font-family: inherit;
    color: inherit;
}
input[type="text"]:hover,
input[type="number"]:hover {
    border-color: var(--input-hover-border);
    background: var(--surface);
}
input[type="text"]:focus,
input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.col-hours input {
    text-align: right;
}

.btn-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--btn-delete-color);
    font-size: 20px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s;
}
.btn-delete:hover {
    color: var(--btn-delete-hover);
}

.table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
}
.btn-add {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent);
    font-size: 14px;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
    font-weight: 500;
}
.btn-add:hover {
    color: var(--accent-hover);
}
.total-label {
    font-size: 14px;
    color: var(--text-muted);
}
.total-label strong {
    color: var(--text);
    font-size: 15px;
}

.btn-save {
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    background: var(--accent);
    color: white;
    transition:
        background 0.15s,
        opacity 0.15s;
}
.btn-save:disabled {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    cursor: default;
}
.btn-save:not(:disabled):hover {
    background: var(--accent-hover);
}

#toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
#toast.show {
    opacity: 1;
    pointer-events: auto;
}
#toast.ok {
    background: var(--toast-ok-bg);
    color: var(--toast-ok-text);
    border: 1px solid var(--toast-ok-border);
}
#toast.err {
    background: var(--toast-err-bg);
    color: var(--toast-err-text);
    border: 1px solid var(--toast-err-border);
}

/* ─── User menu dropdown ──────────────────────────────────── */
.user-menu {
    position: relative;
}
.user-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-nav);
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.1s, color 0.1s;
}
.user-menu-toggle:hover {
    background: var(--stripe);
    color: var(--text);
}
.user-menu-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--shadow);
    min-width: 160px;
    z-index: 200;
    overflow: hidden;
}
.user-menu-panel.open {
    display: block;
}
.user-menu-panel a,
.user-menu-panel button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s;
}
.user-menu-panel a:hover,
.user-menu-panel button:hover {
    background: var(--stripe);
}
.menu-item-danger {
    color: var(--btn-delete-hover) !important;
}
.menu-item-danger:hover {
    background: var(--stripe);
}

/* ─── Delete account modal ────────────────────────────────── */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 300;
    align-items: center;
    justify-content: center;
}
.modal-backdrop.open {
    display: flex;
}
.modal {
    background: var(--surface);
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 8px 32px var(--shadow);
}
.modal h2 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.modal p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.btn-cancel {
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s;
}
.btn-cancel:hover {
    background: var(--stripe);
}
.btn-danger {
    padding: 8px 18px;
    border-radius: 6px;
    border: none;
    background: var(--btn-delete-hover);
    color: white;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
.btn-danger:hover {
    opacity: 0.85;
}

/* ─── Login page ──────────────────────────────────────────── */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 56px 48px;
    text-align: center;
    box-shadow: 0 4px 24px var(--shadow-login);
    width: 360px;
}
.login-card h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.subtitle {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 40px;
}
.btn-google {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition:
        box-shadow 0.2s,
        background 0.1s;
    width: 100%;
    justify-content: center;
}
.btn-google:hover {
    box-shadow: 0 2px 8px var(--shadow-login);
    background: var(--surface-alt);
}