/* ==========================================================================
   MWoV Admin UI – gemensam design för Mellaker Webb & Vovves plugins
   Version 1.15.0

   Allt är avgränsat under .mwov-admin så att inget påverkar resten av
   WordPress-admin. Använd klasserna nedan i stället för inline-stilar.
   ========================================================================== */

/* ---------- Typsnitt (lokala, inga anrop till Google) ---------- */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/geist-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/geist-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */

.mwov-admin {
    --mwov-accent: #ED6673;          /* korall: flikmarkering, headerkant, fokus */
    --mwov-accent-ring: #ED667340;
    --mwov-accent-soft: #F6ECEE;
    --mwov-accent-soft-border: #E8CDD3;

    --mwov-primary: #B0697A;         /* primärknapp, kryssrutor, växel */
    --mwov-primary-dark: #93525F;    /* hover, länkar */
    --mwov-primary-darker: #7A4350;  /* länk-hover */

    --mwov-ink: #1A1A1F;
    --mwov-ink-2: #4A4D55;
    --mwov-ink-3: #5F636B;
    --mwov-disabled: #8A8D94;
    --mwov-disabled-light: #A9ACB3;

    --mwov-border-strong: #C6C8CE;
    --mwov-border: #E3E4E8;
    --mwov-divider: #EFEFF1;

    --mwov-surface: #FFFFFF;
    --mwov-surface-2: #FAFAFB;
    --mwov-surface-3: #F3F3F5;

    --mwov-success: #5C8358;
    --mwov-success-ink: #466642;
    --mwov-success-bg: #EFF3EE;
    --mwov-success-border: #D3DDD1;

    --mwov-danger: #932A2A;
    --mwov-danger-ink: #7A2323;
    --mwov-danger-bg: #F6EBEB;
    --mwov-danger-border: #E5C6C6;

    --mwov-warning: #B7791F;
    --mwov-warning-ink: #6B4600;
    --mwov-warning-bg: #FFF4DB;
    --mwov-warning-border: #F2DDA6;

    --mwov-info-ink: #17467D;
    --mwov-info-bg: #EAF1FA;
    --mwov-info-border: #C7DAF0;

    --mwov-font: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    --mwov-font-display: 'Geist', 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    --mwov-font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    --mwov-radius: 6px;
    --mwov-radius-md: 8px;
    --mwov-radius-lg: 10px;
    --mwov-control-h: 38px;
    --mwov-control-h-sm: 30px;
    --mwov-label-w: 220px;
    --mwov-max-w: 1100px;
}

/* ---------- Grund ---------- */

.mwov-admin {
    max-width: var(--mwov-max-w);
    margin: 20px 20px 48px 2px;
    font-family: var(--mwov-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--mwov-ink);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sidor med tabeller får hela bredden. Taket ovan gör inställningssidor
   lätta att läsa, men en tabell med många kolumner trycks ihop och radbryter
   datum och namn medan en tredjedel av skärmen står tom. Formulären påverkas
   inte, de har egna gränser: brödtext 72ch, fält 480 och 680 px.
   Styrs av vad sidan innehåller, så inget plugin behöver ändras. */
.mwov-admin:has(.mwov-table) {
    max-width: none;
}

.mwov-admin *,
.mwov-admin *::before,
.mwov-admin *::after { box-sizing: border-box; }

/* hidden-attributet ska vinna över komponenternas egna display-regler, annars
   syns t.ex. en dold .mwov-bulkbar ändå. Visa och dölj alltid med attributet
   (el.hidden eller $el.prop( 'hidden', … )), aldrig med inline-stil. */
.mwov-admin [hidden] { display: none !important; }

.mwov-admin a { color: var(--mwov-primary-dark); }
.mwov-admin a:hover { color: var(--mwov-primary-darker); }

/* WordPress ringar in varje fokuserad länk i blått (a:focus i common.css),
   även efter ett vanligt musklick, och det krockar med kitets egna
   fokusmarkeringar på flikar och knappar. Ringen tas bort här. För den som
   navigerar med tangentbordet ritas i stället kitets egen ring via
   :focus-visible nedan; flikar, knappar och menyer har egna varianter som vinner
   eftersom de är mer specifika. Ta aldrig bort :focus-visible-regeln, då ser
   tangentbordsanvändare inte längre var de är. */
.mwov-admin a:focus {
    box-shadow: none;
    outline: none;
}
.mwov-admin a:focus-visible {
    box-shadow: 0 0 0 2px var(--mwov-accent);
    border-radius: 3px;
}

.mwov-admin h1,
.mwov-admin h2,
.mwov-admin h3 { color: var(--mwov-ink); padding: 0; }

.mwov-admin p { margin: 0; }

.mwov-admin code {
    font-family: var(--mwov-font-mono);
    font-size: 13px;
    background: var(--mwov-surface-3);
    border: 1px solid var(--mwov-border);
    border-radius: 4px;
    padding: 1px 6px;
}

/* WordPress lägger admin-notiser i .wrap – de hamnar ovanför headern. */
.mwov-admin > .notice { margin: 0; }

/* ---------- Ikoner ---------- */

.mwov-admin .mwov-icon { flex-shrink: 0; vertical-align: -0.125em; }
.mwov-admin .mwov-icon--spin { animation: mwov-spin .8s linear infinite; }

/* ---------- Header ---------- */

.mwov-header {
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border);
    border-top: 3px solid var(--mwov-accent);
    border-radius: var(--mwov-radius-lg);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.mwov-header__brand { display: flex; align-items: center; gap: 16px; }
.mwov-header__logo { width: 48px; height: 48px; display: block; flex-shrink: 0; }
.mwov-header__titles { display: flex; flex-direction: column; gap: 2px; }
.mwov-header__row { display: flex; align-items: center; gap: 10px; }

.mwov-admin .mwov-header__title {
    margin: 0;
    font-family: var(--mwov-font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.mwov-header__by { font-size: 13px; color: var(--mwov-ink-3); }

.mwov-header__links { display: flex; align-items: center; gap: 20px; font-size: 13px; }

.mwov-admin .mwov-header__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--mwov-ink-2);
}
.mwov-admin .mwov-header__link:hover { color: var(--mwov-ink); }
.mwov-admin .mwov-header__link--accent { color: var(--mwov-primary-dark); font-weight: 500; }
.mwov-admin .mwov-header__link--accent:hover { color: var(--mwov-primary-darker); }
.mwov-header__link svg { flex-shrink: 0; }

.mwov-version {
    font-family: var(--mwov-font-mono);
    font-size: 12px;
    color: var(--mwov-ink-2);
    background: var(--mwov-surface-3);
    border: 1px solid var(--mwov-border);
    border-radius: 4px;
    padding: 2px 6px;
}

/* ---------- Flikar och panel ---------- */

.mwov-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--mwov-border);
    flex-wrap: wrap;
}

.mwov-admin .mwov-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mwov-ink-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
}
.mwov-admin .mwov-tab:hover { background: var(--mwov-surface-3); color: var(--mwov-ink); }
.mwov-admin .mwov-tab.is-active,
.mwov-admin .mwov-tab[aria-current="page"],
.mwov-admin .mwov-tab[aria-selected="true"] {
    font-weight: 600;
    color: var(--mwov-ink);
    border-bottom-color: var(--mwov-accent);
    background: transparent;
}
/* Ingen ram runt fliken vid fokus, den syntes även efter vanliga klick.
   Tangentbordsanvändare ser i stället var de är via bakgrunden, som vid hover. */
.mwov-admin .mwov-tab:focus,
.mwov-admin .mwov-tab:focus-visible { outline: none; box-shadow: none; }
.mwov-admin .mwov-tab:focus-visible { background: var(--mwov-surface-3); color: var(--mwov-ink); }

.mwov-tab__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--mwov-primary-dark);
    background: var(--mwov-accent-soft);
    border-radius: 999px;
    padding: 1px 7px;
}

/* Panel direkt under flikarna. */
.mwov-panel {
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border);
    border-top: none;
    border-radius: 0 0 var(--mwov-radius-lg) var(--mwov-radius-lg);
    padding: 8px 32px 0;
}
.mwov-panel[hidden] { display: none; }

/* Flikar och panel direkt i .mwov-admin (som i Costio, Wherio och Enrollio):
   raden har gap: 20px, och utan det här hamnar panelen, som saknar överkant,
   20 px under flikarna. Ligger båda i ett <form> gäller inte gapet. */
.mwov-admin > .mwov-tabs + .mwov-panel { margin-top: -20px; }

/* Fristående ruta, utan flikar ovanför. */
.mwov-card {
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-lg);
    padding: 8px 32px 0;
}

/* ---------- Sektioner och text ---------- */

.mwov-section {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.mwov-section + .mwov-section { border-top: 1px solid var(--mwov-divider); }
.mwov-section:last-child { padding-bottom: 32px; }

.mwov-section__head { display: flex; flex-direction: column; gap: 4px; }

.mwov-admin .mwov-section__title {
    margin: 0;
    font-family: var(--mwov-font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.mwov-admin .mwov-subtitle { margin: 0; font-size: 14px; font-weight: 600; }

.mwov-section__desc,
.mwov-text {
    max-width: 72ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mwov-ink-2);
}

.mwov-help { font-size: 13px; line-height: 1.5; color: var(--mwov-ink-3); max-width: 72ch; }
.mwov-help--error { color: var(--mwov-danger); }

/* ---------- Fältrad: etikett till vänster, kontroll till höger ---------- */

.mwov-field {
    display: grid;
    grid-template-columns: var(--mwov-label-w) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.mwov-field__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--mwov-ink);
    padding-top: 9px;   /* linjerar med textfältets text */
}
.mwov-field__label--plain { padding-top: 0; } /* för kryssrutor, radio, växel */

.mwov-field__control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* Fält ovanpå varandra, t.ex. i ett rutnät. */
.mwov-stack { display: flex; flex-direction: column; gap: 6px; }
.mwov-stack > label { font-size: 14px; font-weight: 600; }

.mwov-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mwov-inline > .mwov-input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 782px) {
    .mwov-field { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .mwov-field__label { padding-top: 0; }
    .mwov-panel, .mwov-card { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Textfält, textarea, select ---------- */

.mwov-admin .mwov-input,
.mwov-admin .mwov-textarea,
.mwov-admin .mwov-select {
    width: 100%;
    max-width: 480px;
    margin: 0;
    font-family: var(--mwov-font);
    font-size: 14px;
    color: var(--mwov-ink);
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border-strong);
    border-radius: var(--mwov-radius);
    box-shadow: none;
}

.mwov-admin .mwov-input,
.mwov-admin .mwov-select {
    height: var(--mwov-control-h);
    min-height: var(--mwov-control-h);
    padding: 0 12px;
    line-height: calc(var(--mwov-control-h) - 2px);
}

.mwov-admin .mwov-select { padding-right: 32px; }

.mwov-admin .mwov-textarea {
    max-width: 680px;
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
}

.mwov-admin .mwov-textarea--code {
    font-family: var(--mwov-font-mono);
    font-size: 13px;
    background: var(--mwov-surface-2);
}

.mwov-admin .mwov-input--mono { font-family: var(--mwov-font-mono); }
.mwov-admin .mwov-input--short { width: 90px; }
.mwov-admin .mwov-input--medium,
.mwov-admin .mwov-select--medium { max-width: 240px; }
.mwov-admin .mwov-input--wide { max-width: 680px; }

.mwov-admin .mwov-input::placeholder,
.mwov-admin .mwov-textarea::placeholder { color: var(--mwov-disabled); }

.mwov-admin .mwov-input:focus,
.mwov-admin .mwov-textarea:focus,
.mwov-admin .mwov-select:focus {
    outline: none;
    border-color: var(--mwov-accent);
    box-shadow: 0 0 0 3px var(--mwov-accent-ring);
}

.mwov-admin .mwov-input[aria-invalid="true"],
.mwov-admin .mwov-textarea[aria-invalid="true"],
.mwov-admin .mwov-input.is-invalid,
.mwov-admin .mwov-textarea.is-invalid { border-color: var(--mwov-danger); }

.mwov-admin .mwov-input:disabled,
.mwov-admin .mwov-textarea:disabled,
.mwov-admin .mwov-select:disabled {
    color: var(--mwov-disabled);
    background: #F6F6F7;
    border-color: var(--mwov-border);
    cursor: not-allowed;
}

.mwov-admin input[type="color"].mwov-input {
    width: 56px;
    padding: 3px;
    cursor: pointer;
}

.mwov-unit { font-size: 14px; color: var(--mwov-ink-2); }

/* ---------- Kryssrutor och radio ---------- */

.mwov-choices { display: flex; flex-direction: column; gap: 10px; }
.mwov-choices--row { flex-direction: row; flex-wrap: wrap; gap: 24px; }

.mwov-admin .mwov-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--mwov-ink);
    cursor: pointer;
}
.mwov-choice__meta { color: var(--mwov-ink-3); }
.mwov-admin .mwov-choice:has(input:disabled) { color: var(--mwov-disabled); cursor: not-allowed; }

/* Kontrollerna ritas av oss, inte av WordPress. Utan en egen
   appearance-nollställning ärver de forms.css utseende, och då blir en vald
   radioknapp blå hur många färger vi än sätter ovanpå. */
.mwov-admin input[type="checkbox"],
.mwov-admin input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border-strong);
    box-shadow: none;
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
}

.mwov-admin input[type="checkbox"] { border-radius: 4px; }
.mwov-admin input[type="radio"] { border-radius: 50%; }

.mwov-admin input[type="checkbox"]:checked {
    background: var(--mwov-primary);
    border-color: var(--mwov-primary);
}
.mwov-admin input[type="checkbox"]:checked::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* WordPress färgschema (colors.min.css) sätter både background och
   border-color på en vald radioknapp. Sätter vi bara border-color fyller
   dess background cirkeln blå, och pricken syns inte. Båda måste anges. */
.mwov-admin input[type="radio"]:checked {
    background: var(--mwov-surface);
    border-color: var(--mwov-primary);
}

/* Pricken ritas här, med egen content och display. Ärvs de från forms.css
   försvinner pricken den dagen WordPress skriver om sin regel. */
.mwov-admin input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    margin: 3px;
    border-radius: 50%;
    background-color: var(--mwov-primary);
}

.mwov-admin input[type="checkbox"]:focus,
.mwov-admin input[type="radio"]:focus,
.mwov-admin input[type="checkbox"]:focus-visible,
.mwov-admin input[type="radio"]:focus-visible,
.mwov-admin input[type="checkbox"]:checked:focus,
.mwov-admin input[type="radio"]:checked:focus {
    outline: none;
    border-color: var(--mwov-accent);
    box-shadow: 0 0 0 3px var(--mwov-accent-ring);
}

/* ---------- Växel (en vanlig checkbox under ytan) ----------
   <label class="mwov-toggle">
     <input type="checkbox" name="..." value="1">
     <span class="mwov-toggle__track" aria-hidden="true"></span>
     <span>Text</span>
   </label>
*/

.mwov-admin .mwov-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}
.mwov-admin .mwov-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 36px;
    height: 20px;
    margin: 0;
}
.mwov-toggle__track {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--mwov-border-strong);
    transition: background-color .15s ease;
}
.mwov-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    transition: transform .15s ease;
}
.mwov-toggle input:checked + .mwov-toggle__track { background: var(--mwov-primary); }
.mwov-toggle input:checked + .mwov-toggle__track::after { transform: translateX(16px); }
.mwov-toggle input:focus-visible + .mwov-toggle__track { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--mwov-accent); }
.mwov-toggle input:disabled + .mwov-toggle__track { opacity: .5; }

/* ---------- Knappar ---------- */

.mwov-admin .mwov-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--mwov-control-h);
    min-height: var(--mwov-control-h);
    margin: 0;
    padding: 0 16px;
    font-family: var(--mwov-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--mwov-ink);
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border-strong);
    border-radius: var(--mwov-radius);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.mwov-admin .mwov-btn:hover { background: var(--mwov-surface-3); border-color: var(--mwov-disabled-light); color: var(--mwov-ink); }
.mwov-admin .mwov-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--mwov-accent); }
.mwov-admin .mwov-btn svg { flex-shrink: 0; }

.mwov-admin .mwov-btn--primary {
    padding: 0 20px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--mwov-primary);
    border-color: var(--mwov-primary);
}
.mwov-admin .mwov-btn--primary:hover { color: #FFFFFF; background: var(--mwov-primary-dark); border-color: var(--mwov-primary-dark); }

.mwov-admin .mwov-btn--ghost { padding: 0 14px; color: var(--mwov-ink-2); background: transparent; border-color: transparent; }
.mwov-admin .mwov-btn--ghost:hover { color: var(--mwov-ink); background: var(--mwov-surface-3); border-color: transparent; }

.mwov-admin .mwov-btn--danger { padding: 0 14px; color: var(--mwov-danger); background: transparent; border-color: transparent; }
.mwov-admin .mwov-btn--danger:hover { color: #FFFFFF; background: var(--mwov-danger); border-color: var(--mwov-danger); }
.mwov-admin .mwov-btn--danger:focus-visible { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--mwov-danger); }

.mwov-admin .mwov-btn--sm { height: var(--mwov-control-h-sm); min-height: var(--mwov-control-h-sm); padding: 0 12px; font-size: 13px; }
.mwov-admin .mwov-btn--primary.mwov-btn--sm { padding: 0 14px; }

.mwov-admin .mwov-btn--icon { width: var(--mwov-control-h); padding: 0; color: var(--mwov-ink-2); }
.mwov-admin .mwov-btn--icon.mwov-btn--sm { width: var(--mwov-control-h-sm); }
.mwov-admin .mwov-btn--icon.mwov-btn--danger { color: var(--mwov-danger); }
.mwov-admin .mwov-btn--icon.mwov-btn--danger:hover { color: #FFFFFF; }

.mwov-admin .mwov-btn:disabled,
.mwov-admin .mwov-btn[aria-disabled="true"] {
    color: var(--mwov-disabled);
    background: var(--mwov-surface-2);
    border-color: var(--mwov-border);
    cursor: not-allowed;
}
.mwov-admin .mwov-btn--primary:disabled { background: #EDEDEF; border-color: #EDEDEF; }
.mwov-admin .mwov-btn--ghost:disabled,
.mwov-admin .mwov-btn--danger:disabled { color: var(--mwov-disabled-light); background: transparent; border-color: transparent; }

/* Laddar: lägg till .is-loading och disabled, spinnern ritas här. */
.mwov-admin .mwov-btn.is-loading { cursor: progress; }
.mwov-admin .mwov-btn.is-loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: mwov-spin .7s linear infinite;
}
.mwov-admin .mwov-btn--primary.is-loading:disabled { color: #FFFFFF; background: var(--mwov-primary); border-color: var(--mwov-primary); opacity: .85; }
@keyframes mwov-spin { to { transform: rotate(360deg); } }

/* Knapprad längst ned i panelen. */
.mwov-actions {
    margin: 0 -32px;
    padding: 16px 32px;
    border-top: 1px solid var(--mwov-border);
    background: var(--mwov-surface-2);
    border-radius: 0 0 var(--mwov-radius-lg) var(--mwov-radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.mwov-actions__main { display: flex; align-items: center; gap: 10px; }
@media (max-width: 782px) { .mwov-actions { margin: 0 -16px; padding: 16px; } }

/* ---------- Meddelanden ---------- */

.mwov-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.55;
    border: 1px solid var(--mwov-info-border);
    border-radius: var(--mwov-radius-md);
    background: var(--mwov-info-bg);
    color: var(--mwov-info-ink);
    max-width: 900px;
}
.mwov-notice svg { flex-shrink: 0; margin-top: 2px; }
.mwov-notice--success { background: var(--mwov-success-bg); border-color: var(--mwov-success-border); color: var(--mwov-success-ink); }
.mwov-notice--warning { background: var(--mwov-warning-bg); border-color: var(--mwov-warning-border); color: var(--mwov-warning-ink); }
.mwov-notice--error   { background: var(--mwov-danger-bg);  border-color: var(--mwov-danger-border);  color: var(--mwov-danger-ink); }
.mwov-admin > .mwov-notice { max-width: none; align-items: center; }

/* ---------- Märken ---------- */

.mwov-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    padding: 3px 10px;
    color: var(--mwov-ink-2);
    background: var(--mwov-surface-3);
    white-space: nowrap;
}
.mwov-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mwov-badge--success { color: var(--mwov-success-ink); background: var(--mwov-success-bg); }
.mwov-badge--success.mwov-badge--dot::before { background: var(--mwov-success); }
.mwov-badge--warning { color: var(--mwov-warning-ink); background: var(--mwov-warning-bg); }
.mwov-badge--warning.mwov-badge--dot::before { background: var(--mwov-warning); }
.mwov-badge--error   { color: var(--mwov-danger-ink); background: var(--mwov-danger-bg); }
.mwov-badge--error.mwov-badge--dot::before { background: var(--mwov-danger); }
.mwov-badge--neutral.mwov-badge--dot::before { background: var(--mwov-disabled); }
.mwov-badge--accent  { color: var(--mwov-primary-dark); background: var(--mwov-accent-soft); }

/* ---------- Tabell ---------- */

.mwov-admin .mwov-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-md);
    overflow: hidden;
    font-size: 14px;
    background: var(--mwov-surface);
}
.mwov-admin .mwov-table th {
    text-align: left;
    padding: 11px 16px;
    background: #F6F7F9;
    border-bottom: 1px solid var(--mwov-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mwov-ink-3);
}
.mwov-admin .mwov-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mwov-divider);
    vertical-align: middle;
}
.mwov-admin .mwov-table tbody tr:last-child td { border-bottom: none; }
.mwov-admin .mwov-table tbody tr:hover td { background: var(--mwov-surface-2); }
.mwov-admin .mwov-table .is-num,
.mwov-admin .mwov-table .is-actions { text-align: right; }
.mwov-admin .mwov-table td.is-actions { padding-top: 8px; padding-bottom: 8px; }
.mwov-table__muted { color: var(--mwov-ink-2); }

/* ---------- Hopfällbar ---------- */

.mwov-details {
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-md);
    background: var(--mwov-surface);
}
.mwov-details > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
}
.mwov-details > summary::-webkit-details-marker { display: none; }
.mwov-details > summary::after {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4D55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform .15s ease;
}
.mwov-details[open] > summary::after { transform: rotate(180deg); }
.mwov-details > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mwov-accent); border-radius: var(--mwov-radius-md); }
.mwov-details__body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Lista av hopfällbara rader ----------
   En lång lista ska läsas som en lista, inte som en trave kort. Raderna sitter
   ihop med en linje emellan i stället för en ram var, och summariet är lägre än
   i en enskild .mwov-details.

   Summariet har två delar: det som identifierar raden och det som sammanfattar
   den. Den första tar överskottet, så sammanfattningen hamnar längst till höger
   intill pilen i stället för mitt i raden.
*/

.mwov-details-list { display: flex; flex-direction: column; }

.mwov-admin .mwov-details-list > .mwov-details {
    border-radius: 0;
    margin: 0;
}
.mwov-details-list > .mwov-details + .mwov-details { border-top: 0; }
.mwov-admin .mwov-details-list > .mwov-details:first-child {
    border-top-left-radius: var(--mwov-radius-md);
    border-top-right-radius: var(--mwov-radius-md);
}
.mwov-admin .mwov-details-list > .mwov-details:last-child {
    border-bottom-left-radius: var(--mwov-radius-md);
    border-bottom-right-radius: var(--mwov-radius-md);
}
.mwov-details-list > .mwov-details > summary {
    padding: 9px 16px;
    gap: 12px;
    font-weight: 400;
}
.mwov-details-list > .mwov-details > summary > :first-child { margin-right: auto; }
.mwov-details-list > .mwov-details[open] > summary { border-bottom: 1px solid var(--mwov-divider); }

/* ---------- Scrollbar lista (t.ex. många sidor att kryssa i) ---------- */

.mwov-scroll-list {
    max-height: 240px;
    overflow-y: auto;
    max-width: 580px;
    padding: 12px 14px;
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-md);
    background: var(--mwov-surface-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------- Sidfot ---------- */

.mwov-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--mwov-ink-3);
}
.mwov-admin .mwov-footer a { color: var(--mwov-ink-3); }
.mwov-admin .mwov-footer a:hover { color: var(--mwov-ink); }

/* ==========================================================================
   Grafer och nyckeltal
   Graferna ritas med Chart.js via js/mwov-charts.js (färger sätts där).
   ========================================================================== */

.mwov-admin {
    --mwov-chart-1: #B0697A;   /* rosa    – serie 1 */
    --mwov-chart-2: #315979;   /* blå     – serie 2 */
    --mwov-chart-3: #C49D67;   /* sand    – serie 3 */
    --mwov-chart-4: #734E78;   /* plommon – serie 4 */
    --mwov-chart-5: #62A190;   /* salvia  – serie 5 */
    --mwov-chart-grid: #ECEDF0;
    --mwov-chart-base: #C6C8CE;
    --mwov-chart-seq-100: #F4E8EB;
    --mwov-chart-seq-200: #E6CBD2;
    --mwov-chart-seq-300: #D5AAB5;
    --mwov-chart-seq-400: #C38997;
    --mwov-chart-seq-500: #B0697A;
    --mwov-chart-seq-600: #8F5462;
    --mwov-chart-seq-700: #6D404B;
}

/* ---------- Nyckeltal ---------- */

.mwov-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.mwov-stat {
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-lg);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mwov-stat__label { font-size: 13px; color: var(--mwov-ink-2); }
.mwov-stat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mwov-stat__value {
    font-family: var(--mwov-font-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--mwov-ink);
}
.mwov-stat__spark { width: 120px; height: 32px; flex-shrink: 0; }
.mwov-stat__foot { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mwov-ink-3); }
.mwov-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.mwov-delta--good { color: var(--mwov-success-ink); }
.mwov-delta--bad  { color: var(--mwov-danger-ink); }
.mwov-delta--flat { color: var(--mwov-ink-2); }

/* ---------- Grafruta ---------- */

.mwov-chart-card {
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-lg);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.mwov-chart-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.mwov-chart-card__sub { margin: 2px 0 0; font-size: 13px; color: var(--mwov-ink-3); }

/* Chart.js behöver en behållare med höjd. */
.mwov-chart { position: relative; width: 100%; height: 260px; }
.mwov-chart--sm { height: 180px; }
.mwov-chart--lg { height: 340px; }

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

/* ---------- Periodväljare ---------- */

.mwov-segmented {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--mwov-surface-3);
    border-radius: var(--mwov-radius-md);
}
.mwov-admin .mwov-segmented button {
    height: var(--mwov-control-h-sm);
    padding: 0 12px;
    font-family: var(--mwov-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--mwov-ink-2);
    background: transparent;
    border: 0;
    border-radius: var(--mwov-radius);
    cursor: pointer;
}
.mwov-admin .mwov-segmented button:hover { color: var(--mwov-ink); }
.mwov-admin .mwov-segmented button[aria-pressed="true"] {
    font-weight: 600;
    color: var(--mwov-ink);
    background: var(--mwov-surface);
    box-shadow: 0 1px 2px rgba(26, 26, 31, .10);
}
.mwov-admin .mwov-segmented button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mwov-accent); }

/* ---------- Mätare ----------
   <div class="mwov-meter" role="meter" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" aria-label="API-budget">
     <div class="mwov-meter__fill" style="--value: 62%"></div>
   </div>
   Värdet är data, därför är --value tillåtet inline.
*/

.mwov-meter-row { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.mwov-meter-row__head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.mwov-meter-row__label { font-weight: 600; }
.mwov-meter-row__value { color: var(--mwov-ink-2); }

.mwov-meter {
    height: 8px;
    border-radius: 999px;
    background: #F3E4E8;
    overflow: hidden;
}
.mwov-meter__fill {
    width: var(--value, 0%);
    height: 100%;
    border-radius: 999px;
    background: var(--mwov-chart-1);
}
.mwov-meter--danger { background: var(--mwov-danger-bg); }
.mwov-meter--danger .mwov-meter__fill { background: var(--mwov-danger); }

/* Tabellvy bakom en graf (för skärmläsare eller "Visa som tabell"). */
.mwov-chart-table { margin-top: 4px; }

/* ---------- Startsidans plugin-rutnät ---------- */

.mwov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.mwov-tile {
    background: var(--mwov-surface-2);
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-lg);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mwov-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mwov-admin .mwov-tile__title {
    font-family: var(--mwov-font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--mwov-ink);
}

.mwov-admin .mwov-tile__desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--mwov-ink-2);
    margin: 0;
    /* Korten ska bli lika höga även när beskrivningarna är olika långa. */
    flex: 1 1 auto;
}

.mwov-tile__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Knappen behöver mer luft över sig än raderna emellan, annars ser kortet
       hopklamt ut när beskrivningen är kort. */
    margin-top: 4px;
}

/* ==========================================================================
   Listsidor och längre innehåll
   Verktygsrad, markeringsrad, sortering, paginering, meny, dialog, toast,
   bild i tabell, bildväljare, upprepade rader, tvåspaltslayout, listor, kodblock.
   ========================================================================== */

/* ---------- Sektionshuvud med knapp till höger ---------- */

.mwov-section__head--row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Verktygsrad ovanför en tabell ----------
   Filter till vänster, åtgärder i __end till höger. Fälten blir så breda som
   innehållet i stället för 100 %. */

.mwov-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.mwov-admin .mwov-toolbar .mwov-select,
.mwov-admin .mwov-toolbar .mwov-input { width: auto; max-width: 280px; }
.mwov-admin .mwov-toolbar input[type="search"].mwov-input { min-width: 200px; }
.mwov-toolbar__label { font-size: 13px; color: var(--mwov-ink-2); }
.mwov-toolbar__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---------- Markeringsrad (visas när rader är markerade) ---------- */

.mwov-bulkbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 12px 8px 16px;
    background: var(--mwov-accent-soft);
    border: 1px solid var(--mwov-accent-soft-border);
    border-radius: var(--mwov-radius-md);
}
.mwov-bulkbar__count { font-size: 14px; font-weight: 600; color: var(--mwov-ink); }
.mwov-bulkbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ---------- Tabell: kryssruta, sortering, markerad rad, tomt läge ---------- */

.mwov-admin .mwov-table .is-check { width: 44px; padding-right: 0; }
.mwov-admin .mwov-table .is-check input { margin: 0; }
.mwov-admin .mwov-table .is-nowrap { white-space: nowrap; }
.mwov-admin .mwov-table td.is-actions .mwov-inline { justify-content: flex-end; gap: 4px; }
.mwov-admin .mwov-table tbody tr.is-selected td { background: var(--mwov-accent-soft); }
.mwov-admin .mwov-table td.mwov-table__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--mwov-ink-3);
}

/* Sorterbar kolumn: <th aria-sort="ascending"><button class="mwov-table__sort">Namn</button></th>.
   aria-sort sätts bara på den kolumn som sorterar. */
.mwov-admin .mwov-table__sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.mwov-admin .mwov-table__sort:hover { color: var(--mwov-ink); }
.mwov-admin .mwov-table__sort:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mwov-accent); border-radius: 3px; }
.mwov-admin .mwov-table__sort::after {
    content: '';
    width: 12px;
    height: 12px;
    opacity: .35;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F636B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.mwov-admin th[aria-sort] .mwov-table__sort { color: var(--mwov-ink); }
.mwov-admin th[aria-sort] .mwov-table__sort::after { opacity: 1; }
.mwov-admin th[aria-sort="ascending"] .mwov-table__sort::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3C/svg%3E");
}
.mwov-admin th[aria-sort="descending"] .mwov-table__sort::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}

/* Liten bild i en tabellcell. Saknas bild: <span class="mwov-thumb"></span>. */
.mwov-thumb {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius);
    background: var(--mwov-surface-3);
}

/* ---------- Paginering ----------
   Knapparna är .mwov-btn .mwov-btn--sm, aktuell sida har aria-current="page". */

.mwov-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.mwov-admin .mwov-pagination .mwov-btn { min-width: var(--mwov-control-h-sm); padding: 0 8px; }
.mwov-admin .mwov-pagination .mwov-btn[aria-current="page"] {
    font-weight: 600;
    color: #FFFFFF;
    background: var(--mwov-primary);
    border-color: var(--mwov-primary);
    cursor: default;
}
.mwov-pagination__gap { padding: 0 4px; color: var(--mwov-ink-3); }

/* ---------- Meny (rullgardin från en knapp) ----------
   <div class="mwov-menu">
     <button class="mwov-btn" aria-haspopup="true" aria-expanded="false" aria-controls="x">…</button>
     <div class="mwov-menu__list" id="x" role="menu" hidden>
       <button class="mwov-menu__item" role="menuitem">…</button>
     </div>
   </div> */

.mwov-menu { position: relative; display: inline-flex; }
.mwov-menu__list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    min-width: 220px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-md);
    box-shadow: 0 8px 24px rgba(26, 26, 31, .12);
}
.mwov-admin .mwov-menu__item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    font-family: var(--mwov-font);
    font-size: 14px;
    text-align: left;
    color: var(--mwov-ink);
    background: none;
    border: 0;
    border-radius: var(--mwov-radius);
    cursor: pointer;
}
.mwov-admin .mwov-menu__item:hover { background: var(--mwov-surface-3); }
.mwov-admin .mwov-menu__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mwov-accent); }

/* ---------- Dialog ----------
   Ska ligga inuti .mwov-admin, annars saknas tokens.
   <div class="mwov-modal" hidden>
     <div class="mwov-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="t">
       <div class="mwov-modal__head"><h2 class="mwov-modal__title" id="t">…</h2> <button class="mwov-btn mwov-btn--icon mwov-btn--ghost" aria-label="Stäng">…</button></div>
       <div class="mwov-modal__body">…</div>
       <div class="mwov-modal__foot">…</div>
     </div>
   </div> */

.mwov-modal {
    position: fixed;
    inset: 0;
    z-index: 100000; /* över WordPress adminrad */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 26, 31, .45);
}
.mwov-modal__dialog {
    width: min(960px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--mwov-surface);
    border-radius: var(--mwov-radius-lg);
    box-shadow: 0 24px 64px rgba(26, 26, 31, .25);
    overflow: hidden;
}
.mwov-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 16px 24px;
    border-bottom: 1px solid var(--mwov-border);
}
.mwov-admin .mwov-modal__title {
    margin: 0;
    font-family: var(--mwov-font-display);
    font-size: 17px;
    font-weight: 600;
}
.mwov-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mwov-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 24px;
    background: var(--mwov-surface-2);
    border-top: 1px solid var(--mwov-border);
}

/* ---------- Toast ----------
   Kort bekräftelse som försvinner av sig själv. Samma varianter som
   .mwov-notice: <div class="mwov-toast mwov-notice mwov-notice--success" role="status">.
   Lägg den inuti .mwov-admin, annars saknas tokens. */

.mwov-admin .mwov-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100001;
    max-width: 420px;
    box-shadow: 0 8px 24px rgba(26, 26, 31, .15);
}

/* ---------- Tvåspaltslayout: huvudspalt och smal sidospalt ---------- */

.mwov-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}
.mwov-split__main,
.mwov-split__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 1100px) {
    .mwov-split { grid-template-columns: minmax(0, 1fr); }
}

/* Fält i .mwov-stack ska fylla spalten i stället för att stanna på 480 px. */
.mwov-admin .mwov-split .mwov-stack .mwov-input,
.mwov-admin .mwov-split .mwov-stack .mwov-select,
.mwov-admin .mwov-split .mwov-stack .mwov-textarea { max-width: none; }

/* ---------- Bildväljare ---------- */

.mwov-media { display: flex; flex-direction: column; gap: 10px; }
.mwov-media__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 8px;
    background: var(--mwov-surface-2);
    border: 1px dashed var(--mwov-border-strong);
    border-radius: var(--mwov-radius-md);
}
.mwov-media__preview img { display: block; max-width: 100%; height: auto; border-radius: var(--mwov-radius); }

/* ---------- Upprepade rader (lägg till / ta bort) ----------
   Varje rad är fält i .mwov-stack plus en ikonknapp för att ta bort. */

.mwov-repeater { display: flex; flex-direction: column; gap: 8px; }
.mwov-repeater:empty { display: none; }
.mwov-repeater__row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 12px 12px 14px;
    background: var(--mwov-surface-2);
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-md);
}
.mwov-repeater__row > .mwov-stack { flex: 1 1 110px; min-width: 0; }
.mwov-repeater__row > .mwov-stack--grow { flex: 3 1 180px; }
.mwov-admin .mwov-repeater__row .mwov-input { max-width: none; }
.mwov-repeater__row > .mwov-btn--icon { flex-shrink: 0; }

/* ---------- Listor och kodblock i löptext ---------- */

.mwov-admin .mwov-list {
    max-width: 72ch;
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mwov-ink-2);
}
.mwov-admin ul.mwov-list { list-style: disc; }
.mwov-admin ol.mwov-list { list-style: decimal; }
.mwov-admin .mwov-list li { margin: 0; padding-left: 2px; }
.mwov-admin .mwov-list strong { color: var(--mwov-ink); }

.mwov-admin .mwov-pre {
    margin: 0;
    padding: 12px 16px;
    overflow-x: auto;
    font-family: var(--mwov-font-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
    color: var(--mwov-ink);
    background: var(--mwov-surface-2);
    border: 1px solid var(--mwov-border);
    border-radius: var(--mwov-radius-md);
}
.mwov-admin .mwov-pre code { padding: 0; font-size: inherit; background: none; border: 0; }

/* ==========================================================================
   Obligatoriska fält, felsammanfattning, sökfält och laddningsläge
   ========================================================================== */

/* ---------- Obligatoriskt fält ----------
   <label class="mwov-field__label" for="x">Namn <span class="mwov-required" aria-hidden="true">*</span></label>
   <input class="mwov-input" id="x" required aria-required="true">
   Stjärnan är dekor: det är required och aria-required som bär betydelsen.
*/

.mwov-required {
    margin-left: 2px;
    font-weight: 600;
    color: var(--mwov-danger);
}

.mwov-legend-required {
    font-size: 13px;
    color: var(--mwov-ink-3);
}

/* ---------- Felsammanfattning högst upp i formuläret ----------
   Skrivs ut när sparningen misslyckades, med länk till varje fält som är fel.
   Ge den tabindex="-1" och flytta fokus hit efter sparförsöket.
*/

.mwov-errors {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--mwov-danger-bg);
    border: 1px solid var(--mwov-danger-border);
    border-radius: var(--mwov-radius-md);
    color: var(--mwov-danger-ink);
    max-width: 900px;
}
.mwov-errors:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--mwov-danger); }
.mwov-errors__head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.mwov-errors__list { margin: 0; padding-left: 28px; font-size: 14px; line-height: 1.7; }
.mwov-admin .mwov-errors__list a { color: var(--mwov-danger-ink); }
.mwov-admin .mwov-errors__list a:hover { color: var(--mwov-danger); }

/* ---------- Sökfält ----------
   <div class="mwov-search">
     <span class="mwov-search__icon"><?php echo mwov_icon( 'search' ); ?></span>
     <input type="search" class="mwov-input" placeholder="Sök deltagare">
     <button type="button" class="mwov-search__clear" aria-label="Rensa sökningen" hidden><?php echo mwov_icon( 'x', array( 'size' => 14 ) ); ?></button>
   </div>
   Visa krysset med JS när fältet har innehåll (ta bort hidden).
*/

.mwov-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 320px;
}
.mwov-search__icon {
    position: absolute;
    left: 12px;
    display: flex;
    color: var(--mwov-ink-3);
    pointer-events: none;
}
.mwov-admin .mwov-search .mwov-input { padding-left: 36px; padding-right: 36px; max-width: none; }
.mwov-admin .mwov-search .mwov-input::-webkit-search-cancel-button { display: none; }
.mwov-admin .mwov-search__clear {
    position: absolute;
    right: 5px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--mwov-ink-3);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
.mwov-admin .mwov-search__clear:hover { color: var(--mwov-ink); background: var(--mwov-surface-3); }
.mwov-admin .mwov-search__clear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mwov-accent); }
.mwov-search--wide { max-width: 480px; }

/* ---------- Laddningsläge ----------
   Sätt aria-busy="true" på behållaren och rita skelettrader i stället för
   innehållet, så att layouten inte hoppar när data kommer.
   <tr aria-hidden="true"><td><span class="mwov-skeleton mwov-skeleton--text"></span></td></tr>
*/

.mwov-skeleton {
    display: block;
    background: var(--mwov-surface-3);
    border-radius: 6px;
    animation: mwov-pulse 1.4s ease-in-out infinite;
}
.mwov-skeleton--text { height: 12px; width: 100%; }
.mwov-skeleton--short { width: 40%; }
.mwov-skeleton--title { height: 18px; width: 30%; border-radius: 6px; }
.mwov-skeleton--pill { height: 20px; width: 84px; border-radius: 999px; }
.mwov-skeleton--block { height: 180px; border-radius: var(--mwov-radius-md); }
.mwov-skeleton--chart { height: 260px; border-radius: var(--mwov-radius-md); }

.mwov-skeleton-rows { display: flex; flex-direction: column; gap: 14px; }

/* Laddar med text och spinner, när ett skelett är för mycket. */
.mwov-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    font-size: 14px;
    color: var(--mwov-ink-3);
}

@keyframes mwov-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .mwov-admin .mwov-skeleton,
    .mwov-admin .mwov-icon--spin,
    .mwov-admin .mwov-btn.is-loading::before { animation: none; }
}

/* ==========================================================================
   Datum, fil, hjälpbubbla, checklista och utskrift
   ========================================================================== */

/* ---------- Datum ---------- */

.mwov-admin input[type="date"].mwov-input,
.mwov-admin input[type="time"].mwov-input,
.mwov-admin input[type="datetime-local"].mwov-input {
    width: auto;
    min-width: 170px;
    padding-right: 10px;
}
.mwov-admin input[type="time"].mwov-input { min-width: 120px; }
.mwov-admin input[type="date"].mwov-input::-webkit-calendar-picker-indicator,
.mwov-admin input[type="time"].mwov-input::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
}
.mwov-admin input[type="date"].mwov-input:hover::-webkit-calendar-picker-indicator { opacity: .9; }

/* Datumintervall: två fält med ett tankstreck emellan. */
.mwov-daterange { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mwov-daterange__sep { color: var(--mwov-ink-3); }

/* ---------- Filfält ----------
   <div class="mwov-file">
     <label class="mwov-file__button" for="csv"><?php echo mwov_icon( 'upload' ); ?><span>Välj fil</span></label>
     <input class="mwov-file__input" type="file" id="csv" accept=".csv">
     <span class="mwov-file__name">Ingen fil vald</span>
   </div>
   Filnamnet skrivs in med JS när något valts.
*/

.mwov-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

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

.mwov-admin .mwov-file__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--mwov-control-h);
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mwov-ink);
    background: var(--mwov-surface);
    border: 1px solid var(--mwov-border-strong);
    border-radius: var(--mwov-radius);
    cursor: pointer;
}
.mwov-admin .mwov-file__button:hover { background: var(--mwov-surface-3); border-color: var(--mwov-disabled-light); }
.mwov-file__input:focus-visible + .mwov-file__button,
.mwov-admin .mwov-file__input:focus-visible ~ .mwov-file__button { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--mwov-accent); }
.mwov-file__name { font-size: 13px; color: var(--mwov-ink-3); }
.mwov-file__name.is-set { color: var(--mwov-ink-2); font-weight: 500; }

/* ---------- Yta att dra och släppa på ----------
   <label class="mwov-dropzone" for="csv"> … </label> med samma input som ovan.
   Lägg till is-dragover på dragenter, ta bort på dragleave och drop.
*/

.mwov-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 24px;
    max-width: 580px;
    text-align: center;
    color: var(--mwov-ink-2);
    background: var(--mwov-surface-2);
    border: 2px dashed var(--mwov-border-strong);
    border-radius: var(--mwov-radius-lg);
    cursor: pointer;
}
.mwov-dropzone:hover { border-color: var(--mwov-disabled-light); background: var(--mwov-surface-3); }
.mwov-dropzone.is-dragover {
    border-color: var(--mwov-accent);
    background: var(--mwov-accent-soft);
    color: var(--mwov-ink);
}
.mwov-dropzone__icon { color: var(--mwov-ink-3); }
.mwov-dropzone.is-dragover .mwov-dropzone__icon { color: var(--mwov-primary); }
.mwov-dropzone__text { font-size: 14px; font-weight: 600; color: var(--mwov-ink); }
.mwov-dropzone__hint { font-size: 13px; color: var(--mwov-ink-3); }
.mwov-dropzone:focus-within { border-color: var(--mwov-accent); box-shadow: 0 0 0 3px var(--mwov-accent-ring); }

/* ---------- Hjälpbubbla ----------
   <span class="mwov-tip">
     <button type="button" class="mwov-tip__btn" aria-label="Vad betyder det här?" aria-describedby="tip-1"><?php echo mwov_icon( 'help' ); ?></button>
     <span class="mwov-tip__bubble" role="tooltip" id="tip-1">Kort förklaring, en mening.</span>
   </span>
   Visas vid hover och vid tangentbordsfokus. Håll texten kort – det som måste
   läsas för att fylla i fältet hör hemma i .mwov-help, inte i en bubbla.
*/

.mwov-tip { position: relative; display: inline-flex; vertical-align: -0.2em; }

.mwov-admin .mwov-tip__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--mwov-ink-3);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: help;
}
.mwov-admin .mwov-tip__btn:hover { color: var(--mwov-ink); background: var(--mwov-surface-3); }
.mwov-admin .mwov-tip__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mwov-accent); }

.mwov-tip__bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: max-content;
    max-width: 260px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    color: #FFFFFF;
    background: var(--mwov-ink);
    border-radius: var(--mwov-radius);
    box-shadow: 0 6px 20px rgba(26, 26, 31, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}
.mwov-tip__bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: var(--mwov-ink);
}
.mwov-tip__btn:hover + .mwov-tip__bubble,
.mwov-tip__btn:focus-visible + .mwov-tip__bubble,
.mwov-tip__bubble:hover { opacity: 1; visibility: visible; }

/* ---------- Checklista för igångsättning ----------
   <ol class="mwov-checklist">
     <li class="mwov-checklist__item is-done"> … </li>
     <li class="mwov-checklist__item is-current"> … </li>
     <li class="mwov-checklist__item"> … </li>
   </ol>
*/

.mwov-admin .mwov-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 720px;
}

.mwov-checklist__item {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 16px 0;
}
.mwov-checklist__item + .mwov-checklist__item { border-top: 1px solid var(--mwov-divider); }

/* Linjen som binder ihop stegen. */
.mwov-checklist__item::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 44px;
    bottom: -16px;
    width: 2px;
    background: var(--mwov-border);
}
.mwov-checklist__item:last-child::before { display: none; }
.mwov-checklist__item.is-done::before { background: var(--mwov-success); }

.mwov-checklist__marker {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--mwov-ink-3);
    background: var(--mwov-surface);
    border: 2px solid var(--mwov-border-strong);
    border-radius: 999px;
}
.is-done > .mwov-checklist__marker {
    color: #FFFFFF;
    background: var(--mwov-success);
    border-color: var(--mwov-success);
}
.is-current > .mwov-checklist__marker {
    color: var(--mwov-ink);
    border-color: var(--mwov-primary);
    box-shadow: 0 0 0 3px var(--mwov-accent-ring);
}

.mwov-checklist__body { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.mwov-checklist__title { font-size: 14px; font-weight: 600; color: var(--mwov-ink); }
.is-done .mwov-checklist__title { color: var(--mwov-ink-2); }
.mwov-checklist__desc { font-size: 13px; line-height: 1.5; color: var(--mwov-ink-3); }
.mwov-checklist__action { padding-top: 1px; }

.mwov-checklist__progress { font-size: 13px; color: var(--mwov-ink-3); }

/* ---------- Utskrift ----------
   Deltagarlistor och kölistor skrivs ut. Då ska WordPress egen meny, kitets
   knappar och verktygsrader bort, och tabellen få hela bredden.
*/

@media print {
    #adminmenumain,
    #adminmenuback,
    #adminmenuwrap,
    #wpadminbar,
    #wpfooter,
    .notice,
    .mwov-admin .mwov-tabs,
    .mwov-admin .mwov-toolbar,
    .mwov-admin .mwov-bulkbar,
    .mwov-admin .mwov-actions,
    .mwov-admin .mwov-pagination,
    .mwov-admin .mwov-btn,
    .mwov-admin .mwov-header__links,
    .mwov-admin .mwov-segmented,
    .mwov-admin .mwov-search,
    .mwov-admin .mwov-file,
    .mwov-admin .mwov-dropzone,
    .mwov-admin .mwov-tip,
    .mwov-admin .mwov-skeleton,
    .mwov-admin .mwov-no-print { display: none !important; }

    html, body, #wpwrap, #wpcontent, #wpbody, #wpbody-content {
        margin: 0 !important;
        padding: 0 !important;
        background: #FFFFFF !important;
    }

    .mwov-admin {
        max-width: none;
        margin: 0;
        gap: 12px;
        font-size: 12pt;
        color: #000000;
    }

    .mwov-admin .mwov-header {
        border: 0;
        border-bottom: 1pt solid #000000;
        border-radius: 0;
        padding: 0 0 8pt;
    }

    .mwov-admin .mwov-panel,
    .mwov-admin .mwov-card,
    .mwov-admin .mwov-chart-card {
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    .mwov-admin .mwov-table { border-color: #000000; }
    .mwov-admin .mwov-table th { background: #FFFFFF !important; color: #000000; border-bottom: 1pt solid #000000; }
    .mwov-admin .mwov-table td { border-bottom: .5pt solid #767676; }
    .mwov-admin .mwov-table thead { display: table-header-group; }
    .mwov-admin .mwov-table tr { break-inside: avoid; }
    .mwov-admin .mwov-section { break-inside: avoid; }

    .mwov-admin .mwov-badge { border: .5pt solid #767676; background: #FFFFFF !important; color: #000000; }

    .mwov-print-only { display: block !important; }
}

/* Rader som bara ska synas på papper, t.ex. datum och vem som skrev ut. */
.mwov-print-only { display: none; }

/* ==========================================================================
   Tomt läge och sparat-status
   ========================================================================== */

/* ---------- Tomt läge ----------
   För en sida eller ruta som inte har något innehåll än. Säg vad som saknas
   och vad man gör åt det – aldrig bara "Inget att visa".
*/

.mwov-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
}
.mwov-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    color: var(--mwov-ink-3);
    background: var(--mwov-surface-3);
    border-radius: 999px;
}
.mwov-admin .mwov-empty__title {
    margin: 0;
    font-family: var(--mwov-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--mwov-ink);
}
.mwov-empty__text {
    max-width: 52ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mwov-ink-2);
}
.mwov-empty__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.mwov-empty--sm { padding: 28px 20px; }
.mwov-empty--sm .mwov-empty__icon { width: 44px; height: 44px; }

/* Tomt läge efter filtrering, inuti en tabell. */
.mwov-empty--filtered .mwov-empty__icon { background: var(--mwov-surface-2); }

/* ---------- Sparat-status ----------
   <span class="mwov-status" aria-live="polite"></span> i .mwov-actions,
   fylls av MWoV.status( el ).saving() / .saved() / .dirty().
*/

.mwov-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mwov-ink-3);
}
.mwov-status.is-saved { color: var(--mwov-success-ink); }
.mwov-status.is-dirty { color: var(--mwov-warning-ink); }
.mwov-status.is-saving { color: var(--mwov-ink-2); }

/* Fylld raderaknapp – används i bekräftelsedialogen, där den är huvudåtgärden. */
.mwov-admin .mwov-btn--danger-solid {
    padding: 0 20px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--mwov-danger);
    border: 1px solid var(--mwov-danger);
}
.mwov-admin .mwov-btn--danger-solid:hover { color: #FFFFFF; background: #7A2323; border-color: #7A2323; }
.mwov-admin .mwov-btn--danger-solid:focus-visible { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--mwov-danger); }

/* ==========================================================================
   Radantal per sida, flikar med tangentbord, breda tabeller och färgscheman
   ========================================================================== */

/* ---------- Radantal per sida ----------
   Ligger till vänster i .mwov-pagination, sidnumren till höger.
*/

.mwov-pagination { justify-content: space-between; }
.mwov-pagination__pages { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.mwov-pagination__size { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mwov-ink-3); }
.mwov-admin .mwov-pagination__size .mwov-select {
    height: var(--mwov-control-h-sm);
    min-height: var(--mwov-control-h-sm);
    width: auto;
    padding: 0 28px 0 10px;
    font-size: 13px;
    line-height: calc(var(--mwov-control-h-sm) - 2px);
}
.mwov-pagination__total { font-size: 13px; color: var(--mwov-ink-3); }

/* ---------- Flikar som riktiga tabbar ----------
   Växlar de panel med JS ska de vara en tablist:
   <nav class="mwov-tabs" role="tablist"> <button class="mwov-tab" role="tab" aria-selected="true" aria-controls="p1" id="t1"> … </nav>
   <div class="mwov-panel" role="tabpanel" id="p1" aria-labelledby="t1" tabindex="0">
   MWoV.tabs( element ) sköter piltangenter, Home/End och aria-selected.
   Länkar som byter sida är fortfarande vanliga <a>.
*/

.mwov-admin button.mwov-tab {
    font-family: var(--mwov-font);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.mwov-admin .mwov-tab[aria-selected="true"] {
    font-weight: 600;
    color: var(--mwov-ink);
    border-bottom-color: var(--mwov-accent);
}
.mwov-admin .mwov-panel[role="tabpanel"]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mwov-accent); }

/* ---------- Breda tabeller på smal skärm ----------
   Tabellen behåller sina kolumner och får vågrät scroll i stället för att
   klämmas ihop. Första kolumnen kan låsas fast med --sticky.
*/

.mwov-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--mwov-radius-md);
}
.mwov-table-scroll > .mwov-table { min-width: 720px; }
.mwov-table-scroll:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mwov-accent-ring); }

.mwov-admin .mwov-table--sticky th:first-child,
.mwov-admin .mwov-table--sticky td:first-child {
    position: sticky;
    left: 0;
    background: var(--mwov-surface);
    box-shadow: 1px 0 0 var(--mwov-divider);
}
.mwov-admin .mwov-table--sticky th:first-child { background: #F6F7F9; }

/* ---------- WordPress färgscheman ----------
   Kitet är ljust, oavsett vilket färgschema användaren valt. WordPress egen
   meny och adminrad behåller sitt schema; kitets ytor gör inte det, annars
   skulle varje panel behöva två uppsättningar färger. Det här låser ytan så
   att ett mörkt schema inte lyser igenom.
*/

.mwov-admin,
.mwov-admin .mwov-panel,
.mwov-admin .mwov-card,
.mwov-admin .mwov-chart-card,
.mwov-admin .mwov-modal__dialog { color-scheme: light; }

.mwov-admin .mwov-input,
.mwov-admin .mwov-textarea,
.mwov-admin .mwov-select { color-scheme: light; }