:root {
  /* Bilbolaget Brand Colors */
  /*--bilbo-red: #C72831; */
  /*--bilbo-red-rgb: 199, 40, 49; */
  --bilbo-red: #416479;
  --bilbo-red-rgb: 65, 100, 121;
  --bilbo-black: #000000;
  --bilbo-black-rgb: 0, 0, 0;
  --bilbo-white: #FFFFFF;
  --bilbo-white-rgb: 255, 255, 255;
  
  /* Bilbolaget Complementary Colors */
  --bilbo-light-bg: #F3F5F4;
  --bilbo-light-red-1: #FFCCCE;
  --bilbo-light-red-2: #FFE5EA;
  --bilbo-light-gray-1: #ADC1C4;
  --bilbo-light-gray-2: #DDF0EE;
  
  /* Text Colors (Brand Manual Guidelines) */
  --bilbo-text-rich-black: #000000; /* For headlines/larger text */
  --bilbo-text-dark-gray: #282828; /* For softer body text - RGB 40/40/40 */
  --bilbo-text-light-gray: #505050; /* For even softer body text - RGB 80/80/80 */
  
  /* Bootstrap Variable Overrides using Bilbolaget Colors */
  --bs-primary: var(--bilbo-red);
  --bs-primary-rgb: var(--bilbo-red-rgb);
  --bs-secondary: var(--bilbo-text-dark-gray);
  --bs-secondary-rgb: 40, 40, 40;
  --bs-success: #25B4B4;
  --bs-success-rgb: 37, 180, 180;
  --bs-warning: #FFB144;
  --bs-warning-rgb: 255, 177, 68;
  --bs-info: var(--bilbo-light-bg);
  --bs-info-rgb: 243, 245, 244;
  --bs-light: var(--bilbo-white);
  --bs-light-rgb: var(--bilbo-white-rgb);
  --bs-dark: var(--bilbo-black);
  --bs-dark-rgb: var(--bilbo-black-rgb);
}

.bg-bilbo-light-gray-2 {
  background-color: var(--bilbo-light-gray-2) !important;
}
/* ==============================================
   PAGE CONTAINER - Ultra-wide Monitor Support
   ============================================== */

/* Main page container that limits width on ultra-wide screens */
.page-container {
  max-width: 1600px; /* Maximum width for ultra-wide monitors */
  margin: 0 auto; /* Center the container */
  width: 100%; /* Full width up to max-width */
  min-height: 100vh; /* Ensure full height */
  background: var(--bilbo-light-bg);
  position: relative;
}

/* Add subtle shadow and borders on ultra-wide screens */
@media (min-width: 1921px) {
  .page-container {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    border-left: 1px solid var(--bilbo-light-gray-1);
    border-right: 1px solid var(--bilbo-light-gray-1);
  }
  
  /* Add a subtle background to the body on ultra-wide screens */
  body {
    background: linear-gradient(135deg, #e8eaeb 0%, #f5f7f6 100%);
  }
}

/* Ensure proper spacing on different screen sizes */
@media (min-width: 1400px) and (max-width: 1920px) {
  .page-container {
    margin: 0 auto;
  }
}

@media (max-width: 1399px) {
  .page-container {
    max-width: 100%;
    margin: 0;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .page-container {
    min-height: 100vh;
  }
}

/* ==============================================
   END PAGE CONTAINER
   ============================================== */

/* Bilbolaget Typography - Based on Brand Manual Guidelines */

/* Base typography using Monsal Gothic */
body {
  font-family: 'Monsal Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-weight: 350; /* Monsal Gothic Book for general body text */
  background: var(--bilbo-light-bg);
  color: var(--bilbo-text-dark-gray);
  line-height: 1.6;
}

/* Typography Weight Guidelines from Brand Manual */

/* Headlines - Use Bold to Extra Bold weights */
h1, .h1 {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 800; /* Extra Bold for major headlines */
  color: var(--bilbo-black);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h2, .h2 {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 700; /* Bold for headlines */
  color: var(--bilbo-black);
  line-height: 1.3;
  margin-bottom: 0.875rem;
}

h3, .h3 {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 700; /* Bold for headlines */
  color: var(--bilbo-black);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

h4, .h4 {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium for smaller headlines */
  color: var(--bilbo-black);
  line-height: 1.4;
  margin-bottom: 0.625rem;
}

h5, .h5, h6, .h6 {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium for smaller headlines */
  color: var(--bilbo-black);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

/* Body text weight guidelines */
/* Light weight for black text on white backgrounds */
.text-body-light {
  font-weight: 300; /* Monsal Gothic Light */
  color: var(--bilbo-black);
}

/* Book weight for general body text */
.text-body, p, .lead {
  font-weight: 350; /* Monsal Gothic Book */
  color: var(--bilbo-text-dark-gray);
}

/* Regular weight for text on colored backgrounds */
.text-body-colored-bg {
  font-weight: 400; /* Monsal Gothic Regular */
  color: var(--bilbo-white);
}

/* Medium weight for emphasis text on colored backgrounds */
.text-emphasis-colored-bg {
  font-weight: 500; /* Monsal Gothic Medium */
  color: var(--bilbo-white);
}

/* Comments and annotations - Bold Italic */
.text-comment, .text-annotation {
  font-weight: 700; /* Bold */
  font-style: italic;
  color: var(--bilbo-text-dark-gray);
}

/* Display text - Heavy weight */
.text-display {
  font-weight: 900; /* Heavy for display headlines */
  color: var(--bilbo-black);
}

/* Contrast-aware text colors based on brand manual */
.text-soft {
  color: var(--bilbo-text-light-gray); /* RGB 80/80/80 for softer text */
}

.text-rich-black {
  color: var(--bilbo-black); /* Rich black for headlines */
  font-weight: 700;
}

/* Optional: override link color */
a, .link-primary {
  color: var(--bilbo-black);
  text-decoration: none;
}
a:hover, .link-primary:hover {
  color: var(--bilbo-black);
  text-decoration: underline;
}

/* Buttons - Updated for Bilbolaget Brand */
.btn-primary {
  background-color: var(--bilbo-red);
  border-color: var(--bilbo-red);
  color: var(--bilbo-white);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium weight for buttons */
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--bilbo-black);
  border-color: var(--bilbo-black);
  color: var(--bilbo-white);
}

.btn-secondary {
  background-color: var(--bilbo-black);
  border-color: var(--bilbo-black);
  color: var(--bilbo-white);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--bilbo-text-dark-gray);
  border-color: var(--bilbo-text-dark-gray);
  color: var(--bilbo-white);
}

.btn-outline-primary {
  border-color: var(--bilbo-red);
  color: var(--bilbo-red);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--bilbo-red);
  border-color: var(--bilbo-red);
  color: var(--bilbo-white);
}

.btn-light {
  background-color: var(--bilbo-light-bg);
  border-color: var(--bilbo-light-bg);
  color: var(--bilbo-black);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400; /* Regular weight for light buttons */
}
.btn-light:hover, .btn-light:focus {
  background-color: var(--bilbo-light-gray-2);
  border-color: var(--bilbo-light-gray-2);
  color: var(--bilbo-black);
}

.btn-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  color: var(--bilbo-white);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
}
.btn-success:hover, .btn-success:focus {
  background-color: #178383;
  border-color: #178383;
  color: var(--bilbo-white);
}

.btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: var(--bilbo-black);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
}
.btn-warning:hover, .btn-warning:focus {
  background-color: #e69c31;
  border-color: #e69c31;
  color: var(--bilbo-white);
}

/* Cards - Updated for Bilbolaget Brand */
.card {
  border: 1px solid var(--bilbo-light-gray-1);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(var(--bilbo-black-rgb), 0.06);
  background-color: var(--bilbo-white);
}

.card-header {
  background-color: var(--bilbo-black);
  color: var(--bilbo-white);
  border: none;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium weight for card headers */
  font-size: 1.2rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.card-body {
  padding: 1rem;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350; /* Book weight for card body text */
}
/* Navbar - Updated for Bilbolaget Brand */
.navbar, .navbar-light {
  background-color: var(--bilbo-white) !important;
  border-bottom: 1px solid var(--bilbo-light-bg);
  font-family: 'Monsal Gothic', sans-serif;
}

.navbar-brand,
.nav-link {
  color: var(--bilbo-black) !important;
  font-weight: 400; /* Regular weight for navigation */
}
.nav-link.active, .nav-link:focus, .nav-link:hover {
  color: var(--bilbo-red) !important;
  font-weight: 500; /* Medium weight for active/hover states */
}

/* Alerts - Updated for Bilbolaget Brand */
.alert-primary {
  background-color: var(--bilbo-light-red-2);
  color: var(--bilbo-black);
  border-color: var(--bilbo-red);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400;
}
.alert-success {
  background-color: #e6f7f7;
  color: var(--bs-success);
  border-color: var(--bs-success);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400;
}
.alert-warning {
  background-color: #fff6e5;
  color: var(--bs-warning);
  border-color: var(--bs-warning);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400;
}
.alert-secondary {
  background-color: var(--bilbo-light-bg);
  color: var(--bilbo-text-dark-gray);
  border-color: var(--bilbo-text-dark-gray);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400;
}

/* Table - Updated for Bilbolaget Brand */
.table-primary {
  background-color: var(--bilbo-light-red-2);
  color: var(--bilbo-black);
}

.table {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350; /* Book weight for table content */
}

.table th {
  font-weight: 500; /* Medium weight for table headers */
  color: var(--bilbo-black);
}

/* Misc: body, headings, backgrounds - Updated for Bilbolaget Brand */
body {
  background: var(--bilbo-light-bg);
  color: var(--bilbo-text-dark-gray);
  font-family: 'Monsal Gothic', sans-serif;
}

/* Text utility classes */
.text-primary { color: var(--bilbo-red) !important; }
.text-success { color: var(--bs-success) !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-secondary { color: var(--bilbo-text-dark-gray) !important; }
.text-dark { color: var(--bilbo-black) !important; }
.text-muted { color: var(--bilbo-text-light-gray) !important; }

.bg-primary { background-color: var(--bilbo-red) !important; }
.bg-success { background-color: var(--bs-success) !important; }
.bg-warning { background-color: var(--bs-warning) !important; }
.bg-secondary { background-color: var(--bilbo-text-dark-gray) !important; }
.bg-light { background-color: var(--bilbo-light-bg) !important; }
.bg-info { background-color: var(--bilbo-light-gray-2) !important; }
.bg-dark { background-color: var(--bilbo-black) !important; }
.bg-white { background-color: var(--bilbo-white) !important; }
.bg-pink { background-color: var(--bilbo-light-red-1) !important; }

/* Dashboard styles - Updated for Bilbolaget Brand */
.dashboard-container {
  padding: 0.5rem 0;
}

.welcome-header {
  background: var(--bilbo-white);
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(var(--bilbo-black-rgb), 0.1);
}

.welcome-title {
  color: var(--bilbo-black);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 800; /* Extra Bold for major headlines */
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.welcome-subtitle {
  color: var(--bilbo-text-dark-gray);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350; /* Book weight for subtitle */
  font-size: 1.1rem;
}

.card-header {
  background-color: var(--bilbo-black);
  color: white;
  border: none;
  font-weight: 600;
  font-size: 1.2rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.card-body {
  padding: 1rem;
}

.booking-card {
  border-left: 4px solid var(--bilbo-red);
  margin-bottom: 1rem;
  transition: transform 0.2s ease;
  font-family: 'Monsal Gothic', sans-serif;
}

.booking-card:hover {
  transform: translateY(-2px);
}

.booking-header {
  background: var(--bilbo-light-bg);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--bilbo-light-gray-1);
}

.booking-title {
  color: var(--bilbo-black);
  font-weight: 500; /* Medium weight for booking titles */
  margin-bottom: 0.25rem;
}

.booking-dates {
  color: var(--bilbo-text-dark-gray);
  font-size: 0.9rem;
  font-weight: 350; /* Book weight */
}

.booking-body {
  padding: 1.5rem;
}

.booking-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.booking-info {
  color: var(--bilbo-black);
  font-weight: 350; /* Book weight */
}

.booking-status {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500; /* Medium weight for status badges */
  font-family: 'Monsal Gothic', sans-serif;
}

.status-confirmed {
  background: #d1fae5;
  color: #065f46;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.btn-primary-custom {
  background: var(--bilbo-red);
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1.5rem;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium weight */
  color: var(--bilbo-white);
}

.btn-primary-custom:hover {
  background: var(--bilbo-black);
  color: var(--bilbo-white);
}

.btn-outline-custom {
  border: 2px solid var(--bilbo-red);
  color: var(--bilbo-red);
  border-radius: 20px;
  padding: 0.5rem 1.5rem;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium weight */
  background: transparent;
}

.btn-outline-custom:hover {
  background: var(--bilbo-red);
  color: var(--bilbo-white);
}

.stats-card {
  text-align: center;
  padding: 1.5rem;
  font-family: 'Monsal Gothic', sans-serif;
}

.stats-number {
  font-size: 2.5rem;
  font-weight: 800; /* Extra Bold for stats numbers */
  color: var(--bilbo-red);
  margin-bottom: 0.5rem;
}

.stats-label {
  color: var(--bilbo-text-dark-gray);
  font-weight: 500; /* Medium weight */
  text-transform: uppercase;
  font-size: 0.9rem;
}

.benefits-section {
  background: linear-gradient(135deg, rgba(243, 245, 244, 0.5) 0%, rgba(243, 245, 244, 0.8) 100%);
  padding: 2rem;
}

.benefits-title {
  color: var(--bilbo-black);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 700; /* Bold for section titles */
  margin-bottom: 1rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--bilbo-black);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350; /* Book weight */
}

.benefit-icon {
  background: var(--bilbo-red);
  color: var(--bilbo-white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-size: 0.9rem;
}

.quick-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1;
  min-width: 200px;
  padding: 1rem;
  border: none;
  border-radius: 10px;
  background: var(--bilbo-white);
  color: var(--bilbo-black);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium weight for action buttons */
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  color: var(--bilbo-red);
  text-decoration: none;
}

.action-icon {
  font-size: 1.2rem;
}

/* Liquid Glass Modal Styles - Updated for Bilbolaget Brand */
.modal-backdrop {
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.liquid-glass-modal .modal-content {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
  font-family: 'Monsal Gothic', sans-serif;
}

.liquid-glass-modal .modal-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1.5rem 2rem;
  border-radius: 24px 24px 0 0;
  position: relative;
}

.liquid-glass-modal .modal-title {
  color: var(--bilbo-black);
  font-weight: 700; /* Bold for modal titles */
  font-size: 1.5rem;
  margin: 0;
}

.liquid-glass-modal .btn-close {
  background: rgba(120, 120, 128, 0.16);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  opacity: 1;
  position: relative;
  border: none;
  transition: all 0.2s ease;
}

.liquid-glass-modal .btn-close:hover {
  background: rgba(120, 120, 128, 0.24);
  transform: scale(1.05);
}

.liquid-glass-modal .modal-body {
  padding: 2rem;
  color: var(--bilbo-text-dark-gray);
  line-height: 1.6;
  font-weight: 350; /* Book weight for modal body */
}

.liquid-glass-modal .modal-footer {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1.5rem 2rem;
  border-radius: 0 0 24px 24px;
  gap: 1rem;
}

.btn-glass-primary {
  background: linear-gradient(135deg, var(--bilbo-red) 100%);
  border: 1px solid rgba(var(--bilbo-red-rgb), 0.3);
  border-radius: 12px;
  padding: 12px 24px;
  color: var(--bilbo-white);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium weight */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}

.btn-glass-primary:hover {
  background: linear-gradient(135deg, var(--bilbo-black) 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: var(--bilbo-white);
}

.btn-glass-secondary {
  background: rgba(120, 120, 128, 0.16);
  border: 1px solid rgba(120, 120, 128, 0.24);
  border-radius: 12px;
  padding: 12px 24px;
  color: var(--bilbo-black);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium weight */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.btn-glass-secondary:hover {
  background: rgba(120, 120, 128, 0.24);
  transform: translateY(-1px);
  color: var(--bilbo-black);
}

/* Form Controls - Updated for Bilbolaget Brand */
.form-label {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500; /* Medium weight for form labels */
  color: var(--bilbo-black);
  margin-bottom: 0.75rem;
}

.form-control {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350; /* Book weight for input text */
  border: 2px solid var(--bilbo-light-gray-1);
  border-radius: 8px;
  /*padding: 12px 16px;*/
  transition: border-color 0.3s ease;
  background-color: var(--bilbo-white);
  color: var(--bilbo-text-dark-gray);
}

.form-control:focus {
  border-color: var(--bilbo-red);
  box-shadow: 0 0 0 0.2rem rgba(var(--bilbo-red-rgb), 0.25);
  background-color: var(--bilbo-white);
  color: var(--bilbo-black);
}

.form-control::placeholder {
  color: var(--bilbo-text-light-gray);
  font-weight: 300; /* Light weight for placeholder text */
}

/* Form Check (Checkboxes and Radio buttons) */
.form-check-input:checked {
  background-color: var(--bilbo-red);
  border-color: var(--bilbo-red);
}

.form-check-input:focus {
  border-color: var(--bilbo-red);
  box-shadow: 0 0 0 0.25rem rgba(var(--bilbo-red-rgb), 0.25);
}

.form-check-label {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350; /* Book weight for check labels */
  color: var(--bilbo-text-dark-gray);
}

/* Select Controls */
.form-select {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350; /* Book weight */
  border: 2px solid var(--bilbo-light-gray-1);
  border-radius: 8px;
  color: var(--bilbo-text-dark-gray);
}

.form-select:focus {
  border-color: var(--bilbo-red);
  box-shadow: 0 0 0 0.2rem rgba(var(--bilbo-red-rgb), 0.25);
}

/* Form Text (Help text) */
.form-text {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 300; /* Light weight for help text */
  color: var(--bilbo-text-light-gray);
}

/* Input Groups */
.input-group-text {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400; /* Regular weight */
  background-color: var(--bilbo-light-bg);
  border-color: var(--bilbo-light-gray-1);
  color: var(--bilbo-text-dark-gray);
}

/* Validation States */
.form-control.is-valid {
  border-color: var(--bs-success);
}

.form-control.is-invalid {
  border-color: var(--bilbo-red);
}

.valid-feedback {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350;
  color: var(--bs-success);
}

.invalid-feedback {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350;
  color: var(--bilbo-red);
}

.card-header:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.dot-wave {
  --uib-size: 47px;
  --uib-speed: 1s;
  --uib-color: var(--bilbo-red); /* Updated to use brand red */

  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: var(--uib-size);
  height: calc(var(--uib-size) * 0.17);
  padding-top: calc(var(--uib-size) * 0.34);
  margin-bottom: 20px;
}

.dot-wave__dot {
  flex-shrink: 0;
  width: calc(var(--uib-size) * 0.17);
  height: calc(var(--uib-size) * 0.17);
  border-radius: 50%;
  background-color: var(--uib-color);
  will-change: transform;
}

.dot-wave__dot:nth-child(1) {
  animation: jump var(--uib-speed) ease-in-out
    calc(var(--uib-speed) * -0.45) infinite;
}

.dot-wave__dot:nth-child(2) {
  animation: jump var(--uib-speed) ease-in-out
    calc(var(--uib-speed) * -0.3) infinite;
}

.dot-wave__dot:nth-child(3) {
  animation: jump var(--uib-speed) ease-in-out
    calc(var(--uib-speed) * -0.15) infinite;
}

.dot-wave__dot:nth-child(4) {
  animation: jump var(--uib-speed) ease-in-out infinite;
}

@keyframes jump {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-200%);
  }
}

/* Bilbolaget Brand Utility Classes */

/* Color Plates (Brand Manual Element) */
.color-plate {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400; /* Regular weight for colored backgrounds */
}

.color-plate-red {
  background-color: var(--bilbo-red);
  color: var(--bilbo-white);
}

.color-plate-black {
  background-color: var(--bilbo-black);
  color: var(--bilbo-white);
}

.color-plate-light {
  background-color: var(--bilbo-light-bg);
  color: var(--bilbo-black);
}

/* Round Plates (Brand Manual Element) */
.round-plate {
  background-color: var(--bilbo-red);
  color: var(--bilbo-white);
  border-radius: 50%;
  padding: 1rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
  transform: rotate(8deg); /* Rotation as per brand manual */
}

/* Comment Lines (Brand Manual Element) */
.comment-line {
  border-left: 2px solid var(--bilbo-red);
  padding-left: 1rem;
  margin: 1rem 0;
}

.comment-line .comment-text {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 700; /* Bold Italic for comments */
  font-style: italic;
  color: var(--bilbo-text-dark-gray);
  font-size: 0.9rem;
}

/* Brand Typography Utility Classes */
.bilbo-font-light {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 300;
}

.bilbo-font-book {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350;
}

.bilbo-font-regular {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400;
}

.bilbo-font-medium {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
}

.bilbo-font-bold {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 700;
}

.bilbo-font-bold-italic {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 700;
  font-style: italic;
}

.bilbo-font-extra-bold {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 800;
}

.bilbo-font-heavy {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 900;
}

/* Brand Color Utility Classes */
.text-bilbo-red { color: var(--bilbo-red) !important; }
.text-bilbo-black { color: var(--bilbo-black) !important; }
.text-bilbo-white { color: var(--bilbo-white) !important; }
.text-bilbo-dark-gray { color: var(--bilbo-text-dark-gray) !important; }
.text-bilbo-light-gray { color: var(--bilbo-text-light-gray) !important; }

.bg-bilbo-red { background-color: var(--bilbo-red) !important; }
.bg-bilbo-black { background-color: var(--bilbo-black) !important; }
.bg-bilbo-white { background-color: var(--bilbo-white) !important; }
.bg-bilbo-light { background-color: var(--bilbo-light-bg) !important; }
.bg-bilbo-light-red-1 { background-color: var(--bilbo-light-red-1) !important; }
.bg-bilbo-light-red-2 { background-color: var(--bilbo-light-red-2) !important; }
.bg-bilbo-light-gray-1 { background-color: var(--bilbo-light-gray-1) !important; }
.bg-bilbo-light-gray-2 { background-color: var(--bilbo-light-gray-2) !important; }

/* Border utilities */
.border-bilbo-red { border-color: var(--bilbo-red) !important; }
.border-bilbo-black { border-color: var(--bilbo-black) !important; }
.border-bilbo-light-gray { border-color: var(--bilbo-light-gray-1) !important; }

/* Brand-specific button variants */
.btn-bilbo {
  background-color: var(--bilbo-red);
  border-color: var(--bilbo-red);
  color: var(--bilbo-white);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
}

.btn-bilbo:hover, .btn-bilbo:focus {
  background-color: var(--bilbo-black);
  border-color: var(--bilbo-black);
  color: var(--bilbo-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(var(--bilbo-black-rgb), 0.2);
}

.btn-bilbo-outline {
  background-color: transparent;
  border: 2px solid var(--bilbo-red);
  color: var(--bilbo-red);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
}

.btn-bilbo-outline:hover, .btn-bilbo-outline:focus {
  background-color: var(--bilbo-red);
  border-color: var(--bilbo-red);
  color: var(--bilbo-white);
}

/* Personal Care (Personlig Omtanke) styling - Core brand message */
.personal-care-message {
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 700;
  font-style: italic;
  color: var(--bilbo-red);
  text-align: center;
  padding: 1rem;
  border: 2px solid var(--bilbo-red);
  border-radius: 8px;
  background-color: var(--bilbo-light-red-2);
  margin: 1rem 0;
}

.action-icon {
  font-size: 1.2rem;
}

/* ==============================================
   STICKY FOOTER STYLES
   ============================================== */

/* Ensure body and html take full height */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Make main content area flex-grow to push footer down */
.dashboard-container {
  flex: 1;
  margin-bottom: 60px; /* Add space for the sticky footer */
}

/* Sticky footer styling */
.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--bilbo-black) 0%, var(--bilbo-text-dark-gray) 100%);
  color: var(--bilbo-white);
  padding: 0.75rem 0;
  font-size: 0.875rem;
  z-index: 1020; /* Below modals but above content */
  border-top: 2px solid var(--bilbo-red);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  height: 60px; /* Define footer height for sticky positioning calculations */
}

.sticky-footer .container {
  max-width: 1320px; /* Match the main content width */
  margin: 0 auto;
}

.footer-user-info {
  color: var(--bilbo-white);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400;
}

.footer-user-info strong {
  font-weight: 600;
  color: var(--bilbo-light-red-1);
}

.footer-user-info .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.8rem;
}

.footer-actions .btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--bilbo-white);
  background-color: transparent;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.375rem 0.75rem;
  transition: all 0.3s ease;
}

.footer-actions .btn-outline-light:hover {
  background-color: var(--bilbo-red);
  border-color: var(--bilbo-red);
  color: var(--bilbo-white);
  transform: translateY(-1px);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .sticky-footer {
    padding: 0.5rem 0;
    height: 80px; /* Increased height for mobile layout */
  }
  
  .sticky-footer .d-flex {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .footer-user-info {
    margin-bottom: 0.5rem;
  }
  
  .footer-user-info .text-muted {
    display: block;
    margin-top: 0.25rem;
  }
}

.active>.page-link, .page-link.active{
    z-index: 3;
    color: var(--bilbo-white);
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

/* ==============================================
   AI CHAT STICKY ELEMENTS
   ============================================== */

/* Quota box in sidebar - position above sticky footer */
.ai-chat-quota-sticky {
  position: sticky !important;
  bottom: 60px !important; /* Footer height */
  z-index: 1010 !important; /* Below footer but above content */
  background: white;
  border-top: 1px solid #dee2e6;
}

/* Chat input area - position above sticky footer */
.ai-chat-input-sticky {
  position: sticky !important;
  bottom: 60px !important; /* Footer height */
  z-index: 1010 !important; /* Below footer but above content */
  background: white;
  border-top: 1px solid #dee2e6;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .ai-chat-quota-sticky,
  .ai-chat-input-sticky {
    bottom: 80px !important; /* Increased footer height on mobile */
  }
}

/* ==============================================
   END AI CHAT STICKY ELEMENTS
   ============================================== */

/* ==============================================
   PROFESSIONAL DASHBOARD STYLES
   ============================================== */

/* Icon circles for dashboard cards */
.icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Metric items for dashboard cards */
.metric-item {
  padding: 0.5rem 0;
}

.metric-number {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
  font-family: 'Monsal Gothic', sans-serif;
}

.metric-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #6c757d;
  letter-spacing: 0.025em;
}

/* Recent items styling */
.recent-items {
  max-height: 200px;
  overflow-y: auto;
}

.recent-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f8f9fa;
}

.recent-item:last-child {
  border-bottom: none;
}

/* Dashboard cards improvements */
.card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Stats summary styling */
.stats-summary {
  background: #f8f9fa;
  border-radius: 0.375rem;
  padding: 1rem;
}

/* Badge improvements */
.badge-sm {
  font-size: 0.65rem;
  padding: 0.25em 0.5em;
}

/* Dashboard header improvements */
.container-fluid .row:first-child h1 {
  font-family: 'Monsal Gothic', sans-serif;
  color: var(--bilbo-text-dark-gray);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .metric-number {
    font-size: 1.5rem;
  }
  
  .icon-circle {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  
  .metric-label {
    font-size: 0.7rem;
  }
}

/* Quick actions button improvements */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning {
  border-width: 1.5px;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
}

/* Card header improvements */
.card-header {
  font-weight: 600;
  color: var(--bilbo-text-dark-gray);
  /*background: rgba(248, 249, 250, 0.5) !important;*/
  background-color: #f9f9f9 !important;
  border-bottom: 1px solid #727272;
}

/* ==============================================
   END PROFESSIONAL DASHBOARD STYLES
   ============================================== */

/* ==============================================
   SIDEBAR LAYOUT STYLES
   ============================================== */

/* Top Header Bar */
.top-header {
  width: 100%;
  height: 70px;
  padding: 35px;
}

.header-right {
  float: right;
}

.btn-header-account {
  background: var(--bilbo-light-bg);
  border: 1px solid var(--bilbo-light-gray-1);
  color: var(--bilbo-black);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
}

.btn-header-account:hover {
  background: var(--bilbo-red);
  border-color: var(--bilbo-red);
  color: var(--bilbo-white);
}

/* Layout wrapper - contains the two-column layout and footer */
.layout-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 70px; /* Account for fixed header */
}

/* Main Layout Container - Two columns */
.main-layout {
  display: flex;
  flex: 1; /* Takes up remaining space, pushes footer down */
}

/* Left Sidebar */
.sidebar {
  position: relative !important;
  /*bottom: 50px !important; /* Leave space for footer */
  width: 250px !important;
  background: var(--bilbo-white);
  border-right: 1px solid var(--bilbo-light-gray-1);
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  flex-shrink: 0; /* Prevent sidebar from shrinking */
  z-index: 1000 !important;
}

.sidebar-content {
  padding: 20px 0;
}

/* Sidebar Navigation */
.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav .nav-item {
  margin-bottom: 5px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: var(--bilbo-text-dark-gray);
  text-decoration: none;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border-radius: 0;
}

.sidebar-nav .nav-link:hover {
  background: var(--bilbo-light-bg);
  color: var(--bilbo-red);
  text-decoration: none;
}

.sidebar-nav .nav-link.active {
  background: var(--bilbo-red);
  color: var(--bilbo-white);
  font-weight: 500;
}

.sidebar-nav .nav-icon {
  width: 20px;
  font-size: 16px;
  margin-right: 12px;
  text-align: center;
}

.sidebar-nav .nav-text {
  flex: 1;
}

.sidebar-nav .submenu-arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.sidebar-nav .nav-link[aria-expanded="true"] .submenu-arrow {
  transform: rotate(180deg);
}

/* Submenu Styles */
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--bilbo-light-bg);
  border-left: 3px solid var(--bilbo-red);
}

.submenu li {
  margin: 0;
}

.submenu-link {
  display: block;
  padding: 10px 40px;
  color: var(--bilbo-text-dark-gray);
  text-decoration: none;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 350;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.submenu-link:hover {
  background: var(--bilbo-light-gray-2);
  color: var(--bilbo-red);
  text-decoration: none;
}

.submenu-link.active {
  background: var(--bilbo-red);
  color: var(--bilbo-white);
  font-weight: 500;
}

.submenu-divider {
  height: 1px;
  background: var(--bilbo-light-gray-1);
  margin: 8px 20px;
}

/* Main Content Area */
.main-content {
  position: relative !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 50px !important; /* Leave space for footer */
  background: var(--bilbo-light-bg);
  overflow-y: auto;
  min-height: 0; /* Allow content to determine height */
}

/* Sticky Footer - spans full width below both columns */
.sticky-footer {
  position: relative; /* Remove fixed positioning */
  background: linear-gradient(135deg, var(--bilbo-black) 0%, var(--bilbo-text-dark-gray) 100%);
  color: var(--bilbo-white);
  padding: 0.5rem 0;
  font-size: 0.875rem;
  border-top: 2px solid var(--bilbo-red);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  height: 50px;
  display: flex;
  align-items: center;
  width: 100%; /* Full width */
  flex-shrink: 0; /* Prevent footer from shrinking */
}

.sticky-footer .container-fluid {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-user-info {
  color: var(--bilbo-white);
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 400;
}

.footer-user-info strong {
  font-weight: 600;
  color: var(--bilbo-light-red-1);
}

.footer-user-info .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.8rem;
}

.footer-actions .btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--bilbo-white);
  background-color: transparent;
  font-family: 'Monsal Gothic', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.375rem 0.75rem;
  transition: all 0.3s ease;
}

.footer-actions .btn-outline-light:hover {
  background-color: var(--bilbo-red);
  border-color: var(--bilbo-red);
  color: var(--bilbo-white);
  transform: translateY(-1px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .top-header {
    padding: 0 15px;
  }
  
  .header-center .page-title {
    font-size: 1.1rem;
  }
  
  .main-layout {
    flex-direction: column; /* Stack columns on mobile */
    position: relative !important;
  }
  
  .sidebar {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    order: 1; /* Show sidebar first */
  }
  
  .main-content {
    position: relative !important; /* Override absolute positioning */
    left: 0 !important; /* Reset left positioning */
    right: auto !important; /* Reset right positioning */
    top: 0 !important; /* Reset top positioning */
    bottom: 50px !important; /* Keep space for footer */
    width: 100% !important; /* Full width on mobile */
    order: 2; /* Show main content second */
  }
  
  .main-content .dashboard-container {
    min-height: auto;
    padding: 15px; /* Reduce padding on mobile */
  }
  
  /* Mobile menu toggle button */
  .mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--bilbo-black);
    font-size: 1.2rem;
    padding: 8px;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  .mobile-menu-toggle:hover {
    background: var(--bilbo-light-bg);
  }
  
  .sticky-footer {
    height: 60px;
    padding: 0.75rem 0;
  }
  
  .sticky-footer .d-flex {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .footer-user-info {
    margin-bottom: 0.5rem;
  }
  
  .footer-user-info .text-muted {
    display: block;
    margin-top: 0.25rem;
  }
}

@media (min-width: 769px) {
  .mobile-menu-toggle {
    display: none;
  }
}

/* Update AI Chat sticky elements for new layout */
.ai-chat-quota-sticky {
  position: sticky !important;
  bottom: 0px !important; /* No longer need to account for footer */
  z-index: 1010 !important;
  background: white;
  border-top: 1px solid #dee2e6;
}

.ai-chat-input-sticky {
  position: sticky !important;
  bottom: 0px !important; /* No longer need to account for footer */
  z-index: 1010 !important;
  background: white;
  border-top: 1px solid #dee2e6;
}

/* ==============================================
   END SIDEBAR LAYOUT STYLES
   ============================================== */
@media (min-width: 991.98px) {
  .content-default-padding {
    padding: 20px 40px !important;
  }
}
/* ==============================================
   MOBILE HAMBURGER MENU IMPROVEMENTS
   ============================================== */

/* Mobile menu specific styles */
@media (max-width: 991.98px) {
  /* Ensure hamburger menu is properly positioned */
  .navbar-toggler {
    position: absolute !important;
    right: 1rem !important;
    top: 1rem !important;
    z-index: 1051 !important;
    border: none !important;
    padding: 0.5rem !important;
  }
  
  /* Style the hamburger lines */
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 1.5em !important;
    height: 1.5em !important;
  }
  
  /* Mobile sidebar styling */
  #sidebarMenu {
    position: fixed !important;
    top: 74px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 74px) !important;
    z-index: 1050 !important;
    background-color: rgba(248, 249, 250, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-left: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Smooth transition for mobile menu */
  #sidebarMenu.collapsing {
    transition: height 0.35s ease !important;
  }
  
  /* Mobile menu content container */
  #sidebarMenu .position-sticky {
    position: relative !important;
    padding-top: 1rem !important;
    height: 100% !important;
    overflow-y: auto !important;
  }
  
  /* Mobile menu items styling */
  #sidebarMenu .nav-link {
    padding: 0.75rem 1.25rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    font-size: 1rem !important;
    color: var(--bilbo-text-dark-gray) !important;
  }
  
  /* Mobile menu hover effects */
  #sidebarMenu .nav-link:hover {
    background-color: var(--bilbo-light-red-2) !important;
    color: var(--bilbo-red) !important;
  }
  
  /* Mobile submenu styling */
  #sidebarMenu .collapse-box {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-left: 3px solid var(--bilbo-red) !important;
  }
  
  #sidebarMenu .collapse-link {
    padding: 0.5rem 2rem !important;
    font-size: 0.9rem !important;
    color: var(--bilbo-text-light-gray) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
  }
  
  #sidebarMenu .collapse-link:hover {
    background-color: var(--bilbo-red) !important;
    color: var(--bilbo-white) !important;
    text-decoration: none !important;
  }
  
  /* Mobile menu section headings */
  #sidebarMenu .sidebar-heading {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--bilbo-red) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin: 0.5rem 0 !important;
  }
}

/* Ensure hamburger button is visible on smaller screens */
@media (max-width: 991.98px) {
  .d-lg-none {
    display: block !important;
  }
}

/* Adjust main content when menu is open on mobile */
@media (max-width: 991.98px) {
  .main-master-border {
    transition: filter 0.3s ease;
  }
  
  /* When sidebar is shown, add some visual separation */
  body:has(#sidebarMenu.show) .main-master-border {
    filter: brightness(0.9);
  }
}

/* ==============================================
   END MOBILE HAMBURGER MENU IMPROVEMENTS
   ============================================== */