/* ============================================================
   AMBER PMS — MOBILE / TABLET UX LAYER
   Applies after amber-theme.css
   ============================================================ */

:root{
  --amber-mobile-bar-h:58px;
  --amber-mobile-safe-bottom:env(safe-area-inset-bottom,0px);
}

.amber-mobile-topbar,
.amber-mobile-nav-backdrop,
.amber-mobile-scroll-hint{
  display:none;
}

body.amber-mobile-nav-open{
  overflow:hidden!important;
  touch-action:none;
}

/* Comfortable touch targets */
@media (pointer:coarse){
  button,
  .btn,
  .nav,
  .nav-item,
  input,
  select,
  textarea{
    min-height:44px;
  }
}

/* ============================================================
   TABLET
   ============================================================ */
@media(max-width:1100px){
  .app > main{
    min-width:0!important;
  }

  .toolbar,
  .filters,
  .actions,
  .top,
  .topbar{
    max-width:100%;
  }

  .ops-grid,
  .kpis,
  .summary-cards,
  .summary-grid{
    gap:10px!important;
  }

  .table-wrap,
  .amber-mobile-table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-gutter:stable;
  }
}

/* ============================================================
   MOBILE NAVIGATION / APP SHELL
   ============================================================ */
@media(max-width:900px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .app{
    display:block!important;
    grid-template-columns:1fr!important;
    min-height:100dvh!important;
  }

  /* Existing sidebar becomes a proper off-canvas drawer. */
  .app > .sidebar,
  aside.sidebar{
    display:flex!important;
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(82vw,310px)!important;
    max-width:310px!important;
    height:100dvh!important;
    z-index:12020!important;
    transform:translateX(-104%);
    transition:transform .24s cubic-bezier(.2,.8,.2,1)!important;
    box-shadow:18px 0 55px rgba(5,10,18,.24)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    padding:
      calc(18px + env(safe-area-inset-top,0px))
      15px
      calc(20px + env(safe-area-inset-bottom,0px))!important;
  }

  body.amber-mobile-nav-open .app > .sidebar,
  body.amber-mobile-nav-open aside.sidebar{
    transform:translateX(0)!important;
  }

  .amber-mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:12010;
    background:rgba(6,10,16,.48);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  body.amber-mobile-nav-open .amber-mobile-nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .amber-mobile-topbar{
    display:flex;
    position:fixed;
    z-index:12000;
    top:0;
    left:0;
    right:0;
    height:calc(var(--amber-mobile-bar-h) + env(safe-area-inset-top,0px));
    padding:
      env(safe-area-inset-top,0px)
      58px
      0
      10px;
    align-items:center;
    gap:8px;
    background:color-mix(in srgb,var(--panel) 94%,transparent);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 6px 22px rgba(15,19,25,.06);
  }

  .amber-mobile-menu-btn{
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px!important;
    border:1px solid var(--line);
    border-radius:11px;
    display:grid;
    place-items:center;
    background:var(--panel-2);
    color:var(--text);
    padding:0;
    cursor:pointer;
  }

  .amber-mobile-menu-btn svg{
    width:21px;height:21px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
  }

  .amber-mobile-page-title{
    min-width:0;
    flex:1;
    font-family:var(--amber-font-display);
    font-size:17px;
    font-weight:600;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .amber-mobile-page-sub{
    font-family:var(--amber-font-sans);
    font-size:9px;
    font-weight:700;
    color:var(--muted);
    margin-left:4px;
  }

  .amber-theme-control{
    top:calc(10px + env(safe-area-inset-top,0px))!important;
    right:9px!important;
    height:38px!important;
    min-height:38px!important;
    z-index:12030!important;
  }

  .amber-theme-option{
    display:none!important;
  }

  .amber-theme-control{
    gap:5px!important;
    padding:5px 7px!important;
  }

  .app > main{
    padding:
      calc(var(--amber-mobile-bar-h) + env(safe-area-inset-top,0px) + 14px)
      12px
      calc(32px + env(safe-area-inset-bottom,0px))!important;
    width:100%!important;
    max-width:100vw!important;
    overflow:visible!important;
  }

  /* Hide duplicate desktop-level "top bar" account/search chrome where it
     wastes vertical mobile space. Keep the actual page header/actions. */
  main > .topbar{
    display:none!important;
  }

  .top,
  .page-head{
    gap:10px!important;
    margin-bottom:12px!important;
  }

  .top h1,
  .page-head h1{
    font-size:26px!important;
    line-height:1.08!important;
  }

  .top p,
  .page-head p{
    font-size:13px!important;
    line-height:1.4!important;
  }

  .top,
  .page-head{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .actions{
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .actions > *{
    width:100%!important;
    min-width:0!important;
  }

  .toolbar{
    width:100%!important;
    padding:10px!important;
    gap:8px!important;
    border-radius:12px!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .toolbar > *,
  .filters,
  .month-controls{
    width:100%!important;
    max-width:none!important;
  }

  .filters{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }

  .filters > *,
  .toolbar input,
  .toolbar select,
  .toolbar .select,
  .toolbar .booking-search,
  .toolbar .search{
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
  }

  .month-controls{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 44px!important;
    align-items:center!important;
  }

  .month-title{
    min-width:0!important;
    width:auto!important;
    font-size:17px!important;
  }

  /* Forms become single column except deliberate small pairs. */
  .form-grid,
  .form-row,
  .fields,
  .grid-form{
    grid-template-columns:1fr!important;
  }

  .field,
  .field.full{
    grid-column:auto!important;
    min-width:0!important;
    width:100%!important;
  }

  .field input,
  .field select,
  .field textarea{
    width:100%!important;
    min-width:0!important;
    font-size:16px!important; /* prevents iOS zoom */
  }

  textarea{
    min-height:96px;
  }

  /* Modal -> full-width bottom sheet */
  .modal-backdrop,
  .modal-bg{
    padding:0!important;
    align-items:flex-end!important;
    justify-content:center!important;
  }

  .modal,
  .modal-card,
  .modal-backdrop .modal{
    width:100%!important;
    max-width:100%!important;
    max-height:94dvh!important;
    margin:0!important;
    border-radius:20px 20px 0 0!important;
    overflow:hidden!important;
    box-shadow:0 -18px 55px rgba(5,10,18,.24)!important;
  }

  .modal-head{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    padding:14px 15px!important;
    background:var(--panel)!important;
  }

  .modal-head h2,
  .modal-head h3{
    font-size:20px!important;
  }

  .modal-body{
    padding:14px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    max-height:calc(94dvh - 128px)!important;
  }

  .modal-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:5!important;
    padding:
      10px
      12px
      calc(10px + env(safe-area-inset-bottom,0px))!important;
    background:color-mix(in srgb,var(--panel) 96%,transparent)!important;
    border-top:1px solid var(--line)!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .modal-actions > *{
    width:100%!important;
    margin:0!important;
    min-width:0!important;
  }

  .modal-actions > :last-child{
    grid-column:auto;
  }

  /* Tables: deliberate touch scroll instead of squashing unreadably. */
  .table-wrap,
  .amber-mobile-table-scroll{
    overflow-x:auto!important;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    border-radius:11px;
  }

  .amber-mobile-scroll-hint{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    color:var(--muted);
    font-size:9px;
    font-weight:700;
    margin:2px 3px 6px;
  }

  .table-wrap table,
  .amber-mobile-table-scroll table{
    min-width:760px!important;
    width:max-content!important;
    max-width:none!important;
  }

  table th,
  table td{
    white-space:nowrap;
  }

  /* Long text columns may wrap. */
  table td.description,
  table td.notes,
  table td.remark{
    white-space:normal!important;
    min-width:210px;
  }

  /* Cards / KPIs */
  .kpis,
  .summary-grid,
  .summary-cards,
  .ops-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .kpi,
  .summary-card,
  .metric{
    min-width:0!important;
    padding:12px!important;
  }

  .metric .v,
  .kpi strong{
    font-size:30px!important;
  }

  /* Charts */
  canvas{
    max-width:100%!important;
  }

  .analytics-grid,
  .lower-grid,
  .revenue-layout,
  .chart-grid{
    grid-template-columns:1fr!important;
  }

  /* User management */
  .staff-access-editor{
    min-width:210px!important;
  }

  .staff-access-times{
    grid-template-columns:1fr 1fr!important;
  }

  .staff-access-times > button{
    grid-column:1/-1;
  }

  /* Toast */
  .toast{
    left:12px!important;
    right:12px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    text-align:center;
  }
}

/* ============================================================
   PHONE-SPECIFIC PAGE IMPROVEMENTS
   ============================================================ */
@media(max-width:640px){
  .filters{
    grid-template-columns:1fr!important;
  }

  .actions{
    grid-template-columns:1fr 1fr!important;
  }

  .kpis,
  .summary-grid,
  .summary-cards,
  .ops-grid{
    grid-template-columns:1fr 1fr!important;
  }

  /* ADMIN */
  .metric.revenue .v{
    font-size:29px!important;
  }

  .metric-list-row{
    font-size:11px!important;
  }

  .revenue-layout{
    gap:10px!important;
  }

  /* ROOMS */
  .floor-head{
    padding:12px!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }

  .floor-title{
    font-size:17px!important;
  }

  .floor-controls{
    margin-left:auto;
  }

  .rooms-grid{
    grid-template-columns:1fr!important;
    padding:12px!important;
    gap:12px!important;
  }

  .room-card,
  .add-room-card{
    min-height:230px!important;
    max-width:none!important;
  }

  .room-wrap{
    width:100%!important;
  }

  .room-label{
    font-size:17px!important;
  }

  .room-type-text{
    font-size:12px!important;
  }

  /* CALENDAR */
  .daily-summary-grid{
    grid-template-columns:1fr!important;
  }

  .movement-box + .movement-box{
    border-left:0!important;
    border-top:1px solid var(--line)!important;
  }

  .movement-list{
    grid-template-columns:1fr 1fr!important;
  }

  .calendar-layout{
    display:block!important;
  }

  .mini-column{
    display:none!important;
  }

  .calendar-shell{
    width:calc(100% + 24px)!important;
    margin-left:-12px!important;
    margin-right:-12px!important;
    border-radius:0!important;
  }

  .calendar-scroll{
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    max-height:none!important;
  }

  /* Keep the critical Room/Status columns visible while swiping days. */
  :root{
    --room-col:92px!important;
    --status-col:92px!important;
    --day-col:46px!important;
  }

  .room-cell,
  .room-label-cell,
  .sticky-room{
    position:sticky!important;
    left:0!important;
    z-index:12!important;
  }

  .status-cell,
  .sticky-status{
    position:sticky!important;
    left:var(--room-col)!important;
    z-index:11!important;
  }

  /* INVENTORY */
  table.inventory{
    min-width:980px!important;
  }

  .inventory-wrap,
  .inventory-table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  /* DAILY SUMMARY */
  .two-col,
  .tables-grid,
  .notes-grid,
  .money-grid{
    grid-template-columns:1fr!important;
  }

  .shift-financial{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .shift-money-table{
    min-width:760px!important;
  }

  /* ROOM DETAIL */
  .booking-card{
    grid-template-columns:1fr!important;
  }

  .booking-side{
    grid-column:1!important;
    border-left:0!important;
    border-top:1px solid var(--line)!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
  }

  .booking-side button,
  .booking-side .side-btn{
    width:100%!important;
    margin:0!important;
  }

  .status-block{
    border-right:0!important;
    border-bottom:1px dashed var(--line)!important;
  }

  /* ACTIVITY LOG JSON modal */
  .json-grid{
    grid-template-columns:1fr!important;
  }
}

/* Very small phones */
@media(max-width:430px){
  .app > main{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .amber-mobile-topbar{
    padding-left:8px!important;
  }

  .top h1,
  .page-head h1{
    font-size:23px!important;
  }

  .kpis,
  .summary-grid,
  .summary-cards,
  .ops-grid{
    grid-template-columns:1fr!important;
  }

  .actions{
    grid-template-columns:1fr!important;
  }

  .movement-list{
    grid-template-columns:1fr!important;
  }

  .modal-actions{
    grid-template-columns:1fr!important;
  }

  .modal-actions > *{
    grid-column:1!important;
  }

  .staff-access-times{
    grid-template-columns:1fr!important;
  }
}

/* ============================================================
   LOGIN — PHONE
   ============================================================ */
@media(max-width:760px){
  body:not(:has(.app)){
    display:block!important;
    min-height:100dvh!important;
    padding:
      calc(56px + env(safe-area-inset-top,0px))
      12px
      calc(16px + env(safe-area-inset-bottom,0px))!important;
  }

  body:not(:has(.app)) > .shell{
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
    grid-template-columns:1fr!important;
    border-radius:18px!important;
  }

  body:not(:has(.app)) > .shell .left{
    min-height:0!important;
    padding:22px!important;
  }

  body:not(:has(.app)) > .shell .copy{
    margin:26px 0 12px!important;
  }

  body:not(:has(.app)) > .shell .copy h1{
    font-size:30px!important;
  }

  body:not(:has(.app)) > .shell .copy p{
    font-size:14px!important;
    line-height:1.5!important;
  }

  body:not(:has(.app)) > .shell .right{
    padding:24px 20px 28px!important;
  }

  body:not(:has(.app)) > .shell form{
    max-width:none!important;
  }

  body:not(:has(.app)) input,
  body:not(:has(.app)) button{
    min-height:48px!important;
    font-size:16px!important;
  }

  body:not(:has(.app)) .amber-theme-control{
    top:calc(9px + env(safe-area-inset-top,0px))!important;
  }
}

@media print{
  .amber-mobile-topbar,
  .amber-mobile-nav-backdrop,
  .amber-mobile-scroll-hint{
    display:none!important;
  }
}