/*
 * Syncfusion CSS-overrides for tndata
 *
 * Disse reglene overstyrer Syncfusion Blazor-komponentenes interne styling
 * der det ikke finnes component-properties. Bruker hoyere spesifisitet
 * i stedet for !important.
 *
 * Ved Syncfusion-versjonsoppgradering: verifiser at selektorene fortsatt matcher.
 * Syncfusion versjon: 33.1.47, tema: fluent2
 */

/* -- SfMenu: Skjul dropdown-piler (caret) pa toppniva-items --
   SfMenu har ingen property for dette. Caret rendres som <span class="e-icons e-caret">.
   Syncfusion-selector: .e-menu-container .e-menu .e-menu-item .e-caret (4 klasser, ingen display satt)
   Var selector: 5 klasser = hoyere spesifisitet */
.e-appbar .e-menu-container .e-menu .e-menu-item .e-caret {
    display: none;
}

/* -- SfMenu: Mer luft mellom toppniva meny-items --
   Standard spacing er for tett. Ingen property tilgjengelig.
   Syncfusion-selector: .e-menu-container ul .e-menu-item (3 klasser)
   Var selector: 4 klasser */
.e-appbar .e-menu-container .e-menu > .e-menu-item {
    margin: 0 0.75rem;
}

/* -- SfMenu: Aktiv side i toppmenyen (7C.6) --
   Flyttet hit fra NavMenu.razor.css: ::deep-regelen ble scopet til [b-...] og
   traff aldri den Syncfusion-genererte appbar/meny-DOM-en (ingen scopet forfar
   over .e-menu-item). Global hoy-spesifisitet-selector her virker likt resten av
   meny-overstyringene. Aktiv-klassen settes via HtmlAttributes i NavMenu.razor. */
.e-appbar .e-menu-container .e-menu > .e-menu-item.tn-menu-active {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 6px;
}

.e-appbar .e-menu-container .e-menu > .e-menu-item.tn-menu-active .e-menu-text {
    color: #ffffff;
    font-weight: 600;
}

/* -- SfAppBar: Tillat overflow for dropdowns og popups --
   Syncfusion setter overflow:hidden pa .e-appbar (1 klasse).
   Var selector: 2 klasser = hoyere spesifisitet. */
.e-appbar.appbar-nav {
    overflow: visible;
}

/* -- SfMenu popup: hele radhoyden skal vare klikkbar, ikke bare teksten --
   .e-menu-item har anchor inni (.e-menu-url) som ofte ikke spenner hele bredden.
   Vi tvinger blokk-display og inherit padding sa hele radomradet trigger klikk.
   Vi setter ogsa pointer-cursor pa hele item-et. */
.e-menu-container .e-menu-popup .e-menu-item,
.e-menu-container .e-menu .e-menu-item {
    cursor: pointer;
}

.e-menu-container .e-menu-popup .e-menu-item .e-menu-url,
.e-menu-container .e-menu .e-menu-item .e-menu-url {
    display: block;
    width: 100%;
    height: 100%;
    padding: inherit;
    margin: 0;
    color: inherit;
    text-decoration: none;
}

/* -- SfGrid DisplayAsCheckBox-kolonner --
   Standard: tom checkbox-firkant med lav kontrast i bade checked og unchecked tilstand.
   Vi onsker: tydelig hake der det er sant, ingenting der det er usant.
   Syncfusion rendrer en disabled checkbox: <div class="e-checkbox-wrapper">...<span class="e-frame e-icons"></span>...
   Klassen e-check finnes pa wrapperen nar boksen er huket av. */
.e-grid .e-rowcell .e-checkbox-wrapper .e-frame {
    border: none;
    background: transparent;
    box-shadow: none;
}

.e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-check {
    color: #16a34a;
    font-size: 1.1rem;
    background: transparent;
}

.e-grid .e-rowcell .e-checkbox-wrapper .e-frame:not(.e-check) {
    visibility: hidden;
}

/* -- SfGrid: klikkbare rader med visuell pointer-cursor --
   Brukes når hele raden er en navigerbar enhet (f.eks. /invoicing).
   Klassen settes på Grid med CssClass="grid-rows-clickable". */
.e-grid.grid-rows-clickable .e-row {
    cursor: pointer;
}

.e-grid.grid-rows-clickable .e-row .e-rowcell {
    cursor: pointer;
}

/* Knapper i klikkbare rader skal beholde standard cursor og ikke arve pointer */
.e-grid.grid-rows-clickable .e-rowcell .e-btn {
    cursor: pointer;
}

/* Hele raden highlightes ved hover, ikke bare enkelt-celler (#10).
   Spesifisitet: .e-grid.grid-rows-clickable .e-row:hover > .e-rowcell = (0,3,2). */
.e-grid.grid-rows-clickable .e-row:hover > .e-rowcell {
    background-color: #eff6ff;
}
/* Tilsvarende for selected row */
.e-grid.grid-rows-clickable .e-row.e-rowselected > .e-rowcell,
.e-grid.grid-rows-clickable .e-row.e-row-active > .e-rowcell {
    background-color: #dbeafe;
}