@charset "UTF-8";
/* =============================================================================
   pt-theme.css  —  Projekttid, moderniserat tema på Bootstrap 5.3
   -----------------------------------------------------------------------------
   Ersätter ptCustomLight.css, ptCustomDark.css, ptCustomClassic.css m.fl.
   Ett enda tema, tre lägen, styrda av data-bs-theme på <html>:

       <html data-bs-theme="blue">    dovblått  (STANDARD — originalfärgen från 1999)
       <html data-bs-theme="light">   ljust
       <html data-bs-theme="dark">    mörkt     (äkta mörkt läge)

   Vilket läge en användare får avgörs i _include/pt-tema.inc.php.

   Filosofi: sätt variabler, inte regler. Nästan allt nedan är omdefinierade
   Bootstrap-variabler — därför är filen en bråkdel av de gamla temafilerna
   och slutar med !important nästan överallt.

   Alla befintliga pt-klassnamn är bevarade, så ingen PHP-sida behöver ändras.
   Björs IT konsult · version 2026-09-22
   ========================================================================== */


/* =============================================================================
   1. MÄRKESFÄRGER
   Hämtade rakt från kommentarsblocket i ptCustomLight.css — dovblått lever.
   ========================================================================== */
:root {
  /*  Versionsstämpel. Läses av pt-kontroll.php så att du kan se vilken
      version av temat som faktiskt ligger på servern.                    */
  --pt-version: "2026-09-22";

  --pt-blue:        #337ab7;   /* Dov-blå, huvudfärgen sedan begynnelsen */
  --pt-blue-deep:   #2a6497;   /* Hover / tryckt läge */
  --pt-blue-dark:   #1f4f78;   /* Mörka ytor i blått läge */
  --pt-blue-light:  #7fb2e0;   /* Läsbar blå mot mörk botten */
  --pt-blue-pale:   #eaf2f9;   /* Mycket ljus blå, för markerade rader */

  --pt-amber:       #e7a62e;   /* Gulorange, accent och varning */
  --pt-amber-deep:  #b88320;   /* Gulorange mot ljus botten (kontrast) */
  --pt-red:         #b1392f;   /* Dov röd */
  --pt-green:       #1a6b4a;   /* Klart / attesterat */

  /*  Typsnitt. Temat äger sin egen stack istället för att låna Bootstraps
      --bs-body-font-family. Skälet är konkret: om Bootstrap av någon
      anledning inte laddar — fel version, fel sökväg, misslyckad
      uppladdning — blir var(--bs-body-font-family) ogiltig och webbläsaren
      faller tillbaka på sitt standardtypsnitt, alltså Times. Med en egen
      variabel och en riktig reservlista händer inte det.

      Inga Google Fonts: det är en extern begäran vid varje sidladdning,
      och svenska tillsynsmyndigheter har varit kritiska till att
      typsnitten hämtas från Googles servrar.                              */
  --pt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             "Noto Sans", "Liberation Sans", Arial, sans-serif,
             "Apple Color Emoji", "Segoe UI Emoji";
  --pt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Radie och skugga — de två detaljer som mest skiljer 2013 från idag */
  --pt-radius:      .625rem;   /* 10px, mot gamla .25rem */
  --pt-radius-sm:   .375rem;
  --pt-shadow:      0 1px 2px rgba(20, 30, 40, .05),
                    0 10px 24px -18px rgba(20, 30, 40, .35);
}


/* =============================================================================
   2. LJUST LÄGE
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  color-scheme: light;

  /* --- Bootstraps grundvariabler ------------------------------------------ */
  --bs-body-bg:            #f6f7f9;
  --bs-body-color:         #1b222b;
  --bs-emphasis-color:     #0d1218;
  --bs-secondary-color:    rgba(27, 34, 43, .62);
  --bs-secondary-bg:       #eef1f4;
  --bs-tertiary-bg:        #fafbfc;
  --bs-border-color:       #e1e6ec;
  --bs-border-color-translucent: rgba(27, 34, 43, .1);

  --bs-primary:            var(--pt-blue);
  --bs-primary-rgb:        51, 122, 183;
  --bs-primary-text-emphasis: var(--pt-blue-deep);
  --bs-primary-bg-subtle:  var(--pt-blue-pale);
  --bs-primary-border-subtle: #c8ddef;

  --bs-warning:            var(--pt-amber);
  --bs-warning-rgb:        231, 166, 46;
  --bs-warning-text-emphasis: var(--pt-amber-deep);
  --bs-warning-bg-subtle:  #fbf1dc;

  --bs-danger:             var(--pt-red);
  --bs-danger-rgb:         177, 57, 47;
  --bs-success:            var(--pt-green);
  --bs-success-rgb:        26, 107, 74;

  /*  Hovring går i mörkblått här, inte gulorange. Mot ljus botten blir
      gulorange lätt skrikigt, och blått håller ihop med märkesfärgen.
      Mörka lägena behåller gulorange — där fungerar den.                */
  --bs-link-color:         var(--pt-blue-deep);
  --bs-link-color-rgb:     42, 100, 151;
  --bs-link-hover-color:   var(--pt-blue-dark);
  --bs-link-hover-color-rgb: 31, 79, 120;

  --bs-border-radius:      var(--pt-radius);
  --bs-border-radius-sm:   var(--pt-radius-sm);
  --bs-border-radius-lg:   .875rem;

  --bs-focus-ring-color:   rgba(51, 122, 183, .28);
  --bs-focus-ring-width:   .2rem;

  /* Egna ytvariabler som resten av filen bygger på */
  --pt-surface:            #ffffff;
  --pt-surface-2:          #fafbfc;
  --pt-accent:             var(--pt-blue);
  --pt-accent-contrast:    #ffffff;
  --pt-accent-soft:        var(--pt-blue-pale);
  --pt-hover:              var(--pt-blue-dark);
}


/* =============================================================================
   3. MÖRKT LÄGE — äkta mörkt, dovblått som accent
   ========================================================================== */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --bs-body-bg:            #101620;
  --bs-body-color:         #dee5ec;
  --bs-emphasis-color:     #f4f7fa;
  --bs-secondary-color:    rgba(222, 229, 236, .62);
  --bs-secondary-bg:       #1b2330;
  --bs-tertiary-bg:        #161d28;
  --bs-border-color:       #2a3441;
  --bs-border-color-translucent: rgba(222, 229, 236, .12);

  --bs-primary:            var(--pt-blue-light);
  --bs-primary-rgb:        127, 178, 224;
  --bs-primary-text-emphasis: #a9cdec;
  --bs-primary-bg-subtle:  #1a2734;
  --bs-primary-border-subtle: #2d4459;

  --bs-warning-text-emphasis: var(--pt-amber);
  --bs-warning-bg-subtle:  #2b2317;
  --bs-danger:             #e07c72;
  --bs-danger-rgb:         224, 124, 114;
  --bs-success:            #56bf92;
  --bs-success-rgb:        86, 191, 146;

  --bs-link-color:         var(--pt-blue-light);
  --bs-link-color-rgb:     127, 178, 224;
  --bs-link-hover-color:   var(--pt-amber);
  --bs-link-hover-color-rgb: 231, 166, 46;

  --bs-focus-ring-color:   rgba(127, 178, 224, .3);

  --pt-surface:            #18202b;
  --pt-surface-2:          #141b24;
  --pt-accent:             var(--pt-blue-light);
  --pt-accent-contrast:    #0d1218;
  --pt-accent-soft:        #1a2734;
  --pt-hover:              var(--pt-amber);
}


/* =============================================================================
   4. DOVBLÅTT LÄGE — standardläget, Projekttids färg sedan 1999
   Samma känsla som förr: blå bakgrund. Skillnaden är att ytorna nu skiljer
   sig från varandra, så kort och rader faktiskt syns.
   ========================================================================== */
[data-bs-theme="blue"] {
  color-scheme: dark;

  /*  En dovare, djupare släkting till originalets #337ab7. Bakgrunden är
      mörkast, korten ligger ett steg ljusare ovanpå — det är den ordningen
      som gör att korten känns upplyfta istället för nedsänkta.

      Originalfärgen #337ab7 exakt fungerar inte som textbärande yta: vit
      text mot den ger bara 4,6:1 och dämpad text klarar inte AA alls.
      Den lever istället vidare som accentfärg i ljust läge.               */
  --bs-body-bg:            #1f4f78;
  --bs-body-color:         #eaf2f9;
  --bs-emphasis-color:     #ffffff;
  --bs-secondary-color:    rgba(234, 242, 249, .86);
  --bs-secondary-bg:       #2a628f;
  --bs-tertiary-bg:        #295c86;
  --bs-border-color:       #3d739f;
  --bs-border-color-translucent: rgba(255, 255, 255, .16);

  --bs-primary:            #ffffff;
  --bs-primary-rgb:        255, 255, 255;
  --bs-primary-text-emphasis: #ffffff;
  --bs-primary-bg-subtle:  #2f6b9b;
  --bs-primary-border-subtle: #4a7fab;

  --bs-warning-text-emphasis: #ffd79a;
  --bs-warning-bg-subtle:  #3a5a75;
  --bs-danger:             #f0918a;
  --bs-danger-rgb:         240, 145, 138;
  --bs-success:            #7fd6ae;
  --bs-success-rgb:        127, 214, 174;

  --bs-link-color:         #ffffff;
  --bs-link-color-rgb:     255, 255, 255;
  --bs-link-hover-color:   var(--pt-amber);
  --bs-link-hover-color-rgb: 231, 166, 46;

  --bs-focus-ring-color:   rgba(255, 255, 255, .4);

  --pt-surface:            #2a628f;
  --pt-surface-2:          #295c86;
  --pt-accent:             #ffffff;
  --pt-accent-contrast:    var(--pt-blue-dark);
  --pt-accent-soft:        #35709f;
  --pt-hover:              var(--pt-amber);
  --pt-shadow:             0 1px 2px rgba(10, 32, 52, .22),
                           0 10px 26px -18px rgba(6, 22, 38, .75);
}


/* =============================================================================
   5. GRUND
   ========================================================================== */
/*  Temat målar sin egen bakgrund och textfärg istället för att lita på
    Bootstraps reboot. Samma skäl som för typsnittet ovan: i Bootstrap 5.0
    och 5.1 står det hårdkodat `background-color: #fff` på body, och den
    regeln laddas före den här filen. Sätter temat inget eget blir sidan
    vit oavsett vilket läge som valts.                                     */
html,
body {
  font-family: var(--pt-font);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*  Gamla temat färgade .container direkt. Den regeln är borta, men
    containern måste vara genomskinlig för att sidbakgrunden ska synas. */
.container,
.container-fluid,
.container-sm, .container-md, .container-lg, .container-xl {
  background-color: transparent;
}

/* Låt även Bootstraps egna komponenter använda samma stack */
:root {
  --bs-font-sans-serif: var(--pt-font);
  --bs-body-font-family: var(--pt-font);
  --bs-font-monospace: var(--pt-font-mono);
}

code, kbd, samp, pre { font-family: var(--pt-font-mono); }

/*  LÄNKFÄRG — en medveten avvikelse från Bootstrap.

    I ett tidredovisningssystem är nästan allt klickbart: kundnamn,
    uppdragsrader, ikoner, telefonnummer. Får de Bootstraps blå blir sidan
    ett hav av blått och ingenting sticker ut. Det gamla temat hade rätt
    instinkt med sitt `a { color: #1c1c1c }`.

    Så: länkar i innehållet ser ut som text. Det är hovringen som bär
    klickbarheten, precis som förut. Accentfärgen sparas till de ställen
    där länken verkligen är en handling — se kortrubrikerna längre ned.  */
a {
  color: var(--bs-body-color);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--pt-hover);
  text-decoration: none;
}

/* Siffror ska stå i kolumn. I ett tidredovisningssystem är det halva jobbet. */
.table,
.table-pt,
.pt-tal,
input[type="number"],
.form-control[inputmode="decimal"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Bootstraps standardfärg för <code> är rosa (#d63384) och blir oläsbar
   mot blått. Låt den följa temat istället. */
code, kbd, samp {
  color: var(--bs-emphasis-color);
  background-color: var(--pt-surface-2);
  padding: .1rem .35rem;
  border-radius: var(--pt-radius-sm);
  font-size: .875em;
}

/* Synlig tangentbordsfokus, utan att störa musanvändare */
:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
  border-radius: var(--pt-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* =============================================================================
   6. MENY
   ========================================================================== */
/*  Menyn är navigation, inte bakgrundsinformation. Bootstraps standard
    dämpar länkarna till 65 % opacitet, vilket får en apps huvudmeny att
    se halvt avstängd ut. Här går de på full färg — skillnaden mellan
    aktiv och inaktiv bärs av fetstil och bakgrundsplatta istället.       */
.navbar {
  --bs-navbar-color:        var(--bs-emphasis-color);
  --bs-navbar-hover-color:  var(--pt-hover);
  --bs-navbar-active-color: var(--bs-emphasis-color);
  --bs-navbar-brand-color:  var(--bs-emphasis-color);
  --bs-navbar-disabled-color: var(--bs-secondary-color);
  --bs-navbar-padding-y:    .5rem;

  /*  Toppen går i samma färg som sidan, inte som korten. Menyn blir då en
      del av sidan istället för ett eget fält — så såg det ut förut, och
      det vilar lugnare.                                                  */
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 1.5rem;
}
.navbar.navbar-umlight { margin-bottom: 0; border-bottom: 0; }

/*  Tredje nivåns undermeny (Fakt.bevakning, Debiterbart, ...) bor inuti
    en kortrubrik, inte på sidans botten. Med sidans bakgrund blev den ett
    mörkare fält mitt i rubriken. Transparent låter den smhälta med det
    som omger den — markeringen av valt alternativ får stå för kontrasten. */
.navbar.navbar-umlight { background-color: transparent; }

.navbar-brand {
  font-size: 1rem;
  font-style: normal;          /* kursiven var en 2013-detalj */
  font-weight: 600;
  letter-spacing: -.01em;
}

/*  Logotypen i menyraden sitter geometriskt mitt i raden men OPTISKT för
    högt. Urtavlan sträcker sig längre ovanför ordet än nedanför det, så
    ordet hamnar under bildrutans mitt — och en centrerad bildruta ger
    därmed ett ord som ligger för högt mot menytexten.
    Uppmätt skillnad mellan ordets och menytextens mitt: 3,8 px när
    logotypen är 60 px hög. Angivet i procent av bildens egen höjd, så att
    det följer med oavsett storlek.                                       */
.navbar .navbar-brand img {
  transform: translateY(6%);
}

/*  Menyvalen ska stå lika starkt oavsett om de är aktiva eller inte —
    det är samma navigation. Skillnaden bärs av bakgrundsplattan och en
    extra tyngd på det aktiva, inte av att de övriga tonas ner.
    Färgen sätts explicit här; Bootstrap lägger annars på en opacitet.   */
.navbar-nav .nav-link {
  color: var(--bs-emphasis-color);
  opacity: 1;
  border-radius: var(--pt-radius-sm);
  padding: .4rem .7rem;
  font-weight: 600;
  transition: background-color .12s ease, color .12s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
  color: var(--pt-hover);
  background-color: var(--pt-accent-soft);
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  font-weight: 700;
  background-color: var(--pt-accent-soft);
  color: var(--bs-emphasis-color);
}
/* Ikonerna i menyn ska följa texten, inte ligga kvar i länkblått */
.navbar-nav .nav-link .bi { color: inherit; }
.nav-link.mobil { padding: .4rem .3rem; }

.navbar-toggler {
  border-color: var(--bs-border-color);
  padding: .35rem .6rem;
  margin: 0;
}

/* Rullgardiner */
.dropdown-menu {
  --bs-dropdown-bg:          var(--pt-surface);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-border-radius: var(--pt-radius);
  --bs-dropdown-link-hover-bg: var(--pt-accent-soft);
  --bs-dropdown-link-active-bg: var(--pt-accent-soft);
  --bs-dropdown-link-active-color: var(--bs-emphasis-color);
  --bs-dropdown-padding-y:   .3rem;
  box-shadow: var(--pt-shadow);
}
.dropdown-item {
  border-radius: var(--pt-radius-sm);
  padding: .5rem .75rem;
  width: auto;
  margin: 0 .3rem;
}
.dropdown-divider { margin: .3rem 0; opacity: .6; }


/* =============================================================================
   7. KORT
   Obs: !important på färgen behövs så länge markupen har class="... text-white"
   på card-header och card-footer (Bootstraps utility-klasser är !important).
   Tas de bort ur PHP-filerna kan !important nedan strykas.
   ========================================================================== */
.card {
  --bs-card-bg:            var(--pt-surface);
  --bs-card-border-color:  var(--bs-border-color);
  --bs-card-border-radius: var(--pt-radius);
  --bs-card-cap-bg:        var(--pt-surface-2);
  --bs-card-spacer-y:      1rem;
  --bs-card-spacer-x:      1.15rem;
  box-shadow: var(--pt-shadow);
}

.card.pt-primary {
  background-color: var(--pt-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--pt-radius);
}
.card.pt-clean {
  background-color: var(--pt-surface);
  border: 0;
  box-shadow: none;
}

.card-header.pt-primary,
.card-header.pt-clean {
  color: var(--bs-emphasis-color) !important;
  background-color: var(--pt-surface-2);
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
  letter-spacing: -.005em;
  padding: .8rem 1.15rem;
}
.card-header.pt-clean { border-bottom: 0; }
/*  Kortrubrikens länk är en handling ("Ny kund", "Ny rad") och är ett av
    få ställen där accentfärgen får användas. !important behövs så länge
    markupen har class="card-header pt-primary text-white".
    :not() håller undan flikar och knappar som kan bo i en rubrik.        */
.card-header.pt-primary a:not(.nav-link):not(.btn),
.card-header.pt-clean a:not(.nav-link):not(.btn) {
  color: var(--bs-link-color) !important;
  font-weight: 600;
  text-decoration: none;
}
.card-header.pt-primary a:not(.nav-link):not(.btn):hover,
.card-header.pt-clean a:not(.nav-link):not(.btn):hover {
  color: var(--pt-hover) !important;
}

.card .pt-info-low {
  background-color: var(--pt-surface-2);
  border-bottom: 1px solid var(--bs-border-color);
  min-height: 1.9rem;
  padding-top: .25rem;
}
.card .card-footer-low,
.card .card-footer-pt,
.card-footer.pt-primary {
  color: var(--bs-secondary-color) !important;
  background-color: var(--pt-surface-2);
  border-top: 1px solid var(--bs-border-color);
  padding: .5rem 1.15rem;
  margin-top: 0;
}
.card .card-footer-low { min-height: 1.9rem; }

/*  KORTDELAR SOM BOR I EN DIALOG ------------------------------------------
    Flera dialoger bygger sin fot av .card-footer i stället för
    .modal-footer — kvittot på sparat, bekräftelser, övergivandevakten.

    Bootstrap 5.3 skriver foten som
        .card-footer { padding: var(--bs-card-cap-padding-y)
                                var(--bs-card-cap-padding-x); }
    och de två variablerna finns BARA på .card. I en dialog finns inget
    .card ovanför, variablerna är odefinierade, hela deklarationen blir
    ogiltig — och foten får noll padding. Knapparna hamnar dikt an mot
    dialogens kant.

    Botemedlet är inte att skriva om padding, utan att ge dialogen samma
    variabler som ett kort har. Då följer dialogens delar korten av sig
    själva, även i framtiden.                                             */
.modal-content {
  --bs-card-spacer-y:      1rem;
  --bs-card-spacer-x:      1.15rem;
  --bs-card-cap-padding-y: .8rem;
  --bs-card-cap-padding-x: 1.15rem;
}
/*  Två knappar bredvid varandra behöver luft emellan. .modal-footer har en
    egen gap-variabel; .card-footer har ingen, så den får en här.          */
.modal-content .card-footer .btn + .btn { margin-left: .5rem; }

/*  Sidfotens länkar. :not()-undantagen är viktiga — sidfoten innehåller
    bokstavslistan A–Ö, som är .nav-link. Utan undantagen vinner den här
    regeln (högre specificitet) och målar bokstäverna länkblå.            */
.card-footer.pt-primary a:not(.nav-link):not(.btn),
.card .card-footer-low a:not(.nav-link):not(.btn),
.card .card-footer-pt a:not(.nav-link):not(.btn) {
  color: var(--bs-emphasis-color);
}
.card-footer.pt-primary a:not(.nav-link):not(.btn):hover,
.card .card-footer-low a:not(.nav-link):not(.btn):hover,
.card .card-footer-pt a:not(.nav-link):not(.btn):hover {
  color: var(--pt-hover);
}

/* Jumbotron finns inte kvar i Bootstrap 5 — definieras här för bakåtkompatibilitet */
.jumbotron,
.pt-jumbo {
  background-color: var(--pt-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  margin-top: 1.5rem;
  padding: 2rem;
}

.bg-pt-vitt { background-color: var(--pt-surface) !important; }
.text-pt-ljus { color: var(--bs-secondary-color) !important; }


/* =============================================================================
   8. RADER I LISTOR
   ========================================================================== */
.row.pt-row {
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: var(--pt-radius-sm);
  padding: .45rem .25rem;
  margin-inline: 0;
  transition: background-color .12s ease;
}
.row.pt-row:hover { background-color: var(--pt-accent-soft); }
.row.pt-row:last-of-type { border-bottom: 0; }

/*  Radernas länkar — mörka, inte blåa. Vikten låg på 500 ett tag, men
    i en lång kundlista där namn, telefon och e-post alla är länkar blev
    hela sidan halvfet. Normal vikt vilar lugnare; hierarkin bärs av
    kolumnordningen och av att länkarna är mörkare än dess omgivning.    */
.row.pt-row a {
  color: var(--bs-emphasis-color);
  font-weight: 400;
  text-decoration: none;
}
.row.pt-row a:hover { color: var(--pt-hover); }

.pt-line { line-height: 1.35; margin-bottom: .5rem; }

/*  LODRÄT CENTRERING I LISTRADER

    Bootstrap-kolumner sträcks som standard till radens fulla höjd
    (align-items: stretch). En ikonkolumn blir då lika hög som rubriken
    bredvid, men ikonerna lägger sig i toppen av den ytan — de ser ut att
    sitta för högt så fort raden är högre än en textrad.

    Här centreras listrader och ikonkolumner lodrätt. :not() ser till att
    rader som själva säger var de vill ha innehållet — t.ex. formulärrader
    med align-items-end — får behålla sitt.                               */
.card-body > .container > .row:not([class*="align-items-"]),
.card-body > .row:not([class*="align-items-"]) {
  align-items: center;
}
.row > [class*="col"].d-flex:not([class*="align-items-"]) {
  align-items: center;
}

/*  Ikoner som står ensamma i en länk ska sitta mitt i textens höjd.     */
.row [class*="col"] > a > .bi,
.row [class*="col"] > .bi {
  vertical-align: -.125em;
}


/* =============================================================================
   9. FLIKAR
   ========================================================================== */
.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: var(--pt-accent);
  --bs-nav-tabs-link-hover-border-color: transparent;
  border-bottom: 1px solid var(--bs-border-color);
  gap: .15rem;
}
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: .55rem .85rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
.nav-tabs .nav-link:hover { color: var(--bs-emphasis-color); }
.nav-tabs .nav-link.active {
  color: var(--pt-accent);
  border-bottom-color: var(--pt-accent);
  background-color: transparent;
}
.nav-tabs.pt-second { border-bottom: 1px solid var(--bs-border-color); }
.nav-tabs .nav-item .pt-help { margin-top: 0; }

/*  Bokstavsknapparna i sidfoten (A–Ö) och andra pillerfilter.

    Det här är den tätaste komponenten i hela appen: 29 bokstäver ska rymmas
    på en rad på stora OCH medelstora skärmar. Därför nätt padding och en
    fast minimibredd som gör dem kvadratiska istället för olika breda —
    ett I ska inte vara smalare än ett M.                                 */
.nav-pills-pt .nav-link {
  color: var(--bs-body-color);
  background-color: var(--pt-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--pt-radius-sm);
  padding: .05rem .1rem;
  margin: .05rem;
  min-width: 1.2rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.55;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
/*  Bryt till flera rader när bredden tar slut. nav-justified vill ge varje
    bokstav lika stor andel av bredden (flex: 1) — det hindrar radbrytning
    och sträcker ut dem. Här får de istället sin naturliga bredd och
    radbryts som text.                                                    */
.nav-pills-pt {
  flex-wrap: wrap;
  justify-content: center;
}
.nav-pills-pt.nav-justified > .nav-item,
.nav-pills-pt > .nav-item { flex: 0 0 auto; }
.nav-justified .nav-item .nav-link { width: auto; }

/*  I sidfoten står etiketten "Kundlista:" bredvid bokstäverna och äter
    ~75 px. På medelstora skärmar är det precis vad som saknas för att de
    29 bokstäverna ska rymmas på en rad. Låt etiketten brytas till egen
    rad först — bokstavsraden är det som ska hållas hel.                  */
.card-footer .panel-footer > .d-flex { flex-wrap: wrap; }
.card-footer .panel-footer > .d-flex > * { min-width: 0; }

@media (max-width: 991.98px) {
  /* Under lg får etiketten en egen rad, så bokstäverna får hela bredden */
  .card-footer .panel-footer > .d-flex > span { flex: 1 0 100%; padding: 0 0 .15rem; }
}
.nav-pills-pt .nav-link:hover {
  background-color: var(--pt-accent-soft);
  border-color: var(--pt-accent);
  color: var(--bs-emphasis-color);
}
.nav-pills-pt .nav-link.active {
  background-color: var(--pt-accent);
  border-color: var(--pt-accent);
  color: var(--pt-accent-contrast);
}


/* =============================================================================
   10. KNAPPAR
   ========================================================================== */
.btn {
  --bs-btn-border-radius: var(--pt-radius-sm);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: .9rem;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn-primary {
  --bs-btn-bg: var(--pt-blue);
  --bs-btn-border-color: var(--pt-blue);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--pt-blue-deep);
  --bs-btn-hover-border-color: var(--pt-blue-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--pt-blue-dark);
  --bs-btn-active-border-color: var(--pt-blue-dark);
  --bs-btn-disabled-bg: var(--pt-blue);
  --bs-btn-disabled-border-color: var(--pt-blue);
}
[data-bs-theme="blue"] .btn-primary {
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-color: var(--pt-blue-dark);
  --bs-btn-hover-bg: var(--pt-amber);
  --bs-btn-hover-border-color: var(--pt-amber);
  --bs-btn-hover-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--pt-accent);
  --bs-btn-border-color: var(--pt-accent);
  --bs-btn-hover-bg: var(--pt-accent);
  --bs-btn-hover-border-color: var(--pt-accent);
  --bs-btn-hover-color: var(--pt-accent-contrast);
}

/* Projekttids egna knappvarianter — neutrala, med gulorange som hover */
.btn-pt-primary,
.btn-outline-pt-primary,
.btn-link-pt,
.btn-seek {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--pt-surface);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pt-amber-deep);
  --bs-btn-hover-border-color: var(--pt-amber-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pt-amber-deep);
  --bs-btn-active-border-color: var(--pt-amber-deep);
  --bs-btn-border-radius: var(--pt-radius-sm);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: .9rem;
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-weight: var(--bs-btn-font-weight);
  line-height: 1.5;
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: var(--bs-btn-bg);
  border: 1px solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-pt-primary:hover,
.btn-outline-pt-primary:hover,
.btn-link-pt:hover,
.btn-seek:hover {
  color: var(--bs-btn-hover-color) !important;
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
[data-bs-theme="dark"] .btn-pt-primary:hover,
[data-bs-theme="dark"] .btn-outline-pt-primary:hover,
[data-bs-theme="dark"] .btn-link-pt:hover,
[data-bs-theme="dark"] .btn-seek:hover,
[data-bs-theme="blue"] .btn-pt-primary:hover,
[data-bs-theme="blue"] .btn-outline-pt-primary:hover,
[data-bs-theme="blue"] .btn-link-pt:hover,
[data-bs-theme="blue"] .btn-seek:hover {
  --bs-btn-hover-bg: var(--pt-amber);
  --bs-btn-hover-border-color: var(--pt-amber);
  color: #17202a !important;
}

/*  Liten knapp. Gamla temat hade .09rem sidopadding för att pressa in
    många knappar på en rad — det behovet finns kvar, så den här är nätt.  */
.btn.btn-xs {
  --bs-btn-padding-y: .05rem;
  --bs-btn-padding-x: .3rem;
  --bs-btn-font-size: .8125rem;
  --bs-btn-border-radius: var(--pt-radius-sm);
  line-height: 1.5;
}
.btn-group-vertical { padding-bottom: 0; }
.btn-group .btn + .btn { margin-left: -1px; margin-top: 0; }


/* =============================================================================
   11. FORMULÄR
   ========================================================================== */
.form-control,
.form-select {
  --bs-border-radius: var(--pt-radius-sm);
  background-color: var(--pt-surface);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  padding: .45rem .7rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--pt-accent);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.form-control::placeholder { color: var(--bs-secondary-color); opacity: 1; }
.form-label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bs-secondary-color);
  margin-bottom: .3rem;
}
.form-check-input:checked {
  background-color: var(--pt-accent);
  border-color: var(--pt-accent);
}
/* I dovblått läge är accenten vit — och Bootstraps bock är också vit.
   Kryssrutan får därför en egen färg där, annars syns ingen bock. */
[data-bs-theme="blue"] .form-check-input:checked {
  background-color: var(--pt-blue-dark);
  border-color: #ffffff;
}
.form-check-input:focus {
  border-color: var(--pt-accent);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.input-group-text {
  background-color: var(--pt-surface-2);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}


/* =============================================================================
   12. TABELLER
   ========================================================================== */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-hover-bg: var(--pt-accent-soft);
  --bs-table-striped-bg: var(--pt-surface-2);
  margin-bottom: 0;
}
.table > thead > tr > th {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--bs-border-color);
  padding: .55rem .5rem;
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: .55rem .5rem;
  vertical-align: middle;
  border-color: var(--bs-border-color);
}
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  font-weight: 700;
  border-top: 2px solid var(--bs-border-color);
  padding: .55rem .5rem;
}
/* Talkolumner högerställs och radas upp */
.table .num,
.table .pt-tal { text-align: right; font-variant-numeric: tabular-nums; }

/* Projekttids täta tabell */
.table-pt {
  width: 100%;
  margin-bottom: 0;
  font-size: .875rem;
}
.table-pt td,
.table-pt th {
  vertical-align: middle;
  padding: .3rem .35rem;
  font-weight: 400;
  border-color: var(--bs-border-color);
}
.card-body .pt-calendar { padding: .15rem; }

/*  KALENDERBRICKAN ---------------------------------------------------------
    Tolv månader, var och en en tabell med veckospann + sju dagar. Fälten
    skrivs med size="1", och det ger tabellen en INNEHÅLLSBREDD på 324 px
    oavsett hur brett kortet är. .table-responsive la därför en vågrät
    rullist i varje månadsbricka, och siffrorna klipptes — "7.5" fick plats
    med sjuan och punkten.

    Fast tabellayout i stället: den första kolumnen får ett mått, de sju
    dagarna delar lika på det som blir över, och fälten följer sin cell.
    Då ryms allt ned till 320 px utan att teckenstorleken behöver ändras.  */
.pt-calendar .table-pt { table-layout: fixed; }
.pt-calendar .table-pt th:first-child,
.pt-calendar .table-pt td:first-child { width: 2.8rem; }
.pt-calendar .table-pt td,
.pt-calendar .table-pt th { padding: .25rem .1rem; }
.pt-calendar .form-control {
  width: 100%;
  min-width: 0;
  padding: .25rem .1rem;
  font-size: .875rem;
}


/* =============================================================================
   13. MODALER
   ========================================================================== */
.modal-content {
  --bs-modal-bg: var(--pt-surface);
  --bs-modal-border-color: var(--bs-border-color);
  --bs-modal-border-radius: var(--pt-radius);
  box-shadow: 0 24px 60px -20px rgba(10, 18, 28, .45);
}
.modal-header,
.modal-footer {
  border-color: var(--bs-border-color);
  color: var(--bs-emphasis-color);
  background-color: var(--pt-surface);
}
.modal-header { border-bottom: 1px solid var(--bs-border-color); }
.modal-footer { border-top: 1px solid var(--bs-border-color); }
.modal-content.pt-help a,
.tab-content .pt-help a { color: var(--bs-link-color); background: transparent; }
.tab-content .pt-help a:hover { color: var(--pt-hover); }
.tab-content .pt-help {
  color: var(--bs-body-color);
  background-color: var(--pt-surface);
}

/*  SVARSRUTAN I AI-FLIKEN

    Rutan hade bg-white hårdkodad i markupen plus en klass text-ai som
    försvann med det gamla temat. Resultatet blev vit botten med temats
    ljusa text ovanpå — alltså nästan osynligt i både dovblått och mörkt.

    Rutan ska läsa som ett svar, inte som ett inmatningsfält: därför den
    näst djupaste ytan och en tunn ram, inte formulärfältens färg.        */
.pt-ai-svar {
  background-color: var(--pt-surface-2);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  line-height: 1.5;
}
/*  Svaret kommer som färdig HTML från boten — rubriker, listor, fetstil.
    Det får inte bära med sig egna marginaler som spränger rutan.          */
.pt-ai-svar > :first-child { margin-top: 0; }
.pt-ai-svar > :last-child  { margin-bottom: 0; }
.pt-ai-svar h1, .pt-ai-svar h2, .pt-ai-svar h3,
.pt-ai-svar h4, .pt-ai-svar h5 {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--bs-emphasis-color);
  margin-top: 1rem;
  margin-bottom: .35rem;
}
.pt-ai-svar ul, .pt-ai-svar ol { margin-bottom: .5rem; padding-left: 1.4rem; }
.pt-ai-svar code {
  background-color: var(--pt-surface);
  color: var(--bs-emphasis-color);
}


/* =============================================================================
   14. STATUSMÄRKEN
   Nytt: låter en rad visa sitt tillstånd utan att man behöver läsa texten.
   ========================================================================== */
.pt-badge {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .15rem .55rem;
  border-radius: 999px;
  background-color: var(--pt-accent-soft);
  color: var(--bs-primary-text-emphasis);
  white-space: nowrap;
}
.pt-badge.varning {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.pt-badge.klar {
  background-color: rgba(var(--bs-success-rgb), .14);
  color: var(--bs-success);
}
.pt-badge.stopp {
  background-color: rgba(var(--bs-danger-rgb), .14);
  color: var(--bs-danger);
}


/* =============================================================================
   15. IKONER (Bootstrap Icons)
   ========================================================================== */
.bi {
  vertical-align: -.125em;
  line-height: 1;
}
.nav-link .bi,
.dropdown-item .bi,
.btn .bi { font-size: 1.05em; }


/* =============================================================================
   16. ÖVRIGT ÖVERTAGET FRÅN GAMLA TEMAT
   ========================================================================== */
.flaggor {
  border: 1px solid transparent;
  border-radius: var(--pt-radius-sm);
  margin: .5rem;
}
.flaggor:hover { border-color: var(--pt-accent); }

.pt-signum {
  color: var(--bs-secondary-color);
  text-align: center;
  font-size: .75rem;
  margin: .75rem 0 1rem;
}
.pt-signum a { color: var(--bs-secondary-color); text-decoration: none; }
.pt-signum a:hover { color: var(--pt-hover); }

/* Datumväljaren (mobiscroll) */
.mbsc-comp {
  color: var(--bs-body-color);
  background-color: var(--pt-surface-2);
}
.mbsc-comp:hover { color: #fff; background-color: var(--pt-amber-deep); }
.mbsc-bootstrap .mbsc-sc-lbl { color: var(--bs-body-color); }

/* Behåll bredden från gamla .container-pt */
#container-pt,
.container-pt,
.container-pt-sm,
.container-pt-md,
.container-pt-lg,
.container-pt-xl {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--bs-gutter-x, .75rem);
}

/* OBS: de gamla .mt-n1 … .mb-n5 behövs inte längre —
   Bootstrap 5 har egna negativa marginaler inbyggda. */


/* =============================================================================
   17. DOVBLÅTT LÄGE ÄRVER BOOTSTRAPS MÖRKA KOMPONENTJUSTERINGAR

   Bootstrap har ett antal regler som bara gäller [data-bs-theme="dark"]. De
   byter ut svarta SVG-ikoner mot vita: pilen i rullgardinsmenyer, hamburgaren
   i mobilmenyn, kryssknappen i dialoger, dragreglaget och dragspelspilen.

   Vårt blå läge är ett eget tema och får inget av det automatiskt - därför
   såg ikonerna mörka ut mot den blå bottnen. Här speglas reglerna.

   Vid framtida Bootstrap-uppgradering: kontrollera om det tillkommit fler
   [data-bs-theme=dark]-regler och lägg i så fall till dem här också.
   ========================================================================== */
[data-bs-theme="blue"] {
  --bs-emphasis-color-rgb:        255, 255, 255;
  --bs-btn-close-filter:          invert(1) grayscale(100%) brightness(200%);
  --bs-highlight-color:           #ffffff;
  --bs-highlight-bg:              #4b6f2a;
  --bs-form-valid-color:          #8fdcb6;
  --bs-form-valid-border-color:   #8fdcb6;
  --bs-form-invalid-color:        #f0918a;
  --bs-form-invalid-border-color: #f0918a;
}

/*  Stegaren i <input type="number">.

    color-scheme: dark ger webbläsaren rätt färger på allt den ritar själv,
    och det är rätt i mörkt läge. Men Firefox ritar då upp/ned-pilarna som
    en nästan svart platta (#212529), och den ser ut som ett hål i den dova
    blåa. Just de fälten får därför ljus kromning — samma stegare som i
    ljust läge, som fungerar bra. Fältets egen bakgrund och textfärg sätts
    av temat och påverkas inte.

    Datumfält lämnas med mörk kromning: där ger den en vit kalenderikon,
    vilket är precis vad man vill ha mot blått.                          */
[data-bs-theme="blue"] input[type="number"] {
  color-scheme: light;
}

/*  Rullgardinen i ett <select> ritas inte av sidan utan av systemet. På
    macOS är det AppKits egen meny, och den lyssnar varken på background-color
    på <option> eller på något annat vi skriver — bara på color-scheme.

    Dovblått kör color-scheme: dark, eftersom allt annat på sidan behöver det.
    Menyn blev därför nästan svart mot det blå, och den markerade raden fick
    systemets skarpa accentblå.

    Samma sak som med sifferrutans stegare i avsnitt 17 och PDF-läsarens
    verktygsrad i avsnitt 20: just det elementet får ljus kromning i stället.
    Menyn blir då den ljusa systemmenyn — samma som i ljust och mörkt läge —
    vilket ligger närmare sidans egen ljushet än den svarta gjorde.

    Att i stället färga <option> blått fungerar i Chrome och Firefox men inte
    i Safari, och en meny som ser olika ut i olika webbläsare är sämre än en
    som ser likadan ut överallt.                                             */
[data-bs-theme="blue"] select {
  color-scheme: light;
}

[data-bs-theme="blue"] .form-select {
  --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="blue"] .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}

/*  Påslaget reglage i dovblått.

    Kryssrutan ovan får mörk botten i blått läge, eftersom Bootstraps bock
    är vit och behöver något att synas mot. Ett reglage har ingen bock —
    där blir samma mörka botten istället förvillande, den ser avstängd ut.

    Reglaget får därför motsatt behandling: ljus bana, mörk knopp. Det är
    också det enda stället där accentfärgen i blått läge (vit) används som
    yta, och skillnaden mot avslaget blir omöjlig att missa.               */
[data-bs-theme="blue"] .form-switch .form-check-input:checked {
  background-color: #ffffff;
  border-color: #ffffff;
  --bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231f4f78'/%3e%3c/svg%3e");
}

[data-bs-theme="blue"] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="blue"] .accordion-button::after {
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}


/* =============================================================================
   18. MENYNS FÄRGER — EXPLICIT PER LÄGE

   Avsnitt 6 sätter menyns färg via variabler. Det räcker i teorin, men
   huvudmenyn är det man ser först och den ska aldrig kunna bli fel. Här
   sägs färgerna rakt ut, med lägets väljare framför.

   VIKTIGT om ordningen nedan: reglerna för ljust läge använder
   :root:not([data-bs-theme]) - inte bara :root. Skälet är konkret. En bar
   :root träffar <html> även när den har data-bs-theme="blue", och eftersom
   :root och [data-bs-theme="blue"] har exakt samma specificitet vinner den
   som står sist i filen. Ljusa reglerna stod sist och målade därför den
   aktiva menyplattan ljus även i mörka lägen. Med :not() går de bara igång
   när inget läge alls är satt.
   ========================================================================== */

/* --- Dovblått --- */
[data-bs-theme="blue"] .navbar,
[data-bs-theme="blue"] .navbar .navbar-brand,
[data-bs-theme="blue"] .navbar-nav .nav-link,
[data-bs-theme="blue"] .navbar-nav .nav-link .bi,
[data-bs-theme="blue"] .navbar-toggler {
  color: #ffffff;
}
[data-bs-theme="blue"] .navbar-nav .nav-link.active,
[data-bs-theme="blue"] .navbar-nav .nav-link.show {
  color: #ffffff;
  background-color: #35709f;
}
[data-bs-theme="blue"] .navbar-nav .nav-link:hover,
[data-bs-theme="blue"] .navbar-nav .nav-link:focus {
  color: #e7a62e;
  background-color: #35709f;
}

/* --- Mörkt --- */
[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .navbar .navbar-brand,
[data-bs-theme="dark"] .navbar-nav .nav-link,
[data-bs-theme="dark"] .navbar-nav .nav-link .bi,
[data-bs-theme="dark"] .navbar-toggler {
  color: #f4f7fa;
}
[data-bs-theme="dark"] .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .navbar-nav .nav-link.show {
  color: #f4f7fa;
  background-color: #263243;
}
[data-bs-theme="dark"] .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .navbar-nav .nav-link:focus {
  color: #e7a62e;
  background-color: #263243;
}

/* --- Ljust, samt när inget läge är satt --- */
[data-bs-theme="light"] .navbar,
[data-bs-theme="light"] .navbar .navbar-brand,
[data-bs-theme="light"] .navbar-nav .nav-link,
[data-bs-theme="light"] .navbar-nav .nav-link .bi,
[data-bs-theme="light"] .navbar-toggler,
:root:not([data-bs-theme]) .navbar,
:root:not([data-bs-theme]) .navbar .navbar-brand,
:root:not([data-bs-theme]) .navbar-nav .nav-link {
  color: #0d1218;
}
[data-bs-theme="light"] .navbar-nav .nav-link.active,
[data-bs-theme="light"] .navbar-nav .nav-link.show,
:root:not([data-bs-theme]) .navbar-nav .nav-link.active {
  color: #0d1218;
  background-color: #eaf2f9;
}
[data-bs-theme="light"] .navbar-nav .nav-link:hover,
[data-bs-theme="light"] .navbar-nav .nav-link:focus,
:root:not([data-bs-theme]) .navbar-nav .nav-link:hover {
  color: #1f4f78;
  background-color: #eaf2f9;
}


/* =============================================================================
   19. INLOGGNINGSSIDAN

   loggin.php är det första en besökare ser, och ofta det enda en ny kund
   ser innan de bestämmer sig. Sidan hade en egen CSS-fil som numera är tom,
   så kortet stod helt onaket — klassen pt-clean är ju med flit ram- och
   skugglös, vilket är rätt inne i appen men fel som ensamt kort på en
   tom sida.

   Här får det tillbaka ram, radie och en tydlig skugga, så att det lyfter
   från bakgrunden. Reglerna är scopade till .form-signin och påverkar
   alltså ingenting annat i appen.
   ========================================================================== */
.form-signin {
  width: 100%;
  padding-block: 1rem 2.5rem;
}

.form-signin .card,
.form-signin .card.pt-clean {
  background-color: var(--pt-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--pt-radius);
  box-shadow: 0 2px 6px rgba(8, 20, 32, .12),
              0 18px 48px -20px rgba(8, 20, 32, .45);
  overflow: hidden;
}

.form-signin .card-header,
.form-signin .card-header.pt-clean {
  background-color: var(--pt-surface-2);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 1.6rem 1.25rem 1.35rem;
}
.form-signin .card-header img {
  max-width: 200px;
  height: auto;
}

.form-signin .card-body {
  padding-top: .5rem;
  padding-bottom: 1.25rem;
}
.form-signin h1 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bs-emphasis-color);
}

/*  Inmatningsfälten får mer höjd än appens övriga — det är två fält på
    hela sidan, och de tål att ta plats.                                  */
.form-signin .form-control {
  padding: .65rem .85rem;
  font-size: 1rem;
}

/*  Bara inloggningsknappen växer — länkknapparna under (glömt lösenord,
    registrera dig) ska fortsätta se ut som länkar.

    Inne i appen är .btn-pt-primary med flit diskret: samma yta som kortet
    plus en ram. Här är den sidans enda ärende, och då ska den synas. Den
    vänds därför ut och in — textfärgen blir yta, ytan blir textfärg —
    vilket ger stark kontrast i alla tre teman utan en enda ny färg.
    Hovringen är gemensam med resten av appen och sköter sig själv.       */
.form-signin .btn-pt-primary {
  padding: .6rem 1rem;
  font-size: 1rem;
  color: var(--bs-body-bg);
  background-color: var(--bs-emphasis-color);
  border-color: var(--bs-emphasis-color);
}

/*  I ljust läge blir "vänd ut och in" nästan svart, och det känns inte
    som Projekttid. Där får knappen istället den dova blåa i sin mörka
    nyans — samma färg som ljusa temats hovring.                          */
[data-bs-theme="light"] .form-signin .btn-pt-primary,
:root:not([data-bs-theme]) .form-signin .btn-pt-primary {
  color: #ffffff;
  background-color: var(--pt-blue-dark);
  border-color: var(--pt-blue-dark);
}

/* Språkflaggorna */
.form-signin .flaggor {
  margin: .35rem;
  border-radius: 3px;
}

/* Småtexten under formuläret */
.form-signin .text-muted,
.form-signin .text-pt-ljus,
.form-signin .pt-signum {
  color: var(--bs-secondary-color) !important;
}


/* =============================================================================
   20. INBÄDDAD PDF

   Fakturorna visas med <object type="application/pdf"> inuti en dialog.
   Innehållet där ritas av webbläsarens egen PDF-läsare — pdf.js i Firefox,
   motsvarande i Chrome — och den går inte att styla utifrån. Men den läser
   den color-scheme som sidan skickar med in i det inbäddade dokumentet, och
   där kan vi bestämma.

   I ljust läge blir verktygsraden ljus och i mörkt blir den mörk — båda
   rätt. Dovblått har color-scheme: dark (allt annat behöver det), och då
   kom en nästan svart verktygsrad rakt ovanpå det blåa. Samma problem som
   sifferrutans stegare i avsnitt 17.

   Därför: blått läge skickar in ljus kromning till PDF-läsaren. Den ljusa
   verktygsraden ligger nära pappret i dokumentet och bryter mindre mot den
   blåa dialogen än den svarta gjorde.
   ========================================================================== */
[data-bs-theme="blue"] object[type="application/pdf"],
[data-bs-theme="blue"] embed[type="application/pdf"] {
  color-scheme: light;
}

/*  Själva rutan får samma rundning som resten av gränssnittet, och en
    bakgrund så att det inte blinkar till i fel färg medan PDF:en laddas.  */
object[type="application/pdf"],
embed[type="application/pdf"] {
  border-radius: var(--pt-radius-sm);
  background-color: #ffffff;
}

/* =============================================================================
   21. SMAL SKÄRM — luften inuti korten

   Avståndet från skärmkanten till kortet är oförändrat: 12 px, där ser
   kortet ut att ligga på sidan som det ska. Det är luften INNE i kortet som
   äter bredd på en mobil — och den räknas två gånger när ett kort ligger
   inuti ett annat, vilket flera sidor har.

   Kortkroppens sidopadding halveras därför på smal skärm, från 1,15 rem till
   0,575 rem. Samma regel träffar alla kortkroppar, hur djupt de än ligger, så
   ett kort i ett kort i ett kort vinner tre gånger.

   Jumbotronen räknas som en kortnivå den också — den har egen yta, ram och
   skugga — och halveras på samma sätt.

   Den inre containern i kortkroppen nollas tillsammans med sina rader — se
   kommentaren vid regeln. Container och rad måste alltid röras i par, annars
   sticker raderna utanför kortet.

   Avståndet mellan kolumnerna (g-2, g-3 ...) är orört. Det är markupens eget
   val, och på en mobil ligger kolumnerna oftast ändå på var sin rad.

   Utilities i markupen vinner över det här, med flit. De kortkroppar som är
   finjusterade för hand bär ps-2/pe-2, alltså 8 px — redan snävare än vad
   regeln här ger, så de behöver ingen hjälp.
   ========================================================================== */
@media (max-width: 575.98px) {
  .card-body { --bs-card-spacer-x: .575rem; }

  /*  Jumbotronen (avsnitt 7) är i praktiken ytterligare en kortnivå — den
      har egen yta, egen ram och egen skugga — och den bär 2 rem sidopadding.
      På sidor som invoicefrombasis ligger den inuti kortkroppen, så måttet
      läggs ovanpå allt annat. Halveras på samma sätt som kortkroppen.
      Höjdleds lämnas orörd: där är luften inte i vägen.                     */
  .jumbotron, .pt-jumbo { padding-left: 1rem; padding-right: 1rem; }

  /*  Den inre containern i kortkroppen lägger på 12 px till. Meningen är att
      radens negativa marginal ska ta ut dem igen — och det gör den, men bara
      när raden har standardrännan. En rad med g-2 drar tillbaka 4 px av 12,
      och de 8 som blir över är ren förlorad bredd. Det syns mest i nästlade
      kort, där hela kedjan räknas två gånger.

      Här nollas paret i stället, container och rad tillsammans, så att
      uträkningen fortfarande går ihop. Kolumnernas egen padding är kvar och
      räcker gott som luft. Bara direkta barn: djupare rader rör vi inte.   */
  .card-body > .container,
  .card-body > .container-fluid { padding-left: 0; padding-right: 0; }

  .card-body > .container > .row,
  .card-body > .container-fluid > .row { margin-left: 0; margin-right: 0; }
}


/* =============================================================================
   22. LISTRADER PÅ SMAL SKÄRM — monitor.php, users.php

   En listrad har många kolumner. På en mobil föll de isär till fyra eller
   fem centrerade rader — ikonerna överst, namnet under, uppgifterna på en
   rad och soptunnan ensam underst. Mycket luft, ingen kant att läsa längs.

   Här kastas de om med flex order i stället, utan att markupen byggs om:

       rad 1:   titeln (kapas med ...)                       [⋮]
       rad 2:   uppgift · uppgift                     höger-uppgift

   Kolumnerna märks med vad de ÄR i raden, inte vad de innehåller:
   .pt-titel, .pt-under, .pt-undan, .pt-handlingar, .pt-soptunna. Då bär
   samma regler båda sidorna, och en tredje lista om det behövs. Lägg till
   .pt-stark på den kolumn som ska vara halvfet.

   Gränsen går vid md (768 px), inte sm. Bootstraps .container låser sig
   till 540 px mellan 576 och 767, så en listrad har inte mer plats där än
   på en telefon — den ser bara ut att ha det. Tvåradsläget gäller därför
   hela vägen upp till 768.

   Markupen måste följa med: de utility-klasser som hör ihop med de här
   reglerna heter d-md-none / d-none d-md-block i sidorna, inte d-sm-*.

   Handlingarna flyttas INTE. Ikonkolumnen ligger i en .dropdown-menu som
   från sm och uppåt tvingas tillbaka till en vanlig rad ikoner — det ser ut
   precis som förut på skrivbordet. Under 576 px är den en riktig meny, och
   etiketterna hämtas ur länkarnas egna title-attribut. De finns redan där,
   och de är redan översatta.
   ========================================================================== */

/*  Från sm och uppåt: ingen meny, bara ikoner på rad som tidigare.         */
.pt-handlingar-lista {
  display: flex; position: static; inset: auto; transform: none;
  min-width: 0; margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none;
}
.pt-handlingar-knapp { display: none; }

@media (max-width: 767.98px) {

  /* --- Knappen med de tre prickarna ------------------------------------- */
  .pt-handlingar-knapp {
    display: inline-flex; align-items: center;
    border: 0; background: none; line-height: 1;
    padding: .1rem .35rem; color: var(--bs-body-color);
  }
  .pt-handlingar-knapp .bi { font-size: 1.3rem; }

  /* --- ...och ikonraden blir en meny ------------------------------------ */
  .pt-handlingar-lista {
    display: none; position: absolute; min-width: 13.5rem;
    padding: .35rem 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-surface);
    box-shadow: var(--pt-shadow);
  }
  .pt-handlingar-lista.show { display: block; }

  .pt-handlingar-lista a,
  .pt-handlingar-lista > i {
    display: flex !important; align-items: center;
    padding: .55rem .9rem; white-space: nowrap;
  }
  /*  Etiketten står redan i markupen, som title på länken.                 */
  .pt-handlingar-lista a::after,
  .pt-handlingar-lista i[title]::after {
    content: attr(title); margin-left: .6rem; font-size: .95rem;
  }
  .pt-handlingar-lista .bi {
    margin: 0 !important; padding: 0 !important;
    width: 1.3rem; text-align: center; font-size: 1.05rem;
  }
  .pt-handlingar-lista a:hover { background: var(--pt-accent-soft); }
  .pt-skiljare { height: 1px; margin: .3rem 0; background: var(--bs-border-color); }

  /* --- Radens omkastning ------------------------------------------------- */
  .pt-listrad { align-items: center; row-gap: .1rem; }
  .pt-listrad > * { width: auto; flex: 0 0 auto; }

  /*  flex-basis 0, inte auto. En radbrytande flexbox placerar först ut sina
      objekt efter INNEHÅLLETS bredd och krymper dem sedan — ett långt
      kundnamn med basis auto får därför en egen rad i stället för att kapas.
      Med basis 0 delar namnet och knappen samma rad, och namnet tar det som
      blir över.                                                            */
  .pt-listrad > .pt-titel {
    order: 1; flex: 1 1 0; min-width: 0; overflow: hidden;
    justify-content: flex-start !important;
  }
  .pt-listrad > .pt-titel small { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .pt-listrad > .pt-titel a {
    display: block; min-width: 0; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pt-listrad > .pt-handlingar { order: 2; justify-content: flex-end !important; }

  .pt-listrad::before { content: ""; order: 3; flex-basis: 100%; height: 0; }

  .pt-listrad > .pt-under  { order: 4; justify-content: flex-start !important; }
  .pt-listrad > .pt-under + .pt-under { padding-left: .4rem; }
  .pt-listrad > .pt-undan  { order: 6; flex: 1 1 auto;
                             justify-content: flex-end !important; }

  /*  Halvfet är inte en egenskap hos "sist på raden" utan hos det som ska
      sticka ut — ett belopp gör det, ett telefonnummer inte. Därför en egen
      liten klass i stället för fetstil på .pt-undan.                        */
  .pt-listrad > .pt-stark  { font-weight: 600; }

  /*  Soptunnan finns i menyn på mobil, så kolumnen behövs inte.            */
  .pt-listrad > .pt-soptunna { display: none !important; }
}


/* =============================================================================
   23. KOMPAKT LÄGE — timesheet.php och timeexpences.php

   De två sidorna är appens arbetshästar: de öppnas flera gånger om dagen och
   man vill se allt på en gång — fälten att fylla i OCH dagens sammanställning
   under. Med normal luft hamnar Spara-knappen utanför skärmen på en mobil,
   och man måste scrolla för att se vad man redan rapporterat.

   Klassen sätts på <body> i just de två sidorna:

       <body class="topp pt-kompakt">

   Ingen annan sida påverkas, och tas klassen bort är man tillbaka i normalt
   läge. Reglerna rör bara luft — inga färger, inga storlekar på text som
   behöver kunna läsas.
   ========================================================================== */

/* --- Radernas lodräta mellanrum -------------------------------------------
   Bootstraps g-3/g-4 ger 1 rem respektive 1,5 rem vertikal ränna till VARJE
   kolumn i raden. Med etikett och fält på var sin rad blir det dubbelt upp
   per fält. Här räcker en tredjedel — vågrätt lämnas orört, annars kryper
   kolumnerna ihop.                                                          */
.pt-kompakt .row.g-2 { --bs-gutter-y: .25rem; }
.pt-kompakt .row.g-3 { --bs-gutter-y: .35rem; }
.pt-kompakt .row.g-4 { --bs-gutter-y: .35rem; }

/* --- Tomma utfyllnadskolumner ---------------------------------------------
   Markupen har gott om <div class="col-12 ..."></div> som bara finns för att
   fylla ut ett tolvspaltsrutnät eller skapa mellanrum. De är tomma men tar
   ändå rännans höjd, och på mobil lägger de dessutom beslag på en hel rad.
   Bara inne i formuläret: i listan under finns tomma col-1 som håller plats
   åt ikonkolumnerna, och de måste vara kvar för att rubrikerna ska stå rakt
   över sina värden.                                                         */
.pt-kompakt form [class*="col"]:empty { margin-top: 0; }
@media (max-width: 575.98px) {
  .pt-kompakt form [class*="col"]:empty { display: none; }
}

/* --- Etiketterna ----------------------------------------------------------
   col-form-label är gjord för att stå bredvid fältet och ha samma höjd som
   det. Här står den ofta ovanför, och då är den inbyggda höjden ren luft.   */
.pt-kompakt .col-form-label {
  padding-top: .1rem;
  padding-bottom: .1rem;
  line-height: 1.3;
}

/* --- Fälten ---------------------------------------------------------------
   Knappt två millimeter mindre höjd per fält. Träffytan är fortfarande
   drygt 34 px, alltså över gränsen för vad som går att träffa med tummen.  */
.pt-kompakt .form-control,
.pt-kompakt .form-select {
  padding-top: .3rem;
  padding-bottom: .3rem;
}
.pt-kompakt textarea.form-control { line-height: 1.35; }

/* --- Utfyllnad som markupen lägger på ------------------------------------- */
.pt-kompakt form .mt-3 { margin-top: .5rem !important; }
.pt-kompakt .form-check.form-switch { margin-top: .15rem !important; }

/* --- Knappraden -----------------------------------------------------------
   Spara och Avbryt hade 1 rem över sig, plus kortets egen botten. */
.pt-kompakt .btn.mt-3 { margin-top: .45rem !important; }

/* --- Korten ---------------------------------------------------------------
   Kortkroppen behåller sin sidopadding — den ger andrum i sidled — men
   tappar en del av toppen och botten.                                      */
.pt-kompakt .card-body { padding-top: .55rem; padding-bottom: .55rem; }
.pt-kompakt .card-header { padding-top: .5rem; padding-bottom: .5rem; }

/* --- Dagens sammanställning ----------------------------------------------- */
.pt-kompakt .card.mt-3 { margin-top: .6rem !important; }
.pt-kompakt .card.mb-3 { margin-bottom: .6rem !important; }
.pt-kompakt .card-header .row.pb-3 { padding-bottom: .15rem !important; }
.pt-kompakt .card-body.pt-tid .row { margin-top: .1rem !important; margin-bottom: .1rem !important; }
.pt-kompakt .pt-line { line-height: 1.25; margin-bottom: 0; }
.pt-kompakt .card-footer-low { padding-top: .4rem; padding-bottom: .4rem; }

/* --- Sidans egen topp -----------------------------------------------------
   Menyn har 1,5 rem under sig på vanliga sidor. Här räcker en tredjedel.   */
.pt-kompakt .navbar { margin-bottom: .5rem; }