body {
    --vestex-sidebar-bg: #004e64;
    --vestex-main-bg: #337183;
    --vestex-topbar-bg: #2b6674;
}

/* BASE */
html, body {
    background-color: var(--vestex-main-bg) !important;
}

/* MAIN */
main.main {
    background-color: var(--vestex-main-bg) !important;
}



/* SIDEBAR */
nav.navbar-vertical,
.sidebar,
.app-sidebar {
    background-color: var(--vestex-sidebar-bg) !important;
    background-image: none !important;
}

/* Ikke dobbel-lag */
.navbar-vertical-content,
#navbarVerticalCollapse,
#navbarVerticalCollapse .navbar-vertical-content,
#navbarVerticalCollapse .scrollbar {
    background-color: transparent !important;
    background-image: none !important;
}

/* TOPBAR */
.navbar-top {
    background-color: var(--vestex-topbar-bg) !important;
    background-image: none !important;
}

/* Glass av */
.navbar-glass {
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

    .navbar-glass::before,
    .navbar-glass::after,
    .navbar-top::before,
    .navbar-top::after {
        content: none !important;
        background: none !important;
    }

/* ===== Sidebar text & icons white ===== */

.navbar-vertical .nav-link {
    color: #f1f5f7 !important;
}

    .navbar-vertical .nav-link .nav-link-icon,
    .navbar-vertical .nav-link .nav-link-icon i,
    .navbar-vertical .nav-link .fas,
    .navbar-vertical .nav-link .far,
    .navbar-vertical .nav-link .fab {
        color: #f1f5f7 !important;
    }

    /* Hover */
    .navbar-vertical .nav-link:hover {
        color: #f1f5f7 !important;
        opacity: 0.85;
    }

    /* Active */
    .navbar-vertical .nav-link.active {
        color: #f1f5f7 !important;
        font-weight: 600;
    }



/* ===== Sidebar menu row hover/active ===== */

/* Sørg for at linken fyller bredden og får bedre padding */
.navbar-vertical .nav-link {
    display: flex; /* viktig: gjør den til en "rad" */
    align-items: center;
    width: 100%;
    padding: .55rem .75rem; /* mer luft */
    margin: .10rem .50rem; /* "innrykk" fra kanten på menyen */
    border-radius: .25rem; /* mindre avrunding */
}

    /* Hover-farge som fyller hele "raden" */
    .navbar-vertical .nav-link:hover {
        background-color: rgba(255,255,255,0.14) !important;
    }

    /* Active valgt menypunkt */
    .navbar-vertical .nav-link.active {
        background-color: rgba(255,255,255,0.12) !important;
        border-radius: .25rem;
    }

    /* Litt spacing mellom ikon og tekst (om Falcon ikke allerede gir det) */
    .navbar-vertical .nav-link .nav-link-icon {
        margin-right: .55rem;
    }

    /* Hvis teksten ligger i egen span med padding, kan du justere den */
    .navbar-vertical .nav-link .nav-link-text {
        padding-left: 0 !important; /* siden vi bruker margin-right på ikon */
    }

.navbar-vertical .nav-item {
    width: 100%;
}

/* Selve raden */
.navbar-vertical .nav-link {
    margin: .10rem 0; /* ingen side-margin */
    padding: .55rem 1.25rem; /* mer indre luft */
}

    .navbar-vertical .nav-link > .d-flex {
        padding-left: 1.25rem; /* flytter ikon + tekst samlet */
        padding-right: 1.25rem;
    }



/* Topbar må ikke være transparent selv om den har navbar-glass */
.navbar-top.navbar-glass {
    background-color: var(--vestex-topbar-bg) !important;
    background-image: none !important;
}

/* ===== Force hamburger lines white ===== */
.navbar-vertical-toggle .navbar-toggle-icon,
.navbar-vertical-toggle .navbar-toggle-icon::before,
.navbar-vertical-toggle .navbar-toggle-icon::after,
.navbar-vertical-toggle .toggle-line,
.navbar-vertical-toggle .toggle-line::before,
.navbar-vertical-toggle .toggle-line::after {
    background: #f1f5f7 !important;
    border-color: #f1f5f7 !important;
}

/* Mobile hamburger */
#mobileHamburger .navbar-toggle-icon,
#mobileHamburger .navbar-toggle-icon::before,
#mobileHamburger .navbar-toggle-icon::after,
#mobileHamburger .toggle-line,
#mobileHamburger .toggle-line::before,
#mobileHamburger .toggle-line::after {
    background: #f1f5f7 !important;
    border-color: #f1f5f7 !important;
}

/* Default: vis stor logo, skjul ikon */
.brand-logo-icon {
    display: none;
}

/* Default: vis stor logo, skjul ikon */
.brand-logo-icon {
    display: none;
}

.brand-logo-full {
    display: block;
    max-width: 175px;
    height: 47px; /* <-- viktig for SVG */
    width: auto;
}

/* Når sidebaren er collapsed: skjul stor logo, vis ikon */
html.navbar-vertical-collapsed .brand-logo-full,
body.navbar-vertical-collapsed .brand-logo-full,
.navbar-vertical-collapsed .brand-logo-full {
    display: none !important;
}

html.navbar-vertical-collapsed .brand-logo-icon,
body.navbar-vertical-collapsed .brand-logo-icon,
.navbar-vertical-collapsed .brand-logo-icon {
    display: block !important;
    width: 28px;
    height: 28px;
    margin: 0 auto;
}






/* ===== Topbar New dropdown button ===== */
#newDropdownButton {
    color: #d5b785 !important; /* Lion */
    border-color: #d5b785 !important;
    background-color: transparent !important;
}

    /* Hover */
    #newDropdownButton:hover {
        background-color: #d5b785 !important;
        border-color: #d5b785 !important;
        color: #073B4C !important;
    }

    /* Active (klikket) */
    #newDropdownButton:active,
    #newDropdownButton.show {
        background-color: #caa566 !important; /* Lion 80 */
        border-color: #caa566 !important;
        color: #073B4C !important;
    }

/* =========================================================
   VESTEX FORMS + BUTTONS (HTML + Bootstrap + ASP.NET)
   Brand:
   - Midnight Green: #073B4C (eller din sidebar)
   - Lion:          #d5b785  (primary)
   - Lion hover:    #caa566
   ========================================================= */

:root {
    --vestex-primary: #d5b785; /* Lion 100 */
    --vestex-primary-hover: #caa566; /* Lion 80 */
    --vestex-ink: #073B4C; /* mørk tekst */
    --vestex-focus: rgba(213,183,133,0.28);
    --vestex-border: rgba(7,59,76,0.25);
}

/* ---------- Inputs / Select / Textarea (generelt) ---------- */
/* Treffer både Bootstrap og “rene” inputs (inkl ASP.NET) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    border-color: var(--vestex-border) !important;
}

    /* Bootstrap-klasser + fallback */
    .form-control,
    .form-select,
    textarea.form-control {
        border-color: var(--vestex-border) !important;
    }

        /* Focus (fjern blå, gi Lion-ring) */
        input:not([type="checkbox"]):not([type="radio"]):focus,
        select:focus,
        textarea:focus,
        .form-control:focus,
        .form-select:focus {
            border-color: var(--vestex-primary) !important;
            box-shadow: 0 0 0 .20rem var(--vestex-focus) !important;
            outline: none !important;
        }

        /* Hover (subtil) */
        input:not([type="checkbox"]):not([type="radio"]):hover,
        select:hover,
        textarea:hover,
        .form-control:hover,
        .form-select:hover {
            border-color: rgba(213,183,133,0.65) !important;
        }

        /* Disabled/read-only */
        input:disabled, select:disabled, textarea:disabled,
        .form-control:disabled, .form-select:disabled,
        input[readonly], textarea[readonly] {
            background-color: rgba(242,241,242,0.9) !important; /* Neutral-ish */
            opacity: 1; /* bootstrap gjør ofte 0.65 */
            cursor: not-allowed;
        }

/* ---------- Checkbox / Radio (Bootstrap 5) ---------- */
.form-check-input:focus {
    border-color: var(--vestex-primary) !important;
    box-shadow: 0 0 0 .20rem var(--vestex-focus) !important;
}

.form-check-input:checked {
    background-color: var(--vestex-primary) !important;
    border-color: var(--vestex-primary) !important;
}

/* ---------- Buttons (Bootstrap + asp:Button render) ---------- */
/* Baseline - gjør knapper litt mer “Vestex” */
.btn {
    border-radius: .45rem;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Primary (Save/Update) */
.btn-primary {
    background-color: var(--vestex-primary) !important;
    border-color: var(--vestex-primary) !important;
    color: var(--vestex-ink) !important;
}

    .btn-primary:hover {
        background-color: var(--vestex-primary-hover) !important;
        border-color: var(--vestex-primary-hover) !important;
        color: var(--vestex-ink) !important;
    }

    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active {
        box-shadow: 0 0 0 .20rem var(--vestex-focus) !important;
    }

/* Outline primary (New / sekundær) */
.btn-outline-primary {
    color: var(--vestex-primary) !important;
    border-color: var(--vestex-primary) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--vestex-primary) !important;
        border-color: var(--vestex-primary) !important;
        color: var(--vestex-ink) !important;
    }

    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        box-shadow: 0 0 0 .20rem var(--vestex-focus) !important;
    }

/* Link buttons (hvis du bruker .btn-link) */
.btn-link {
    color: var(--vestex-primary) !important;
}

    .btn-link:hover {
        color: var(--vestex-primary-hover) !important;
    }

/* ---------- Dropdown (Bootstrap) ---------- */
.dropdown-menu {
    border-color: rgba(7,59,76,0.15) !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: rgba(213,183,133,0.22) !important; /* lys Lion */
    color: var(--vestex-ink) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--vestex-primary) !important;
    color: var(--vestex-ink) !important;
}

/* ---------- Listbox (HTML select multiple + ASP:ListBox) ---------- */
/* Viktig: OS styrer selve markeringa i listen i stor grad.
   Men vi kan style ramma og focus fint. */
select[multiple],
select[size] {
    border-color: var(--vestex-border) !important;
}

    select[multiple]:focus,
    select[size]:focus {
        border-color: var(--vestex-primary) !important;
        box-shadow: 0 0 0 .20rem var(--vestex-focus) !important;
    }

/* =========================================
   VESTEX Section Title Component
   ========================================= */

.section-title {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .9rem;
    background-color: #e7ebec; /* ønsket bg */
    border-radius: .6rem;
    font-weight: 600;
    color: #073B4C; /* behold mørk tekst */
}

.section-title-icon {
    color: #caa566; /* ønsket ikonfarge */
    font-size: 1rem;
}

.section-title-text {
    font-size: 1.05rem;
}


/* =========================================================
   VESTEX – Depth & Life (FINAL)
   ========================================================= */

/* Litt mer kontrast mellom bakgrunn og kort */
main.main {
    background-color: #2b6674 !important; /* litt dypere teal */
}

/* Oppgrader alle shadow-sm kort (det er disse du bruker mest) */
.card.shadow-sm,
.shadow-sm {
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.10) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
}

/* Hover-løft (desktop) */
@media (hover: hover) {
    .card.shadow-sm:hover,
    .shadow-sm:hover {
        box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 14px 34px rgba(0,0,0,.14) !important;
    }
}

/* Subtil premium-gradient på de store “hovedkortene” */
.customer-card,
.customer-right-col > .card.shadow-sm,
#customerBottomCard.card.shadow-sm {
    background: linear-gradient(to bottom, #ffffff 0%, #fbfcfd 100%) !important;
}

.btn-primary {
    box-shadow: 0 6px 18px rgba(213,183,133,.25);
}

.customer-card.shadow-sm {
    box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.12) !important;
}

/* Minimal fix: bare brand og evt. topbar-innhold */
.navbar-top {
    background-color: var(--vestex-topbar-bg) !important;
}

    .navbar-top .navbar-brand,
    .navbar-top .navbar-brand img,
    .navbar-top .search-box,
    .navbar-top .btn {
        opacity: 1 !important;
        filter: none !important;
    }

/* =========================================================
   Tabulator Pagination (catch-all)
   - dekker både Tabulator .tabulator-page og Bootstrap .page-link
   ========================================================= */

/* 1) Bootstrap-style pagination inni Tabulator footer */
.tabulator .tabulator-footer .pagination .page-link {
    background: #fff !important;
    border-color: rgba(7,59,76,.20) !important;
    color: #073B4C !important;
    border-radius: .35rem !important;
}

    .tabulator .tabulator-footer .pagination .page-link:hover {
        background: rgba(213,183,133,.18) !important;
        border-color: rgba(213,183,133,.45) !important;
        color: #073B4C !important;
    }

.tabulator .tabulator-footer .pagination .page-item.active .page-link {
    background: #d5b785 !important; /* Lion */
    border-color: #d5b785 !important;
    color: #073B4C !important;
    box-shadow: 0 6px 16px rgba(213,183,133,.25) !important;
}

/* Disabled */
.tabulator .tabulator-footer .pagination .page-item.disabled .page-link {
    opacity: .45 !important;
    background: #fff !important;
    color: #073B4C !important;
}

/* 2) Tabulator native pagination buttons (hvis det er den varianten) */
.tabulator .tabulator-footer .tabulator-page {
    border: 1px solid rgba(7,59,76,.20) !important;
    background: #fff !important;
    color: #073B4C !important;
    border-radius: .35rem !important;
}

    .tabulator .tabulator-footer .tabulator-page.active {
        background: #d5b785 !important;
        border-color: #d5b785 !important;
        color: #073B4C !important;
        box-shadow: 0 6px 16px rgba(213,183,133,.25) !important;
    }

/* Actions: keep on one line */
.tabulator .tabulator-cell .tab-actions {
    white-space: nowrap;
}

/* ================================
   Tabulator – tighter header
   ================================ */
.tabulator .tabulator-header .tabulator-col {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

    .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
        padding-top: .15rem;
        padding-bottom: .15rem;
    }

    .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
        line-height: 1.15;
        font-size: 0.875rem; /* matcher ofte Bootstrap small */
    }

.tabulator .tabulator-tableholder .tabulator-row {
    min-height: 34px;
}

.tabulator .tabulator-cell {
    padding-top: .35rem;
    padding-bottom: .35rem;
    font-size: 0.9rem;
}

/* Tabulator: allow horizontal scroll when too narrow */
.tabulator .tabulator-tableholder {
    overflow-x: auto !important;
}

.vestex-icon {
    color: #d5b785 !important;
}

select option:checked {
    background-color: #d5b785 !important;
    color: #073B4C !important;
}


/* =========================================
   VESTEX – Cards (light surfaces on teal bg)
   Brukes på sider som ReportFilter osv.
   ========================================= */
.vestex-card {
    background: linear-gradient(to bottom, #ffffff 0%, #fbfcfd 100%) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
}

    .vestex-card .card-body {
        background: transparent !important; /* bakgrunnen styres av .vestex-card */
    }

    .vestex-card .card-header {
        background-color: #e7ebec !important;
        color: #073B4C !important;
        border-bottom: 1px solid #d8dee6 !important;
    }

/* Dashboard line chart card background (erstatt Falcon-blå) */
.bg-line-chart-gradient {
    background: linear-gradient(135deg, var(--vestex-sidebar-bg) 0%, var(--vestex-topbar-bg) 55%, var(--vestex-main-bg) 100% ) !important;
    border: 1px solid rgba(213,183,133,0.35);
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px rgba(213,183,133,0.08), 0 10px 25px rgba(0,0,0,0.22);
}

/* Nice multi-select box height + consistent look */
.vestex-multilist {
    min-height: 140px; /* ~5 rows */
    padding-right: 0.5rem;
}

#taskFilterCard .form-text {
    font-size: .78rem;
}

/* =========================================
   VESTEX TABS (Classic Bootstrap tab look)
   - Active tab = "flik"
   - Inactive = tekst
   - Fixes the 1px seam/gap globally (no markup changes)
   ========================================= */

.vestex-tabs {
    border-bottom: 0 !important;
    gap: .35rem;
    /* IMPORTANT: make tabs sit on the baseline */
    display: flex !important;
    align-items: flex-end !important;
    padding-bottom: 0 !important;
}

    /* Default / inactive */
    .vestex-tabs .nav-link {
        border: 0 !important;
        background: transparent !important;
        color: rgba(7,59,76,0.70) !important;
        font-weight: 500;
        padding: .45rem .85rem;
        border-radius: .55rem .55rem 0 0;
        transition: color .18s ease, background-color .18s ease, opacity .18s ease;
        opacity: .85;
        /* IMPORTANT: pull tabs down to meet the panel border */
        margin-bottom: -1px !important;
    }

        /* Hover on inactive tabs */
        .vestex-tabs .nav-link:hover {
            opacity: 1;
            color: rgba(7,59,76,0.92) !important;
            background-color: rgba(213,183,133,0.10) !important;
        }

        /* Active = the "tab" */
        .vestex-tabs .nav-link.active,
        .vestex-tabs .nav-item.show .nav-link {
            opacity: 1;
            color: rgba(7,59,76,1) !important;
            background: #fff !important;
            border: 1px solid rgba(7,59,76,0.18) !important;
            border-bottom-color: #fff !important;
            border-radius: .65rem .65rem 0 0;
            position: relative;
            /* keep the pull-down so there is no seam */
            margin-bottom: -1px !important;
            font-weight: 600 !important; /* aktiv */
        }

            /* Small Vestex accent for active */
            .vestex-tabs .nav-link.active::after,
            .vestex-tabs .nav-item.show .nav-link::after {
                content: "";
                position: absolute;
                left: .75rem;
                right: .75rem;
                bottom: .25rem;
                height: 2px;
                border-radius: 999px;
                background: var(--vestex-primary);
                opacity: .55;
            }

        /* Focus ring */
        .vestex-tabs .nav-link:focus {
            outline: none !important;
            box-shadow: 0 0 0 .20rem var(--vestex-focus) !important;
        }

/* Panel under tabs */
.vestex-tab-panel {
    border: 1px solid rgba(7,59,76,0.18);
    border-top: 0;
    border-radius: 0 0 .75rem .75rem;
    background: #fff;
    padding: .90rem;
    /* Optional: avoid "air" directly under tabs */
    margin-top: 0 !important;
}

.vestex-tabs {
    border-bottom: 1px solid rgba(7,59,76,0.18) !important;
}

/* ====== Right Panel (fixed) ====== */
:root {
    --vx-topbar-h: 72px; /* settes av JS */
    --vx-rp-w: 420px; /* settes av JS */
    --vx-rp-gap: 0px;
    --vx-rp-splitter-w: 14px;
    --vx-rp-right-pad: 16px;
    --vx-rp-top-pad: 14px;
    --vx-rp-bottom-pad: 22px;
}

/* Når panel er åpent: gi main innhold plass til høyre */
body.vx-rp-open #vxRightPanelHost {
    padding-right: calc(var(--vx-rp-w) + var(--vx-rp-splitter-w) + var(--vx-rp-gap) + var(--vx-rp-right-pad));
}

/* Panel fixed */
.vx-rp-panel {
    position: fixed;
    top: 70px;
    right: var(--vx-rp-right-pad);
    width: var(--vx-rp-w);
    /* HER er endringen: top + bottom (ikke top*2) */
    height: 100%;
    background: #fff;
    bottom: 408px; /* luft nederst */
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--bs-card-border-radius, 12px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
    z-index: 1040;
}

.vx-rp-content {
    height: 100%;
    overflow: auto;
    padding: 12px;
}

/* Splitter fixed */
.vx-rp-splitter {
    position: fixed;
    top: calc(var(--vx-topbar-h, 72px) + var(--vx-rp-top-pad));
    right: calc(var(--vx-rp-right-pad) + var(--vx-rp-w) + var(--vx-rp-gap));
    width: var(--vx-rp-splitter-w);
    /* samme høyde som panel */
    height: calc(100vh - var(--vx-topbar-h, 72px) - var(--vx-rp-top-pad) - var(--vx-rp-bottom-pad));
    cursor: col-resize;
    z-index: 1041;
    background: transparent;
    touch-action: none;
    margin-right: 10px;
}

    /* Grip midtstilt (som Project) */
    .vx-rp-splitter .splitter-grip {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px 6px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.10);
        opacity: .60;
        transition: opacity .15s ease, transform .15s ease;
        pointer-events: none;
    }

    .vx-rp-splitter:hover .splitter-grip {
        opacity: .95;
        transform: translate(-50%,-50%) scale(1.03);
    }

    .vx-rp-splitter .splitter-grip span {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #6c757d;
    }

/* Lukket state */
body:not(.vx-rp-open) .vx-rp-panel {
    display: none;
}

body:not(.vx-rp-open) .vx-rp-splitter {
    display: none;
}

/* Lukket state */
body:not(.vx-rp-open) .vx-rp-panel {
    display: none;
}

body:not(.vx-rp-open) .vx-rp-splitter {
    display: none;
}

/* Drag-state */
html.vx-split-dragging, body.vx-split-dragging {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Tving panelet til å respektere top+bottom (slår alle andre regler) */
#vxRightPanel.vx-rp-panel {
    top: 70px !important;
    bottom: 18px !important;
    height: auto !important;
}

/* Samme for splitteren */
#vxRightPanelSplitter.vx-rp-splitter {
    top: 70px !important;
    bottom: 18px !important;
    height: auto !important;
}

/* Match Falcon card radius + "card look" på høyre panel */
#vxRightPanel.vx-rp-panel {
    border-radius: var(--falcon-card-border-radius, .375rem) !important;
    border-width: var(--falcon-card-border-width, 0px) !important;
    border-color: var(--falcon-card-border-color, rgba(0,0,0,.125)) !important;
    box-shadow: var(--falcon-box-shadow, 0 7px 14px 0 rgba(65,69,88,.1), 0 3px 6px 0 rgba(0,0,0,.07)) !important;
    background: var(--falcon-card-bg, #fff) !important;
}

    /* (Valgfritt) hvis du har header/footer inni panelet senere */
    #vxRightPanel.vx-rp-panel .vx-rp-content {
        border-radius: inherit;
    }

/* 1) Outer layout: ingen gutter, og ikke horisontal scroll */
.container-fluid[data-layout="container"] {
    padding-left: 0 !important;
    padding-right: 20px !important;
}

#vxRightPanel.vx-rp-panel {
    z-index: 900 !important;
}

#vxRightPanelSplitter.vx-rp-splitter {
    z-index: 901 !important;
}
/* Ikke la tilfeldige SVG/overlays i topbaren stjele klikk */
.navbar-top .nav-link > span,
.navbar-top .nav-link svg,
.navbar-top .nav-link svg * {
    pointer-events: none;
}