/*
 * styles.css — Jönköping Kommun · Ledighetsansökan · v3 (Vklass V2 from scratch)
 *
 * Dark mode: class-based only (body.dark-mode). No prefers-color-scheme.
 * Tokens used: --cl-hard, --cl-medium, --cl-soft, --cl-super-soft, --cl-green,
 *              --cl-yellow, --cl-red, --white, --gray-*, --gap, --gap-double
 */

/* ----- Focus ring (per mockup-keyboard-a11y-test) ---------------------- */
:focus-visible {
    outline: 2px solid var(--cl-hard, #1976d2);
    outline-offset: 2px;
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline-offset: 2px;
}

/* ----- Page chrome ----------------------------------------------------- */
.la-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-double, 24px);
    margin-bottom: var(--gap-double, 24px);
    flex-wrap: wrap;
}
.la-page-header__titles h1 {
    margin: 0 0 4px 0;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--gray-darker, #1a1a1a);
}
.la-page-header__titles p {
    margin: 0;
    color: var(--gray-dark, #555);
    font-size: 0.9375rem;
}
.la-page-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ----- Sections (rounded cards used as page sections) ----------------- */
.la-section {
    background: var(--white, #fff);
    border: 1px solid var(--gray-lighter, #e0e0e0);
    border-radius: 4px;
    padding: var(--gap-double, 24px);
    margin-bottom: var(--gap-double, 24px);
}
.la-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gap, 16px);
    gap: var(--gap, 16px);
    flex-wrap: wrap;
}
.la-section__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--gray-darker, #1a1a1a);
}
.la-section__meta {
    color: var(--gray-dark, #555);
    font-size: 0.875rem;
}

/* ----- Summary box (UC-01 + UC-02 supporting summary) ---------------- */
.la-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-double, 24px);
    padding: var(--gap, 16px) var(--gap-double, 24px);
    background: var(--cl-super-soft, #e8eaf6);
    border-left: 4px solid var(--cl-hard, #1976d2);
    border-radius: 4px;
    margin-bottom: var(--gap, 16px);
    color: var(--gray-darker, #1a1a1a);
}
.la-summary__metric {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.la-summary__value {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cl-hard, #1976d2);
}
.la-summary__label {
    font-size: 0.8125rem;
    color: var(--gray-dark, #555);
}
.la-summary__text {
    flex: 1 1 280px;
    font-size: 0.9375rem;
    color: var(--gray-darker, #1a1a1a);
}
.la-summary__help {
    color: var(--gray-dark, #555);
    cursor: help;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    text-decoration: underline dotted;
    font-size: 0.8125rem;
}

/* ----- Filter bar (UC-03) -------------------------------------------- */
.la-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--gap, 16px);
    align-items: end;
}
.la-filter__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.la-filter__field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-darker, #1a1a1a);
    margin-bottom: 4px;
}
.la-filter__field select,
.la-filter__field input[type="date"],
.la-filter__field input[type="text"] {
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--gray-light, #bdbdbd);
    border-radius: 4px;
    font-size: 0.875rem;
    background: var(--white, #fff);
    color: var(--gray-darker, #1a1a1a);
}
.la-filter__field select:focus-visible,
.la-filter__field input:focus-visible {
    border-color: var(--cl-hard, #1976d2);
    box-shadow: 0 0 0 1px var(--cl-hard, #1976d2) inset;
    outline: none;
}
.la-filter__field-error {
    color: var(--cl-red, #d32f2f);
    font-size: 0.75rem;
    margin-top: 4px;
}
.la-filter__actions {
    display: flex;
    gap: 8px;
    align-items: end;
    flex-wrap: wrap;
}
.la-filter-status {
    margin-top: var(--gap, 16px);
    font-size: 0.875rem;
    color: var(--gray-dark, #555);
}

/* ----- V2-ish action buttons (aliases) -------------------------------- */
.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--cl-hard, #1976d2);
    line-height: 1.2;
    font-family: inherit;
}
.v2-btn .material-icons { font-size: 18px; }
.v2-btn--primary {
    background: var(--cl-hard, #1976d2);
    color: var(--white, #fff);
    border-color: var(--cl-hard, #1976d2);
}
.v2-btn--primary:hover {
    background: var(--cl-medium, #3949ab);
    border-color: var(--cl-medium, #3949ab);
}
.v2-btn--secondary {
    background: var(--white, #fff);
    color: var(--cl-hard, #1976d2);
    border-color: var(--gray-light, #bdbdbd);
}
.v2-btn--secondary:hover {
    background: var(--cl-super-soft, #e8eaf6);
}
.v2-btn--danger {
    background: var(--cl-red, #d32f2f);
    color: var(--white, #fff);
    border-color: var(--cl-red, #d32f2f);
}
.v2-btn--danger:hover {
    background: #b71c1c;
    border-color: #b71c1c;
}
.v2-btn--discrete {
    background: transparent;
    color: var(--cl-hard, #1976d2);
    border-color: transparent;
    padding: 0 8px;
}
.v2-btn--discrete:hover {
    background: var(--cl-super-soft, #e8eaf6);
}
.v2-btn[disabled],
.v2-btn[aria-busy="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ----- Application table (vkau-table-like) ---------------------------- */
.la-table-wrap {
    overflow-x: auto;
}
.la-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white, #fff);
    font-size: 0.875rem;
}
.la-table thead {
    background: var(--gray-lightest, #f5f5f5);
}
.la-table th,
.la-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-lighter, #e0e0e0);
    vertical-align: top;
}
.la-table th {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-darker, #1a1a1a);
}
.la-table tbody tr {
    transition: background-color 0.15s ease;
}
.la-table tbody tr:hover {
    background: var(--cl-super-soft, #e8eaf6);
}
.la-table tbody tr.is-expanded {
    background: var(--cl-super-soft, #e8eaf6);
}
.la-table__expand-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--cl-hard, #1976d2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.la-table__expand-btn:hover {
    background: var(--cl-super-soft, #e8eaf6);
}
.la-table__expand-btn[aria-expanded="true"] .material-icons {
    transform: rotate(180deg);
}
.la-table__expand-row td {
    padding: 0;
    background: var(--gray-lightest, #f5f5f5);
}
.la-table__expand-content {
    padding: var(--gap, 16px) var(--gap-double, 24px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gap, 16px);
}
.la-table__expand-field dt {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-dark, #555);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}
.la-table__expand-field dd {
    margin: 0;
    color: var(--gray-darker, #1a1a1a);
    font-size: 0.875rem;
    white-space: pre-wrap;
}

/* ----- Status pills (vk-state-box-like, paired with text label) ------- */
.la-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--gray-lighter, #e0e0e0);
    color: var(--gray-darker, #1a1a1a);
}
.la-status--approved {
    background: #c8e6c9;
    color: #1b5e20;
}
.la-status--denied {
    background: #ffcdd2;
    color: #b71c1c;
}
.la-status--submitted {
    background: #fff8c4;
    color: #6d4c00;
}
.la-status--pending_recommendation {
    background: #ffe0b2;
    color: #6d3a00;
}
.la-status--pending_decision {
    background: #ffe0b2;
    color: #6d3a00;
}
.la-status::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

/* ----- Dark mode overrides for status pills (4.5:1) ------------------ */
body.dark-mode .la-status {
    background: #383838;
    color: #f5f5f5;
}
body.dark-mode .la-status--approved {
    background: #1b3a1c;
    color: #a5d6a7;
}
body.dark-mode .la-status--denied {
    background: #3a1b1b;
    color: #ef9a9a;
}
body.dark-mode .la-status--submitted {
    background: #3a3000;
    color: #ffe082;
}
body.dark-mode .la-status--pending_recommendation,
body.dark-mode .la-status--pending_decision {
    background: #3a2900;
    color: #ffcc80;
}

/* ----- Dark mode for cards + interactive states ---------------------- */
body.dark-mode .la-section,
body.dark-mode .la-table {
    background: var(--white, #1e1e1e);
    border-color: var(--gray-lighter, #383838);
    color: var(--gray-darker, #e0e0e0);
}
body.dark-mode .la-section__title,
body.dark-mode .la-page-header__titles h1,
body.dark-mode .la-table th,
body.dark-mode .la-table td {
    color: var(--gray-darker, #e0e0e0);
}
body.dark-mode .la-table thead {
    background: var(--gray-lightest, #2a2a2a);
}
body.dark-mode .la-table tbody tr:hover,
body.dark-mode .la-table tbody tr.is-expanded {
    background: #2d3548;
}
body.dark-mode .la-summary {
    background: #2d3548;
    color: #f5f5f5;
}
body.dark-mode .la-summary__value {
    color: #8fa0d0;
}
body.dark-mode .la-summary__label,
body.dark-mode .la-section__meta,
body.dark-mode .la-page-header__titles p,
body.dark-mode .la-summary__text,
body.dark-mode .la-filter-status {
    color: #bbb;
}
body.dark-mode .la-filter__field label,
body.dark-mode .la-table__expand-field dd {
    color: #e0e0e0;
}
body.dark-mode .la-filter__field select,
body.dark-mode .la-filter__field input[type="date"],
body.dark-mode .la-filter__field input[type="text"] {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}
body.dark-mode .la-table__expand-row td {
    background: #232323;
}
body.dark-mode .la-table__expand-field dt {
    color: #aaa;
}
body.dark-mode .v2-btn--secondary {
    background: #2a2a2a;
    color: #8fa0d0;
    border-color: #444;
}
body.dark-mode .v2-btn--secondary:hover {
    background: #353f57;
}
body.dark-mode .v2-btn--discrete {
    color: #8fa0d0;
}
body.dark-mode .v2-btn--discrete:hover {
    background: #353f57;
}

/* ----- Form rhythm (V2 forms) ---------------------------------------- */
.v2-form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--gap, 16px);
}
.v2-form-field__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-darker, #1a1a1a);
    margin-bottom: 4px;
}
.v2-form-field__required-marker {
    color: var(--cl-red, #d32f2f);
    margin-left: 2px;
}
.v2-form-field input,
.v2-form-field select,
.v2-form-field textarea {
    border: 1px solid var(--gray-light, #bdbdbd);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: var(--gray-darker, #1a1a1a);
    background: var(--white, #fff);
    font-family: inherit;
}
.v2-form-field textarea {
    min-height: 96px;
    resize: vertical;
}
.v2-form-field input:focus-visible,
.v2-form-field select:focus-visible,
.v2-form-field textarea:focus-visible {
    outline: none;
    border-color: var(--cl-hard, #1976d2);
    box-shadow: 0 0 0 1px var(--cl-hard, #1976d2) inset;
}
.v2-form-field input[aria-invalid="true"],
.v2-form-field select[aria-invalid="true"],
.v2-form-field textarea[aria-invalid="true"] {
    border-color: var(--cl-red, #d32f2f);
}
.v2-form-field__help {
    margin: 4px 0 0 0;
    font-size: 0.75rem;
    color: var(--gray-dark, #555);
}
.v2-form-field__error {
    margin: 4px 0 0 0;
    font-size: 0.75rem;
    color: var(--cl-red, #d32f2f);
}
body.dark-mode .v2-form-field__label,
body.dark-mode .v2-form-field__help,
body.dark-mode .v2-form-field__error {
    color: #e0e0e0;
}
body.dark-mode .v2-form-field__help {
    color: #bbb;
}
body.dark-mode .v2-form-field input,
body.dark-mode .v2-form-field select,
body.dark-mode .v2-form-field textarea {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

/* ----- Validation summary (V2 form) ---------------------------------- */
.v2-validation-summary {
    background: #ffebee;
    border-left: 4px solid var(--cl-red, #d32f2f);
    border-radius: 4px;
    padding: var(--gap, 16px);
    margin-bottom: var(--gap, 16px);
}
.v2-validation-summary__title {
    margin: 0 0 8px 0;
    color: #b71c1c;
    font-size: 1rem;
    font-weight: 500;
}
.v2-validation-summary ul {
    margin: 0;
    padding-left: 20px;
}
.v2-validation-summary a {
    color: #b71c1c;
}
body.dark-mode .v2-validation-summary {
    background: #3a1b1b;
}
body.dark-mode .v2-validation-summary__title,
body.dark-mode .v2-validation-summary a {
    color: #ef9a9a;
}

/* ----- Dialog (uses shared .vk-dialog from athena-components.css for
   visibility, but we add feature-specific surface scaffolding) -------- */
.la-dialog-surface {
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
    max-width: 720px;
    width: 100%;
}
.la-dialog-body {
    overflow-y: auto;
    min-height: 0;
    padding: var(--gap-double, 24px);
    padding-bottom: calc(var(--gap-double, 24px) + env(safe-area-inset-bottom, 0px));
}
.la-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: var(--gap, 16px) var(--gap-double, 24px);
    padding-bottom: calc(var(--gap, 16px) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--gray-lighter, #e0e0e0);
    background: var(--white, #fff);
    flex-wrap: wrap;
}
body.dark-mode .la-dialog-footer {
    background: #1e1e1e;
    border-top-color: #383838;
}

/* Template preview inside decision dialog */
.la-template-preview {
    background: var(--gray-lightest, #f5f5f5);
    border-left: 3px solid var(--cl-medium, #3949ab);
    border-radius: 4px;
    padding: var(--gap, 16px);
    margin-top: 4px;
    margin-bottom: var(--gap, 16px);
    white-space: pre-wrap;
    font-size: 0.875rem;
    color: var(--gray-darker, #1a1a1a);
}
body.dark-mode .la-template-preview {
    background: #2a2a2a;
    color: #e0e0e0;
}
.la-decision-preview {
    background: var(--cl-super-soft, #e8eaf6);
    border-radius: 4px;
    padding: var(--gap, 16px);
    margin-top: var(--gap, 16px);
    font-size: 0.875rem;
    color: var(--gray-darker, #1a1a1a);
    white-space: pre-wrap;
    border-left: 3px solid var(--cl-hard, #1976d2);
}
body.dark-mode .la-decision-preview {
    background: #2d3548;
    color: #e0e0e0;
}

/* ----- Empty state --------------------------------------------------- */
.la-empty {
    padding: var(--gap-double, 24px);
    text-align: center;
    color: var(--gray-dark, #555);
    font-size: 0.9375rem;
}
.la-empty .material-icons {
    font-size: 36px;
    display: block;
    margin: 0 auto 8px auto;
    color: var(--cl-medium, #3949ab);
}
body.dark-mode .la-empty {
    color: #bbb;
}

/* ----- Banner (read-only no-decide-rights) --------------------------- */
.la-banner {
    background: #fff8e1;
    border: 1px solid #ffd54f;
    border-radius: 4px;
    padding: var(--gap, 16px);
    margin-bottom: var(--gap, 16px);
    color: #6d4c00;
    font-size: 0.875rem;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.la-banner .material-icons {
    color: #f57f17;
    flex-shrink: 0;
}
body.dark-mode .la-banner {
    background: #3a3000;
    border-color: #6d4c00;
    color: #ffe082;
}
body.dark-mode .la-banner .material-icons {
    color: #ffd54f;
}

/* ----- Admin: template CRUD card --------------------------------------*/
.la-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr auto;
    gap: var(--gap, 16px);
    align-items: center;
    padding: var(--gap, 16px) 0;
    border-bottom: 1px solid var(--gray-lighter, #e0e0e0);
}
.la-admin-row__title {
    font-weight: 500;
    color: var(--gray-darker, #1a1a1a);
}
.la-admin-row__meta {
    font-size: 0.8125rem;
    color: var(--gray-dark, #555);
}
.la-admin-row__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
body.dark-mode .la-admin-row {
    border-bottom-color: #383838;
}
body.dark-mode .la-admin-row__title { color: #e0e0e0; }
body.dark-mode .la-admin-row__meta { color: #bbb; }

/* ----- Inline meta rows --------------------------------------------- */
.la-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 16px);
    font-size: 0.875rem;
    color: var(--gray-dark, #555);
    margin-bottom: var(--gap, 16px);
}
.la-meta-row strong {
    color: var(--gray-darker, #1a1a1a);
}
body.dark-mode .la-meta-row { color: #bbb; }
body.dark-mode .la-meta-row strong { color: #e0e0e0; }

/* ----- Responsive ---------------------------------------------------- */
@media (max-width: 768px) {
    .la-page-header { flex-direction: column; }
    .la-admin-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .la-admin-row__actions {
        justify-content: flex-start;
    }
}