/* Tid — grundstilar. Mobil först, ljust/mörkt via prefers-color-scheme. */

:root {
    --coffee-bean: #0F0915;
    --dusk-blue: #3F506B;
    --hot-berry: #C6316F;
    --old-rose: #B97D98;
    --soft-linen: #EAE6DD;
    --soft-pink: #F4E3EC;

    --color-bg: var(--soft-linen);
    --color-surface: #ffffff;
    --color-text: var(--coffee-bean);
    --color-text-muted: #5a5260;
    --color-border: rgba(15, 9, 21, 0.14);
    --color-primary: var(--hot-berry);
    --color-primary-text: #ffffff;
    --color-secondary: var(--dusk-blue);
    --color-accent-bg: var(--soft-pink);
    --color-muted-accent: var(--old-rose);
    --color-danger: #a8123a;
    --amber: #E8A33D;
    --focus-ring: 0 0 0 3px rgba(198, 49, 111, 0.45);

    --radius: 0.6rem;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: var(--coffee-bean);
        --color-surface: #1d1521;
        --color-text: var(--soft-linen);
        --color-text-muted: #b9b1c4;
        --color-border: rgba(234, 230, 221, 0.16);
        --color-primary: var(--hot-berry);
        --color-primary-text: #ffffff;
        --color-secondary: var(--soft-linen);
        --color-accent-bg: #3a1f2c;
        --color-muted-accent: var(--old-rose);
        --color-danger: #ff6b8f;
        --focus-ring: 0 0 0 3px rgba(198, 49, 111, 0.6);
    }
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    font-size: 1rem;
}

a { color: var(--color-secondary); }
a:hover { color: var(--color-primary); }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid transparent;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

/* Header */
.app-header {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.app-header-inner {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.brand {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary-text);
    text-decoration: none;
    letter-spacing: 0.02em;
}
/* Every link in the header sits on the primary-color bar, so the generic
   a:hover rule (which assumes a light page background) must not apply here
   — it would set the text to the same color as the bar itself. */
.app-header a:hover { color: var(--color-primary-text); text-decoration: underline; }
.main-nav {
    display: flex;
    gap: 1rem;
    flex: 1;
    flex-wrap: wrap;
}
.main-nav a {
    color: var(--color-primary-text);
    text-decoration: none;
    font-weight: 600;
    opacity: 0.85;
}
.main-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; }
.user-menu {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-primary-text);
}
.user-menu a { color: var(--color-primary-text); text-decoration: underline; }

/* Layout */
main.day-view {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

/* Day navigation */
.day-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.day-nav-current {
    text-align: center;
    flex: 1;
    min-width: 12rem;
}
.day-nav-current h1 {
    font-size: 1.3rem;
    margin: 0 0 0.35rem;
    text-transform: capitalize;
}
.date-jump {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}
.date-jump input[type="date"] {
    font: inherit;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}
.date-jump-iso {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.today-link {
    display: block;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.badge-holiday { background: var(--color-accent-bg); color: var(--color-text); }
.badge-halfday { background: var(--amber); color: var(--coffee-bean); }
.badge-weekend { background: var(--color-border); color: var(--color-text-muted); }
.badge-override { background: var(--color-muted-accent); color: var(--coffee-bean); }

/* Entries */
.entries { margin-bottom: 1.5rem; }
.empty-state { color: var(--color-text-muted); font-style: italic; }

.entry-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.entry-row {
    display: grid;
    grid-template-columns: 1fr 4.2rem 2.2rem;
    align-items: center;
    gap: 0.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.6rem 0.7rem;
}
.entry-task {
    font-weight: 600;
    overflow-wrap: break-word;
}
.entry-row input[type="number"] {
    width: 100%;
}
.new-entry-row .entry-task-input {
    width: 100%;
}
.btn-remove {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-danger);
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    justify-self: center;
}
.btn-remove:hover { background: var(--color-accent-bg); }

.day-total {
    font-size: 1.05rem;
    text-align: right;
    margin: 0.75rem 0 0;
}
.day-actions { text-align: right; margin-top: 0.5rem; }

/* Quick add chips */
.quick-add { margin-bottom: 1.5rem; }
.quick-add h2 { font-size: 1rem; margin-bottom: 0.15rem; }
.quick-add .hint { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 0; }
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.chip-form { display: contents; }
.chip {
    background: var(--color-accent-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.chip:hover { background: var(--color-muted-accent); color: var(--coffee-bean); }

/* Forms */
input[type="text"], input[type="number"], input[type="password"], input[type="date"], select {
    font: inherit;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
}

.btn {
    font: inherit;
    font-weight: 700;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    padding: 0.6rem 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn:hover { background: var(--color-accent-bg); }
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}
.btn-primary:hover { background: var(--color-primary); filter: brightness(1.08); }
.btn-sm { padding: 0.35rem 0.6rem; font-size: 0.85rem; }
.btn-nav { white-space: nowrap; }
.btn-danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: var(--color-accent-bg); }

/* Confirm-delete dialog (native <dialog>) */
dialog.confirm-dialog {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    max-width: 22rem;
    width: calc(100% - 2rem);
    background: var(--color-surface);
    color: var(--color-text);
}
dialog.confirm-dialog::backdrop { background: rgba(15, 9, 21, 0.5); }
dialog.confirm-dialog p { margin: 0 0 1.25rem; }
.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Auth page */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    width: 100%;
    max-width: 22rem;
}
.auth-card h1 { color: var(--color-primary); margin-bottom: 0; }
.auth-card .subtitle { color: var(--color-text-muted); margin-top: 0.2rem; }
.auth-card form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.auth-card label { font-weight: 600; font-size: 0.85rem; }
.auth-card button { margin-top: 0.75rem; }

.alert {
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.alert-error {
    background: var(--color-accent-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

@media (min-width: 40rem) {
    .day-nav-current h1 { font-size: 1.5rem; }
}

/* Week view */
main.week-view {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}
.week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.week-nav-current { text-align: center; flex: 1; min-width: 14rem; }
.week-nav-current h1 { font-size: 1.3rem; margin: 0; text-transform: capitalize; }
.week-range { color: var(--color-text-muted); font-size: 0.9rem; margin: 0.1rem 0 0.35rem; }

.table-scroll { overflow-x: auto; margin-bottom: 1rem; }

.week-grid, .holidays-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 40rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.week-grid th, .week-grid td, .holidays-table th, .holidays-table td {
    border: 1px solid var(--color-border);
    padding: 0.45rem;
    text-align: center;
}
.week-grid thead th, .holidays-table thead th { vertical-align: bottom; font-weight: 700; }
.week-grid .task-col { text-align: left; min-width: 9rem; }
.week-grid tbody th { text-align: left; font-weight: 600; }
.week-grid tbody th input[type="text"] { font-weight: 600; width: 100%; min-width: 9rem; }
.week-grid .day-head-weekday { display: block; }
.week-grid .day-head-date { display: block; font-weight: 400; color: var(--color-text-muted); font-size: 0.8rem; }
.week-grid .day-head-badge {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.15rem;
}
/* <details>/<summary> istället för bara title: title syns aldrig vid tryck på
   pekskärm, så utan detta kunde mobilanvändare inte se vilken helgdag badgen
   syftar på. Ger både hover (title, direkt) och tryck (tvekar upp namnet) utan
   någon JS, och håller kolumnbredden oförändrad tills man faktiskt öppnar den. */
.week-grid .day-head-badge summary {
    cursor: pointer;
    list-style: none;
}
.week-grid .day-head-badge summary::-webkit-details-marker { display: none; }
.week-grid .day-head-badge-name {
    display: block;
    font-size: 0.62rem;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}
.week-grid input[type="number"] {
    width: 3.4rem;
    padding: 0.3rem;
    text-align: center;
}
.week-grid .new-task-row input[type="text"] { min-width: 8rem; width: 100%; }
.week-grid .row-total, .week-grid .col-total, .week-grid .grand-total {
    font-weight: 700;
    white-space: nowrap;
}
.week-grid tfoot th, .week-grid tfoot td { background: var(--color-accent-bg); }
.week-grid col.col-weekend { background-color: var(--color-border); }
.week-grid .empty-state, .holidays-table .empty-state { padding: 1rem; }
.week-grid .remove-col, .holidays-table .remove-col { width: 2.6rem; padding: 0.3rem; }

.week-actions, .holidays-actions { text-align: right; margin-top: 0.75rem; }

/* Admin – helgdagar */
.holidays-table .date-col { text-align: left; white-space: nowrap; }
.holidays-table .name-col { text-align: left; min-width: 10rem; }
.holidays-table .name-col input[type="text"] { min-width: 9rem; }
.holidays-table .source-col { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; }
.holidays-table .effect-col select { min-width: 8rem; }
.holidays-table .icon-col input { width: 3.2rem; text-align: center; padding: 0.55rem 0.3rem; }
.holidays-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.holidays-add .field { display: flex; flex-direction: column; gap: 0.25rem; }
.holidays-add label { font-size: 0.85rem; color: var(--color-text-muted); }
.holidays-add input, .holidays-add select { width: auto; }

/* Footer / save status */
.app-footer {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}
.save-status {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
    min-height: 1.2em;
    margin: 0;
}

/* Save toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-primary-text);
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(15, 9, 21, 0.25);
    animation: toast-fade 4s ease forwards;
    z-index: 10;
}
@keyframes toast-fade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(0.5rem); }
    10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .toast { animation: toast-fade-simple 4s linear forwards; }
    @keyframes toast-fade-simple {
        0%, 85% { opacity: 1; }
        100% { opacity: 0; visibility: hidden; }
    }
}

/* Month view */
main.month-view {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}
.month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.month-nav-current { text-align: center; flex: 1; min-width: 14rem; }
.month-nav-current h1 { font-size: 1.3rem; margin: 0 0 0.35rem; }

.month-summary {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.stat {
    flex: 1;
    min-width: 8rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    text-align: center;
}
.stat-value { display: block; font-size: 1.4rem; font-weight: 800; color: var(--color-primary); }
.stat-label { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.15rem; }

.month-grid {
    border-collapse: collapse;
    width: 100%;
    min-width: 32rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.month-grid th, .month-grid td {
    border: 1px solid var(--color-border);
    padding: 0;
    text-align: center;
    vertical-align: top;
}
.month-grid thead th { padding: 0.5rem; font-weight: 700; }
.month-day-empty { background: var(--color-bg); }
.month-day { height: 4.5rem; }
.month-day-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.15rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.3rem;
    text-decoration: none;
    color: var(--color-text);
}
.month-day-link:hover { background: var(--color-accent-bg); }
.month-day-number { font-weight: 700; }
.month-day.is-today .month-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.month-day-hours { font-size: 0.8rem; color: var(--color-secondary); font-weight: 600; }
.month-day-badge { font-size: 0.85rem; }
.month-day.is-weekend { background: var(--color-border); }
.month-day.is-holiday { background: var(--color-accent-bg); }

/* Admin – helgdagar */
main.admin-view {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}
.admin-hint { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 1rem; }