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

  /* Bootstrap 5 variables (picked up by many components) */
  --bs-primary: #F97316;
  --bs-primary-rgb: 249, 115, 22;
}

/* 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: #EA580C !important;
  border-color: #EA580C !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: #EA580C !important;
  border-color: #EA580C !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: #EA580C;
}

/* Form focus (optional) */
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--bs-primary-rgb, 249, 115, 22), .5);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 249, 115, 22), .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: #EA580C;
}



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

/* Extra brand variables */
:root {
  --brand-600: #EA580C;
  --brand-100: #FFF7ED;

  /* 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(249, 115, 22, .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: 80px;
  /* 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 */
  }
}



@media (min-width: 1200px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 95%;
  }
}

/* List Group: use theme brand variable instead of hardcoded Bootstrap blue */
.list-group {
  --bs-list-group-active-bg: var(--brand);
  --bs-list-group-active-border-color: var(--brand);
}



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

  /* Bootstrap 5 variables (picked up by many components) */
  --bs-primary: #F97316;
  --bs-primary-rgb: 249, 115, 22;

  /* Button focus shadow using brand hover color */
  --bs-btn-focus-shadow-rgb: 234, 88, 12; /* #EA580C in RGB */
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.25);
}


/* --- Unified Button Styles --- */
:root {
  --brand: #F97316;
  --brand-hover: #EA580C;
  --brand-contrast: #fff;
  --bs-primary: #F97316;
  --bs-primary-rgb: 249, 115, 22;
}

/* All main buttons */
.btn,
.btn-primary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-secondary {
  color: var(--brand-contrast) !important;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: none !important;
}

/* All main buttons hover/focus */
.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.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: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: var(--brand-contrast) !important;
  box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.25) !important; /* #EA580C */
}

/* Outline buttons */
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-secondary {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.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-hover) !important;
  border-color: var(--brand-hover) !important;
  box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.25) !important;
}

/* Focus shadow for all buttons */
.btn:focus,
.btn-primary:focus,
.btn-danger:focus,
.btn-success:focus,
.btn-warning:focus,
.btn-secondary:focus,
.btn-outline-primary:focus,
.btn-outline-danger:focus,
.btn-outline-success:focus,
.btn-outline-warning:focus,
.btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.25) !important;
}

/* Remove any other button border color overrides */
.btn,
.btn-primary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-secondary,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-secondary {
  border-width: 1.5px !important;
}

/* Optional: unify pagination, pills, etc. */
.page-link,
.page-link:hover,
.page-link:focus {
  color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}