body {
  background: #f8f9fa;
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 420px;
  border: 1px solid #e9ecef;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

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

.sidebar {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  --bs-offcanvas-width: 280px;
}

@media (min-width: 992px) {
  .sidebar {
    width: 280px;
    border-right: 1px solid #e9ecef;
    min-height: 100vh;
    position: sticky;
    top: 0;
    /* A Bootstrap responsive offcanvas (.offcanvas-lg) ezen a törésponton
       background-color: transparent !important-et állít be, hogy a
       kibontott állapotban sima elemként viselkedjen — ezt írjuk felül. */
    background-color: #ffffff !important;
  }
}

.sidebar .nav-link {
  color: #212529;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
  text-align: left;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  background: #f1f3f5;
  color: #000;
}

.current-user-box {
  border: 1px solid #e9ecef;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
}

.content-area {
  padding: 24px;
  width: 100%;
}

.section-card,
.chart-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 20px;
}

.form-label.required::after {
  content: " *";
  color: #dc3545;
}

.position-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.position-btn {
  border: 1px solid #e9ecef;
  background: #fff;
  border-radius: 10px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: #495057;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.position-btn:hover,
.position-btn.selected {
  background: #f1f3f5;
  border-color: #868e96;
  color: #212529;
}

.position-icon {
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.arrangement-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
}

.arrangement-dropdown-menu {
  min-width: 220px;
}

.arrangement-badge {
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  color: #6c757d;
  background: #f1f3f5;
  border-radius: 999px;
  padding: 4px 12px;
  line-height: 1.4;
}

.floating-action {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1050;
  min-width: 150px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .10);
}

#addUserFab,
#addRevenueFab {
  bottom: 24px;
}

.hidden-section {
  display: none !important;
}

.stat-card,
.filter-bar {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
}

.table thead th {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.sort-col {
  cursor: pointer;
  user-select: none;
}

.sort-col:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sort-col .sort-icon {
  font-size: .78rem;
  opacity: .4;
}

.sort-col.sort-active .sort-icon {
  opacity: 1;
}

.table tbody td {
  text-align: center;
  vertical-align: middle;
}

.small-muted {
  font-size: .9rem;
  color: #6c757d;
}

.chart-card {
  min-height: 360px;
}

.chart-card canvas {
  width: 100% !important;
  height: 300px !important;
}

.ghost-button {
  opacity: .45;
  border-style: dashed;
  pointer-events: none;
  cursor: not-allowed;
}

.orders-edit-mode,
.users-edit-mode {
  background: #fff5f5;
}

.selectable-row {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.selectable-row:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.deadline-row {
  background: #fff8db !important;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.status-not-started {
  background: #ffc107;
}

.status-preparing {
  background: #0d6efd;
}

.status-ready {
  background: #198754;
}

.status-overdue {
  background: #dc3545;
}

.sidebar-overdue-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dc3545;
  flex-shrink: 0;
}

.sidebar-overdue-dot.dot-warning {
  background: #ffc107;
}

.stock-badge {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
}

.stock-badge-out {
  color: #842029;
  background: #f8d7da;
  border: 1px solid #f5c2c7;
}

.stock-badge-low {
  color: #664d03;
  background: #fff3cd;
  border: 1px solid #ffecb5;
}

.stock-badge-ok {
  color: #0f5132;
  background: #d1e7dd;
  border: 1px solid #badbcc;
}

.amount-value {
  transition: filter .15s ease;
}

#section-revenues.amounts-locked .amount-value {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

.overdue-row {
  background: #fff5f5 !important;
}

.overdue-badge {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  color: #842029;
  background: #f8d7da;
  border: 1px solid #f5c2c7;
  border-radius: 999px;
  padding: 1px 8px;
}

.calendar-day.overdue-day {
  background: #fff5f5;
  border-color: #f5c2c7;
}


.invoice-badge-yes {
  background: #dc3545;
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-block;
  font-weight: 600;
}

.invoice-badge-no {
  color: #212529;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-weekdays div {
  text-align: center;
  font-weight: 600;
  color: #6c757d;
}

.calendar-day {
  min-height: 66px;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  overflow: hidden;
}

.calendar-day.muted {
  background: #f8f9fa;
  color: #adb5bd;
}

.cal-bars {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 2px;
  padding: 0 3px 3px;
}

.cal-bar {
  height: 4px;
  flex: 1;
  border-radius: 2px;
}

.cal-bar-green  { background: #198754; }
.cal-bar-blue   { background: #0d6efd; }
.cal-bar-yellow { background: #e6a800; }
.cal-bar-red    { background: #dc3545; }

.cal-bars--single {
  padding: 0;
}

.cal-bars--single .cal-bar {
  border-radius: 0 0 10px 10px;
}

.calendar-day:has(.cal-bars--single .cal-bar-green) {
  background: #f0fff4;
  border-color: #a3cfbb;
}

.calendar-day:has(.cal-bars--single .cal-bar-blue) {
  background: #f0f4ff;
  border-color: #a3b8f5;
}

.calendar-day:has(.cal-bars--single .cal-bar-yellow) {
  background: #fffbf0;
  border-color: #f5dfa3;
}

.calendar-day:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,.07);
}

.calendar-day-number {
  font-weight: 700;
  font-size: .9rem;
}

.calendar-badge {
  font-size: .72rem;
  color: #6c757d;
  white-space: nowrap;
}

.calendar-month-label {
  min-width: 190px;
  text-align: center;
  font-weight: 700;
}

.select-col {
  width: 52px;
}

.invoice-switch-box {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  background: #fff;
  min-height: 42px;
}

.day-order-card {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}

.day-order-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

input[type="date"] {
  cursor: pointer;
}

.table tbody tr:not(.selectable-row) {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.table tbody tr:not(.selectable-row):hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.day-order-card.deadline-row {
  background: #fff8db;
}

.admin-only.hidden-by-role {
  display: none !important;
}

/* ============================================================
   MOBILE — top navbar (auto-hide on scroll) + hamburger menu
   ============================================================ */

.mobile-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #ffffff;
  border-bottom: 1px solid #e9ecef;
  padding: 0 8px 0 4px;
  z-index: 1035;
  transition: transform .25s ease;
}

.mobile-topbar.topbar-hidden {
  transform: translateY(-100%);
}

.mobile-topbar .hamburger-btn {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  padding: 8px 12px;
}

.mobile-topbar-brand {
  font-weight: 600;
  font-size: 1.05rem;
}

.mobile-topbar-spacer {
  width: 42px;
}

@media (max-width: 991.98px) {

  /* Nav linkek: ikon + szöveg egymás mellett, teljes szélesség */
  .sidebar .nav-link {
    padding: 12px 14px;
  }

  /* Overdue dot a nav ikonon */
  .sidebar-overdue-dot {
    margin: 0 0 0 auto !important;
  }

  /* Tartalom: felülre padding, hogy ne takarja a fix navbar */
  .content-area {
    padding: calc(56px + 14px) 12px 24px;
  }

  /* App shell egyszerű blokk */
  .app-shell {
    display: block;
  }

  .floating-action {
    right: 14px;
    bottom: 24px;
    min-width: auto;
  }

  /* Táblák vízszintes görgetés */
  .table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }
  .orders-table,
  .table {
    min-width: 700px;
  }

  /* Section card kisebb padding */
  .section-card {
    padding: 14px 12px;
    border-radius: 10px;
  }

  /* Fejléc sor mobil */
  .section-card > .d-flex:first-child {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Naptár celláj kisebb */
  .calendar-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
  }
  .calendar-day {
    min-height: 44px;
    font-size: .7rem;
    padding: 4px 3px;
    border-radius: 6px;
  }
  .calendar-badge {
    display: none;
  }
  .calendar-weekdays > div {
    font-size: .65rem;
    padding: 2px 0;
  }

  /* Elrendezés picker mobil */
  .position-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .position-btn {
    min-height: 60px;
    font-size: .75rem;
    padding: 8px 4px;
  }

  /* Stat kártyák egymás mellé */
  .stat-card {
    padding: 12px;
  }

  /* Szűrő sáv */
  .filter-bar {
    padding: 12px;
  }

  /* Modálok majdnem teljes képernyő */
  .modal-dialog {
    margin: 8px;
    max-width: calc(100vw - 16px);
  }
  .modal-body {
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Bevétel összesítők egymás mellé */
  .row.g-3 > .col-md-6 {
    width: 50%;
  }

  /* h4 kisebb mobilon */
  .h4, h2.h4 {
    font-size: 1.1rem;
  }

  /* Gombok érintésbarát méret */
  .btn {
    min-height: 40px;
  }
  .btn-sm {
    min-height: 32px;
  }

  /* Napirend kártya */
  .day-order-card {
    padding: 10px 10px;
  }

  /* Bevétel nézet gombok sorba törnek */
  #section-revenues .d-flex.flex-wrap {
    gap: 6px !important;
  }
}

/* Extra kis képernyő (iPhone SE, Galaxy A sorozat) */
@media (max-width: 390px) {
  .content-area {
    padding: calc(56px + 10px) 8px 24px;
  }
  .section-card {
    padding: 10px 8px;
  }
}

/* ============================================================
   THEME SWITCHER COMPONENT
   ============================================================ */

.theme-switcher {
  padding: 0 4px;
}

.theme-switcher-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #adb5bd;
  margin-bottom: 6px;
  padding-left: 2px;
}

/* ============================================================
   DARK MODE — custom component overrides
   (Bootstrap's data-bs-theme="dark" handles its own components)
   ============================================================ */

[data-bs-theme="dark"] body {
  background: #0e0010;
}

[data-bs-theme="dark"] .login-page {
  background: #0e0010;
}

[data-bs-theme="dark"] .login-card {
  background: #160018 !important;
  border-color: #ff007f !important;
  box-shadow: 0 0 32px rgba(255, 0, 127, 0.2);
}

[data-bs-theme="dark"] .login-card .h3 {
  color: #ff007f;
  text-shadow: 0 0 12px rgba(255, 0, 127, 0.5);
}

[data-bs-theme="dark"] .login-card .text-muted {
  color: #ff80bf !important;
}

[data-bs-theme="dark"] .login-card .form-label {
  color: #ff80bf;
}

[data-bs-theme="dark"] .login-card .btn-dark {
  background: #ff007f;
  border-color: #ff007f;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.4);
}

[data-bs-theme="dark"] .login-card .btn-dark:hover {
  background: #ff3399;
  border-color: #ff3399;
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.7);
}

[data-bs-theme="dark"] .sidebar {
  background: #130018;
  border-right-color: #ff007f;
  box-shadow: 2px 0 12px rgba(255, 0, 127, 0.25);
}

@media (min-width: 992px) {
  [data-bs-theme="dark"] .sidebar {
    background-color: #130018 !important;
  }
}

@media (max-width: 991.98px) {
  [data-bs-theme="dark"] .sidebar {
    border-right: none;
    box-shadow: 4px 0 16px rgba(255, 0, 127, 0.2);
  }
}

[data-bs-theme="dark"] .mobile-topbar {
  background: #130018;
  border-bottom-color: #ff007f;
  box-shadow: 0 4px 16px rgba(255, 0, 127, 0.2);
}

[data-bs-theme="dark"] .mobile-topbar-brand {
  color: #ff80bf;
}

[data-bs-theme="dark"] .mobile-topbar .hamburger-btn {
  color: #ff80bf;
}

[data-bs-theme="dark"] .sidebar .nav-link {
  color: #ff80bf;
}

[data-bs-theme="dark"] .sidebar .nav-link.active,
[data-bs-theme="dark"] .sidebar .nav-link:hover {
  background: #2a0033;
  color: #ff007f;
  text-shadow: 0 0 8px #ff007f;
}

[data-bs-theme="dark"] .sidebar .nav-link.active i,
[data-bs-theme="dark"] .sidebar .nav-link:hover i {
  color: #ff007f;
  text-shadow: 0 0 8px #ff007f;
}

[data-bs-theme="dark"] .current-user-box {
  background: #1a001f;
  border-color: #ff007f;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.2);
}

[data-bs-theme="dark"] .section-card,
[data-bs-theme="dark"] .chart-card,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .filter-bar {
  background: #160018;
  border-color: #ff007f;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.15);
}

[data-bs-theme="dark"] .position-btn {
  background: #1a001f;
  border-color: #ff007f;
  color: #ff80bf;
}

[data-bs-theme="dark"] .position-btn:hover,
[data-bs-theme="dark"] .position-btn.selected {
  background: #2a0033;
  border-color: #ff007f;
  color: #ff007f;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.5);
}

[data-bs-theme="dark"] .arrangement-badge {
  background: #2a0033;
  color: #ff80bf;
  border: 1px solid #ff007f;
}

[data-bs-theme="dark"] .day-order-card {
  background: #160018;
  border-color: #ff007f;
  box-shadow: 0 0 6px rgba(255, 0, 127, 0.1);
}

[data-bs-theme="dark"] .invoice-switch-box {
  background: #1a001f;
  border-color: #444;
}

[data-bs-theme="dark"] .invoice-switch-box .form-check-input {
  background-color: #2a0033;
  border-color: #ff007f;
}

[data-bs-theme="dark"] .invoice-switch-box .form-check-input:checked {
  background-color: #ff007f;
  border-color: #ff007f;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}

[data-bs-theme="dark"] .calendar-day {
  background: #160018;
  border-color: #550040;
}

[data-bs-theme="dark"] .calendar-day.overdue-day {
  background: #2a1515 !important;
  border-color: #5a2a2a !important;
}

[data-bs-theme="dark"] .calendar-day:has(.cal-bars--single .cal-bar-green) {
  background: #0d2a1a !important;
  border-color: #1a5c35 !important;
}

[data-bs-theme="dark"] .calendar-day:has(.cal-bars--single .cal-bar-blue) {
  background: #0d1a2a !important;
  border-color: #1a3a5c !important;
}

[data-bs-theme="dark"] .calendar-day:has(.cal-bars--single .cal-bar-yellow) {
  background: #2a230d !important;
  border-color: #5c4a1a !important;
}

[data-bs-theme="dark"] .calendar-day.muted {
  background: #110014;
  color: #550040;
}

[data-bs-theme="dark"] .calendar-weekdays div {
  color: #ff80bf;
}

[data-bs-theme="dark"] .calendar-badge {
  color: #ff80bf;
}

[data-bs-theme="dark"] .small-muted {
  color: #ff80bf;
}

[data-bs-theme="dark"] .deadline-row {
  background: #2d2a14 !important;
}

[data-bs-theme="dark"] .day-order-card.deadline-row {
  background: #2d2a14 !important;
}

[data-bs-theme="dark"] .overdue-row {
  background: #2a1515 !important;
}

[data-bs-theme="dark"] .invoice-badge-no {
  color: #ff80bf;
}

[data-bs-theme="dark"] .theme-switcher-label {
  color: #880055;
}

[data-bs-theme="dark"] .orders-edit-mode,
[data-bs-theme="dark"] .users-edit-mode {
  background: #2a0033;
  border-color: #ff007f;
}

[data-bs-theme="dark"] .floating-action.btn-dark {
  background: #ff007f;
  border-color: #ff007f;
  box-shadow: 0 0 16px rgba(255, 0, 127, 0.6);
}

[data-bs-theme="dark"] .btn-outline-dark {
  color: #ccc;
  border-color: #666;
}

[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark.active,
[data-bs-theme="dark"] .btn-outline-dark:active {
  color: #fff;
  background-color: #444;
  border-color: #888;
}

[data-bs-theme="dark"] .floating-action.btn-dark:hover {
  background: #ff3399;
  border-color: #ff3399;
  box-shadow: 0 0 24px rgba(255, 0, 127, 0.8);
}

[data-bs-theme="dark"] .status-pill {
  background: transparent;
  color: #ccc;
  border: none;
}

[data-bs-theme="dark"] .overdue-badge {
  background: #5a1a1a;
  color: #f48b8b;
}

[data-bs-theme="dark"] table.table {
  --bs-table-striped-bg: #1a0020;
  --bs-table-hover-bg: #2a2a2a;
  border-color: #ff007f;
}

[data-bs-theme="dark"] .selectable-row:hover > td,
[data-bs-theme="dark"] .selectable-row:hover > th,
[data-bs-theme="dark"] .table tbody tr:not(.selectable-row):hover > td,
[data-bs-theme="dark"] .table tbody tr:not(.selectable-row):hover > th {
  background-color: #2a2a2a !important;
  --bs-table-bg: #2a2a2a;
  --bs-table-accent-bg: #2a2a2a;
}

[data-bs-theme="dark"] .table th {
  border-color: #ff007f;
  color: #ff007f;
  text-shadow: 0 0 6px rgba(255, 0, 127, 0.5);
}

[data-bs-theme="dark"] .table td {
  border-color: #550040;
}

/* ============================================================
   RETRO MODE — 80s Beige & Blue
   Palette:
     Parchment  #EDE2B0  (body bg)
     Cream      #E2D498  (card bg)
     Navy       #1C3060  (primary dark)
     Blue       #2A4E9C  (accent / headings)
     Steel      #5A7EB8  (muted elements)
     Warm white #F6F0D8  (light surface)
   ============================================================ */

.theme-retro {
  --bs-body-bg: #EDE2B0;
  --bs-body-color: #1C3060;
  --bs-border-color: rgba(28, 48, 96, 0.28);
  --bs-border-color-translucent: rgba(28, 48, 96, 0.14);
  --bs-secondary-color: #5A7EB8;
  --bs-tertiary-bg: #E2D498;
  --bs-secondary-bg: #E8DC9C;
  --bs-heading-color: #1C3060;
  --bs-link-color: #2A4E9C;
  --bs-link-hover-color: #1C3060;
  --bs-modal-bg: #F0E8C4;
  --bs-modal-header-border-color: rgba(28, 48, 96, 0.25);
  --bs-dropdown-bg: #F0E8C4;
  --bs-dropdown-border-color: rgba(28, 48, 96, 0.3);
  --bs-dropdown-link-color: #1C3060;
  --bs-dropdown-link-hover-bg: rgba(28, 48, 96, 0.08);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(28, 48, 96, 0.04);
  --bs-table-hover-bg: rgba(28, 48, 96, 0.07);
  --bs-table-border-color: rgba(28, 48, 96, 0.2);
  --bs-table-color: #1C3060;
}

/* Subtle horizontal rule texture — evokes old dot-matrix paper */
.theme-retro body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 22px,
    rgba(28, 48, 96, 0.035) 22px,
    rgba(28, 48, 96, 0.035) 23px
  );
  pointer-events: none;
  z-index: 9999;
}

.theme-retro body {
  background: #EDE2B0 !important;
  color: #1C3060;
  font-family: 'Courier New', Courier, monospace !important;
}

/* ---- Sidebar — navy bar like a DOS title frame ---- */
.theme-retro .sidebar {
  background: #1C3060;
  border-right: 3px solid #2A4E9C;
}

@media (min-width: 992px) {
  .theme-retro .sidebar {
    background-color: #1C3060 !important;
  }
}

.theme-retro .mobile-topbar {
  background: #1C3060;
  border-bottom: 3px solid #2A4E9C;
}

.theme-retro .mobile-topbar-brand {
  color: #F6F0D8;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.theme-retro .mobile-topbar .hamburger-btn {
  color: #B8CCEA;
}

.theme-retro .sidebar .h4 {
  color: #F6F0D8;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.theme-retro .sidebar .h4::before {
  content: '[ ';
  opacity: 0.55;
}

.theme-retro .sidebar .h4::after {
  content: ' ]_';
  opacity: 0.55;
  animation: retro-blink 1.1s step-end infinite;
}

.theme-retro .sidebar .text-muted {
  color: #8AAAD4 !important;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.7rem;
  letter-spacing: 1px;
}

.theme-retro .sidebar .nav-link {
  color: #B8CCEA;
  border-radius: 0 !important;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.78rem;
  border-left: 3px solid transparent;
}

.theme-retro .sidebar .nav-link:hover,
.theme-retro .sidebar .nav-link.active {
  background: rgba(246, 240, 216, 0.12);
  color: #F6F0D8;
  border-left-color: #F6C040;
}

.theme-retro .current-user-box {
  background: rgba(246, 240, 216, 0.08);
  border: 1px solid rgba(246, 240, 216, 0.2);
  border-radius: 0 !important;
  color: #D8E8F8;
}

.theme-retro .current-user-box * {
  color: #D8E8F8 !important;
}

.theme-retro .theme-switcher-label {
  color: #7A9AC8;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.65rem;
  letter-spacing: 2px;
}

.theme-retro #themeSwitcher .btn-outline-secondary {
  color: #B8CCEA !important;
  border-color: rgba(184, 204, 234, 0.35) !important;
}

.theme-retro #themeSwitcher .btn-outline-secondary:hover,
.theme-retro #themeSwitcher .btn-outline-secondary.active {
  background: rgba(246, 240, 216, 0.18) !important;
  color: #F6F0D8 !important;
  border-color: rgba(246, 240, 216, 0.5) !important;
}

/* ---- Login page ---- */
.theme-retro .login-page {
  background: #EDE2B0;
}

.theme-retro .login-card {
  background: #F0E8C4 !important;
  border: 2px solid #2A4E9C !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #2A4E9C !important;
  color: #1C3060;
}

/* ---- Cards & sections ---- */
.theme-retro .section-card,
.theme-retro .chart-card,
.theme-retro .stat-card,
.theme-retro .filter-bar {
  background: #F0E8C4;
  border: 1px solid rgba(28, 48, 96, 0.22);
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(28, 48, 96, 0.10);
}

/* ---- Typography ---- */
.theme-retro h1, .theme-retro h2,
.theme-retro h3, .theme-retro h4, .theme-retro h5 {
  font-family: 'Courier New', Courier, monospace !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #1C3060;
}

.theme-retro .h4 {
  font-family: 'Courier New', Courier, monospace !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #1C3060;
}

.theme-retro .small-muted,
.theme-retro .text-muted {
  color: #5A7EB8 !important;
  font-family: 'Courier New', Courier, monospace;
}

.theme-retro .form-label,
.theme-retro label {
  color: #1C3060;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 1px;
  font-weight: 700;
}

/* ---- Form controls ---- */
.theme-retro .form-control,
.theme-retro .form-select {
  background: #FAF5E0 !important;
  color: #1C3060 !important;
  border: 1px solid rgba(28, 48, 96, 0.35) !important;
  border-radius: 0 !important;
  font-family: 'Courier New', Courier, monospace !important;
  caret-color: #2A4E9C;
}

.theme-retro .form-control:focus,
.theme-retro .form-select:focus {
  background: #FFFAEC !important;
  color: #1C3060 !important;
  border-color: #2A4E9C !important;
  box-shadow: 0 0 0 3px rgba(42, 78, 156, 0.15) !important;
}

.theme-retro .form-control:disabled,
.theme-retro .form-control[readonly] {
  background: #E8DFBC !important;
  color: #7A8CAE !important;
  border-color: rgba(28, 48, 96, 0.15) !important;
}

.theme-retro .form-select option {
  background: #FAF5E0;
  color: #1C3060;
}

.theme-retro ::placeholder {
  color: #8AAAD4 !important;
  opacity: 1 !important;
}

.theme-retro .form-check-input {
  background-color: #FAF5E0;
  border-color: rgba(28, 48, 96, 0.4);
}

.theme-retro .form-check-input:checked {
  background-color: #2A4E9C;
  border-color: #2A4E9C;
}

.theme-retro .form-check-label {
  color: #1C3060;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
}

/* ---- Buttons ---- */
.theme-retro .btn {
  border-radius: 0 !important;
  font-family: 'Courier New', Courier, monospace !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.theme-retro .btn-outline-dark,
.theme-retro .btn-outline-secondary {
  color: #1C3060 !important;
  border-color: rgba(28, 48, 96, 0.45) !important;
  background: transparent !important;
}

.theme-retro .btn-outline-dark:hover,
.theme-retro .btn-outline-dark.active,
.theme-retro .btn-outline-secondary:hover,
.theme-retro .btn-outline-secondary.active {
  background: #1C3060 !important;
  color: #F6F0D8 !important;
  border-color: #1C3060 !important;
}

.theme-retro .btn-primary {
  background: #2A4E9C !important;
  border-color: #2A4E9C !important;
  color: #F6F0D8 !important;
}

.theme-retro .btn-primary:hover {
  background: #1C3060 !important;
  border-color: #1C3060 !important;
  color: #F6F0D8 !important;
}

.theme-retro .btn-success {
  background: transparent !important;
  border-color: #1A6040 !important;
  color: #1A6040 !important;
}

.theme-retro .btn-success:hover {
  background: #1A6040 !important;
  color: #F6F0D8 !important;
}

.theme-retro .btn-danger {
  background: transparent !important;
  border-color: #8C1A1A !important;
  color: #8C1A1A !important;
}

.theme-retro .btn-danger:hover {
  background: #8C1A1A !important;
  color: #F6F0D8 !important;
}

.theme-retro .btn-warning {
  background: transparent !important;
  border-color: #8C5A00 !important;
  color: #8C5A00 !important;
}

.theme-retro .btn-warning:hover {
  background: #8C5A00 !important;
  color: #F6F0D8 !important;
}

.theme-retro #logoutBtn {
  color: #B8CCEA !important;
  border-color: rgba(184, 204, 234, 0.35) !important;
  background: transparent !important;
}

.theme-retro #logoutBtn:hover {
  background: rgba(246, 240, 216, 0.18) !important;
  color: #F6F0D8 !important;
  border-color: rgba(246, 240, 216, 0.5) !important;
}

/* ---- Tables ---- */
.theme-retro .table {
  font-family: 'Courier New', Courier, monospace;
}

.theme-retro .table thead th {
  background: #E2D498;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.72rem;
  color: #1C3060;
  border-bottom: 2px solid rgba(28, 48, 96, 0.3);
}

/* ---- Modals ---- */
.theme-retro .modal-content {
  background: #F0E8C4;
  border: 2px solid #2A4E9C;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 rgba(28, 48, 96, 0.2);
  color: #1C3060;
  font-family: 'Courier New', Courier, monospace;
}

.theme-retro .modal-header {
  border-bottom: 1px solid rgba(28, 48, 96, 0.25);
  background: #2A4E9C;
}

.theme-retro .modal-footer {
  border-top: 1px solid rgba(28, 48, 96, 0.2);
  background: #E8DEBA;
}

.theme-retro .modal-title {
  color: #F6F0D8;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Courier New', Courier, monospace;
}

.theme-retro .btn-close {
  filter: invert(1) brightness(2);
}

/* ---- Badges & pills ---- */
.theme-retro .arrangement-badge {
  background: rgba(28, 48, 96, 0.07);
  color: #2A4E9C;
  border: 1px solid rgba(28, 48, 96, 0.2);
  border-radius: 0 !important;
  font-family: 'Courier New', Courier, monospace;
}

.theme-retro .overdue-badge {
  background: rgba(140, 26, 26, 0.1);
  border-color: rgba(140, 26, 26, 0.3);
  color: #8C1A1A;
  border-radius: 0 !important;
}

.theme-retro .invoice-badge-yes {
  background: #8C1A1A;
  color: #F6F0D8;
  border-radius: 0 !important;
}

.theme-retro .invoice-badge-no {
  color: #3A5888;
}

/* ---- Calendar ---- */
.theme-retro .calendar-day {
  background: #F0E8C4;
  border: 1px solid rgba(28, 48, 96, 0.18);
  border-radius: 0 !important;
  color: #1C3060;
}

.theme-retro .calendar-day:hover {
  border-color: #2A4E9C;
  box-shadow: 2px 2px 0 rgba(28, 48, 96, 0.2);
  transform: translateY(-2px);
}

.theme-retro .calendar-day.muted {
  background: #EAE0A8;
  color: rgba(28, 48, 96, 0.35);
}

.theme-retro .calendar-day.overdue-day {
  background: rgba(140, 26, 26, 0.06);
  border-color: rgba(140, 26, 26, 0.25);
}

.theme-retro .calendar-day:has(.cal-bars--single .cal-bar-green) {
  background: rgba(25, 135, 84, 0.07) !important;
  border-color: rgba(25, 135, 84, 0.25) !important;
}

.theme-retro .calendar-day:has(.cal-bars--single .cal-bar-blue) {
  background: rgba(13, 110, 253, 0.07) !important;
  border-color: rgba(13, 110, 253, 0.25) !important;
}

.theme-retro .calendar-day:has(.cal-bars--single .cal-bar-yellow) {
  background: rgba(230, 168, 0, 0.09) !important;
  border-color: rgba(230, 168, 0, 0.3) !important;
}

.theme-retro .calendar-weekdays div {
  color: #3A5888;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.theme-retro .calendar-badge {
  color: #5A7EB8;
}

.theme-retro .calendar-month-label {
  color: #1C3060;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ---- Day order cards ---- */
.theme-retro .day-order-card {
  background: #F0E8C4;
  border: 1px solid rgba(28, 48, 96, 0.2);
  border-radius: 0 !important;
}

.theme-retro .day-order-card:hover {
  box-shadow: 2px 2px 0 rgba(28, 48, 96, 0.15);
}

.theme-retro .day-order-card.deadline-row {
  background: rgba(140, 90, 0, 0.07);
  border-color: rgba(140, 90, 0, 0.25);
}

/* ---- Row highlights ---- */
.theme-retro .deadline-row {
  background: rgba(140, 90, 0, 0.06) !important;
}

.theme-retro .overdue-row {
  background: rgba(140, 26, 26, 0.06) !important;
}

/* ---- Dropdowns ---- */
.theme-retro .dropdown-menu {
  background: #F0E8C4;
  border: 1px solid rgba(28, 48, 96, 0.3);
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(28, 48, 96, 0.15);
}

.theme-retro .dropdown-item {
  color: #1C3060;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.82rem;
}

.theme-retro .dropdown-item:hover,
.theme-retro .dropdown-item:focus {
  background: rgba(28, 48, 96, 0.08);
  color: #1C3060;
}

/* ---- Alerts ---- */
.theme-retro .alert-success {
  background: rgba(26, 96, 64, 0.08) !important;
  border-color: rgba(26, 96, 64, 0.35) !important;
  color: #1A6040 !important;
  border-radius: 0 !important;
  font-family: 'Courier New', Courier, monospace;
}

.theme-retro .alert-danger {
  background: rgba(140, 26, 26, 0.08) !important;
  border-color: rgba(140, 26, 26, 0.35) !important;
  color: #8C1A1A !important;
  border-radius: 0 !important;
  font-family: 'Courier New', Courier, monospace;
}

.theme-retro .alert-warning {
  background: rgba(140, 90, 0, 0.08) !important;
  border-color: rgba(140, 90, 0, 0.35) !important;
  color: #8C5A00 !important;
  border-radius: 0 !important;
  font-family: 'Courier New', Courier, monospace;
}

/* ---- Misc ---- */
.theme-retro .invoice-switch-box {
  background: #F0E8C4;
  border: 1px solid rgba(28, 48, 96, 0.2);
  border-radius: 0 !important;
}

.theme-retro .position-btn {
  background: #FAF5E0;
  border: 1px solid rgba(28, 48, 96, 0.25);
  border-radius: 0 !important;
  color: #2A4E9C;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
}

.theme-retro .position-btn:hover,
.theme-retro .position-btn.selected {
  background: #1C3060;
  color: #F6F0D8;
  border-color: #1C3060;
}

.theme-retro .floating-action {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.theme-retro .ghost-button {
  opacity: 0.35;
}

.theme-retro .orders-edit-mode,
.theme-retro .users-edit-mode {
  background: rgba(140, 26, 26, 0.04);
}

.theme-retro .status-pill {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.theme-retro .cal-bar-green  { background: #1A6040; }
.theme-retro .cal-bar-blue   { background: #2A4E9C; }
.theme-retro .cal-bar-yellow { background: #8C7000; }
.theme-retro .cal-bar-red    { background: #8C1A1A; }

.theme-retro .sidebar-overdue-dot {
  background: #C03030;
}

.theme-retro .sidebar-overdue-dot.dot-warning {
  background: #8C7000;
}

/* Blinking cursor animation */
@keyframes retro-blink {
  0%, 100% { opacity: 1; }
  50%        { opacity: 0; }
}