html {
  font-size: 14px;
}

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

.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 #d32f2f; /* brand red focus */
}

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

body {
  margin-bottom: 60px;
}

/* === Brand theme (red / white / black) === */
:root {
  --brand-red: #d32f2f;
  --brand-red-600: #c12727;
  --brand-red-700: #b71c1c;
  --brand-white: #ffffff;
  --brand-black: #111111;
  --brand-gray-50: #f7f7f8;
  --brand-gray-200: #e5e7eb;
  --brand-gray-700: #374151;
}

.text-brand { color: var(--brand-red) !important; }
.bg-brand { background-color: var(--brand-red) !important; color: var(--brand-white) !important; }
.border-brand { border-color: var(--brand-red) !important; }

.btn-brand {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
}
.btn-brand:hover, .btn-brand:focus {
  background-color: var(--brand-red-700) !important;
  border-color: var(--brand-red-700) !important;
  color: var(--brand-white) !important;
}

.btn-secondary-brand {
  background-color: var(--brand-black) !important;
  border-color: var(--brand-black) !important;
  color: var(--brand-white) !important;
}
.btn-secondary-brand:hover, .btn-secondary-brand:focus {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

.table-head-brand th {
  background-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
  border-bottom: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--brand-gray-50);
}

/* Modal header brand variant */
.modal-header.brand {
  background-color: var(--brand-red);
  color: var(--brand-white);
  border-bottom: none;
}
.modal-header.brand .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Inputs focus color to brand */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25);
}

/* Badges and chips (optional) */
.badge-brand {
  background-color: var(--brand-red);
  color: var(--brand-white);
}

/* Modern UI helpers */
.card-brand {
  background: #ffffff;
  border: 1px solid var(--brand-gray-200);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.06);
}

.table-container {
  border: 1px solid var(--brand-gray-200);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.table-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.btn-icon-gap i { margin-right: .35rem; }

.badge-soft-brand {
  color: var(--brand-red);
  background-color: rgba(211, 47, 47, 0.1);
  border: 1px solid rgba(211, 47, 47, 0.25);
}

/* DataTables tweaks */
.dataTables_filter { display: none !important; }
.page-item.active .page-link {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
}
.page-link {
  color: var(--brand-red);
}
.page-link:hover {
  color: var(--brand-red-700);
}

/* === Navbar: Brand-Akzentlinie + Active-State === */
.navbar-brand-accent {
  border-bottom: 3px solid var(--brand-red) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.navbar-nav .nav-link.active {
  color: var(--brand-red) !important;
  font-weight: 600;
}

/* === Navbar z-index: Dropdowns immer über Seiteninhalt === */
.navbar.sticky-top {
  z-index: 1030;
}
.navbar .dropdown-menu {
  z-index: 1031;
}
/* Utility-Bar Dropdown (Login) ebenfalls korrekt gestapelt */
.navbar-utility-bar .dropdown-menu {
  z-index: 1031;
}

/* === Login-Seite === */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gray-50);
  padding: 1rem;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  text-align: center;
}

.login-card .login-logo {
  max-height: 100px;
  max-width: 240px;
  margin-bottom: 1rem;
  object-fit: contain;
}

.login-card .login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-black);
  margin-bottom: 0.25rem;
}

.login-card .login-tagline {
  font-size: 0.9rem;
  color: var(--brand-gray-700);
  margin-bottom: 1.75rem;
}

.login-card .form-control {
  text-align: left;
}

.login-theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
}

/* ── Countdown cards (ManageOrder_Sommerfest) ── */
.countdown-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  height: 100%;
}

.countdown-card .countdown-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.countdown-card .countdown-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .8;
  font-weight: 600;
}

.countdown-card .countdown-date {
  font-size: .95rem;
  font-weight: 700;
}

.countdown-card .countdown-days {
  font-size: .9rem;
  margin-top: .1rem;
}

/* Variants */
.countdown-normal {
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #5d4037;
}

.countdown-urgent {
  background: #fff3e0;
  border: 2px solid #ff9800;
  color: #bf360c;
  animation: pulse-border 2s ease-in-out infinite;
}

.countdown-overdue {
  background: #ffebee;
  border: 2px solid #ef5350;
  color: #b71c1c;
}

.countdown-event {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #1b5e20;
}

.countdown-event-soon {
  background: #e8f5e9;
  border: 2px solid #43a047;
  color: #1b5e20;
}

@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(255, 152, 0, 0); }
}