/* Yozz Staging – felületi téma (Bootstrap 5.3 kiegészítés, fordítási lépés nélkül) */

/* Poppins helyben tárolva (view/vendor/poppins/), teljes karakterkészlettel az ő/ű miatt; Google Fonts hívás nincs */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/poppins/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/poppins/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/poppins/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/poppins/Poppins-Bold.ttf') format('truetype'); }

:root {
  /* Saját tokenek */
  --app-bg: #F5F7FB;
  --app-surface: #FFFFFF;
  --app-border: #EAECF0;
  --app-border-soft: #F2F4F7;
  --app-input-border: #D0D5DD;
  --app-text: #1D2939;
  --app-text-2: #344054;
  --app-muted: #667085;
  --app-soft: #98A2B3;
  --app-primary: #465FFF;
  --app-primary-hover: #3A51E6;
  --app-primary-active: #3346CC;
  --app-primary-50: #EEF1FF;
  --app-primary-200: #C2CBFF;
  --app-violet: #7A5AF8;
  --app-violet-50: #F4F3FF;
  --app-radius: 14px;
  --app-radius-sm: 10px;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --app-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
  --app-sidebar-width: 264px;
  --app-topbar-height: 72px;

  /* Bootstrap változók felülírása */
  --bs-font-sans-serif: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-size: .875rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--app-text);
  --bs-body-color-rgb: 29, 41, 57;
  /* A komponensek (kártya, táblázat, űrlapmező, menü) háttere ezt követi: fehér marad, az oldal hátterét a body kapja */
  --bs-body-bg: #FFFFFF;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #101828;
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-color: var(--app-soft);
  --bs-secondary-bg: #F2F4F7;
  --bs-tertiary-bg: #F9FAFB;
  --bs-border-color: var(--app-border);
  --bs-border-radius: var(--app-radius-sm);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--app-radius);
  --bs-heading-color: #101828;
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: 70, 95, 255;
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-link-hover-color-rgb: 58, 81, 230;
  --bs-focus-ring-color: rgba(70, 95, 255, .18);

  --bs-primary: #465FFF;
  --bs-primary-rgb: 70, 95, 255;
  --bs-primary-text-emphasis: #2B3BB8;
  --bs-primary-bg-subtle: #EEF1FF;
  --bs-primary-border-subtle: #C2CBFF;

  --bs-success: #12B76A;
  --bs-success-rgb: 18, 183, 106;
  --bs-success-text-emphasis: #067647;
  --bs-success-bg-subtle: #ECFDF3;
  --bs-success-border-subtle: #ABEFC6;

  --bs-warning: #F79009;
  --bs-warning-rgb: 247, 144, 9;
  --bs-warning-text-emphasis: #B54708;
  --bs-warning-bg-subtle: #FFFAEB;
  --bs-warning-border-subtle: #FEDF89;

  --bs-danger: #F04438;
  --bs-danger-rgb: 240, 68, 56;
  --bs-danger-text-emphasis: #B42318;
  --bs-danger-bg-subtle: #FEF3F2;
  --bs-danger-border-subtle: #FECDCA;

  --bs-info: #0BA5EC;
  --bs-info-rgb: 11, 165, 236;
  --bs-info-text-emphasis: #026AA2;
  --bs-info-bg-subtle: #F0F9FF;
  --bs-info-border-subtle: #B9E6FE;

  --bs-secondary-text-emphasis: var(--app-text-2);
  --bs-secondary-bg-subtle: #F2F4F7;
  --bs-secondary-border-subtle: var(--app-border);
}

body {
  background-color: var(--app-bg);
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -.01em; }
code { color: var(--app-violet); }

/* ---------- Váz: oldalsáv + fejléc + tartalom ---------- */

.app-sidebar {
  --bs-offcanvas-width: var(--app-sidebar-width);
  --bs-offcanvas-border-width: 0;
}

.app-sidebar-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 20px 16px;
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
  overflow-y: auto;
}

@media (min-width: 1200px) {
  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    width: var(--app-sidebar-width);
  }

  .app-main {
    margin-left: var(--app-sidebar-width);
  }
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 16px;
  color: var(--app-text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.app-brand:hover { color: var(--app-text); }
.app-brand small { display: block; font-size: 11px; font-weight: 500; color: var(--app-soft); letter-spacing: .02em; }

.app-brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--app-primary);
  color: #fff;
  font-size: 18px;
}

.app-nav-caption {
  padding: 18px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--app-soft);
}

.app-nav { list-style: none; margin: 0; padding: 0; }

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--app-muted);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

.app-nav-link .bi { width: 20px; font-size: 18px; text-align: center; }
.app-nav-link:hover { background: var(--bs-tertiary-bg); color: var(--app-text); }
.app-nav-link.active { background: var(--app-primary-50); color: var(--app-primary); }
.app-nav-link.disabled { color: var(--app-soft); pointer-events: none; }

.app-nav-count {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--app-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.app-nav-soon {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bs-secondary-bg);
  color: var(--app-soft);
  font-size: 10px;
  font-weight: 500;
}

.app-sidebar-status {
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: #FCFCFD;
  font-size: 12px;
  color: var(--app-muted);
}

.app-sidebar-status a { color: inherit; }
.app-sidebar-status strong { color: var(--app-text); font-weight: 500; }

.status-dot {
  display: inline-block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-success);
  box-shadow: 0 0 0 3px var(--bs-success-bg-subtle);
}

.status-dot.warning { background: var(--bs-warning); box-shadow: 0 0 0 3px var(--bs-warning-bg-subtle); }
.status-dot.danger { background: var(--bs-danger); box-shadow: 0 0 0 3px var(--bs-danger-bg-subtle); }
.status-dot.muted { background: var(--app-soft); box-shadow: 0 0 0 3px var(--bs-secondary-bg); }

.app-main { min-height: 100vh; }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--app-topbar-height);
  padding: 0 28px;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(8px);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #fff;
  color: var(--app-muted);
  font-size: 18px;
}

.icon-btn:hover { background: var(--bs-tertiary-bg); color: var(--app-text); }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #fff;
  color: var(--app-text);
  text-align: left;
}

.user-chip:hover { background: var(--bs-tertiary-bg); }
.user-chip .name { font-weight: 500; line-height: 1.15; }
.user-chip .role { font-size: 11px; color: var(--app-soft); }
.user-chip::after { display: none; }

.avatar {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--app-primary-50);
  color: var(--app-primary);
  font-size: 12px;
  font-weight: 600;
}

.avatar.violet { background: var(--app-violet-50); color: var(--app-violet); }
.avatar.success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.avatar.warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.avatar.gray { background: var(--bs-secondary-bg); color: var(--app-muted); }

.app-content { padding: 28px; }

@media (max-width: 575.98px) {
  .app-topbar { padding: 0 16px; }
  .app-content { padding: 18px 16px; }
}

.app-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.app-page-header h1 { margin: 0 0 4px; font-size: 24px; }
.app-page-header p { margin: 0; color: var(--app-muted); }

/* ---------- Bootstrap komponensek ---------- */

.card {
  --bs-card-border-color: var(--app-border);
  --bs-card-border-radius: var(--app-radius);
  --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
  --bs-card-spacer-x: 1.375rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-cap-padding-x: 1.375rem;
  --bs-card-cap-padding-y: 1.1rem;
  --bs-card-cap-bg: transparent;
  box-shadow: var(--app-shadow);
}

.card-header { font-weight: 600; font-size: 15px; border-bottom-color: var(--app-border-soft); }
.card-footer { background: #FCFCFD; border-top-color: var(--app-border-soft); }

.btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .55rem;
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: .875rem;
  --bs-btn-border-radius: 10px;
  --bs-btn-focus-box-shadow: 0 0 0 4px rgba(70, 95, 255, .18);
}

.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .35rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: 8px; }

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-active);
  --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
  box-shadow: 0 1px 2px rgba(70, 95, 255, .25);
}

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

.btn-outline-secondary, .btn-light {
  --bs-btn-color: var(--app-text-2);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--app-input-border);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--app-input-border);
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: var(--app-input-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #DC6803;
  --bs-btn-hover-border-color: #DC6803;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #B54708;
  --bs-btn-active-border-color: #B54708;
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #FDA29B;
  --bs-btn-hover-color: var(--bs-danger-text-emphasis);
  --bs-btn-hover-bg: var(--bs-danger-bg-subtle);
  --bs-btn-hover-border-color: #FDA29B;
}

.form-label { margin-bottom: .375rem; color: var(--app-text-2); font-size: .8125rem; font-weight: 500; }
.form-text { color: var(--app-muted); font-size: .75rem; }

.form-control, .form-select {
  min-height: 42px;
  padding: .55rem .875rem;
  border-color: var(--app-input-border);
  border-radius: 10px;
  color: var(--app-text);
  font-size: .875rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { min-height: 36px; padding-top: .35rem; padding-bottom: .35rem; border-radius: 8px; font-size: .8125rem; }
.form-control::placeholder { color: var(--app-soft); }

.form-control:focus, .form-select:focus {
  border-color: #98A6FF;
  box-shadow: 0 0 0 4px rgba(70, 95, 255, .12);
}

.form-control:disabled, .form-control[readonly] { background: var(--bs-tertiary-bg); color: var(--app-muted); }
.input-group > .btn { box-shadow: none; }

.form-check-input { border-color: var(--app-input-border); }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-check-input:focus { border-color: #98A6FF; box-shadow: 0 0 0 4px rgba(70, 95, 255, .12); }

.table {
  --bs-table-color: var(--app-text-2);
  --bs-table-border-color: var(--app-border-soft);
  --bs-table-hover-bg: #FCFCFD;
  --bs-table-hover-color: var(--app-text);
  margin-bottom: 0;
}

.table > thead > tr > th {
  padding: .7rem 1rem;
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--app-border);
  color: var(--app-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table > tbody > tr > td { padding: .85rem 1rem; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-sm > tbody > tr > td { padding: .6rem 1rem; }
.card .table > :not(caption) > * > :first-child { padding-left: 1.375rem; }
.card .table > :not(caption) > * > :last-child { padding-right: 1.375rem; }

.alert {
  --bs-alert-border-radius: 12px;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: .85rem;
  font-size: .875rem;
}

.badge { --bs-badge-font-weight: 500; --bs-badge-padding-x: .6em; --bs-badge-padding-y: .4em; border-radius: 999px; }

.pagination {
  --bs-pagination-color: var(--app-text-2);
  --bs-pagination-border-color: var(--app-border);
  --bs-pagination-hover-color: var(--app-text);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--app-border);
  --bs-pagination-active-bg: var(--app-primary);
  --bs-pagination-active-border-color: var(--app-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 4px rgba(70, 95, 255, .18);
  gap: 4px;
}

.pagination .page-link { border-radius: 8px !important; min-width: 34px; text-align: center; }

.dropdown-menu {
  --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-box-shadow: var(--app-shadow-lg);
  --bs-dropdown-link-color: var(--app-text-2);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-bg: var(--app-primary-50);
  --bs-dropdown-link-active-color: var(--app-primary);
  --bs-dropdown-item-padding-x: .75rem;
  --bs-dropdown-item-padding-y: .5rem;
  padding: 6px;
  box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item { border-radius: 8px; font-size: .875rem; }

.tooltip { --bs-tooltip-bg: #101828; --bs-tooltip-border-radius: 8px; --bs-tooltip-font-size: .75rem; }

/* ---------- Saját komponensek ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.pill.success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.pill.warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.pill.danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.pill.info { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.pill.primary { background: var(--app-primary-50); color: var(--app-primary); }
.pill.gray { background: var(--bs-secondary-bg); color: var(--app-text-2); }

.tint-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 21px;
}

.tint-icon.sm { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.tint-primary { background: var(--app-primary-50); color: var(--app-primary); }
.tint-violet { background: var(--app-violet-50); color: var(--app-violet); }
.tint-success { background: var(--bs-success-bg-subtle); color: #079455; }
.tint-warning { background: var(--bs-warning-bg-subtle); color: #DC6803; }
.tint-danger { background: var(--bs-danger-bg-subtle); color: #D92D20; }
.tint-info { background: var(--bs-info-bg-subtle); color: #0086C9; }

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 0;
}

.card-title-row h2 { margin: 0; font-size: 16px; }
.card-title-row .sub { margin-top: 2px; color: var(--app-soft); font-size: 12px; }

/* Mutatókártyák */
.kpi { padding: 20px 22px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.kpi-label { margin-bottom: 4px; color: var(--app-muted); font-size: 13px; }
.kpi-value { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.kpi-value.empty { color: var(--app-soft); }

.kpi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--app-border);
  color: var(--app-muted);
  font-size: 12px;
}

/* Idővonal */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--app-border-soft); }
.timeline li:first-child { padding-top: 0; border-top: 0; }
.timeline .what { font-size: 13px; }
.timeline .what strong { font-weight: 500; }
.timeline .when { margin-top: 2px; color: var(--app-soft); font-size: 12px; }

/* Állapotlista */
.status-list { list-style: none; margin: 0; padding: 0; }
.status-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--app-border-soft); }
.status-list li:first-child { padding-top: 0; border-top: 0; }
.status-list .grow { flex: 1; min-width: 0; }
.status-list .title { font-weight: 500; font-size: 13px; }
.status-list .desc { color: var(--app-muted); font-size: 12px; }

.empty-state { padding: 28px 16px; color: var(--app-soft); text-align: center; }
.empty-state .bi { display: block; margin-bottom: 8px; font-size: 28px; }

/* ---------- Bejelentkezési oldalak ---------- */

body.auth-page {
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(70, 95, 255, .08), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(122, 90, 248, .07), transparent 60%),
    var(--app-bg);
}

.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  border-radius: 18px;
  box-shadow: var(--app-shadow-lg);
}

.auth-card .card-body { padding: 36px; }

@media (max-width: 575.98px) {
  .auth-card .card-body { padding: 26px 22px; }
}

.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; text-align: center; }
.auth-brand .app-brand-mark { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
.auth-brand h1 { margin: 0; font-size: 20px; }
.auth-brand p { margin: 0; color: var(--app-muted); }

/* ---------- Nagy kijelzők (1920–3840 px) ----------
   A Bootstrap legnagyobb töréspontja 1400 px, ezért két sajátot veszünk fel:
   fhd = 1920 px-től, qhd = 2560 px-től (pl. col-fhd-3, col-qhd-2). */

@media (min-width: 1920px) {
  .col-fhd-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-fhd-3 { flex: 0 0 auto; width: 25%; }
  .col-fhd-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-fhd-6 { flex: 0 0 auto; width: 50%; }
  .col-fhd-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-fhd-9 { flex: 0 0 auto; width: 75%; }

  .app-content { padding: 32px 36px; }
  .app-topbar { padding: 0 36px; }
}

@media (min-width: 2560px) {
  :root {
    --app-sidebar-width: 288px;
    --bs-body-font-size: .9375rem;
  }

  .col-qhd-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-qhd-3 { flex: 0 0 auto; width: 25%; }
  .col-qhd-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-qhd-6 { flex: 0 0 auto; width: 50%; }
  .col-qhd-8 { flex: 0 0 auto; width: 66.66666667%; }

  .app-content { padding: 40px 48px; }
  .app-topbar { padding: 0 48px; }
  .kpi-value { font-size: 32px; }
}