html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Breite Fenster: der Inhalt darf mitwachsen --------------------------------
   Bootstrap deckelt .container hart bei 1140 px (ab 1200 px Fenster) und bei
   1320 px (ab 1400 px). Auf grossen Monitoren blieb links und rechts viel Rand
   ungenutzt, waehrend die Geraeteliste ihre Spalten zusammenquetschte.
   clamp() haelt Bootstraps Breite als Untergrenze - schmaler wird es also nie -,
   laesst den Container mit dem Fenster mitwachsen solange 5rem Rand bleiben, und
   deckelt bei 1518 px: 15 % mehr als Bootstraps breiteste Stufe.
-------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container {
    max-width: clamp(1140px, calc(100vw - 5rem), 1518px);
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--gemelo-orange);
}

/* ---- gemelo Firmenfarben ---------------------------------------------------
   grau   #444f50  (Hintergründe / Chrome)
   orange #ee7203  (Primärfarbe: Buttons, Akzente)
   rot    #b61f29
--------------------------------------------------------------------------- */
:root {
  --gemelo-grey: #444f50;
  --gemelo-orange: #ee7203;
  --gemelo-red: #b61f29;

  /* Bootstrap-Primärfarbe auf gemelo-Orange umstellen */
  --bs-primary: var(--gemelo-orange);
  --bs-primary-rgb: 238, 114, 3;

  /* Links in einem dunkleren Orange (bessere Lesbarkeit auf Weiß) */
  --bs-link-color-rgb: 201, 95, 3;
  --bs-link-hover-color-rgb: 166, 79, 2;
}

/* Primär-Buttons in gemelo-Orange (Bootstrap nutzt eigene --bs-btn-* Variablen) */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--gemelo-orange);
  --bs-btn-border-color: var(--gemelo-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d56603;
  --bs-btn-hover-border-color: #c95f03;
  --bs-btn-focus-shadow-rgb: 238, 114, 3;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c95f03;
  --bs-btn-active-border-color: #bd5a02;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--gemelo-orange);
  --bs-btn-disabled-border-color: var(--gemelo-orange);
}

/* Marken-Hintergründe / -Akzente als Utility-Klassen */
.bg-gemelo-grey { background-color: var(--gemelo-grey) !important; }
.bg-gemelo-orange { background-color: var(--gemelo-orange) !important; }
.text-gemelo-orange { color: var(--gemelo-orange) !important; }

/* Logo im Navbar-Brand */
.navbar-brand img {
  height: 34px;
  width: auto;
  border-radius: 6px;
}

/* Konto-Avatar oben rechts: runder Kreis mit Initialen, darüber – falls vorhanden –
   das Profilfoto aus Microsoft Graph. Schlägt /me/photo fehl, entfernt onerror das <img>
   und die Initialen bleiben sichtbar. */
.account-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--gemelo-orange);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
}

.account-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* --- Sortierbare Tabellen (wwwroot/js/table-sort.js) --------------------------------------- */
/* Der Pfeil steht in einem Platzhalter fester Breite, damit die Spalte beim Sortieren nicht
   springt; ohne Sortierung ist er nur angedeutet und wird beim Ueberfahren deutlicher. */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sortable::after {
  content: "\2195"; /* Pfeil hoch/runter */
  display: inline-block;
  width: 1em;
  margin-left: .25rem;
  text-align: center;
  opacity: .25;
  font-weight: 400;
}

th.sortable:hover::after,
th.sortable:focus-visible::after {
  opacity: .6;
}

th.sortable[aria-sort="ascending"]::after {
  content: "\2191";
  opacity: 1;
}

th.sortable[aria-sort="descending"]::after {
  content: "\2193";
  opacity: 1;
}

/* Lange URLs in Listen: Zelle gedeckelt, Rest als Ellipse - der volle Wert steht im Tooltip. */
.url-cell {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Geraete-Statistik (Pages/Devices/Index) ------------------------------------------------ */
/* Lange Verteilungen (Modelle, Patch-Staende) scrollen INNERHALB ihrer Karte, statt die Seite zu
   strecken - gekuerzt wird nicht, eine abgeschnittene Verteilung waere schlicht falsch. */
.stats-scroll {
  max-height: 16rem;
  overflow-y: auto;
}

.stats-bar {
  background-color: var(--bs-secondary-bg, #e9ecef);
  border-radius: .2rem;
  height: .5rem;
  overflow: hidden;
}

.stats-bar-fill {
  background-color: var(--gemelo-orange);
  height: 100%;
  min-width: 2px; /* damit ein einzelnes Geraet in grosser Flotte nicht voellig verschwindet */
}

.stats-bar-fill.is-unknown {
  background-color: var(--bs-secondary-color, #6c757d);
}