/* ============================================
   SIDEBAR — Dark Blue (Gelap Biru)
   ============================================ */

#pcoded .pcoded-navbar,
#pcoded .pcoded-navbar .main-menu {
  background: #0d1f3c !important;
  z-index: 1031 !important;
  position: relative;
}

#pcoded .pcoded-navbar .nav-label-container {
  background: #0d1f3c !important;
}

/* ── Sidebar above header ── */
.pcoded-header {
  z-index: 1028 !important;
}

/* ── Remove dark navbar-logo background set by pcoded JS ── */
.pcoded .pcoded-header .navbar-logo[logo-theme] {
  background-color: #ffffff !important;
}

/* ── New sidebar styling (sidebar1.php) ── */
.sidebar {
  background: linear-gradient(180deg, #0a1628 0%, #112240 40%, #0d1f3c 100%) !important;
  color: rgba(255,255,255,0.65) !important;
  width: 250px !important;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: 2px 0 20px rgba(0,0,0,0.3);
  border-right: 1px solid rgba(255,255,255,0.06);
  z-index: 1031 !important;
}

.sidebar .nav-link {
  color: rgba(255,255,255,0.65) !important;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: 0;
  border-left: 3px solid transparent;
  text-decoration: none;
}

.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.06);
  color: #fff !important;
}

.sidebar .nav-link.active {
  background: rgba(70,128,255,0.18);
  color: #fff !important;
  border-left-color: #4680ff;
  font-weight: 600;
}

/* Disable hover on Halaman Utama when utiliti items are active */
.sidebar .nav-link.no-hover:hover {
  background: rgba(70,128,255,0.18);
  color: #fff !important;
  cursor: default;
}

.sidebar .nav-link.dropdown-toggle::after {
  display: none;
}

.sidebar .sidebar-chevron {
  font-size: 7px;
  opacity: 0.4;
  transition: transform 0.3s ease;
}

.sidebar .nav-link.dropdown-toggle[aria-expanded="true"] .sidebar-chevron {
  transform: rotate(180deg);
  opacity: 0.7;
}

.sidebar .submenu .nav-link {
  padding-left: 50px;
  font-size: 13px;
  color: rgba(255,255,255,0.5) !important;
}

.sidebar .submenu .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06);
}

/* ── Sidebar section labels ── */
.sidebar-label {
  padding: 16px 20px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.35);
}

/* ── Sidebar collapsed (icon-only) mode ── */
.sidebar.collapsed {
  width: 65px !important;
}

.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-chevron,
.sidebar.collapsed .submenu {
  display: none !important;
}

.sidebar.collapsed .nav-link {
  justify-content: center !important;
  padding: 12px 0 !important;
  border-left: 3px solid transparent !important;
  text-align: center;
}

.sidebar.collapsed .nav-link i {
  margin-right: 0 !important;
  font-size: 20px;
}

.sidebar.collapsed .nav-link.active {
  border-left-color: #4680ff !important;
}

.sidebar.collapsed .sidebar-brand {
  padding: 16px 8px !important;
}

.sidebar.collapsed .sidebar-logo {
  max-height: 38px !important;
}

.sidebar.collapsed .sidebar-toggle-btn i {
  transform: rotate(180deg);
}

.sidebar-toggle-btn i {
  transition: transform 0.3s ease;
}

/* Push content right to make room for fixed sidebar */
.pcoded-wrapper .pcoded-content {
  margin-left: 250px;
  transition: margin-left 0.3s ease;
}

/* When sidebar is collapsed, expand content area */
.sidebar.collapsed ~ .pcoded-content {
  margin-left: 65px !important;
}

/* ============================================
   SIDEBAR ICON BACKGROUNDS — Different per icon
   ============================================ */

/* --- pcoded navbar (navbar.php) — target .pcoded-micon by its child icon class --- */
.pcoded-navbar .pcoded-item li:has(> a > .pcoded-micon i.ti-home) > a > .pcoded-micon {
  background-color: #4680ff !important;
}
.pcoded-navbar .pcoded-item li:has(> a > .pcoded-micon i.ti-plug) > a > .pcoded-micon {
  background-color: #ff9800 !important;
}
.pcoded-navbar .pcoded-item li:has(> a > .pcoded-micon i.bi-droplet) > a > .pcoded-micon {
  background-color: #00bcd4 !important;
}
.pcoded-navbar .pcoded-item li:has(> a > .pcoded-micon i.ti-fullscreen) > a > .pcoded-micon {
  background-color: #7c4dff !important;
}
.pcoded-navbar .pcoded-item li:has(> a > .pcoded-micon i.ti-power-off) > a > .pcoded-micon {
  background-color: #ef5350 !important;
}

/* Submenu icon backgrounds */
.pcoded-navbar .pcoded-submenu li:has(.pcoded-micon i.ti-dashboard) .pcoded-micon {
  background-color: #7c4dff !important;
}
.pcoded-navbar .pcoded-submenu li:has(.pcoded-micon i.ti-view-list-alt) .pcoded-micon {
  background-color: #93be52 !important;
}

/* --- Custom sidebar (sidebar1.php) — icon background via inline-block span --- */
.sidebar .nav-link i.bi-grid-fill {
  color: #4680ff;
}
.sidebar .nav-link i.bi-lightning-charge-fill {
  color: #ff9800;
}
.sidebar .nav-link i.bi-droplet-fill {
  color: #00bcd4;
}
.sidebar .nav-link i.bi-power {
  color: #ef5350;
}

/* ── Submenu (dropdown) link icons ── */
.sidebar .submenu .nav-link i {
  margin-right: 10px;
  width: 16px;
  font-size: 14px;
  text-align: center;
}
.sidebar .submenu .nav-link i.bi-bar-chart-fill {
  color: #7c4dff;
}
.sidebar .submenu .nav-link i.bi-table {
  color: #93be52;
}

/* ── Collapsed sidebar: flyout submenu for dropdowns ── */
.sidebar.collapsed .nav-item.flyout-open > .collapse {
  display: block !important;
  position: fixed;
  min-width: 190px;
  margin: 0 !important;
  padding: 6px 0;
  background: #112240;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  z-index: 1060;
}

.sidebar.collapsed .nav-item.flyout-open .submenu {
  display: flex !important;
}

.sidebar.collapsed .nav-item.flyout-open .submenu .nav-link {
  justify-content: flex-start !important;
  padding: 10px 16px !important;
  text-align: left !important;
  border-left: 3px solid transparent !important;
}

.sidebar.collapsed .nav-item.flyout-open .submenu .nav-link i {
  font-size: 15px !important;
  margin-right: 10px !important;
}

.sidebar.collapsed .nav-item.flyout-open .submenu .sidebar-text {
  display: block !important;
}

/* ============================================
   landingpage.php — Page header, scorecards, tables
   ============================================ */

/* Page header accent bar */
.page-header.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.page-header.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #039be5, #00bcd4);
  border-radius: 10px 0 0 10px;
}
.page-header .page-header-title img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
}
.page-header .page-header-title h4 {
  font-size: 18px;
}

/* Scorecard styling */
.widget-card-1 {
  margin-top: 0;
  text-align: left;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  width: 100%;
}
.widget-card-1 .card-block-small {
  min-height: 90px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  justify-content: center;
}
.widget-card-1 .card1-icon {
  position: static;
  top: 0;
  width: 38px;
  height: 38px;
  font-size: 18px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  margin-right: 10px;
}
.card-header-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
  width: 100%;
  flex-direction: column;
}
.card-title-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}
.card-desc-text {
  font-size: 11px;
  color: #919aa3;
  line-height: 1.2;
  text-align: left;
  padding-left: 0;
}
.widget-card-1 h4 {
  margin-bottom: 0.5;
  line-height: 1;
  font-weight: 900;
  text-align: left;
}
.scorecard-value,
.scorecard-summary-value {
  font-size: 28px !important;
}

/* Equal height scorecard columns */
.scorecard-row > [class*="col-"] {
  display: flex;
}

/* Scrollable summary — auto-scroll ticker with manual drag support */
.scrollable-summary {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  transition: opacity 0.3s ease;
}
.scrollable-summary:active {
  cursor: grabbing;
}
.scrollable-summary::-webkit-scrollbar {
  display: none;
}
/* Prevent text selection while dragging */
.scrollable-summary * {
  user-select: none;
  -webkit-user-select: none;
}
/* Ensure district summary stays in a single row for ticker scroll */
#summary-districts-row {
  flex-wrap: nowrap;
  display: flex;
}

/* Modern table styling */
.table-modern {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: visible;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(20, 35, 56, 0.08);
}
.table-modern thead th {
  background: #f5fbfd;
  color: #2a3f5f;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-weight: 600;
  padding: 14px 16px;
}
.table-modern tbody td {
  padding: 14px 16px;
  color: #4d5d72;
}
.table-modern tbody tr {
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.table-modern tbody tr:last-child { border-bottom: none; }
.table-modern tbody tr:hover { background: rgba(0, 188, 212, 0.06); }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 0.9rem;
  color: #52606d;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 8px 12px;
  min-height: 38px;
  box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 10px;
  border: none;
  background: #f3f9fc;
  color: #3e4a5e !important;
  padding: 6px 10px;
  margin: 0 1px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #e0e7ee;
  color: #3e4a5e !important;
}
.dataTables_wrapper .dataTables_filter {
  float: right;
  text-align: right;
}
.dataTables_wrapper .dataTables_length {
  float: left;
}
.dataTables_wrapper .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

/* Modern outline button (electricity theme orange) */
.btn-modern-outline {
  border: 1.5px solid #fe940a;
  color: #fe940a;
  background: transparent;
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  width: 100%;
}
.btn-modern-outline:hover {
  background: #fe940a;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(254, 148, 10, 0.25);
  transform: translateY(-1px);
}
.btn-modern-outline:active {
  transform: translateY(0);
}

/* Modern rounded form inputs */
.form-control {
  border-radius: 6px !important;
}

/* Filter card spacing */
.filter-card .form-group {
  margin-bottom: 4px;
}
.filter-card .form-group.pb-2 {
  padding-bottom: 6px !important;
}

/* Inline table action buttons — transparent, colour on icon */
.btn-action-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-action-icon:hover {
  background: rgba(0,0,0,0.06) !important;
  transform: scale(1.1);
}
.btn-action-icon.action-view i { color: #4680ff; }
.btn-action-icon.action-edit i { color: #00bcd4; }
.btn-action-icon.action-delete i { color: #FF5370; }

/* Action button */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 28px;
  background: linear-gradient(135deg, #039be5, #00acc1);
  color: #fff !important;
  border: none;
  box-shadow: 0 6px 14px rgba(0, 145, 234, 0.15);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
.btn-action:hover,
.btn-action:focus {
  transform: translateY(-0.5px);
  box-shadow: 0 10px 18px rgba(0, 145, 234, 0.18);
  opacity: 0.95;
  color: #fff !important;
}
.btn-action:active {
  transform: translateY(0);
  box-shadow: 0 5px 12px rgba(0, 145, 234, 0.14);
}

/* mainMeterTable sizing */
#mainMeterTable {
  width: 100% !important;
  table-layout: fixed;
  word-wrap: break-word;
}
#mainMeterTable th,
#mainMeterTable td {
  white-space: normal !important;
  word-break: break-word !important;
  vertical-align: middle;
}
#mainMeterTable th:nth-child(9),
#mainMeterTable td:nth-child(9) {
  width: 110px;
  min-width: 100px;
  white-space: nowrap !important;
  word-break: normal !important;
  text-align: center;
}
#mainMeterTable td:nth-child(9) {
  display: table-cell;
  vertical-align: middle;
  padding: 2px 4px !important;
}
#mainMeterTable td:nth-child(9) .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px auto;
}
.dataTables_wrapper .dataTables_scroll {
  overflow: hidden !important;
}
.dataTables_scrollBody {
  height: 420px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* Alert pulse animation */
@keyframes alertPulse {
  0% { color: inherit; opacity: 1; }
  50% { color: #FF5370; opacity: 0.6; }
  100% { color: inherit; opacity: 1; }
}
.blink-warning,
.alertPulse,
.alertpluse {
  animation: alertPulse 0.8s infinite !important;
}
#tariff-donut path[fill="#FF5370"],
#donut-example path[fill="#FF5370"] {
  animation: alertPulse 0.8s infinite;
}

/* Scorebox clean */
.scorebox-clean h3 {
  font-size: 20px;
  line-height: 1;
}
.scorebox-clean .badge {
  font-size: 11px;
  border-radius: 20px;
}
.scorebox-clean h1 {
  font-size: 26px;
  margin-bottom: 2px;
}
.border-right {
  border-right: 1px solid #eee;
}
.card-block-small {
  min-height: auto !important;
  padding: 10px 15px;
}
.label-text {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  display: block;
}

/* Rotating chart */
@keyframes slow-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotating-chart svg {
  animation: slow-rotate 45s infinite linear;
  transform-origin: center center;
}
.rotating-chart:hover svg {
  animation-play-state: paused;
}

/* ============================================
   RESPONSIVE — Mobile-friendly overrides
   ============================================ */

/* --- Large tablets & below (≤ 991px) --- */
@media (max-width: 991.98px) {
  /* Sidebar overlay for mobile */
  .pcoded-overlay-box {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1029;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .sidebar-collapsed .pcoded-overlay-box {
    opacity: 1;
    visibility: visible;
  }

  /* Reduce page-wrapper padding */
  .main-body .page-wrapper {
    padding: 0.8rem 0.8rem !important;
  }

  /* Stack page-header on mobile */
  .page-header .row.align-items-center > div {
    text-align: left !important;
  }
  .page-header .row.align-items-center > div:last-child {
    margin-top: 8px;
    padding-left: 58px !important;
  }
  .page-header .row.align-items-center > div:last-child .d-inline-block {
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* Make hero cards stack vertically with gap */
  .hero-card .stat-grid {
    gap: 6px;
  }
  .hero-card .stat-grid .stat-item {
    min-width: 70px;
    padding: 8px 10px;
  }

  /* Reduce chart height on tablets */
  #statestics-chart {
    height: 280px !important;
  }
  .dataTables_scrollBody {
    height: 300px !important;
    max-height: 300px !important;
  }
}

/* --- Small tablets & large phones (≤ 767px) --- */
@media (max-width: 767.98px) {
  /* Page layout */
  .main-body .page-wrapper {
    padding: 0.5rem 0.6rem !important;
  }
  .pcoded-inner-content {
    padding: 4px !important;
  }
  .page-body {
    padding-top: 0.25rem;
  }

  /* Page header */
  .page-header.card .card-block {
    padding: 12px 14px !important;
  }
  .page-header .page-header-title h4 {
    font-size: 15px !important;
  }
  .page-header .page-header-title span {
    font-size: 11px !important;
  }
  .page-header .page-header-title img {
    width: 36px !important;
    height: 36px !important;
  }
  .page-header .row.align-items-center > div:last-child {
    padding-left: 0 !important;
  }
  .page-header .row.align-items-center > div:last-child .d-inline-block {
    width: 100%;
  }

  /* Print button - hide text keep icon on small screens */
  .page-header .btn-primary i {
    margin-right: 0;
  }

  /* Scorecards */
  .widget-visitor-card {
    min-height: 90px !important;
  }
  .widget-visitor-card h2 {
    font-size: 1.4rem !important;
  }
  .widget-visitor-card h6 {
    font-size: 0.65rem !important;
  }
  .widget-visitor-card .card-block-small {
    padding: 10px 10px !important;
  }
  .widget-visitor-card i {
    font-size: 1.2rem !important;
  }

  /* Compact cards */
  .compact-card .card-block {
    padding: 10px 12px 12px !important;
  }
  .compact-card .card-header {
    padding: 10px 12px 0 !important;
  }
  .compact-card .card-header h5 {
    font-size: 13px !important;
  }

  /* Scorecard values */
  .scorecard-value,
  .scorecard-summary-value,
  .widget-card-1 h4 {
    font-size: 20px !important;
  }

  /* Status bar */
  .status-bar-wrap {
    margin-top: 6px;
  }

  /* Chart containers */
  #statestics-chart {
    height: 220px !important;
  }
  #status-donut-chart {
    height: 140px !important;
  }
  #donut-example,
  #tariff-donut {
    height: 160px !important;
  }
  .rotating-chart svg {
    animation: none !important;
  }

  /* Top 5 bahagian */
  .top-bahagian-name {
    max-width: 80px !important;
    font-size: 11px !important;
  }
  .top-bahagian-amount {
    font-size: 11px !important;
    min-width: 70px !important;
  }

  /* DataTables mobile */
  .dataTables_scrollBody {
    height: 250px !important;
    max-height: 250px !important;
  }
  .dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: left !important;
    margin-bottom: 6px;
  }
  .dataTables_wrapper .dataTables_length {
    float: none !important;
    margin-bottom: 6px;
  }
  .dataTables_wrapper .top {
    flex-direction: column;
    align-items: stretch !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }

  /* Tables: ensure horizontal scroll on small screens */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-modern thead th,
  .table-modern tbody td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  #airTable th,
  #airTable td,
  #mainMeterTable th,
  #mainMeterTable td {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  /* Page header right section */
  .page-header .text-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .page-header .text-right button {
    white-space: nowrap;
    font-size: 0 !important;
  }
  .page-header .text-right button i {
    font-size: 16px !important;
  }

  /* Stat grid in hero cards */
  .hero-card .stat-grid .stat-item {
    min-width: 60px;
  }
  .hero-card .stat-grid .stat-item .stat-number {
    font-size: 18px !important;
  }

  /* Filter card */
  .filter-card .card-block {
    padding: 8px 12px 12px !important;
  }

  /* Page buttons - stack on mobile */
  .btn-group-responsive {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .btn-group-responsive .btn {
    width: 100%;
  }
}

/* --- Small phones (≤ 480px) --- */
@media (max-width: 480px) {
  .main-body .page-wrapper {
    padding: 0.3rem 0.4rem !important;
  }

  /* Scorecards go 2-column even on smallest screens */
  .widget-visitor-card {
    min-height: 75px !important;
  }
  .widget-visitor-card h2 {
    font-size: 1.1rem !important;
  }
  .widget-visitor-card h6 {
    font-size: 0.6rem !important;
  }
  .widget-visitor-card .card-block-small {
    padding: 8px 6px !important;
  }
  .widget-visitor-card i {
    font-size: 1rem !important;
    margin-top: 4px !important;
  }

  /* Card values */
  .scorecard-value,
  .scorecard-summary-value,
  .widget-card-1 h4 {
    font-size: 16px !important;
  }

  /* Charts */
  #statestics-chart {
    height: 180px !important;
  }
  .dataTables_scrollBody {
    height: 200px !important;
    max-height: 200px !important;
  }

  /* Hide less important table columns on very small screens */

  /* #airTable (dashboard_air.php): hide Daerah (5) & Tarikh Bil (8) */
  #airTable th:nth-child(5),
  #airTable td:nth-child(5),
  #airTable th:nth-child(8),
  #airTable td:nth-child(8) {
    display: none;
  }

  /* #mainMeterTable (landingpage/dashboard_home): hide Pemilikan (4) & Tariff (5) */
  #mainMeterTable th:nth-child(4),
  #mainMeterTable td:nth-child(4),
  #mainMeterTable th:nth-child(5),
  #mainMeterTable td:nth-child(5) {
    display: none;
  }

  /* #meterTable (manageMeter.php): hide Pemilikan (4) & Tariff (5) */
  #meterTable th:nth-child(4),
  #meterTable td:nth-child(4),
  #meterTable th:nth-child(5),
  #meterTable td:nth-child(5) {
    display: none;
  }

  /* #meterTable (manageMeter.php): also hide Status Pukal (3) on tiniest */
  #meterTable th:nth-child(3),
  #meterTable td:nth-child(3) {
    display: none;
  }

  /* #airTable (manageAir.php): hide Pemilik (5) & Tarikh Bil (6) */
  #airTable.manage-air-table th:nth-child(5),
  #airTable.manage-air-table td:nth-child(5),
  #airTable.manage-air-table th:nth-child(6),
  #airTable.manage-air-table td:nth-child(6) {
    display: none;
  }

  /* Remove text-nowrap from action columns on mobile so buttons can wrap */
  td.text-nowrap {
    white-space: normal !important;
  }
  .text-nowrap .btn-sm {
    padding: 4px 8px !important;
    font-size: 12px !important;
    margin: 1px !important;
  }

  /* Top Bahagian */
  .top-bahagian-name {
    max-width: 60px !important;
  }
  .top-bahagian-amount {
    min-width: 60px !important;
    font-size: 10px !important;
  }

  /* Focus items stack */
  .focus-item {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Status bar legend wraps */
  .status-legend {
    font-size: 10px !important;
  }
  .status-bar-header {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }
  .status-bar-body {
    padding: 8px 10px !important;
  }
}

/* --- Fix index.php login page for mobile --- */
@media (max-width: 575.98px) {
  .login-card-modern {
    padding: 24px 20px !important;
    margin: 10px !important;
    border-radius: 14px !important;
  }
  .login-card-modern .login-card-logo {
    width: 55px !important;
  }
  .login-card-modern .system-name-primary {
    font-size: 12px !important;
  }
  .login-card-modern h3 {
    font-size: 18px !important;
  }
  .login-card-modern .form-group {
    margin-bottom: 12px !important;
  }
  .login-card-modern .login-divider {
    width: 50px !important;
  }
  .login-card-modern .row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center !important;
  }
  .login-card-modern .row .col-6.text-right {
    text-align: center !important;
    margin-top: 4px;
  }
  .login-grid-container {
    grid-template-columns: 1fr !important;
  }
  .login-left-side {
    display: none !important;
  }
}

/* ============================================
   CARD EQUAL HEIGHTS — Stretch to fill row
   ============================================ */

/* Scorecards row — make cards fill column height */
.scorecard-row > [class*="col-"] .card {
  height: 100%;
}

/* Dashboard hero cards */
.hero-card {
  height: 100%;
}

/* Compact cards in flex/grid rows — stretch full height */
.row > [class*="col-"] .compact-card,
.row > [class*="col-"] .detail-section {
  height: 100%;
}

/* Landingpage breakdown widgets */
.compact.h-100.w-100 {
  min-height: 100%;
}

/* ============================================
   SIDEBAR OVERLAY — Mobile off-canvas behaviour
   ============================================ */

/* Overlay background (shown when sidebar is open on mobile) */
.pcoded-overlay-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1029;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

/* When sidebar is collapsed on mobile, the overlay appears */
.sidebar-collapsed .pcoded-overlay-box {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* On desktop (≥992px) keep overlay hidden always */
@media (min-width: 992px) {
  .pcoded-overlay-box {
    display: none !important;
  }
}

/* Mobile hamburger button to open/close the sidebar drawer */
.mobile-sidebar-toggle {
  display: none;
}

/* Close button shown inside the sidebar drawer on mobile */
.mobile-sidebar-close {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  color: rgba(255,255,255,0.75);
  font-size: 24px;
  line-height: 1;
  z-index: 2;
  text-decoration: none;
}
.mobile-sidebar-close:hover {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .mobile-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    color: #4c4c4c;
    font-size: 22px;
    padding: 0 12px;
    line-height: 60px;
    text-decoration: none;
  }
  .mobile-sidebar-toggle:hover {
    color: #242424;
    text-decoration: none;
  }
  .mobile-sidebar-close {
    display: inline-block;
  }
}

/* Mobile sidebar: push content using translate */
@media (max-width: 991.98px) {
  .pcoded-navbar {
    transition: transform 0.3s ease !important;
  }
  .sidebar-collapsed .pcoded-navbar {
    transform: translateX(-100%) !important;
  }
  .pcoded-container {
    transition: margin-left 0.3s ease;
  }
}

/* ============================================
   TABLE RESPONSIVE — Mobile-friendly tables
   ============================================ */

/* Ensure ALL tables with table-modern are scrollable */
.table-modern {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* For manage pages that don't have table-modern wrapper */
.table-scroll-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* On very small screens, enable DataTables horizontal scroll */
@media (max-width: 575.98px) {
  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dataTables_wrapper .dataTables_scrollBody {
    height: 280px !important;
    max-height: 280px !important;
  }
}

/* --- Print optimizations --- */
@media print {
  .pcoded-navbar,
  .pcoded-header,
  .sidebar_toggle,
  .pcoded-overlay-box,
  .btn,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_paginate {
    display: none !important;
  }
  .main-body .page-wrapper {
    padding: 0 !important;
  }
  .page-body {
    padding: 0 !important;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }
}

/* Responsive shell: keep navigation usable without shrinking the content canvas. */
html, body { max-width: 100%; overflow-x: hidden; }
.pcoded-header { min-height: 60px; }
.pcoded-content { min-width: 0; }
.table-responsive, .table-scroll-wrap, .table-scroll-container, .dataTables_scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > table, .table-scroll-wrap > table, .table-scroll-container > table { min-width: 640px; }
.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table, .dataTables_scrollBody table { min-width: 640px; }
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { max-width: 100%; }
.dataTables_wrapper .dataTables_filter input { max-width: 100%; }
.page-header h4, .page-header span, .breadcrumb-title { overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
  #pcoded .pcoded-header { margin-left: 0 !important; width: 100% !important; }
  #pcoded .pcoded-content, .pcoded-wrapper .pcoded-content { margin-left: 0 !important; width: 100%; }
  .pcoded-main-container { margin-top: 60px !important; }
  .main-body .page-wrapper { overflow: visible !important; max-width: 100vw; }
  .pcoded-inner-content, .page-body, .card-block { min-width: 0; }
  .page-header .row { margin-left: 0; margin-right: 0; }
  .page-header .page-header-title, .page-header .page-header-breadcrumb { max-width: 100%; }
  .page-header .page-header-breadcrumb { margin-top: 8px; }
  .navbar-container { padding-left: 12px !important; padding-right: 12px !important; }
  .nav-right { max-width: calc(100% - 54px); }
  .nav-right .user-profile > a span { display: inline-block; max-width: 35vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  #pcoded .pcoded-navbar { max-width: min(280px, 86vw); }
  #pcoded .pcoded-navbar { transform: translateX(-105%); transition: transform .25s ease; }
  #pcoded[vertical-nav-type="expanded"] .pcoded-navbar, #pcoded.pcoded-toggle-animate .pcoded-navbar { transform: translateX(0); }
  #pcoded .sidebar { transform: translateX(-105%); transition: transform .25s ease; }
  #pcoded.sidebar-collapsed .sidebar { transform: translateX(0); }
  .sidebar { width: min(250px, 86vw) !important; }
  .sidebar.collapsed { width: min(250px, 86vw) !important; }
  .sidebar.collapsed .sidebar-text, .sidebar.collapsed .sidebar-label, .sidebar.collapsed .sidebar-chevron, .sidebar.collapsed .submenu { display: initial !important; }
  .sidebar.collapsed .nav-link { justify-content: space-between !important; padding: 10px 20px !important; text-align: left; }
  .sidebar.collapsed .nav-link i { margin-right: .75rem !important; font-size: inherit; }
  .page-header .row.align-items-center > div:last-child { padding-left: 0 !important; }
}

@media (max-width: 767.98px) {
  body { font-size: 14px; }
  .main-body .page-wrapper { padding: 12px 10px !important; }
  .page-header.card { margin-bottom: 14px; }
  .page-header .card-block { padding: 14px !important; }
  .page-header .page-header-title { display: flex; align-items: flex-start; gap: 10px; }
  .page-header .page-header-title img { flex: 0 0 auto; }
  .page-header .page-header-title h4 { font-size: 16px !important; line-height: 1.3; }
  .page-header .page-header-title span { display: block; line-height: 1.4; }
  .row > [class*="col-"] { margin-bottom: 12px; }
  .row > [class*="col-"]:last-child { margin-bottom: 0; }
  .form-row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .btn, .form-control, .custom-select { min-height: 42px; font-size: 14px; }
  .btn-group, .page-header .text-right { display: flex; flex-wrap: wrap; gap: 8px; }
  .btn-group .btn, .page-header .text-right .btn { margin: 0 !important; }
  .dataTables_wrapper .top { align-items: stretch; }
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; text-align: left; width: 100%; }
  .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { width: 100%; min-height: 40px; }
  .table-responsive > table, .table-scroll-wrap > table, .table-scroll-container > table, .dataTables_scrollHeadInner table, .dataTables_scrollBody table { min-width: 680px; }
  .alert { overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .main-body .page-wrapper { padding: 8px 6px !important; }
  .card-block { padding-left: 12px !important; padding-right: 12px !important; }
  .page-header .page-header-title h4 { font-size: 15px !important; }
  .breadcrumb-title { padding-left: 0 !important; font-size: 11px; }
  .nav-right .user-profile > a span { max-width: 28vw; }
  .table-responsive > table, .table-scroll-wrap > table, .table-scroll-container > table, .dataTables_scrollHeadInner table, .dataTables_scrollBody table { min-width: 620px; }
}