/* ================================================================
   KPU KOTA BANDUNG — GLOBAL RESPONSIVE CSS
   ================================================================
   File ini menangani semua breakpoint responsif untuk seluruh
   halaman web KPU Kota Bandung agar ramah di smartphone, tablet,
   dan perangkat lainnya.
   
   Breakpoints:
   - 1200px : Tablet landscape
   - 992px  : Tablet portrait
   - 768px  : Phablet / tablet kecil
   - 576px  : Smartphone besar
   - 480px  : Smartphone standar
   - 375px  : Smartphone kecil (iPhone SE dll)
   ================================================================ */

/* ================================================================
   TABLET LANDSCAPE (max-width: 1200px)
   ================================================================ */
@media (max-width: 1200px) {

  /* Dashboard: Hero banner */
  .kpu-hero-img {
    height: 240px !important;
  }
  .kpu-hero-overlay {
    padding: 28px 30px !important;
  }

  /* Dapil popup */
  .dapil-popup {
    min-width: 300px !important;
    max-width: 400px !important;
  }

  /* Pemilih popup */
  .pemilih-popup {
    min-width: 280px !important;
    max-width: 360px !important;
  }

  /* Logo header banner */
  .logo-header-banner {
    gap: 20px !important;
  }
  .logo-kpu-text {
    font-size: 1rem !important;
  }
}

/* ================================================================
   TABLET PORTRAIT (max-width: 992px)
   ================================================================ */
@media (max-width: 992px) {

  /* Dashboard: Hero banner */
  .kpu-hero-img {
    height: 200px !important;
  }
  .kpu-hero-overlay {
    padding: 24px 24px !important;
  }
  .kpu-hero-title {
    font-size: clamp(0.95rem, 2.5vw, 1.5rem) !important;
  }

  /* Stat cards - force 2 per row */
  .card-stats .card-title {
    font-size: 1.2rem !important;
  }

  /* CRUD card header - stack buttons */
  .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Map toggle buttons */
  .map-toggle-container {
    justify-content: center !important;
  }
  .btn-map-toggle {
    padding: 8px 14px !important;
    font-size: 0.68rem !important;
  }

  /* Dapil legend grid */
  .dapil-legend-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }

  /* Winner meta horizontal */
  .winner-meta-horizontal {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .winner-separator {
    display: none !important;
  }

  /* Settings page */
  .hero-stats {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .hero-stat {
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }

  /* Pilpres/Pilgub/Pilwalkot: paslon cards */
  .paslon-foto,
  .paslon-foto-placeholder {
    width: 150px !important;
    height: 150px !important;
  }
  .paslon-suara-big {
    font-size: 1.5rem !important;
  }

  /* Comparison bar */
  .comparison-full-bar {
    height: 32px !important;
  }
  .comparison-segment {
    font-size: 0.65rem !important;
  }

  /* Statistik hero */
  .statistik-hero {
    padding: 28px 24px !important;
  }

  /* DPD/DPRD/DPRRI table */
  .table-responsive-calon {
    max-height: 50vh !important;
  }

  /* Data Manajemen hero stats */
  .data-hero-stats {
    flex-wrap: wrap !important;
  }

  /* Register page: side layout to column */
  .register-wrapper {
    flex-direction: column !important;
    max-width: 600px !important;
    gap: 20px !important;
  }
  .register-content {
    width: 100% !important;
  }
}

/* ================================================================
   PHABLET / TABLET KECIL (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* Dashboard: Hero */
  .kpu-hero-img {
    height: 180px !important;
  }
  .kpu-hero-overlay {
    padding: 20px 20px !important;
  }
  .kpu-hero-title {
    font-size: clamp(0.85rem, 2.2vw, 1.3rem) !important;
    line-height: 1.4 !important;
  }
  .kpu-hero-sub {
    font-size: 0.78rem !important;
  }
  .kpu-hero-badge {
    font-size: 0.65rem !important;
    padding: 3px 10px !important;
  }

  /* Logo header banner - stack vertical */
  .logo-header-banner {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  .logo-side-wrap {
    justify-content: center !important;
    flex: none !important;
    text-align: center !important;
  }
  .logo-side-img {
    height: 55px !important;
  }
  .logo-bangga-img {
    height: 65px !important;
  }
  .logo-berakhlak-img {
    height: 65px !important;
  }
  .logo-kpu-img {
    height: 80px !important;
  }
  .logo-kpu-text {
    font-size: 0.85rem !important;
    letter-spacing: 1px !important;
  }

  /* Stat cards */
  .card-stats .card-category {
    font-size: 0.7rem !important;
  }
  .card-stats .card-title {
    font-size: 1.1rem !important;
  }
  .icon-big i {
    font-size: 1.6rem !important;
  }

  /* CRUD table header */
  .btn-crud-add,
  .btn-crud-manage {
    padding: 7px 14px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.3px !important;
  }

  /* CRUD table text */
  .kpu-crud-table th {
    font-size: 0.65rem !important;
    padding: 10px 6px !important;
    letter-spacing: 0.3px !important;
  }
  .kpu-crud-table td {
    font-size: 0.78rem !important;
    padding: 8px 6px !important;
  }

  /* Section labels */
  .kpu-section-label span {
    font-size: 0.68rem !important;
    letter-spacing: 1px !important;
  }

  /* Map popup */
  .dapil-popup {
    min-width: unset !important;
    max-width: 320px !important;
    width: calc(100vw - 60px) !important;
  }
  .dapil-popup-header h4 {
    font-size: 0.95rem !important;
  }
  .dapil-popup-partai-logo,
  .dapil-popup-partai-logo-placeholder {
    width: 42px !important;
    height: 42px !important;
  }

  .pemilih-popup {
    min-width: unset !important;
    max-width: 320px !important;
    width: calc(100vw - 60px) !important;
  }
  .pemilih-popup-header h4 {
    font-size: 1rem !important;
  }
  .pemilih-popup-card-value {
    font-size: 1.3rem !important;
  }

  /* Dapil legend */
  .dapil-legend-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modals */
  .modal-dialog {
    margin: 12px !important;
  }
  .modal-body {
    padding: 16px !important;
  }
  .modal-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .kpu-input {
    font-size: 0.85rem !important;
    padding: 9px 12px !important;
  }

  /* Widget title */
  .widget-title {
    font-size: 0.78rem !important;
    letter-spacing: 1px !important;
  }

  /* News cards */
  .news-card-img-wrap {
    height: 140px !important;
  }
  .news-card-title {
    font-size: 0.92rem !important;
    min-height: auto !important;
  }
  .news-card-text {
    font-size: 0.75rem !important;
  }

  /* Winner cards */
  .winner-avatar-wrap {
    width: 85px !important;
    height: 85px !important;
  }
  .winner-avatar {
    width: 85px !important;
    height: 85px !important;
  }
  .winner-name {
    font-size: 0.85rem !important;
    min-height: auto !important;
  }
  .winner-badge {
    font-size: 0.52rem !important;
    padding: 2px 8px !important;
  }

  /* Preview overlay card */
  .kpu-preview-card {
    max-width: 340px !important;
    width: 92vw !important;
  }
  .kpu-preview-img,
  .kpu-preview-placeholder {
    width: 130px !important;
    height: 130px !important;
  }
  .kpu-preview-img-wrapper {
    padding: 24px 24px 12px !important;
  }
  .kpu-preview-info {
    padding: 14px 20px 20px !important;
  }
  .kpu-preview-name {
    font-size: 1rem !important;
  }
  .kpu-preview-suara {
    font-size: 1.2rem !important;
  }

  /* Paslon cards (Pilpres/Pilgub/Pilwalkot) */
  .paslon-foto,
  .paslon-foto-placeholder {
    width: 120px !important;
    height: 120px !important;
  }
  .paslon-suara-big {
    font-size: 1.3rem !important;
  }
  .paslon-nomor {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
  }

  /* Comparison bar */
  .comparison-full-bar {
    height: 28px !important;
  }

  /* Statistik hero */
  .statistik-hero {
    padding: 20px 16px !important;
  }

  /* Settings page specific */
  .calendar-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  /* DPD/DPRD/DPRRI specific */
  .filter-toolbar-row {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .search-container {
    max-width: 100% !important;
    width: 100% !important;
  }
  .dapil-chip {
    padding: 6px 10px !important;
    font-size: 0.58rem !important;
  }
  .partai-select {
    min-width: 140px !important;
    max-width: 100% !important;
    font-size: 0.78rem !important;
  }

  /* Live clock - hide on smaller screens */
  .kpu-live-clock {
    font-size: 0.7rem !important;
    padding: 3px 8px !important;
  }

  /* Login page specific */
  .login-wrapper {
    padding: 16px !important;
    max-width: 100% !important;
    margin-bottom: 80px !important;
  }
  .form-card {
    padding: 28px 22px !important;
    border-radius: 16px !important;
  }
  .form-title {
    font-size: 0.95rem !important;
  }
  .maskot-sura-sulu {
    width: 100px !important;
  }
  .mascot-label {
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
    padding: 5px 14px !important;
  }

  /* Election decorations - hide on mobile */
  .election-decoration,
  .election-decoration2 {
    display: none !important;
  }
  .floating-ballot-box,
  .floating-stamp,
  .floating-flag {
    display: none !important;
  }
  .corner-accent {
    width: 60px !important;
    height: 60px !important;
  }

  /* Register page */
  .register-content {
    width: 100% !important;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .step-line {
    width: 30px !important;
  }

  /* Footer / Truck */
  .truck-road {
    height: 55px !important;
  }
  .truck-container.truck-2,
  .truck-container.truck-3 {
    display: none !important;
  }

  /* Settings navbar */
  .kpu-navbar-inner {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 16px !important;
  }
  .kpu-nav-back {
    font-size: 0.72rem !important;
  }

  /* Data manajemen */
  .data-hero-stats {
    gap: 6px !important;
  }
}

/* ================================================================
   SMARTPHONE BESAR (max-width: 576px)
   ================================================================ */
@media (max-width: 576px) {

  /* Dashboard Hero */
  .kpu-hero {
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }
  .kpu-hero-img {
    height: 160px !important;
    border-radius: 12px !important;
  }
  .kpu-hero-overlay {
    border-radius: 12px !important;
    padding: 16px 16px !important;
    background: linear-gradient(
      180deg,
      rgba(6,13,26,0.4) 0%,
      rgba(6,13,26,0.85) 50%,
      rgba(6,13,26,0.95) 100%
    ) !important;
    justify-content: flex-end !important;
  }
  .kpu-hero-title {
    font-size: 0.88rem !important;
  }
  .kpu-hero-sub {
    font-size: 0.72rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Stat cards */
  .card-stats .card-title {
    font-size: 1rem !important;
  }
  .card-stats .card-category {
    font-size: 0.65rem !important;
  }

  /* Section labels */
  .kpu-section-label span {
    font-size: 0.62rem !important;
    letter-spacing: 0.8px !important;
  }

  /* CRUD buttons */
  .btn-crud-add,
  .btn-crud-manage {
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 16px !important;
    font-size: 0.68rem !important;
  }

  /* Card header title */
  .card-header .card-title {
    font-size: 0.85rem !important;
  }

  /* Table responsive wrapper */
  .table-responsive-crud {
    border-radius: 8px !important;
  }
  .kpu-crud-table th {
    font-size: 0.6rem !important;
    padding: 8px 4px !important;
  }
  .kpu-crud-table td {
    font-size: 0.72rem !important;
    padding: 7px 4px !important;
  }
  .kpu-crud-table tfoot td {
    font-size: 0.75rem !important;
    padding: 10px 4px !important;
  }
  .btn-action-edit,
  .btn-action-delete {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.7rem !important;
  }

  /* Map popup */
  .dapil-popup {
    max-width: calc(100vw - 40px) !important;
  }
  .dapil-popup-header {
    padding: 14px 16px 10px !important;
  }
  .dapil-popup-header h4 {
    font-size: 0.88rem !important;
  }
  .dapil-popup-body {
    padding: 10px 12px !important;
    max-height: 300px !important;
  }
  .dapil-popup-partai {
    padding: 10px !important;
  }
  .dapil-popup-partai-name {
    font-size: 0.82rem !important;
  }
  .dapil-popup-partai-suara {
    font-size: 0.72rem !important;
    padding: 2px 8px !important;
  }
  .dapil-popup-calon-photo,
  .dapil-popup-calon-photo-placeholder {
    width: 38px !important;
    height: 38px !important;
  }
  .dapil-popup-calon-name {
    font-size: 0.78rem !important;
  }
  .dapil-popup-calon-suara {
    font-size: 0.72rem !important;
    padding: 2px 8px !important;
  }

  .pemilih-popup {
    max-width: calc(100vw - 40px) !important;
  }
  .pemilih-popup-header {
    padding: 12px 14px 10px !important;
  }
  .pemilih-popup-header h4 {
    font-size: 0.95rem !important;
  }
  .pemilih-popup-card-value {
    font-size: 1.15rem !important;
  }
  .pemilih-popup-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .pemilih-popup-mini-card {
    padding: 8px 10px !important;
  }

  /* Modal */
  .modal-dialog {
    margin: 8px !important;
  }
  .modal-title {
    font-size: 0.88rem !important;
  }
  .modal-body {
    padding: 14px !important;
  }
  .kpu-modal-label {
    font-size: 0.7rem !important;
  }
  .btn-kpu-save {
    width: 100% !important;
    justify-content: center !important;
  }
  .btn-kpu-cancel-modal {
    width: 100% !important;
    justify-content: center !important;
  }

  /* News cards */
  .news-card-img-wrap {
    height: 120px !important;
  }
  .news-card-body {
    padding: 14px !important;
  }
  .news-card-title {
    font-size: 0.85rem !important;
  }
  .news-card-date {
    font-size: 0.6rem !important;
  }
  .news-card-link {
    font-size: 0.7rem !important;
  }

  /* Winner cards */
  .winner-avatar-wrap {
    width: 75px !important;
    height: 75px !important;
    margin: 8px auto 10px !important;
  }
  .winner-avatar {
    width: 75px !important;
    height: 75px !important;
  }
  .winner-title {
    font-size: 0.58rem !important;
    letter-spacing: 1px !important;
  }
  .winner-name {
    font-size: 0.78rem !important;
  }
  .winner-votes {
    font-size: 0.95rem !important;
  }
  .winner-votes-value {
    font-size: 0.88rem !important;
  }

  /* Preview overlay */
  .kpu-preview-card {
    max-width: 300px !important;
    width: 95vw !important;
    border-radius: 18px !important;
  }
  .kpu-preview-img,
  .kpu-preview-placeholder {
    width: 110px !important;
    height: 110px !important;
  }
  .kpu-preview-name {
    font-size: 0.92rem !important;
  }
  .kpu-preview-suara {
    font-size: 1.05rem !important;
  }
  .kpu-preview-meta {
    gap: 8px !important;
  }
  .kpu-preview-meta-item {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
  }

  /* Paslon mega cards (Pilpres/Pilgub/Pilwalkot) */
  .paslon-foto,
  .paslon-foto-placeholder {
    width: 100px !important;
    height: 100px !important;
  }
  .paslon-suara-big {
    font-size: 1.15rem !important;
  }
  .paslon-nomor {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.82rem !important;
  }

  /* Comparison bar */
  .comparison-full-bar {
    height: 24px !important;
    border-radius: 8px !important;
  }
  .comparison-segment {
    font-size: 0.55rem !important;
  }

  /* Login/Register specific */
  .login-wrapper {
    padding: 12px !important;
    margin-bottom: 70px !important;
  }
  .form-card {
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }
  .form-title {
    font-size: 0.88rem !important;
    letter-spacing: 1.5px !important;
  }
  .form-subtitle {
    font-size: 0.72rem !important;
  }
  .input-group input {
    padding: 12px 14px 12px 38px !important;
    font-size: 0.85rem !important;
  }
  .btn-submit {
    padding: 12px !important;
    font-size: 0.75rem !important;
  }
  .links-group {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .action-link {
    font-size: 0.72rem !important;
  }
  .kpu-header-badge {
    font-size: 0.48rem !important;
    padding: 4px 12px !important;
    letter-spacing: 1.5px !important;
  }
  .maskot-sura-sulu {
    width: 85px !important;
  }
  .mascot-label {
    font-size: 0.72rem !important;
    letter-spacing: 2px !important;
    padding: 4px 12px !important;
  }
  .logo-kpu {
    width: 60px !important;
  }

  /* Register: step progress */
  .step-line {
    width: 22px !important;
  }
  .step-circle {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.48rem !important;
  }
  .step-label {
    font-size: 0.38rem !important;
  }

  /* Register: form group */
  .form-group label {
    font-size: 0.65rem !important;
  }
  .form-group input,
  .form-group select {
    padding: 10px 12px !important;
    font-size: 0.8rem !important;
  }

  /* Footer */
  .login-footer,
  .register-footer {
    font-size: 0.58rem !important;
    padding: 3px !important;
  }
  .truck-road {
    height: 48px !important;
  }
  .truck-cargo {
    width: 90px !important;
    height: 32px !important;
  }
  .truck-cabin {
    width: 38px !important;
    height: 26px !important;
  }
  .cargo-text {
    font-size: 0.38rem !important;
  }
  .cargo-subtext {
    font-size: 0.3rem !important;
  }

  /* Corner accents */
  .corner-accent {
    width: 40px !important;
    height: 40px !important;
  }

  /* Settings */
  .calendar-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* DPD/DPRD/DPRRI */
  .result-counter {
    width: 100% !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
  }
  .partai-filter-wrap {
    width: 100% !important;
  }
  .partai-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Data manajemen */
  .data-kecamatan-label {
    font-size: 0.75rem !important;
  }

  /* Settings page */
  .kpu-navbar-inner {
    padding: 8px 12px !important;
  }
  .kpu-nav-logo img {
    height: 28px !important;
  }
  .kpu-nav-brand {
    font-size: 0.78rem !important;
  }
  .kpu-nav-brand small {
    font-size: 0.55rem !important;
  }

  /* Leaflet/Map controls */
  .leaflet-control-zoom {
    margin: 8px !important;
  }

  /* Generic: Ensure all tables are scrollable */
  .table-responsive,
  .table-responsive-crud,
  .table-responsive-calon,
  [class*="table-responsive"] {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Generic: Page inner padding */
  .page-inner {
    padding: 16px 10px !important;
  }

  /* Footer */
  .footer {
    font-size: 0.72rem !important;
    padding: 12px !important;
    text-align: center !important;
  }
  .footer .container-fluid {
    flex-direction: column !important;
    gap: 4px !important;
  }
}

/* ================================================================
   SMARTPHONE STANDAR (max-width: 480px)
   ================================================================ */
@media (max-width: 480px) {

  /* Dashboard Hero — compact overlay */
  .kpu-hero-img {
    height: 140px !important;
  }
  .kpu-hero-overlay {
    padding: 12px 14px !important;
  }
  .kpu-hero-title {
    font-size: 0.82rem !important;
  }
  .kpu-hero-badge {
    font-size: 0.55rem !important;
    padding: 2px 8px !important;
    gap: 5px !important;
  }
  .kpu-hero-date {
    font-size: 0.68rem !important;
  }

  /* Logo banner - ultra compact */
  .logo-header-banner {
    padding: 12px !important;
    gap: 10px !important;
  }
  .logo-side-img {
    height: 42px !important;
  }
  .logo-bangga-img {
    height: 50px !important;
  }
  .logo-berakhlak-img {
    height: 50px !important;
  }
  .logo-kpu-img {
    height: 60px !important;
  }
  .logo-kpu-text {
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
  }

  /* Card stats */
  .icon-big i {
    font-size: 1.4rem !important;
  }
  .card-stats .card-title {
    font-size: 0.92rem !important;
  }

  /* Widget title */
  .widget-title {
    font-size: 0.7rem !important;
    margin-bottom: 12px !important;
  }

  /* Map popups - ensure fit */
  .dapil-popup {
    max-width: calc(100vw - 24px) !important;
  }
  .dapil-popup-body {
    max-height: 250px !important;
  }
  .dapil-popup-partai-logo,
  .dapil-popup-partai-logo-placeholder {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  .dapil-popup-partai-name {
    font-size: 0.78rem !important;
  }
  .dapil-popup-calon {
    padding: 6px 4px !important;
    gap: 8px !important;
  }
  .dapil-popup-calon-photo,
  .dapil-popup-calon-photo-placeholder {
    width: 32px !important;
    height: 32px !important;
  }

  .pemilih-popup {
    max-width: calc(100vw - 24px) !important;
  }
  .pemilih-popup-card-value {
    font-size: 1rem !important;
  }
  .pemilih-popup-grid {
    gap: 4px !important;
  }
  .mini-card-label {
    font-size: 0.6rem !important;
  }
  .mini-card-value {
    font-size: 0.88rem !important;
  }

  /* Login form */
  .form-card {
    padding: 20px 14px !important;
  }
  .form-title {
    font-size: 0.82rem !important;
    letter-spacing: 1px !important;
  }
  .logo-kpu {
    width: 55px !important;
  }
  .maskot-sura-sulu {
    width: 75px !important;
  }
  .mascot-label {
    font-size: 0.65rem !important;
    letter-spacing: 1.5px !important;
    padding: 4px 10px !important;
  }

  /* Register step progress */
  .step-line {
    width: 16px !important;
  }
  .step-circle {
    width: 22px !important;
    height: 22px !important;
  }

  /* Paslon cards */
  .paslon-foto,
  .paslon-foto-placeholder {
    width: 85px !important;
    height: 85px !important;
  }
  .paslon-suara-big {
    font-size: 1rem !important;
  }

  /* Preview card */
  .kpu-preview-card {
    max-width: 280px !important;
    border-radius: 16px !important;
  }
  .kpu-preview-img,
  .kpu-preview-placeholder {
    width: 95px !important;
    height: 95px !important;
  }
  .kpu-preview-img-wrapper {
    padding: 20px 20px 10px !important;
  }
  .kpu-preview-info {
    padding: 10px 16px 16px !important;
  }
  .kpu-preview-name {
    font-size: 0.85rem !important;
  }
  .kpu-preview-suara {
    font-size: 0.95rem !important;
  }
  .kpu-preview-badge {
    font-size: 0.58rem !important;
  }
  .kpu-preview-meta-item {
    font-size: 0.62rem !important;
    padding: 3px 6px !important;
  }

  /* Alerts */
  .kpu-crud-alert {
    font-size: 0.78rem !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  /* Error / Success messages */
  .error-msg,
  .success-msg {
    font-size: 0.72rem !important;
    padding: 10px 12px !important;
  }

  /* Truck */
  .truck-road {
    height: 42px !important;
  }
  .road-line {
    bottom: 10px !important;
  }
  .truck-container {
    transform: scale(0.7) !important;
  }
  .truck-flag {
    display: none !important;
  }

  /* Navbar profile */
  .profile-username {
    display: none !important;
  }

  /* Page inner */
  .page-inner {
    padding: 12px 8px !important;
  }

  /* CRUD Alert */
  .kpu-crud-alert i {
    font-size: 0.9rem !important;
  }

  /* Settings */
  .calendar-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* General card body padding */
  .card-body {
    padding: 12px !important;
  }
}

/* ================================================================
   SMARTPHONE KECIL (max-width: 375px) — iPhone SE, etc.
   ================================================================ */
@media (max-width: 375px) {

  /* Dashboard Hero */
  .kpu-hero-img {
    height: 120px !important;
  }
  .kpu-hero-title {
    font-size: 0.75rem !important;
  }
  .kpu-hero-sub {
    font-size: 0.65rem !important;
    -webkit-line-clamp: 1 !important;
  }

  /* Logo banner */
  .logo-kpu-text {
    font-size: 0.62rem !important;
  }
  .logo-kpu-img {
    height: 50px !important;
  }
  .logo-side-img {
    height: 35px !important;
  }

  /* Stat cards */
  .card-stats .card-title {
    font-size: 0.85rem !important;
  }
  .card-stats .card-category {
    font-size: 0.6rem !important;
  }

  /* Login/Register */
  .form-card {
    padding: 18px 12px !important;
    border-radius: 12px !important;
  }
  .form-title {
    font-size: 0.75rem !important;
  }
  .kpu-header-badge {
    font-size: 0.42rem !important;
    padding: 3px 10px !important;
  }
  .logo-kpu {
    width: 48px !important;
  }
  .maskot-sura-sulu {
    width: 65px !important;
  }

  /* Register step */
  .step-line {
    width: 12px !important;
  }
  .step-circle {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.42rem !important;
  }
  .step-label {
    display: none !important;
  }

  /* Section labels */
  .kpu-section-label span {
    font-size: 0.55rem !important;
  }

  /* Popups */
  .dapil-popup {
    max-width: calc(100vw - 16px) !important;
  }
  .dapil-popup-header h4 {
    font-size: 0.82rem !important;
  }
  .dapil-popup-body {
    max-height: 220px !important;
  }

  .pemilih-popup {
    max-width: calc(100vw - 16px) !important;
  }
  .pemilih-popup-header h4 {
    font-size: 0.88rem !important;
  }
  .pemilih-popup-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modal */
  .modal-dialog {
    margin: 4px !important;
  }

  /* News card */
  .news-card-img-wrap {
    height: 100px !important;
  }

  /* Winner */
  .winner-avatar-wrap {
    width: 65px !important;
    height: 65px !important;
    margin: 6px auto 8px !important;
  }
  .winner-avatar {
    width: 65px !important;
    height: 65px !important;
  }
  .winner-name {
    font-size: 0.72rem !important;
  }

  /* Paslon */
  .paslon-foto,
  .paslon-foto-placeholder {
    width: 70px !important;
    height: 70px !important;
  }
  .paslon-suara-big {
    font-size: 0.88rem !important;
  }

  /* Preview */
  .kpu-preview-card {
    max-width: 260px !important;
  }
  .kpu-preview-img,
  .kpu-preview-placeholder {
    width: 80px !important;
    height: 80px !important;
  }
  .kpu-preview-name {
    font-size: 0.78rem !important;
  }
  .kpu-preview-suara {
    font-size: 0.85rem !important;
  }

  /* Vote stamp */
  .vote-stamp {
    width: 28px !important;
    height: 28px !important;
    top: 8px !important;
    right: 8px !important;
  }
  .vote-stamp i {
    font-size: 0.6rem !important;
  }

  /* Truck */
  .truck-road {
    height: 36px !important;
  }
  .truck-container {
    transform: scale(0.55) !important;
  }

  /* Corner */
  .corner-accent {
    width: 30px !important;
    height: 30px !important;
  }
  .corner-accent.bottom-left,
  .corner-accent.bottom-right {
    bottom: 40px !important;
  }

  /* Page inner */
  .page-inner {
    padding: 10px 6px !important;
  }
}

/* ================================================================
   LANDSCAPE ORIENTATION FIXES
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  /* Login/Register: reduce mascot and padding */
  .maskot-sura-sulu {
    width: 60px !important;
  }
  .outside-mascot-container {
    margin-bottom: 4px !important;
  }
  .login-wrapper {
    margin-bottom: 60px !important;
  }
  .form-card {
    padding: 16px 20px !important;
  }
  .truck-road {
    height: 35px !important;
  }

  /* Reduce hero height in landscape */
  .kpu-hero-img {
    height: 120px !important;
  }
}

/* ================================================================
   UTILITY: Smooth touch scrolling for all horizontal overflow
   ================================================================ */
.table-responsive,
.table-responsive-crud,
.table-responsive-calon,
[style*="overflow-x"],
[style*="overflow: auto"] {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ================================================================
   UTILITY: Prevent content overflow on mobile
   ================================================================ */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }
  .wrapper,
  .main-panel,
  .container,
  .page-inner {
    overflow-x: hidden !important;
  }
}

/* ================================================================
   UTILITY: Improved touch targets on mobile
   ================================================================ */
@media (max-width: 576px) {
  /* Ensure minimum touch target size of 44px */
  .btn-action-edit,
  .btn-action-delete {
    min-width: 36px !important;
    min-height: 36px !important;
  }
  
  /* Better tap area for sidebar links */
  .sidebar .nav-item a {
    padding: 10px 12px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Better tap area for links */
  .action-link {
    padding: 6px 4px !important;
    min-height: 44px !important;
  }
  
  /* Dropdown items */
  .dropdown-user .dropdown-item {
    padding: 10px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ================================================================
   PRINT MEDIA: Ensure proper printing
   ================================================================ */
@media print {
  .sidebar,
  .truck-road,
  .scan-line,
  .particles-container,
  .corner-accent,
  .election-decoration,
  .election-decoration2,
  .floating-ballot-box,
  .floating-stamp,
  .floating-flag,
  .kpu-navbar,
  .main-header {
    display: none !important;
  }
  .main-panel {
    width: 100% !important;
    margin-left: 0 !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}