/* BASE */
* {
    box-sizing: inherit;
}

.bell-icon
{
    color:var(--nb-text);
}
main {
    display: block;
}

/* PAGE */
div.page {
    background: var(--bg);
    min-height: 100%;
    height: 100%;
}

.frame .h3 {
    color: var(--h-text);
}
    /*//////////////////////////////////////////// CARD ///////////////////////////////////////////////////////*/

/* =========================
CARD
========================= */
.card {
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.2), 0 6px 16px rgba(0,0,0,0.15);
    transition: 0.2s;
}

    .card:hover {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.25), 0 10px 22px rgba(0,0,0,0.25);
    }

/* =========================
CARD HEADER
========================= */
.card-header {
    position: relative;
    padding: 6px 8px;
    background: linear-gradient( to bottom, var(--table-header-bg-start), var(--table-header-bg-end) );
    border-bottom: 1px solid var(--table-header-border);
    color: var(--table-header-text);
    font-weight: 700;
}

    /* =========================
TEXT
========================= */
    .card-header .title {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--table-header-text);
    }

    .card-header .subtitle {
        font-size: 0.75rem;
        opacity: 0.85;
    }

/* =========================
BODY
========================= */
.card-body {
    padding: 16px;
}








/*//////////////////////////////////////////// FORM ///////////////////////////////////////////////////////*/

label,
.label,
.label-as-p,
.form-label,
.form-check-label,
.form-check label,
.form-group label,
.form-group > label,
.col-form-label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
}

/* Bootstrap sätter `opacity: 0.5` på labels vars associerade input är
   `disabled`. Det bleker text-färgen och i mörka teman blir labeln
   nästan osynlig. Override med tema-medveten muted-färg istället så
   disabled-labeln visar som "muted" i alla teman utan att försvinna. */
.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
    opacity: 1;
    color: var(--muted);
}

/* .apl-radio-label + disabled-state — flyttat till `app-utilities.css`. */

/* Modal-typografi (FE17 Phase 1) — modal-body följer FontSizePicker:s
   floor-modell (aldrig under 1rem; skalar upp vid table-font-lg/xl).
   Modal-title något större än body. Selektorer täcker både Bootstrap
   (`.modal-body`) och Blazored.Modal (`.blazored-modal .modal-body`)
   eftersom appen använder båda. */
.modal-body,
.blazored-modal .modal-body {
    font-size: var(--modal-body-font-size);
}

.modal-title,
.blazored-modal .modal-title {
    font-size: var(--modal-title-font-size);
}

/* MudBlazor input labels — override default mud palette so labels follow theme */
.mud-input-label,
.mud-input-label-norma,
.mud-form-control .mud-input-label {
    color: var(--label-color) !important;
}

/* MudBlazor input text + helper text */
.mud-input,
.mud-input-slot input,
.mud-input-slot textarea,
.mud-select-input {
    color: var(--text) !important;
}

.mud-input-helper-text {
    color: var(--muted) !important;
}

.form-group {
    margin-bottom: 12px;
}

/* Bootstrap form controls + plain HTML inputs inside .form-group — make them
   theme-aware. SCOPED to .form-group / .form-control / .form-select only so we
   don't add borders/backgrounds to MudBlazor's own inputs (MudTextField etc),
   which manage their own styling and live outside .form-group wrappers.
   Note: leading dot was missing on `form-control` before, so the rule never
   matched `<input class="form-control">` from Bootstrap. Fixed. */
.form-control,
.form-select,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: var(--form-min-height);
    padding: var(--form-padding-y) var(--form-padding-x);
    font-size: var(--form-font-size);
    border: 1px solid var(--border);
    border-radius: var(--form-radius, 3px);
    background: var(--bg);
    color: var(--text);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.25), inset -1px -1px 0 rgba(255,255,255,0.08);
}

/* Textareas växer med rows-attribut; min-height säkerställer att de aldrig
   blir för korta även om en konsument glömmer rows. */
.form-group textarea,
textarea.form-control {
    min-height: calc(var(--form-min-height) * 2);
    line-height: 1.4;
}

/* Touch-target på mobile — WCAG 2.5.8 minimum 44×44 CSS-px. Höjer
   min-height + padding utan att påverka desktop-layout. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 2.75rem;
        padding: 0.55rem 0.75rem;
    }
}

/* Native number-spinners — gör de synliga (default ofta gömda eller mycket
   smala) och ge dem större klickyta på mobile. `accent-color` styr även
   spin-knapparnas tema-färg på moderna browsers. */
input[type="number"] {
    accent-color: var(--saveb-bg);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    height: auto;
    cursor: pointer;
}

/* Checkbox + radio — native default ~13px är för smått. 1.1rem default
   ger klickyta runt 17-18px med skalning via FontSizePicker. Mobile går
   till 1.3rem (~20-21px) för fingrar. accent-color tema-färgar
   markerings-glyph på alla moderna browsers. */
input[type="checkbox"],
input[type="radio"] {
    width: var(--form-control-size);
    height: var(--form-control-size);
    cursor: pointer;
    flex-shrink: 0;
    /* Centrera input vertikalt mot label-text. Default `baseline` gör att
       inputen hänger under text-baseline pga sin höjd, vilket ger
       feljusterad label-text vs. radio-/checkbox-cirkel. */
    vertical-align: middle;
    margin-top: -0.15rem;
    /* Custom styling så vi kan styra båda färgerna exakt:
       - knappen (border + bg vid checked) = var(--saveb-bg) (tema-addbutton-färg)
       - innehållet (mark) = var(--card-bg)
       `accent-color` skulle bara ge browser-default kontrast — vi vill ha
       exakt motsatt par av tema-variablerna. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--card-bg);
    border: 2px solid var(--saveb-bg);
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"] {
    border-radius: 3px;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    background-color: var(--saveb-bg);
    border-color: var(--saveb-bg);
}

/* Radio: inner dot — card-bg så det blir "kontrasterande hål" mot saveb-bg. */
input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: var(--card-bg);
}

/* Checkbox: SVG-baserad checkmark i card-bg-färg. */
input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 28%;
    height: 55%;
    border-right: 2px solid var(--card-bg);
    border-bottom: 2px solid var(--card-bg);
    margin-top: -10%;
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--saveb-bg);
    outline-offset: 2px;
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* `.label-inline` wraps `<input type="radio/checkbox"> Label text` direkt
   inom samma label-element. Flex garanterar input + text-children alignar
   mittjusterat oavsett input-storlek. Apl.css hade samma regel men laddas
   inte från `_Layout.cshtml`, så definitionen duplicerad här i en
   garanterat-laddad fil. */
.label-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
}

/* `.radio-option` wrappers (RecipientModal, RadioButtonGroup m.fl.) — samma
   pattern men inom `.radio-group`. Gör labels inom till flex för
   konsekvent vertikal alignment. */
.radio-option label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Bootstrap `.form-check` använder `float: left` + negativ margin på
   `.form-check-input` istället för flex — vilket gör att vår större
   `--form-control-size` (1.1rem) hamnar feljusterat mot label-texten
   (input flyter UP, label-text följer baseline = misalignment).
   Override till samma flex-mönster som `.label-inline`. */
.form-check {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    min-height: auto;
    margin-bottom: 0.25rem;
}

.form-check-input {
    float: none !important;
    margin: 0 !important;
}

.form-check-label {
    cursor: pointer;
    margin: 0;
}

@media (max-width: 767.98px) {
    input[type="checkbox"],
    input[type="radio"] {
        width: var(--form-control-size-mobile);
        height: var(--form-control-size-mobile);
    }
}

/* Range slider — tema-färg på track + thumb. */
input[type="range"] {
    accent-color: var(--saveb-bg);
    cursor: pointer;
}

/* Date/time/file-pickers — tema-aware bg + text + border. `color-scheme`
   tipsar browser om native picker-popoverns palett (ljus/mörk). Plus
   explicit bg/color/border på själva input-elementet säkerställer att
   typade tider (`00:00`) är läsbara även när inputen saknar `.form-control`
   eller annan klass — annars ärver native default vit bg + svart text och
   blir oläsbart på dark/banana/neon-teman. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    color-scheme: light dark;
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--form-radius, 3px);
    padding: var(--form-padding-y, 0.45rem) var(--form-padding-x, 0.7rem);
    font-size: var(--form-font-size, 1rem);
    min-height: var(--form-min-height, 2.5rem);
}

input[type="file"] {
    cursor: pointer;
}

/* Override Bootstrap's form-control/form-select focus state with theme colors */
.form-control:focus,
.form-select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: var(--bg);
    color: var(--text);
    border-color: var(--saveb-bg);
    box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.15);
}

.form-control:disabled,
.form-select:disabled,
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-control::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

/* Force date/time pickers to use OS color-scheme matching our theme so the
   calendar widget background AND the selected-value text follow dark mode.
   Without `color-scheme: dark`, Chromium renders date inputs as light
   regardless of CSS color, making the selected date invisible on dark bg. */
:root.dark-layout input[type="date"],
:root.dark-layout input[type="datetime-local"],
:root.dark-layout input[type="time"],
:root.dark-layout input[type="month"],
:root.dark-layout input[type="week"],
:root.dark-layout .form-control[type="date"],
:root.dark-layout .form-control[type="datetime-local"],
:root.dark-layout .form-control[type="time"],
:root.dark-layout .form-control[type="month"],
:root.dark-layout .form-control[type="week"] {
    color-scheme: dark;
    color: var(--text) !important;
    background-color: var(--bg) !important;
}

:root.light-layout input[type="date"],
:root.light-layout input[type="datetime-local"],
:root.light-layout input[type="time"],
:root.light-layout input[type="month"],
:root.light-layout input[type="week"] {
    color-scheme: light;
}
input[type="radio"] {
    /* Brand-färgen (saveb) har designats för kontrast mot bg i varje
       tema. --sb-bg är sidebarens färg och kan vara identisk med
       content-bg i vissa teman → osynlig prick. */
    accent-color: var(--saveb-bg);
}

/* File-input — gör knappen ("Välj fil"/"Choose file") tema-aware via
   `::file-selector-button` (modern standard) + `::-webkit-file-upload-button`
   (Safari/Chrome legacy fallback). Inputens egen `color` styr browser-default
   "Ingen fil har valts"-texten — sätt till `var(--text)` så den blir läslig
   på alla teman (defaultar annars till browser-light-grå som blir osynlig
   på dark/banana/discord-teman). */
input[type="file"] {
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--form-radius);
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: var(--saveb-bg);
    color: var(--saveb-text);
    border: 1px solid var(--saveb-bg);
    padding: 0.4rem 0.9rem;
    margin-right: 0.75rem;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--label-font-size);
    transition: background 0.15s ease, color 0.15s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--saveb-hover-bg);
    color: var(--saveb-hover-text);
}

input[type="file"]:focus-visible::file-selector-button,
input[type="file"]:focus-visible::-webkit-file-upload-button {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

input[type="file"]:disabled,
input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button {
    opacity: 0.55;
    cursor: not-allowed;
}
.mud-input-slot, mud-input-slot, mud-input-root, mud-input-root-text, mud-input-root-adorned-end {
    background-color: var(--bg);
}

/* prefers-reduced-motion baseline + .apl-skip-link + theme-picker
   shape-toggle active state — flyttat till `app-utilities.css`. */

/* Mörk-tema footer-overrides + Tron/neon-body-bg flyttat till
   `theme-effects.css` 2026-05-12 (FE7b). Tematiskt rätt hemvist eftersom
   reglerna är targeted mot specifika `:root.<tema>-layout`-selektorer. */

/* Quill + Radzen WYSIWYG-baseline — flyttat till `editor-overrides.css`. */


/* ============================================================
   MudDatePicker / MudPicker — make popover, selected-day pill,
   toolbar (the big "valt datum" header), and day grid follow theme.
   MudBlazor leaves --mud-palette-primary at its default blue, so
   the selected-date header reads light on dark themes. Override
   with our save-button colors so it inherits theme contrast. */
.mud-picker,
.mud-picker-content,
.mud-picker-paper,
.mud-picker-pop,
.mud-picker-popover-paper {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
}

.mud-picker-toolbar,
.mud-picker-datepicker-toolbar,
.mud-picker-timepicker-toolbar {
    background-color: var(--saveb-bg) !important;
    color: var(--saveb-text) !important;
}

    .mud-picker-toolbar .mud-typography,
    .mud-picker-datepicker-toolbar .mud-typography,
    .mud-picker-timepicker-toolbar .mud-typography,
    .mud-picker-toolbar .mud-button-label,
    .mud-picker-datepicker-toolbar .mud-button-label {
        color: var(--saveb-text) !important;
    }

.mud-picker-calendar-day {
    color: var(--text);
}

    .mud-picker-calendar-day.mud-selected,
    .mud-picker-calendar-day.mud-current,
    .mud-picker-calendar-day.mud-button-root.mud-selected {
        background-color: var(--saveb-bg) !important;
        color: var(--saveb-text) !important;
    }

    .mud-picker-calendar-day.mud-current:not(.mud-selected) {
        border: 1px solid var(--saveb-bg);
    }

    .mud-picker-calendar-day:hover:not(.mud-selected) {
        background-color: color-mix(in srgb, var(--text) 10%, transparent);
    }

.mud-picker-calendar-header,
.mud-picker-calendar-header-day,
.mud-picker-calendar-transition,
.mud-picker-month-container {
    background-color: var(--card-bg);
    color: var(--text);
}

.mud-picker-calendar-header-switch .mud-icon-button {
    color: var(--text) !important;
}

.mud-picker-year,
.mud-picker-month {
    color: var(--text);
}

    .mud-picker-year.mud-picker-year-selected,
    .mud-picker-month.mud-picker-month-selected {
        color: var(--saveb-bg) !important;
        font-weight: 600;
    }

/* MudTable tema-aware bakgrund + text-färg. Default Material-rendering är
   vit bg + svart text — fungerar inte på dark/banana/neon-teman där
   omgivningen är mörk.

   Header-celler får INTE bg från denna regel — `.apl-table-header` har sin
   egen gradient (--table-header-bg-start/-end) som måste slå igenom. Därför
   `:not(.apl-table-header)`-uteslutning på cell-bg + ingen mud-table-head-
   bg-override. Body-celler + hover-state hanteras tema-aware. Striped-rader
   sköter MudBlazor själv med transparent overlay som syns mot tema-bg. */
.mud-table {
    background-color: var(--card-bg);
    color: var(--text);
}

.mud-table .mud-table-cell:not(.apl-table-header) {
    font-size: var(--table-font-size);
    padding: var(--table-padding);
    background-color: var(--card-bg);
    color: var(--text);
}

.mud-table-head .mud-table-cell {
    font-size: var(--table-header-font-size);
}

.mud-table-row:hover .mud-table-cell:not(.apl-table-header) {
    background-color: var(--sb-hover);
}

/* ============================================================
   Radzen / Quill rich-text MarkupString content — tema-force
   ============================================================
   När en användare sparar innehåll via Radzen HTML Editor sparar Quill
   ofta inline `style="color: ..."` (typiskt svart) på `<p>`/`<span>`/etc.
   Vid rendering via `@((MarkupString)...)` vinner inline-style cascade
   och texten blir osynlig på dark/banana/neon-teman.

   Wrap MarkupString-renderingen i `<div class="apl-rich-content">` och
   denna regel tvingar alla text-element under till `var(--text)` så
   texten alltid följer aktivt tema.

   Strike-/del-/s-element ignoreras per user-feedback — Quill renderar
   dem med ljus bg som ser fult ut på dark-tema men är funktionell. */
.apl-rich-content :is(p, h1, h2, h3, h4, h5, h6, span, li, td, th, a, strong, b, em, i, u, blockquote, div, label, small):not(s):not(strike):not(del) {
    color: var(--text) !important;
    background-color: transparent !important;
}

/* Bootstrap raw `<table class="table">` tema-aware via CSS-vars override.
   Bootstrap default `--bs-table-color: #212529` blir osynligt på dark-tema.
   Påverkar alla `.table`/`.table-striped`/`.table-bordered` i appen
   (Module.Excel RenderInvalid-grenar, ev. legacy Bootstrap-tabeller). */
.table {
    --bs-table-color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-striped-color: var(--text);
    --bs-table-striped-bg: rgba(127, 127, 127, 0.06);
    --bs-table-active-color: var(--text);
    --bs-table-active-bg: var(--sb-hover);
    --bs-table-hover-color: var(--text);
    --bs-table-hover-bg: var(--sb-hover);
    --bs-table-border-color: var(--border);
    color: var(--text);
}
input[type="time"] {
    background-color: var(--bg);
}
/*//////////////////////////////////////////// TABLE ///////////////////////////////////////////////////////*/

.apl-table-header {
    background: linear-gradient( var(--table-header-bg-start), var(--table-header-bg-end)) !important;
    border-bottom: 1px solid var(--table-header-border);
    color: var(--table-header-text);
}
.mudblazor {
    background: var(--bg);
}
.mud-table-root .mud-table-head .mud-table-cell {
    color: var(--table-header-text);
}

/* MudTable pagination footer — gör tema-aware. MudBlazor defaultar till
   hårdkodade Material-färger som inte följer aktivt tema, vilket bryter
   "Rader per sida"-toolbaren i dark/discord/banana etc. */
.mud-table-pagination,
.mud-table-pagination .mud-table-cell,
.mud-table-pagination td,
.mud-table-pagination tr {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
    border-top: 1px solid var(--border);
}

.mud-table-pagination .mud-table-pagination-toolbar,
.mud-table-pagination-toolbar {
    color: var(--text);
}

.mud-table-pagination-caption,
.mud-table-pagination-information,
.mud-table-pagination-display {
    color: var(--text);
}

.mud-table-pagination .mud-input-slot,
.mud-table-pagination .mud-select-input,
.mud-table-pagination input,
.mud-table-pagination .mud-input-root {
    color: var(--text);
    background-color: transparent;
}

.mud-table-pagination .mud-input-control .mud-input:before,
.mud-table-pagination .mud-input-control .mud-input:after {
    border-bottom-color: var(--border);
}

.mud-table-pagination .mud-icon-button {
    color: var(--text);
}

.mud-table-pagination .mud-icon-button:hover {
    background-color: var(--sb-hover);
}

.mud-table-pagination .mud-icon-button.mud-disabled,
.mud-table-pagination .mud-icon-button:disabled {
    color: var(--muted);
    opacity: 0.5;
}

/* .groupBox-klassen togs bort 2026-05-12 (FE7a) — 0 användningar i razor/cshtml/cs. */

.table-buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 2px;
}
strong
{
    opacity:0.8;
}
/*//////////////////////////////////////////// MEDIA QUERIES ///////////////////////////////////////////////////////
   Standardiserade Bootstrap-justerade breakpoints:
     <  xl  = max-width: 959.98px  (mobile/drawer)
     >= xl  = min-width: 960px     (desktop)
     <  xxl = max-width: 1399.98px  (medium-content)
     >= xxl = min-width: 1400px     (widescreen)

   Tabell-kompression i 1200-1799.98px (responsive.css), hide-cells i
   <=1799.98px så zoom-110% på 1080p (1745 CSS-px) och zoom-150% på
   bigger displays också får döljbara kolumner gömda.
//////////////////////////////////////////////////////////////////////*/

/* Media-queries flyttat till `responsive.css` 2026-05-12 (FE7b):
   .mud-main-content sidebar-padding per breakpoint, body font-scaling
   <1440px, .hide-cells show/hide vid 1800px, .table-buttons mobile-layout. */

/* Selects följer FE17:s label-storlek-skala (FontSizePicker styr).
   Plain HTML <select> + Bootstrap .form-select träffas båda. Stannar i
   newlook.css som global form-styling (inte en media-query). */
select,
.form-select {
    font-size: var(--label-font-size);
}
/*////////////////////////////////////////////BOOTSTRAP OVERRIDES////////////////////////////////////////////////////////////////////////////////////////*/

.nav-link {
    transition: background 0.2s ease, color 0.2s ease;
    color: var(--tab-text);
}

    .nav-link:hover {
        color: var(--tab-bg-hover)!important;
       
    }

    .nav-link.active {
        background: linear-gradient( to bottom, #f0f0f0, #d6d6d6 );
        border: 1px solid #9a9a9a;     
        box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0,0,0,0.15);
        background: var(--tab-bg) !important;
        color: var(--tab-text) !important;
    }
/* Layout consistency */
.row {
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.col-12 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
/* Message box fix */
.box {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
/* Typography */
p {
    margin-bottom: 2.5rem;
    margin-top: 0;
    font-size: 1.3rem;
    line-height: 1.5;
  
}

.alert-secondary {
    background-color: var(--alert-info-bg) !important;
    color: var(--alert-info-text) !important;
    border: 1px solid #bce8f1 !important;
}

a {
    background-color: transparent;
  
    text-decoration: none;
    color: var(--actionlink-color);
}

img {
    border-style: none;
    max-width: 100%;
}
/* PRIMARY BUTTON (filled) */
.btn-primary {
    background: linear-gradient( to bottom, var(--amiga-header-top), var(--amiga-header-bottom) );
    border: 1px solid #9a9a9a;
    color: var(--button-text);
    /* Raised button look */
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(0,0,0,0.2);
    font-weight: 600;
}

    /* HOVER */
    .btn-primary:hover {
        filter: brightness(0.98);
    }

    /* ACTIVE (pressed effect) */
    .btn-primary:active {
        box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3), inset -1px -1px 0 #ffffff;
        transform: translateY(1px);
    }

/* OUTLINE BUTTON — tema-medveten gradient + border + text per regel
   "alla knappar ska ha tema-färger". Tidigare hardcoded `#f0f0f0`/`#d6d6d6`
   gradient + `#9a9a9a` border bröt mörka teman (ljus grå knapp på mörk bg). */
.btn-outline-primary {
    background: linear-gradient( to bottom, var(--card-bg), var(--bg) );
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.1);
}

    /* OUTLINE HOVER */
    .btn-outline-primary:hover {
        background: linear-gradient( to bottom, var(--amiga-header-top), var(--amiga-header-bottom) );
    }

/* GENERIC BUTTON CLASS */
.button {
    background: linear-gradient( to bottom, var(--amiga-header-top), var(--amiga-header-bottom) );
    border: 1px solid #9a9a9a;
    color: var(--button-text);
    padding: 6px 12px;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(0,0,0,0.2);
    font-weight: 600;
}
h3 {
    font-weight: 300;
    letter-spacing: -.1rem;
    margin-bottom: 2rem;
    margin-top: 0;
    font-size: 2.8rem;
    line-height: 1.3;
    color: var( --h-text);
}
/*//HR form frame/////*/
.h3 {
    padding-top: 1rem;
    padding-bottom: 0.2rem;
    margin-left: 20px;
    letter-spacing: -0.1rem;
    margin-bottom: 2px;
    margin-top: 0;
    font-size: 2.5rem;
    line-height: 1.3;
    font-weight: 400;
    color: var(--h-text);
    letter-spacing: 0.05rem;
}
h1 { 
    color: var( --text);
}
h2 {
    opacity:0.8;
}

/* //////////////////////////////////////////////////////ETC////////////////////////////////////////////////////*/

/* Dropdown overflow fix for DottedButton in MudTables */
.dropdown-cell {
    overflow: visible !important;
    position: relative !important;
}

    .dropdown-cell + tr,
    tr:has(.dropdown-cell) {
        overflow: visible !important;
    }

.mud-table-container {
    overflow: visible !important;
}

.mud-table-root {
    overflow: visible !important;
}

/*WCAG changes for tab visibility*/
.nav-link:focus-visible {
    outline: 2px solid rgba(63,92,207,.8);
}

a:focus-visible {
    outline: 2px solid black;
    outline-offset: 0.15rem;
}

.link-like {
    color: var(--bs-link-color);
    text-decoration: underline;
}

    .link-like:hover {
        cursor: pointer;
        color: var(--bs-link-hover-color);
    }

/* Styling for priority table */
td.col-1.priority-fix {
    width: auto;
}

.application-manualallocation-div {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.application-manualallocation-text {
    margin: 0;
    color: var(--required-color);
}

.application-manualallocation-icon {
    font-size: x-large;
    color: red;
}

.blazored-modal .bm-container {
    border: none !important;
   
}

.blazored-modal .bm-content {
    padding: 0.25rem;
    background:var(--card-bg);
}

.blazored-modal {
    border-radius: 1rem;
    padding: 2px;
    background: var(--card-bg);
    border: none !important;
}

.blazored-modal-container {
    z-index: 5060 !important;
}
.modal {
    z-index: 1060 !important;
}
body.modal-open {
    background-color: white !important;
}
*/
/*////////////////////////////////////////////////////////////////////////////LEGACY////////////////////////////////////////////////////////
   Klasser i detta block räknas som legacy men har verifierats användas
   2026-05-12 (FE7a-audit). Selektorer som verifierats UNUSED togs bort
   i samma pass: .bg-primary, .wrap, .check-mark, .right-flex, .sideBarLogo,
   plus dubbletter av .wrapper, *, :after, :before. Stanna BORTA från
   tag-selektorer (section, ul, li, header, fieldset, legend) — de
   påverkar globalt och risk för regression. Flytta enskilda regler
   härifrån till passande sektion när de touchas naturligt.
   /////////////////////////////////////////////////////////////////////// */
.wrapper {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

*, :after, :before {
    box-sizing: inherit;
}

section {
    margin-top: 2rem;
}

.img-responsive {
    width: 100%;
    max-width: none;
    display: block;
    height: auto;
}

ul {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
    margin-bottom: 2.5rem;
    padding: 0;
}

li {
    margin-bottom: 1rem;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.paper {
    box-shadow: 0 0.438rem 1.25rem 0 rgba(21,64,97,.15),0 0.063rem 0.25rem 0 rgba(21,64,97,.25);
    margin-bottom: 10rem;
    padding: 2rem;
}

header {
    box-shadow: 0 3px 20px 0 rgba(21,64,97,0.15), 0 1px 2px 0 rgba(21,64,97,0.25);
    border-top: 6px solid hsla(228, 60%, 53%, 0.8);
    color: hsl(24,12%,30%);
    margin-bottom: 20px;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 400;
}
.navbar-logo {
    max-height: 45px;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 8px;
    border: 1px solid silver;
    padding: 8px;
    border-radius: 4px;
}

legend {
    padding: 2px;
}

.tableMessage {
    min-width: 200px;   
    overflow-x: scroll;
}

.clock {
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
}

.brand {
    height: 4rem;
    width: auto;
    max-width: 60px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

.text-secondary {
    color: rgba(0, 0, 0, 0.54);
}

.total-color {
    color: #4285F4;
}

.available-color {
    color: #34A853;
}

.taken-color {
    color: #EA4335;
}

.tutorUnactivated {
    color: var(--muted) !important;
    background-color: var(--sb-hover);
    opacity: 0.85;
    font-style: italic;
}

div.validation-message,
.validation-message.text-muted {
    color: red !important;
    font-weight: 500;
}
/*/////////////////////////////////////////////////////////////SMARTINPUT////////////////////////////////////////////////////////*/
.sf {
    margin-bottom: 10px;
}

.sf-label {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
    margin-bottom: 2px;
    display: block;
}

.sf-body {
    font-size: 0.95rem;
}

.sf-input {
    width: 100%;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
}

.sf-dropdown {
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-top: 4px;
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.sf-option {
    padding: 6px 10px;
    cursor: pointer;
}

    .sf-option:hover {
        background: var(--sb-hover);
        color: var(--sb-text);
    }

/* Bootstrap .dropdown-menu — gör tema-aware GLOBALT så DottedButton-menyer,
   "visa elev"-dropdowns och alla andra Bootstrap dropdowns följer aktivt tema.
   Scoped CSS per-komponent kan fortsätta överrida med högre specificitet. */
.dropdown-menu {
    background-color: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.dropdown-menu .dropdown-item {
    color: var(--text);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--sb-hover);
    color: var(--text);
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--saveb-bg);
    color: var(--saveb-text);
}

.dropdown-menu .dropdown-divider {
    border-top-color: var(--border);
}

.dropdown-menu .dropdown-header {
    color: var(--muted);
}

/* Bootstrap .list-group / .list-group-item — gör tema-aware GLOBALT så
   "Tilldelade lärare/klasser"-listor i AssignTeacher/AssignClass-modaler,
   notification-listor och alla andra Bootstrap list-groups följer aktivt
   tema. Bootstrap defaultar till hårdkodad vit bg + mörk text vilket bryter
   i dark/discord/banana-teman. */
.list-group {
    background-color: transparent;
    border-radius: var(--card-radius);
}

.list-group-item {
    background-color: var(--card-bg);
    color: var(--text);
    border-color: var(--border);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--sb-hover);
    color: var(--text);
}

.list-group-item.active,
.list-group-item-action.active {
    background-color: var(--saveb-bg);
    color: var(--saveb-text);
    border-color: var(--saveb-bg);
}

.list-group-item.disabled,
.list-group-item:disabled {
    color: var(--muted);
    background-color: var(--card-bg);
    opacity: 0.7;
}

/* "Inaktiv" markering på rader/items — t.ex. arkiverade handledare som
   tidigare hade hårdkodad grå (.text-muted Bootstrap-default eller egen).
   Använd theme-aware muted så det syns lika bra i mörkt och ljust läge. */
.inactive,
.archived,
tr.inactive td,
tr.archived td,
.row-inactive,
.list-item.inactive {
    color: var(--muted) !important;
    opacity: 0.75;
    font-style: italic;
}

/* Bootstrap .text-muted — säkerställ att den följer temat (Bootstrap default
   använder #6c757d som blir oläsligt på mörka tutorials-listor). */
.text-muted {
    color: var(--muted) !important;
}

/* Modal-bakgrund — Blazored.Modal + Bootstrap modal får tema-aware bg så
   labels och text inne i modalen håller kontrast i mörkt läge. OBS: rör inte
   `.blazored-modal-container` eller `.modal-backdrop` — de är overlay-skuggan
   bakom modalen och MÅSTE vara semi-transparent (egentligen rgba med 50%
   opacitet). Bara modalens inner-box stylas. */
.modal-content,
.blazored-modal {
    background-color: var(--card-bg);
    color: var(--text);
}

.modal-header,
.modal-footer {
    background-color: var(--card-bg);
    color: var(--text);
    border-color: var(--border);
}

.modal-body {
    color: var(--text);
}

/* Säkerställ att backdroppen ALDRIG blir opak — bort med ev. ärvda regler. */
.modal-backdrop,
.blazored-modal-container {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* ============================================================
   Register-sidor (pre-auth) — global tema-isolation backstop

   `.apl-register-page` är pre-auth-wrapper som ska se identisk ut på alla
   teman. Scoped CSS i RegisterCompany.razor.css/RegisterFerie.razor.css
   sätter hardcoded färger MEN newlook.css:s globala `.form-group input`
   etc. vinner cascade-ordningen (newlook laddas efter scoped). Backstop-
   regel här i newlook (samma laddningsordning) garanterar Register-input/
   select/alert behåller FrontPage-design oavsett tema.
   ============================================================ */
.apl-register-page input,
.apl-register-page select,
.apl-register-page .form-group input,
.apl-register-page .form-group select {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1a2640 !important;
    border: 1px solid #d8dde6 !important;
}

    .apl-register-page input:focus,
    .apl-register-page select:focus,
    .apl-register-page .form-group input:focus,
    .apl-register-page .form-group select:focus {
        border-color: #4f8ff7 !important;
        background: #ffffff !important;
        color: #1a2640 !important;
    }

    .apl-register-page input:disabled,
    .apl-register-page select:disabled {
        background: #f1f3f7 !important;
        color: #6b7280 !important;
    }

.apl-register-page .alert-secondary {
    background: #f3f5f9 !important;
    color: #4a5568 !important;
}

.apl-register-page .alert-info {
    background: #ecf3ff !important;
    color: #2c4a7c !important;
}

.apl-register-page .alert-danger {
    background: #fff0f1 !important;
    color: #8a1c24 !important;
}

/* MudBlazor popup-elements — gör tema-aware GLOBALT så MudSelect-popups,
   MudMenu-items, MudList-items och DottedButton-baserade dropdowns
   (anteckningar, besöksjournaler, StudentInformationModal-actions etc.)
   följer aktivt tema. Standard MudBlazor renderar via MudThemeProvider med
   light/dark-paletter — inte tema-medvetna mot APL:s 19 teman. */
.mud-popover,
.mud-popover-open {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
}

.mud-list,
.mud-list-item,
.mud-menu-item {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
}

    .mud-list-item:hover,
    .mud-list-item-clickable:hover,
    .mud-menu-item:hover,
    .mud-list-item:focus-visible,
    .mud-menu-item:focus-visible {
        background-color: var(--sb-hover) !important;
        color: var(--text) !important;
    }

    .mud-list-item.mud-selected-item,
    .mud-menu-item.mud-selected-item {
        background-color: var(--saveb-bg) !important;
        color: var(--saveb-text) !important;
    }

/* MudBlazor MudSelect dropdown-input rendering. Standard ger ofta vit bg på
   alla teman. */
.mud-select-input,
.mud-select-input-container {
    background-color: var(--card-bg);
    color: var(--text);
}

/* ============================================================
   Tema-medvetna browser-scrollbars
   ============================================================
   Två komplementära API:er för bred täckning:
   1) `scrollbar-color` (CSS standard) — Firefox alla, Chrome 121+,
      Safari 18.2+, Edge 121+
   2) `::-webkit-scrollbar`-pseudos — fallback för äldre
      Chromium/Safari/Edge

   Variabler `--scrollbar-thumb` / `--scrollbar-thumb-hover` /
   `--scrollbar-track` definieras i `root.css` och refererar
   `--saveb-bg` + `--card-bg` så ThemePicker automatiskt ändrar
   utseendet på alla teman utan per-tema overrides. */

html {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

*,
*::before,
*::after {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Webkit fallback — fungerar på Chrome <121 / Safari <18.2 / Edge <121
   och alla äldre Chromium-baserade browsers. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
    /* Tunn track-färgad border ger luft mellan thumb och track så
       thumben ser ut som en tunnare skena utan att kräva
       `scrollbar-width: thin` (som inte finns i webkit-pseudos). */
    border: 2px solid var(--scrollbar-track);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover);
    }

::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* Pre-auth-skydd — FrontPage får INTE följa tema-scrollbar. See: docs/css-architecture.md (FrontPage isolation). */
html:has(.apl-frontpage) {
    --scrollbar-thumb: #1a2640;
    --scrollbar-thumb-hover: #2a3a5c;
    --scrollbar-track: #f5f7f9;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/