:root {
  --brand: #fd9644;
  --brand-contrast: #ffffff;

  /* Bootstrap 5 variables (picked up by many components) */
  --bs-primary: #fd9644;
  --bs-primary-rgb: 253, 150, 68;
}

/* Bootstrap 4/5 overrides */
.btn-primary {
  color: var(--brand-contrast) !important;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #e68330 !important;
  border-color: #e68330 !important;
}

.btn-outline-primary {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--brand-contrast) !important;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

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

/* Button danger, success, and warning styled as primary */
.btn-danger,
.btn-success,
.btn-warning,
.btn-secondary {
    color: var(--brand-contrast) !important;
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-success:hover,
.btn-success:focus,
.btn-warning:hover,
.btn-warning:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #e68330 !important;
    border-color: #e68330 !important;
}

.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-secondary {
    color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus  {
    color: var(--brand-contrast) !important;
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}


/* Links (optional) */
a { color: var(--brand); }
a:hover, a:focus { color: #e68330; }

/* Form focus (optional) */
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--bs-primary-rgb, 253,150,68), .5);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 253,150,68), .25);
}

/* Pagination (optional) */
.page-item.active .page-link {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.page-link { color: var(--brand); }
.page-link:hover { color: #e68330; }



/* ...existing code... */

/* Extra brand variables */
:root {
  --brand-600: #e68330;
  --brand-100: #ffe7d1;

  /* Bootstrap link colors */
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-600);
}

/* Navbar */
.navbar.bg-primary,
.navbar .navbar-brand,
.navbar .nav-link.active {
  color: var(--brand-contrast) !important;
}
.navbar.bg-primary,
.navbar.navbar-primary {
  background-color: var(--brand) !important;
}
.navbar .nav-link { color: #fff !important; opacity: .9; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { opacity: 1; }

/* Cards */
.card.border-primary { border-color: var(--brand) !important; }
.card .card-header.bg-primary { background-color: var(--brand) !important; color: #fff; }

/* Alerts */
.alert-primary {
  color: #5a2b00;
  background-color: var(--brand-100);
  border-color: var(--brand);
}

/* Badges */
.badge.bg-primary { background-color: var(--brand) !important; }
.badge.border-primary { border: 1px solid var(--brand) !important; color: var(--brand); }

/* Pills/Tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--brand) !important;
}
.nav-pills .nav-link { color: var(--brand); }

/* Tables */
.table thead th {
  border-bottom: 2px solid var(--brand) !important;
}
.table-primary { --bs-table-bg: #ffefe2; --bs-table-border-color: var(--brand); }

/* Progress */
.progress-bar { background-color: var(--brand) !important; }

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

/* Sidebar (if you have one) */
.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"] {
  color: var(--brand) !important;
  font-weight: 600;
  background: rgba(253,150,68,.1);
  border-left: 3px solid var(--brand);
}

/* Focus + pagination polish */
.page-link:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}



/* ...existing code... */

/* Global page spacing and layout */
:root {
    --page-y-top: 12px;     /* vertical padding at top of pages */
    --page-y-bottom: 24px;  /* vertical padding at bottom of pages */
    --sidebar-w: 72px;      /* sidebar width used across app */
}

/* Apply uniform vertical padding to all pages */
html, body { min-height: 100%; }
body {
  padding-block: var(--page-y);
  background-color: #f8f9fa;
}

/* If a sidebar is present, shift main UI to the right */
.sidebar {
  width: var(--sidebar-w);
  background: #fff;
  border-right: 1px solid #e6e6e6;
  position: fixed;
  inset: 0 auto 0 0; /* top:0; right:auto; bottom:0; left:0 */
  z-index: 1030;     /* below navbar if needed */
}

/* Move navbar/content/footer when sidebar exists and precedes them */
.sidebar ~ .navbar,
.sidebar ~ .container,
.sidebar ~ .footer,
.sidebar ~ .mobile-nav {
  margin-left: var(--sidebar-w);
}

/* Uniform vertical rhythm for common wrappers */
.container,
.container-fluid {
  padding-top: var(--page-y);
  padding-bottom: var(--page-y);
}

/* Navbar branded + spacing */
.navbar {
  background-color: var(--brand) !important;
  color: var(--brand-contrast) !important;
  margin-bottom: var(--page-y);
}
.navbar .navbar-brand,
.navbar .nav-link { color: #fff !important; opacity: .9; }
.navbar .nav-link:hover, .navbar .nav-link:focus { opacity: 1; }

/* Footer spacing */
.footer { margin-top: var(--page-y); }

/* Mobile tweaks */
@media (max-width: 576px) {
  :root { --page-y: 16px; }
  .sidebar {
    position: fixed;
    left: -250px;
    transition: left .3s ease;
  }
  .sidebar.active { left: 0; }
  .sidebar ~ .navbar,
  .sidebar ~ .container,
  .sidebar ~ .footer,
  .sidebar ~ .mobile-nav {
    margin-left: 0; /* no shift on small screens */
  }
}