/* =====================================================================
   Global stylesheet — ALL custom styling lives here.
   Theme the whole application by editing the design tokens in :root below.
   ===================================================================== */

/* --- Design Tokens --- */
/* Base scheme: 0f0f0f · 1a1a1a · ff9933 · f1f1f1 · fcfcfc (+ derived ramps).
   Status colors are intentionally unchanged. */
:root {
  /* Brand & layout */
  --brand-color: #ff9933;          /* primary accent / buttons (base orange) */
  --brand-hover: #f08a24;          /* hover step of the orange ramp */
  --brand-active: #e07b14;         /* pressed / deep orange */
  --brand-soft: #ffb35c;           /* light orange variation */
  --brand-deep: #b35d00;           /* darkest usable orange variation */
  --brand-tint: rgba(255, 153, 51, 0.12);  /* washes, selected rows */
  --brand-contrast: #1a1a1a;       /* text on brand-color (dark on bright orange) */
  --sidebar-bg: #0f0f0f;           /* sidebar background (near-black) */
  --sidebar-accent: #ff9933;       /* sidebar active/inactive states */
  --sidebar-width: 260px;          /* expanded sidebar width */
  --sidebar-collapsed-width: 80px; /* collapsed sidebar width */
  --page-bg: #fcfcfc;              /* page background (off-white) */
  --card-bg: #ffffff;              /* card / form background */
  --card-radius: 0.75rem;          /* card / form corner radius */
  --card-shadow: 0 4px 20px rgba(15, 15, 15, 0.06);
  --surface-subtle: #f5f5f5;       /* subtle panels on light surfaces */
  --border-color: #e8e8e8;         /* dividers, table borders */
  --text-primary: #1a1a1a;         /* main text color */
  --text-secondary: #666666;       /* muted text */
  --text-muted: #9c9c9c;           /* further muted */
  --border-radius-sm: 0.5rem;

  /* status colors (unchanged by design) */
  --status-in-service: #059669;
  --status-maintenance: #d97706;
  --status-out-of-service: #ef4444;
  --status-retired: #64748b;
  --status-scheduled: #f59e0b;
  --status-pending: #eab308;
  --status-retired: #737373;

  /* sidebar link colors (sidebar is dark in BOTH modes) */
  --sidebar-link-color: #a6a6a6;
  --sidebar-link-active: #ff9933;
  --sidebar-link-hover: #f1f1f1;

  /* royal accents (chart edge highlights & glows) — orange ramp */
  --gold: #ff9933;                                   /* edge hairline */
  --gold-soft: rgba(255, 153, 51, 0.38);             /* glow colour */
  --glow-brand: rgba(255, 153, 51, 0.35);            /* subtle series glow */

  /* Map Bootstrap "primary" utilities & links onto the brand ramp so no
     blue remains anywhere (badges, outlines, borders, links, focus). */
  --bs-primary: #ff9933;
  --bs-primary-rgb: 255, 153, 51;
  --bs-link-color: #e07b14;
  --bs-link-color-rgb: 224, 123, 20;
  --bs-link-hover-color: #cc7420;
}

/* Bootstrap compiles SOME primary variants as hard-coded #0d6efd (they do
   NOT react to --bs-primary-rgb). Remap the ones this app uses: */
.btn-outline-primary {
  --bs-btn-color: var(--brand-deep);
  --bs-btn-border-color: var(--brand-color);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: 255, 153, 51;
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-active-bg: var(--brand-active);
  --bs-btn-active-border-color: var(--brand-active);
  --bs-btn-disabled-color: var(--brand-color);
  --bs-btn-disabled-border-color: var(--brand-color);
}

.form-check-input:checked {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
}

.form-check-input:focus {
  border-color: var(--brand-soft);
  box-shadow: 0 0 0 0.25rem rgba(255, 153, 51, 0.25);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--brand-color);
  --bs-dropdown-link-active-color: var(--brand-contrast);
}

/* --- Dark Mode (charcoal ramp: 0f0f0f → 1a1a1a → 2a2a2a) --- */
body.dark-mode {
  --page-bg: #0f0f0f;
  --card-bg: #1a1a1a;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  --surface-subtle: #141414;
  --border-color: #2a2a2a;
  --text-primary: #fcfcfc;
  --text-secondary: #f1f1f1;
  --text-muted: #797979;
  --brand-tint: rgba(255, 153, 51, 0.16);
  --sidebar-link-color: #f1f1f1;
  --sidebar-link-active: #ff9933;
  --sidebar-link-hover: #c4c7ca;
  --gold: #ff9933;
  --gold-soft: rgba(255, 153, 51, 0.45);
  --glow-brand: rgba(255, 153, 51, 0.4);
  --bs-link-color: #f08a24;
  --bs-link-color-rgb: 240, 138, 36;
  --bs-link-hover-color: #ffb35c;
}

/* --- Tables --- */
body.dark-mode .table {
  color: var(--text-primary);
}

body.dark-mode .table thead th {
  background-color: var(--card-bg);
  color: var(--text-secondary);
}

body.dark-mode .table tbody tr:hover {
  background-color: rgba(255, 153, 51, 0.08);
}

body.dark-mode .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--text-primary);
}

/* --- Forms --- */
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #141414;
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: #141414;
  color: var(--text-primary);
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.25);
}

body.dark-mode .form-control::placeholder {
  color: var(--text-muted);
}

body.dark-mode .form-label,
body.dark-mode .form-label.col-form-label,
body.dark-mode label:not(.form-check-label):not(.form-check-label) {
  color: var(--text-primary);
}

/* --- Checkboxes & Switches --- */
body.dark-mode .form-check-input {
  background-color: #141414;
  border-color: #475569;
  color: #141414;
}

body.dark-mode .form-check-input:checked {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: #fff;
}

body.dark-mode .form-check-input:focus {
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.25);
}

body.dark-mode .form-check-label {
  color: var(--text-primary);
}

/* --- File inputs --- */
body.dark-mode input[type="file"],
body.dark-mode input[type="file"].form-control,
body.dark-mode input[type="file"].form-control-sm {
  background-color: #141414;
  border-color: var(--border-color);
  color: var(--text-primary);
  color-scheme: dark;
}

body.dark-mode input[type="file"]::-webkit-file-upload-button,
body.dark-mode input[type="file"].form-control::-webkit-file-upload-button,
body.dark-mode input[type="file"].form-control-sm::-webkit-file-upload-button {
  background-color: #2e2e2e;
  color: var(--text-primary);
  border-color: #475569;
}

body.dark-mode input[type="file"]::-webkit-file-upload-button:hover,
body.dark-mode input[type="file"].form-control::-webkit-file-upload-button:hover,
body.dark-mode input[type="file"].form-control-sm::-webkit-file-upload-button:hover {
  background-color: #475569;
}

body.dark-mode input[type="file"]::file-selector-button,
body.dark-mode input[type="file"].form-control::file-selector-button,
body.dark-mode input[type="file"].form-control-sm::file-selector-button {
  background-color: #2e2e2e;
  color: var(--text-primary);
  border-color: #475569;
}

body.dark-mode input[type="file"]::file-selector-button:hover,
body.dark-mode input[type="file"].form-control::file-selector-button:hover,
body.dark-mode input[type="file"].form-control-sm::file-selector-button:hover {
  background-color: #475569;
}

/* --- Date inputs --- */
body.dark-mode input[type="date"].form-control,
body.dark-mode input[type="date"].form-control-sm {
  color-scheme: dark;
}

/* --- Lists --- */
body.dark-mode .list-group-item {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* --- Alerts --- */
body.dark-mode .alert-success {
  background-color: #064e3b;
  color: #6ee7b7;
}

body.dark-mode .alert-danger {
  background-color: #7f1d1d;
  color: #fca5a5;
}

body.dark-mode .alert-warning {
  background-color: #78350f;
  color: #fbbf24;
}

body.dark-mode .alert-info {
  background-color: #1e3a5f;
  color: #7dd3fc;
}

/* --- Buttons --- */
body.dark-mode .btn-light {
  background-color: #2e2e2e;
  border-color: #475569;
  color: var(--text-primary);
}

body.dark-mode .btn-outline-secondary {
  color: var(--text-primary);
  border-color: #475569;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: #2e2e2e;
  border-color: #737373;
  color: var(--text-primary);
}

body.dark-mode .btn-outline-danger {
  color: #fca5a5;
  border-color: #991b1b;
}

body.dark-mode .btn-outline-danger:hover {
  background-color: #991b1b;
  color: #fff;
}

body.dark-mode .btn-close {
  filter: invert(1);
}

/* --- Flash toasts --- */
body.dark-mode .flash-toast.alert-success {
  background-color: #064e3b;
  color: #6ee7b7;
  border-color: #047857;
}

body.dark-mode .flash-toast.alert-danger {
  background-color: #7f1d1d;
  color: #fca5a5;
  border-color: #991b1b;
}

/* --- Cards --- */
body.dark-mode .card {
  background-color: var(--card-bg);
}

body.dark-mode .card-header {
  background-color: transparent;
  border-color: var(--border-color);
}

/* --- Chart containers --- */
body.dark-mode .chart-container {
  background-color: var(--card-bg);
}

/* --- Badges --- */
body.dark-mode .badge.bg-light {
  background-color: #2e2e2e !important;
  color: var(--text-primary) !important;
}

body.dark-mode .badge-status {
  opacity: 0.9;
}

body.dark-mode .badge-status.in-service { background-color: #064e3b; color: #6ee7b7; }
body.dark-mode .badge-status.maintenance { background-color: #78350f; color: #fbbf24; }
body.dark-mode .badge-status.out-of-service { background-color: #7f1d1d; color: #fca5a5; }
body.dark-mode .badge-status.retired { background-color: #2e2e2e; color: #a3a3a3; }
body.dark-mode .badge-status.scheduled { background-color: #78350f; color: #fbbf24; }
body.dark-mode .badge-status.pending { background-color: #164e63; color: #67e8f9; }

/* --- Breadcrumbs --- */
body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
}

body.dark-mode .breadcrumb-item.active {
  color: var(--text-muted);
}

body.dark-mode .breadcrumb-item a {
  color: var(--brand-color);
}

/* --- Dropdowns --- */
body.dark-mode .dropdown-menu {
  background-color: #1a1a1a;
  border-color: var(--border-color);
}

body.dark-mode .dropdown-item {
  color: var(--text-primary);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: #2e2e2e;
  color: var(--text-primary);
}

/* --- Accordion --- */
body.dark-mode .accordion-item {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

body.dark-mode .accordion-button {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: rgba(255, 153, 51, 0.1);
  color: var(--brand-color);
}

body.dark-mode .accordion-button::after {
  filter: invert(1);
}

body.dark-mode .accordion-body {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

/* --- Pagination --- */
body.dark-mode .page-link {
  background-color: #1a1a1a;
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.dark-mode .page-item.active .page-link {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: #fff;
}

/* --- Modal --- */
body.dark-mode .modal-content {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.dark-mode .modal-header {
  border-color: var(--border-color);
}

body.dark-mode .modal-footer {
  border-color: var(--border-color);
}

body.dark-mode .btn-close {
  filter: invert(1);
}

/* --- Text utility overrides --- */
body.dark-mode .text-dark {
  color: var(--text-primary) !important;
}

body.dark-mode .text-muted {
  color: var(--text-muted) !important;
}

/* Bootstrap ships .text-secondary with !important, so its light-theme gray
   (#6c757d) would otherwise stay on dark cards and become unreadable
   (e.g. Uptime/Memory labels on the server status card). Re-assert the
   theme's muted colors with !important to win the specificity battle. */
body.dark-mode .text-secondary {
  color: var(--text-secondary) !important;
}

/* Card content inherits from body, but make it explicit so metric values
   inside tiles are always readable in dark mode. */
body.dark-mode .card,
body.dark-mode .card-body {
  color: var(--text-primary);
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: var(--text-primary);
}

body.dark-mode .card-header h5,
body.dark-mode .card-header h6 {
  color: var(--text-primary);
}

/* --- Sidebar background overrides --- */
body.dark-mode .bg-body-secondary {
  background-color: #141414 !important;
}

/* --- Customer group accordion --- */
body.dark-mode .customer-group-toggle {
  color: var(--text-primary);
}

body.dark-mode .customer-group-toggle:hover {
  color: var(--brand-color);
}

/* --- Misc --- */
body.dark-mode .input-group-text {
  background-color: #2e2e2e;
  border-color: var(--border-color);
  color: var(--text-secondary);
}

body.dark-mode .table-responsive {
  background-color: transparent;
}

body.dark-mode hr {
  border-color: var(--border-color);
}

body.dark-mode .main-content a:not(.btn) {
  color: var(--brand-color);
}

body.dark-mode .small,
body.dark-mode small {
  color: var(--text-muted);
}

body.dark-mode .device-status-in-service { color: #34d399; }
body.dark-mode .device-status-maintenance { color: #fbbf24; }
body.dark-mode .device-status-out-of-service { color: #f87171; }
body.dark-mode .device-status-retired { color: #a3a3a3; }

/* --- Charts (TanStack Charts mounts SVG into .chart-mount) --- */

/* --- Base --- */
body {
  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background-color: var(--page-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* --- Navbar (transitioning to sidebar) --- */
.navbar {
  transition: margin-left 0.3s ease;
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  background-color: var(--sidebar-bg);
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  padding: 1rem 1rem 2rem;
  color: var(--text-secondary);
  z-index: 100;
  transition: width 0.3s ease, margin-left 0.3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Royal gold hairline along the sidebar's inner edge. */
.sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--gold-soft) 22%,
    var(--gold) 50%,
    var(--gold-soft) 78%,
    transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* --- Sidebar top row: brand + collapse toggle --- */
.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #f1f1f1;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-brand:hover {
  color: #ffffff;
}

.sidebar-brand svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.sidebar-brand .sidebar-brand-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.brand-icon-preview {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  padding: 4px;
}

.sidebar.collapsed .sidebar-top {
  justify-content: center;
}

.sidebar.collapsed .sidebar-brand {
  display: none;
}

.sidebar.collapsed .sidebar-brand span {
  display: none;
}

.sidebar.collapsed .sidebar-brand svg {
  width: 24px;
  height: 24px;
}

.sidebar-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--sidebar-link-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.sidebar-collapse:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.sidebar-collapse svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.sidebar.collapsed .sidebar-collapse svg {
  transform: rotate(180deg);
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-nav li {
  margin-bottom: 0.25rem;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--sidebar-link-color);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  font-size: 0.9375rem;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.sidebar-nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.sidebar-nav a.active {
  background-color: rgba(255, 153, 51, 0.15);
  color: var(--sidebar-link-active);
}

.sidebar-nav a svg,
.sidebar-nav a .sidebar-nav-icon,
.sidebar-logout-btn .sidebar-nav-icon,
.sidebar-collapse .sidebar-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.sidebar.collapsed .sidebar-nav a .sidebar-nav-icon,
.sidebar.collapsed .sidebar-settings-btn .sidebar-nav-icon {
  width: 24px;
  height: 24px;
}

.tile-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Collapsed sidebar: links become accessible via hover/focus */
.sidebar.collapsed a svg {
  margin-right: 0;
}

.sidebar.collapsed .sidebar-nav a,
.sidebar.collapsed .sidebar-logout-btn,
.sidebar.collapsed .sidebar-settings-btn {
  padding: 0.75rem 0;
  justify-content: center;
  gap: 0;
}

.sidebar.collapsed a span {
  display: none;
}

/* --- Sidebar footer: language switcher + logout, separated by a thin border --- */
.sidebar-footer {
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--border-color);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-settings-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--sidebar-link-color);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  font-size: 0.9375rem;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.sidebar-settings-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.sidebar-settings-btn.active {
  background-color: rgba(255, 153, 51, 0.15);
  color: var(--sidebar-link-active);
}

.sidebar-settings-btn svg,
.sidebar-settings-btn .sidebar-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.sidebar-logout-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: var(--sidebar-link-color);
  border-radius: var(--border-radius-sm);
  font-size: 0.9375rem;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.sidebar-logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.sidebar-logout-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-footer span {
  display: none;
}

/* --- Main Content --- */
.main-content {
  margin-left: var(--sidebar-width);
  padding: 2rem 1.5rem;
  width: calc(100% - var(--sidebar-width));
  max-width: 1760px;
  margin-right: auto;
  transition: margin-left 0.3s ease, width 0.3s ease;
}

.main-content.collapsed {
  margin-left: var(--sidebar-collapsed-width);
  width: calc(100% - var(--sidebar-collapsed-width));
}

/* --- Topbar for mobile --- */
.topbar {
  display: none; /* shown on mobile small screens */
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background-color: var(--sidebar-bg);
  color: #ebebeb;
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  z-index: 100;
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: 4.5rem;
  line-height: normal;
  border-bottom: 1px solid var(--border-color);
  transition: left 0.3s ease;
}

/* Royal gold hairline along the topbar's bottom edge. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-soft) 15%,
    var(--gold) 50%,
    var(--gold-soft) 85%,
    transparent 100%);
  opacity: 0.8;
  pointer-events: none;
}

.topbar .breadcrumb {
  margin-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.topbar .breadcrumb-item a {
  color: #d6d6d6;
}

.topbar .breadcrumb-item a:hover {
  color: #ffffff;
}

.topbar .breadcrumb-item.active {
  color: #a3a3a3;
}

.topbar.collapsed {
  left: var(--sidebar-collapsed-width);
}

.topbar-toggle {
  display: none;
  background: none;
  border: none;
  color: #ebebeb;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.topbar-toggle:hover,
.topbar-toggle:focus-visible {
  color: #ffffff;
}

@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    width: 100%;
    max-width: none;
    padding-top: 6.5rem; /* clear the fixed topbar */
  }

  .main-content.collapsed {
    margin-left: 0;
  }

  .topbar {
    display: flex;
    left: 0;
    right: 0;
    margin-left: 0;
    width: 100%;
  }

  .topbar.collapsed {
    left: 0;
  }

  .topbar-toggle {
    display: block;
  }
}

/* --- Cards --- */
/* Every tile (stat tiles, settings, QR generation, maintenance logs,
   requests, roadmap, audit sessions, notes, server status, ...) gets the
   royal gold edge highlight + soft glow on hover. Glow only — no transform
   here so position:fixed children (modals) are never re-parented. */
.card {
  margin-bottom: 1.5rem;
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: none;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.25s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-soft) 18%,
    var(--gold) 50%,
    var(--gold-soft) 82%,
    transparent 100%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

.card:hover {
  box-shadow:
    var(--card-shadow),
    0 0 0 1px var(--gold-soft),
    0 0 20px rgba(201, 162, 39, 0.15);
}

/* Nested utility cards (inline forms etc.) stay quiet. */
.card .card {
  box-shadow: none;
}
.card .card::before {
  display: none;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--border-color);
  padding: 0.875rem 1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.card-body {
  padding: 1.25rem 1rem;
}

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
}

/* --- Buttons --- */
.btn {
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: var(--brand-contrast);
  /* keep dark text through hover/active (Bootstrap compiles white) */
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-disabled-color: var(--brand-contrast);
}

.btn-primary:hover {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
}

.btn-secondary {
  background-color: #737373;
  border-color: #737373;
  color: var(--brand-contrast);
}

.btn-success {
  background-color: var(--status-in-service);
  border-color: var(--status-in-service);
  /* dark text on the green (Generate) button in BOTH themes */
  color: var(--brand-contrast);
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-disabled-color: var(--brand-contrast);
}

.btn-warning {
  background-color: var(--status-scheduled);
  border-color: var(--status-scheduled);
  color: var(--brand-contrast);
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-disabled-color: var(--brand-contrast);
}

/* Belt & braces: anchor-styled buttons must never inherit dark-mode link
   colours (orange-on-orange tiles). */
body.dark-mode .main-content a.btn-primary,
body.dark-mode .main-content a.btn-success,
body.dark-mode .main-content a.btn-warning,
body.dark-mode .main-content a.btn-danger {
  color: var(--brand-contrast);
}

.btn-danger {
  background-color: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.btn-light {
  background-color: #f1f1f1;
  border-color: #d6d6d6;
  color: var(--text-primary);
}

.btn:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: 2px;
}

/* --- Form elements --- */
.form-control {
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.15);
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.form-select {
  border-radius: var(--border-radius-sm);
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  color: var(--text-primary);
}

.form-select:focus {
  border-color: var(--brand-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.15);
}

/* --- Tables --- */
.table {
  color: var(--text-primary);
  border-color: var(--border-color);
}

.table thead th {
  background-color: var(--card-bg);
  border-bottom: 2px solid var(--border-color);
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-top: 1px solid var(--border-color);
}

.table tbody tr:hover {
  background-color: rgba(255, 153, 51, 0.03);
}

.table .badge {
  font-weight: 600;
  padding: 0.45em 0.7em;
}

/* --- Maintenance tables: readable content with natural wrapping --- */
#logsTable,
#requestsTable {
  table-layout: auto;
  width: 100%;
  min-width: 900px;
}

#logsTable thead th,
#requestsTable thead th {
  white-space: normal;
  font-weight: 600;
}

#logsTable tbody td,
#requestsTable tbody td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

#logsTable td:last-child,
#requestsTable td:last-child {
  white-space: normal;
}

/* Allow action column content to wrap */
#logsTable td:last-child .d-flex,
#requestsTable td:last-child .d-flex {
  white-space: normal;
}

/* Complete form: compact inline layout */
.complete-form .form-control-sm {
  width: auto;
  flex: 1;
  min-width: 0;
}

.complete-form .complete-row {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.complete-form .complete-row:last-child {
  margin-bottom: 0;
}

/* --- Sticky flash toast --- */
.flash-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: 600px;
  width: calc(100% - 2rem);
  padding: 0.875rem 1.25rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.flash-toast.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-0.5rem);
  pointer-events: none;
}

.flash-toast.alert-success {
  background-color: #ecfdf5;
  color: var(--status-in-service);
  border: 1px solid #a7f3d0;
}

.flash-toast.alert-danger {
  background-color: #fef2f2;
  color: var(--status-out-of-service);
  border: 1px solid #fecaca;
}

.flash-toast .btn-close {
  float: right;
  margin: -0.25rem -0.5rem -0.25rem 0.5rem;
}

/* --- Alerts --- */
.alert {
  border-radius: var(--border-radius-sm);
  border: none;
  padding: 0.875rem 1.25rem;
}

.alert-success {
  background-color: #ecfdf5;
  color: var(--status-in-service);
}

.alert-warning {
  background-color: #fffbeb;
  color: var(--status-scheduled);
}

.alert-danger {
  background-color: #fef2f2;
  color: var(--status-out-of-service);
}

/* --- Breadcrumbs --- */
.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
  content: "/";
}

/* --- Global Search --- */
.global-search {
  position: relative;
  max-width: 300px;
}

.global-search input {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  font-size: 0.9375rem;
}

.global-search input:focus {
  border-color: var(--brand-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.15);
}

.global-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

/* --- Status badges --- */
.badge-status {
  padding: 0.45em 0.7em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}

.badge-status.in-service {
  background-color: #d1fae5;
  color: var(--status-in-service);
}

.badge-status.maintenance {
  background-color: #fef3c7;
  color: var(--status-maintenance);
}

.badge-status.out-of-service {
  background-color: #fee2e2;
  color: var(--status-out-of-service);
}

.badge-status.retired {
  background-color: #ebebeb;
  color: var(--status-retired);
}

.badge-status.scheduled {
  background-color: #fef3c7;
  color: var(--status-scheduled);
}

.badge-status.pending {
  background-color: #fef9c3;
  color: var(--status-pending);
}

/* --- Notifications / counters --- */
.notification-dot {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  background-color: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--sidebar-bg);
}

/* --- Responsive adjustments --- */
@media (max-width: 767.98px) {
  .container-fluid,
  .container {
    padding-left: 0;
    padding-right: 0;
  }
  
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }

  .topbar {
    display: flex;
  }

  .topbar-toggle {
    display: block;
  }

  .card {
    margin-bottom: 1rem;
  }

  .table-responsive {
    margin-bottom: 1rem;
  }
}

/* --- Chart container --- */
/* Flex column layout so the chart mount only takes the space LEFT OVER after
   the title, keeping axes / legends inside the tile. The height MUST be
   definite (never min-height/height:auto): the charts' ResizeObserver would
   otherwise loop forever — chart grows -> box grows -> chart grows. The
   clamp() keeps it a fixed value at any viewport while scaling on screens. */
.chart-container {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  padding: 1rem;
  height: clamp(320px, 45vh, 500px);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Royal gold hairline along the tile's top edge. */
.chart-container::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-soft) 18%,
    var(--gold) 50%,
    var(--gold-soft) 82%,
    transparent 100%);
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
}

.chart-container:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.12),
    0 0 0 1px var(--gold-soft),
    0 0 22px rgba(201, 162, 39, 0.16);
}

.chart-container > .card-title {
  flex: 0 0 auto;
}

/* TanStack Charts mounts its responsive SVG into .chart-mount elements.
   The tile keeps a definite height (see above) so the library's
   ResizeObserver can never grow the box; the mount takes the leftover
   space below the title. */
.chart-mount {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* Empty-state placeholder (rendered by TSCharts when there is no data). */
.chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pie / donut variant: square chart area + HTML legend side by side. */
.chart-mount.has-legend {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.chart-mount .chart-pie-area {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.chart-legend {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 46%;
  font-size: 0.8125rem;
}

.chart-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
}

.chart-legend .legend-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.25rem;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode .chart-legend .legend-swatch {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 1px 3px rgba(0, 0, 0, 0.5);
}

.chart-legend .legend-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-legend .legend-value {
  margin-left: auto;
  padding-left: 0.75rem;
  color: var(--text-primary);
  font-weight: 600;
}

/* --- TanStack Charts native tooltip (pinned by click) --- */
.tschart-tip {
  background: var(--tooltip-bg, #1a1a1a);
  color: var(--tooltip-text, #f1f1f1);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 12px rgba(201, 162, 39, 0.18);
}

/* --- TanStack Charts dark-mode axis / grid overrides --- */
body.dark-mode .chart-mount svg text {
  fill: var(--text-secondary, #a3a3a3);
}
body.dark-mode .chart-mount svg line,
body.dark-mode .chart-mount svg path[data-type="grid"] {
  stroke: var(--border-color, #2e2e2e);
}

/* =====================================================================
   Royal edge highlights & glows (TanStack Charts SVG structure):
     g.ts-chart__line   > polyline      — series lines
     g.ts-chart__bar    > rect          — bar marks
     g.ts-chart__arc    > path          — donut / pie slices
     circle[data-ts-chart-focus]        — pinned tooltip focus dot
   "Some edges" carry a regal gold halo; series lines keep a subtle
   brand glow so charts feel premium without turning into a disco.
   ===================================================================== */

/* Series lines: soft brand-coloured glow along the stroke. */
.chart-mount svg .ts-chart__line polyline,
.chart-mount svg .ts-chart__radial-line path {
  filter: drop-shadow(0 1px 3px var(--glow-brand));
}

/* Donut slices: faint gold rim that deepens on hover. */
.chart-mount svg .ts-chart__arc path {
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.chart-mount svg .ts-chart__arc:hover path {
  filter:
    drop-shadow(0 0 6px var(--gold-soft))
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.35));
}

/* Bars: gold edge-glow on hover, with a gentle lift. */
.chart-mount svg .ts-chart__bar rect {
  transition: filter 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.chart-mount svg .ts-chart__bar rect:hover {
  filter: drop-shadow(0 0 7px var(--gold-soft)) brightness(1.06);
  transform: scale(1.03);
}

/* Heatmap cells: rounded by the mark itself; brighten on hover. */
.chart-mount svg .ts-chart__rect rect {
  transition: filter 0.15s ease;
}
.chart-mount svg .ts-chart__rect rect:hover {
  filter: brightness(1.12) drop-shadow(0 0 3px rgba(0, 0, 0, 0.25));
}

/* Pinned-tooltip focus dot: royal gold halo. */
.chart-mount svg circle[data-ts-chart-focus] {
  filter: drop-shadow(0 0 5px var(--gold-soft));
}

/* --- Statistics section on creation pages --- */
.stats-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
}

.stats-section-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

/* --- Maintenance log: action column & photo scaling --- */
.table td:last-child .d-flex {
  white-space: normal;
}

.table td:last-child .form-control {
  min-width: 0;
}

.maintenance-photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
}

.maintenance-photo-sm {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
}

/* --- Search filter bar --- */
.maint-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
}

.maint-search-bar input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  background: var(--page-bg);
  transition: border-color 0.2s;
}

.maint-search-bar input:focus {
  border-color: var(--brand-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.15);
}

.maint-search-bar .search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.maint-search-bar .search-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Maintenance details dropdown panel --- */
.maint-panel-overlay {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.15);
}

.maint-panel-overlay.active {
  display: block !important;
}

.maint-panel {
  display: none !important;
  position: fixed;
  z-index: 1050;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: min(520px, calc(100vw - 2rem));
  max-height: min(80vh, calc(100vh - 4rem));
  overflow: hidden;
  flex-direction: column;
}

.maint-panel.active {
  display: flex !important;
}

.maint-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
  flex-shrink: 0;
}

.maint-panel-header h6 {
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.maint-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: var(--border-radius-sm);
  transition: color 0.15s, background 0.15s;
}

.maint-panel-close:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.05);
}

.maint-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.maint-panel-tab {
  flex: 1;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
}

.maint-panel-tab:hover {
  color: var(--text-primary);
}

.maint-panel-tab.active {
  color: var(--brand-color);
  border-bottom-color: var(--brand-color);
}

.maint-panel-body {
  overflow-y: auto;
  padding: 1rem;
  flex: 1;
  min-height: 0;
}

.maint-panel-tab-content {
  display: none;
}

.maint-panel-tab-content.active {
  display: block;
}

.maint-panel-body .maintenance-photo {
  width: 120px;
  height: 120px;
}

.maint-panel-body .form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.maint-panel-body .step-item {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--page-bg);
}

.maint-panel-body .step-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .maintenance-photo {
    width: 80px;
    height: 80px;
  }

  .maintenance-photo-sm {
    width: 64px;
    height: 64px;
  }

  .maint-panel-overlay.active,
  .sched-panel-overlay.active {
    background: var(--page-bg);
    z-index: 1060;
  }

  .maint-panel.active {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    max-width: 100vw;
    border-radius: 0;
    border: none;
    box-shadow: none;
    inset: 0;
    top: 0 !important;
    left: 0 !important;
    z-index: 1070;
  }

  .maint-panel-body .maintenance-photo {
    width: 100px;
    height: 100px;
  }

  .sched-panel.active {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    max-width: 100vw;
    border-radius: 0;
    border: none;
    box-shadow: none;
    inset: 0;
    top: 0 !important;
    left: 0 !important;
    z-index: 1070;
  }

  .sched-panel-body .maintenance-photo {
    width: 100px;
    height: 100px;
  }
}


/* =====================================================================
   Responsive action buttons (inline on desktop, dropdown on mobile)
   ===================================================================== */
.action-group {
  display: flex;
  justify-content: flex-end;
}

.action-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.action-inline .inline-form {
  margin: 0;
}

.action-dropdown {
  display: none;
}

@media (max-width: 767.98px) {
  .action-inline {
    display: none;
  }

  .action-dropdown {
    display: inline-flex;
  }
}

.action-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0.25rem 0;
}

.action-dropdown .dropdown-menu {
  min-width: 10rem;
}

.action-dropdown form {
  margin: 0;
}

.action-dropdown .dropdown-item {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 0.5rem 1rem;
}

/* --- Scheduling details dropdown panel --- */
.sched-panel-overlay {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.15);
}

.sched-panel-overlay.active {
  display: block !important;
}

.sched-panel {
  display: none !important;
  position: fixed;
  z-index: 1050;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: min(520px, calc(100vw - 2rem));
  max-height: min(80vh, calc(100vh - 4rem));
  overflow: hidden;
  flex-direction: column;
}

.sched-panel.active {
  display: flex !important;
}

.sched-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
  flex-shrink: 0;
}

.sched-panel-header h6 {
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.sched-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: var(--border-radius-sm);
  transition: color 0.15s, background 0.15s;
}

.sched-panel-close:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.05);
}

.sched-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.sched-panel-tab {
  flex: 1;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
}

.sched-panel-tab:hover {
  color: var(--text-primary);
}

.sched-panel-tab.active {
  color: var(--brand-color);
  border-bottom-color: var(--brand-color);
}

.sched-panel-body {
  overflow-y: auto;
  padding: 1rem;
  flex: 1;
  min-height: 0;
}

.sched-panel-tab-content {
  display: none;
}

.sched-panel-tab-content.active {
  display: block;
}

.sched-panel-body .form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.sched-panel-body .maintenance-photo {
  width: 120px;
  height: 120px;
}

.sched-panel-body .history-item {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--page-bg);
}

.sched-panel-body .history-item:last-child {
  margin-bottom: 0;
}

/* =====================================================================
   End of stylesheet
   ===================================================================== */