/* PayAdmin Mobile App Experience v14.0
   App-like mobile shell, stable viewport, card tables, bottom sheets and PWA safe areas. */
:root {
  --pa-app-height: 100dvh;
  --pa-visual-height: 100dvh;
  --pa-keyboard-height: 0px;
  --pa-safe-top: env(safe-area-inset-top, 0px);
  --pa-safe-right: env(safe-area-inset-right, 0px);
  --pa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pa-safe-left: env(safe-area-inset-left, 0px);
  --pa-app-blue: #2563eb;
  --pa-app-cyan: #06b6d4;
  --pa-app-ink: #0b1730;
  --pa-app-surface: rgba(255,255,255,.94);
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: calc(96px + var(--pa-safe-bottom));
  background: #edf4fb;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button, a, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

.pa-app-toast-region {
  position: fixed;
  inset-inline: 16px;
  top: calc(14px + var(--pa-safe-top));
  z-index: 3000;
  display: grid;
  justify-items: center;
  gap: 10px;
  pointer-events: none;
}

.pa-app-toast {
  width: min(440px, 100%);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 32px;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid rgba(203,213,225,.82);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  color: #0f172a;
  box-shadow: 0 20px 55px rgba(15,23,42,.20);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(-18px) scale(.98);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: auto;
}

.pa-app-toast.show { transform: translateY(0) scale(1); opacity: 1; }
.pa-app-toast-icon { width: 42px; height: 42px; border-radius: 14px; display:grid; place-items:center; font-size:19px; font-weight:900; background:#eff6ff; color:#1d4ed8; }
.pa-app-toast.success .pa-app-toast-icon { background:#d1fae5; color:#047857; }
.pa-app-toast.warning .pa-app-toast-icon { background:#fef3c7; color:#92400e; }
.pa-app-toast.error .pa-app-toast-icon { background:#ffe4e6; color:#be123c; }
.pa-app-toast-copy { min-width:0; }
.pa-app-toast-title { font-weight:900; line-height:1.3; }
.pa-app-toast-message { margin-top:2px; color:#64748b; font-size:13px; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }
.pa-app-toast-close { width:32px; height:32px; min-height:32px!important; padding:0!important; border:0; border-radius:10px!important; background:#f1f5f9; color:#475569; display:grid; place-items:center; }

.pa-mobile-bottom-nav { display:none; }
.pa-mobile-filter-launcher { display:none; }
.pa-mobile-filter-backdrop { display:none; }

@media (max-width: 991.98px) {
  html, body { min-height: var(--pa-app-height, 100dvh); }
  body.payadmin-body {
    min-height: var(--pa-app-height, 100dvh);
    overscroll-behavior-y: contain;
    padding-bottom: calc(92px + var(--pa-safe-bottom))!important;
    background:
      radial-gradient(circle at 85% -8%, rgba(37,99,235,.13), transparent 32%),
      linear-gradient(180deg,#f8fbff 0,#edf4fb 48%,#eaf2fb 100%)!important;
  }

  /* iOS zoom prevention and stable touch targets */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .dt-search input,
  .dt-length select,
  .select2-search__field,
  .select2-selection,
  .select2-selection__rendered {
    font-size: 16px!important;
    line-height: 1.35!important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .select2-selection--single {
    min-height: 50px!important;
    border-radius: 15px!important;
  }

  input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus {
    transform: none!important;
    scroll-margin-top: 18px;
    scroll-margin-bottom: calc(24px + var(--pa-keyboard-height));
  }

  .pa-mobile-menu-btn { display:none!important; }
  .pa-main { margin:0!important; padding:12px 12px 0!important; min-height:var(--pa-app-height,100dvh)!important; }
  .pa-page-shell { max-width:100%!important; min-width:0!important; }

  .pa-page-header {
    position: relative;
    z-index: 20;
    display:flex!important;
    align-items:flex-start!important;
    padding:18px 18px!important;
    margin:0 0 14px!important;
    border-radius:22px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(246,250,255,.94))!important;
    box-shadow:0 14px 34px rgba(15,23,42,.07)!important;
  }
  .pa-eyebrow { font-size:12px!important; }
  .pa-page-title { font-size:23px!important; letter-spacing:-.25px; }
  .pa-page-subtitle { font-size:13px!important; line-height:1.55; max-width:88%; }
  .pa-page-actions { width:auto!important; max-width:100%; gap:8px!important; align-items:center; }
  .pa-page-actions > * { flex:0 0 auto; }
  .pa-page-actions .btn { min-height:42px!important; padding:8px 12px!important; font-size:13px!important; }

  .pa-card,.card,.filter-card,.summary-card,.table-card,.stat-card,.panel,
  .emp-filter-card,.emp-report-card,.emp-analytics-card,.winner-card,
  .settings-form-card,.health-card {
    border-radius:20px!important;
    box-shadow:0 12px 30px rgba(15,23,42,.065)!important;
  }

  .pa-stats-grid,.stats-grid,.summary-grid,
  .emp-kpi-grid,.emp-winner-grid,.emp-analytics-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .pa-stat,.stat-card,.summary-card,.emp-kpi-card {
    min-height:108px!important;
    padding:16px!important;
  }
  .pa-stat-value,.stat-value,.kpi-value { font-size:22px!important; }

  .btn, .pa-btn, input[type="submit"], button {
    min-height:48px;
    border-radius:15px!important;
  }
  .btn:active, .pa-btn:active, .pa-mobile-nav-item:active { transform:scale(.975); }

  /* Native-app bottom navigation */
  .pa-mobile-bottom-nav {
    position:fixed;
    inset-inline:10px;
    bottom:calc(9px + var(--pa-safe-bottom));
    z-index:1080;
    min-height:70px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;
    gap:3px;
    padding:7px 7px;
    border:1px solid rgba(203,213,225,.86);
    border-radius:24px;
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 48px rgba(15,23,42,.20);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    transition:transform .22s ease,opacity .22s ease;
  }
  .pa-mobile-nav-item {
    position:relative;
    min-width:0;
    min-height:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 2px;
    border:0;
    border-radius:17px;
    background:transparent;
    color:#64748b;
    text-decoration:none;
    font-family:inherit;
    font-size:10.5px;
    font-weight:900;
    transition:.16s ease;
  }
  .pa-mobile-nav-item i { font-size:20px; line-height:1; }
  .pa-mobile-nav-item.active { color:#1d4ed8; background:#eff6ff; }
  .pa-mobile-nav-item.active::after {
    content:"";
    position:absolute;
    top:4px;
    width:20px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--pa-app-blue),var(--pa-app-cyan));
  }
  .pa-mobile-nav-item.pa-nav-deema i { color:#8b5cf6; }
  .pa-mobile-nav-item.active.pa-nav-deema { color:#6d28d9; background:#f5f3ff; }
  body.pa-keyboard-open .pa-mobile-bottom-nav { transform:translateY(calc(120% + var(--pa-safe-bottom))); opacity:0; pointer-events:none; }

  /* Filters become a real bottom sheet */
  .pa-mobile-filter-launcher {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px!important;
    padding:8px 12px!important;
    border:1px solid #cbd8ea!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#174ecb!important;
    font-size:13px!important;
    font-weight:900!important;
    box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
  }
  .pa-mobile-filter-panel {
    position:fixed!important;
    inset-inline:0!important;
    bottom:0!important;
    z-index:2050!important;
    width:100%!important;
    max-width:100%!important;
    max-height:min(88dvh,var(--pa-visual-height,88dvh))!important;
    overflow:auto!important;
    margin:0!important;
    padding:18px 16px calc(18px + var(--pa-safe-bottom))!important;
    border-radius:26px 26px 0 0!important;
    background:#fff!important;
    box-shadow:0 -24px 70px rgba(15,23,42,.24)!important;
    transform:translateY(105%);
    visibility:hidden;
    transition:transform .25s ease,visibility .25s;
    overscroll-behavior:contain;
  }
  .pa-mobile-filter-panel.pa-mobile-filter-open { transform:translateY(0); visibility:visible; }
  .pa-mobile-filter-panel::before {
    content:"";
    display:block;
    width:48px;
    height:5px;
    margin:0 auto 14px;
    border-radius:999px;
    background:#cbd5e1;
  }
  .pa-mobile-filter-close {
    position:sticky;
    top:0;
    z-index:3;
    width:100%;
    min-height:44px!important;
    margin-bottom:12px;
    border:0!important;
    border-radius:14px!important;
    background:#f1f5f9!important;
    color:#334155!important;
    font-weight:900!important;
  }
  .pa-mobile-filter-backdrop {
    position:fixed;
    inset:0;
    z-index:2040;
    display:block;
    background:rgba(15,23,42,.43);
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
    backdrop-filter:blur(2px);
  }
  .pa-mobile-filter-backdrop.show { opacity:1; visibility:visible; }
  body.pa-sheet-open { overflow:hidden!important; touch-action:none; }

  /* Tables render as touch-friendly cards when headers are available */
  .pa-mobile-card-table,
  .pa-mobile-card-table tbody,
  .pa-mobile-card-table tr,
  .pa-mobile-card-table td { display:block!important; width:100%!important; }
  .pa-mobile-card-table { table-layout:auto!important; border-collapse:separate!important; }
  .pa-mobile-card-table thead { display:none!important; }
  .pa-mobile-card-table tbody { display:grid!important; gap:11px!important; }
  .pa-mobile-card-table tbody tr {
    position:relative;
    padding:8px 13px!important;
    border:1px solid #dbe6f4!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 9px 24px rgba(15,23,42,.055)!important;
  }
  .pa-mobile-card-table tbody tr:hover { background:#fff!important; }
  .pa-mobile-card-table tbody td {
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(88px,38%) minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
    padding:10px 2px!important;
    border:0!important;
    border-bottom:1px dashed #e2e8f0!important;
    text-align:start!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .pa-mobile-card-table tbody td:last-child { border-bottom:0!important; }
  .pa-mobile-card-table tbody td::before {
    content:attr(data-pa-label);
    color:#64748b;
    font-size:12px;
    font-weight:900;
    line-height:1.5;
  }
  .pa-mobile-card-table tbody td[data-pa-label=""]::before { display:none; }
  .pa-mobile-card-table tbody td[data-pa-label=""] { grid-template-columns:1fr!important; }
  .pa-mobile-card-table .btn,
  .pa-mobile-card-table .pa-btn,
  .pa-mobile-card-table input[type="submit"] { width:100%!important; justify-content:center!important; margin:3px 0!important; }
  .pa-mobile-card-table .pa-action-stack,
  .pa-mobile-card-table .action-stack { width:100%!important; display:grid!important; grid-template-columns:1fr!important; }
  .pa-table-wrap:has(.pa-mobile-card-table),
  .table-responsive:has(.pa-mobile-card-table),
  .table-wrap:has(.pa-mobile-card-table),
  .table-wrap-v12:has(.pa-mobile-card-table) { overflow:visible!important; }

  .dt-container .dt-layout-row,
  .dataTables_wrapper .row { gap:9px!important; }
  .dt-container .dt-search,
  .dt-container .dt-length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length { width:100%!important; }
  .dt-container .dt-search input,
  .dataTables_wrapper .dataTables_filter input { width:100%!important; margin:6px 0 0!important; }
  .dt-info,.dataTables_info { text-align:center!important; width:100%!important; }
  .dt-paging,.dataTables_paginate { width:100%!important; overflow-x:auto!important; justify-content:flex-start!important; padding-bottom:4px; }

  /* Bootstrap modals become app bottom sheets */
  .modal { padding:0!important; }
  .modal-dialog:not(.pa-keep-centered) {
    position:fixed!important;
    inset-inline:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:none!important;
    max-height:min(90dvh,var(--pa-visual-height,90dvh))!important;
    margin:0!important;
    align-items:flex-end!important;
  }
  .modal-dialog:not(.pa-keep-centered) .modal-content {
    max-height:min(90dvh,var(--pa-visual-height,90dvh))!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:26px 26px 0 0!important;
    padding-bottom:var(--pa-safe-bottom)!important;
    box-shadow:0 -24px 70px rgba(15,23,42,.28)!important;
  }
  .modal-dialog:not(.pa-keep-centered) .modal-content::before {
    content:"";
    flex:0 0 auto;
    width:48px;
    height:5px;
    margin:9px auto 0;
    border-radius:999px;
    background:#cbd5e1;
  }
  .modal-dialog:not(.pa-keep-centered) .modal-body { overflow:auto!important; overscroll-behavior:contain; }
  .modal.fade .modal-dialog:not(.pa-keep-centered) { transform:translateY(100%)!important; }
  .modal.show .modal-dialog:not(.pa-keep-centered) { transform:translateY(0)!important; }

  /* Horizontal action areas never push the viewport */
  .filter-actions,.pa-filter-actions,.emp-filter-actions,.report-filter-actions,
  .settings-hero-actions,.pa-section-actions {
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:8px!important;
  }
  .filter-actions .btn,.pa-filter-actions .btn,.emp-filter-actions .btn,
  .report-filter-actions .btn,.settings-hero-actions .btn { width:100%!important; }

  /* Login gets the same stable mobile behaviour */
  body:not(.payadmin-body) input:not([type="checkbox"]):not([type="radio"]),
  body:not(.payadmin-body) select,
  body:not(.payadmin-body) textarea { font-size:16px!important; }
}

@media (max-width: 575.98px) {
  .pa-stats-grid,.stats-grid,.summary-grid,
  .emp-kpi-grid,.emp-winner-grid,.emp-analytics-grid { grid-template-columns:1fr!important; }
  .pa-page-header { flex-direction:column!important; }
  .pa-page-actions { width:100%!important; overflow-x:auto; flex-wrap:nowrap!important; scrollbar-width:none; }
  .pa-page-actions::-webkit-scrollbar { display:none; }
  .pa-page-actions > * { flex:0 0 auto!important; }
  .pa-mobile-nav-item span { max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pa-app-toast-region { inset-inline:10px; }
}

@media (display-mode: standalone) {
  body.payadmin-body { padding-top:var(--pa-safe-top)!important; }
  .pa-page-header { margin-top:2px!important; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}

/* Final visibility/scroll safety overrides */
.employee-install-btn[hidden] { display:none!important; }
@media (max-width:991.98px) {
  body.pa-sheet-open { overflow:hidden!important; }
  .pa-mobile-filter-panel { touch-action:pan-y; }
}


/* TD21.1 Android vertical-scroll hotfix */
html{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important}
body{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;touch-action:pan-y pinch-zoom!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:auto!important}
@media(max-width:991.98px){
  html,body{height:auto!important;min-height:100vh!important;min-height:100dvh!important}
  body.payadmin-body{height:auto!important;overflow-y:auto!important;overscroll-behavior-y:auto!important}
  body.pa-sheet-open{overflow:hidden!important;touch-action:none!important}
}

/* TD23 app splash, loader, provider marks and notification typography */
#paAppSplash,.pa-app-splash{position:fixed;inset:0;z-index:2147483000;background:linear-gradient(145deg,#f3eefe,#edf4fb);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease,visibility .3s ease;font-family:"Tajawal",Tahoma,Arial,sans-serif}#paAppSplash.hide,.pa-app-splash.hide{opacity:0;visibility:hidden}.pa-app-splash-card{text-align:center}.pa-app-splash-card img{width:112px;height:112px;border-radius:28px;box-shadow:0 20px 50px rgba(15,23,42,.2)}.pa-app-splash-card strong{display:block;margin-top:14px;color:#2e1065;font-size:18px}.pa-app-splash-spin,.pa-global-loader-spin{display:block;width:34px;height:34px;border:3px solid #ddd6fe;border-top-color:#7c3aed;border-radius:50%;animation:pa23spin .8s linear infinite;margin:18px auto 0}@keyframes pa23spin{to{transform:rotate(360deg)}}
.pa-global-loader{position:fixed;inset:0;z-index:2147482500;background:rgba(237,244,251,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;pointer-events:none}.pa-global-loader.show{opacity:1;visibility:visible;pointer-events:auto}.pa-global-loader-card{min-width:150px;padding:20px 24px;border-radius:22px;background:#fff;border:1px solid #dbe7f5;box-shadow:0 20px 55px rgba(15,23,42,.18);text-align:center;font-family:"Tajawal",Tahoma,Arial,sans-serif}.pa-global-loader-card strong{display:block;margin-top:11px;color:#0f172a}.pa-global-loader-card .pa-global-loader-spin{margin:0 auto}
.pa-notification-panel,.pa-notification-panel *,.pa-notification-head,.pa-notification-item{font-family:"Tajawal",Tahoma,Arial,sans-serif!important}
.pa-provider-mark{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;font-size:11px;font-weight:900;white-space:nowrap}.pa-provider-mark img{width:26px;height:22px;object-fit:contain;border-radius:5px;background:#fff}.pa-provider-mark.provider-deema{color:#6d28d9;background:#f5f3ff;border-color:#ddd6fe}.pa-provider-mark.provider-knet{color:#075985;background:#f0f9ff;border-color:#bae6fd}.pa-provider-mark.compact span{display:none}