/* Bootbox-dialog med lika breda knappar */
.bootbox-equal-buttons .modal-footer {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}
.bootbox-equal-buttons .modal-footer .btn {
    flex: 1;
    white-space: nowrap;
}

/* ACE file input — vertikal centrering av text och knapp */
.ace-file-input .ace-file-placeholder { align-items: center; }
.ace-file-input .ace-file-container .ace-file-btn { padding-top: 0; padding-bottom: 0; line-height: 2.25; align-self: center; }

.widget-table {
    font-size: 10px;
}
.navbar {
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Hidden state */
.navbar-hidden {
    display: none !important;
}

/* Show again when user hovers near the top */
body:hover .navbar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.nordpool-text {
    font-size: .70rem;
}

/* ── Widget height chain — identical in admin, TV, and preview ──
   TV injects an extra wrapper .widget-content div, so the template's .widget-content
   is nested. Descendant selectors (no >) handle both admin (single) and TV (nested). */

.grid-stack-item-content {
    display: flex;
    flex-direction: column;
}

.grid-stack-item-content .widget-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.grid-stack-item-content .widget-content .card {
    flex: 1;
    min-height: 0;
}

.grid-stack .card-body {
    min-height: 0;
    overflow: hidden;
}

/* ── Marginal 0: widgets kant i kant ──
   Utan detta möts två kortramar och bildar en dubbel hårstreckssöm mellan widgets, vilket
   syns tydligt på en TV med solida färgfält. Klassen sätts på griden när effektiv marginal
   är 0 — per slide på TV:n, eftersom varje slide har sin egen GridStack-instans.

   Medvetet orört: card-body-paddingen (bakgrundsfärgen ligger på .card och paddingen
   innanför — nollas den klistras texten mot kanten), hörnradien, headern och skuggan.
   Alla tre har egna inställningar som no-gap inte ska köra över.

   Tizen 8-safe: inga :has(), color-mix() eller @layer. */
.grid-stack.no-gap .grid-stack-item-content .card {
    border: 0;
}

/* ── Stående vyer i editorn ──
   Griden begränsas till målskärmens bredd så att man designar i rätt proportioner.
   max-width sätts inline av applySafeZone eftersom värdet beror på vald upplösning.
   Gäller BARA stående vyer — liggande fyller fönstret precis som tidigare. */
.grid-stack.grid-portrait {
    margin-left: 0;
    margin-right: auto;
}

/* ── View style settings ── */

/* Background color / image on grid container */
.grid-stack {
    background-color: transparent;
    background-image: var(--view-bg-image, none);
    background-size: cover;
    background-position: center;
}

/* Widget opacity — appliceras på content-wrappern så att alla widget-typer täcks,
   inklusive väderwidgeten som inte använder .card. */
.grid-stack .grid-stack-item-content {
    opacity: var(--widget-opacity, 1);
    transition: opacity 0.2s;
}

/* Per-widget box shadow — klass sätts av applyWidgetAppearanceOverrides */
.widget-has-shadow {
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
}
/* widget-transparent har box-shadow: none !important — override det när skugga är explicit satt */
.widget-has-shadow.widget-transparent {
    box-shadow: 0 3px 3px rgba(0,0,0,0.1) !important;
}

/* Per-widget background color */
.widget-custom-bg .card {
    background-color: var(--widget-bg) !important;
}
/* TV/preview: väder renderas direkt i .widget-content utan .card */
.widget-custom-bg .widget-content > * {
    background-color: var(--widget-bg) !important;
}
/* Admin: väder renderas i .card-body.ww-body */
.widget-custom-bg .ww-body > * {
    background-color: var(--widget-bg) !important;
}

/* Transparent widget — only clock face / text visible */
.widget-transparent,
.widget-transparent .card,
.widget-transparent .card-header,
.widget-transparent .card-body,
.widget-transparent .widget-content,
.widget-transparent .digital-clock {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Täcker widgets som renderar sin egen rot-div utan .card (t.ex. väderwidgeten i TV/preview) */
.widget-transparent .widget-content > * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Väderwidgeten i admin renderas via .card-body.ww-body — täcks inte av > * ovan */
.widget-transparent .ww-body > * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide widget header */
.hide-widget-header .card-header {
    display: none !important;
}
/* When header is hidden, let the body fill the full card height */
.hide-widget-header .card-body {
    height: 100%;
}

/* In admin the class sits on .grid-stack, not .page-content — show a small floating
   toolbar icon on hover so settings remain accessible without a full header.
   TV is unaffected (its class is on .page-content, not .grid-stack). */
.grid-stack.hide-widget-header .grid-stack-item:hover {
    z-index: 100;
}
.grid-stack.hide-widget-header .grid-stack-item:hover .grid-stack-item-content:not(.widget-show-header) {
    overflow: visible !important;
}
.grid-stack.hide-widget-header .grid-stack-item:hover .grid-stack-item-content:not(.widget-show-header) .card-header {
    display: block !important;
    position: absolute;
    top: 4px;
    right: 4px;
    width: auto;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    padding: 2px 6px;
    border-radius: 6px;
    z-index: 101;
}
.grid-stack.hide-widget-header .grid-stack-item:hover .grid-stack-item-content:not(.widget-show-header) .card-title {
    display: none !important;
}
.grid-stack.hide-widget-header .grid-stack-item:hover .grid-stack-item-content:not(.widget-show-header) .card-toolbar-btn {
    color: #fff !important;
}

/* Razor lägger bgc-dark (#42474e) på page-content i dark mode — override till marinblå */
.page-content.bgc-dark {
    background-color: #151b2e !important;
}

/* Slide med uttrycklig "Ingen bakgrund" — döljer vyns bakgrund (bild/färg) på just den
   sliden med en temaanpassad neutral yta: vit i ljust läge, mörk navy i mörkt läge.
   Sätts som klass (inte inline) så den följer dark mode live. Gäller både slide-elementet
   (TV) och .page-content (editor), därför både descendant- och compound-selektor. */
.slide-bg-none { background-image: none !important; background-color: #ffffff !important; }
.view-dark-mode .slide-bg-none,
.view-dark-mode.slide-bg-none { background-color: #151b2e !important; }

/* Widget-kort renderas med bgc-dark inbakat i HTML från Handlebars-mallen.
   I ljust läge (view-dark-mode ej aktiv på grid) måste vi slå ace.css !important. */
.grid-stack:not(.view-dark-mode) .card.bgc-dark {
    background-color: #fff !important;
}

/* TV-vyn (tv-dashboard.js) lägger .view-dark-mode på .page-content — INTE på varje
   .grid-stack (för att undvika Swiper-klonkollisioner). Då matchar regeln ovan ändå och
   skulle tvinga vit bakgrund i mörkt läge. Återställ mörk kortfärg när sidan är i mörkt
   läge; högre specificitet (.page-content.view-dark-mode …) vinner över vit-regeln. */
.page-content.view-dark-mode .grid-stack:not(.view-dark-mode) .card.bgc-dark {
    background-color: var(--dm-card-bg) !important;
}

/* Custom header background color (set via --widget-header-bg on the grid container) */
.grid-stack .card-header {
    background-color: var(--widget-header-bg, #f7f7f7);
}

/* Custom header text color — targets .card-title directly to beat text-grey-d2 and dark mode overrides */
.grid-stack .card-header .card-title {
    color: var(--widget-header-text, inherit) !important;
}

/* Rounded widget corners (view-level) */
.rounded-widget-corners .grid-stack-item-content {
    border-radius: 16px;
}
/* .card ligger inuti .widget-content (inte direkt under .grid-stack-item-content),
   så vi använder nedstigande selektorer. overflow:hidden på .card klipper header-
   bakgrunden till border-radius utan att förstöra hover-toolbar-beteendet. */
.rounded-widget-corners .grid-stack-item-content .card,
.grid-stack-item-content.widget-rounded .card {
    border-radius: 16px;
    overflow: hidden;
}
.rounded-widget-corners .grid-stack-item-content .card > .card-header,
.grid-stack-item-content.widget-rounded .card > .card-header {
    border-radius: 16px 16px 0 0;
}
.rounded-widget-corners .grid-stack-item-content .card > .card-body,
.grid-stack-item-content.widget-rounded .card > .card-body {
    border-radius: 0 0 16px 16px;
}

/* Per-widget "Nej" — ta bort rundning även på .card och dess delar,
   annars arver .card rundning från vy-nivå-regeln ovan. */
.grid-stack-item-content.widget-not-rounded .card,
.grid-stack-item-content.widget-not-rounded .card > .card-header,
.grid-stack-item-content.widget-not-rounded .card > .card-body {
    border-radius: 0 !important;
}
/* Återställ .card:s overflow (rundnings-regeln satte overflow:hidden för att klippa hörnen).
   RÖR INTE .card-body — den måste behålla overflow:auto och fortsätta klippa/scrolla innehållet,
   annars spiller allt innehåll ut nedåt när man väljer rundade hörn = Nej. Rättat av Claude. */
.grid-stack-item-content.widget-not-rounded .card,
.grid-stack-item-content.widget-not-rounded .card > .card-header {
    overflow: visible !important;
}

/* Per-widget appearance overrides */
.grid-stack-item-content.widget-hide-header .card-header {
    display: none !important;
}
.grid-stack-item-content.widget-hide-header .card-body {
    height: 100%;
}
/* In admin: show floating toolbar on hover when header is hidden per-widget */
.grid-stack-item:hover .grid-stack-item-content.widget-hide-header {
    overflow: visible !important;
}
.grid-stack-item:hover .grid-stack-item-content.widget-hide-header .card-header {
    display: block !important;
    position: absolute;
    top: 4px;
    right: 4px;
    width: auto;
    /* !important krävs: .widget-transparent .card-header tvingar background:transparent, vilket
       annars nollar den här mörka chip-bakgrunden → vit verktygsikon blir osynlig mot en ljus/vit
       widget. Rättat av Claude. */
    background: rgba(0,0,0,0.55) !important;
    border: none;
    padding: 2px 6px;
    border-radius: 6px;
    z-index: 101;
}
.grid-stack-item:hover .grid-stack-item-content.widget-hide-header .card-title {
    display: none !important;
}
.grid-stack-item:hover .grid-stack-item-content.widget-hide-header .card-toolbar-btn {
    color: #fff !important;
}
/* Per-widget: forcera fram header oavsett vy-nivå hide-widget-header.
   Specificitet (0,3,0) slår .hide-widget-header .card-header (0,2,0) även med !important. */
.grid-stack-item-content.widget-show-header .card-header {
    display: flex !important;
}

.grid-stack-item-content.widget-rounded {
    border-radius: 16px;
}
.grid-stack-item-content.widget-not-rounded {
    border-radius: 0 !important;
    overflow: visible !important;
}

/* ── Font size cascade ──
   --view-font-size sätts på .grid-stack av JS (admin och TV).
   --widget-font-size kan overridas per widget via applyWidgetAppearanceOverrides. */
.grid-stack {
    font-size: var(--view-font-size, 1rem);
}
.grid-stack-item-content {
    font-size: var(--widget-font-size, inherit);
}

/* FullCalendar inside rounded widget — clip .fc to card-body's corner radius.
   Inner radius = outer 16px − 4px padding (div.p-1) = 12px. */
.rounded-widget-corners .grid-stack-item-content .card > .card-body .fc,
.grid-stack-item-content.widget-rounded .card > .card-body .fc {
    overflow: hidden;
    border-radius: 0 0 12px 12px;
}

/* Dark mode – marinblå palett */
.view-dark-mode {
    --dm-bg:        #151b2e;
    --dm-card-bg:   #1e2740;
    --dm-header-bg: #19223a;
    --dm-border:    rgba(255,255,255,0.07);
    --dm-text-1:    #e4eaf4;
    --dm-text-2:    #8b98b1;
    --dm-scrollbar: #2d3d5e;
    background-color: var(--dm-bg);
    color: var(--dm-text-1);
    scrollbar-color: var(--dm-scrollbar) var(--dm-bg);
}
/* När vyn har en bakgrundsbild ska mörkt läge inte måla en opak mörk bakgrund ovanpå
   bilden (den skulle dölja bilden runt widgetarna). Bilden får synas; dark mode styr
   fortfarande kort/text via --dm-*. */
.view-dark-mode.has-bg-image {
    background-color: transparent;
}
.view-dark-mode .card {
    background-color: var(--dm-card-bg) !important;
    border-color: var(--dm-border) !important;
}
.view-dark-mode .card-header {
    background-color: var(--widget-header-bg, var(--dm-header-bg));
    border-bottom-color: var(--dm-border);
}
.view-dark-mode .card-title,
.view-dark-mode .card-body,
.view-dark-mode .card-footer {
    color: var(--dm-text-1);
}
/* Handlebars-templates använder bgc-dark – ge dem rätt kortfärg i mörkt läge */
.view-dark-mode .bgc-dark {
    background-color: var(--dm-card-bg) !important;
}
/* Canvas (chart) ska vara transparent så kortets bakgrundsfärg syns */
.view-dark-mode canvas {
    background: transparent;
}
/* Bootstrap-textklasser har !important – måste overridas explicit i dark mode */
.view-dark-mode .text-dark,
.view-dark-mode .text-dark-m2 {
    color: var(--dm-text-1) !important;
}
.view-dark-mode .text-grey-d2,
.view-dark-mode .text-muted,
.view-dark-mode .text-secondary,
.view-dark-mode .text-secondary-m2,
.view-dark-mode .text-grey-d1 {
    color: var(--dm-text-2) !important;
}
.view-dark-mode .text-blue {
    color: var(--dm-text-2) !important;
}
/* Tabellrader – Bootstrap-tabeller ärver body-färg; sätt explicit i dark mode */
.view-dark-mode .table th,
.view-dark-mode .table td {
    color: var(--dm-text-1);
    border-color: var(--dm-border) !important;
}
.view-dark-mode .table thead th {
    border-bottom-color: rgba(255,255,255,0.15) !important;
}

/* Ingen hover-/fokus-fyllning på outline-knapparna i headern — gäller både hem-
   läget (Verktyg) och redigeringsläget (slide-/vy-navigering, TV-kant, Gridinfo,
   Designläge, Verktyg m.fl.). Behåll vilolägets utseende; texten styrs av
   text-white-utiliteten (eller mörk text-läget). Endast <button>, så dropdown-
   menyernas länkar (btn-outline-grey med egna hover-klasser) påverkas inte. */
.navbar .navbar-nav button.btn[class*="btn-outline-"]:hover,
.navbar .navbar-nav button.btn[class*="btn-outline-"]:focus,
.navbar .navbar-nav button.btn[class*="btn-outline-"]:active,
.navbar .navbar-nav button.btn[class*="btn-outline-"].show {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ── Tenant: mörk headertext ────────────────────────────────────────────────
   Aktiveras med klassen .navbar-text-dark på <nav> när tenanten valt mörk text
   (för läsbarhet mot en ljus headerfärg). Saknas klassen = dagens vita text.
   Påverkar bara admin-headern; TV-vyn har ingen navbar. */
.navbar-text-dark .navbar-brand,
.navbar-text-dark #tenantheadertext,
.navbar-text-dark .text-white,
.navbar-text-dark .nav-link.text-white,
.navbar-text-dark #connectionstatus,
.navbar-text-dark #rowversion,
.navbar-text-dark #guichanged {
    color: #212529 !important;
}
/* Hamburgarikonens streck följer textfärgen. */
.navbar-text-dark .btn-burger .bars,
.navbar-text-dark .btn-burger .bars::before,
.navbar-text-dark .btn-burger .bars::after {
    background-color: #212529 !important;
}

/* ── Hero-widget: bild med text ovanpå ──────────────────────────────────────
   Tizen 8-safe (Chromium 105+): container queries, min(), custom properties och
   calc() finns. Inga :has(), color-mix() eller @layer. */
.hero-root {
    position: absolute;
    /* Longhand i stället för inset:0 (ändrat av Claude): inset-genvägen stöds först i
       Chromium 87, och vissa kund-TV:er kör Chrome 81 — där ignorerades inset helt, varpå
       den absolut-positionerade rutan kollapsade till 0 och hero-bilden aldrig syntes. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    /* Textstorlekarna nedan mäts mot widgetens egen ruta, inte mot skärmen — samma
       hero fungerar därför i 1080p och 4K, liggande som stående. */
    container-type: size;
}
.hero-image-wrap {
    position: absolute;
    /* Longhand för Chrome 81 (ändrat av Claude) — se .hero-root ovan. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.hero-image {
    width: 100%;
    height: 100%;
    display: block;
}

/* Textblocket ligger ovanpå bilden. GridStack tillåter inte överlappande widgets —
   det är just därför bilden och texten bor i samma widget. */
.hero-textbox {
    position: absolute;
    /* Samma min()-resonemang som för typografin nedan — cqmin undviks medvetet. */
    padding: min(4cqw, 6cqh);
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    color: var(--hero-text, #ffffff);
}

/* Placering: bara vertikalt (uppe/mitten/nere). Horisontellt sköts av .hero-align-*.
   Tidigare fanns nio lägen, men då styrde två inställningar samma sak horisontellt —
   förvirrande, och kombinationerna gav ologiska resultat. Blocket spänner därför alltid
   hela bredden och texten placeras med text-align.
   Vertikal centrering via translate i stället för flex, så blocket bara tar den höjd
   det behöver. Äldre widgets med nio-lägesvärden normaliseras i widget-hero.js. */
.hero-pos-top { top: 0; left: 0; right: 0; }
.hero-pos-center { top: 50%; left: 0; right: 0; transform: translateY(-50%); }
.hero-pos-bottom { bottom: 0; left: 0; right: 0; }

.hero-align-left { text-align: left; }
.hero-align-center { text-align: center; }
.hero-align-right { text-align: right; }

/* Toning som EGET lager mellan bilden och texten.
   Den låg tidigare som bakgrund på själva textblocket, vilket tvingade textblocket att
   täcka hela ytan för att toningen skulle nå kanterna — och då slogs den horisontella
   placeringen ut ("nere höger" blev i praktiken bara "nere"). Med ett separat lager
   behåller textblocket sin egen placering.
   Riktningen sätts av JS utifrån textens vertikala läge (se widget-hero.js). */
.hero-scrim {
    position: absolute;
    /* Longhand för Chrome 81 (ändrat av Claude) — se .hero-root. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
.hero-scrim-bottom {
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 70%);
}
.hero-scrim-top {
    background: linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 70%);
}
.hero-scrim-middle {
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.6) 100%);
}

/* Transparent: ingen platta alls — skuggan är det enda som håller texten läsbar. */
.hero-bg-transparent {
    text-shadow: 0 2px 8px rgba(0,0,0,.65);
}
/* Solid: färgad platta. --hero-panel-bg sätts inline från färg + genomskinlighet. */
.hero-bg-solid {
    background-color: var(--hero-panel-bg, rgba(0,0,0,.7));
}

/* Layout "below": bilden överst, textplattan under. Textblocket är då inte längre
   absolut positionerat utan en egen rad, med höjd enligt --hero-panel. */
.hero-layout-below {
    display: flex;
    flex-direction: column;
}
.hero-layout-below .hero-image-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
.hero-layout-below .hero-textbox {
    position: relative;
    /* Longhand för Chrome 81 (ändrat av Claude) — inset:auto ignoreras där. */
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    flex: 0 0 var(--hero-panel, 40%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--hero-panel-bg, #ffffff);
}
/* Toning är meningslös när texten ligger utanför bilden — faller tillbaka på plattan. */
.hero-layout-below .hero-bg-scrim,
.hero-layout-below .hero-bg-transparent {
    background: var(--hero-panel-bg, #ffffff);
    text-shadow: none;
}

/* Textens placering i "below": den absoluta positioneringen ovan har ingen verkan när
   textblocket är en egen flex-rad. I stället styr inställningen var i plattan texten
   hamnar vertikalt — annars vore den en död inställning i det här läget. Horisontellt
   sköts av Textjustering (.hero-align-*). Måste komma efter regeln ovan: samma
   specificitet, så källordningen avgör. */
.hero-layout-below .hero-pos-top { justify-content: flex-start; }
.hero-layout-below .hero-pos-center { justify-content: center; }
.hero-layout-below .hero-pos-bottom { justify-content: flex-end; }

/* Typografi. min() i stället för enbart cqw: en bred och låg hero skulle annars få
   text som spiller över vertikalt, en smal och hög hero text som ser bortglömd ut.
   cqmin undviks eftersom projektets Tizen-underlag bara är verifierat för cqw/cqh. */
.hero-title {
    font-size: calc(var(--hero-scale, 1) * min(7cqw, 12cqh));
    font-weight: 700;
    line-height: 1.1;
}
.hero-subtitle {
    font-size: calc(var(--hero-scale, 1) * min(3cqw, 5cqh));
    font-weight: 400;
    line-height: 1.25;
    margin-top: 0.4em;
}
.hero-body {
    font-size: calc(var(--hero-scale, 1) * min(2cqw, 3.5cqh));
    font-weight: 400;
    line-height: 1.4;
    margin-top: 0.6em;
}

/* ── Produktionswidget: producerade enheter per station ─────────────────────
   Design: DesignHandoffs/Manntek statistikwidget-handoff (designsystemet Modernist).
   Tizen 8-safe (Chromium 105+): container queries, clamp(), custom properties.
   Inga :has(), color-mix() eller oklch() — det sista finns inte förrän Chromium 111.

   Modernists tre bärande regler: noll hörnradie, 2px linjer, allt vänsterställt. */
.pc-root {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Alla storlekar mäts mot widgetens egen ruta, inte mot skärmen, så samma widget
       fungerar i en liten grid-cell och på en 4K-skärm. Mockupen är 960x540. */
    container-type: size;
}
.pc {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
    padding: clamp(10px, 3.75cqw, 48px);
    /* Ingen ytterram. Mockuppen har 2px runt 960x540-rutan, men där ÄR ramen widgetens kant —
       i appen ritar kortet redan sin egen, och två ramar utanpå varandra ser fel ut mot
       övriga widgets. De inre 2px-linjerna (avdelare, spår, stationspanel) är kvar. */
}
.pc-light { background: #f3f2f2; color: #201e1d; }
/* Mörka tonerna hämtas ur vyns mörka palett (--dm-*) i stället för Modernists varma
   nästan-svarta #201e1d, som sköt iväg mot det marinblå som resten av mörkt läge använder.
   Fallbackvärdena är samma färger som --dm-* har, eftersom den rangordnade varianten är mörk
   även i en ljus vy — då är variablerna odefinierade och fallbacken gäller. */
.pc-dark {
    background: var(--dm-card-bg, #1e2740);
    color: var(--dm-text-1, #e4eaf4);
}

.pc-message {
    align-items: flex-start;
    justify-content: center;
    font-size: clamp(11px, 1.8cqw, 22px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #605d5d;
}
.pc-message-error { color: #ae1800; }

/* Variant "en stor siffra": värdet för en station och stationens namn under. Följer vyns mörka
   läge, till skillnad från de tre designade varianterna som låser sitt eget tema.
   Siffran skalas mot widgetens egen ruta med cqw, så samma widget fungerar i en liten grid-cell
   och i helskärm.

   Undantag från Modernists vänsterställning: en ensam siffra utan omgivande innehåll får inget
   stöd av vänsterkanten utan ser bortglömd ut. Centrerat i båda led — align-items styr sidled
   eftersom .pc är en flexkolumn, text-align rader som bryts. */
.pc-single {
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Till skillnad från de tre designade varianterna målar den här ingen egen yta. Kortets
       bakgrund får slå igenom, så att både vyns mörka läge och en egen WidgetBackgroundColor
       fungerar precis som för övriga widgets. Ligger efter .pc-light/.pc-dark i filen och
       vinner därför på ordning, vid samma specificitet.
       pc-light/pc-dark sätts fortfarande på elementet — de behövs som krok för de dämpade
       tonerna i budgetraden. */
    background: transparent;
    color: inherit;
}
.pc-single-value {
    font-size: clamp(32px, 22cqw, 320px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.02em;
}
/* Stationsnamnet är rubrik ovanför siffran, inte en bildtext under den. Därav margin-bottom,
   full textfärg i stället för den dämpade, och en storlek som syns på håll — men fortfarande
   klart mindre än värdet (22cqw), så hierarkin håller. */
.pc-single-label {
    margin-bottom: clamp(3px, 1.1cqw, 14px);
    font-size: clamp(12px, 4cqw, 52px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Budget och fritext under stationsnamnet. Båda är valfria rader — saknas de ritas ingenting,
   och widgeten ser ut precis som innan de fanns. Mindre än stationsnamnet så att hierarkin
   håller: siffran först, stationen därefter, detaljerna sist. */
.pc-single-budget {
    margin-top: clamp(2px, 0.8cqw, 10px);
    font-size: clamp(9px, 1.9cqw, 24px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #605d5d;
}
.pc-dark .pc-single-budget { color: var(--dm-text-2, #8b98b1); }
.pc-single-caption {
    margin-top: clamp(4px, 1.2cqw, 16px);
    /* Fritext kan bli lång — den bryts och behåller radavstånd, till skillnad från de
       versaliserade etiketterna ovanför. */
    font-size: clamp(9px, 1.9cqw, 24px);
    line-height: 1.35;
    max-width: 90%;
}

/* ── Gemensamma byggstenar ───────────────────────────────────────────────── */
.pc-eyebrow {
    font-size: clamp(8px, 1.46cqw, 18px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #605d5d;
}
.pc-total {
    font-size: clamp(24px, 6.46cqw, 78px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
}
.pc-total-sm { font-size: clamp(22px, 6.1cqw, 74px); }
.pc-num {
    font-size: clamp(14px, 3.54cqw, 44px);
    font-weight: 800;
    line-height: 1;
}
.pc-num-accent { color: #ae1800; }
.pc-clock {
    font-size: clamp(11px, 2.5cqw, 30px);
    font-weight: 700;
    color: #201e1d;
}

/* ── Variant 1A: kurvor över skiftet ─────────────────────────────────────── */
.pc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(6px, 2.5cqw, 30px);
    padding-bottom: clamp(5px, 1.45cqw, 18px);
    border-bottom: 2px solid rgba(32, 30, 29, 0.4);
}
.pc-head-left {
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 2.9cqw, 36px);
    min-width: 0;
}
.pc-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-kpi-side { padding-bottom: 4px; }
/* Budgeten avskiljs med en vertikal linje — samma rullgardin som mellan sektioner. */
.pc-kpi-budget {
    padding-left: clamp(6px, 2.08cqw, 26px);
    border-left: 2px solid rgba(32, 30, 29, 0.4);
}
.pc-head-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: none;
}
.pc-live {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(8px, 1.46cqw, 18px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #605d5d;
}
.pc-dot {
    width: clamp(6px, 1.04cqw, 13px);
    height: clamp(6px, 1.04cqw, 13px);
    background: #ec3013;
    display: block;
}

.pc-graph {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: clamp(5px, 1.45cqw, 18px);
}
.pc-svg {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: block;
    overflow: visible;
}
.pc-series-label {
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.pc-axis {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    font-size: clamp(8px, 1.46cqw, 18px);
    letter-spacing: 0.06em;
    color: #605d5d;
}

.pc-chips {
    display: flex;
    gap: clamp(3px, 0.83cqw, 10px);
    padding-top: clamp(5px, 1.45cqw, 18px);
    border-top: 2px solid rgba(32, 30, 29, 0.4);
    flex: none;
}
.pc-chip {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: clamp(3px, 0.83cqw, 10px) clamp(4px, 1.04cqw, 13px);
    border: 2px solid rgba(32, 30, 29, 0.4);
    background: transparent;
    color: #7d7979;
}
.pc-chip-on {
    background: #eae7e7;
    border-color: #201e1d;
    color: #201e1d;
}
.pc-chip-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(7px, 1.35cqw, 16px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}
.pc-swatch { flex: none; }
.pc-chip-value {
    font-size: clamp(11px, 2.5cqw, 30px);
    font-weight: 800;
    line-height: 1;
}
.pc-chip-budget {
    font-size: clamp(7px, 1.35cqw, 16px);
    opacity: 0.8;
}

/* ── Variant 1B: rangordnade staplar, mörk ───────────────────────────────── */
.pc-head-dark {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: clamp(5px, 1.87cqw, 22px);
    /* Strukturlinje i samma tonfamilj som den dämpade texten — #605d5d var varmgrå. */
    border-bottom: 2px solid var(--dm-text-2, #8b98b1);
}
.pc-title-dark {
    font-size: clamp(11px, 2.7cqw, 32px);
    font-weight: 800;
    letter-spacing: 0.02em;
}
.pc-clock-dark {
    font-size: clamp(9px, 2.08cqw, 25px);
    font-weight: 700;
    color: #ff9783;
}
.pc-total-row {
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 3.33cqw, 40px);
    padding: clamp(5px, 1.87cqw, 22px) 0 clamp(4px, 1.45cqw, 18px);
}
.pc-total-dark {
    font-size: clamp(26px, 7.9cqw, 95px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
}
.pc-eyebrow-dark {
    font-size: clamp(8px, 1.56cqw, 19px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dm-text-2, #8b98b1);
    padding-bottom: clamp(3px, 1.25cqw, 15px);
}
.pc-rows {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 1.04cqw, 13px);
    justify-content: flex-start;
    overflow: hidden;
}
.pc-row {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.67cqw, 20px);
}
.pc-row-id {
    width: 9.6%;
    flex: none;
    font-size: clamp(8px, 1.77cqw, 21px);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--dm-text-2, #8b98b1);
}
.pc-track {
    flex: 1;
    min-width: 0;
    height: clamp(12px, 3.54cqw, 42px);
    /* Spåret ska ligga strax ovanför kortytan. --dm-scrollbar fyller exakt den rollen i
       den marinblå paletten; #2d2b2b var den varmgrå motsvarigheten. */
    background: var(--dm-scrollbar, #2d3d5e);
    display: flex;
    align-items: center;
    position: relative;
}
.pc-bar { height: 100%; }
/* Målmarkören sticker ut lite över och under spåret så den syns mot en fylld stapel. */
.pc-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: var(--dm-text-1, #e4eaf4);
}
.pc-row-count {
    width: 12.5%;
    flex: none;
    text-align: right;
    font-size: clamp(11px, 3.33cqw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.pc-row-budget {
    width: 13.5%;
    flex: none;
    text-align: right;
    font-size: clamp(7px, 1.67cqw, 20px);
    color: var(--dm-text-2, #8b98b1);
}
.pc-row-takt {
    width: 11.4%;
    flex: none;
    text-align: right;
    font-size: clamp(7px, 1.67cqw, 20px);
    color: var(--dm-text-2, #8b98b1);
}
.pc-chips-dark {
    border-top-color: var(--dm-text-2, #8b98b1);
}
.pc-chip-dark {
    flex: 1;
    min-width: 0;
    padding: clamp(4px, 1.25cqw, 15px);
    border: 2px solid var(--dm-text-2, #8b98b1);
    background: var(--dm-scrollbar, #2d3d5e);
    color: var(--dm-text-2, #8b98b1);
    font-size: clamp(8px, 1.87cqw, 22px);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: left;
}

/* ── Variant 1C: enheter per timme + stationspanel ───────────────────────── */
.pc-hourly {
    flex-direction: row;
    padding: 0;
}
.pc-hourly-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(8px, 3.33cqw, 40px);
    border-right: 2px solid #201e1d;
}
.pc-hourly-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: clamp(4px, 1.67cqw, 20px);
    border-bottom: 2px solid rgba(32, 30, 29, 0.4);
}
.pc-hourly-total {
    display: flex;
    align-items: flex-end;
    gap: clamp(6px, 2.5cqw, 30px);
    padding: clamp(4px, 1.67cqw, 20px) 0;
}
.pc-hours {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: clamp(3px, 1.04cqw, 13px);
    border-top: 2px solid rgba(32, 30, 29, 0.4);
    padding-top: clamp(4px, 1.67cqw, 20px);
}
.pc-hour {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}
.pc-hour-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}
.pc-hour-bar { flex: 1; min-width: 0; }
.pc-hour-label {
    font-size: clamp(7px, 1.46cqw, 18px);
    color: #605d5d;
    letter-spacing: 0.04em;
    border-top: 2px solid #201e1d;
    padding-top: 6px;
}
.pc-panel {
    width: 31.25%;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1.45cqw, 18px);
    padding: clamp(8px, 3.33cqw, 40px) clamp(7px, 2.9cqw, 35px);
    background: #eae9e9;
    overflow: hidden;
}
.pc-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 1.25cqw, 15px);
    padding: clamp(3px, 0.83cqw, 10px) clamp(4px, 1.04cqw, 13px);
    border-left: 6px solid transparent;
    background: transparent;
    color: #605d5d;
}
.pc-panel-on {
    background: #f3f2f2;
    color: #201e1d;
}
.pc-panel-name {
    font-size: clamp(8px, 1.77cqw, 21px);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.pc-panel-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.pc-panel-count {
    font-size: clamp(11px, 2.7cqw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.pc-panel-budget {
    font-size: clamp(7px, 1.35cqw, 16px);
    opacity: 0.8;
}
.pc-panel-foot {
    margin-top: auto;
    font-size: clamp(7px, 1.35cqw, 16px);
    line-height: 1.5;
    color: #605d5d;
}

/* ── Produktionseffektivitet: teoretisk tid / faktisk tid ────────────────────
   Tizen 8-safe (Chromium 105+): var(), calc(), clamp(), cqw, container queries.
   Inga :has(), @layer eller color-mix().

   Till skillnad från .pc-* och .ia-* (som sätter en ljus/mörk klass i JS vid
   ritögonblicket) styrs mörkt läge här av en descendant-selektor:
   `.view-dark-mode .eff`. Klassen sitter på .grid-stack i admin och på
   .page-content på TV — båda är förfäder, så en selektor täcker båda utan JS,
   och en live-växling slår igenom direkt utan omritning.

   JS sätter bara tillståndsklassen (eff-ok/eff-warn/eff-bad/eff-na). Alla
   färgvärden bor här, aldrig som inline-stilar. */
.eff-root {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
}

.eff {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
    padding: clamp(10px, 3.75cqw, 48px);

    /* Grundfärg för plain/tint-lägena, där bakgrunden är kortets egen. Utan den ärvs
       färgen från kortet, och antal/timmar (som aldrig färgkodas) kunde bli svart text
       mot mörkt kort. .eff-fill.* skriver över den med sin egen förgrund. */
    color: #201e1d;

    /* Ljust läge. Kontrasten är räknad mot #f3f2f2 (ljus vy). */
    --eff-ok-bg: #146c37;
    --eff-ok-fg: #ffffff;
    --eff-warn-bg: #e08a00;
    /* Gult kräver MÖRK förgrund — vitt på #e08a00 ligger under 3:1. */
    --eff-warn-fg: #201e1d;
    --eff-bad-bg: #a5231a;
    --eff-bad-fg: #ffffff;
    --eff-na-bg: #eae9e9;
    --eff-na-fg: #605d5d;
    --eff-ok-ink: #0f5d2f;
    --eff-warn-ink: #8a5a00;
    --eff-bad-ink: #8f1d14;
    --eff-muted: #605d5d;
}

/* Mörkt läge. Fyllningarna är ljusare än kortet men mörkare än i ljust läge, så rutan
   läses som en ruta mot #151b2e utan att blomma ut på en TV som lyser dygnet runt. */
.view-dark-mode .eff {
    color: var(--dm-text, #e8ecf5);
    --eff-ok-bg: #1b7a3f;
    --eff-warn-bg: #b87400;
    --eff-bad-bg: #b52a1d;
    --eff-na-bg: var(--dm-scrollbar, #2d3d5e);
    --eff-na-fg: var(--dm-text-2, #8b98b1);
    --eff-ok-ink: #57d98a;
    --eff-warn-ink: #ffc04d;
    --eff-bad-ink: #ff7a6b;
    --eff-muted: var(--dm-text-2, #8b98b1);
}

/* fill: hela ytan färgas — kundens krav är "grön widget"/"röd widget".
   tint/plain lämnar bakgrunden genomskinlig så kortets bakgrund, vyns mörka läge och
   WidgetBackgroundColor fungerar som för övriga widgets. */
.eff-fill.eff-ok { background: var(--eff-ok-bg); color: var(--eff-ok-fg); }
.eff-fill.eff-warn { background: var(--eff-warn-bg); color: var(--eff-warn-fg); }
.eff-fill.eff-bad { background: var(--eff-bad-bg); color: var(--eff-bad-fg); }
.eff-fill.eff-na { background: var(--eff-na-bg); color: var(--eff-na-fg); }

.eff-tint, .eff-plain { background: transparent; }
.eff-tint.eff-ok .eff-value { color: var(--eff-ok-ink); }
.eff-tint.eff-warn .eff-value { color: var(--eff-warn-ink); }
.eff-tint.eff-bad .eff-value { color: var(--eff-bad-ink); }
.eff-tint.eff-na .eff-value { color: var(--eff-muted); }

.eff-single {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.eff-label {
    /* Höjd från 1.1cqw: rubriken stod för tätt mot procentsiffran, som är stor och tung
       (22cqw). Skalar med widgetens bredd så avståndet håller sig proportionerligt på både
       en liten ruta och en helskärmsvy. */
    margin-bottom: clamp(6px, 2.4cqw, 28px);
    font-size: clamp(12px, 4cqw, 52px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.05;
}
.eff-value {
    font-size: clamp(32px, 22cqw, 320px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.02em;
}
.eff-unit {
    font-size: 0.45em;
    font-weight: 700;
    margin-left: 0.06em;
}
/* I fill-läge ärvs textfärgen och dämpas med opacity. En egen grå skulle bli oläslig
   mot mättad grön eller röd, och color-mix() är förbjudet på Tizen. */
.eff-detail {
    margin-top: clamp(2px, 0.8cqw, 10px);
    font-size: clamp(9px, 1.9cqw, 24px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.85;
}
.eff-note {
    margin-top: clamp(2px, 0.7cqw, 9px);
    font-size: clamp(8px, 1.5cqw, 18px);
    color: inherit;
    opacity: 0.75;
}
.eff-plain .eff-detail, .eff-tint .eff-detail,
.eff-plain .eff-note, .eff-tint .eff-note {
    opacity: 1;
    color: var(--eff-muted);
}
.eff-error { color: var(--eff-bad-ink); opacity: 1; }
.eff-caption {
    margin-top: clamp(4px, 1.2cqw, 16px);
    font-size: clamp(9px, 1.9cqw, 24px);
    line-height: 1.35;
    max-width: 90%;
    color: inherit;
}

/* list-varianten. fill degraderas till radfärgning: en enda bakgrundsfärg för blandade
   stationer vore missvisande. */
.eff-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: clamp(5px, 1.45cqw, 18px);
    border-bottom: 2px solid rgba(32, 30, 29, 0.4);
}
.view-dark-mode .eff-head { border-bottom-color: var(--dm-text-2, #8b98b1); }
.eff-head .eff-label { margin-bottom: 0; }
.eff-head .eff-detail { margin-top: 0; }
.eff-rows {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: clamp(3px, 1.04cqw, 13px);
    overflow: hidden;
    padding-top: clamp(4px, 1.2cqw, 14px);
}
.eff-row {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.67cqw, 20px);
}
.eff-row-name {
    width: 28%;
    flex: none;
    /* Höjd från 1.77cqw: stationsnamnet är det man letar efter när man skannar listan, men låg
       nästan hälften så stort som procenttalet (3.33cqw) och försvann. Ligger nu mittemellan.
       Bredden är kvar på 28 % — namnen är korta ("Station 1"), och en bredare kolumn hade
       ätit av stapeln som bär jämförelsen mellan stationerna. */
    font-size: clamp(10px, 2.6cqw, 30px);
    font-weight: 700;
    color: var(--eff-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eff-row-bar {
    flex: 1;
    min-width: 0;
    height: clamp(10px, 3cqw, 36px);
    background: var(--eff-na-bg);
    display: block;
    position: relative;
}
.eff-row-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.eff-row.eff-ok .eff-row-fill { background: var(--eff-ok-bg); }
.eff-row.eff-warn .eff-row-fill { background: var(--eff-warn-bg); }
.eff-row.eff-bad .eff-row-fill { background: var(--eff-bad-bg); }
.eff-row-pct {
    width: 16%;
    flex: none;
    text-align: right;
    font-size: clamp(11px, 3.33cqw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--eff-muted);
}
.eff-row.eff-ok .eff-row-pct { color: var(--eff-ok-ink); }
.eff-row.eff-warn .eff-row-pct { color: var(--eff-warn-ink); }
.eff-row.eff-bad .eff-row-pct { color: var(--eff-bad-ink); }
.eff-row-unit { font-size: 0.5em; font-weight: 700; margin-left: 0.08em; }

/* Verifieringslänken. Ritas bara i admin och bara när inställningen är på, så den
   behöver inte skalas för TV-avstånd — men den får inte konkurrera med siffran.
   Färgen ärvs så den fungerar mot både fylld och ofylld bakgrund. */
.eff-debug-link {
    margin-top: clamp(4px, 1.2cqw, 14px);
    font-size: clamp(8px, 1.5cqw, 15px);
    color: inherit;
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.eff-debug-link:hover, .eff-debug-link:focus { color: inherit; opacity: 1; }
.eff-list .eff-debug-link { align-self: flex-start; }

/* Förklaringsdialogen. Radtabellen har elva kolumner och ryms inte i Bootstraps
   modal-xl (1140 px), så bredden sätts mot viewporten i stället. Marginalen kvar i
   kanterna gör att man ser att det är en dialog och inte en egen sida. */
#effExplainModal .modal-dialog {
    max-width: none;
    width: calc(100vw - 3rem);
    margin: 1.5rem auto;
}
#effExplainModal .modal-body { max-height: calc(100vh - 12rem); overflow-y: auto; }

/* Radlistan scrollar i egen behållare så rubrikerna ovanför inte försvinner när man
   bläddrar i hundratals rader. */
.eff-explain-rows { max-height: 55vh; overflow: auto; }
.eff-explain-rows thead th { position: sticky; top: 0; z-index: 1; background: #f8f9fa; }
#effExplainModal table { font-size: 0.85rem; }

/* Nowrap BARA i radtabellen. Härledningskolumnen och förutsättningarna innehåller hela
   meningar och måste radbrytas — annars blir dialogen tusentals pixlar bred. */
.eff-explain-rows td, .eff-explain-rows th { white-space: nowrap; }

/* Markeringen för ärvd starttid. Prickad understrykning signalerar att det finns en
   förklaring på hover, samma konvention som en förkortning. */
.eff-inherited {
    border-bottom: 1px dotted currentColor;
    cursor: help;
    font-size: 0.9em;
}

/* ── IA-systemet: tillbud, olycksfall och riskobservationer ─────────────────
   Tizen 8-safe (Chromium 105+): container queries, clamp(), custom properties.
   Inga :has(), color-mix() eller oklch().

   Mörkt läge sätts som klass (.ia-dark) av widget-iasystemet.js vid ritögonblicket i stället
   för via .view-dark-mode-selektorer här — widgeten ritar om sig vid varje poll, och läget
   kan växlas live i vyinställningarna. */
.ia-root {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Storlekarna mäts mot widgetens egen ruta, inte mot skärmen, så samma widget fungerar
       i en liten grid-cell och på en 4K-skärm. */
    container-type: size;
}
.ia {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.6cqw, 20px);
    padding: clamp(10px, 2.6cqw, 34px);
    font-variant-numeric: tabular-nums;
}
/* Ingen egen bakgrund: kortet (.card) äger ytan, så bakgrundsfärg, genomskinlighet och
   Transparent-knappen på Utseende-fliken slår igenom. Här sätts bara textfärgen. */
.ia-light { color: #1a202c; }
.ia-dark { color: #e6eaf2; }

.ia-message { align-items: flex-start; justify-content: center; }
.ia-message-text {
    font-size: calc(var(--ia-scale, 1) * clamp(11px, 1.9cqw, 22px));
    line-height: 1.4;
}
.ia-light .ia-message-text { color: #4a5568; }
.ia-dark .ia-message-text { color: #9aa5b8; }
.ia-message-error { color: #e02d2d; }
.ia-dark .ia-message-error { color: #ff8080; }

/* ── Gemensamma byggstenar ───────────────────────────────────────────────── */
.ia-eyebrow {
    font-size: calc(var(--ia-scale, 1) * clamp(8px, 1.3cqw, 16px));
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
    /* Långa typnamn ("Förbättringsförslag") får plats i ett smalt typkort i stället för att
       brytas mitt i ordet eller spilla ut ur kortet. */
    overflow-wrap: anywhere;
}
.ia-light .ia-eyebrow { color: #4a5568; }
.ia-dark .ia-eyebrow { color: #9aa5b8; }

.ia-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: clamp(6px, 2cqw, 24px);
    padding-bottom: clamp(4px, 1cqw, 12px);
    border-bottom: 1px solid rgba(128, 138, 158, 0.35);
    flex: none;
}
.ia-head-left { min-width: 0; }
.ia-head-title {
    font-size: calc(var(--ia-scale, 1) * clamp(10px, 1.8cqw, 22px));
    font-weight: 700;
}
.ia-clock {
    font-size: calc(var(--ia-scale, 1) * clamp(10px, 1.9cqw, 24px));
    font-weight: 700;
    flex: none;
}

.ia-empty {
    font-size: calc(var(--ia-scale, 1) * clamp(9px, 1.5cqw, 18px));
    padding: clamp(6px, 1.5cqw, 18px) 0;
}
.ia-light .ia-empty { color: #718096; }
.ia-dark .ia-empty { color: #8a94a8; }

.ia-delta {
    font-size: calc(var(--ia-scale, 1) * clamp(8px, 1.3cqw, 16px));
    font-weight: 700;
}
/* Fler händelser är inte entydigt dåligt (bättre rapporteringskultur ger fler tillbud), så
   pilarna färgas neutralt-varmt respektive neutralt-kallt i stället för rött/grönt. */
.ia-delta-up { color: #d97706; }
.ia-delta-down { color: #0f9d58; }
.ia-delta-flat { color: #718096; }
.ia-dark .ia-delta-up { color: #ffb454; }
.ia-dark .ia-delta-down { color: #3ddbb0; }
.ia-dark .ia-delta-flat { color: #8a94a8; }

/* Korten (typräknare och åtgärdssiffror) */
.ia-cards {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(5px, 1.2cqw, 14px);
    flex: none;
}
.ia-card {
    flex: 1 1 0;
    min-width: clamp(60px, 16cqw, 190px);
    padding: clamp(5px, 1.1cqw, 14px) clamp(6px, 1.3cqw, 16px);
    border-top: 3px solid transparent;
    border-radius: 4px;
}
.ia-light .ia-card { background: #f4f6fa; }
.ia-dark .ia-card { background: #1e2740; }
.ia-card-value {
    font-size: calc(var(--ia-scale, 1) * clamp(16px, 3.4cqw, 44px));
    font-weight: 800;
    line-height: 1;
}
.ia-card-alert .ia-card-value { color: #e02d2d; }
.ia-dark .ia-card-alert .ia-card-value { color: #ff6b6b; }

/* ── Variant: olycksfall ─────────────────────────────────────────────────── */
/* Två kolumner som i IA:s eget kort: dagräknare till vänster, antal i perioden till höger.
   Kolumnerna wrappar på smala widgets i stället för att krympa texten till oläslighet. */
.ia-safety-main {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: clamp(8px, 3cqw, 40px);
    min-height: 0;
}
.ia-safety-col {
    flex: 1 1 clamp(90px, 34cqw, 340px);
    min-width: 0;
}
.ia-days-row {
    display: flex;
    align-items: baseline;
    gap: clamp(3px, 0.8cqw, 10px);
    min-width: 0;
}
.ia-days {
    font-size: calc(var(--ia-scale, 1) * clamp(32px, 11cqw, 160px));
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.04em;
}
.ia-days-good { color: #0f9d58; }
.ia-dark .ia-days-good { color: #3ddbb0; }
.ia-days-bad { color: #e02d2d; }
.ia-dark .ia-days-bad { color: #ff6b6b; }
.ia-days-unit {
    font-size: calc(var(--ia-scale, 1) * clamp(10px, 2cqw, 26px));
    font-weight: 600;
}
.ia-light .ia-days-unit { color: #4a5568; }
.ia-dark .ia-days-unit { color: #9aa5b8; }
.ia-safety-lead {
    margin-top: clamp(2px, 0.6cqw, 8px);
    font-size: calc(var(--ia-scale, 1) * clamp(9px, 1.6cqw, 20px));
    line-height: 1.25;
}
.ia-safety-sub {
    margin-top: clamp(3px, 0.8cqw, 10px);
    font-size: calc(var(--ia-scale, 1) * clamp(8px, 1.3cqw, 16px));
}
.ia-light .ia-safety-sub { color: #718096; }
.ia-dark .ia-safety-sub { color: #8a94a8; }

/* ── Variant: riskbild ───────────────────────────────────────────────────── */
.ia-risk-main {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 2.5cqw, 32px);
    min-height: 0;
}
.ia-risk-col {
    flex: 1 1 clamp(90px, 34cqw, 340px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 0.8cqw, 10px);
    min-height: 0;
}
.ia-risk-caption {
    font-size: calc(var(--ia-scale, 1) * clamp(8px, 1.35cqw, 17px));
    text-align: center;
    line-height: 1.3;
}
.ia-light .ia-risk-caption { color: #4a5568; }
.ia-dark .ia-risk-caption { color: #9aa5b8; }

.ia-donut, .ia-gauge {
    flex: 0 1 auto;
    min-height: 0;
    /* Skalas med textstorleken så att grafiken och siffrorna växer i takt. */
    max-height: calc(var(--ia-scale, 1) * clamp(50px, 22cqh, 220px));
    width: auto;
}
.ia-donut-text {
    font-size: 26px;
    font-weight: 800;
}
.ia-gauge-text {
    font-size: 22px;
    font-weight: 800;
}
.ia-gauge-scale { font-size: 8px; }

.ia-risk-legend {
    display: flex;
    gap: clamp(8px, 2.2cqw, 28px);
    flex: none;
}
.ia-risk-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1px, 0.3cqw, 4px);
}
.ia-risk-dot {
    /* Cirkeln måste skalas med samma faktor som bokstaven i den, annars spiller H/M/L ut. */
    width: calc(var(--ia-scale, 1) * clamp(13px, 2.4cqw, 30px));
    height: calc(var(--ia-scale, 1) * clamp(13px, 2.4cqw, 30px));
    border-radius: 50%;
    color: #ffffff;
    font-size: calc(var(--ia-scale, 1) * clamp(7px, 1.35cqw, 17px));
    font-weight: 800;
    line-height: calc(var(--ia-scale, 1) * clamp(13px, 2.4cqw, 30px));
    text-align: center;
}
.ia-risk-count {
    font-size: calc(var(--ia-scale, 1) * clamp(9px, 1.6cqw, 20px));
    font-weight: 700;
}

/* ── Variant: statistik per period ───────────────────────────────────────── */
.ia-trend-kpi {
    display: flex;
    align-items: baseline;
    gap: clamp(6px, 1.4cqw, 16px);
    flex: none;
}
.ia-trend-total {
    font-size: calc(var(--ia-scale, 1) * clamp(22px, 5.4cqw, 68px));
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}
.ia-trend-kpi-meta { display: flex; flex-direction: column; gap: 2px; }

.ia-bars {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    gap: clamp(2px, 0.7cqw, 10px);
    min-height: 0;
}
.ia-bar-col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.ia-bar-value {
    font-size: calc(var(--ia-scale, 1) * clamp(7px, 1.15cqw, 14px));
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    flex: none;
}
.ia-bar-track {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: flex-end;
}
.ia-bar-stack {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 2px;
    overflow: hidden;
    min-height: 2px;
}
.ia-bar-seg { width: 100%; }
.ia-bar-label {
    font-size: calc(var(--ia-scale, 1) * clamp(7px, 1.1cqw, 13px));
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: none;
    padding-top: clamp(2px, 0.5cqw, 6px);
}
.ia-light .ia-bar-label { color: #718096; }
.ia-dark .ia-bar-label { color: #8a94a8; }

.ia-legend {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(5px, 1.2cqw, 16px);
    font-size: calc(var(--ia-scale, 1) * clamp(8px, 1.25cqw, 15px));
    flex: none;
}
.ia-legend-item { display: flex; align-items: center; gap: clamp(3px, 0.6cqw, 7px); }
.ia-swatch {
    width: clamp(7px, 1.1cqw, 13px);
    height: clamp(7px, 1.1cqw, 13px);
    border-radius: 2px;
    flex: none;
}

/* ── Variant: senaste händelser ──────────────────────────────────────────── */
.ia-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ia-list-row {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.1cqw, 14px);
    padding: clamp(4px, 0.9cqw, 11px) 0;
    border-bottom: 1px solid rgba(128, 138, 158, 0.22);
    min-width: 0;
}
.ia-list-row-restricted { opacity: 0.7; }
.ia-type-dot {
    width: clamp(6px, 0.9cqw, 11px);
    height: clamp(6px, 0.9cqw, 11px);
    border-radius: 50%;
    flex: none;
}
.ia-list-main { flex: 1 1 auto; min-width: 0; }
.ia-list-title {
    font-size: calc(var(--ia-scale, 1) * clamp(9px, 1.6cqw, 20px));
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ia-list-meta {
    font-size: calc(var(--ia-scale, 1) * clamp(7px, 1.15cqw, 14px));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ia-light .ia-list-meta { color: #718096; }
.ia-dark .ia-list-meta { color: #8a94a8; }
.ia-list-side { flex: none; text-align: right; }
.ia-list-date {
    font-size: calc(var(--ia-scale, 1) * clamp(8px, 1.25cqw, 15px));
    font-weight: 700;
}
.ia-list-status { font-size: calc(var(--ia-scale, 1) * clamp(7px, 1.1cqw, 13px)); }
.ia-light .ia-list-status { color: #718096; }
.ia-dark .ia-list-status { color: #8a94a8; }

/* ── Variant: åtgärder och uppföljning ───────────────────────────────────── */
.ia-progress-block {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
.ia-progress-value {
    font-size: calc(var(--ia-scale, 1) * clamp(28px, 8.5cqw, 120px));
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
}
.ia-progress-track {
    margin-top: clamp(4px, 1cqw, 12px);
    height: clamp(5px, 1cqw, 12px);
    border-radius: 999px;
    overflow: hidden;
}
.ia-light .ia-progress-track { background: #e2e8f0; }
.ia-dark .ia-progress-track { background: #2a3550; }
.ia-progress-fill { height: 100%; background: #0f9d58; }
.ia-dark .ia-progress-fill { background: #3ddbb0; }

.ia-footnote {
    font-size: calc(var(--ia-scale, 1) * clamp(7px, 1.15cqw, 14px));
    flex: none;
}
.ia-light .ia-footnote { color: #718096; }
.ia-dark .ia-footnote { color: #8a94a8; }

/* ── Matriswidget: tabell med manuellt ifyllda värden ───────────────────────
   Tizen 8-safe (Chromium 105+): CSS grid, gap, container queries, clamp().
   Inga :has(), color-mix() eller oklch(). Zebrafärgen räknas i JS (mxLighten)
   just för att color-mix() saknas. */
.mx-root {
    position: absolute;
    inset: 0;
    overflow: auto;
    container-type: size;
}
.mx {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding: clamp(4px, 1cqw, 14px);
    /* Ingen ytterram — kortet ritar redan sin egen. */
}
.mx-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
    color: #6b7280;
    font-size: clamp(11px, 1.8cqw, 18px);
}
.mx-grid {
    display: grid;
    /* row-gap/column-gap sätts inline av renderMatrix. Satta till 0 sitter plattorna ihop. */
    align-content: start;
}
.mx-corner,
.mx-colhead,
.mx-rowhead,
.mx-cell {
    display: flex;
    align-items: center;
    padding: clamp(3px, 0.9cqw, 12px) clamp(5px, 1.2cqw, 16px);
    min-width: 0;
    /* border-box så att ramen ryms i cellen i stället för att spränga griden. */
    box-sizing: border-box;
    border: var(--mx-border, 0) solid var(--mx-border-color, transparent);
    border-radius: var(--mx-radius, 0);
    /* Långa etiketter ska brytas, inte spränga kolumnen. */
    overflow-wrap: break-word;
    word-break: break-word;
}
.mx-colhead {
    justify-content: center;
    text-align: center;
    font-weight: 700;
    color: var(--mx-head-text, #ffffff);
    font-size: calc(var(--mx-scale, 1) * clamp(10px, 1.9cqw, 26px));
    line-height: 1.15;
}
.mx-rowhead {
    font-weight: 600;
    color: var(--mx-head-text, #ffffff);
    font-size: calc(var(--mx-scale, 1) * clamp(10px, 1.8cqw, 24px));
    line-height: 1.15;
}
.mx-cell {
    color: var(--mx-cell-text, #1a1a1a);
    font-size: calc(var(--mx-scale, 1) * clamp(10px, 1.7cqw, 22px));
    line-height: 1.2;
}

/* ── Matriseditorn i inställningspanelen ─────────────────────────────────── */
.mx-editor-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
}
.mx-editor-table th,
.mx-editor-table td {
    padding: 0;
    vertical-align: top;
    min-width: 110px;
}
.mx-editor-table th.mx-ed-corner {
    min-width: 0;
    width: 1%;
}
.mx-editor-table input.form-control-sm {
    font-size: 0.8rem;
    padding: 2px 6px;
    height: auto;
}
.mx-ed-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
}
.mx-ed-color {
    width: 22px;
    height: 20px;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
    background: none;
}
/* Ofärgad = ärver widgetens standardfärg. Nedtonad så det syns att inget är valt. */
.mx-ed-color-unset {
    opacity: 0.35;
}
.mx-clear-color {
    border: 0;
    background: none;
    color: #adb5bd;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    font-size: 0.9rem;
}
.mx-clear-color:hover {
    color: #dc3545;
}
.mx-editor-table .btn-link {
    padding: 0 2px;
    line-height: 1;
    font-size: 1rem;
    text-decoration: none;
}

/* ── Kortwidget ──────────────────────────────────────────────────────────────
   Bild och text på en sammanhängande yta. Bilden går kant i kant mot kortets
   kanter; luften ligger på textblocket så att de två kan ha olika marginal.

   Tizen 8 (Chromium 105) är målet: flexbox och custom properties går bra,
   :has() och color-mix() gör det inte. Inget av det används här. */
.card-widget-body {
    display: flex;
    overflow: hidden;
}

/* Bild överst, text under. Standardläget. */
.card-widget-top {
    flex-direction: column;
}

/* Bild till vänster, text till höger. För breda, låga kort. */
.card-widget-left {
    flex-direction: row;
}

.card-widget-media {
    overflow: hidden;
    flex: 0 0 auto;
}

.card-widget-top .card-widget-media {
    /* Bilden tar den höjd den behöver, texten resten. Utan max-height äter ett
       stående foto hela kortet och texten trycks ut. */
    max-height: 60%;
}

.card-widget-left .card-widget-media {
    width: 40%;
    max-height: none;
}

.card-widget-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-widget-text {
    flex: 1 1 auto;
    min-height: 0;      /* annars växer texten ur flexboxen i stället för att skrollas bort */
    overflow: hidden;
}

.card-widget-title {
    margin: 0 0 .4em;
    line-height: 1.15;
    font-weight: 700;
}

.card-widget-body-text p:last-child {
    margin-bottom: 0;
}

.card-widget-footer {
    margin-top: .8em;
    font-size: .85em;
    opacity: .75;
}

/* ── Bannerwidget ────────────────────────────────────────────────────────────
   Tre zoner på en rad: logotyp, väder, klocka. Mitten växer, ytterkanterna tar
   bara den plats de behöver.

   Textfärgen kommer som --banner-fg från mallen och ärvs av alla tre zonerna,
   så att en mörk list med ljus text fungerar utan att varje element behöver
   sin egen färginställning. */
.banner-widget {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* Innerkanten är ställbar (BannerPadding). Fallback för bannrar som sparades innan
       inställningen fanns — utan den blir de kant i kant utan luft. */
    padding: 0 var(--banner-pad, 24px);
    height: 100%;
    color: var(--banner-fg, inherit);
    overflow: hidden;
}

.banner-zone {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;   /* annars vägrar zonerna krympa och listen svämmar över */
}

.banner-zone-left   { flex: 0 1 auto; }
.banner-zone-center { flex: 1 1 auto; justify-content: center; }
.banner-zone-right  { flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 0; }

.banner-logo {
    max-height: 3rem;
    max-width: 14rem;
    object-fit: contain;
}

.banner-logo-text {
    font-size: 1.4rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Prognosraden. Ikonerna ritas i currentColor och ärver därmed --banner-fg, så de
   följer med när bannerns textfärg ändras. */
.banner-weather {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.banner-wx-day {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
}

.banner-wx-label {
    position: absolute;
    top: -1.1em;
    left: 0;
    font-size: .72em;
    opacity: .8;
    white-space: nowrap;
}

.banner-wx-icon {
    display: inline-flex;
    align-items: center;
}

.banner-wx-temp {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.banner-time {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.banner-date {
    font-size: .95rem;
    opacity: .85;
    white-space: nowrap;
}

/* Målet i produktionswidgeten. Dämpat i förhållande till utfallet — målet är referensen,
   inte det man läser först. */
.eff-target {
    font-size: clamp(10px, 2.2cqw, 26px);
    font-weight: 600;
    opacity: .7;
    margin-top: .35em;
}
.eff-row-target {
    font-size: .62em;
    font-weight: 600;
    opacity: .65;
    margin-left: .4em;
    white-space: nowrap;
}

/* ── Besökswidget ───────────────────────────────────────────────────────────────────────
   Dagens besök som en ruta i en dashboardvy. Tavlan i entrén (/visitors/{id}) har egen CSS
   i sin vy — den är en helskärmslayout och delar inget med kortet här.

   Inga färger som skiljer sig mellan ljust och mörkt läge sätts inline i mallen. Mörkt läge
   kan växlas live i vyinställningarna, och en flagga som fångades vid renderingen blir då
   inaktuell. Reglerna nedan under .view-dark-mode gäller i båda riktningarna.

   TIZEN: inga color-mix(), inga :has(). Skärmarna kör Chromium 105 och båda faller tyst. */
.visitors-widget-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.visitors-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.visitors-row {
    display: flex;
    align-items: baseline;
    gap: .7em;
    padding: .45em 0;
    border-bottom: 1px solid rgba(32, 30, 29, .10);
}

.visitors-row:last-child {
    border-bottom: 0;
}

/* Avbockad i receptionen. Klassen sätts i mallen, inte med :has(). */
.visitors-row.is-arrived {
    opacity: .45;
}

.visitors-time {
    font-weight: 700;
    /* Tiderna ska stå i en rak kolumn även när siffrorna växlar. */
    font-variant-numeric: tabular-nums;
    flex: none;
}

.visitors-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.visitors-name {
    font-weight: 700;
    /* Långa namn bryts hellre än skjuter ut kortet. */
    overflow-wrap: anywhere;
}

.visitors-company {
    opacity: .7;
}

.visitors-host {
    font-size: .85em;
    opacity: .65;
    margin-top: .15em;
}

.visitors-host-label {
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .82em;
    margin-right: .5em;
}

.visitors-dept {
    opacity: .75;
    margin-left: .45em;
}

.visitors-more,
.visitors-empty {
    opacity: .6;
    font-size: .9em;
}

.visitors-more {
    padding-top: .5em;
}

/* Avdelaren måste ljusna i mörkt läge — en nästan svart linje mot mörk botten syns inte alls. */
.view-dark-mode .visitors-row {
    border-bottom-color: rgba(255, 255, 255, .14);
}