:root {
  --app-bg: #eef1f4;
  --app-bg-accent: #e4e9ef;
  --app-card: #ffffff;
  --app-ink: #14181f;
  --app-muted: #4a5563;
  --app-accent: #9a3412;
  --app-accent-hover: #7c2d12;
  --app-accent-soft: #f3e4db;
  --app-accent-2: #1e3a5f;
  --app-border: #c8d0da;
  --app-shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 8px 24px rgba(20, 24, 31, 0.06);
  --app-radius: 0.85rem;
  --app-header: #12161c;
  --app-header-ink: #f4f6f8;
  --app-header-muted: #9aa3b0;
  --app-nav: #f4f6f8;
  --app-font: "Manrope", "Segoe UI", sans-serif;
  --app-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-bg: #0c1015;
    --app-bg-accent: #151b24;
    --app-card: #161d27;
    --app-ink: #eef2f6;
    --app-muted: #a8b4c2;
    --app-accent: #ea8a5c;
    --app-accent-hover: #f0a07a;
    --app-accent-soft: #2a1f1a;
    --app-accent-2: #7eb0e0;
    --app-border: #2a3442;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.35);
    --app-header: #080b10;
    --app-header-ink: #f4f6f8;
    --app-header-muted: #8b95a3;
    --app-nav: #121820;
  }

  html {
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body.app-body {
  margin: 0;
  font-family: var(--app-font);
  background:
    radial-gradient(1100px 480px at -8% -10%, color-mix(in srgb, var(--app-accent) 14%, transparent), transparent 55%),
    radial-gradient(900px 420px at 110% 0%, color-mix(in srgb, var(--app-accent-2) 12%, transparent), transparent 50%),
    linear-gradient(180deg, var(--app-bg-accent), var(--app-bg) 28%);
  background-attachment: fixed;
  color: var(--app-ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ——— Header / Brand ——— */
.app-navbar {
  z-index: 1030;
  background: color-mix(in srgb, var(--app-card) 97%, var(--app-nav)) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--app-border) 85%, var(--app-ink));
  box-shadow: 0 4px 16px rgba(18, 22, 28, 0.08);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.app-brand {
  display: flex;
  align-items: center;
  margin-right: clamp(0.5rem, 1.5vw, 1.25rem);
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

.app-brand-logo {
  display: block;
  width: clamp(5.5rem, 14vw, 7.5rem);
  height: auto;
  max-height: 2.5rem;
  object-fit: contain;
  object-position: left center;
}

.app-nav-toggler {
  border: 1.5px solid color-mix(in srgb, var(--app-ink) 28%, var(--app-border));
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: var(--app-card);
  color: var(--app-ink);
}

.app-nav-toggler:hover,
.app-nav-toggler:focus-visible {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}

.app-nav-toggler .navbar-toggler-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-image: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.app-nav-toggler .navbar-toggler-icon::before,
.app-nav-toggler .navbar-toggler-icon::after,
.app-nav-toggler .navbar-toggler-icon {
  box-shadow: none;
}

.app-nav-toggler .navbar-toggler-icon::before,
.app-nav-toggler .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--app-ink);
}

.app-nav-toggler .navbar-toggler-icon::before {
  top: 0.2rem;
  box-shadow: 0 0.35rem 0 var(--app-ink);
}

.app-nav-toggler .navbar-toggler-icon::after {
  bottom: 0.2rem;
}

.app-navbar .navbar-nav {
  max-width: 100%;
  gap: 0.2rem;
}

.app-navbar .nav-link {
  position: relative;
  white-space: nowrap;
  color: var(--app-ink) !important;
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  padding: 0.65rem 0.9rem !important;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.app-navbar .nav-link .bi {
  color: var(--app-accent-2);
  opacity: 0.95;
}

.app-navbar .nav-link:hover {
  color: var(--app-ink) !important;
  background: color-mix(in srgb, var(--app-accent-soft) 80%, var(--app-card));
  border-color: color-mix(in srgb, var(--app-accent) 22%, var(--app-border));
}

.app-navbar .nav-link:hover .bi {
  color: var(--app-accent);
}

.app-navbar .nav-link.active {
  color: var(--app-accent) !important;
  background: var(--app-accent-soft);
  border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-border));
}

.app-navbar .nav-link.active .bi {
  color: var(--app-accent);
}

.app-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.18rem;
  height: 2.5px;
  border-radius: 2px;
  background: var(--app-accent);
}

.app-toolbar {
  min-width: 0;
}

.app-user-chip {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--app-ink) !important;
  font-weight: 600;
}

#lastRefreshLabel {
  max-width: 14rem;
  line-height: 1.2;
  font-size: 0.78rem;
  color: var(--app-muted) !important;
}

/* ——— Buttons ——— */
.btn {
  font-weight: 600;
  border-radius: 0.55rem;
  letter-spacing: 0.01em;
}

.btn-primary {
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent-hover);
  --bs-btn-hover-border-color: var(--app-accent-hover);
  --bs-btn-active-bg: var(--app-accent-hover);
  --bs-btn-active-border-color: var(--app-accent-hover);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: var(--app-ink);
  --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-bg: color-mix(in srgb, var(--app-accent-soft) 70%, var(--app-card));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-border));
  --bs-btn-hover-color: var(--app-ink);
}

.form-select,
.form-control {
  border-color: var(--app-border);
  border-radius: 0.55rem;
  background-color: var(--app-card);
  color: var(--app-ink);
}

.form-select:focus,
.form-control:focus,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
  box-shadow: none;
}

.btn,
.form-select,
.form-control {
  max-width: 100%;
}

/* ——— Page chrome ——— */
.app-main {
  animation: fadeUp 0.35s ease both;
  max-width: 1600px;
}

.app-main > .d-flex:first-child h1,
.app-main > h1,
.page-heading h1 {
  font-family: var(--app-font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: clamp(1.55rem, 2.6vw, 2rem);
}

.app-main .text-body-secondary {
  color: var(--app-muted) !important;
}

.badge.text-bg-secondary {
  background: color-mix(in srgb, var(--app-accent-2) 18%, var(--app-card)) !important;
  color: var(--app-accent-2) !important;
  border: 1px solid color-mix(in srgb, var(--app-accent-2) 28%, var(--app-border));
  font-weight: 600;
}

/* ——— Cards / panels ——— */
.stat-card,
.panel-card,
.month-card {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--app-accent), var(--app-accent-2));
}

.stat-card:hover,
.month-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-border));
  box-shadow: 0 2px 4px rgba(20, 24, 31, 0.05), 0 14px 28px rgba(20, 24, 31, 0.08);
}

.stat-card .label {
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-card .value {
  font-family: var(--app-font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}

.period-bar {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: 0.85rem 1rem !important;
}

.table-wrap {
  overflow: auto;
  max-height: min(70vh, 720px);
  border-radius: 0.75rem;
  border: 1px solid var(--app-border);
  background: var(--app-card);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-ink);
  --bs-table-border-color: var(--app-border);
  --bs-table-hover-bg: color-mix(in srgb, var(--app-accent-soft) 55%, transparent);
}

.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--app-card) 88%, var(--app-accent-soft));
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--app-muted);
  border-bottom-width: 1px;
}

.table-sticky thead th .sort-ind {
  opacity: 0.45;
  margin-left: 0.25rem;
}

.table-sticky thead th.is-sorted .sort-ind {
  opacity: 1;
  color: var(--app-accent);
}

.table-sticky tbody tr {
  transition: background-color 0.15s ease;
}

.table-sticky tbody tr:hover {
  background: color-mix(in srgb, var(--app-accent-soft) 55%, transparent);
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.85rem;
}

.month-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1rem;
  cursor: pointer;
}

.month-card .month-title {
  font-family: var(--app-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.chart-box {
  position: relative;
  min-height: 260px;
}

.employee-hero {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--app-accent-soft) 80%, var(--app-card)), var(--app-card));
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 1.25rem 1.4rem;
}

.panel-card > .h5,
.panel-card > .h6,
.panel-card h2.h5,
.panel-card h3.h6 {
  font-family: var(--app-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 992px) {
  .app-nav-toggler {
    display: none !important;
  }

  .app-navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
}

.code-block,
pre.code-block {
  background: color-mix(in srgb, var(--app-card) 80%, #000);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  padding: 1rem;
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
  font-size: 0.85rem;
}

.diagnose-step {
  background: color-mix(in srgb, var(--app-card) 96%, var(--app-accent-soft));
}

.confirm-dialog {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 0;
  max-width: min(92vw, 28rem);
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.api-meta dt {
  color: var(--app-muted);
}

#logCards .btn,
#checkSteps .btn,
.period-bar .btn {
  min-height: 2.5rem;
}

.settings-subnav .nav-link {
  color: var(--app-ink);
  border: 1px solid var(--app-border);
  background: var(--app-card);
  border-radius: 0.55rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
}

.settings-subnav .nav-link:hover {
  color: var(--app-accent);
  border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-border));
  background: var(--app-accent-soft);
}

.settings-subnav .nav-link.active {
  color: var(--app-accent) !important;
  background: var(--app-accent-soft);
  border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-border));
}

.app-navbar .dropdown-menu {
  border: 1px solid color-mix(in srgb, var(--app-border) 70%, var(--app-ink));
  border-radius: 0.7rem;
  box-shadow: 0 8px 28px rgba(18, 22, 28, 0.14);
  padding: 0.45rem;
  background: var(--app-card);
  min-width: 14.5rem;
}

.app-navbar .dropdown-item {
  border-radius: 0.5rem;
  font-weight: 600;
  color: var(--app-ink);
  padding: 0.6rem 0.8rem;
  border: 1px solid transparent;
}

.app-navbar .dropdown-item .bi {
  color: var(--app-accent-2);
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
  background: color-mix(in srgb, var(--app-accent-soft) 85%, var(--app-card));
  color: var(--app-ink);
  border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
}

.app-navbar .dropdown-item:hover .bi,
.app-navbar .dropdown-item:focus .bi {
  color: var(--app-accent);
}

.app-navbar .dropdown-item.active,
.app-navbar .dropdown-item:active {
  background: var(--app-accent-soft);
  color: var(--app-accent);
  border-color: color-mix(in srgb, var(--app-accent) 28%, transparent);
}

.app-navbar .dropdown-item.active .bi,
.app-navbar .dropdown-item:active .bi {
  color: var(--app-accent);
}

.app-navbar .dropdown-divider {
  border-color: var(--app-border);
  opacity: 1;
  margin: 0.35rem 0.25rem;
}

.alert-danger a {
  text-decoration: underline;
}

#systeminfo {
  background: color-mix(in srgb, #fecaca 35%, var(--app-card));
}


.table-responsive,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ——— Responsive ——— */
@media (max-width: 991.98px) {
  .period-bar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .period-bar .form-select,
  .period-bar .form-control,
  .period-bar .btn {
    width: 100% !important;
    max-width: 100%;
  }

  .period-bar .d-flex {
    width: 100%;
  }

  .app-navbar .navbar-collapse {
    margin-top: 0.65rem;
    padding: 0.65rem 0.35rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--app-border);
    background: var(--app-card);
    box-shadow: var(--app-shadow);
  }

  .app-navbar .navbar-nav {
    width: 100%;
    gap: 0.25rem;
    padding: 0.15rem 0.25rem 0.5rem;
    margin-bottom: 0 !important;
  }

  .app-navbar .nav-item {
    width: 100%;
  }

  .app-navbar .nav-link {
    white-space: normal;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.8rem 0.85rem !important;
    border-radius: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent);
    background: color-mix(in srgb, var(--app-bg) 55%, var(--app-card));
    margin-bottom: 0;
  }

  .app-navbar .nav-link.active {
    border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-border));
  }

  .app-navbar .nav-link.active::after {
    display: none;
  }

  .app-navbar .nav-link.dropdown-toggle::after {
    margin-left: auto;
  }

  /* Untermenüs als klar eingerückte Listen (kein schwebendes Dropdown) */
  .app-navbar .dropdown-menu {
    position: static !important;
    float: none;
    transform: none !important;
    width: 100%;
    min-width: 0;
    margin: 0.3rem 0 0.45rem;
    padding: 0.3rem;
    border: 1px solid color-mix(in srgb, var(--app-accent-2) 18%, var(--app-border));
    border-radius: 0.6rem;
    box-shadow: none;
    background: color-mix(in srgb, var(--app-accent-2) 6%, var(--app-card));
  }

  .app-navbar .dropdown-item {
    padding: 0.7rem 0.85rem 0.7rem 1.15rem;
    font-size: 0.94rem;
  }

  .app-toolbar,
  .app-navbar .ms-lg-auto,
  .app-navbar .global-employee-filter {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 0.55rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--app-border);
    gap: 0.55rem !important;
  }

  .app-toolbar .btn,
  .app-toolbar .badge {
    width: 100%;
    justify-content: center;
  }

  .app-user-chip {
    max-width: 100%;
    white-space: normal;
  }

  #btnRefreshAll,
  #lastRefreshLabel {
    max-width: 100%;
  }

  #lastRefreshLabel {
    width: 100%;
  }

  .settings-subnav .nav-link {
    font-size: 0.9rem;
  }

  .table-wrap {
    max-height: none;
  }

  .stat-card .value {
    word-break: break-word;
  }
}

@media (max-width: 767.98px) {
  .table {
    font-size: 0.9rem;
  }

  .panel-card,
  .stat-card,
  .month-card {
    border-radius: 0.75rem;
  }

  .chart-box {
    min-height: 220px;
  }
}

@media (max-width: 575.98px) {
  .app-brand-logo {
    max-height: 2.1rem;
    width: clamp(4.5rem, 30vw, 6rem);
  }

  .btn-label-full {
    display: none !important;
  }

  .btn-label-short {
    display: inline !important;
  }

  .btn-group {
    flex-wrap: wrap;
  }

  .app-main {
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
  }
}