/* P2A mobile premium layer
   Purpose: make the main customer, admin, driver and recruitment surfaces safer on mobile
   without changing existing server-side flows. */
:root{
  --p2a-vh: 100vh;
  --p2a-mobile-pad: clamp(12px, 3.8vw, 18px);
  --p2a-mobile-radius: 12px;
  --p2a-mobile-hit: 42px;
}
@supports (height: 100dvh){
  :root{ --p2a-vh: 100dvh; }
}

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  min-height:var(--p2a-vh);
  overflow-x:hidden;
}
*,*::before,*::after{ box-sizing:border-box; }
img,svg,video,canvas,iframe{ max-width:100%; }
input,select,textarea,button{ font:inherit; }
input,select,textarea{ min-width:0; }

.p2a-table-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}
.p2a-table-scroll > table{ min-width:720px; }
.p2a-table-scroll::-webkit-scrollbar{ height:8px; }
.p2a-table-scroll::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.45); border-radius:999px; }

@media (max-width: 768px){
  body.p2a-mobile-premium{
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(125,211,252,.18);
  }
  body.p2a-mobile-premium .admin-root,
  body.p2a-mobile-premium .shell,
  body.p2a-mobile-premium main,
  body.p2a-mobile-premium section{
    max-width:100vw;
  }
  body.p2a-mobile-premium section{
    padding-left:var(--p2a-mobile-pad) !important;
    padding-right:var(--p2a-mobile-pad) !important;
  }
  body.p2a-mobile-premium h1{ font-size:clamp(1.35rem, 7vw, 2rem) !important; line-height:1.08 !important; }
  body.p2a-mobile-premium h2{ font-size:clamp(1.15rem, 5.5vw, 1.65rem) !important; line-height:1.12 !important; }
  body.p2a-mobile-premium h3{ font-size:clamp(1rem, 4.5vw, 1.25rem) !important; line-height:1.18 !important; }
  body.p2a-mobile-premium p,
  body.p2a-mobile-premium li,
  body.p2a-mobile-premium label{
    line-height:1.45;
  }
  body.p2a-mobile-premium input,
  body.p2a-mobile-premium select,
  body.p2a-mobile-premium textarea{
    font-size:16px !important;
    border-radius:10px !important;
    min-height:42px;
  }
  body.p2a-mobile-premium textarea{ min-height:112px; }

  body.p2a-mobile-premium button,
  body.p2a-mobile-premium a[role="button"],
  body.p2a-mobile-premium input[type="button"],
  body.p2a-mobile-premium input[type="submit"],
  body.p2a-mobile-premium .btn,
  body.p2a-mobile-premium .button,
  body.p2a-mobile-premium .admin-action,
  body.p2a-mobile-premium .recruit-step{
    min-height:var(--p2a-mobile-hit) !important;
    max-width:100%;
    padding:.66rem .86rem !important;
    border-radius:10px !important;
    line-height:1.15 !important;
    letter-spacing:.02em !important;
    white-space:normal !important;
    text-align:center;
  }
  body.p2a-mobile-premium button svg,
  body.p2a-mobile-premium a[role="button"] svg{ flex:0 0 auto; }

  body.p2a-mobile-premium .rounded-2xl,
  body.p2a-mobile-premium .rounded-3xl{
    border-radius:16px !important;
  }
  body.p2a-mobile-premium .shadow-2xl,
  body.p2a-mobile-premium .shadow-xl{
    box-shadow:0 16px 44px rgba(0,0,0,.34) !important;
  }

  body.p2a-mobile-premium .grid,
  body.p2a-mobile-premium .flex{
    min-width:0;
  }
  body.p2a-mobile-premium .truncate{
    min-width:0;
  }

  body.p2a-mobile-premium table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:12px;
  }
  body.p2a-mobile-premium th,
  body.p2a-mobile-premium td{
    padding:.58rem .62rem !important;
    vertical-align:top;
  }

  body.p2a-mobile-premium [role="dialog"],
  body.p2a-mobile-premium .modal,
  body.p2a-mobile-premium .admin-modal,
  body.p2a-mobile-premium .glass-modal{
    max-width:calc(100vw - 18px) !important;
  }
  body.p2a-mobile-premium .fixed.inset-0 [role="dialog"],
  body.p2a-mobile-premium [class*="fixed"][class*="inset-0"] > div{
    max-height:calc(var(--p2a-vh) - 18px) !important;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Admin dashboard: premium mobile command surface */
  body.p2a-mobile-premium .admin-root{ padding-top:12px !important; }
  body.p2a-mobile-premium #admin-command-centre,
  body.p2a-mobile-premium #command-centre,
  body.p2a-mobile-premium .command-centre{
    border-radius:16px !important;
  }
  body.p2a-mobile-premium #admin-command-centre button,
  body.p2a-mobile-premium .admin-root header button,
  body.p2a-mobile-premium .admin-root header a{
    min-height:38px !important;
    padding:.55rem .72rem !important;
    font-size:12px !important;
  }
  body.p2a-mobile-premium .admin-root .overflow-x-auto,
  body.p2a-mobile-premium .admin-root [class*="overflow-x-auto"]{
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
  }

  /* Booking/local/recruitment: avoid giant controls on phones */
  body.p2a-mobile-premium #form-container,
  body.p2a-mobile-premium #onboard-card{
    margin-top:14px !important;
  }
  body.p2a-mobile-premium #onboard-card{
    padding:18px 14px !important;
  }
  body.p2a-mobile-premium #recruit-steps{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px !important;
  }
  body.p2a-mobile-premium .recruit-step{
    align-items:center;
    justify-content:center;
    gap:7px;
  }

  /* Driver portal */
  body.p2a-mobile-premium .driver-shell,
  body.p2a-mobile-premium .shell{
    padding:14px !important;
  }
  body.p2a-mobile-premium .driver-top,
  body.p2a-mobile-premium .top{
    gap:12px !important;
  }
  body.p2a-mobile-premium .driver-actions,
  body.p2a-mobile-premium .actions{
    gap:8px !important;
  }

  /* Maps and live panels */
  body.p2a-mobile-premium #map,
  body.p2a-mobile-premium #live-map,
  body.p2a-mobile-premium #driver-map,
  body.p2a-mobile-premium .map-panel{
    min-height:280px;
    border-radius:16px !important;
  }

  /* Keep bottom fixed actions usable with iPhone safe area. */
  body.p2a-mobile-premium .fixed.bottom-0,
  body.p2a-mobile-premium [class*="fixed"][class*="bottom-0"]{
    padding-bottom:max(10px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 420px){
  body.p2a-mobile-premium button,
  body.p2a-mobile-premium a[role="button"],
  body.p2a-mobile-premium .btn,
  body.p2a-mobile-premium input[type="submit"]{
    min-height:40px !important;
    padding:.58rem .72rem !important;
    font-size:13px !important;
  }
  body.p2a-mobile-premium .text-4xl,
  body.p2a-mobile-premium .text-5xl,
  body.p2a-mobile-premium .text-6xl{
    font-size:clamp(1.6rem, 9vw, 2.25rem) !important;
  }
}

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

/* P2A v2 mobile complex modal pack: admin/driver premium polish */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.p2a-mobile-modal-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Admin dashboard: compact control bars */
  .admin-root {
    padding-inline: .45rem !important;
  }
  .admin-root .btn,
  .admin-root button,
  #admin-modal button,
  #promo-modal button,
  #send-sms-modal button,
  #admin-access-modal button,
  #admin-live-map-modal button {
    min-height: 34px !important;
    padding: .42rem .62rem !important;
    border-radius: .7rem !important;
    font-size: .72rem !important;
    line-height: 1.1 !important;
  }
  .admin-root .panel-head {
    gap: .55rem !important;
    padding: .7rem !important;
  }
  .admin-root .panel-head > div,
  .admin-root .panel-head .flex {
    min-width: 0 !important;
  }
  .admin-root input,
  .admin-root select,
  .admin-root textarea,
  #admin-modal input,
  #admin-modal select,
  #admin-modal textarea,
  #promo-modal input,
  #promo-modal select,
  #promo-modal textarea,
  #send-sms-modal input,
  #send-sms-modal textarea {
    font-size: 16px !important;
    min-height: 38px;
  }
  #jobs-search,
  #drivers-search {
    min-width: 0 !important;
  }
  #jobs-panel .panel-head > div:last-child,
  #drivers-panel .panel-head > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  #jobs-panel .panel-head > div:last-child > *,
  #drivers-panel .panel-head > div:last-child > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  #jobs-panel .panel-head .inline-flex,
  #drivers-panel .panel-head .inline-flex {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Main admin tables become compact cards on phones. */
  #jobs-scroll,
  #drivers-scroll {
    overflow-x: hidden !important;
    max-height: none !important;
    padding: .4rem !important;
  }
  table.p2a-mobile-card-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    white-space: normal !important;
  }
  table.p2a-mobile-card-table thead {
    display: none !important;
  }
  table.p2a-mobile-card-table tbody {
    display: grid !important;
    gap: .7rem !important;
    width: 100% !important;
  }
  table.p2a-mobile-card-table tbody tr {
    display: grid !important;
    gap: .42rem !important;
    width: 100% !important;
    padding: .75rem !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 1rem !important;
    background: rgba(2, 6, 23, .72) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .24) !important;
  }
  table.p2a-mobile-card-table tbody td {
    display: grid !important;
    grid-template-columns: minmax(6.7rem, 42%) minmax(0, 1fr) !important;
    gap: .55rem !important;
    align-items: start !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: .25rem 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    color: rgba(226, 232, 240, .94) !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }
  table.p2a-mobile-card-table tbody td::before {
    content: attr(data-label);
    color: rgba(148, 163, 184, .88);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  table.p2a-mobile-card-table tbody td[colspan] {
    display: block !important;
    text-align: center !important;
  }
  table.p2a-mobile-card-table tbody td[colspan]::before {
    display: none !important;
  }
  #jobs-table.p2a-mobile-card-table tbody td:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(8)):not(:nth-child(9)):not(:nth-child(13)):not(:nth-child(17)):not(:nth-child(20)):not(:nth-child(21)):not(:nth-child(23)):not(:nth-child(31)) {
    display: none !important;
  }
  #drivers-table.p2a-mobile-card-table tbody td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(8)):not(:nth-child(9)):not(:nth-child(10)):not(:nth-child(11)):not(:nth-child(12)):not(:nth-child(13)):not(:nth-child(14)):not(:nth-child(20)):not(:nth-child(21)):not(:nth-child(28)) {
    display: none !important;
  }

  /* Generic admin modal: always usable as a full-screen phone sheet. */
  #admin-modal {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  #admin-modal > .relative {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  #admin-modal-title {
    max-width: calc(100vw - 6.5rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .85rem !important;
  }
  #admin-modal-body {
    padding: .8rem !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #admin-modal-body .grid,
  #admin-modal-body form,
  #admin-modal-body .flex {
    min-width: 0 !important;
  }
  #admin-modal-body .grid[class*="grid-cols"],
  #admin-modal-body .md\:grid-cols-2,
  #admin-modal-body .lg\:grid-cols-2,
  #admin-modal-body .xl\:grid-cols-2,
  #admin-modal-body .md\:grid-cols-3,
  #admin-modal-body .lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  #admin-modal-body .overflow-x-auto,
  #admin-modal-body .overflow-auto {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #admin-modal[data-builder-open="1"] > .relative,
  #admin-modal[data-builder-open="1"] #admin-modal-body {
    overflow: hidden !important;
  }
  #admin-modal[data-builder-open="1"] iframe {
    width: 100% !important;
    height: calc(100dvh - 3.5rem) !important;
    border: 0 !important;
  }

  /* Send SMS modal */
  #send-sms-modal > .absolute.inset-0.flex {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  #send-sms-modal > .absolute.inset-0.flex > div {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }
  #send-sms-modal textarea {
    min-height: 34dvh !important;
  }
  #send-sms-modal .space-y-4 {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: .9rem !important;
  }

  /* Promo modal: stack into a clean phone workflow. */
  #promo-modal > .absolute.inset-0.flex {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  #promo-modal > .absolute.inset-0.flex > div {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #promo-modal > .absolute.inset-0.flex > div > .grid {
    display: block !important;
    padding: .75rem !important;
    overflow-y: auto !important;
  }
  #promo-modal section {
    padding: .8rem !important;
    margin-bottom: .75rem !important;
    border-radius: 1rem !important;
  }
  #promo-modal section .grid {
    grid-template-columns: 1fr !important;
    gap: .7rem !important;
  }
  #promo-modal .overflow-auto {
    overflow-x: hidden !important;
  }
  #promo-modal table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
  }
  #promo-modal table thead { display: none !important; }
  #promo-modal table tbody {
    display: grid !important;
    gap: .55rem !important;
  }
  #promo-modal table tr {
    display: grid !important;
    gap: .25rem !important;
    padding: .65rem !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: .85rem !important;
    background: rgba(15,23,42,.72) !important;
  }
  #promo-modal table td {
    display: grid !important;
    grid-template-columns: minmax(5.5rem, 38%) minmax(0,1fr) !important;
    gap: .5rem !important;
    padding: .2rem 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #promo-modal table td::before {
    content: attr(data-label);
    color: rgba(148,163,184,.86);
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  /* Access / owner activity style modals */
  #admin-access-modal > .relative,
  #admin-access-modal .admin-access-modal-panel {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .admin-access-modal-body {
    padding: .8rem !important;
  }

  /* Admin live map: turn desktop layout into phone tabs. */
  #admin-live-map-modal .admin-live-map-shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  #admin-live-map-modal .admin-live-map-head {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: .5rem !important;
    padding: .55rem .65rem !important;
  }
  #admin-live-map-modal .admin-live-map-head .text-sm {
    font-size: .78rem !important;
    letter-spacing: .11em !important;
  }
  #admin-live-map-modal .p2a-live-map-mobile-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .35rem !important;
    padding: .45rem .65rem !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    background: rgba(2,6,23,.92) !important;
  }
  #admin-live-map-modal .p2a-live-map-mobile-tabs button {
    border: 1px solid rgba(148,163,184,.22) !important;
    background: rgba(15,23,42,.7) !important;
    color: rgba(226,232,240,.86) !important;
  }
  #admin-live-map-modal .p2a-live-map-mobile-tabs button.is-active {
    border-color: rgba(56,189,248,.5) !important;
    background: rgba(14,116,144,.35) !important;
    color: #fff !important;
  }
  #admin-live-map-modal .admin-live-map-main {
    flex: 1 1 auto !important;
    display: block !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #admin-live-map-modal .admin-live-map-stage,
  #admin-live-map-modal .admin-live-map-side,
  #admin-live-map-modal .admin-live-map-drivers-wrap {
    height: 100% !important;
    max-height: none !important;
    overflow: auto !important;
  }
  #admin-live-map-modal .admin-live-map-canvas {
    height: 100% !important;
    min-height: 0 !important;
  }
  #admin-live-map-modal[data-mobile-view="map"] .admin-live-map-side,
  #admin-live-map-modal[data-mobile-view="map"] .admin-live-map-drivers-wrap {
    display: none !important;
  }
  #admin-live-map-modal[data-mobile-view="jobs"] .admin-live-map-stage,
  #admin-live-map-modal[data-mobile-view="jobs"] .admin-live-map-drivers-wrap {
    display: none !important;
  }
  #admin-live-map-modal[data-mobile-view="jobs"] .admin-live-map-side {
    display: block !important;
    padding: .65rem !important;
  }
  #admin-live-map-modal[data-mobile-view="drivers"] .admin-live-map-main {
    display: none !important;
  }
  #admin-live-map-modal[data-mobile-view="drivers"] .admin-live-map-drivers-wrap {
    display: block !important;
    flex: 1 1 auto !important;
    padding: .65rem !important;
  }
  #admin-live-map-modal .admin-live-map-drivers {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    overflow: visible !important;
  }
  #admin-live-map-modal .admin-live-map-job-card,
  #admin-live-map-modal .admin-live-map-driver-card {
    padding: .65rem !important;
    border-radius: .95rem !important;
  }

  /* Driver portal: every dialog becomes a compact premium sheet. */
  body:has(dialog[open]) {
    overflow: hidden;
  }
  dialog[open] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  dialog[open] .modal {
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    padding: .9rem !important;
  }
  dialog[open] .modal h3 {
    font-size: 1rem !important;
    letter-spacing: .02em !important;
  }
  dialog[open] .modal .actions,
  dialog[open] .modal .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
  }
  dialog[open] .modal button,
  dialog[open] .modal .btn {
    min-height: 36px !important;
    padding: .45rem .7rem !important;
    font-size: .78rem !important;
  }
  dialog[open] .modal input,
  dialog[open] .modal textarea,
  dialog[open] .modal select {
    font-size: 16px !important;
  }
  #driver-internal-mail-message {
    min-height: 34dvh !important;
  }
  #driver-mail-attachments-list {
    max-height: 28dvh !important;
    overflow-y: auto !important;
  }

  /* Shared file/image preview modals */
  .file-preview-modal,
  #file-preview-modal,
  #alexis-preview-modal {
    padding: 0 !important;
  }
  .file-preview-modal .modal,
  #file-preview-modal .modal,
  #alexis-preview-modal .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

@media (min-width: 761px) {
  #admin-live-map-modal .p2a-live-map-mobile-tabs {
    display: none !important;
  }
}