/* ============================================================================
   OVIT CLOUD - WHMCS-kompatibilitetslag
   ----------------------------------------------------------------------------
   Temaet laster ikke Bootstrap (theme.css/all.css). WHMCS' egne maler
   (support, fakturaer, tjenestedetaljer, handlekurv) er skrevet mot
   Bootstrap 4. Denne filen leverer KUN det som mangler:
     1. Variabel-aliaser  - ~89 regler i custom.css brukte navn som aldri ble
                            definert (--spacing-lg, --color-bg-alt, ...) og var
                            derfor døde. Aliasene vekker dem, i mørk drakt.
     2. Sideramme         - <main> hadde ingen container: stock-sider gikk kant
                            til kant uten luft.
     3. Grid + utilities  - .row/.col-*/offset/float/spacing.
     4. Komponent-hull    - .tab-pane (uten den vises ALLE faner samtidig),
                            .label-*, knappe- og skjemavarianter.
   Farger settes med :where() (spesifisitet 0) der temaet kan ha egne regler,
   slik at custom.css alltid vinner. Struktur settes normalt.
   Lastes SIST i header.tpl.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. VARIABEL-ALIASER
   custom.css bruker et annet navnesett enn system.css definerer. Uten disse
   er padding/farge/skriftvekt i dashbord-kort, tabeller, paginering,
   status-tekst og alert-bokser tomme verdier - regelen faller bort.
   --------------------------------------------------------------------------- */
:root {
    --color-bg: var(--bg-dark-1);
    --color-bg-alt: var(--bg-dark-2);
    --color-border: var(--border-color);
    --color-divider: var(--border-light);
    --color-text: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-accent: var(--brand-primary);
    --color-danger: var(--color-error);

    --font-size-sm: var(--fs-sm);
    --font-size-lg: var(--fs-lg);
    --font-size-xl: var(--fs-xl);
    --font-size-2xl: var(--fs-2xl);
    --font-size-3xl: var(--fs-3xl);

    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;
}

/* ---------------------------------------------------------------------------
   2. SIDERAMME
   header.tpl legger <div class="page-shell"> rundt sideinnholdet paa alle
   sider unntatt de fullbredde markedssidene.
   --------------------------------------------------------------------------- */
.page-shell {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* Maler som har sin egen .container skal ikke faa dobbel luft. */
.page-shell > .container,
.page-shell > section.container,
.page-shell .container-lg {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 575px) {
    .page-shell { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* ---------------------------------------------------------------------------
   3. GRID (Bootstrap 4-kompatibelt) + BS3-aliaser
   --------------------------------------------------------------------------- */
.container-fluid {
    width: 100%;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    margin-left: auto;
    margin-right: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
}

.no-gutters { margin-left: 0; margin-right: 0; }
.no-gutters > [class*="col-"] { padding-left: 0; padding-right: 0; }

.row > [class*="col-"],
.row > .col {
    position: relative;
    width: 100%;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
}

.col { flex: 1 0 0%; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }

/* Kolonner uten breakpoint */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.offset-0, .col-offset-0 { margin-left: 0%; }
.offset-1, .col-offset-1 { margin-left: 8.333333%; }
.offset-2, .col-offset-2 { margin-left: 16.666667%; }
.offset-3, .col-offset-3 { margin-left: 25%; }
.offset-4, .col-offset-4 { margin-left: 33.333333%; }
.offset-5, .col-offset-5 { margin-left: 41.666667%; }
.offset-6, .col-offset-6 { margin-left: 50%; }
.offset-7, .col-offset-7 { margin-left: 58.333333%; }
.offset-8, .col-offset-8 { margin-left: 66.666667%; }
.offset-9, .col-offset-9 { margin-left: 75%; }
.offset-10, .col-offset-10 { margin-left: 83.333333%; }
.offset-11, .col-offset-11 { margin-left: 91.666667%; }

/* BS3: .col-xs-* oppfoerer seg som .col-* */
.col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-xs-3 { flex: 0 0 25%; max-width: 25%; }
.col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-xs-6 { flex: 0 0 50%; max-width: 50%; }
.col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-xs-9 { flex: 0 0 75%; max-width: 75%; }
.col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
    .offset-sm-0, .col-sm-offset-0 { margin-left: 0%; }
    .offset-sm-1, .col-sm-offset-1 { margin-left: 8.333333%; }
    .offset-sm-2, .col-sm-offset-2 { margin-left: 16.666667%; }
    .offset-sm-3, .col-sm-offset-3 { margin-left: 25%; }
    .offset-sm-4, .col-sm-offset-4 { margin-left: 33.333333%; }
    .offset-sm-5, .col-sm-offset-5 { margin-left: 41.666667%; }
    .offset-sm-6, .col-sm-offset-6 { margin-left: 50%; }
    .offset-sm-7, .col-sm-offset-7 { margin-left: 58.333333%; }
    .offset-sm-8, .col-sm-offset-8 { margin-left: 66.666667%; }
    .offset-sm-9, .col-sm-offset-9 { margin-left: 75%; }
    .offset-sm-10, .col-sm-offset-10 { margin-left: 83.333333%; }
    .offset-sm-11, .col-sm-offset-11 { margin-left: 91.666667%; }
}

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    .offset-md-0, .col-md-offset-0 { margin-left: 0%; }
    .offset-md-1, .col-md-offset-1 { margin-left: 8.333333%; }
    .offset-md-2, .col-md-offset-2 { margin-left: 16.666667%; }
    .offset-md-3, .col-md-offset-3 { margin-left: 25%; }
    .offset-md-4, .col-md-offset-4 { margin-left: 33.333333%; }
    .offset-md-5, .col-md-offset-5 { margin-left: 41.666667%; }
    .offset-md-6, .col-md-offset-6 { margin-left: 50%; }
    .offset-md-7, .col-md-offset-7 { margin-left: 58.333333%; }
    .offset-md-8, .col-md-offset-8 { margin-left: 66.666667%; }
    .offset-md-9, .col-md-offset-9 { margin-left: 75%; }
    .offset-md-10, .col-md-offset-10 { margin-left: 83.333333%; }
    .offset-md-11, .col-md-offset-11 { margin-left: 91.666667%; }
}

@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
    .offset-lg-0, .col-lg-offset-0 { margin-left: 0%; }
    .offset-lg-1, .col-lg-offset-1 { margin-left: 8.333333%; }
    .offset-lg-2, .col-lg-offset-2 { margin-left: 16.666667%; }
    .offset-lg-3, .col-lg-offset-3 { margin-left: 25%; }
    .offset-lg-4, .col-lg-offset-4 { margin-left: 33.333333%; }
    .offset-lg-5, .col-lg-offset-5 { margin-left: 41.666667%; }
    .offset-lg-6, .col-lg-offset-6 { margin-left: 50%; }
    .offset-lg-7, .col-lg-offset-7 { margin-left: 58.333333%; }
    .offset-lg-8, .col-lg-offset-8 { margin-left: 66.666667%; }
    .offset-lg-9, .col-lg-offset-9 { margin-left: 75%; }
    .offset-lg-10, .col-lg-offset-10 { margin-left: 83.333333%; }
    .offset-lg-11, .col-lg-offset-11 { margin-left: 91.666667%; }
}

@media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
    .offset-xl-0, .col-xl-offset-0 { margin-left: 0%; }
    .offset-xl-1, .col-xl-offset-1 { margin-left: 8.333333%; }
    .offset-xl-2, .col-xl-offset-2 { margin-left: 16.666667%; }
    .offset-xl-3, .col-xl-offset-3 { margin-left: 25%; }
    .offset-xl-4, .col-xl-offset-4 { margin-left: 33.333333%; }
    .offset-xl-5, .col-xl-offset-5 { margin-left: 41.666667%; }
    .offset-xl-6, .col-xl-offset-6 { margin-left: 50%; }
    .offset-xl-7, .col-xl-offset-7 { margin-left: 58.333333%; }
    .offset-xl-8, .col-xl-offset-8 { margin-left: 66.666667%; }
    .offset-xl-9, .col-xl-offset-9 { margin-left: 75%; }
    .offset-xl-10, .col-xl-offset-10 { margin-left: 83.333333%; }
    .offset-xl-11, .col-xl-offset-11 { margin-left: 91.666667%; }
}

/* Stables paa mobil: stock-maler antar at .col-sm-* er full bredde under 576px,
   noe .col-* over allerede gir. */

/* ---------------------------------------------------------------------------
   4. UTILITIES
   --------------------------------------------------------------------------- */
.clearfix::after { display: block; clear: both; content: ""; }

.float-left, .pull-left { float: left !important; }
.float-right, .pull-right { float: right !important; }
.float-none { float: none !important; }

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-break { overflow-wrap: anywhere; word-break: break-word; }

.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.small, small { font-size: var(--fs-sm); }

.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-middle { vertical-align: middle !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* WHMCS' egen hjelpeklasse - brukes i mange stock-maler */
.margin-bottom { margin-bottom: 20px !important; }
.no-margin { margin: 0 !important; }

/* Bootstrap spacing-skala */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* ---------------------------------------------------------------------------
   5. KOMPONENT-HULL
   --------------------------------------------------------------------------- */

/* Faner. Uten .tap-pane-regelen vises ALT fane-innhold samtidig - det var
   grunnen til at tjenestedetaljer viste oversikt, nedlastinger, tillegg og
   passordbytte oppa hverandre. */
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show.active { display: block; }
.fade { transition: opacity 0.15s linear; }
.fade:not(.show):not(.in):not(.active) { opacity: 0; }
.tab-content > .tab-pane.active { opacity: 1; }
.collapse:not(.show):not(.in) { display: none; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height 0.3s ease; }

/* Fane-rad */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-tabs { border-bottom: 1px solid var(--border-color); }
.nav-tabs .nav-item { margin-bottom: -1px; }
.nav-tabs .nav-link,
.nav-tabs > li > a {
    display: block;
    padding: 0.6rem 1rem;
    border: 1px solid transparent;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    text-decoration: none;
}
.nav-tabs .nav-link:hover { border-color: rgba(0, 212, 255, 0.18); }
.nav-tabs + .responsive-tabs-sm-connector { display: none; }
.tab-content { padding-top: var(--space-3); }

/* BS3-etiketter. Stock-maler og egne moduler bruker fortsatt .label-* ;
   uten dem ble statusen staaende som naken tekst. */
.label, .badge {
    display: inline-block;
    padding: 0.3em 0.75em;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
:where(.label-success, .badge-success, .label.status-active, .badge.status-active) {
    background: rgba(0, 255, 136, 0.16); color: #7dffc4;
}
:where(.label-info, .badge-info, .label-primary, .badge-primary) {
    background: rgba(0, 212, 255, 0.16); color: #8fe6ff;
}
:where(.label-warning, .badge-warning, .label.status-pending, .badge.status-pending) {
    background: rgba(255, 170, 0, 0.16); color: #ffd28a;
}
:where(.label-danger, .badge-danger, .label.status-suspended, .label.status-terminated) {
    background: rgba(255, 0, 85, 0.16); color: #ff9bb6;
}
:where(.label-default, .badge-default, .badge-secondary, .label-secondary) {
    background: rgba(138, 150, 198, 0.16); color: #b9c6e6;
}

/* Knappevarianter som system.css ikke har */
:where(.btn-danger) { background: rgba(255, 0, 85, 0.16); border-color: rgba(255, 0, 85, 0.45); color: #ffb3c7; }
:where(.btn-danger:hover) { background: rgba(255, 0, 85, 0.28); color: #fff; }
:where(.btn-warning) { background: rgba(255, 170, 0, 0.16); border-color: rgba(255, 170, 0, 0.45); color: #ffd699; }
:where(.btn-warning:hover) { background: rgba(255, 170, 0, 0.28); color: #fff; }
:where(.btn-info) { background: rgba(0, 212, 255, 0.14); border-color: rgba(0, 212, 255, 0.4); color: #a9e9ff; }
:where(.btn-info:hover) { background: rgba(0, 212, 255, 0.24); color: #fff; }
:where(.btn-link) { background: none; border-color: transparent; color: var(--brand-primary); box-shadow: none; }
:where(.btn-link:hover) { text-decoration: underline; }
.btn-xs { padding: 0.2rem 0.6rem; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.btn-group { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.btn[disabled], .btn.disabled { opacity: 0.5; pointer-events: none; }

/* Skjema */
.form-row { display: flex; flex-wrap: wrap; margin-left: -6px; margin-right: -6px; }
.form-row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; gap: 0.5rem; }
.form-control {
    display: block;
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-md);
    line-height: 1.5;
}
.form-control-sm, .input-sm { padding: 0.3rem 0.6rem; font-size: var(--fs-sm); }
.form-control-lg, .input-lg { padding: 0.75rem 1.1rem; font-size: var(--fs-lg); }
select.form-control:not([size]):not([multiple]) { height: auto; }
.col-form-label { padding-top: 0.55rem; padding-bottom: 0.55rem; margin-bottom: 0; }
.form-check { position: relative; display: block; padding-left: 1.5rem; }
.form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.5rem; }
.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group-prepend, .input-group-append { display: flex; }
.input-group-text {
    display: flex; align-items: center; padding: 0.55rem 0.85rem;
    border-radius: var(--radius-md);
}
.help-block, .form-text { display: block; margin-top: 0.35rem; font-size: var(--fs-sm); color: var(--text-muted); }

/* Tabeller: struktur (temaet setter fargene) */
table.table { width: 100%; margin-bottom: var(--space-3); border-collapse: collapse; }
.table th, .table td { padding: 0.7rem 0.75rem; vertical-align: middle; }
.table thead th { text-align: left; font-weight: 600; }
.table-sm th, .table-sm td { padding: 0.4rem 0.5rem; }
.table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--border-color); }

/* Paneler/kort/bokser: struktur */
.card { display: flex; flex-direction: column; min-width: 0; }
.card-body, .panel-body { flex: 1 1 auto; padding: var(--space-3); }
.card-header, .card-footer, .panel-heading, .panel-footer { padding: var(--space-2) var(--space-3); }
.card-title { margin-bottom: var(--space-2); }
.well { padding: var(--space-3); border-radius: var(--radius-lg); }
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.list-group-item { position: relative; display: block; padding: 0.7rem 1rem; border: 1px solid var(--border-color); }
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/* Fremdrift, brødsmuler, lukkeknapp */
.progress { display: flex; height: 1rem; overflow: hidden; border-radius: var(--radius-full); background: rgba(10, 14, 39, 0.6); }
.progress-bar { display: flex; align-items: center; justify-content: center; background: var(--brand-primary); color: var(--bg-dark-0); font-size: var(--fs-xs); }
.breadcrumb { display: flex; flex-wrap: wrap; padding: 0.6rem 0; margin-bottom: var(--space-2); list-style: none; gap: 0.5rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; padding-right: 0.5rem; color: var(--text-muted); }
.close {
    float: right; background: none; border: 0; font-size: 1.4rem; line-height: 1;
    color: var(--text-secondary); opacity: 0.7; cursor: pointer;
}
.close:hover { opacity: 1; color: var(--text-primary); }

/* Modal-struktur (temaet farger .modal-content selv) */
:where(.modal) { position: fixed; top: 0; left: 0; z-index: 1050; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; }
:where(.modal:not(.show):not(.in)) { display: none; }
.modal-dialog { position: relative; width: auto; margin: 1.75rem auto; max-width: 600px; }
.modal-header, .modal-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); gap: 0.5rem; }
.modal-body { padding: var(--space-3); }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background: rgba(4, 7, 20, 0.7); }

/* Ikon-stabel (brukes paa tjenestedetaljer) */
.fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; }
.fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; }
.fa-stack-1x { line-height: inherit; }
.fa-stack-2x { font-size: 2em; }
.fa-inverse { color: var(--bg-dark-0); }

/* Responsive faner som WHMCS bruker paa tjenestedetaljer */
.responsive-tabs-sm-connector { display: none; }