/*
 * Digital Räkning – gemensam stilmall (Designriktlinjer v0.2, B-40).
 * Ljust och mörkt tema via CSS-variabler. Mörkt tema följer digitalrakning.se.
 * Sidomeny och mobilens sidhuvud har logotypens bakgrund #111820 i båda teman.
 */

:root {
    color-scheme: light;
    /* Ljust tema "duvblå" (användarens val 2026-11-11): tonade ytor i stället för vitt, mindre bländande. */
    --bg: #C5D6E6; --side: #111820; --surface: #D9E5F0; --surface-2: #CFDDEA; --field: #E8EFF6; --line: #A9C0D6;
    --ink: #10202E; --muted: #3A4F63; --link: #055591; --primary: #0878C9; --on-primary: #FFFFFF; --focus: #0B4A80;
    --warn-bg: #F6E3C4; --warn-line: #E2BE85; --warn-ink: #7A4200;
    --ok-bg: #CDEBDB; --ok-ink: #0B5E35; --info-bg: #CFE3F5; --info-ink: #055591;
    --err-bg: #F5D5D5; --err-line: #E0A3A3; --err-ink: #951A20;
    --hk-bg: #EFE2C4; --hk-line: #D9BE85; --hk-ink: #6B4500;
    --admin-bg: #D0E3F5; --admin-line: #9EC3E6; --admin-ink: #055591;
    --approver-bg: #CFEADB; --approver-line: #9CD0B2; --approver-ink: #0B5E35;
    --treasurer-bg: #DFD6F2; --treasurer-line: #BBA9E6; --treasurer-ink: #4F2D96;
    --referee-bg: #F6D9D5; --referee-line: #E5ADA6; --referee-ink: #8A2A20;
    --radius: 16px; --radius-sm: 12px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111820; --side: #111820; --surface: #1B2733; --surface-2: #17232E; --field: #1B2733; --line: #2B3B4A;
    --ink: #F1F5F9; --muted: #A9B8C7; --link: #7CCBF0; --focus: #20A9DF;
    --warn-bg: rgba(242,195,107,.12); --warn-line: rgba(242,195,107,.40); --warn-ink: #F2C36B;
    --ok-bg: rgba(60,203,132,.16); --ok-ink: #6FDDA6; --info-bg: rgba(32,169,223,.16); --info-ink: #7CCBF0;
    --err-bg: rgba(229,72,77,.14); --err-line: rgba(229,72,77,.45); --err-ink: #FF9A9E;
    --hk-bg: rgba(242,195,107,.08); --hk-line: rgba(242,195,107,.36); --hk-ink: #F2C36B;
    --admin-bg: rgba(32,169,223,.08); --admin-line: rgba(32,169,223,.36); --admin-ink: #7CCBF0;
    --approver-bg: rgba(60,203,132,.08); --approver-line: rgba(60,203,132,.36); --approver-ink: #6FDDA6;
    --treasurer-bg: rgba(169,139,245,.10); --treasurer-line: rgba(169,139,245,.38); --treasurer-ink: #C3AEFA;
    --referee-bg: rgba(255,128,112,.09); --referee-line: rgba(255,128,112,.38); --referee-ink: #FF9E91;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
a { color: var(--link); }
h1 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
h2 { font-size: 1.2rem; font-weight: 750; margin: 0; }
p { margin: 0; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sidebar :focus-visible, .mobilebar :focus-visible { outline-color: #20A9DF; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--primary); color: #FFFFFF; padding: 10px 16px; border-radius: 10px; font-weight: 650; text-decoration: none; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* --- Ramverk: sidomeny + innehåll --------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 264px; flex-shrink: 0; background: var(--side); color: #E6EEF6; border-right: 1px solid rgba(148,170,190,.18); padding: 18px 14px; display: flex; flex-direction: column; gap: 20px; }
.sidebar .logo img { display: block; width: 100%; max-width: 230px; height: auto; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .nav-heading { margin: 14px 12px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9FB0C0; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: #D5E0EA; text-decoration: none; font-size: .95rem; }
.nav a:hover { background: rgba(255,255,255,.06); color: #FFFFFF; }
.nav a[aria-current="page"] { background: var(--primary); color: #FFFFFF; font-weight: 650; }
.nav svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(214,226,236,.16); padding-top: 12px; }
.sidebar-foot button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: #D5E0EA; font: inherit; font-size: .95rem; cursor: pointer; text-align: left; }
.sidebar-foot button:hover { background: rgba(255,255,255,.06); color: #FFFFFF; }
.badge-platform { display: inline-block; background: #F2C36B; color: #2B1600; border-radius: 6px; padding: 3px 8px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; }

.content { flex: 1; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.content-inner { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.topbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .9rem; }
.avatar { width: 42px; height: 42px; border-radius: 999px; background: var(--primary); color: #FFFFFF; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }

/* Temaväxlare (sol/måne) */
.theme-toggle { display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; }
.theme-toggle span { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
:root:not([data-theme="dark"]) .theme-toggle .sun, :root[data-theme="dark"] .theme-toggle .moon { background: var(--primary); color: #FFFFFF; }

/* Mobil: sidhuvud med meny */
.mobilebar { display: none; }
@media (max-width: 860px) {
    .shell { flex-direction: column; }
    .mobilebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--side); color: #E6EEF6; padding: 8px 10px; position: sticky; top: 0; z-index: 10; }
    .mobilebar img { width: 160px; height: auto; display: block; }
    .mobilebar button { width: 44px; height: 44px; border: 1px solid rgba(214,226,236,.25); border-radius: 10px; background: none; color: #E6EEF6; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .sidebar { width: 100%; display: none; border-right: 0; }
    .sidebar .logo { display: none; }
    .shell.nav-open .sidebar { display: flex; }
    .content { padding: 16px; }
    h1 { font-size: 1.5rem; }
}

/* --- Kort, avsnitt och nyckeltal ---------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.card-flush { padding: 0; gap: 0; overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.card-flush .card-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.role-section { border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; border: 1px solid; }
.role-section h2 { display: flex; align-items: center; gap: 10px; }
.role-section h2 svg { width: 24px; height: 24px; }
.role-hk { background: var(--hk-bg); border-color: var(--hk-line); } .role-hk h2 { color: var(--hk-ink); } .role-hk .tile, .role-hk .shortcut { border-color: var(--hk-line); }
.role-admin { background: var(--admin-bg); border-color: var(--admin-line); } .role-admin h2 { color: var(--admin-ink); } .role-admin .tile, .role-admin .shortcut { border-color: var(--admin-line); }
.role-approver { background: var(--approver-bg); border-color: var(--approver-line); } .role-approver h2 { color: var(--approver-ink); } .role-approver .tile, .role-approver .shortcut { border-color: var(--approver-line); }
.role-treasurer { background: var(--treasurer-bg); border-color: var(--treasurer-line); } .role-treasurer h2 { color: var(--treasurer-ink); } .role-treasurer .tile, .role-treasurer .shortcut { border-color: var(--treasurer-line); }
.role-referee { background: var(--referee-bg); border-color: var(--referee-line); } .role-referee h2 { color: var(--referee-ink); } .role-referee .tile, .role-referee .shortcut { border-color: var(--referee-line); }
.tiles { display: flex; flex-wrap: wrap; gap: 12px; }
a.tile { color: inherit; text-decoration: none; } a.tile:hover { border-color: var(--link); }
.tile { flex: 1 1 180px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.tile .num { font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.tile .num.warn { color: var(--warn-ink); }
.tile .label { font-size: .9rem; color: var(--muted); margin-top: 2px; }
.tile.warn { background: var(--warn-bg); border-color: var(--warn-line); } .tile.warn .num, .tile.warn .label { color: var(--warn-ink); }
.shortcuts { flex: 1 1 220px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.shortcut { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 650; text-decoration: none; }
.shortcut:hover { border-color: var(--primary); }

/* --- Knappar, formulär, märken -------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 750; font-size: .95rem; text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: 650; }
.btn-small { min-height: 36px; padding: 0 14px; font-size: .85rem; }
.btn-danger { background: var(--surface); color: var(--err-ink); border-color: var(--err-line); font-weight: 650; }
.btn svg { width: 18px; height: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-size: .85rem; font-weight: 650; }
.input, select.input { min-height: 46px; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: var(--field); color: var(--ink); font: inherit; }
.input:focus { border-color: var(--primary); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.choice input { margin-top: 4px; }
.error { color: var(--err-ink); font-size: .9rem; }
.alert { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid; font-size: .95rem; }
.alert-ok { background: var(--ok-bg); border-color: transparent; color: var(--ok-ink); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.alert-err { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }
.chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.chip-ok { background: var(--ok-bg); color: var(--ok-ink); } .chip-info { background: var(--info-bg); color: var(--info-ink); }
.chip-warn { background: var(--warn-bg); color: var(--warn-ink); } .chip-muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* --- Tabeller och listor -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; position: relative; } /* håller dolda skärmläsartexter inom rullrutan i mobilen */
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
table.data th { text-align: left; font-weight: 650; color: var(--muted); background: var(--surface-2); padding: 10px 20px; font-size: .85rem; }
table.data td { padding: 12px 20px; border-top: 1px solid var(--line); vertical-align: middle; }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data form { display: inline; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .9rem; }
.tabs a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 650; }
.role-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.person { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }

/* --- Gästsidor (inloggning) ----------------------------------------------------------- */
.guest { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 20px; }
.guest .brand { background: var(--side); border-radius: 14px; padding: 10px 16px; }
.guest .brand img { display: block; width: 260px; max-width: 70vw; height: auto; }
.guest .card { width: 100%; max-width: 440px; padding: 32px; }
.guest .card .btn { width: 100%; }
.guest .theme-row { display: flex; justify-content: center; }

/* Rollinnehavare per grupp på översikten (B-30): en rad per roll i rollens färg, tydliga namn. */
.role-holders { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
.role-holder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid; border-left-width: 4px; }
.role-holder dt { font-size: .8rem; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; min-width: 15em; /* rymmer MEDLEMSADMINISTRATÖR, så att namnen står i linje */ }
.role-holder dd { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.role-holder-admin { background: var(--admin-bg); border-color: var(--admin-line); border-left-color: var(--admin-ink); } .role-holder-admin dt { color: var(--admin-ink); }
.role-holder-approver { background: var(--approver-bg); border-color: var(--approver-line); border-left-color: var(--approver-ink); } .role-holder-approver dt { color: var(--approver-ink); }
.role-holder-treasurer { background: var(--treasurer-bg); border-color: var(--treasurer-line); border-left-color: var(--treasurer-ink); } .role-holder-treasurer dt { color: var(--treasurer-ink); }
.role-holder-refereemanager { background: var(--referee-bg); border-color: var(--referee-line); border-left-color: var(--referee-ink); } .role-holder-refereemanager dt { color: var(--referee-ink); }
@media (max-width: 520px) { .role-holder dt { min-width: 0; width: 100%; } }

/* Sidomenyns avsnitt (användarens önskemål 2026-11-11): varje roll i egen färg, tydligt åtskilda.
   Sidomenyn är alltid mörk, så accentfärgerna är valda för mörk bakgrund i båda teman.
   Samma färger som rollavsnitten på översikten (mörka temat). */
.nav { gap: 10px; }
.nav-section { --acc: #9FB0C0; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; border: 1px solid transparent; }
.nav-section .nav-heading { margin: 4px 8px 4px; color: var(--acc); }
.nav-section-account, .nav-section-approver, .nav-section-treasurer, .nav-section-referee, .nav-section-admin, .nav-section-hk, .nav-section-platform {
    background: color-mix(in srgb, var(--acc) 7%, transparent);
    border-color: color-mix(in srgb, var(--acc) 22%, transparent);
    border-left: 4px solid var(--acc);
}
.nav-section-account { --acc: #F4A6C8; }
.nav-section-approver { --acc: #6FDDA6; }
.nav-section-treasurer { --acc: #C3AEFA; }
.nav-section-referee { --acc: #FF9E91; }
.nav-section-admin { --acc: #7CCBF0; }
.nav-section-hk { --acc: #F2C36B; }
.nav-section-platform { --acc: #FDA769; }
.nav-section a svg { color: var(--acc); }
.nav-section-main a svg { color: inherit; }
.nav-section a:hover { background: color-mix(in srgb, var(--acc) 14%, transparent); }
.nav-section:not(.nav-section-main) a[aria-current="page"] { background: color-mix(in srgb, var(--acc) 28%, transparent); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--acc); }
.nav-section:not(.nav-section-main) a[aria-current="page"] svg { color: #FFFFFF; }

/* Smal skärm: temaknappen finns redan i mobilhuvudet – visa bara den (användarens önskemål 2026-11-11). */
@media (max-width: 860px) { .topbar-actions .theme-toggle { display: none; } }

/* Avsnittet Medlem (Översikt, Mina ärenden) får samma ram som övriga avsnitt, i neutral ljusgrå accent. */
.nav-section-main { --acc: #CBD5E1; background: color-mix(in srgb, var(--acc) 6%, transparent); border-color: color-mix(in srgb, var(--acc) 20%, transparent); border-left: 4px solid var(--acc); }
.nav-section-main a svg { color: var(--acc); }
.nav-section-main a[aria-current="page"] { background: color-mix(in srgb, var(--acc) 22%, transparent); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--acc); font-weight: 650; }
.nav-section-main a[aria-current="page"] svg { color: #FFFFFF; }

/* Bekräftelseruta (data-confirm i forms.js) */
.confirm-dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; padding: 22px 24px; max-width: 420px; width: calc(100% - 32px); }
.confirm-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.confirm-dialog p { margin: 0 0 18px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Kontaktadresser i sidfoten (A-41) */
.app-footer { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; text-align: center; }
.app-footer a { color: var(--link); }