html {
  font-size: 14px;
}

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

/* Claude-inspired warm neutral palette (not Anthropic's actual brand assets -
   just a similar aesthetic: terracotta accent, cream light mode, slate dark
   mode). Light is the default; :root[data-theme="dark"] is the explicit
   override set by the toggle in _Layout.cshtml, and the prefers-color-scheme
   block below covers visitors who never touched the toggle. */
:root {
  --help-bg: #faf9f5;
  --help-surface: #ffffff;
  --help-surface-muted: #f0eee6;
  --help-border: #e5e2d9;
  --help-text: #2d2a26;
  --help-text-muted: #6b6559;
  --help-accent: #c15f3c;
  --help-accent-hover: #a84f30;
  --help-accent-contrast: #ffffff;
  --help-online: #4a7c59;
  --help-offline: #9c9284;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --help-bg: #1f1e1c;
  --help-surface: #2a2926;
  --help-surface-muted: #353330;
  --help-border: #45423c;
  --help-text: #ede9e0;
  --help-text-muted: #a8a194;
  --help-accent: #d97a56;
  --help-accent-hover: #e8885f;
  --help-accent-contrast: #1f1e1c;
  --help-online: #6fa87e;
  --help-offline: #7a7468;

  /* Bootstrap's own text/secondary colors are fixed, light-mode values
     (see bootstrap.css :root) - this app uses its own data-theme attribute
     instead of Bootstrap's data-bs-theme, so Bootstrap's built-in dark
     variants never kick in. Without this, .text-muted and friends render
     near-black text on these dark surfaces. */
  --bs-body-color: var(--help-text);
  --bs-secondary-color: var(--help-text-muted);
  --bs-border-color: var(--help-border);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --help-bg: #1f1e1c;
    --help-surface: #2a2926;
    --help-surface-muted: #353330;
    --help-border: #45423c;
    --help-text: #ede9e0;
    --help-text-muted: #a8a194;
    --help-accent: #d97a56;
    --help-accent-hover: #e8885f;
    --help-accent-contrast: #1f1e1c;
    --help-online: #6fa87e;
    --help-offline: #7a7468;

    --bs-body-color: var(--help-text);
    --bs-secondary-color: var(--help-text-muted);
    --bs-border-color: var(--help-border);

    color-scheme: dark;
  }

  :root:not([data-theme="light"]) .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
}

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

body {
  background-color: var(--help-bg);
  color: var(--help-text);
}

a {
  color: var(--help-accent);
}

a:hover {
  color: var(--help-accent-hover);
}

/* Collapsible left sidebar (replaces the old top navbar) - same idea as
   Getscreen.me's menu: full labels by default, collapses to an icon-only
   rail via the toggle button, state remembered in localStorage (see
   _Layout.cshtml's pre-paint script, same pattern as the theme toggle). */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 4rem;
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background-color: var(--help-surface);
  border-right: 1px solid var(--help-border);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: width 0.15s ease, flex-basis 0.15s ease;
  /* Stays put while .app-main's content scrolls - sticky (not fixed) so
     it still naturally participates in the app-shell flex row instead of
     needing a matching margin-left on .app-main to compensate. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}

html.sidebar-collapsed .sidebar {
  width: var(--sidebar-width-collapsed);
  flex-basis: var(--sidebar-width-collapsed);
}

html.sidebar-collapsed .sidebar-label {
  display: none;
}

html.sidebar-collapsed .sidebar-link,
html.sidebar-collapsed .sidebar-brand {
  justify-content: center;
}

html.sidebar-collapsed .sidebar-top {
  justify-content: center;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--help-border);
  min-height: 3.5rem;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--help-text) !important;
  text-decoration: none !important;
  font-weight: 700;
  overflow: hidden;
  min-width: 0;
}

.sidebar-brand-badge {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--help-accent);
  color: var(--help-accent-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.sidebar-collapse-icon {
  transition: transform 0.15s ease;
}

html.sidebar-collapsed .sidebar-collapse-icon {
  transform: rotate(180deg);
}

/* Login/Logout + the collapse toggle share one row when expanded (login/logout takes
   the space, collapse sits as a trailing icon at the edge) instead of each eating a
   full row - collapsed, they go back to stacking as separate icon-only rows like
   every other sidebar item. */
.sidebar-last-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* space-between instead of flex-growing the login/logout link - growing it left
     the name hugging the left edge of its own now-oversized box with a dead gap
     before the icon, which read as lopsided rather than two balanced, intentionally
     spaced items. */
  justify-content: space-between;
  gap: 2px;
}

.sidebar-last-row > .sidebar-link:first-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.sidebar-last-row > .sidebar-link:first-child .sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-last-row .sidebar-collapse-btn {
  flex: 0 0 auto;
  width: auto;
  padding: 0.55rem;
}

.sidebar-last-row .sidebar-collapse-btn .sidebar-label {
  display: none;
}

html.sidebar-collapsed .sidebar-last-row {
  flex-direction: column;
}

html.sidebar-collapsed .sidebar-last-row > .sidebar-link:first-child,
html.sidebar-collapsed .sidebar-last-row .sidebar-collapse-btn {
  width: 100%;
}

/* DOM order is login/logout-then-collapse (correct for the expanded row, no CSS
   order needed there) - collapsed and stacked, the toggle comes first and
   login/logout second, so it's flipped visually just for that state instead of
   reordering the markup. */
html.sidebar-collapsed .sidebar-last-row .sidebar-collapse-btn {
  order: -1;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.5rem;
  gap: 0.15rem;
}

.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.5rem;
  border-top: 1px solid var(--help-border);
  /* .sidebar-bottom is last now - flex: 1 1 auto here (not on .sidebar-nav above)
     absorbs any leftover space without pushing anything else down, and keeps it
     scrollable on its own if it ever gets too tall for a short viewport. */
  flex: 1 1 auto;
  overflow-y: auto;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.5rem;
  color: var(--help-text) !important;
  text-decoration: none !important;
  font-size: 0.92rem;
  white-space: nowrap;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.sidebar-link svg {
  flex: 0 0 auto;
}

/* 20px icon column, centered - the inline SVGs here are already a consistent 20x20,
   but .language-flag is narrower/a different aspect ratio (forcing it to a 20px
   square would distort it, so it's centered in this slot around it instead - see
   _LanguagePickerPartial.cshtml - rather than resized itself). */
.sidebar-icon-slot {
  flex: 0 0 auto;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-link:hover {
  background: var(--help-surface-muted);
  color: var(--help-accent) !important;
}

.sidebar-link.active {
  background: var(--help-surface-muted);
  color: var(--help-accent) !important;
  font-weight: 600;
}

.sidebar-avatar {
  margin-right: 0;
  flex: 0 0 auto;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-main > main {
  flex: 1 1 auto;
  padding: 1.5rem;
}

@media (max-width: 575.98px) {
  .app-main > main {
    padding: 1rem;
  }

  /* On phones, an expanded sidebar overlays content instead of squeezing
     it into an unusably narrow column - the default state (see the
     pre-paint script) is collapsed on first visit anyway. */
  html:not(.sidebar-collapsed) .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    box-shadow: 0.5rem 0 1.5rem rgba(0, 0, 0, 0.25);
  }
}

.language-picker {
  position: relative;
}

.language-picker .language-picker-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.5rem;
  border: none;
  background: none;
  color: var(--help-text);
  cursor: pointer;
  font-size: 0.92rem;
  width: 100%;
  text-align: left;
}

.language-picker .language-picker-trigger:hover {
  background: var(--help-surface-muted);
  color: var(--help-accent);
}

html.sidebar-collapsed .language-picker-trigger {
  justify-content: center;
}

.language-dialog-overlay[hidden] {
  display: none;
}

.language-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
}

.language-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 24rem;
  max-height: min(28rem, 80vh);
  border-radius: 0.75rem;
  border: 1px solid var(--help-border);
  background: var(--help-surface);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.language-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--help-border);
}

.language-dialog-title {
  font-weight: 600;
  color: var(--help-text);
}

.language-dialog-close {
  border: none;
  background: none;
  color: var(--help-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
}

.language-dialog-close:hover {
  background: var(--help-surface-muted);
  color: var(--help-accent);
}

.language-dialog-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem;
  overflow-y: auto;
}

.language-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--help-text) !important;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none !important;
  white-space: nowrap;
}

.language-dropdown-item:hover {
  background: var(--help-surface-muted);
}

.language-flag {
  flex: 0 0 auto;
  width: 1.4em;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Matches the other sidebar rows' 20px icon column (see .sidebar-icon-slot) - was
     2rem/32px, which pushed "Abmelden"'s label out of line with every other row's
     label column. */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--help-accent);
  color: var(--help-accent-contrast);
  font-size: 0.6rem;
  font-weight: 700;
}

/* Sizing/layout for this button now comes from .sidebar-link - only the
   sun/moon icon show-hide logic lives here. */
.theme-toggle .theme-icon-dark,
:root[data-theme="dark"] .theme-toggle .theme-icon-light {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-icon-dark {
  display: inline;
}

.btn-primary {
  background-color: var(--help-accent);
  border-color: var(--help-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--help-accent-hover) !important;
  border-color: var(--help-accent-hover) !important;
}

.card,
.list-group-item {
  background-color: var(--help-surface);
  border-color: var(--help-border);
  color: var(--help-text);
}

.table {
  --bs-table-color: var(--help-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--help-border);
}

/* Bootstrap's .form-control/.form-select background is a fixed white
   (--bs-body-bg), never themed - overriding --bs-body-color above for dark
   mode alone leaves light text sitting on that same fixed white box. */
.form-control,
.form-select {
  background-color: var(--help-surface);
  border-color: var(--help-border);
  color: var(--help-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--help-surface);
  color: var(--help-text);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--help-surface-muted);
}

.input-group-text {
  background-color: var(--help-surface-muted);
  border-color: var(--help-border);
  color: var(--help-text);
}

.modal-content {
  background-color: var(--help-surface);
  color: var(--help-text);
  border: 1px solid var(--help-border);
}

.modal-header,
.modal-footer {
  border-color: var(--help-border);
}

:root[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

#screenContainer:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#screenContainer:fullscreen img {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
}

.status-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.status-dot.online {
  background-color: var(--help-online);
}

.status-dot.offline {
  background-color: var(--help-offline);
}

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

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

/* "Wichtig"/Privacy page - same profile-card + hero + card-grid "about page"
   layout as xmm.at's own Info page, rebuilt on this app's own --help-*
   palette and the already-themed .card (see ".card, .list-group-item" above)
   instead of carrying over xmm.at's own colors/shadows. */
.info-page {
  max-width: 1100px;
  margin: 0 auto;
}

.developer-info-card {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--help-border);
  border-radius: 0.75rem;
  background: var(--help-surface);
  text-align: center;
}

.developer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.3rem;
  border-radius: 1rem;
  background: var(--help-accent);
  color: var(--help-accent-contrast);
  font-size: 1.6rem;
  font-weight: 700;
}

.developer-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.developer-label {
  color: var(--help-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.developer-name {
  font-size: 1rem;
  font-weight: 700;
}

.developer-location {
  color: var(--help-text-muted);
  font-size: 0.9rem;
}

.developer-email {
  color: var(--help-accent);
  font-weight: 600;
  text-decoration: none;
}

.developer-email:hover,
.developer-email:focus-visible {
  text-decoration: underline;
}

.info-hero {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--help-border);
  border-radius: 0.75rem;
  background: var(--help-surface);
}

.info-eyebrow {
  display: inline-flex;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--help-surface-muted);
  color: var(--help-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.info-title {
  margin: 0.7rem 0 0.5rem;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
}

.info-description {
  margin: 0;
  max-width: 780px;
  color: var(--help-text-muted);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.info-card-title {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.info-list {
  margin: 0;
  padding-left: 1.1rem;
}

.info-list li {
  margin-bottom: 0.7rem;
  color: var(--help-text-muted);
  line-height: 1.6;
}

.info-list li strong {
  color: var(--help-text);
}

@media (max-width: 900px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* Reusable table<->card responsive pattern for the permanent-connection
   pages (device list in _DeviceListPartial.cshtml, access-grant list in
   PermanentConnectionAdmin/Index.cshtml) - a wide table has no reasonable
   way to shrink onto a phone without either horizontal scrolling or
   unreadably tiny text, so below md (Bootstrap's own breakpoint, matches
   the rest of the site) it switches to one stacked card per row instead.
   Both are always in the DOM (computed once in each view, rendered twice) -
   this is pure CSS show/hide, nothing JS-driven re-renders on resize. */
.device-cards {
  display: none;
}

/* Between the mobile-card breakpoint and a comfortably wide desktop, the
   device table's columns (Status/Name/Letztes Gerät/IP-Adresse/Version/
   Letzter Update-Check/Hinzugefügt von/actions) don't all fit side by side -
   without this, the browser wraps header and cell text onto multiple lines
   instead, leaving every row a different, ragged height. Horizontal
   scrolling (same pattern as the plain .table-responsive history table)
   keeps every row single-line and uniform; nowrap is what forces the
   overflow to actually happen instead of wrapping first. */
.device-table-wrap {
  overflow-x: auto;
}

.device-table-wrap table th,
.device-table-wrap table td {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .device-table-wrap {
    display: none;
  }

  .device-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
  }
}

.device-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--help-surface);
}

.device-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.device-card-name {
  font-weight: 600;
  font-size: 1.05rem;
}

.device-card-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}

.device-card-fields dt {
  color: var(--bs-secondary-color);
  font-weight: 400;
}

.device-card-fields dd {
  margin: 0;
  text-align: right;
  word-break: break-word;
}

.device-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.6rem;
  border-top: 1px solid var(--bs-border-color);
}