.table th {
  white-space: nowrap;
}
.badge-pending   { background: #6c757d; }
.badge-confirmed { background: #0d6efd; }
.badge-completed { background: #198754; }
.badge-cancelled { background: #dc3545; }

/* ===== App layout & RWD ===== */

.app-topbar {
  background: #1a2236;
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Sidebar base: use Bootstrap offcanvas CSS variable for background */
.app-sidebar {
  --bs-offcanvas-bg: #1a2236;
  color: white;
}

.app-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.app-sidebar .nav-link.active {
  background: #0d6efd;
}

/* ===== Desktop (md+): sidebar is inline in flex layout ===== */
@media (min-width: 768px) {
  .app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
  }

  /* Override Bootstrap offcanvas styles to make sidebar static on desktop */
  .app-sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 230px !important;
    min-width: 230px;
    visibility: visible !important;
    transform: none !important;
    z-index: 1 !important;
    border-right: none !important;
    flex-shrink: 0;
    height: 100vh;
    overflow-y: auto;
    transition: none !important;
    background: #1a2236 !important;
  }

  .app-sidebar .offcanvas-body {
    overflow-y: auto;
    flex-grow: 1;
  }

  .app-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    height: 100vh;
  }
}

/* ===== Mobile: normal sidebar and main flow ===== */
@media (max-width: 767.98px) {
  .app-sidebar {
    width: 260px !important;
  }

  .app-main {
    /* flows normally below the sticky topbar */
  }
}