* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

body {
  background: #f3f4f6;
}

/* Layout */
.layout {
  display: flex;
  height: 100vh;
}


/* Sidebar */
.sidebar {
  width: 240px;
  background: black;
  color: white;
  padding: 20px;
  height: 100vh;          /* Full screen height */
  overflow-y: auto;       /* Enable vertical scroll */
  position: fixed;        /* Fix sidebar */
  left: 0;
  top: 0;
}

.sidebar h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 20px;
}

.sidebar ul {
  list-style: none;
}

.sidebar ul li {
  margin-bottom: 10px;
}

.sidebar ul li a {
  text-decoration: none;
  color: white;
  padding: 10px 12px;
  display: block;
  border-radius: 6px;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
  background: #4925eb;
}

/* Main Area */
/* Main Area */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 240px;
  height: 100vh;

  overflow-x: hidden; /* prevents horizontal page scroll */
}

.topbar {
  background: white;
  padding: 15px 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.content {
  padding: 25px;
  flex: 1;

  /* overflow-y: auto; */
  overflow-x: hidden;

  max-width: 100%;
  
}

/* Form */
.form-card {
  background: white;
  padding: 35px;
  border-radius: 10px;
  width:100%;
  max-width:1100px;   /* 🔥 IMPORTANT FIX */
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.form-card h3 {
  margin-bottom: 15px;
}

input, select {
  width: 100%;
  padding: 9px;
  margin-bottom: 12px;
  border-radius: 5px;
  border: 1px solid #d1d5db;
}

button {
  padding: 10px;
  width: 100%;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

button:hover {
  background: #1d4ed8;
}

/* Table */
.table-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);

  width: 100%;
  max-width: 100%;
}
#fuelTable{
min-width:1800px;
}

table {
  width: 100%;
  border-collapse: separate;   /* 🔥 KEY FIX */
  border-spacing: 0 10px;      /* row spacing */
}

th {
  background: #f1f5f9;
  padding: 14px 20px;
  text-align: left;         
  white-space: nowrap;
  font-weight: 600;
}

td {
  padding: 12px 20px;
  text-align: left;         
  white-space: nowrap;
}

/* reports page */
.select2-container {
  width: 100% !important;
}

.select2-container .select2-selection--single {
  height: 38px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

#calendarTable th,
#calendarTable td{
  border:1px solid #ddd;
  padding:5px;
  text-align:center;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

th {
  background: #f1f5f9;
  padding: 14px 22px;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.5px;
}

td {
  padding: 12px 22px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.4px;
  word-spacing: 2px;   /* 🔥 spacing between words */
}

#fuelTable th,
#fuelTable td{
  min-width: 140px;
}



/* ACTION COLUMN */
table th:last-child,
table td:last-child{
min-width:140px;
width:140px;
}
tbody tr{
height:45px;
}
/* buttons container */
.action-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:nowrap;
}

/* remove default button styles */
.action-buttons button{
background:none;
border:none;
padding:4px;
width:auto;
color:#374151;
font-size:16px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

/* hover animation */
.action-buttons button:hover{
transform:scale(1.15);
}

/* colors */
.action-view:hover{
color:#2563eb;
}

.action-edit:hover{
color:#16a34a;
}

.action-delete:hover{
color:#dc2626;
}

/* table scroll container */
.table-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  display:block;
}
.table-wrapper{
  width:100%;
  overflow:hidden;
}
/* large width table */
#fuelTable{
  min-width:2000px;
}
#fuelTable th,
#fuelTable td{
  white-space: nowrap;
}
#fuelTable th{
  background:#f1f5f9;
  font-weight:600;
}
table th:last-child,
table td:last-child{
  min-width:140px;
  width:140px;
}
#columnSettings{
transition: all 0.2s ease;
}
/* ================= VEHICLE COMPLIANCE CARDS ================= */

#vehicleComplianceCards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:14px;
margin-bottom:18px;
}

.compliance-card{
background:white;
border-radius:10px;
padding:14px 16px;
box-shadow:0 3px 10px rgba(0,0,0,0.06);
border-left:4px solid #2563eb;
transition:all 0.2s ease;
}

.compliance-card:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

/* card title */
.compliance-card h4{
font-size:14px;
font-weight:600;
margin-bottom:6px;
color:#374151;
}

/* text rows */
.compliance-card p{
font-size:13px;
color:#6b7280;
margin:3px 0;
}

/* numbers */
.compliance-card span{
font-size:14px;
font-weight:600;
}
/*  */
.red{
color:#dc2626;
font-weight:600;
}

.orange{
color:#f59e0b;
font-weight:600;
}

.green{
color:#16a34a;
font-weight:600;
}

/* ===== Collapsible Sidebar ===== */

.menu-parent{
  color:white;
  padding:10px 12px;
  cursor:pointer;
  border-radius:6px;
  font-weight:500;
}

.menu-parent:hover{
  background:#4925eb;
}

/* submenu container */
.submenu{
  display:none;
  padding-left:12px;
  margin-bottom:8px;
}

/* submenu items */
.submenu li{
  margin-bottom:6px;
}

/* submenu links */
.submenu li a{
  font-size:14px;
  padding:8px 12px;
  color:#d1d5db;
}

/* hover submenu */
.submenu li a:hover{
  background:#4925eb;
  color:white;
}
.menu-parent{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 12px;
cursor:pointer;
border-radius:6px;
}

.menu-parent:hover{
background:#4925eb;
}

.submenu{
display:none;
padding-left:12px;
}

.arrow{
font-size:12px;
transition:0.2s;
}



/* ================= GLOBAL FIX ================= */
body {
  overflow-x: hidden;
}

.dashboard-card,
.chart-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ================= MOBILE FIX ================= */
@media (max-width: 768px) {

  /* Menu button */
  #menuBtn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border: none;
    background: #2d6cdf;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .layout {
    display: flex;
    flex-direction: column;
  }

  /* Sidebar */
  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    width: 250px;
    height: 100%;
    background: black;
    z-index: 1001;
    transition: left 0.3s ease;
    padding-top: 20px;
  }

  .sidebar.active {
    left: 0;
  }

  /* Overlay */
  #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 1000;
  }

  #overlay.active {
    display: block;
  }

  /* Main */
  .main {
    width: 100%;
    margin-left: 0;
  }

  /* Topbar */
  .topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
  }

  /* Content spacing */
  .content {
    padding: 15px;
  }

  /* Forms */
  .form-card {
    width: 95%;
    margin: 10px auto;
    padding: 20px;
  }

  input, select, textarea, button {
    width: 100%;
    font-size: 16px;
  }

  /* Form grid */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .upload-grid {
    grid-template-columns: 1fr !important;
  }

  /* Sections stacking */
  .overview-grid,
  .summary-grid,
  .today-month-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 15px;
  }

  /* Charts stacking */
  .chart-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 15px;
  }

  /* Chart */
  .chart-card {
    padding: 15px;
  }

  .chart-card canvas {
    height: 250px !important;
  }

  /* Tabs */
  .date-switch {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-behavior: smooth;
  }

  .date-switch::-webkit-scrollbar {
    display: none;
  }

  .date-switch button {
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* DATE FILTER */
  .date-switch-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .date-range {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
  }

  .date-range input,
  .date-range select {
    width: 92%;
    height: 42px;
    border-radius: 8px;
    padding: 10px;
  }

  .date-range button {
    width: 92%;
    height: 45px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    margin-top: 5px;
  }

  /* 🔥 PERFECT CARD SCROLL (FINAL FIX) */
  .dashboard-grid {
    display: flex !important;
    overflow-x: auto;
    gap: 12px;
    padding: 10px 10px 15px 10px; /* balanced padding */
    scroll-snap-type: x mandatory;
  }

  .dashboard-grid::-webkit-scrollbar {
    display: none;
  }

  .dashboard-card {
    min-width: 85%;   /* 🔥 perfect balance */
    max-width: 85%;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Table scroll */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

}

/* Hide menu button on desktop */
@media (min-width: 769px) {
  #menuBtn {
    display: none;
  }
}

/* ================= DASHBOARD ================= */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.chart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 25px;
}

/* Tablet */
@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Small Tablet */
@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-grid {
    grid-template-columns: 1fr;
  }
}

/* Small Mobile */
@media (max-width: 600px) {

  .dashboard-card {
    padding: 18px;
    border-radius: 14px;
  }

  .dashboard-card h2 {
    font-size: 22px;
  }

  .section-title {
    margin-top: 15px;
    margin-bottom: 10px;
  }

}

/* ================= FUEL DASHBOARD FINAL FIX (SAFE) ================= */

/* Fix top filter alignment */
.date-switch-wrapper{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:15px;
  flex-wrap:wrap;
  width:100%;
}

/* Left buttons */
.date-switch{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  white-space:nowrap;
  scroll-behavior:smooth;

  padding-right:12px;   /* 🔥 FIX: space for last button */
}
.date-switch{
  padding-left:6px;
  padding-right:15px;
  scroll-padding-right:20px;
}
.date-switch-wrapper{
  padding-right:10px;   /* avoids edge cut */
}
/* Optional: hide scrollbar (clean UI) */
.date-switch::-webkit-scrollbar{
  display:none;
}

/* Right side inputs */
.date-range{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:10px;
}

/* Keep inputs same line */
.date-range input{
  min-width:130px;
}

.date-range button{
  white-space:nowrap;
}

/* 🔥 MAIN PIE CHART FIX */
.chart-card{
  padding-left:30px !important;
  overflow:hidden;
}

.chart-card canvas{
  display:block;
  width:100% !important;
  margin:0 auto;
}

/* Mobile override */
@media (max-width:768px){
  .date-switch-wrapper{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .date-range{
    flex-direction:column !important;
    width:100%;
  }
}

@media (max-width: 768px) {

  .submit-btn {
    width: 100%;
    height: 50px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

}