/* -- RESPONSIVE: TABLET <= 1024px ----------------------- */
@media (max-width:1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

      .grid-3 {
        grid-template-columns: 1fr 1fr
      }

  .admin-sidebar {
    width: 210px
  }

  .modal-penugasan-detail-dialog {
    width: min(960px, calc(100vw - 40px));
    max-width: min(960px, calc(100vw - 40px))
  }

  .modal-addloc-dialog {
    width: min(900px, calc(100vw - 40px));
    max-width: min(900px, calc(100vw - 40px))
  }

  .penugasan-detail-map {
    height: 180px
  }

  .coord-picker-map {
    height: 250px
  }
}

    /* -- RESPONSIVE: MOBILE <= 768px ------------------------ */
    @media (max-width:768px) {

      /* Sidebar slide-out */
      .admin-sidebar {
        position: fixed;
        left: -230px;
        top: 0;
        height: 100vh;
        z-index: 500;
        transition: left 0.26s var(--ease);
        box-shadow: none;
        width: 220px
      }

      #shell-admin.sidebar-open .admin-sidebar {
        left: 0;
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.22)
      }

      #shell-admin.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(10, 20, 40, 0.45);
        z-index: 499;
        backdrop-filter: blur(1px)
      }

      .hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center
      }

      /* Grid fallbacks */
      .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px
      }

      .grid-2,
      .grid-3 {
        grid-template-columns: 1fr
      }

      /* Spacing */
      .admin-panel {
        padding: 14px
      }

      .admin-topbar {
        padding: 10px 14px
      }

      .field-topbar {
        padding: 10px 12px
      }

      .field-brand {
        font-size: 11px;
        letter-spacing: 0.6px;
        max-width: 110px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .field-topbar-actions {
        gap: 8px
      }

      .field-topbar .gas-indicator {
        padding: 2px 6px;
        font-size: 8px;
        gap: 4px
      }

      .field-topbar #field-team-badge {
        padding: 3px 7px;
        font-size: 9px;
        line-height: 1.1;
        white-space: nowrap;
        max-width: 58px;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .field-topbar .field-icon-btn {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 12px
      }

      .field-topbar #field-avatar {
        width: 34px;
        height: 34px;
        font-size: 12px
      }

      /* Typography */
      .stat-val {
        font-size: 26px
      }

      .topbar-sub {
        display: none
      }

      /* Cards */
      .login-card {
        padding: 28px 20px
      }

      /* Modals */
      .modal {
        width: calc(100vw - 20px) !important;
        max-height: 90vh;
        border-radius: 10px
      }

      #modal-penugasan-detail {
        padding: 10px
      }

      #modal-addloc {
        padding: 10px
      }

      .modal-penugasan-detail-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 90vh
      }

      .modal-addloc-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 90vh
      }

      .modal-penugasan-detail-dialog .modal-body {
        padding: 16px 14px 18px;
        scrollbar-gutter: auto
      }

      .modal-addloc-dialog .modal-body {
        padding: 16px
      }

      .penugasan-detail-grid,
      .penugasan-detail-media-grid,
      .penugasan-detail-coord-grid {
        grid-template-columns: 1fr
      }

      .penugasan-detail-section-head,
      .penugasan-detail-hero,
      .penugasan-detail-photo-actions {
        align-items: flex-start
      }

      .penugasan-kv-row {
        grid-template-columns: 1fr;
        gap: 6px
      }

      .penugasan-detail-map {
        height: 170px
      }

      .penugasan-detail-photo-slot {
        min-height: 160px
      }

      .coord-picker-map {
        height: 220px
      }

      .verify-primary-grid,
      .verify-summary-grid,
      .verify-validation-grid {
        grid-template-columns: 1fr
      }

      .verify-summary-panel,
      .verify-primary-card,
      .verify-layer-body {
        padding: 14px
      }

      .verify-mini-map {
        height: 190px
      }

      .verify-summary-head,
      .verify-layer-card summary,
      .verify-section-topline,
      .verify-photo-preview-meta {
        align-items: flex-start
      }

      .penugasan-validation-status {
        justify-items: start;
        text-align: left
      }

      .penugasan-validation-actionbar {
        align-items: stretch
      }

      .penugasan-validation-actions {
        width: 100%;
        justify-content: stretch
      }

      .penugasan-validation-actions .btn-sm {
        flex: 1 1 180px
      }

      /* Export */
      .export-grid {
        grid-template-columns: 1fr
      }

      /* Hide secondary topbar elements */
      #admin-live-badge {
        display: none
      }

      /* R-2: iOS auto-zoom  -  input/select font < 16px menyebabkan zoom otomatis di iOS Safari */
      .form-input,
      .form-select {
        font-size: 16px !important
      }

      /* R-3: Touch target btn-sm  -  naik dari ~26px ke min 44px */
      .btn-sm {
        min-height: 44px;
        padding: 9px 14px;
        font-size: 12px
      }

      /* topbar actions boleh sedikit lebih kecil tapi tetap >=36px */
      .topbar-actions .btn-sm {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 11px
      }

      /* R-4: Back button  -  tombol Kembali di verify panel, touch target naik dari ~24px ke 44px */
      .back-btn {
        width: fit-content;
        max-width: 100%;
        padding: 10px 14px 10px 10px;
        min-height: 44px;
        display: inline-flex;
        align-items: center
      }

      .back-btn-label {
        font-size: 14px
      }

      .back-btn-hint {
        font-size: 10px
      }

      .verify-kicker {
        font-size: 10.5px
      }

      .verify-title {
        font-size: 17px
      }

      .verify-coords {
        font-size: 11px;
        line-height: 1.55
      }

      .verify-summary-label,
      .verify-section-topline,
      .verify-validation-label,
      .verify-layer-hint {
        font-size: 11px
      }

      .verify-summary-subtitle,
      .verify-summary-card-note,
      .verify-validation-subtitle,
      .verify-validation-footnote,
      .verify-validation-note,
      .verify-evidence-subtitle {
        font-size: 12px;
        line-height: 1.65
      }

      .verify-summary-card-value {
        font-size: 17px
      }

      .verify-chip,
      .verify-mini-pill,
      .dist-badge {
        font-size: 11px
      }

      .gps-bar,
      .btn-gps,
      .status-btn,
      .verify-validation-value,
      .verify-layer-card summary {
        font-size: 13px
      }

      .verify-validation-card .form-label,
      .verify-validation-domain .form-label {
        font-size: 12px
      }

      .verify-validation-card .form-input,
      .verify-validation-card .form-select,
      .verify-validation-domain .form-input,
      .verify-validation-domain .form-select,
      #verify-notes {
        font-size: 16px !important;
        min-height: 50px
      }

      /* R-5a: Map stat bar  -  scroll horizontal, jaga tinggi peta tidak terpotong */
      .map-stat-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
      }

      .map-stat-bar::-webkit-scrollbar {
        display: none
      }

      /* R-6: Penugasan table  -  sembunyikan kolom ID & Alamat (tidak kritis di mobile) */
      #penugasan-table th:nth-child(2),
      #penugasan-table td:nth-child(2),
      #penugasan-table th:nth-child(4),
      #penugasan-table td:nth-child(4) {
        display: none
      }

      /* R-7: Modal close  -  touch target naik dari ~18px ke 44px */
      .modal-close {
        padding: 10px;
        margin: -4px;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center
      }

      /* R-8: Logout button  -  touch target naik dari ~24px ke 44px */
      .btn-logout {
        padding: 8px 14px;
        min-height: 40px
      }

      /* R-10: Task filter pills di field app */
      .task-hdr .filter-pill,
      .filter-pill {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 12px
      }

      /* R-10b: Field bottom nav tab  -  pastikan >=44px */
      .nav-tab {
        min-height: 44px
      }
    }

    /* -- RESPONSIVE: SMALL MOBILE <= 480px ------------------ */
    @media (max-width:480px) {
      .field-topbar {
        padding: 10px
      }

      .field-brand {
        max-width: none;
        letter-spacing: 0
      }

      .field-brand-text {
        display: none
      }

      .field-topbar-actions {
        gap: 5px
      }

      .field-topbar .gas-indicator {
        padding: 2px 5px;
        font-size: 7.5px
      }

      .field-topbar #field-team-badge {
        max-width: 48px;
        font-size: 8px;
        padding: 3px 6px
      }

      .field-topbar .field-icon-btn {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 0
      }

      .field-topbar .field-icon-btn::before {
        font-size: 11px;
        line-height: 1
      }

      .field-topbar #field-profile-btn::before {
        content: 'P'
      }

      .field-topbar #field-logout-btn::before {
        content: 'K'
      }

      .field-topbar #field-avatar {
        width: 32px;
        height: 32px;
        font-size: 11px
      }

      .task-hdr {
        flex-direction: column;
        align-items: stretch;
        gap: 10px
      }

      .task-hdr #task-count-label {
        font-size: 12px !important
      }

      .task-hdr-filters {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px
      }

      .task-filter-search {
        grid-column: 1 / -1;
        min-width: 0;
        width: 100%
      }

      .task-filter-search .form-input {
        width: 100%;
        font-size: 12px
      }

      .task-hdr-filters .filter-pill {
        width: 100%;
        justify-content: center;
        padding: 7px 6px !important;
        font-size: 10px !important
      }

      .task-body {
        padding: 10px 12px 8px
      }

      .task-name {
        font-size: 13px;
        line-height: 1.35
      }

      .task-submeta {
        font-size: 10px
      }

      .task-addr {
        font-size: 10px;
        margin-bottom: 6px;
        line-height: 1.4
      }

      .task-badges {
        gap: 5px
      }

      .task-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 7px 12px
      }

      .task-meta {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .stats-grid {
        grid-template-columns: 1fr
      }

      .topbar-title {
        font-size: 14px
      }

      .stat-val {
        font-size: 24px
      }

      .login-card {
        padding: 24px 16px
      }

      /* R-5b: Map stat bar padding di layar kecil (tetap nowrap dari 768px) */
      .map-stat-bar {
        gap: 6px;
        padding: 8px 10px
      }

      /* R-9: Toast  -  jangan overflow di layar <=480px, izinkan text wrap */
      .toast-wrap {
        left: 8px;
        right: 8px;
        align-items: stretch
      }

      .toast {
        max-width: 100%;
        white-space: normal
      }

      /* Filter pill  -  kurangi sedikit lebar tapi pertahankan min-height dari 768px */
      .filter-pill {
        padding: 6px 10px;
        font-size: 11px
      }

      .back-btn {
        padding: 11px 15px 11px 11px
      }

      .back-btn-icon {
        width: 30px;
        height: 30px;
        font-size: 16px
      }

      .back-btn-label {
        font-size: 14px
      }

      .back-btn-hint {
        font-size: 10px
      }

      .verify-kicker {
        font-size: 10px;
        letter-spacing: 0.9px
      }

      .verify-title {
        font-size: 18px;
        line-height: 1.25
      }

      .verify-coords {
        font-size: 11px;
        line-height: 1.55
      }

      .gps-bar {
        font-size: 12.5px
      }

      .dist-badge,
      .verify-chip,
      .verify-mini-pill {
        font-size: 11px
      }

      .verify-summary-subtitle,
      .verify-summary-card-note,
      .verify-validation-subtitle,
      .verify-validation-footnote,
      .verify-validation-note,
      .verify-evidence-subtitle {
        font-size: 12px;
        line-height: 1.6
      }

      .verify-validation-card .form-label,
      .verify-validation-domain .form-label {
        font-size: 12px
      }

      .verify-validation-card .form-input,
      .verify-validation-card .form-select,
      .verify-validation-domain .form-input,
      .verify-validation-domain .form-select,
      #verify-notes {
        font-size: 16px !important;
        min-height: 48px
      }

      /* R-6b: Penugasan filter dropdowns  -  full width & touch friendly di layar sangat kecil */
      #panel-penugasan .form-select {
        width: 100% !important;
        min-height: 44px
      }

      .penugasan-toolbar-actions,
      .penugasan-toolbar-filters {
        flex-basis: 100%
      }

      .penugasan-toolbar-filters {
        grid-template-columns: 1fr;
        min-width: 0;
        margin-left: 0
      }
    }

    /* -- CETAK / PRINT -------------------------------------- */
    #printable-area {
      display: none
    }

    @media print {
      html,
      body {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        background: #fff !important
      }

      @page {
        size: A4 portrait;
        margin: 22mm 18mm 20mm 22mm
      }

      @page report-portrait {
        size: A4 portrait;
        margin: 22mm 18mm 20mm 22mm
      }

      @page report-landscape {
        size: A4 landscape;
        margin: 16mm 14mm 16mm 14mm
      }

      * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important
      }

      body>* {
        display: none !important
      }

      #printable-area {
        display: block !important;
        font-family: 'Times New Roman', serif;
        font-size: 10pt;
        color: #000;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important
      }

      #printable-area .pdf-page {
        page: report-portrait;
        width: auto !important;
        min-height: auto !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 0 10mm 0 !important;
        box-sizing: border-box !important;
        break-after: page;
        page-break-after: always
      }

      #printable-area .pdf-page.pdf-page-landscape {
        page: report-landscape;
      }

      #printable-area .pdf-page:last-child {
        break-after: auto;
        page-break-after: auto;
        margin-bottom: 0 !important
      }

      #printable-area .pdf-page.pdf-page-browser {
        page: auto !important;
        display: block !important;
        width: auto !important;
        min-height: auto !important;
        padding: 12mm 8mm 10mm 8mm !important;
        margin: 0 !important;
        break-before: page;
        page-break-before: always;
        break-after: auto !important;
        page-break-after: auto !important
      }

      #printable-area .pdf-page.pdf-page-browser.pdf-page-landscape {
        page: report-landscape !important;
        padding: 10mm 6mm 8mm 6mm !important
      }

      #printable-area .pdf-page.pdf-page-browser:first-child {
        break-before: auto;
        page-break-before: auto
      }

      #printable-area .oss-item,
      #printable-area .break-avoid {
        break-inside: avoid !important;
        page-break-inside: avoid !important
      }

      #printable-area .oss-page {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        align-items: start !important
      }

      #printable-area .oss-page.oss-page-single {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important
      }

      #printable-area .oss-item img {
        object-fit: contain !important;
        max-width: 100% !important;
        max-height: 300px !important;
        width: auto !important;
        height: auto !important
      }

      #printable-area .pdf-page.pdf-page-browser > div {
        break-inside: auto !important;
        page-break-inside: auto !important;
      }

      #printable-area .pdf-page.pdf-page-browser svg,
      #printable-area .pdf-page.pdf-page-browser img,
      #printable-area .pdf-page.pdf-page-browser .report-kop-surat {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
      }

      #printable-area .report-section-title,
      #printable-area .report-photo-attachment,
      #printable-area .report-photo-attachment>div,
      #printable-area .report-photo-attachment .rpc,
      #printable-area .report-photo-attachment .oss-item,
      #printable-area .report-photo-attachment .rpc-img,
      #printable-area .report-photo-attachment .oss-item-image,
      #printable-area .report-photo-attachment .oss-page {
        break-inside: avoid !important;
        page-break-inside: avoid !important
      }

      #printable-area .report-section-title {
        display: block !important;
        margin-top: 2mm !important;
        padding-top: 1mm !important;
        orphans: 3;
        widows: 3
      }

      #printable-area .report-photo-attachment,
      #printable-area .report-photo-attachment .rpc,
      #printable-area .report-photo-attachment .oss-item {
        overflow: visible !important
      }

      #printable-area .report-photo-attachment .rpc-img,
      #printable-area .report-photo-attachment .oss-item-image {
        overflow: hidden !important
      }

      #printable-area .report-kop-surat {
        break-inside: avoid;
        page-break-inside: avoid;
        align-items: center !important;
        gap: 12pt !important;
        padding: 0 4pt 8pt 0 !important;
        margin-bottom: 10pt !important
      }

      #printable-area .report-kop-logo {
        width: 72px !important;
        height: 72px !important;
        display: block !important;
        visibility: visible !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important
      }

      #printable-area .report-kop-text {
        padding-right: 68px !important
      }

      #printable-area .report-body-text {
        font-size: 9pt !important;
        line-height: 1.72 !important;
        color: #1d2733 !important;
        margin: 0 0 7pt !important;
        text-align: justify !important
      }

      #printable-area .report-highlight {
        margin: 0 0 8pt !important;
        padding: 7pt 9pt !important;
        border: 1px solid #d6dde7 !important;
        background: #f8fbff !important;
        border-radius: 6pt !important;
        font-size: 8.45pt !important;
        line-height: 1.58 !important;
        color: #233244 !important
      }

      #printable-area .report-list {
        margin: 0 0 10pt !important;
        padding-left: 18pt !important;
        font-size: 8.45pt !important;
        line-height: 1.6 !important;
        color: #233244 !important
      }

      #printable-area .report-list li {
        margin: 0 0 4pt !important
      }

      #printable-area .pdf-page.pdf-page-browser table {
        break-inside: auto !important;
        page-break-inside: auto !important;
        margin-bottom: 8pt !important;
        font-family: 'Times New Roman', serif !important;
        border: 0.5px solid #aeb9c8 !important;
        table-layout: fixed !important;
        line-height: 1.28 !important
      }

      #printable-area .pdf-page.pdf-page-browser thead {
        display: table-header-group !important
      }

      #printable-area .pdf-page.pdf-page-browser tfoot {
        display: table-footer-group !important
      }

      #printable-area .pdf-page.pdf-page-browser th {
        padding: 4pt 3pt !important;
        font-size: 8pt !important;
        line-height: 1.2 !important;
        text-align: center !important;
        vertical-align: middle !important;
        border: 0.5px solid #163f73 !important;
        border-bottom: 1px solid #163f73 !important
      }

      #printable-area .pdf-page.pdf-page-browser td {
        padding: 3pt 4pt !important;
        font-size: 8pt !important;
        line-height: 1.2 !important;
        border: 0.5px solid #bcc6d3 !important;
        vertical-align: middle !important;
        white-space: normal !important;
        word-break: break-word !important;
      }

      #printable-area .pdf-page.pdf-page-browser tbody td:first-child {
        text-align: center !important
      }

      #printable-area .pdf-page.pdf-page-browser tbody tr:nth-child(even) td {
        border-top: 1px solid #bcc6d3 !important
      }

      #printable-area .pdf-page.pdf-page-browser tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important
      }

      #printable-area .pdf-page.pdf-page-browser .report-photo-page,
      #printable-area .pdf-page.pdf-page-browser .report-photo-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important
      }

      #printable-area .kop-line {
        border-top: 3px solid #003366;
        margin: 6px 0 2px
      }

      #printable-area .kop-line2 {
        border-top: 1px solid #003366;
        margin-bottom: 16px
      }

      #printable-area table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 14px
      }

      #printable-area th {
        background: #003366 !important;
        color: white !important;
        padding: 5px 7px;
        font-size: 9pt;
        text-align: left;
        border: 1px solid #003366
      }

      #printable-area td {
        padding: 4px 7px;
        font-size: 9pt;
        border: 1px solid #bbb;
        vertical-align: top
      }

      #printable-area table[style*="border:none"] td,
      #printable-area table[style*="border:none"] th {
        border: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important
      }

      #printable-area tr:nth-child(even) td {
        background: #f5f8ff !important
      }

      #printable-area .page-break {
        page-break-before: always
      }

      #printable-area .no-break {
        page-break-inside: avoid
      }

      #printable-area .stat-row {
        display: flex;
        gap: 10px;
        margin-bottom: 14px
      }

      #printable-area .stat-box {
        border: 1px solid #ccc;
        border-top: 3px solid #003366;
        padding: 8px 12px;
        flex: 1;
        text-align: center
      }

      #printable-area .stat-box.ok {
        border-top-color: #1a7a34
      }

      #printable-area .stat-box.fail {
        border-top-color: #cc2222
      }

      #printable-area .stat-box.acc {
        border-top-color: #b07000
      }

      #printable-area .stat-val {
        font-size: 20pt;
        font-weight: 900
      }

      #printable-area .stat-label {
        font-size: 7.5pt;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #666;
        margin-top: 2px
      }

      #printable-area .ttd-area {
        margin-top: 28px;
        display: flex;
        justify-content: flex-end
      }

      #printable-area .ttd-box {
        border-top: 1px solid #000;
        width: 190px;
        text-align: center;
        padding-top: 6px;
        font-size: 9pt
      }
    }