/* Mobile v3: customer-first navigation, compact schedules, and a purpose-built staff app. */
@media (max-width:760px){
  :root{--mobile-nav-h:70px;--mobile-admin-nav-h:72px;--mobile-pad:14px}
  html,body{overscroll-behavior-x:none}
  input,select,textarea{font-size:16px!important}

  /* Customer header: the bottom nav owns navigation now. */
  .public-header{min-height:58px!important}
  .public-nav-wrap{height:58px!important;padding:7px var(--mobile-pad)!important;justify-content:center!important}
  .public-header .brand{justify-content:center!important;flex:1 1 auto!important}
  .public-header .brand img{height:38px!important;max-width:138px!important}
  .public-header nav{display:none!important}

  /* Customer bottom nav: Home / Schedule / Book / Account. */
  .mobile-customer-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important;min-height:var(--mobile-nav-h)!important;padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.985)!important;border-top:1px solid #d8e4e2!important;box-shadow:0 -12px 34px rgba(18,54,65,.14)!important}
  .mobile-customer-nav a{min-height:54px!important;border-radius:15px!important;color:#6b7f87!important;font-size:.66rem!important;font-weight:800!important;gap:4px!important}
  .mobile-customer-nav a svg{width:22px!important;height:22px!important}
  .mobile-customer-nav a.current{background:#e8f3f1!important;color:#0c6d70!important}
  .mobile-customer-nav a.current::before{top:2px!important;width:20px!important}
  .schedule-card,.booking-card{scroll-margin-top:72px!important}

  /* Public schedule. Calendar is the primary view; list is the compact alternative. */
  .schedule-card{padding:13px!important;border-radius:20px!important}
  #public-schedule .schedule-nav{grid-template-columns:44px minmax(0,1fr) 44px!important;gap:7px!important;margin-bottom:10px!important}
  #public-schedule #public-prev,#public-schedule #public-next{width:44px!important;min-width:44px!important;height:44px!important;border-radius:12px!important;background:#edf3f2!important;color:#123641!important;border:1px solid #d7e2df!important;font-size:1.1rem!important}
  #public-schedule .mobile-month-control{position:relative!important;display:block!important;width:100%!important;min-width:0!important;margin:0!important}
  #public-schedule .mobile-month-button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;height:44px!important;padding:4px 10px!important;border:1px solid #cad9d6!important;border-radius:12px!important;background:#fff!important;color:#153740!important;box-shadow:0 3px 10px rgba(18,54,65,.05)!important}
  #public-schedule .mobile-month-button span{font-size:.86rem!important;font-weight:850!important;line-height:1.05!important}
  #public-schedule .mobile-month-button small{margin-top:2px!important;font-size:.54rem!important;font-weight:700!important;letter-spacing:.04em!important;color:#71848a!important;text-transform:uppercase!important}
  #public-schedule .mobile-month-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;left:50%!important;bottom:0!important}
  #public-schedule .view-toggle{margin-top:1px!important;border:1px solid #d5e0de!important;background:#eef3f2!important;border-radius:13px!important}
  #public-schedule .view-toggle button{min-height:38px!important;border-radius:10px!important;font-size:.75rem!important;font-weight:800!important}
  #public-schedule .date-grid{gap:4px!important;margin:10px 0 6px!important}
  #public-schedule .date-grid>b{font-size:.58rem!important;font-weight:800!important;color:#6c7f86!important;text-transform:uppercase!important}
  #public-schedule .date-grid>span,#public-schedule .date-grid>button{min-height:50px!important;border-radius:9px!important;font-size:.78rem!important}
  #public-schedule .date-grid>button{border:1px solid #8abeb3!important;background:#e6f4ef!important;color:#145f51!important;box-shadow:0 2px 4px rgba(18,54,65,.03)!important}
  #public-schedule .date-grid>button.chosen{background:#0f6f65!important;color:#fff!important;border-color:#0f6f65!important;box-shadow:0 5px 14px rgba(15,111,101,.18)!important}
  #public-schedule .date-grid>button small{font-size:.43rem!important;font-weight:750!important}
  #public-schedule .published-details{margin-top:10px!important;padding:12px!important;border:1px solid #d9e5e2!important;border-radius:15px!important;background:#fff!important;box-shadow:0 5px 16px rgba(18,54,65,.05)!important}
  #public-schedule .published-details h3{font-size:1.12rem!important;margin:0 0 9px!important}
  #public-schedule .trip-timeline{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  #public-schedule .trip-timeline article{padding:8px 7px!important;border:0!important;border-radius:10px!important;background:#edf5f4!important}
  #public-schedule .trip-timeline span{font-size:.56rem!important;line-height:1.15!important;color:#62787f!important}
  #public-schedule .trip-timeline strong{margin-top:2px!important;font-size:.78rem!important;line-height:1.2!important;color:#153740!important}

  #public-list .sailing-list{gap:7px!important}
  #public-list .sailing-choice{display:grid!important;grid-template-columns:94px minmax(0,1fr)!important;align-items:stretch!important;gap:9px!important;padding:10px!important;border:1px solid #d7e2df!important;border-radius:14px!important;background:#fff!important;box-shadow:0 3px 12px rgba(18,54,65,.04)!important}
  #public-list .sailing-choice.chosen{background:#f0f9f7!important;border-color:#3a9990!important;box-shadow:inset 3px 0 #0f827c!important}
  .mobile-sailing-date{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;padding-right:8px!important;border-right:1px solid #e2eae8!important}
  .mobile-sailing-date strong{font-size:.78rem!important;line-height:1.2!important;color:#17343e!important}
  .mobile-sailing-date small{margin-top:4px!important;font-size:.5rem!important;color:#768990!important;text-transform:uppercase!important;letter-spacing:.04em!important}
  .mobile-sailing-times{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;min-width:0!important;color:#17343e!important}
  .mobile-sailing-times>span{display:block!important;min-width:0!important;padding:5px 6px!important;border-radius:8px!important;background:#f1f6f5!important}
  .mobile-sailing-times small{display:block!important;margin:0 0 2px!important;font-size:.48rem!important;font-weight:800!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:#72858c!important}
  .mobile-sailing-times b{display:block!important;font-size:.64rem!important;line-height:1.25!important;font-weight:800!important;color:#17343e!important;overflow-wrap:anywhere!important}

  /* Booking: land on the form, use calendar-first date selection, and prevent iOS focus zoom. */
  .booking-v2{padding-top:26px!important}
  .booking-intro{margin-bottom:12px!important}
  .booking-card{padding:13px!important;border-radius:20px!important}
  .booking-card input,.booking-card select,.booking-card textarea,.cargo input,.cargo select{min-height:48px!important;padding:10px 11px!important;font-size:16px!important}
  .booking-card label,.cargo label{font-size:.74rem!important}
  .booking-dates{gap:8px!important}
  .date-picker{padding:10px!important;border-radius:14px!important}
  .date-picker .picker-list[hidden],.date-picker .picker-days[hidden]{display:none!important}
  .date-picker .picker-month{font-size:16px!important}
  .date-picker .date-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important}
  .date-picker .date-grid>span,.date-picker .date-grid>button{min-height:44px!important;padding:3px 1px!important;font-size:.73rem!important}
  .booking-card .form-bottom{bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 6px)!important}

  /* Account contacts: actions stay side-by-side instead of stacking. */
  .contact-methods-section>.section-title{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important}
  .contact-methods-section>.section-title>h2{min-width:0!important}
  .contact-add-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;min-width:150px!important}
  .contact-add-actions button{min-height:36px!important;padding:6px 8px!important;border-radius:10px!important;font-size:.65rem!important;white-space:nowrap!important}
  .contact-methods-section .contact-list article{padding:10px!important}

  /* Staff app: replace the cramped horizontal sidebar with a real bottom navigation. */
  body.has-mobile-admin-nav{padding-bottom:calc(var(--mobile-admin-nav-h) + env(safe-area-inset-bottom))!important;background:#f3f7f7!important}
  body.has-mobile-admin-nav .sidebar{display:none!important}
  body.has-mobile-admin-nav .admin,[data-collapsed="true"] body.has-mobile-admin-nav .admin{display:block!important}
  body.has-mobile-admin-nav .workspace{width:100%!important;max-width:100%!important;padding:10px 10px calc(var(--mobile-admin-nav-h) + 22px + env(safe-area-inset-bottom))!important;background:#f3f7f7!important;overflow:hidden!important}
  body.has-mobile-admin-nav .topline{display:flex!important;align-items:center!important;justify-content:space-between!important;height:auto!important;min-height:30px!important;margin:0 0 7px!important;padding:0 2px!important;color:#71858c!important;font-size:.6rem!important}
  body.has-mobile-admin-nav .topline>span:not(.badge){display:inline!important}
  body.has-mobile-admin-nav .topline .badge{font-size:.55rem!important;padding:3px 6px!important}
  body.has-mobile-admin-nav .workspace>.section-title{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;margin:0 0 10px!important;padding:0 2px 9px!important;border-bottom:1px solid #d8e3e1!important}
  body.has-mobile-admin-nav .workspace>.section-title .eyebrow{margin:0 0 2px!important;font-size:.53rem!important;letter-spacing:.08em!important}
  body.has-mobile-admin-nav .workspace>.section-title h1{margin:0!important;font-size:1.45rem!important;line-height:1!important;letter-spacing:-.025em!important}
  body.has-mobile-admin-nav .header-result-count{min-height:26px!important;padding:4px 7px!important;border-radius:999px!important;font-size:.6rem!important}

  .mobile-admin-nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:260!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;min-height:var(--mobile-admin-nav-h)!important;padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.985)!important;border-top:1px solid #d4e0de!important;box-shadow:0 -12px 32px rgba(18,54,65,.16)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
  .mobile-admin-nav button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;min-width:0!important;min-height:52px!important;padding:4px 2px!important;border:0!important;border-radius:14px!important;background:transparent!important;color:#6c8087!important;font-size:.63rem!important;font-weight:800!important;line-height:1!important}
  .mobile-admin-nav button svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .mobile-admin-nav button.current{background:#e7f2f0!important;color:#0b7071!important}

  .mobile-admin-backdrop{position:fixed!important;inset:0!important;z-index:270!important;display:none!important;background:rgba(7,28,35,.45)!important;backdrop-filter:blur(2px)!important}
  .mobile-admin-backdrop.open{display:block!important}
  .mobile-admin-sheet{position:fixed!important;left:8px!important;right:8px!important;bottom:calc(var(--mobile-admin-nav-h) + env(safe-area-inset-bottom) + 8px)!important;z-index:280!important;display:none!important;max-height:70dvh!important;overflow:auto!important;padding:8px 12px 12px!important;border:1px solid #cfddda!important;border-radius:22px!important;background:#fff!important;box-shadow:0 24px 60px rgba(8,33,42,.28)!important}
  .mobile-admin-sheet.open{display:block!important}
  .mobile-admin-sheet-handle{width:36px!important;height:4px!important;margin:0 auto 8px!important;border-radius:999px!important;background:#c9d5d3!important}
  .mobile-admin-sheet-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:10px!important}
  .mobile-admin-sheet-head small{display:block!important;font-size:.52rem!important;font-weight:850!important;letter-spacing:.09em!important;color:#188a89!important}
  .mobile-admin-sheet-head strong{display:block!important;font-size:1.2rem!important;color:#17343e!important}
  .mobile-admin-sheet-head button{width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;border-radius:50%!important;background:#edf3f2!important;color:#17343e!important;font-size:1.1rem!important}
  .mobile-admin-sheet-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .mobile-admin-sheet-grid button{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-height:66px!important;padding:10px!important;border:1px solid #d9e3e1!important;border-radius:13px!important;background:#f8fbfa!important;color:#17343e!important;text-align:left!important}
  .mobile-admin-sheet-grid button.selected{border-color:#48a29b!important;background:#edf8f6!important}
  .mobile-admin-sheet-grid button span{font-size:.8rem!important;font-weight:850!important}
  .mobile-admin-sheet-grid button small{margin-top:2px!important;font-size:.58rem!important;color:#75888e!important}
  .mobile-admin-sheet-footer{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:9px!important;padding-top:9px!important;border-top:1px solid #e1e9e7!important}
  .mobile-admin-sheet-footer a,.mobile-admin-sheet-footer button{display:flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;border-radius:11px!important;font-size:.7rem!important;font-weight:800!important}
  .mobile-admin-sheet-footer a{background:#edf4f2!important;color:#17343e!important}
  .mobile-admin-sheet-footer button{background:#123641!important;color:#fff!important}

  /* Dashboard gets more context and less dead space. */
  body[data-admin-view="dashboard"] .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;margin-bottom:9px!important}
  body[data-admin-view="dashboard"] .metric-card{min-height:84px!important;padding:10px!important;border:1px solid #d7e3e0!important;border-radius:14px!important;background:#fff!important;box-shadow:0 4px 13px rgba(18,54,65,.04)!important}
  body[data-admin-view="dashboard"] .metric-card span{font-size:.62rem!important;line-height:1.2!important;color:#6d8188!important}
  body[data-admin-view="dashboard"] .metric-card strong{font-size:1.45rem!important;margin:4px 0 2px!important}
  body[data-admin-view="dashboard"] .metric-card small{font-size:.55rem!important}
  body[data-admin-view="dashboard"] #panel>.notice{margin:7px 0 12px!important;padding:9px 10px!important;border-radius:12px!important;font-size:.68rem!important}
  .mobile-context-heading{margin:15px 2px 6px!important;font-size:.9rem!important;letter-spacing:-.01em!important;color:#17343e!important}

  /* Context labels for staff tables. */
  .workspace .mobile-context-table{width:100%!important;max-width:100%!important;overflow:visible!important;background:transparent!important}
  .workspace .mobile-context-table table,.workspace .mobile-context-table tbody{display:block!important;width:100%!important;min-width:0!important}
  .workspace .mobile-context-table thead{display:none!important}
  .workspace .mobile-context-table tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;width:100%!important;margin:6px 0!important;padding:9px!important;border:1px solid #d9e4e1!important;border-radius:14px!important;background:#fff!important;box-shadow:0 3px 12px rgba(18,54,65,.035)!important;overflow:hidden!important}
  .workspace .mobile-context-table td{display:block!important;min-width:0!important;padding:6px!important;border:0!important;font-size:.72rem!important;line-height:1.3!important;overflow-wrap:anywhere!important}
  .workspace .mobile-context-table td::before{content:attr(data-label)!important;display:block!important;margin-bottom:2px!important;font-size:.5rem!important;font-weight:850!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:#7b8c91!important}
  .workspace .mobile-context-table td:empty{display:none!important}
  .workspace .mobile-context-table td[data-label="Actions"],.workspace .mobile-context-table td[data-label=""]:last-child{grid-column:1/-1!important;display:flex!important;justify-content:flex-end!important;gap:5px!important;padding-top:7px!important;border-top:1px solid #edf1f0!important}

  /* Reservation tables become compact, readable cards instead of stretched table rows. */
  .workspace .reservation-context-table tr{grid-template-columns:minmax(0,1fr) auto!important;padding:10px!important}
  .workspace .reservation-context-table td[data-label^="Customer"]{grid-column:1!important;padding-right:8px!important}
  .workspace .reservation-context-table td[data-label="Status"]{grid-column:2!important;align-self:start!important;text-align:right!important}
  .workspace .reservation-context-table td[data-label="Status"]::before{display:none!important}
  .workspace .reservation-context-table td[data-label="Trip dates"],.workspace .reservation-context-table td[data-label="Outbound"],.workspace .reservation-context-table td[data-label="Return"]{grid-column:auto!important;background:#f4f8f7!important;border-radius:9px!important;margin:3px!important;padding:7px!important}
  .workspace .reservation-context-table td[data-label="Requested"],.workspace .reservation-context-table td[data-label="Riders"],.workspace .reservation-context-table td[data-label^="Estimated"],.workspace .reservation-context-table td[data-label^="Billing"]{font-size:.66rem!important}
  .workspace .reservation-context-table td[data-label="Actions"],.workspace .reservation-context-table td[data-label=""]:last-child{grid-column:1/-1!important}
  .workspace .reservation-context-table td[data-label="Actions"] button,.workspace .reservation-context-table td[data-label=""]:last-child button{width:auto!important;min-height:34px!important;padding:6px 10px!important;border-radius:9px!important;font-size:.65rem!important}

  /* Today's schedule is a horizontal route timeline, with labels always visible. */
  .workspace .today-schedule-mobile{overflow-x:auto!important;padding-bottom:3px!important;scrollbar-width:none!important}
  .workspace .today-schedule-mobile::-webkit-scrollbar{display:none!important}
  .workspace .today-schedule-mobile table,.workspace .today-schedule-mobile tbody{display:block!important;min-width:0!important}
  .workspace .today-schedule-mobile tr{display:flex!important;gap:6px!important;width:max-content!important;min-width:100%!important;margin:0!important;padding:8px!important;overflow:visible!important;scroll-snap-type:x proximity!important}
  .workspace .today-schedule-mobile td{flex:0 0 108px!important;min-height:64px!important;padding:8px!important;border:0!important;border-radius:10px!important;background:#edf5f4!important;scroll-snap-align:start!important}
  .workspace .today-schedule-mobile td:first-child{flex-basis:132px!important;background:#123f4a!important;color:#fff!important}
  .workspace .today-schedule-mobile td:first-child::before{color:#9bc6c7!important}
  .workspace .today-schedule-mobile td::before{display:block!important}

  /* Toolbars: use width deliberately instead of stacking every control full-width. */
  .workspace .toolbar,.workspace .primary-toolbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin:0 0 8px!important;padding:7px!important;border:1px solid #d9e4e1!important;border-radius:13px!important;background:#fff!important}
  .workspace .toolbar>*{min-width:0!important;width:100%!important;margin:0!important}
  .workspace .toolbar input,.workspace .toolbar select,.workspace .toolbar button,.workspace .action-menu>summary{min-height:42px!important;padding:8px!important;border-radius:9px!important;font-size:16px!important}
  .workspace .reservation-toolbar>input:first-child,.workspace .activity-toolbar>input:first-child{grid-column:1/-1!important}
  .workspace .reservation-toolbar>button:last-child{grid-column:1/-1!important}
  .workspace .manifest-nav{grid-template-columns:1fr 1.2fr 1fr!important}
  .workspace .manifest-nav #manifestdate{grid-column:2!important;grid-row:1!important}
  .workspace .manifest-nav #manifest-prev{grid-column:1!important;grid-row:1!important}
  .workspace .manifest-nav #manifest-next{grid-column:3!important;grid-row:1!important}
  .workspace .manifest-nav #manifest-run-slot,.workspace .manifest-nav #print-manifest{grid-column:1/-1!important}

  /* Staff schedule cards retain context without a desktop-width calendar. */
  body[data-admin-view="schedule"] .workspace #schedule-results{overflow:visible!important}
  body[data-admin-view="schedule"] .workspace .calendar{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;min-width:0!important}
  body[data-admin-view="schedule"] .workspace .calendar-day{min-height:96px!important;padding:8px!important;border:1px solid #d8e3e0!important;border-radius:12px!important;background:#fff!important;box-shadow:0 3px 10px rgba(18,54,65,.035)!important}
  body[data-admin-view="schedule"] .workspace .calendar-day.published{border-color:#70aa9f!important;background:#f2faf7!important}
  body[data-admin-view="schedule"] .workspace .day-inspect{font-size:.67rem!important;line-height:1.35!important;text-align:left!important}
  body[data-admin-view="schedule"] .workspace .day-inspect small{font-size:.54rem!important;line-height:1.25!important}

  /* Record cards, staff cards and settings: cleaner spacing throughout the mobile admin. */
  .workspace .record-card{grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;padding:10px!important;border:1px solid #d9e4e1!important;border-radius:13px!important;background:#fff!important;box-shadow:0 3px 11px rgba(18,54,65,.035)!important}
  .workspace .record-card>div:first-child{min-width:0!important}
  .workspace .record-card>.row-actions{grid-column:1/-1!important;padding-top:6px!important;border-top:1px solid #edf1f0!important}
  .workspace .staff-card,.workspace .settings-card,.workspace .review-card{padding:11px!important;border-radius:14px!important;box-shadow:0 3px 12px rgba(18,54,65,.035)!important}
  .workspace .staff-directory{grid-template-columns:1fr!important;gap:7px!important}

  dialog{margin:auto 7px 7px!important;border-radius:22px 22px 15px 15px!important}
}

@media (max-width:390px){
  #public-schedule .trip-timeline{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #public-list .sailing-choice{grid-template-columns:84px minmax(0,1fr)!important}
  .contact-methods-section>.section-title{grid-template-columns:1fr!important}
  .contact-add-actions{min-width:0!important;width:100%!important}
  .workspace .toolbar,.workspace .primary-toolbar{grid-template-columns:1fr 1fr!important}
}