
/* ==========================================================
   Bid2Stay 28.8.4 — Mobile-Native Responsive & Touch Cleanup
   Mobile is treated as its own information experience,
   not a compressed desktop.
   ========================================================== */

:root{
  --b2s-touch:48px;
  --b2s-mobile-gap:12px;
  --b2s-mobile-pad:14px;
}

/* Global touch behavior */
html{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
button,a{
  touch-action:manipulation;
}

/* Avoid hover-only affordances on touch devices */
@media (hover:none), (pointer:coarse){
  a:hover,button:hover,.btn:hover,[class*="-card"]:hover,[class*="-kpi"]:hover{
    transform:none !important;
  }
}

/* Desktop remains information-rich */
@media (min-width:901px){
  body.admin-page .admin-main,
  body[data-portal-role="admin"] .admin-main{
    max-width:1500px;
  }

  body[data-portal-role="guest"] main,
  body[data-portal-role="hotel"] main,
  body[data-portal-role="provider"] main{
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Mobile-native portal behavior */
@media (max-width:760px){
  body[data-portal-role="guest"],
  body[data-portal-role="hotel"],
  body[data-portal-role="provider"],
  body.admin-page,
  body[data-portal-role="admin"]{
    overflow-x:hidden;
  }

  body[data-portal-role="guest"] main,
  body[data-portal-role="hotel"] main,
  body[data-portal-role="provider"] main,
  body.admin-page main,
  body[data-portal-role="admin"] main{
    width:100%;
    max-width:100%;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  /* Lightweight mobile cards */
  body[data-portal-role="guest"] main :is(.card,.panel,[class*="-card"],[class*="-panel"]),
  body[data-portal-role="hotel"] main :is(.card,.panel,[class*="-card"],[class*="-panel"]),
  body[data-portal-role="provider"] main :is(.card,.panel,[class*="-card"],[class*="-panel"]),
  body.admin-page main :is(.card,.panel,[class*="-card"],[class*="-panel"]),
  body[data-portal-role="admin"] main :is(.card,.panel,[class*="-card"],[class*="-panel"]){
    border-radius:15px;
    box-shadow:0 4px 14px rgba(15,23,42,.04);
  }

  /* Compact vertical rhythm */
  body[data-portal-role="guest"] main section,
  body[data-portal-role="hotel"] main section,
  body[data-portal-role="provider"] main section,
  body.admin-page main section,
  body[data-portal-role="admin"] main section{
    margin-top:12px;
    margin-bottom:12px;
  }

  /* Top-level hero sections become concise */
  body[data-portal-role="guest"] :is(.dashboard-hero,.b2s151-head,.b23-result-head,[class*="-hero"]),
  body[data-portal-role="hotel"] :is([class*="-hero"]),
  body[data-portal-role="provider"] :is([class*="-hero"]),
  body.admin-page :is(.dashboard-hero,[class*="-hero"]),
  body[data-portal-role="admin"] :is(.dashboard-hero,[class*="-hero"]){
    padding:16px !important;
    min-height:auto !important;
  }

  body[data-portal-role="guest"] :is(.dashboard-hero,.b2s151-head,.b23-result-head,[class*="-hero"]) p,
  body[data-portal-role="hotel"] [class*="-hero"] p,
  body[data-portal-role="provider"] [class*="-hero"] p,
  body.admin-page :is(.dashboard-hero,[class*="-hero"]) p,
  body[data-portal-role="admin"] :is(.dashboard-hero,[class*="-hero"]) p{
    margin-bottom:8px;
  }

  /* Touch targets */
  body[data-portal-role="guest"] :is(button,.btn,[class*="-btn"],[class*="-button"],.b23-head-link,.b2s28729-view,.b2s2881-primary,.b2s2881-secondary),
  body[data-portal-role="hotel"] :is(button,.btn,[class*="-btn"],[class*="-button"]),
  body[data-portal-role="provider"] :is(button,.btn,[class*="-btn"],[class*="-button"]),
  body.admin-page :is(button,.btn,[class*="-btn"],[class*="-button"]),
  body[data-portal-role="admin"] :is(button,.btn,[class*="-btn"],[class*="-button"]){
    min-height:var(--b2s-touch);
    min-width:44px;
    padding:10px 14px;
    border-radius:12px;
  }

  /* Adjacent mobile actions get breathing room */
  body[data-portal-role="guest"] :is(.b2s151-item-actions,.b2s2881-actions,[class*="-actions"]),
  body[data-portal-role="hotel"] [class*="-actions"],
  body[data-portal-role="provider"] [class*="-actions"],
  body.admin-page [class*="-actions"],
  body[data-portal-role="admin"] [class*="-actions"]{
    gap:10px !important;
  }

  /* Header/mobile quick controls */
  body[data-portal-role="guest"] .b2s-mobile-guest-tools,
  body[data-portal-role="hotel"] .b2s-mobile-guest-tools,
  body[data-portal-role="provider"] .b2s-mobile-guest-tools{
    gap:8px;
  }

  body[data-portal-role="guest"] .b2s-mobile-more-button,
  body[data-portal-role="hotel"] .b2s-mobile-more-button,
  body[data-portal-role="provider"] .b2s-mobile-more-button,
  body.admin-page [data-admin-menu],
  body[data-portal-role="admin"] [data-admin-menu]{
    min-width:48px;
    min-height:48px;
  }

  /* Prevent accidental text selection on tap controls */
  body[data-portal-role="guest"] :is(button,.btn,[role="button"]),
  body[data-portal-role="hotel"] :is(button,.btn,[role="button"]),
  body[data-portal-role="provider"] :is(button,.btn,[role="button"]),
  body.admin-page :is(button,.btn,[role="button"]),
  body[data-portal-role="admin"] :is(button,.btn,[role="button"]){
    user-select:none;
    -webkit-user-select:none;
  }

  /* Forms: thumb-friendly and less dense */
  body[data-portal-role="guest"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
  body[data-portal-role="hotel"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
  body[data-portal-role="provider"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
  body.admin-page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
  body[data-portal-role="admin"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    min-height:48px;
    font-size:16px !important; /* prevents iOS zoom */
    border-radius:12px;
  }

  body[data-portal-role="guest"] textarea,
  body[data-portal-role="hotel"] textarea,
  body[data-portal-role="provider"] textarea,
  body.admin-page textarea,
  body[data-portal-role="admin"] textarea{
    min-height:110px;
  }

  /* Mobile dashboards: quick information first */
  body.admin-page .b2s2880-kpis,
  body[data-portal-role="admin"] .b2s2880-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  body.admin-page .b2s2880-kpi,
  body[data-portal-role="admin"] .b2s2880-kpi{
    min-height:96px !important;
    padding:13px !important;
  }

  body.admin-page .b2s2880-kpi strong,
  body[data-portal-role="admin"] .b2s2880-kpi strong{
    font-size:1.45rem !important;
  }

  body.admin-page .b2s2880-main-grid,
  body.admin-page .b2s2880-two-grid,
  body[data-portal-role="admin"] .b2s2880-main-grid,
  body[data-portal-role="admin"] .b2s2880-two-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  body.admin-page .b2s2880-filter-grid,
  body[data-portal-role="admin"] .b2s2880-filter-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body.admin-page .b2s2880-search-wide,
  body[data-portal-role="admin"] .b2s2880-search-wide{
    grid-column:auto !important;
  }

  /* Funnel becomes horizontally swipeable, not squeezed */
  body.admin-page .b2s2880-funnel,
  body[data-portal-role="admin"] .b2s2880-funnel{
    display:flex !important;
    gap:10px !important;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  body.admin-page .b2s2880-funnel-step,
  body[data-portal-role="admin"] .b2s2880-funnel-step{
    flex:0 0 72%;
    scroll-snap-align:start;
  }

  /* Guest request metric strips */
  body[data-portal-role="guest"] .b2s151-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  body[data-portal-role="guest"] .b2s151-metric{
    min-height:82px !important;
    padding:11px !important;
  }

  body[data-portal-role="guest"] .b2s151-metric strong{
    font-size:1.3rem !important;
  }

  /* Mobile cards show essentials first */
  body[data-portal-role="guest"] .b2s151-request-item,
  body[data-portal-role="guest"] .b23-offer,
  body[data-portal-role="guest"] .b2s28731-property,
  body[data-portal-role="hotel"] .room-card,
  body[data-portal-role="provider"] .room-card{
    padding:14px !important;
  }

  /* Stack complex desktop rows */
  body[data-portal-role="guest"] :is(.b2s28731-title-row,.b2s28731-facts,.b2s2881-booking-state),
  body[data-portal-role="hotel"] [class*="-row"],
  body[data-portal-role="provider"] [class*="-row"],
  body.admin-page :is(.dashboard-section-head,.b2s2880-filter-heading,.b2s2880-action),
  body[data-portal-role="admin"] :is(.dashboard-section-head,.b2s2880-filter-heading,.b2s2880-action){
    grid-template-columns:1fr !important;
  }

  body[data-portal-role="guest"] .b2s28731-facts{
    display:grid;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  body[data-portal-role="guest"] .b2s28731-price-card{
    width:100%;
    margin-top:10px;
  }

  /* Gallery: one hero + swipeable thumbs */
  body[data-portal-role="guest"] .b2s28731-thumbs{
    overflow-x:auto;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  body[data-portal-role="guest"] .b2s28731-thumb{
    flex:0 0 82px;
    scroll-snap-align:start;
  }

  /* Tables: use scroll container, never squash desktop table into phone width */
  body[data-portal-role="guest"] .b2s2883-table-scroll,
  body[data-portal-role="hotel"] .b2s2883-table-scroll,
  body[data-portal-role="provider"] .b2s2883-table-scroll,
  body.admin-page .b2s2883-table-scroll,
  body[data-portal-role="admin"] .b2s2883-table-scroll{
    margin-left:-2px;
    margin-right:-2px;
    border-radius:12px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }

  /* Mobile admin sidebar behaves as overlay, not squeezed column */
  body.admin-page .admin-nav,
  body[data-portal-role="admin"] .admin-nav{
    max-width:min(86vw,310px);
  }

  /* Reduce decorative detail */
  body[data-portal-role="guest"] [class*="-eyebrow"],
  body[data-portal-role="hotel"] [class*="-eyebrow"],
  body[data-portal-role="provider"] [class*="-eyebrow"],
  body.admin-page [class*="-eyebrow"],
  body[data-portal-role="admin"] [class*="-eyebrow"]{
    letter-spacing:.05em;
  }
}

/* Small phones */
@media (max-width:430px){
  body.admin-page .b2s2880-kpis,
  body[data-portal-role="admin"] .b2s2880-kpis{
    grid-template-columns:1fr 1fr !important;
  }

  body[data-portal-role="guest"] .b2s151-metrics{
    grid-template-columns:1fr 1fr 1fr !important;
  }

  body[data-portal-role="guest"] .b2s151-metric span{
    font-size:.67rem !important;
  }

  body[data-portal-role="guest"] .b2s28731-facts{
    grid-template-columns:1fr !important;
  }

  body[data-portal-role="guest"] .b2s151-item-actions,
  body[data-portal-role="guest"] .b2s2881-actions,
  body.admin-page .dashboard-action-buttons,
  body[data-portal-role="admin"] .dashboard-action-buttons{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  body[data-portal-role="guest"] .b2s151-item-actions > *,
  body[data-portal-role="guest"] .b2s2881-actions > *,
  body.admin-page .dashboard-action-buttons > *,
  body[data-portal-role="admin"] .dashboard-action-buttons > *{
    width:100%;
  }
}

@media (max-width:560px){
  /* Selected compact administrative tables become readable mobile records where safe. */
  body.admin-page table.b2s-mobile-cards,
  body[data-portal-role="admin"] table.b2s-mobile-cards{
    min-width:0 !important;
  }
  body.admin-page table.b2s-mobile-cards thead,
  body[data-portal-role="admin"] table.b2s-mobile-cards thead{
    display:none;
  }
  body.admin-page table.b2s-mobile-cards tbody,
  body.admin-page table.b2s-mobile-cards tr,
  body.admin-page table.b2s-mobile-cards td,
  body[data-portal-role="admin"] table.b2s-mobile-cards tbody,
  body[data-portal-role="admin"] table.b2s-mobile-cards tr,
  body[data-portal-role="admin"] table.b2s-mobile-cards td{
    display:block;
    width:100%;
  }
  body.admin-page table.b2s-mobile-cards tr,
  body[data-portal-role="admin"] table.b2s-mobile-cards tr{
    margin:0 0 10px;
    padding:12px;
    border:1px solid #e6ebf0;
    border-radius:14px;
    background:#fff;
  }
  body.admin-page table.b2s-mobile-cards td,
  body[data-portal-role="admin"] table.b2s-mobile-cards td{
    display:grid;
    grid-template-columns:minmax(92px,38%) 1fr;
    gap:10px;
    border:0 !important;
    padding:7px 0 !important;
  }
  body.admin-page table.b2s-mobile-cards td:before,
  body[data-portal-role="admin"] table.b2s-mobile-cards td:before{
    content:attr(data-mobile-label);
    font-size:.7rem;
    font-weight:800;
    color:#667085;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
}


/* ==========================================================
   Bid2Stay 28.8.5 — High-Density Mobile Experience Lock
   Targeted polish for the six highest-density production screens.
   ========================================================== */

@media (max-width:760px){

  /* --------------------------------------------------------
     ADMIN DASHBOARD
     Quick scan first; detail remains below.
     -------------------------------------------------------- */
  body.admin-page[data-admin-page="dashboard"] .dashboard-hero{
    margin-bottom:10px !important;
  }
  body.admin-page[data-admin-page="dashboard"] .dashboard-hero p{
    max-width:42ch;
  }
  body.admin-page[data-admin-page="dashboard"] .b2s2880-filter-panel{
    padding:14px !important;
    margin-bottom:12px !important;
  }
  body.admin-page[data-admin-page="dashboard"] .b2s2880-filter-heading p{
    display:none;
  }
  body.admin-page[data-admin-page="dashboard"] .b2s2880-kpi small{
    font-size:.72rem;
    line-height:1.25;
  }
  body.admin-page[data-admin-page="dashboard"] .b2s2880-health-grid,
  body.admin-page[data-admin-page="dashboard"] .b2s2880-commercial-grid{
    grid-template-columns:1fr 1fr !important;
  }

  /* --------------------------------------------------------
     ADMIN PROVIDERS
     Mobile card records already exist; reduce excess chrome.
     -------------------------------------------------------- */
  body.admin-page .b2s2871-commercial-banner{
    padding:15px !important;
  }
  body.admin-page .b2s2871-commercial-banner p{
    margin-bottom:8px !important;
  }
  body.admin-page .b2s2874-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body.admin-page .b2s2874-metrics button{
    min-height:84px !important;
    padding:11px !important;
  }
  body.admin-page .b2s2874-metrics strong{
    font-size:1.35rem !important;
  }
  body.admin-page .b2s2870-toolbar{
    gap:8px !important;
  }
  body.admin-page .b2s2870-table tr{
    padding:11px !important;
  }
  body.admin-page .b2s2870-table td{
    padding:4px 0 !important;
  }

  /* --------------------------------------------------------
     ADMIN AUTOBID
     Convert core activity table to readable mobile records.
     -------------------------------------------------------- */
  body.admin-page[data-admin-page="autobid"] .grid.metrics,
  body.admin-page .admin-main .grid.metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body.admin-page[data-admin-page="autobid"] .metric,
  body.admin-page .admin-main .grid.metrics .metric{
    min-height:82px !important;
    padding:12px !important;
  }
  body.admin-page[data-admin-page="autobid"] .card{
    padding:13px !important;
  }

  /* --------------------------------------------------------
     GUEST MY REQUESTS
     Keep request summary compact and action-led.
     -------------------------------------------------------- */
  body[data-portal-role="guest"] .b2s151-shell{
    padding:16px 0 44px !important;
  }
  body[data-portal-role="guest"] .b2s151-head{
    padding-left:2px !important;
    padding-right:2px !important;
  }
  body[data-portal-role="guest"] .b2s151-request-item{
    padding:13px !important;
    border-radius:15px !important;
  }
  body[data-portal-role="guest"] .b2s151-request-meta{
    gap:6px !important;
    margin:10px 0 !important;
  }
  body[data-portal-role="guest"] .b2s151-request-meta span{
    padding:6px 8px !important;
    font-size:.78rem !important;
  }
  body[data-portal-role="guest"] .b2s151-price-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:10px !important;
  }
  body[data-portal-role="guest"] .b2s151-price{
    padding:10px !important;
  }
  body[data-portal-role="guest"] .b2s151-price strong{
    font-size:1.05rem !important;
  }
  body[data-portal-role="guest"] .b2s151-admin-response{
    padding:12px !important;
    margin-top:10px !important;
  }
  body[data-portal-role="guest"] .b2s28729-confirmed-stay{
    padding:12px !important;
  }

  /* --------------------------------------------------------
     GUEST CONFIRMED ACCOMMODATION
     Image-first but light; actions remain obvious.
     -------------------------------------------------------- */
  body[data-portal-role="guest"] .b23-result-shell{
    padding:16px 0 38px !important;
  }
  body[data-portal-role="guest"] .b23-result-head{
    margin-bottom:12px !important;
  }
  body[data-portal-role="guest"] .b23-result-head p{
    display:none;
  }
  body[data-portal-role="guest"] .b23-result-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body[data-portal-role="guest"] .b23-result-summary article{
    padding:10px !important;
  }
  body[data-portal-role="guest"] .b2s28731-property{
    border-radius:15px !important;
    overflow:hidden;
  }
  body[data-portal-role="guest"] .b2s28731-property-body{
    padding:13px !important;
  }
  body[data-portal-role="guest"] .b2s28731-title-copy h2{
    font-size:1.3rem !important;
  }
  body[data-portal-role="guest"] .b2s28731-gallery-wrap{
    margin:0 !important;
  }
  body[data-portal-role="guest"] .b2s28731-hero{
    max-height:300px;
    object-fit:cover;
  }
  body[data-portal-role="guest"] .b2s28731-map-card{
    padding:13px !important;
  }
  body[data-portal-role="guest"] .b2s28731-map{
    height:220px !important;
  }

  /* --------------------------------------------------------
     PROVIDER ACCOMMODATION FORM
     Step navigation becomes swipeable and single-line.
     -------------------------------------------------------- */
  body[data-portal-role="provider"] .s04-shell{
    padding:12px 0 34px !important;
  }
  body[data-portal-role="provider"] .s04-hero{
    padding:15px !important;
    margin-bottom:10px !important;
  }
  body[data-portal-role="provider"] .s04-hero p{
    max-width:40ch;
  }
  body[data-portal-role="provider"] .s04-layout{
    gap:10px !important;
  }
  body[data-portal-role="provider"] .s04-editor .s04-stepper{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:7px !important;
    padding:8px !important;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  body[data-portal-role="provider"] .s04-editor .s04-stepper::-webkit-scrollbar{
    display:none;
  }
  body[data-portal-role="provider"] .s04-editor .s04-step{
    flex:0 0 auto !important;
    min-width:112px !important;
    min-height:44px !important;
    padding:9px 10px !important;
    white-space:nowrap !important;
    overflow:hidden;
    text-overflow:ellipsis;
    scroll-snap-align:start;
    font-size:.76rem !important;
  }
  body[data-portal-role="provider"] .s04-editor .s04-form-step{
    padding:15px 12px 22px !important;
  }
  body[data-portal-role="provider"] .s04-step-intro{
    margin-bottom:12px !important;
  }
  body[data-portal-role="provider"] .s04-grid{
    gap:10px !important;
  }
  body[data-portal-role="provider"] .s04-field{
    gap:5px !important;
  }
  body[data-portal-role="provider"] .s04-checks{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
  body[data-portal-role="provider"] .s04-check{
    min-height:46px;
    padding:9px 10px !important;
  }
  body[data-portal-role="provider"] .s04-footer-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  body[data-portal-role="provider"] .s04-footer-actions > *{
    width:100%;
  }
}

/* Tiny phone protection */
@media (max-width:390px){
  body[data-portal-role="guest"] .b2s151-price-row{
    grid-template-columns:1fr !important;
  }
  body.admin-page .b2s2874-metrics{
    grid-template-columns:1fr 1fr !important;
  }
}
