/* .custom-form-control { */
/*     max-width: 400px; /* Adjust as per your design */ */
/*     width: 100%; /* Ensures the input takes up the specified max-width */ */
/*     margin-right: auto; /* Centers the input on larger screens */ */
/*     margin-left: auto; */
/* } */
.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
	position: absolute;
	inset: 1rem 0.375rem;
	z-index: -1;
	height: 1.5em;
	content: "";
	background-color: #21252900;
	border-radius: var(--bs-border-radius);
}

.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
	position: absolute;
	inset: 1rem 0.375rem;
	z-index: -1;
	height: 1.5em;
	content: "";
	background-color: #21252900;
	border-radius: var(--bs-border-radius);
}

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
	color: #707784;
}

.custom-form-control-profile {
    max-width: 400px; /* Adjust as per your design */
    width: 100%; /* Ensures the input takes up the specified max-width */
    margin-right: auto; /* Centers the input on larger screens */
}

.chart-container {
  transition: all 0.3s ease-in-out;
}

.chart-container.expanded {
  flex: 0 0 100%;
  max-width: 100%;
  z-index: 1000;
  transform: scale(1.02);
  transition: transform 0.5s ease-in-out;
}

.chart-container:not(.expanded) {
  transform: scale(1);
}

.chart-container.hidden {
  display: none;
}

.modal-header {
  background-color: #0f172a;
  border-color: #1d273b;
}

.modal-body {
  background-color: #0f172a;
}

.modal-footer {
  background-color: #0f172a;
}

/* Mobile Enhancements */
body {
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.table-responsive {
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.4rem 0.25rem;
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(6px);
  border-top: 1px solid #1d273b;
  z-index: 1050;
}

.mobile-bottom-nav__item {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  color: #cbd5e1;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mobile-bottom-nav__item i.material-icons {
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-bottom-nav__item:focus,
.mobile-bottom-nav__item:hover {
  color: #ffffff;
}

/* Datagrid & Dashboard charts responsive adjustments */
@media (max-width: 992px) {
  .datagrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }
  .datagrid-item {
    padding: 0.75rem;
  }
  .charts {
    flex-direction: column;
  }
  .chart-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  #todaysGasPriceChart, #costPerMonthChart, #costsDetailChart {
    min-height: 260px;
  }
}

@media (max-width: 576px) {
  .datagrid-title { font-size: 0.75rem; }
  .datagrid-content { font-size: 0.8rem; }
  h2.heading-section, .get-rides-h2 { font-size: 1.2rem; }
  .form-floating { margin-bottom: 1rem !important; }
  .btn { font-size: 0.85rem; }
  .mobile-bottom-nav__item span { font-size: 0.55rem; }
}

/* Improve table readability on very small screens */
@media (max-width: 480px) {
  #ridesTable td, #ridesTable th,
  #gasPricesTable td, #gasPricesTable th {
    padding: 0.35rem 0.4rem;
    font-size: 0.65rem;
  }
  .table-responsive::-webkit-scrollbar { height: 6px; }
  .table-responsive::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
}

/* Avoid charts overflowing */
.chart-lg { width: 100%; }

/* Flash message adjustments */
.alert { font-size: 0.75rem; padding: 0.4rem 0.65rem; }

/* Profile cards stacking on mobile */
@media (max-width: 768px) {
  .profile-about-card { font-size: 0.8rem; }
  .card-title { font-size: 1rem; }
}

/* Ensure modals are full width on small devices */
@media (max-width: 576px) {
  .modal-dialog { margin: 0.5rem auto; }
}

/* Extra defensive overflow handling */
html { max-width: 100%; }

/* Accessible focus styles for interactive mobile ride elements */
.ride-summary:focus-visible,
.btn-group .btn:focus-visible,
.mobile-bottom-nav__item:focus-visible,
.load-qr:focus-visible,
.copy-link:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Mobile ride accordion styles */
.rides-mobile-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ride-item { border: 1px solid #1e293b; border-radius: 0.5rem; padding: 0.25rem 0.35rem; background: #0f172a; }
.ride-summary { background: #1e293b; border: 1px solid #334155; border-radius: 0.45rem; padding: 0.6rem 0.75rem; font-size: 0.85rem; }
.ride-summary[aria-expanded="true"] { background: #24324a; }
.ride-summary .ride-date { color:#ffffff; }
.ride-summary .ride-cost-text { color:#ffffff; font-weight:600; }
.ride-details { background: transparent; border: none; padding: 0; font-size: 0.75rem; }
.email-detail-card { background:#0f1e2e; border:1px solid #24324a; border-radius:10px; box-shadow:0 2px 4px rgba(0,0,0,0.4); }
.pay-btn-sw { background-color:#007bff !important; border-radius:5px !important; color:#fff; }
.pay-btn-sw:hover, .pay-btn-sw:focus { background-color:#0069d9 !important; color:#fff; }
.ride-cost.badge { font-size: 0.65rem; }
.ride-pax.badge { font-size: 0.55rem; }

@media (prefers-reduced-motion: no-preference) {
  .ride-details { transition: opacity 0.25s ease; }
  .ride-summary { transition: background-color 0.25s ease; }
}

/* Fuel mobile list styles */
.fuel-mobile-list { display: flex; flex-direction: column; gap: 0.35rem; }
.fuel-price-item { background: #1e293b; border: 1px solid #334155; border-radius: 0.45rem; }
.fuel-price-item:hover { background: #24324a; }
.fuel-date { font-size: 0.6rem; color:#ffffff; }
.fuel-value { font-size: 0.75rem; color:#ffffff; font-weight:600; }