:root{

  --primary:#0ea5e9;
  --primary-dark:#0369a1;

  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  --sidebar:#06142e;
  --sidebar-light:#0b2047;

  --bg:#f4f8fc;
  --card:#ffffff;

  --text:#0f172a;
  --muted:#64748b;
}

body{
  background:var(--bg);
  font-family:'Inter',sans-serif;
}

.page-title{
  font-size:32px;
  font-weight:700;
  color:var(--text);
}

.page-subtitle{
  color:var(--muted);
  margin-bottom:24px;
}

.airku-card{

  background:white;

  border:none;

  border-radius:20px;

  box-shadow:
    0 10px 30px rgba(15,23,42,.08);

  transition:.2s;
}

.airku-card:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 15px 40px rgba(15,23,42,.12);
}

.airku-stat{

  padding:24px;
}

.airku-stat-label{

  font-size:14px;

  color:var(--muted);

  margin-bottom:10px;
}

.airku-stat-value{

  font-size:34px;

  font-weight:700;

  color:var(--text);
}

.badge-paid{

  background:#dcfce7;
  color:#166534;

  padding:6px 10px;

  border-radius:999px;
}

.badge-unpaid{

  background:#fef3c7;
  color:#92400e;

  padding:6px 10px;

  border-radius:999px;
}

.airku-table{

  background:white;

  border-radius:18px;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(15,23,42,.06);
}

.airku-table thead{

  background:#eff6ff;
}

.airku-table th{

  border:none;

  font-weight:600;
}

.airku-table td{

  vertical-align:middle;
}

.dashboard-hero{

  background:
    linear-gradient(
      135deg,
      #0ea5e9,
      #2563eb
    );

  color:white;

  border-radius:24px;

  padding:32px;

  margin-bottom:24px;

  box-shadow:
    0 20px 40px rgba(
      37,99,235,.25
    );
}

.dashboard-hero-title{

  font-size:38px;

  font-weight:800;

  margin-bottom:8px;
}

.dashboard-hero-subtitle{

  opacity:.9;

  font-size:16px;
}

.kpi-card{

  border:none;

  border-radius:20px;

  overflow:hidden;

  background:white;

  box-shadow:
    0 10px 30px rgba(
      15,23,42,.08
    );
}

.kpi-icon{

  font-size:34px;

  margin-bottom:10px;
}

.kpi-value{

  font-size:34px;

  font-weight:800;

  color:#0f172a;
}

.kpi-label{

  color:#64748b;

  font-size:14px;
}

.quick-card{

  cursor:pointer;

  border-radius:18px;

  padding:20px;

  text-align:center;

  background:white;

  box-shadow:
    0 10px 30px rgba(
      15,23,42,.06
    );

  transition:.2s;
}

.quick-card:hover{

  transform:
    translateY(-4px);
}

.quick-icon{

  font-size:28px;

  margin-bottom:10px;
}

.status-ok{

  display:inline-block;

  padding:6px 12px;

  border-radius:999px;

  background:#dcfce7;

  color:#166534;

  margin:4px;
}

body{
  background:#eef2f7;
}



.sidebar h4{

  font-size:48px;
  font-weight:800;
  color:#fff;

  margin-bottom:4px;
}

.sidebar-subtitle{

  color:#b8c4d9;
  font-size:14px;
  margin-bottom:40px;
}

.sidebar-section{

  color:#7f93b5;
  font-size:12px;
  letter-spacing:1px;
  font-weight:700;
  margin-bottom:16px;
}

.sidebar a{

  color:#fff !important;

  display:flex;

  align-items:center;

  gap:12px;

  padding:14px 16px;

  border-radius:14px;

  margin-bottom:8px;

  font-size:18px;

  font-weight:600;

  transition:.2s;
}

.sidebar a:hover{

  background:
    rgba(255,255,255,.08);
}

.sidebar a.active{

  background:
    linear-gradient(
      90deg,
      #1e88e5,
      #2b5ff7
    );
}



.dashboard-hero{

  height:170px;

  border-radius:28px;

  padding:38px 42px;

  background:
    linear-gradient(
      135deg,
      #1296ea,
      #2b5ff7
    );

  color:white;

  display:flex;

  flex-direction:column;

  justify-content:center;

  position:relative;

  overflow:hidden;
}

.dashboard-hero::after{

  content:"";

  position:absolute;

  right:-40px;
  top:-40px;

  width:240px;
  height:240px;

  border-radius:50%;

  background:
    rgba(255,255,255,.08);
}

.dashboard-title{

  font-size:54px;

  font-weight:800;

  margin:0;
}

.dashboard-subtitle{

  font-size:18px;

  opacity:.95;
}

.kpi-card{

  border:none;

  border-radius:24px;

  background:white;

  min-height:180px;

  padding:28px;

  box-shadow:
    0 10px 30px rgba(15,23,42,.06);
}

.kpi-icon{

  width:64px;
  height:64px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:30px;

  margin-bottom:20px;
}

.kpi-blue{
  background:#e7f1ff;
}

.kpi-green{
  background:#e7f8ed;
}

.kpi-orange{
  background:#fff0e6;
}

.kpi-yellow{
  background:#fff5d8;
}

.kpi-value{

  font-size:54px;

  font-weight:800;

  line-height:1;
}

.kpi-label{

  color:#64748b;

  font-size:20px;

  margin-top:10px;
}

.panel-card{

  background:white;

  border-radius:24px;

  padding:28px;

  box-shadow:
    0 10px 30px rgba(15,23,42,.05);
}

.quick-action{

  background:white;

  border-radius:18px;

  padding:26px;

  text-align:center;

  cursor:pointer;

  transition:.2s;

  box-shadow:
    0 10px 20px rgba(15,23,42,.05);
}

.quick-action:hover{

  transform:
    translateY(-3px);
}

.quick-action-icon{

  font-size:34px;

  margin-bottom:10px;
}

.system-pill{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:10px 16px;

  border-radius:999px;

  background:#e7f8ed;

  color:#166534;

  font-weight:600;

  margin:5px;
}

.system-pill::before{

  content:"";

  width:10px;
  height:10px;

  border-radius:50%;

  background:#22c55e;
}


.dashboard-banner{

  background:
    linear-gradient(
      135deg,
      #1f8ef1,
      #2f5bea
    );

  border-radius:24px;

  padding:40px;

  margin-bottom:24px;

  color:white;

  position:relative;

  overflow:hidden;
}

.dashboard-banner h1{

  margin:0;

  font-size:56px;

  font-weight:800;
}

.dashboard-banner p{

  margin-top:12px;

  margin-bottom:4px;

  font-size:20px;
}

.dashboard-banner span{

  font-size:18px;

  opacity:.95;
}

.dashboard-stat-card{

  background:white;

  border-radius:24px;

  padding:28px;

  height:220px;

  box-shadow:
    0 10px 30px rgba(
      15,
      23,
      42,
      .06
    );
}

.stat-icon{

  width:72px;

  height:72px;

  border-radius:18px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:34px;

  margin-bottom:24px;
}

.stat-blue .stat-icon{
  background:#e8f1ff;
}

.stat-green .stat-icon{
  background:#e7f8eb;
}

.stat-orange .stat-icon{
  background:#fff1e7;
}

.stat-yellow .stat-icon{
  background:#fff5d8;
}

.stat-value{

  font-size:56px;

  font-weight:800;

  line-height:1.1;

  color:#0f172a;
}

.stat-label{

  margin-top:12px;

  color:#64748b;

  font-size:24px;
}

.dashboard-panel{

  background:white;

  border-radius:24px;

  padding:24px;

  box-shadow:
    0 10px 30px rgba(
      15,
      23,
      42,
      .06
    );
}

.dashboard-panel-header{

  margin-bottom:20px;
}

.dashboard-panel-header h4{

  margin:0;

  font-weight:700;
}

.dashboard-panel table{

  margin-bottom:0;
}

.dashboard-panel thead th{

  background:#f8fafc;

  border:none;

  color:#64748b;
}


.airku-dashboard-header{

  margin-bottom:24px;
}

.airku-dashboard-title{

  font-size:40px;

  font-weight:700;

  margin:0;

  color:#0f172a;
}

.airku-dashboard-subtitle{

  color:#64748b;

  margin-top:6px;
}

.airku-kpi{

  border-radius:20px;

  padding:22px;

  min-height:140px;

  background:white;

  box-shadow:
    0 10px 20px rgba(
      15,
      23,
      42,
      .05
    );
}

.airku-kpi-blue{
  background:#eef8ff;
}

.airku-kpi-green{
  background:#f5fdf7;
}

.airku-kpi-orange{
  background:#fff7ef;
}

.airku-kpi-yellow{
  background:#fffbe8;
}

.airku-kpi-label{

  color:#64748b;

  font-size:14px;

  margin-bottom:12px;
}

.airku-kpi-value{

  font-size:48px;

  font-weight:800;

  line-height:1;

  color:#0f172a;
}

.airku-kpi-money{

  font-size:32px;

  font-weight:800;

  color:#0f172a;
}

.airku-panel{

  background:white;

  border-radius:20px;

  padding:24px;

  box-shadow:
    0 10px 20px rgba(
      15,
      23,
      42,
      .05
    );
}

.airku-panel-title{

  font-size:20px;

  font-weight:700;

  margin-bottom:20px;
}

.airku-chart{

  height:240px;

  display:flex;

  align-items:flex-end;

  gap:14px;
}

.airku-bar{

  flex:1;

  border-radius:12px 12px 0 0;

  background:
    linear-gradient(
      180deg,
      #3b82f6,
      #1d4ed8
    );
}

@media(max-width:768px){

  .airku-dashboard-title{

    font-size:28px;
  }

  .airku-kpi{

    min-height:auto;
  }

  .airku-kpi-value{

    font-size:34px;
  }

  .airku-kpi-money{

    font-size:24px;
  }

  .airku-chart{

    height:160px;
  }

}


.customer-pagination{

  display:flex;

  justify-content:center;

  align-items:center;

  flex-wrap:wrap;

  gap:6px;
}

#customerPaginationNumbers{

  display:flex;

  flex-wrap:wrap;

  justify-content:center;
}


.table{

  --bs-table-bg:transparent;
}

.table thead th{

  background:#f8fafc;

  color:#475569;

  font-size:13px;

  font-weight:700;

  border-bottom:2px solid #e2e8f0;

  text-transform:uppercase;

  letter-spacing:.4px;
}

.table tbody tr{

  transition:.2s;
}

.table tbody tr:hover{

  background:#f8fafc;
}

.table tbody td{

  vertical-align:middle;

  padding-top:14px;

  padding-bottom:14px;
}

.airku-status-paid{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:8px 14px;

  border-radius:999px;

  background:#dcfce7;

  color:#15803d;

  font-size:12px;

  font-weight:700;
}

.airku-status-unpaid{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:8px 14px;

  border-radius:999px;

  background:#fef3c7;

  color:#b45309;

  font-size:12px;

  font-weight:700;
}

.airku-btn-customer{

  border-radius:10px;

  border:1px solid #f59e0b;

  color:#d97706;

  background:white;

  min-width:105px;
}

.airku-btn-customer:hover{

  background:#fff7ed;

  color:#b45309;
}

.airku-btn-bill{

  border-radius:10px;

  border:1px solid #2563eb;

  color:#2563eb;

  background:white;

  min-width:105px;
}

.airku-btn-bill:hover{

  background:#eff6ff;

  color:#1d4ed8;
}

.customer-table-wrap{

  border-radius:18px;

  background:white;

  padding:12px;

  box-shadow:
    0 10px 25px rgba(
      15,
      23,
      42,
      .05
    );
}


.airku-customer-code{

  display:inline-block;

  padding:6px 12px;

  border-radius:10px;

  background:#eff6ff;

  color:#2563eb;

  font-weight:700;
}


#logoutButton{

  margin-top:auto;

  border-radius:12px;

  font-weight:600;

  transition:.2s;
}

#logoutButton:hover{

  background:#fee2e2;

  color:#dc2626 !important;
}


.logout-menu{

  display:flex;

  align-items:center;

  padding:14px 16px;

  margin-top:16px;

  border-radius:14px;

  color:#fca5a5 !important;

  text-decoration:none;

  transition:.2s;

  font-weight:600;
}

.logout-menu:hover{

  background:
    rgba(239,68,68,.15);

  color:#fecaca !important;

  transform:
    translateX(4px);
}