/* ========== SIDEBAR OVERLAY & DRAWER ========== */
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:99; opacity:0; transition:opacity .25s;
}
.sidebar-overlay.active{ display:block; opacity:1; }

/* ========== GLOBAL OVERFLOW FIXES ========== */
.main{ min-width:0; overflow:hidden; }
.content{ min-width:0; overflow-y:auto; overflow-x:hidden; }
.topbar{ min-width:0; }
.topbar-left{ min-width:0; flex:1; }
.topbar-title{ min-width:0; flex:1; }
.topbar-right{ flex-shrink:0; }
.card{ overflow:hidden; min-width:0; }
.card-head{ min-width:0; }
.kpi{ overflow:hidden; min-width:0; }
.field{ min-width:0; }
.field input, .field select{ width:100%; min-width:0; box-sizing:border-box; }
.btn-add svg, .btn-icon svg{ flex-shrink:0; }
.table-wrap{ min-width:0; }
.plot-item{ overflow:hidden; }
.plot-item .pmeta{ min-width:0; }
.nav-item{ min-width:0; overflow:hidden; }
.galeri-card{ overflow:hidden; }
.gallery-empty{ overflow:hidden; }

/* ========== TABLET (max-width: 1024px) ========== */
@media (max-width:1024px){
  .kpi-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .grid-2, .two-col, .three-col{ grid-template-columns:1fr !important; }
  .map-layout{ grid-template-columns:1fr !important; }
  #leafletMap{ height:400px; }
  .plot-list{ max-height:400px; }
  .form-grid{ grid-template-columns:1fr 1fr !important; }
  .topbar{ padding:16px 20px; }
  .content{ padding:20px 20px 50px; }
  .galeri-grid{ grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); }
}

/* ========== MOBILE (max-width: 768px) ========== */
@media (max-width:768px){
  /* Sidebar becomes off-canvas drawer */
  .sidebar{
    position:fixed !important; left:-260px !important; top:0; height:100vh; z-index:100;
    width:260px; transition:left .3s ease;
    box-shadow:none; overflow-y:auto; overflow-x:hidden;
  }
  .sidebar.open{
    left:0 !important; box-shadow:4px 0 24px rgba(0,0,0,.3);
  }

  body.sidebar-open{ overflow:hidden; }

  /* Ensure nothing overflows viewport */
  .main{ overflow-x:hidden; }

  /* Hamburger visible */
  .hamburger{ display:block; }

  /* Topbar — compact, no wrap */
  .topbar{ padding:10px 12px; gap:6px; flex-wrap:nowrap; }
  .topbar-left{ gap:6px; min-width:0; flex:1; }
  .topbar-title{ min-width:0; flex:1; }
  .topbar h1{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar .sub{ font-size:9px; display:none; }
  .topbar-right{ gap:4px; flex-shrink:0; }
  .user-menu{ gap:6px; }
  .avatar{ width:30px; height:30px; font-size:10px; flex-shrink:0; }
  .btn-logout{ font-size:9px; padding:4px 7px; white-space:nowrap; }

  /* Content — tight padding */
  .content{ padding:10px 10px 36px; }

  /* KPI */
  .kpi-grid{ grid-template-columns:1fr 1fr !important; gap:8px; margin-bottom:12px; }
  .kpi{ padding:10px 10px 8px; }
  .kpi .value{ font-size:18px; }
  .kpi .label{ font-size:9px; }
  .kpi .delta{ font-size:10px; margin-top:5px; }

  /* Cards */
  .card{ padding:12px 10px; }
  .card h3{ font-size:13px; }
  .card .card-sub{ font-size:11px; margin-bottom:10px; }
  .card-head{ flex-wrap:wrap; gap:6px; }
  .card-head .btn-add{ font-size:10px; padding:6px 10px; }
  .chart-wrap{ height:180px; }
  .chart-wrap.tall{ height:220px; }

  /* Tables */
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -10px; padding:0 10px; }
  table.data-table{ min-width:400px; font-size:11.5px; }
  table.data-table th{ font-size:9px; padding:6px 8px; }
  table.data-table td{ padding:7px 8px; }

  /* Forms */
  .form-grid{ grid-template-columns:1fr !important; gap:10px; }
  .form-foot{ flex-direction:column; gap:8px; align-items:stretch; }
  .form-foot .btn-primary, .form-foot .btn-secondary{ width:100%; text-align:center; }

  /* Filter row */
  .filter-row{ gap:4px; flex-wrap:wrap; overflow:hidden; }
  .filter-row select.f, .filter-row input.f{ flex:1; min-width:0; font-size:11px; padding:6px 8px; }
  .filter-row .btn-add{ font-size:10px; padding:6px 10px; flex-shrink:0; white-space:nowrap; }

  /* Map layout */
  .map-layout{ gap:10px; }
  #leafletMap{ height:260px; }
  .plot-list{ max-height:260px; }
  .plot-item{ padding:8px 10px; }
  .plot-item .pname{ font-size:12px; }
  .plot-item .pmeta{ font-size:10px; gap:6px; }

  /* Dropzone */
  .dropzone{ padding:16px 12px; }
  .dropzone svg{ width:24px; height:24px; margin-bottom:6px; }
  .dropzone .dz-title{ font-size:12px; }
  .dropzone .dz-sub{ font-size:10px; }

  /* Gallery */
  .gallery{ grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:6px; margin-top:10px; }
  .photo-card img{ height:80px; }
  .photo-card .pc-body{ padding:6px 8px; }
  .photo-card .pc-name{ font-size:10px; }

  /* Footer */
  footer.foot{ padding:10px 10px; }
  .foot-content{ gap:6px; }
  .foot-content span{ font-size:10px; }

  /* Badge */
  .badge{ font-size:9px; padding:2px 7px; }

  /* Galeri page */
  .galeri-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .galeri-card img{ height:100px; }
  .galeri-card .gc-body{ padding:6px 8px; }
  .galeri-card .gc-name{ font-size:11px; }
  .galeri-card .gc-meta{ font-size:9px; }

  /* Dashboard foto */
  .dash-foto-grid{ grid-template-columns:repeat(2,1fr); gap:6px; }

  /* Toast */
  .toast{ font-size:11px; padding:8px 16px; bottom:12px; max-width:90vw; }

  /* Login */
  .login-box{ padding:24px 18px 20px; }
}

/* ========== SMALL MOBILE (max-width: 480px) ========== */
@media (max-width:480px){
  .kpi-grid{ grid-template-columns:1fr !important; }
  .topbar{ padding:8px 8px; }
  .topbar h1{ font-size:14px; }
  .content{ padding:8px 6px 32px; }

  .card{ padding:10px 8px; }
  .card h3{ font-size:12px; }

  .gallery{ grid-template-columns:repeat(2,1fr); }
  .galeri-grid{ grid-template-columns:repeat(2,1fr); gap:6px; }

  /* Modal mobile */
  .modal-overlay{ padding:10px; }
  .modal-box{ max-width:100%; border-radius:12px; max-height:85vh; }
  .modal-body{ padding:12px; }
  .modal-head{ padding:10px 12px; }
  .modal-head h3{ font-size:15px; }
  .modal-foot{ flex-direction:column; gap:6px; }
  .modal-foot .btn-primary, .modal-foot .btn-secondary{ width:100%; text-align:center; }

  /* Filter row wrap */
  .filter-row{ flex-direction:column; }
  .filter-row .btn-add{ width:100%; justify-content:center; flex-shrink:1; }

  /* Lightbox mobile */
  .lb-prev, .lb-next{ width:32px; height:32px; font-size:20px; }
  .lb-close{ top:-4px; right:2px; font-size:26px; width:32px; height:32px; }
  .lb-caption{ flex-direction:column; gap:4px; text-align:center; }
  .lb-info{ text-align:center; }
  .lb-img{ max-height:65vh; }
}