/* ==========================================================================
   Release 29 – mobile.css (loaded last). One consistent mobile layout for every
   list in the app. Replaces the overlapping rules from older stylesheets
   (style.css .mobile-list, desk.css .responsive-records, ui.css cards).
   ========================================================================== */
@media screen and (max-width:760px){
  /* ---------- page frame ---------- */
  html,body{overflow-x:hidden}
  .ui18 main,.ui18 .portal-main{min-width:0}
  .ui18 .heading h1{font-size:26px;line-height:1.15;overflow-wrap:anywhere}
  .ui18 .heading-actions{display:flex;flex-wrap:wrap;gap:8px}
  .ui18 .heading-actions .button,.ui18 .heading-actions form,.ui18 .heading-actions form .button{flex:1 1 auto;min-height:46px}

  /* ---------- every table becomes a list of clean cards ----------
     Each row is a card; each cell is a block (label above value), laid out two per line.
     Cells are NOT grids, so mixed text/<br>/links inside a cell never split into columns. */
  .ui18 .card:has(> .table-scroll > table),.ui18 .card.table-scroll{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
  .ui18 .card>.table-scroll{margin:0!important}
  .ui18 .table-scroll{overflow:visible!important}
  .ui18 table.responsive-records,.ui18 table.mobile-list,
  .ui18 table.responsive-records tbody,.ui18 table.mobile-list tbody{display:block!important;width:100%!important;min-width:0!important;border:0}
  .ui18 table.responsive-records thead,.ui18 table.mobile-list thead{display:none!important}
  .ui18 table.responsive-records tr,.ui18 table.mobile-list tr{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;position:relative;
    background:#fff!important;border:1px solid #dde6ee!important;border-radius:14px!important;
    padding:6px 16px 10px!important;margin:0 0 12px!important;box-shadow:0 2px 10px #0b2c4d0d!important}
  .ui18 table.responsive-records td,.ui18 table.mobile-list td{
    display:block!important;position:static!important;padding:9px 0!important;margin:0!important;border:0!important;
    background:transparent!important;min-width:0!important;width:auto!important;text-align:left!important;
    font-size:15px;line-height:1.4;overflow-wrap:anywhere;white-space:normal!important}
  .ui18 table.responsive-records td::before,.ui18 table.mobile-list td::before{
    content:attr(data-label);position:static!important;display:block;width:auto!important;margin:0 0 2px;
    font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7f90;line-height:1.3}
  .ui18 table.responsive-records td[data-label=""]::before,.ui18 table.mobile-list td[data-label=""]::before,
  .ui18 table.responsive-records td:not([data-label])::before,.ui18 table.mobile-list td:not([data-label])::before{content:none}
  .ui18 table.responsive-records td:empty,.ui18 table.mobile-list td:empty{display:none!important}
  /* first cell = card title, full width */
  .ui18 table.responsive-records td:first-child,.ui18 table.mobile-list td:first-child{
    grid-column:1/-1;padding:12px 0 8px!important;border-bottom:1px solid #eef2f6!important;margin-bottom:2px!important;
    font-size:17px;font-weight:700;color:#0b2c4d;line-height:1.3}
  .ui18 table.responsive-records td:first-child::before,.ui18 table.mobile-list td:first-child::before{content:none}
  .ui18 table.responsive-records td:first-child small,.ui18 table.mobile-list td:first-child small{display:block;font-weight:400;font-size:13.5px;color:#55687a;margin-top:3px}
  /* cells with forms, buttons, long notes: full width */
  .ui18 table.responsive-records td:has(form),.ui18 table.mobile-list td:has(form),
  .ui18 table.responsive-records td:has(.button),.ui18 table.mobile-list td:has(.button),
  .ui18 table.responsive-records td:has(details),.ui18 table.mobile-list td:has(details),
  .ui18 table.responsive-records td:last-child:nth-child(odd),.ui18 table.mobile-list td:last-child:nth-child(odd){grid-column:1/-1}
  .ui18 table td form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:6px 0 0}
  .ui18 table td form label{flex:1 1 140px;min-width:0}
  .ui18 table td form .button,.ui18 table td .button{min-height:44px;flex:1 1 auto}
  .ui18 table td details summary{min-height:40px;display:flex;align-items:center}
  .ui18 table td .ui-pill,.ui18 table td .pill{display:inline-block;width:auto;max-width:100%}
  .ui18 table:not(.responsive-records):not(.mobile-list){max-width:100%}

  /* ---------- bookings list ---------- */
  .ui18 .booking-list{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)!important}
  .ui18 .booking-item,.ui18 .r28-bk>.booking-item{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"when pill" "who who";gap:6px 12px!important;
    padding:14px 16px!important;border-radius:14px;align-items:start}
  .ui18 .booking-item>div:first-child{grid-area:when;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
  .ui18 .booking-item>div:first-child small{font-size:13.5px}
  .ui18 .booking-item>div:first-child strong{font-size:16px!important;display:inline!important}
  .ui18 .booking-item>div:nth-child(2){grid-area:who;min-width:0}
  .ui18 .booking-item>div:nth-child(2) strong{font-size:17px;overflow-wrap:anywhere}
  .ui18 .booking-item>.ui-pill{grid-area:pill;justify-self:end}
  .ui18 .r28-bk{gap:0}.ui18 .r28-bk>.r28-map{padding:6px 4px 0}

  /* ---------- email list ---------- */
  .ui18 .mail-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:14px 16px!important;align-items:start}
  .ui18 .mail-row>span:first-child{min-width:0;display:flex;flex-direction:column;gap:2px}
  .ui18 .mail-row strong{white-space:normal!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15.5px;line-height:1.3}
  .ui18 .mail-row small{overflow-wrap:anywhere}
  .ui18 .mail-meta{grid-column:1/-1;display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center!important;gap:8px;justify-content:space-between}
  .ui18 .mail-meta small{order:2}

  /* ---------- tabs: one scrollable row, clearly scrollable ---------- */
  .ui18 .ui-tabs{display:flex;overflow-x:auto;scrollbar-width:none;gap:4px;-webkit-overflow-scrolling:touch;margin-inline:-4px;padding-inline:4px}
  .ui18 .ui-tabs::-webkit-scrollbar{display:none}
  .ui18 .ui-tabs a{flex:0 0 auto;white-space:nowrap}

  /* ---------- forms: comfortable on phones (16px stops iOS zoom) ---------- */
  .ui18 input,.ui18 select,.ui18 textarea{font-size:16px!important;max-width:100%}
  .ui18 input:not([type=checkbox]):not([type=radio]),.ui18 select{min-height:44px}
  .ui18 .form-grid{grid-template-columns:minmax(0,1fr)!important}
  .ui18 .form-grid>*{grid-column:1/-1!important;min-width:0}
  .ui18 .button{min-height:44px}
  .ui18 .two-col{display:block}
  .ui18 .two-col>*+*{margin-top:16px}

  /* ---------- dashboard ---------- */
  .ui18 .db-stats{grid-template-columns:1fr 1fr!important;gap:10px}
  .ui18 .db-stat{min-width:0}.ui18 .db-stat strong{font-size:24px;overflow-wrap:anywhere}
  .ui18 .db-task{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .ui18 .db-task .button{grid-column:1/-1;width:100%}
  .ui18 .db-table{display:block}
  .ui18 .db-table thead{display:none}
  .ui18 .db-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 4px;border-top:1px solid #eef2f6}
  .ui18 .db-table td{border:0!important;padding:0!important}
  .ui18 .db-table td:nth-child(2){grid-column:1/-1;order:-1;font-weight:700}

  /* ---------- misc ---------- */
  .ui18 .doc-meta{grid-template-columns:1fr 1fr!important}
  .ui18 .ledger-item{overflow-wrap:anywhere}
  .ui18 img{max-width:100%;height:auto}
}
@media screen and (max-width:360px){
  .ui18 table.responsive-records td,.ui18 table.mobile-list td{font-size:14.5px}
  .ui18 .db-stats{grid-template-columns:1fr!important}
}
@media screen and (max-width:760px){
  .ui18 .db-hero{display:block}.ui18 .db-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .ui18 .db-actions .button{width:100%;justify-content:center;text-align:center;min-height:46px;padding:10px 8px}
  .ui18 .db-actions .button:last-child{grid-column:1/-1}
}
@media screen and (max-width:760px){
  .ui18 .booking-detail p:has(.button),.ui18 .booking-detail .heading-actions{display:grid;gap:8px}
  .ui18 .booking-detail .button,.ui18 .booking-detail .draft-picker,.ui18 .booking-detail .draft-picker select{width:100%}
  .ui18 .draft-picker{display:grid;gap:8px}
}