/* ===========================================================
 *  DASHBOARD MOBILE — native-app feel overrides (≤ 720px)
 *  Dipakai oleh: dashboard-patriot.html, dashboard-lari.html
 *
 *  Inspirasi: iOS Settings, Apple Health, Linear mobile.
 *  Tujuan: card list (bukan tabel), sticky search dengan blur,
 *  bottom-sheet dialog, bottom action bar, safe-area padding
 *  untuk iPhone notch/bottom indicator, tap targets ≥ 44px.
 * =========================================================== */

/* ============= DEFAULT (desktop): sembunyikan elemen mobile-only ============= */
.mobile-action-bar { display: none; }

@media (max-width: 720px) {

  /* ============= GLOBAL ============= */
  html, body {
    /* iOS-style background */
    background: #f2f2f7;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: contain;
  }
  body {
    /* Reserve space for sticky bottom bar (kalau ada) */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
  * { -webkit-touch-callout: none; }
  input, textarea, select { -webkit-touch-callout: default; }

  /* ============= TOPBAR — native nav style ============= */
  .pt-topbar {
    padding: 12px 14px;
    padding-top: calc(12px + env(safe-area-inset-top, 0));
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    /* Glassmorphism feel */
    background: linear-gradient(135deg, rgba(11,19,48,.96) 0%, rgba(20,34,77,.96) 100%);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
  .pt-topbar__brand img { width: 32px; height: 32px; }
  .pt-topbar__title { font-size: 14px; }
  .pt-topbar__sub { display: none; }

  /* Topbar nav: jadikan icon-only di mobile */
  .pt-topbar__nav { gap: 6px; }
  .pt-topbar__link {
    padding: 0;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
  }
  .pt-topbar__link-text { display: none; }
  .pt-topbar__link svg { width: 16px; height: 16px; }

  /* ============= MAIN ============= */
  .pt-main {
    padding: 14px 0 24px;
    gap: 14px;
  }

  /* ============= STATS — horizontal scroll (Apple Health style) ============= */
  .pt-stats {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 10px;
    padding: 0 14px 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pt-stats::-webkit-scrollbar { display: none; }
  .pt-stat-card {
    flex: 0 0 auto;
    min-width: 158px;
    scroll-snap-align: start;
    padding: 14px 16px;
    border-radius: 16px;
    border: none;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 4px 12px -4px rgba(0, 0, 0, 0.06);
    transition: transform 80ms ease;
  }
  .pt-stat-card:active { transform: scale(0.97); }
  .pt-stat-card__icon { width: 36px; height: 36px; border-radius: 10px; }
  .pt-stat-card__num { font-size: 22px; }
  .pt-stat-card__label { font-size: 11px; letter-spacing: 0.02em; }

  /* ============= SHIRT BREAKDOWN (lari) — keep grid but compact ============= */
  .lari-shirt-breakdown {
    margin: 0 14px;
    border-radius: 16px;
    border: none;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 4px 12px -4px rgba(0, 0, 0, 0.06);
    padding: 14px 16px 16px;
  }
  .lari-shirt-breakdown__title { font-size: 15px; }
  .lari-shirt-breakdown__lead { font-size: 11.5px; }
  .lari-shirt-grid { gap: 6px; }
  .lari-shirt-cell { padding: 9px 4px; border-radius: 10px; }
  .lari-shirt-cell__size { font-size: 14px; }
  .lari-shirt-cell__count { font-size: 17px; }
  .lari-shirt-cell__label { font-size: 9.5px; }

  /* ============= SYNC BANNER ============= */
  .lari-sync-banner {
    margin: 0 14px;
    border-radius: 14px;
    padding: 12px 14px;
  }

  /* ============= TOOLBAR — sticky search + chips ============= */
  .pt-toolbar {
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    position: sticky;
    top: calc(60px + env(safe-area-inset-top, 0));
    z-index: 20;
    background: rgba(242, 242, 247, 0.92);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  }
  .pt-search {
    width: 100%;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e8ef;
    padding: 0 14px;
    height: 44px;
  }
  .pt-search input {
    font-size: 16px; /* iOS zoom prevention */
    height: 100%;
  }

  /* Toolbar actions: hanya sisakan Export di toolbar mobile.
     Filter & WA Massal dipindah ke bottom action bar. */
  .pt-toolbar__actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lari-toolbar__actions .select { display: none; }
  .lari-toolbar__actions .btn--primary { display: none; }

  .lari-toolbar__actions .pt-export {
    flex: 1 1 100%;
  }
  .pt-export__trigger {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    justify-content: center;
    background: #fff;
    border-color: #e5e8ef;
    font-size: 13px;
  }
  .pt-export__dropdown {
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
      0 8px 24px -4px rgba(0, 0, 0, 0.18),
      0 2px 6px rgba(0, 0, 0, 0.06);
    /* Position above the trigger in mobile (bottom-anchored sticky toolbar) */
    right: 0;
    left: 0;
    width: auto;
  }

  /* ============= TABLE → CARDS ============= */
  .pt-table-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 14px;
    overflow: visible;
  }
  .pt-table {
    background: transparent;
    border-spacing: 0;
  }
  .pt-table thead { display: none; }
  .pt-table, .pt-table tbody, .pt-table tr, .pt-table td {
    display: block;
    width: 100%;
    border: none;
  }

  /* Tiap baris jadi kartu */
  .pt-table tbody tr {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 10px;
    padding: 14px;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 4px 12px -4px rgba(0, 0, 0, 0.06);
    position: relative;
    display: grid;
    gap: 6px 10px;
    align-items: center;
    transition: transform 80ms ease, box-shadow 120ms ease;
  }
  .pt-table tbody tr:active {
    transform: scale(0.985);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  /* Sembunyikan label "data-label" generik */
  .pt-table tbody td::before { display: none; }
  .pt-table tbody td { padding: 0; border: none; }

  /* ===== LARI TABLE — kartu peserta ===== */
  .lari-table tbody tr {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "slot   name   kaos"
      "slot   dom    tgl"
      "wa     wa     wa"
      "act    act    act";
  }
  .lari-table tbody td.pt-td--num             { grid-area: slot; align-self: center; text-align: left; }
  .lari-table tbody td[data-label="Nama"]     { grid-area: name; align-self: end; }
  .lari-table tbody td[data-label="Kaos"]     { grid-area: kaos; text-align: right; align-self: end; }
  .lari-table tbody td[data-label="L/P"]      { display: none; }
  .lari-table tbody td[data-label="Domisili"] { grid-area: dom;  align-self: start;
                                                font-size: 12.5px; color: #6b7385; }
  .lari-table tbody td[data-label="Tanggal"]  { grid-area: tgl;  align-self: start;
                                                text-align: right;
                                                font-size: 11px; color: #94a3b8;
                                                white-space: nowrap; }
  .lari-table tbody td[data-label="WhatsApp"] { grid-area: wa;
                                                margin-top: 6px;
                                                padding-top: 8px;
                                                border-top: 1px solid #f1f4f9; }
  .lari-table tbody td.pt-cell-actions        { grid-area: act; }

  /* ===== PATRIOT TABLE — kartu lead =====
     :not(.lari-table):not(.bc-table) supaya tabel "lari" & "broadcast"
     pakai grid layout-nya sendiri. */
  .pt-table:not(.lari-table):not(.bc-table) tbody tr {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   tgl"
      "dom    dom"
      "email  email"
      "tel    tel"
      "act    act";
  }
  .pt-table:not(.lari-table):not(.bc-table) tbody td.pt-td--num                { display: none; }
  .pt-table:not(.lari-table):not(.bc-table) tbody td[data-label="Nama"]        { grid-area: name; }
  .pt-table:not(.lari-table):not(.bc-table) tbody td[data-label="Tanggal"]     { grid-area: tgl; text-align: right;
                                                                                  font-size: 11.5px; color: #94a3b8;
                                                                                  white-space: nowrap; }
  .pt-table:not(.lari-table):not(.bc-table) tbody td[data-label="Domisili"]    { grid-area: dom;
                                                                                  font-size: 12.5px; color: #6b7385; }
  .pt-table:not(.lari-table):not(.bc-table) tbody td[data-label="Email"]       { grid-area: email;
                                                                                  font-size: 12.5px; color: #6b7385;
                                                                                  overflow: hidden; text-overflow: ellipsis;
                                                                                  white-space: nowrap; max-width: 100%; }
  .pt-table:not(.lari-table):not(.bc-table) tbody td[data-label="Email"] a     { color: inherit; }
  .pt-table:not(.lari-table):not(.bc-table) tbody td[data-label="Telepon"]     { grid-area: tel;
                                                                                  font-size: 12.5px; color: #6b7385;
                                                                                  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .pt-table:not(.lari-table):not(.bc-table) tbody td.pt-cell-actions           { grid-area: act;
                                                                                  margin-top: 8px;
                                                                                  padding-top: 8px;
                                                                                  border-top: 1px solid #f1f4f9; }

  /* Cell content tweaks */
  .pt-cell-name {
    font-weight: 600;
    font-size: 15.5px;
    color: #0d1326;
    line-height: 1.2;
  }
  .lari-slot-badge {
    min-width: 38px;
    height: 38px;
    font-size: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(28, 60, 122, 0.12), rgba(195, 154, 60, 0.18));
    color: #1c3c7a;
    box-shadow: inset 0 0 0 1px rgba(28, 60, 122, 0.08);
  }
  .lari-shirt-pill {
    min-width: 44px;
    padding: 5px 12px;
    font-size: 13.5px;
    border-radius: 8px;
  }

  /* WA cell — full-width primary button */
  .lari-wa-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f7f8fb;
    border-radius: 12px;
    width: 100%;
  }
  .lari-wa-cell__phone {
    display: inline-block !important;
    flex: 1;
    font-size: 13px;
    color: #4b5466;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lari-wa-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
  }

  /* Action row (delete) */
  .pt-cell-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px !important;
    border-top: none !important;
    margin-top: 0 !important;
  }
  .pt-cell-actions .pt-action-btn,
  .pt-cell-actions .pt-action-btn--wa {
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
  }
  .pt-cell-actions span.pt-action-btn { display: none; } /* hide disabled placeholders for cleaner mobile */

  /* Domisili priority tag inline */
  .lari-domisili { font-size: 12.5px; }

  /* ============= EMPTY / LOADING ============= */
  .pt-empty,
  .pt-loading {
    background: #fff;
    border-radius: 16px;
    margin: 0 14px;
    padding: 48px 20px;
  }

  /* ============= PAGINATION — chunky ============= */
  .pt-pagination {
    flex-direction: column;
    gap: 10px;
    padding: 8px 14px 0;
    text-align: center;
  }
  .pt-pagination__info { order: 2; font-size: 12.5px; }
  .pt-pagination__controls { order: 1; width: 100%; justify-content: space-between; }
  .pt-pagination__controls .btn {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    font-size: 13px;
    background: #fff;
    border-color: #e5e8ef;
  }
  #pageIndicator {
    flex-shrink: 0;
    padding: 0 12px;
    font-weight: 600;
    color: #0d1326;
  }

  /* ============= DIALOG → BOTTOM SHEET ============= */
  .pt-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    /* Slide-up animation di Chrome/Safari */
    animation: ptSheetUp 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  @keyframes ptSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .pt-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
  }
  .pt-dialog__form {
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0));
    /* Pull-handle indicator iOS-style */
    position: relative;
    overflow-y: auto;
    max-height: 90vh;
  }
  .pt-dialog__form::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: #d4d8e0;
    border-radius: 100px;
    margin: -8px auto 14px;
  }
  .pt-dialog__title { font-size: 17px; }
  .pt-dialog__lead { font-size: 13.5px; }

  /* WA dialog presets — vertical stack & big tap targets */
  .lari-wa-dialog { max-width: 100%; }
  .lari-wa-presets { grid-template-columns: 1fr; gap: 8px; }
  .lari-wa-preset {
    padding: 12px 14px;
    border-radius: 12px;
    min-height: 56px;
  }
  .lari-wa-preset > strong { font-size: 14px; }

  .lari-wa-textarea {
    font-size: 16px; /* iOS zoom prevention */
    min-height: 160px;
    border-radius: 12px;
  }

  .pt-dialog__actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .pt-dialog__actions .btn {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
  }
  .pt-dialog__actions .btn--primary {
    box-shadow: 0 4px 12px -2px rgba(28, 60, 122, 0.3);
  }

  /* ============= BOTTOM ACTION BAR (sticky) ============= */
  /* Hanya muncul kalau ada elemen #mobileActionBar di HTML.
     Dipakai untuk WA Blast / Sync, dst. */
  .mobile-action-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 -8px 28px -8px rgba(0, 0, 0, 0.08);
  }
  .mobile-action-bar .btn {
    flex: 1;
    height: 46px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    justify-content: center;
  }
  .mobile-action-bar .btn--primary {
    box-shadow: 0 4px 12px -2px rgba(28, 60, 122, 0.3);
  }
  .mobile-action-bar .btn--ghost {
    background: rgba(28, 60, 122, 0.08);
    color: #1c3c7a;
    border: none;
  }

  /* Tap feedback for clickable cards */
  .pt-table tbody tr,
  .pt-stat-card,
  .lari-shirt-cell,
  .pt-export__item {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ============= EXTRA SMALL (iPhone SE width ≤ 380px) ============= */
@media (max-width: 380px) {
  .pt-stat-card { min-width: 148px; padding: 12px 14px; }
  .pt-stat-card__num { font-size: 19px; }
  .lari-shirt-cell { padding: 8px 2px; }
  .lari-shirt-cell__size { font-size: 13px; }
  .lari-shirt-cell__count { font-size: 16px; }
  .pt-cell-name { font-size: 14.5px; }
}

/* ============= AUTH GATE ON MOBILE ============= */
@media (max-width: 720px) {
  .auth-gate {
    padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom);
  }
  .auth-card {
    padding: 28px 22px;
    border-radius: 20px;
  }
}