/* ===========================================================
   DESIGN SYSTEM, ROOT COLORS, TOKENS
   =========================================================== */
:root{
  /* Brand */
  --brand: #1c2938;
  --brand-600: #293d54;
  --brand-700: #405670;
  --brand-light: #ebf2ff;
  --brand-bg-focus: rgba(37, 99, 235, 0.18);
  --brand-shadow: rgba(37, 99, 235, 0.18);

  /* Neutral, Grays */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Surfaces */
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --surface-muted: #f1f5f9;

  /* Borders, Shadow */
  --border: #c7ccd2;
  --border-strong: #b9bec4;
  --shadow: rgba(28,41,56,.06);

  /* Typography */
  --fs-base: 0.925rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8rem;

  /* Text */
  --text: var(--gray-800);
  --text-muted: var(--gray-500);
  --text-heading: var(--gray-900);

  /* Feedback */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger:  #dc2626;
  --info:    #3b82f6;

  /* Table */
  --table-head-bg: var(--brand);
  --table-head-fg: #ffffff;
  --table-hover-bg: rgba(37, 99, 235, 0.08);

  /* Radii */
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;

  /* Focus */
  --focus-ring: var(--brand-bg-focus);

  /* Ergänzungen, weil in CSS genutzt */
  --bs-blue:   #0d6efd;
  --bs-green:  #198754;
  --bs-teal:   #20c997;
  --bs-purple: #6f42c1;
  --bs-orange: #fd7e14;
  --bs-cyan:   #0dcaf0;
  --bs-yellow: #ffc107;
  --bs-gray:   #6c757d;
  --bs-slate-900: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-600: #586a82;

  /* KPI Helfer */
  --kpi-accent: var(--info);
}

/* ===========================================================
   BASE
   =========================================================== */
body{
  background-color: var(--surface-soft);
  color: var(--text);
  font-size: var(--fs-base);
}

/* ===========================================================
   TYPOGRAPHY, HEADINGS, TEXT
   =========================================================== */
h1, h2, h3, h4, h5, h6{
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .5rem;
}

h1{ font-size: 2.1rem; letter-spacing: -0.02em; }
h2{ font-size: 1.7rem; }
h3{ font-size: 1.35rem; }
h4{ font-size: 1.15rem; }
h5{ font-size: 1rem; font-weight: 600; }
h6{ font-size: .9rem; font-weight: 600; color: var(--text-muted); }

.lead{
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gray-600);
}

.subtitle{
  font-size: .95rem;
  color: var(--text-muted);
}

small,
.small{
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.form-text{
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

/* ===========================================================
   LINKS, LISTS, DIVIDER
   =========================================================== */
a{
  color: var(--brand);
  text-decoration: none;
}
a:hover{
  color: var(--brand-600);
  text-decoration: underline;
}

ul,
ol{
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}
li{ margin-bottom: .35rem; }

hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

/* ===========================================================
   TEXT UTILITIES
   =========================================================== */
.text-muted{ color: var(--text-muted) !important; }
.text-strong{ font-weight: 600; }
.text-small{ font-size: var(--fs-xs); }

/* ===========================================================
   FILTER CHIPS
   =========================================================== */
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .6rem;
  border-radius:50rem;
  text-decoration:none;
  font-size:.85rem;
  background: rgba(13,110,253,.10);
  color: var(--bs-blue);
  border: 1px solid rgba(13,110,253,.25);
}
.filter-chip:hover{
  background: rgba(13,110,253,.18);
  color: var(--brand-600);
  border-color: rgba(13,110,253,.40);
}

.filter-chip-reset{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .6rem;
  border-radius:50rem;
  text-decoration:none;
  font-size:.85rem;
  background: rgba(108,117,125,.10);
  color: var(--bs-gray);
  border: 1px solid rgba(108,117,125,.25);
}
.filter-chip-reset:hover{
  background: rgba(108,117,125,.18);
  color: var(--gray-700);
  border-color: rgba(108,117,125,.40);
}

.is-active{
  border-color: var(--bs-blue) !important;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15) !important;
}

/* ===========================================================
   ROLE CHIPS
   =========================================================== */
.role-administrator       { background: rgba(13,110,253,.10); color: var(--bs-blue);   border: 1px solid rgba(13,110,253,.25); }
.role-vorsitzender        { background: rgba(25,135,84,.10);   color: var(--bs-green);  border: 1px solid rgba(25,135,84,.25); }
.role-stellvertretung     { background: rgba(32,201,151,.10);  color: #009669;          border: 1px solid rgba(32,201,151,.25); }
.role-schriftfuehrer      { background: rgba(111,66,193,.10);  color: var(--bs-purple); border: 1px solid rgba(111,66,193,.25); }
.role-schatzmeister       { background: rgba(253,126,20,.10);  color: #ad4f00;          border: 1px solid rgba(253,126,20,.25); }
.role-bauverantwortliche  { background: rgba(13,202,240,.10);  color: #007cbe;          border: 1px solid rgba(13,202,240,.25); }
.role-bereichsleiter      { background: rgba(255,193,7,.10);   color: #664d03;          border: 1px solid rgba(255,193,7,.35); }
.role-revisionskommission { background: rgba(108,117,125,.10); color: var(--bs-gray);   border: 1px solid rgba(108,117,125,.25); }
.role-konfliktkommission  { background: rgba(220,53,69,.10);   color: #dc3545;          border: 1px solid rgba(220,53,69,.25); }

/* ===========================================================
   KPI CARDS
   =========================================================== */
.kpi-card{
  --kpi-bg: var(--surface);
  --kpi-accent: var(--info);

  border: 1px solid rgba(236,240,246,1);
  border-radius: 18px;
  background: var(--kpi-bg);
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}

.kpi-icon{
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(13,110,253,.08);
  margin-right: .85rem;
  color: var(--kpi-accent);
}

.kpi-number{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 2.15rem;
  line-height: 1;
  color: var(--gray-900);
  margin: 0;
}

.kpi-sub{
  font-weight: 700;
  font-size: 1rem;
  color: var(--slate-500);
  margin-left: .25rem;
}

.kpi-label{
  margin: 0;
  color: var(--slate-600);
  font-weight: 600;
  letter-spacing: .2px;
}

/* KPI Varianten */
.kpi-orange{ --kpi-accent:#df8c00; }
.kpi-orange .kpi-icon{ background: rgba(245,158,11,.12); color:#df8c00; }

.kpi-blue{ --kpi-accent:#007cbe; }
.kpi-blue .kpi-icon{ background: rgba(14,165,233,.12); color:#007cbe; }

.kpi-green{ --kpi-accent: var(--bs-green); }
.kpi-green .kpi-icon{ background: rgba(22,163,74,.12); color: var(--bs-green); }

.kpi-violet{ --kpi-accent: var(--bs-purple); }
.kpi-violet .kpi-icon{ background: rgba(139,92,246,.12); color: var(--bs-purple); }

/* KPI Mini Progress */
.kpi-progress{
  height: 6px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}
.kpi-progress > span{
  display:block;
  height:100%;
  background: linear-gradient(90deg,#60a5fa,#22c55e 60%,#f59e0b);
}

/* ===========================================================
   CHIPS, DOTS
   =========================================================== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: var(--surface-soft);
  border: 1px solid rgba(230,234,242,1);
  color: var(--slate-700);
  font-weight: 600;
  font-size: .92rem;
  border-radius: 999px;
  padding: .25rem .6rem;
}
.dot{ width:.55rem; height:.55rem; border-radius:50%; }
.dot-gray{ background:#94a3b8; }
.dot-blue{ background:#38bdf8; }
.dot-green{ background:#22c55e; }
.dot-red{ background:#ef4444; }

/* ===========================================================
   STATUS BADGES
   =========================================================== */
.badge{ text-transform: uppercase; }

.badge-status{
  display:inline-block;
  padding: .35em .65em;
  font-size: .85em;
  font-weight: 500;
  border-radius: 50rem;
}

.status-anfrage_offen{
  background: rgba(255,193,7,.10);
  color: var(--bs-yellow);
  border: 1px solid rgba(255,193,7,.25);
}

.status-anfrage_genehmigt{
  background: rgba(13,202,240,.10);
  color: var(--bs-cyan);
  border: 1px solid rgba(13,202,240,.25);
}

.status-warteliste{
  background: rgba(108,117,125,.10);
  color: var(--bs-gray);
  border: 1px solid rgba(108,117,125,.25);
}

.badge.active,
.status-aktiv{
  background: rgba(25,135,84,.10);
  color: var(--bs-green);
  border: 1px solid rgba(25,135,84,.25);
}

.status-pausiert{
  background: rgba(173,181,189,.10);
  color: #adb5bd;
  border: 1px solid rgba(173,181,189,.25);
}

.status-gekuendigt{
  background: rgba(52,58,64,.10);
  color: #343a40;
  border: 1px solid rgba(52,58,64,.25);
}

.status-gesperrt{
  background: rgba(220,53,69,.10);
  color: #dc3545;
  border: 1px solid rgba(220,53,69,.25);
}

/* ===========================================================
   UI MODERN, CARDS, FORMS
   =========================================================== */
.ui-modern .card{
  border: 0;
  border-radius: var(--r-md);
  box-shadow: 0 6px 18px var(--shadow);
  background: var(--surface);
}

.hero{
  background: var(--brand);
  border-radius: var(--r-md);
}

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.hero p,
.hero span,
.hero li,
.hero a {
  color: var(--surface);
}

.hero small,
.hero .small {
  color: var(--text-muted);
}
.ui-modern .card-header{
  border: 0;
  background: var(--surface-soft);
  color: var(--text-heading);
  font-weight: 600;
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}

.ui-modern .form-label{
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

.ui-modern .form-control,
.ui-modern .form-select{
  border-radius: var(--r-md);
  border-color: var(--border);
  background: var(--surface);
  padding: .65rem .85rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ui-modern .form-control:focus,
.ui-modern .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem var(--focus-ring);
}

.ui-modern textarea.form-control{
  min-height: 120px;
  resize: vertical;
}

/* Dropdown */
.ui-modern .dropdown-menu .dropdown-item:hover,
.ui-modern .dropdown-menu .dropdown-item:focus{
  background: #e8edf3;
  color: #000;
}
.ui-modern .dropdown-menu .nav-link{
  color: var(--slate-700) !important;
  background: transparent !important;
}
.ui-modern .dropdown-menu .nav-link:hover,
.ui-modern .dropdown-menu .nav-link:focus,
.ui-modern .dropdown-item:active{
  background: #e8edf3 !important;
  color: #000 !important;
}

/* Divider */
.ui-modern hr{
  opacity: .5;
  border-top: 1px dashed var(--border);
  margin: .75rem 0 1rem;
}

/* ===========================================================
   MODALS
   =========================================================== */
.modal-content{
  border: 0;
  border-radius: 14px;
  overflow: hidden;
}

.modal-header{
  background: var(--brand) !important;
  color: #fff;
  border-bottom: none;
}

.modal-header .btn-close{
  filter: invert(1);
  opacity: .85;
  transition: opacity .2s ease;
}
.modal-header .btn-close:hover{ opacity: 1; }

.modal-header .modal-title{
  font-weight: 600;
  color: #fff;
}
.modal-header .modal-title i{
  opacity: .85;
  margin-right: .4rem;
}

/* Scrollbares modernes Modal */
.modal.modal-lg .modal-content{
  max-height: calc(100vh - 3rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal.modal-lg .modal-body{
  overflow-y: auto;
  flex: 1;
  padding-right: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
.modal.modal-lg .modal-body::-webkit-scrollbar{ width: 8px; }
.modal.modal-lg .modal-body::-webkit-scrollbar-thumb{
  background: var(--gray-300);
  border-radius: 8px;
}
.modal.modal-lg .modal-body::-webkit-scrollbar-thumb:hover{
  background: var(--gray-400);
}

/* ===========================================================
   NAV TABS, DARK STYLE
   =========================================================== */
.ui-modern .nav-tabs{
  background: var(--brand) !important;
  border-bottom: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding: .25rem .5rem 0 .5rem;
  margin: 0;
  list-style: none;
}

.ui-modern .nav-tabs .nav-item{ margin: 0; padding: 0; }

.ui-modern .nav-tabs .nav-link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 40px;
  padding: 0 .95rem;
  margin: 0;
  line-height: 1;
  border: none !important;
  border-radius: .5rem .5rem 0 0;
  background: transparent !important;
  color: rgba(255,255,255,.75) !important;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.ui-modern .nav-tabs .nav-link:hover,
.ui-modern .nav-tabs .nav-link:focus{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  text-decoration: none;
}

.ui-modern .nav-tabs .nav-link.active{
  height: 40px;
  padding: 0 .95rem;
  margin: 0;
  border: none !important;
  border-radius: .5rem .5rem 0 0;
  background: #fff !important;
  color: var(--bs-slate-900) !important;
}

.ui-modern .tab-content{
  background: #fff;
  padding: 1rem;
  border-top: 0;
  margin: 0;
}

/* Tab Dropdown */
.ui-modern .dropdown-menu{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  margin-top: .4rem;
  padding: .3rem 0;
}
.ui-modern .dropdown-item{
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem;
  color: var(--slate-700);
  font-weight: 500;
}
.ui-modern .dropdown-item:hover{ background:#e8edf3; color:#000; }
.dropdown-item.active, 
.dropdown-item:active{background:#d2e1f3; color:#000; }
/* ===========================================================
   TABLES
   =========================================================== */
.table-modern{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 .5rem;
  font-size: var(--fs-base);
}
.table-modern thead{ border-radius: var(--r-md); }
.table-modern thead th{
  background: var(--table-head-bg);
  color: var(--table-head-fg);
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  padding: .75rem 1rem;
  white-space: nowrap;
}

.table-modern tbody td{
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  vertical-align: middle;
  border: 1px solid var(--border-strong);
  border-left: none;
  border-right: none;
  padding: .75rem 1rem;
  transition: background .2s ease-in-out;
}

.table-modern tbody tr td:first-child{
  border-top-left-radius: .4rem;
  border-bottom-left-radius: .4rem;
  border-left: 1px solid var(--border-strong);
}
.table-modern tbody tr td:last-child{
  border-top-right-radius: .4rem;
  border-bottom-right-radius: .4rem;
  border-right: 1px solid var(--border-strong);
}
.table-modern tbody tr:hover td{
  background: var(--table-hover-bg);
  cursor: pointer;
}

.table-modern th.sortable{
  cursor: pointer;
  user-select: none;
}
.table-modern th.sortable:hover{ color: var(--brand); }

/* ===========================================================
   TOOLTIPS
   =========================================================== */
.tooltip-inner{
  font-size: var(--fs-xs);
  background-color: var(--gray-800);
  color: var(--surface);
  border-radius: var(--r-sm);
  padding: .5rem .75rem;
}
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{
  border-top-color: var(--gray-800);
}

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn{ border-radius: 12px; font-weight: 600; }

.btn-primary{
background: var(--brand);
  --bs-btn-border-color: var(--brand) !important;
  --bs-btn-color: #fff!important;

  --bs-btn-hover-bg: var(--brand-600)!important;
  --bs-btn-hover-border-color: var(--brand-600)!important;
  --bs-btn-hover-color: #fff!important;

  --bs-btn-active-bg: var(--brand-700)!important;
  --bs-btn-active-border-color: var(--brand-700)!important;

  box-shadow: 0 8px 18px var(--brand-shadow)!important;
}
.btn-primary:hover{ filter: brightness(.95); }
.btn-primary i{ opacity: .85; }

.btn-outline-secondary{
  --bs-btn-color: var(--gray-700);
  --bs-btn-bg: var(--gray-100);
  --bs-btn-border-color: var(--gray-300);

  --bs-btn-hover-bg: var(--gray-200);
  --bs-btn-hover-color: var(--gray-900);
  --bs-btn-hover-border-color: var(--gray-300);
}

/* ===========================================================
   INPUT GROUPS, FORM FIELDS, GLOBAL FIELD STYLES
   =========================================================== */
.form-control,
.form-select,
.input-group-text{
  border: 1px solid var(--border-strong) !important;
  border-color: var(--border-strong) !important;
  background-color: var(--gray-100) !important;
  transition: border-color .2s ease, background-color .2s ease;
}

.form-control:hover,
.form-select:hover,
.input-group-text:hover{
  border-color: #9da3aa !important;
}

.form-control:focus,
.form-select:focus{
  border-color: var(--brand-600) !important;
  box-shadow: 0 0 0 .2rem rgba(28,41,56,.15);
}

.form-check-input,
.form-control,
.form-select{
  border-color: #b6bcc3 !important;
  background-color: var(--surface) !important;
}

.input-group-text{ border-right: 0; }
.input-group .form-control{ border-left: 0; }
.input-group-text i{ color: var(--bs-gray); }
/* ===========================================================
   RESET: Bootstrap Original Form Switch
   =========================================================== */

.form-switch .form-check-input {
  width: 2em;
  height: 1em;
  margin-left: -2.5em;

  background-color: var(--bs-secondary-bg, #e9ecef);
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;

  border-radius: 2em;
  border: var(--bs-border-width) solid var(--bs-border-color);

  transition: background-position .15s ease-in-out;
}

/* Entfernt Custom Thumb */
.form-switch .form-check-input::before,
.form-switch .form-check-input::after {
  content: none !important;
}

/* Checked Zustand */

.form-switch .form-check-input:checked {
  background-position: right center;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* Fokus */
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* Disabled */
.form-switch .form-check-input:disabled {
  opacity: .5;
}


/* ===========================================================
   FORM SWITCH – größer + aktiver Zustand blau
   =========================================================== */

.form-switch .form-check-input {
  /* Größe */
  width: 2.75em;
  height: 1.45em;
  margin-left: -3em;

  /* Optik */
  border-radius: 2em;
  background-size: contain;

  /* Übergang */
  transition: background-position .15s ease-in-out,
              background-color .15s ease-in-out,
              border-color .15s ease-in-out;
}

/* Aktiver Zustand: BLAU */
.form-check-input:checked,
.form-switch .form-check-input:checked {
  background-color: var(--brand) !important;     /* dein Blau */
  border-color: var(--brand) !important;
}

/* Fokus */
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 .25rem var(--focus-ring);
}

/* Disabled bleibt neutral */
.form-switch .form-check-input:disabled {
  opacity: .55;
}

/* ===========================================================
   NAVBAR, DARK HEADER
   =========================================================== */
.app-header{
  background-color: var(--brand);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.app-header .navbar-brand{
  color: #fff;
  letter-spacing: .1px;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.app-header .navbar-brand i{ font-size: 1rem; opacity: .9; }
.app-header .navbar-brand:hover{
  color: #fff;
  opacity: .85;
  text-decoration: none;
}

.app-header .navbar-nav .nav-link{
  color: rgba(255,255,255,.7);
  margin: 3px;
  display: flex;
  align-items: center;
  gap: .4rem;
  border-radius: .4rem;
  transition: color .15s ease, background-color .15s ease;
}
.app-header .navbar-nav .nav-link i{ font-size: .95rem; opacity: .85; }

.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link:focus{
  color: #fff;
  background: rgba(255,255,255,.08);
  text-decoration: none;
}

.app-header .navbar-nav .nav-link.active{
  color: #fff;
  background: rgba(255,255,255,.10);
  border-radius: .4rem;
}

.app-header .dropdown-toggle::after{
  opacity: .8;
  filter: brightness(1.1);
}

.app-header .dropdown-menu{
  background: #fff;
  color: var(--gray-800);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .6rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  margin-top: .4rem;
}

.app-header .dropdown-item{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  font-weight: 500;
  color: var(--slate-700);
  transition: background .15s ease, color .15s ease;
}
.app-header .dropdown-item:hover{
  background: #e8edf3;
  color: #000;
}

/* Navbar Kleinteile */
.navbar .nav-link small{
  text-align: right;
  font-size: .75rem;
  color: var(--bs-gray) !important;
}
.navbar .nav-link i{ font-size: .8rem; }

@media (max-width: 991.98px){
  .app-header .navbar-collapse{
    background: var(--brand);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .5rem;
  }
  .app-header .dropdown-menu{ background: #fff; }
}

.app-header .navbar-toggler{
  border-color: rgba(255,255,255,.25);
  color: #fff;
}
.app-header .navbar-toggler:focus{
  box-shadow: 0 0 0 .15rem rgba(255,255,255,.25);
}

/* ===========================================================
   VERSION BADGE, STICKY
   =========================================================== */
.version-sticky{
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 2147483647;
  padding: 4px 6px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .02em;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  color: var(--slate-700);
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.version-sticky:hover{ opacity:.95; transform: translateY(-1px); }
.version-sticky:active{ transform: translateY(0); }

body.dark .version-sticky,
[data-theme="dark"] .version-sticky{
  color: rgba(255,255,255,.8);
  background: rgba(28,41,56,.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
}

@media (max-width:576px){
  .version-sticky{ left:6px; bottom:6px; font-size:8px; padding:3px 5px; }
}
@media print{
  .version-sticky{ display:none !important; }
}

/* ===========================================================
   BOOTSTRAP LIKE THEME VARS, UTILITIES, ALERTS, BADGES
   =========================================================== */
:root{
  --bs-primary:   var(--brand);
  --bs-secondary: var(--bs-gray);
  --bs-success:   var(--success);
  --bs-info:      #174ea6;
  --bs-warning:   var(--warning);
  --bs-danger:    var(--danger);
  --bs-light:     #f8f9fa;
  --bs-dark:      var(--gray-900);

  --bs-primary-text-emphasis:   #0f1720;
  --bs-secondary-text-emphasis: #343a40;
  --bs-success-text-emphasis:   #0f5d2a;
  --bs-info-text-emphasis:      #164a9e;
  --bs-warning-text-emphasis:   #8a5a03;
  --bs-danger-text-emphasis:    #7a1212;
  --bs-dark-text-emphasis:      #0b0f16;

  --bs-primary-bg-subtle:   #e7ebf0;
  --bs-secondary-bg-subtle: #f1f3f5;
  --bs-success-bg-subtle:   #e8f6ee;
  --bs-info-bg-subtle:      #e9e9e9;
  --bs-warning-bg-subtle:   #e9e9e9;
  --bs-danger-bg-subtle:    #e9e9e9;
  --bs-light-bg-subtle:     #e9e9e9;
  --bs-dark-bg-subtle:      #e9ecef;

  --bs-primary-border-subtle:   #cfd6dd;
  --bs-secondary-border-subtle: #dee2e6;
  --bs-success-border-subtle:   #ccebd9;
  --bs-info-border-subtle:      #cfe3ff;
  --bs-warning-border-subtle:   #ffe3b5;
  --bs-danger-border-subtle:    #f7c9c9;
  --bs-light-border-subtle:     #f1f3f5;
  --bs-dark-border-subtle:      #cfd4da;
}

/* Utilities */
.text-primary{color:var(--bs-primary)!important;}
.text-secondary{color:var(--bs-secondary)!important;}
.text-success{color:var(--bs-success)!important;}
.text-info{color:var(--bs-info)!important;}
.text-warning{color:var(--bs-warning)!important;}
.text-danger{color:var(--bs-danger)!important;}
.text-light{color:var(--bs-light)!important;}
.text-dark{color:var(--bs-dark)!important;}

.text-primary-emphasis{color:var(--bs-primary-text-emphasis)!important;}
.text-secondary-emphasis{color:var(--bs-secondary-text-emphasis)!important;}
.text-success-emphasis{color:var(--bs-success-text-emphasis)!important;}
.text-info-emphasis{color:var(--bs-info-text-emphasis)!important;}
.text-warning-emphasis{color:var(--bs-warning-text-emphasis)!important;}
.text-danger-emphasis{color:var(--bs-danger-text-emphasis)!important;}
.text-dark-emphasis{color:var(--bs-dark-text-emphasis)!important;}

.bg-primary{background-color:var(--bs-primary)!important;color:#fff!important;}
.bg-secondary{background-color:var(--bs-secondary)!important;color:#fff!important;}
.bg-success{background-color:var(--bs-success)!important;color:#fff!important;}
.bg-info{background-color:var(--bs-info)!important;color:#fff!important;}
.bg-warning{background-color:var(--bs-warning)!important;color:#111!important;}
.bg-danger{background-color:var(--bs-danger)!important;color:#fff!important;}
.bg-light{background-color:var(--bs-light)!important;color:#111!important;}
.bg-dark{background-color:var(--bs-dark)!important;color:#fff!important;}

.bg-primary-subtle{background-color:var(--bs-primary-bg-subtle)!important;}
.bg-secondary-subtle{background-color:var(--bs-secondary-bg-subtle)!important;}
.bg-success-subtle{background-color:var(--bs-success-bg-subtle)!important;}
.bg-info-subtle{background-color:var(--bs-info-bg-subtle)!important;}
.bg-warning-subtle{background-color:var(--bs-warning-bg-subtle)!important;}
.bg-danger-subtle{background-color:var(--bs-danger-bg-subtle)!important;}
.bg-light-subtle{background-color:var(--bs-light-bg-subtle)!important;}
.bg-dark-subtle{background-color:var(--bs-dark-bg-subtle)!important;}

.border-primary{border-color:var(--bs-primary)!important;}
.border-secondary{border-color:var(--bs-secondary)!important;}
.border-success{border-color:var(--bs-success)!important;}
.border-info{border-color:var(--bs-info)!important;}
.border-warning{border-color:var(--bs-warning)!important;}
.border-danger{border-color:var(--bs-danger)!important;}
.border-light{border-color:var(--bs-light)!important;}
.border-dark{border-color:var(--bs-dark)!important;}

.border-primary-subtle{border-color:var(--bs-primary-border-subtle)!important;}
.border-secondary-subtle{border-color:var(--bs-secondary-border-subtle)!important;}
.border-success-subtle{border-color:var(--bs-success-border-subtle)!important;}
.border-info-subtle{border-color:var(--bs-info-border-subtle)!important;}
.border-warning-subtle{border-color:var(--bs-warning-border-subtle)!important;}
.border-danger-subtle{border-color:var(--bs-danger-border-subtle)!important;}
.border-light-subtle{border-color:var(--bs-light-border-subtle)!important;}
.border-dark-subtle{border-color:var(--bs-dark-border-subtle)!important;}

.link-primary{color:var(--bs-primary)!important;}
.link-primary:hover{color:var(--bs-primary-text-emphasis)!important;}
.link-secondary{color:var(--bs-secondary)!important;}
.link-secondary:hover{color:#495057!important;}
.link-success{color:var(--bs-success)!important;}
.link-success:hover{color:var(--bs-success-text-emphasis)!important;}
.link-info{color:var(--bs-info)!important;}
.link-info:hover{color:var(--bs-info-text-emphasis)!important;}
.link-warning{color:var(--bs-warning)!important;}
.link-warning:hover{color:var(--bs-warning-text-emphasis)!important;}
.link-danger{color:var(--bs-danger)!important;}
.link-danger:hover{color:var(--bs-danger-text-emphasis)!important;}
.link-dark{color:var(--bs-dark)!important;}
.link-dark:hover{color:#000!important;}

/* Alerts */
.alert{
  position: relative;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: .5rem;
}
.alert-primary{   color:var(--bs-primary-text-emphasis);   background:var(--bs-primary-bg-subtle);   border-color:var(--bs-primary-border-subtle); }
.alert-secondary{ color:var(--bs-secondary-text-emphasis); background:var(--bs-secondary-bg-subtle); border-color:var(--bs-secondary-border-subtle); }
.alert-success{   color:var(--bs-success-text-emphasis);   background:var(--bs-success-bg-subtle);   border-color:var(--bs-success-border-subtle); }
.alert-info{      color:var(--bs-info-text-emphasis);      background:var(--bs-info-bg-subtle);      border-color:var(--bs-info-border-subtle); }
.alert-warning{   color:var(--bs-warning-text-emphasis);   background:var(--bs-warning-bg-subtle);   border-color:var(--bs-warning-border-subtle); }
.alert-danger{    color:var(--bs-danger-text-emphasis);    background:var(--bs-danger-bg-subtle);    border-color:var(--bs-danger-border-subtle); }
.alert-light{     color:#495057;                           background:var(--bs-light-bg-subtle);     border-color:var(--bs-light-border-subtle); }
.alert-dark{      color:var(--bs-dark-text-emphasis);      background:var(--bs-dark-bg-subtle);      border-color:var(--bs-dark-border-subtle); }

/* Badges */
.badge{display:inline-block;padding:.35em .6em;border-radius:.5rem;font-weight:600;}
.badge.bg-primary{background:var(--bs-primary)!important;color:#fff!important;}
.badge.bg-secondary{background:var(--bs-secondary)!important;color:#fff!important;}
.badge.bg-success{background:var(--bs-success)!important;color:#fff!important;}
.badge.bg-info{background:var(--bs-info)!important;color:#fff!important;}
.badge.bg-warning{background:var(--bs-warning)!important;color:#111!important;}
.badge.bg-danger{background:var(--bs-danger)!important;color:#fff!important;}
.badge.bg-light{background:var(--bs-light)!important;color:#111!important;}
.badge.bg-dark{background:var(--bs-dark)!important;color:#fff!important;}