/* ==========================================================================
   TCompliance
   Färgerna och typsnittet är hämtade från WinForms-appen så att den som kan
   skrivbordsversionen känner igen sig: samma gröna knappar, samma gråa
   tabellhuvuden, samma blått för schema och rött för avvikelser.
   ========================================================================== */

:root {
    --green:        #2ECC71;  /* C#-appens knappgrön */
    --green-deep:   #17915A;  /* samma familj, men läsbar med vit text */
    --green-dark:   #0F6B41;
    --green-tint:   #E8F7EF;

    --blue:         #3498DB;  /* "Schema" i C#-appen */
    --blue-deep:    #21678F;
    --blue-tint:    #E7F1F8;

    --red:          #E74C3C;  /* "Arbetat"-avvikelser */
    --red-deep:     #B33222;
    --red-tint:     #FBEAE7;

    --amber-deep:   #8A6412;
    --amber-tint:   #FBF1DA;

    --ink:          #1D2321;
    --ink-soft:     #55605A;
    --ink-faint:    #838E88;

    --ground:       #F4F6F5;
    --surface:      #FFFFFF;
    --zebra:        #F2F4F3;   /* C#: 230,230,230, något ljusare för skärm */
    --header-bg:    #F5F5F5;
    --rule:         #DFE4E1;
    --rule-soft:    #EDF0EE;

    --radius:       6px;
    --shadow:       0 1px 2px rgba(20, 30, 25, .06), 0 4px 12px rgba(20, 30, 25, .04);

    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;

    /* Egen chevron till <select> — den systemritade pilen ser främmande ut. */
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2355605A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.75 4.5 6 7.75 9.25 4.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink:        #E7EDEA;
        --ink-soft:   #A6B2AC;
        --ink-faint:  #7A857F;
        --ground:     #121614;
        --surface:    #191F1C;
        --zebra:      #1E2523;
        --header-bg:  #212927;
        --rule:       #2E3835;
        --rule-soft:  #262E2B;
        --green-deep: #43C489;
        --green-dark: #6FD6A5;
        --green-tint: #14301F;
        --blue-deep:  #6FB3DA;
        --blue-tint:  #14252E;
        --red-deep:   #E58A78;
        --red-tint:   #2E1A16;
        --amber-deep: #D6AE60;
        --amber-tint: #2B2314;
        --shadow:     0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);

        --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23A6B2AC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.75 4.5 6 7.75 9.25 4.5'/%3E%3C/svg%3E");
    }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
}

/* ---------- topbar ---------- */

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
    text-decoration: none;
    flex: none;
}

/* Appikonen. Rundade hörn som en ikon på en hemskärm; bilden är nästan
   kvadratisk så cover klipper bort de sista pixlarna snyggt. */
.brand-mark {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 22%;
    background: url("../images/icon.png") center / cover no-repeat;
}

.topnav {
    display: flex;
    gap: 4px;
    flex: 1;
}

.topnav a {
    padding: 7px 14px;
    border-radius: var(--radius);
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 500;
}

.topnav a:hover { background: var(--rule-soft); color: var(--ink); }
.topnav a.active { background: var(--green-tint); color: var(--green-dark); }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.user-name { font-weight: 500; }

.role-chip {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--rule-soft);
    color: var(--ink-soft);
}

/* ---------- layout ---------- */

.shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 24px 80px;
}

.centered {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 4px;
}

h2 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}

.subtitle { color: var(--ink-soft); margin: 0; }

/* ---------- cards ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 18px;
}

.card-tight { padding: 0; overflow: hidden; }

.card-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

thead th {
    background: var(--header-bg);
    text-align: left;
    font-weight: 600;
    color: var(--ink);
    padding: 11px 16px;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}

tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--ink-soft);
}

tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { color: var(--ink); font-weight: 500; }

td.num, th.num { text-align: right; }
td.mid, th.mid { text-align: center; }

.src-schema { color: var(--blue-deep); font-weight: 600; }
.src-worked { color: var(--green-dark); font-weight: 600; }
.is-violation { color: var(--red-deep); font-weight: 600; }

/* Varningslistan: varje rad är ett regelbrott, och ett brott som bygger på
   stämplad tid ("Arbetat") väger tyngre än ett schema som ännu kan ändras —
   därför rött här, tvärtemot rådatavyn där grönt står för normal stämpling. */
.warnings-table .src-worked { color: var(--red-deep); }

.empty {
    padding: 40px 22px;
    text-align: center;
    color: var(--ink-faint);
}

/* ---------- forms ---------- */

label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--ink);
}

.field { margin-bottom: 16px; }

.hint {
    font-size: 12.5px;
    color: var(--ink-faint);
    margin-top: 6px;
}

input[type=text], input[type=email], input[type=password],
input[type=number], select, textarea {
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--green-deep);
    box-shadow: 0 0 0 3px var(--green-tint);
}

input.mono { font-family: var(--mono); letter-spacing: .04em; }

/* Tunn, temaenlig <select> — ingen systempil, ingen inre bård. */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}

select::-ms-expand { display: none; }

/* Listan öppnas OS-ritad; sätt färgerna så mörkt läge inte blir vit-på-vitt. */
select option { color: var(--ink); background: var(--surface); }

.checkline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule-soft);
}

.checkline:last-child { border-bottom: none; }
.checkline label { margin: 0; font-weight: 400; }
.checkline input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--green-deep); }

.error {
    color: var(--red-deep);
    font-size: 13px;
    margin-top: 6px;
    font-weight: 500;
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary { background: var(--green-deep); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--rule);
}
.btn-secondary:hover { background: var(--rule-soft); }

.btn-danger { background: var(--surface); color: var(--red-deep); border-color: var(--red-deep); }
.btn-danger:hover { background: var(--red-tint); }

.btn-block { width: 100%; padding: 12px 18px; font-size: 15px; }

.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ink-soft);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.btn-link:hover { color: var(--ink); }

.btn:focus-visible, .btn-link:focus-visible, a:focus-visible {
    outline: 2px solid var(--green-deep);
    outline-offset: 2px;
}

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- notices ---------- */

.notice {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    border: 1px solid;
    font-weight: 500;
}

.notice-ok   { background: var(--green-tint); border-color: var(--green-deep); color: var(--green-dark); }
.notice-bad  { background: var(--red-tint);   border-color: var(--red-deep);   color: var(--red-deep); }
.notice-warn { background: var(--amber-tint); border-color: var(--amber-deep); color: var(--amber-deep); }

/* ---------- auth ---------- */

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 36px 34px;
}

.auth-head { text-align: center; margin-bottom: 26px; }

.auth-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 22%;
    background: url("../images/icon.png") center / cover no-repeat;
}

.auth-head h1 { font-size: 21px; }
.auth-head p { color: var(--ink-soft); margin: 0; }

.qr-frame {
    background: #fff;
    padding: 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    width: fit-content;
}

.qr-frame img { display: block; width: 190px; height: 190px; }

.secret-strip {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .08em;
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 10px 12px;
    text-align: center;
    word-break: break-all;
}

.code-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    font-family: var(--mono);
    font-size: 14px;
    margin: 16px 0;
}

.code-list span {
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 8px 10px;
    text-align: center;
}

.link-strip {
    font-family: var(--mono);
    font-size: 12.5px;
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 12px;
    word-break: break-all;
    margin-top: 10px;
}

/* ---------- misc ---------- */

.meta-row {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    color: var(--ink-soft);
    font-size: 13px;
}

.meta-row b { color: var(--ink); font-weight: 600; }

.quota-bar {
    height: 6px;
    background: var(--rule-soft);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}

.quota-fill { height: 100%; background: var(--green-deep); }
.quota-fill.full { background: var(--red-deep); }

.key-set    { color: var(--green-dark); font-weight: 600; }
.key-unset  { color: var(--amber-deep); font-weight: 600; }

/* ---------- hämtning ---------- */

.fetch-status { margin-top: 20px; }

.fetch-status-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 13.5px;
    color: var(--ink-soft);
}

.progress {
    height: 8px;
    background: var(--rule-soft);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: var(--green-deep);
    transition: width .35s ease;
}

.progress-fill.failed { background: var(--red-deep); }

.dataset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 20px 0 12px;
}

.dataset-grid > div {
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.dataset-grid b {
    display: block;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.stat-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ---------- rapportvyer: allt i en container som fyller skärmen ---------- */

/* Sidan i sig scrollar inte — bara containern gör det. */
body:has(.report-frame) { overflow: hidden; }

main.report-main {
    /* Grundbredd 1360 px. Breda tabeller får tänja ut containern ända till
       fönsterkanten i stället för att klämmas ihop bakom en inre scroll. */
    width: fit-content;
    min-width: min(1360px, 100%);
    max-width: 100%;
    margin: 0 auto;
    padding: 14px 20px 14px;
    height: calc(100dvh - 56px);   /* 56 = topbar */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.report-frame {
    position: relative;   /* ankare för laddningsspinnern */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Mjuk växling: flikbyte, filter och sortering byter ut .report-frame via
   fetch i stället för att ladda om sidan. Dröjer svaret dimmas tabellen och
   en spinner visas (reports.js lägger .rpt-loading på <body>). */
body.rpt-loading .frame-body {
    opacity: .4;
    pointer-events: none;
    transition: opacity .1s ease;
}

body.rpt-loading .report-frame::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid var(--rule);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: rpt-spin .7s linear infinite;
    z-index: 40;
}

@keyframes rpt-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
    body.rpt-loading .report-frame::after { animation-duration: 1.6s; }
}

/* Sticky topp: enhetsnamn, flikar, periodnavigering, filter. */
.frame-head {
    flex: none;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}
.frame-head > * { padding-left: 16px; padding-right: 16px; }

/* Den enda scrollytan — både lodrätt och vågrätt. */
.frame-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Sticky vid botten: statusraden, som i C#-appen. */
.frame-foot {
    flex: none;
    border-top: 1px solid var(--rule);
    background: var(--surface-alt);
}

/* warnings.js byter bara ut #warnings-results innehåll vid ett filterbyte
   (se warnings-results.blade.php). Wrappern är själv en flexkolumn som tar
   den lediga höjden, så .frame-body (flex:1, overflow:auto) scrollar internt
   och .frame-foot (export/hämta-knapparna) stannar i botten precis som när
   de ligger direkt i .report-frame. Utan det växte frame-body med hela
   tabellen och tryckte ut frame-foot under en sida som aldrig scrollar.

   INTE display:contents (tidigare lösning): Chrome kraschade
   (STATUS_BREAKPOINT) när barnen till en display:contents-wrapper i en
   flexbox byttes ut via innerHTML — särskilt när antalet flex-barn ändrades,
   t.ex. när "Visar de första N"-raden försvinner för att ett regelurval
   gett färre träffar än taket. */
#warnings-results {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Tabellhuvudet fastnar mot frame-body när man scrollar. */
.frame-body table.dense thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--header-bg);
    box-shadow: inset 0 -1px 0 var(--rule);
}

.shell-wide { max-width: 1600px; }

.report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 10px;
}

.back-link {
    font-size: 12px;
    color: var(--ink-soft);
    text-decoration: none;
}
.back-link:hover { color: var(--ink); }

.report-head h1 { margin: 0; font-size: 18px; }

.dataset-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 13px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.report-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--rule);
    padding-top: 0;
    padding-bottom: 0;
}

.report-tabs a {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.report-tabs a:hover { color: var(--ink); }

.report-tabs a.active {
    color: var(--green-dark);
    border-bottom-color: var(--green-deep);
}

.period-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.period-nav .btn { padding: 6px 12px; }

.period-picker { flex: 0 1 380px; }
.period-picker select { width: 100%; }

/* Periodnavigering + filter på samma rad. Filtret tar återstoden av bredden
   och bryter ner under periodväljaren först när det inte får plats. */
.head-filters {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 20px;
}
.head-filters .period-nav { flex: 0 1 auto; min-width: 0; }
.head-filters .filter-bar { flex: 1; min-width: 320px; }

.filter-bar {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* I containern: ingen kortram, tajt lodrätt utrymme. */
.frame-head .filter-bar {
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--rule-soft);
    border-radius: 0;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--surface-alt);
}
.frame-head .filter-bar .field label { font-size: 11px; margin-bottom: 3px; }
.frame-head .filter-bar input { padding: 6px 10px; font-size: 13px; }
.frame-head .filter-bar select {
    padding: 6px 26px 6px 10px;
    font-size: 13px;
    background-position: right 9px center;
}

/* Granne med periodväljaren nu, inte en egen rad: bort med skiljelinjen och
   den avvikande bakgrunden som markerade filterraden mot perioden ovanför. */
.frame-head .head-filters .filter-bar {
    border-top: none;
    background: transparent;
}

.frame-head .hidden-bar {
    margin: 0;
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--rule-soft);
}

/* Info-badgen sitter ovanför "Regler"-dropdownen, som ett fältets <label>
   fast klickbar — så dropdownen behöver inte längre align-self:flex-end
   för att hamna i linje med de andra fälten (den har nu egen "etikett"). */
.rule-filter-field { display: flex; flex-direction: column; }

.rule-info-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    margin-bottom: 3px;
    padding: 0;
    border: none;
    background: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
}
.rule-info-badge:hover { color: var(--green-dark); }
.rule-info-badge-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 10px;
    font-style: italic;
    line-height: 1;
}

.rule-filter { position: relative; }

.rule-filter summary {
    /* Samma höjd som fälten bredvid (Källa, Sök) i filterraden. */
    padding: 6px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-size: 13px;
    list-style: none;
}
.rule-filter summary::-webkit-details-marker { display: none; }
.rule-filter summary::after { content: ' ▾'; color: var(--ink-faint); }

.rule-filter-list {
    position: absolute;
    z-index: 10;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 6px 12px;
    /* Nio regler ryms utan scroll; taket är bara en nödbroms. */
    max-height: 380px;
    overflow-y: auto;
}

/* Tät lista — inga skiljelinjer, minimalt med luft. Skiljer sig medvetet från
   den delade .checkline (som används i formulär med glesare rader). */
.rule-filter-list .checkline {
    padding: 3px 0;
    gap: 8px;
    border-bottom: none;
}

.rule-filter-actions {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 5px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rule-soft);
}

thead th a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
thead th a:hover { text-decoration: underline; }

tfoot td {
    padding: 12px 16px;
    border-top: 2px solid var(--rule);
    background: var(--header-bg);
    color: var(--ink);
}

.legend {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--ink-faint);
}
.legend b { color: var(--ink-soft); font-weight: 600; }

.report-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    padding: 20px 22px;
}

.report-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    text-decoration: none;
    background: var(--surface);
}
.report-link:hover { border-color: var(--green-deep); background: var(--green-tint); }
.report-link b { color: var(--ink); font-size: 15px; }
.report-link span { color: var(--ink-soft); font-size: 12.5px; }

/* ---------- tät tabell, WinForms-känsla ---------- */

table.dense {
    font-size: 12.5px;
    line-height: 1.35;
}

table.dense thead th {
    padding: 7px 10px;
    font-size: 10.5px;
    letter-spacing: .06em;
    vertical-align: bottom;
}

/* Radbrutna kolumnrubriker: smalare, centrerade och tillåtna att brytas
   över flera rader så att långa rubriker inte breddar hela tabellen. */
table.dense thead th.wrap,
table.dense thead th.wrap a {
    white-space: normal;
}

table.dense thead th.wrap {
    text-align: center;
    width: 4.75rem;
    line-height: 1.2;
}

table.dense thead th.wrap a {
    display: inline-block;
}

table.dense tbody td,
table.dense tfoot td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--rule-soft);
}

table.dense tbody tr:hover { background: var(--green-tint); }

table.dense .col-icons,
table.dense .col-icon {
    width: 26px;
    padding-left: 6px;
    padding-right: 0;
    text-align: center;
}

.icon-btn,
.check-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    display: inline-flex;
    opacity: .45;
    transition: opacity .1s;
}
.icon-btn { font-size: 13px; filter: grayscale(1); }
tr:hover .icon-btn,
tr:hover .check-btn { opacity: .9; }
.icon-btn:hover { opacity: 1; filter: none; }

.check-box {
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--ink-faint);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--green-dark);
    background: var(--surface);
}
.check-btn:hover .check-box { border-color: var(--green-deep); }

.tab-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 10px;
    background: var(--red-tint);
    color: var(--red-deep);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hidden-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    margin-bottom: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--ink-soft);
}
.hidden-bar form { display: inline; }

.statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    font-size: 12px;
    color: var(--ink-soft);
}
.statusbar .btn { padding: 5px 12px; font-size: 12px; }

/* Tabellen går kant i kant i containern — ingen inre scroll, frame-body sköter den. */
.frame-body .card,
.frame-body .card-tight {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.frame-body .table-wrap { overflow: visible; }
.frame-body table.dense { min-width: max-content; }

/* ---------- hämtdialogen ---------- */

.progress-lg { height: 12px; }

.fetch-picker section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rule-soft);
}
.fetch-picker section:last-of-type { border-bottom: none; }
.fetch-picker h2 { font-size: 15px; margin-bottom: 4px; }

.period-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}
.period-list.disabled { opacity: .4; pointer-events: none; }

.period-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 13px;
    cursor: pointer;
}
.period-option:hover { background: var(--surface-alt); }
.period-option input { width: 16px; height: 16px; accent-color: var(--green-deep); }
.period-option .tag {
    font-family: var(--font);
    font-style: normal;
    font-size: 11px;
    color: var(--green-dark);
    background: var(--green-tint);
    padding: 1px 7px;
    border-radius: 10px;
}

.custom-fields { display: flex; flex-direction: column; gap: 14px; }
.custom-fields.disabled { opacity: .4; pointer-events: none; }
.field-pair { display: flex; gap: 14px; }
.field-pair .field { flex: 1; margin: 0; }

/* ---------- hämtdialogen, som C#-appens "Välj perioder att hämta" ---------- */

.fetch-dialog {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.fetch-dialog-head {
    position: relative;
    padding: 20px 26px 16px;
    border-bottom: 1px solid var(--rule);
}
.fetch-dialog-head h1 { font-size: 19px; margin: 0 0 2px; }

.modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
    border-radius: var(--radius);
}
.modal-close:hover { background: var(--surface-alt); color: var(--ink); }

.fetch-dialog > *:not(.fetch-dialog-head) { padding-left: 26px; padding-right: 26px; }
.fetch-dialog .notice { margin: 16px 26px 0; }

#fetch-form { padding-top: 18px; padding-bottom: 22px; }
#fetch-progress { padding-top: 24px; padding-bottom: 24px; }

.fetch-progress-msg { font-size: 15px; font-weight: 500; margin: 0 0 12px; }

.fetch-section-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
}

.period-box {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--ground);
}
.period-box.disabled { opacity: .4; pointer-events: none; }

.period-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 13px;
    cursor: pointer;
}
.period-row:hover { background: var(--surface); }
.period-row input { width: 16px; height: 16px; accent-color: var(--green-deep); }
.period-row .tag {
    font-family: var(--font);
    font-style: normal;
    font-size: 11px;
    color: var(--green-dark);
    background: var(--green-tint);
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: auto;
}

.fetch-custom {
    margin: 22px 0 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 6px 16px 16px;
}
.fetch-custom legend {
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
}
.custom-toggle { border: none; padding: 6px 0 12px; }
.custom-toggle i { font-size: 13px; color: var(--ink-soft); }

.fetch-submit {
    width: 100%;
    margin-top: 22px;
    padding: 15px;
    font-size: 15px;
    letter-spacing: .03em;
}

.fetch-dialog-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rule-soft);
}
.fetch-dialog-foot form { display: inline; }

.fetch-existing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* Centrerad men scrollbar om dialogen är högre än skärmen. */
main.centered { align-items: flex-start; padding-top: 6vh; padding-bottom: 6vh; overflow-y: auto; }

/* ---------- hämtmodal ovanpå rapportcontainern ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 20px 5vh;
    overflow-y: auto;
    background: rgba(20, 30, 25, .45);
    backdrop-filter: blur(2px);
}

/* display:flex ovan har samma specificitet som [hidden] och skulle annars
   vinna — så modalen kunde varken starta dold eller stängas. */
.modal-backdrop[hidden] { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-backdrop { background: rgba(0, 0, 0, .6); }
}
:root[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .6); }

/* ---------- liten dialog: avtalshistorik, dolda medarbetare ---------- */

.mini-dialog {
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.mini-dialog-head {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 46px 13px 20px;
    border-bottom: 1px solid var(--rule);
}
.mini-dialog-head h1 { font-size: 16px; margin: 0; }

.mini-dialog-body { padding: 4px 20px 10px; overflow-y: auto; }
.mini-dialog-body table.dense { min-width: 0; }
.mini-dialog-body .empty { padding: 24px 0; }

.mini-dialog-foot {
    padding: 11px 20px;
    border-top: 1px solid var(--rule-soft);
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.unhide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: flex-end;
}
.unhide-actions form { display: inline; }

/* "Om reglerna" — namn + beskrivning för varje regel, öppnad från
   info-badgen ovanför regel-dropdownen i varningslistan. */
.rules-info-list { margin: 0; }
.rules-info-item { padding: 10px 0; }
.rules-info-item + .rules-info-item { border-top: 1px solid var(--rule-soft); }
.rules-info-item dt { font-weight: 600; margin-bottom: 2px; }
.rules-info-item dd { margin: 0; color: var(--ink-soft); font-size: 13px; }

/* "Avtal i perioden"-cellen: ser ut som texten men går att klicka. */
.cell-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.cell-link:hover { color: var(--green-dark); text-decoration: underline; }
.cell-link:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

.frame-body-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-size: 13px;
}

/* ---------- restaurangväljaren ---------- */

.picker-list { display: flex; flex-direction: column; gap: 6px; }

.picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
}
.picker-row:hover { border-color: var(--green-deep); background: var(--green-tint); }
.picker-arrow { color: var(--ink-faint); }
.picker-row:hover .picker-arrow { color: var(--green-dark); }

/* ---------- användarstatistik ---------- */

.user-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--ink-soft);
}
.user-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.user-stats i { font-style: normal; color: var(--ink-faint); }
.user-stats-seen { color: var(--ink-faint); }
.user-stats-seen b { color: var(--ink-soft); font-weight: 600; }

/* ---------- enhets-accordion (org-admin) ---------- */

.unit-accordion {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 10px;
}
.unit-accordion > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.unit-accordion > summary::-webkit-details-marker { display: none; }
.unit-accordion > summary::after { content: '▾'; margin-left: auto; color: var(--ink-faint); }
.unit-accordion[open] > summary::after { content: '▴'; }
.unit-accordion[open] > summary { border-bottom: 1px solid var(--rule-soft); }
.unit-accordion .accordion-body { padding: 16px; display: grid; gap: 20px; }
.unit-accordion .summary-meta { font-weight: 400; font-size: 12.5px; color: var(--ink-faint); }
.access-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.access-row:last-child { border-bottom: none; }
.access-row .access-who { min-width: 180px; }
.access-row .access-who b { display: block; }
.access-row .access-actions { margin-left: auto; display: flex; gap: 8px; }
td .access-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ==========================================================================
   Tunn, temaenlig <select> (select.js ersätter det riktiga elementet med
   en egen knapp + lista; reglerna för nativ <select> ovan är fallback).
   ========================================================================== */

.tc-select { position: relative; width: 100%; }

/* Det riktiga elementet finns kvar som sanningskälla men syns inte. */
.tc-select > select {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tc-select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
}
.tc-select-btn:disabled { opacity: .55; cursor: not-allowed; }

.tc-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-select-btn::after {
    content: "";
    width: 12px; height: 12px;
    flex: none;
    background: var(--select-chevron) center / 12px no-repeat;
    transition: transform .12s ease;
}
.tc-select[data-open] .tc-select-btn::after { transform: rotate(180deg); }

.tc-select-btn:focus-visible {
    outline: none;
    border-color: var(--green-deep);
    box-shadow: 0 0 0 3px var(--green-tint);
}

/* position: fixed — så listan inte klipps av .report-frame (overflow:hidden).
   left/top/width/max-height sätts av select.js mot knappens rektangel. */
.tc-select-list {
    position: fixed;
    z-index: 60;
    top: -9999px;
    left: 0;
    width: 220px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.tc-select:not([data-open]) .tc-select-list { display: none; }

.tc-select-option {
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-select-option.is-active { background: var(--rule-soft); }
.tc-select-option[aria-selected="true"] {
    background: var(--green-tint);
    color: var(--green-dark);
    font-weight: 600;
}
.tc-select-option[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* Kompakt i containerns filterrad, full bredd i periodväljaren. */
.frame-head .filter-bar .tc-select-btn { padding: 6px 10px; font-size: 13px; }
.period-picker .tc-select { width: 100%; }

/* ==========================================================================
   Export / utskrift
   ========================================================================== */

.statusbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.export-bar {
    display: flex;
    gap: 6px;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================================
   Lönekostnadsvyn
   ========================================================================== */

.filter-static {
    display: inline-block;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ink-soft);
}

.payroll-table thead .group-row th { vertical-align: bottom; }
.payroll-table thead th.group {
    text-align: center;
    border-bottom: 1px solid var(--rule);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Två rader rubriker — den undre fastnar strax under den övre vid scroll. */
.payroll-table thead tr:first-child th { top: 0; z-index: 4; }
.payroll-table thead tr:last-child th { top: 28px; z-index: 3; }

.payroll-day { cursor: pointer; }
.payroll-day:hover td { background: var(--green-tint); }

/* Röd dag: samma celler som C#-appen färgar (dag, datum, timmar, snittlön,
   lönekostnad exkl./inkl. sjuk). */
.payroll-day.is-redday td.rd { color: var(--red-deep); }

.payroll-unmanned td { color: var(--ink-faint); font-style: italic; }

.payroll-total-banner {
    flex: none;
    padding: 10px 16px;
    background: var(--green-deep);
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mini-dialog-wide { max-width: min(1100px, 96vw); }
.mini-dialog-wide .mini-dialog-body { padding-bottom: 16px; overflow-x: auto; }
.mini-dialog-wide .mini-dialog-body table.dense { min-width: max-content; }
.payroll-unmanned td { color: var(--ink-faint); font-style: italic; }