@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å : dovblått (STANDARD — originalfärgen från 1999) ljust 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

 ä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;
}

/*  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; }

/*  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; }
.pt-calendar .form-control {
  padding: .25rem .35rem;
  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 .

    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;
}

[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  ä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