.mt20
{
  margin-top: 30px;
}

/* Dashboard Page */
.dashboard-page-title{
  font-size:20px;
  font-weight:600;
  color:#0f172a;
  margin-bottom:12px;
}

/* Chart Card */
.dashboard-chart-card{
  background:#fff;
  border-radius:8px;
  border:1px solid #e5e7eb;
  padding:16px;
}

.dashboard-chart-placeholder{
  height:220px;
  background:#f8fafc;
  border-radius:6px;
  border:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-size:14px;
}

/* Stat Cards */
.dashboard-stat-card{
  background:#fff;
  border-radius:8px;
  border:1px solid #e5e7eb;
  padding:24px 16px;
  text-align:center;
  height:100%;
}

.dashboard-stat-value{
  font-size:24px;
  font-weight:700;
  color:#0f172a;
  line-height:1;
}

.dashboard-stat-label{
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:#475569;
  text-transform:uppercase;
}

/* Air Cards */
.Aircard-ui{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:20px;
  height:100%;
}

.Aircard-title{
  font-size:20px;
  font-weight:700;
  color:#0b4fa2;
  margin-bottom:20px;
}

/* Air Service Legend */
.Airservice-legend{
  margin-top:20px;
}

/* Air Chart */
.Airchart-placeholder{
  height:240px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-size:14px;
}

.Airchart-legend{
  text-align:center;
  margin-bottom:10px;
  color:#64748b;
  font-size:14px;
}

/* Upcoming Section */
.upcoming-section-title{
  font-size:18px;
  font-weight:700;
  color:#0b4fa2;
  margin-bottom:10px;
}

.upcoming-section-divider{
  border-top:1px solid #dbe3ea;
  margin-bottom:16px;
}

/* Card wrapper */
.upcoming-card-ui{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:16px;
}

/* Table */
.upcoming-table th{
  font-size:13px;
  color:#64748b;
  font-weight:600;
  white-space:nowrap;
}

.upcoming-table {
    width: 100%;
    min-width: 700px;
}

.upcoming-table td{
  font-size:14px;
  color:#0f172a;
  vertical-align:middle;
  white-space:nowrap;
}

/* Pagination */
.upcoming-custom-pagination{
  display:flex;
  justify-content:flex-end;
  gap:6px;
}

.upcoming-page-btn{
  width:40px;
  height:40px;
  border:1px solid #e5e7eb;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  font-size:16px;
  cursor:pointer;
}

/* KPI Cards */
.upcoming-kpi-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:22px 12px;
  text-align:center;
  height:100%;
}

.upcoming-kpi-value{
  font-size:24px;
  font-weight:700;
  color:#0f172a;
  line-height:1;
}

.upcoming-kpi-label{
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:#475569;
  text-transform:uppercase;
}

/* Hotel Tables */
.hotal-table-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:20px;
}

.hotal-table thead th{
  font-size:13px;
  font-weight:600;
  color:#64748b;
  background:#f8fafc;
  border-bottom:1px solid #e5e7eb;
  white-space:nowrap;
}

.hotal-table td{
  font-size:14px;
  color:#0f172a;
}

.hotal-no-data{
  text-align:center;
  color:#334155;
  font-weight:500;
  padding:18px !important;
}

/* Responsive */
@media(max-width:576px){
  .dashboard-stat-value{
    font-size:28px;
  }
  .upcoming-kpi-value{
    font-size:26px;
  }
}

@media(max-width:768px){
  .Airchart-placeholder{
    height:200px;
  }
  .hotal-table thead th{
    font-size:12px;
  }
}

.apexcharts-legend.apx-legend-position-bottom {
    left: unset !important;
    right: unset !important;
    width: auto !important;
}

.Aircard-ui > div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
}

apexcharts-legend {
    overflow: visible !important;
    max-height: none !important;
}

.chart-container {
    width: 100%;
    max-width: 100%;
}

.calendar-popup {
    position: absolute;
    z-index: 9999;
    top: 100%;
    right: 50%;
    left: auto; 
    width: 260px;
    background: white;
/*    border: 1px solid #e5e7eb;*/
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

    .calendar-popup .calendar-header {
        font-size: 14px;
        padding: 6px;
    }

    .calendar-popup td {
        padding: 4px;
        font-size: 13px;
    }

    @media(max-width:768px){
        .calendar-popup {
            right:22%
        }

.mobile-filter-btn {
    display: none;
}

/* Mobile styles */

@media (max-width: 991px) {

    /* Floating Filter Button */

    .mobile-filter-btn {
        display: flex;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1200;
        background: #2563eb;
        border: none;
        border-radius: 50%;
        width: 55px;
        height: 55px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 15px rgba(0,0,0,0.25);
        cursor: pointer;
    }

    .filter-icon {
        width: 22px;
        height: 22px;
    }

    /* Overlay background */

    .filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1100;
        display: none;
    }

        .filter-overlay.show {
            display: block;
        }

    /* Filter panel (slides from TOP) */

    .mobile-filter-panel {
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #0000008c;
        z-index: 1150;
        transition: top 0.35s ease;
        overflow-y: auto;
    }

        .mobile-filter-panel.open {
            top: 0;
        }

    /* Header */

    .mobile-filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .mobile-filter-body {
        padding: 20px;
    }

    .close-btn {
        border: none;
        background: #f1f5f9;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-icon {
        width: 18px;
        height: 18px;
    }
}