/* Shared mobile layouts. Desktop tables and all existing Vue actions stay intact. */
.cc-mobile-toggle, .cc-mobile-only { display: none; }
@media (max-width: 991.98px) {
  #app > .h-screen { height: auto !important; min-height: 100svh; overflow: visible !important; min-width: 0; }
  #navbarVertical { position: sticky; top: 0; z-index: 1030; padding: .5rem 0 !important; border-bottom: 1px solid #444b55; }
  #navbarVertical > .container-fluid { padding: 0 1rem; gap: .5rem; }
  #navbarVertical .navbar-brand { padding: .25rem 0 !important; margin: 0 !important; }
  #navbarVertical .navbar-brand img { max-height: 2rem; width: 7rem; }
  #navbarVertical .navbar-toggler { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin: 0 !important; padding: .5rem .65rem; color: #eee; font-size: .875rem; border: 1px solid #59616b; }
  #navbarVertical .navbar-toggler-icon { width: 1.25rem; height: 1.25rem; }
  #navbarVertical .navbar-collapse { max-height: calc(100dvh - 5rem - var(--cc-local-banner-height, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  #navbarVertical .navbar-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; padding: .75rem 0; margin: 0 !important; }
  #navbarVertical .nav-link { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem !important; white-space: normal; overflow-wrap: anywhere; border-radius: .5rem; }
  #navbarVertical .nav-link i { margin: 0 !important; flex-shrink: 0; }
  #navbarVertical .nav-link[aria-current="page"] { background: #354459 !important; color: #fff; box-shadow: inset 3px 0 #93b8ff; }
  #navbarVertical .navbar-divider { margin: .25rem 0 !important; }
  #navbarVertical .mt-auto { display: none; }
}
@media (max-width: 767.98px) {
  html { scroll-padding-top: 5rem; }
  #app { min-width: 0; }
  #app main { padding: 1rem !important; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom) + var(--cc-local-banner-height, 0px)) !important; }
  #app main > .container-xl { padding: 0; }
  #app > .h-screen { padding-left: .25rem !important; padding-right: .25rem !important; }
  #app header .container-xl { padding: 0 1rem; }
  #app h1 { font-size: 1.4rem; line-height: 1.5; }
  #app :is(main, .modal) .display-4 { font-size: 1rem; line-height: 1.6; font-weight: 400 !important; }
  #app :is(.form-control, .form-select) { font-size: 16px !important; min-height: 44px; max-width: 100%; min-width: 0; }
  #app :is(button.btn, a.btn, .page-link) { min-height: 44px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
  #app button { min-height: 44px; }
  #app :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #9bbfff; outline-offset: 3px; }
  #app textarea.form-control { min-height: 6rem; }
  #app fieldset { min-width: 0; max-width: 100%; }
  #app input[type=file] { width: 100%; }
  #app input[type=checkbox]:not(.form-switch input), #app input[type=radio] { width: 1.35rem; height: 1.35rem; flex-shrink: 0; vertical-align: middle; }
  #app .form-check-label, #app .custom_radio_label { padding: .6rem .25rem; line-height: 1.5; }
  #app .search { font-size: .875rem; margin-bottom: 1rem; }
  #app .search .d-flex { gap: .65rem !important; }
  #app .search :is(input.form-control, select.form-select) { width: 100% !important; flex: 1 1 100%; margin: 0 !important; }
  #app .search .btn { margin: 0 .25rem .25rem 0 !important; }
  #app .card-header .input-group input.form-control { min-width: 0; }
  #app .card-header :is(.d-flex, .input-group) { max-width: 100%; }
  #app .card-body { padding: 1rem; }
  #app .question { flex-wrap: wrap; gap: .75rem; }
  #app .cc-mobile-only { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: .75rem 0; font-size: .875rem; }
  #app .cc-mobile-only .form-select { width: 100%; }
  #app .cc-mobile-card-region { overflow: visible !important; min-height: 0 !important; }
  #app table[data-mobile-cards] { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; margin: .75rem 0; border: 0; }
  #app table[data-mobile-cards] > thead { position: absolute; display: block; width: 1px !important; max-width: 1px !important; min-width: 0 !important; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #app table[data-mobile-cards] > tbody { display: block; width: 100%; }
  #app table[data-mobile-cards] > tbody > tr { display: block; padding: 1rem; margin-bottom: .85rem; border: 1px solid #46505b; border-radius: .75rem; background: #292e35; }
  #app table[data-mobile-cards] > tbody > tr.cc-mobile-record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
  #app table[data-mobile-cards] > tbody > tr > td { position: static !important; display: block; width: auto !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.65; }
  #app table[data-mobile-cards] > tbody > tr > td::before { content: attr(data-mobile-label); display: block; color: #b5c1d0; font-size: .75rem; font-weight: 400; line-height: 1.5; margin-bottom: .25rem; }
  #app table[data-mobile-cards] td.cc-mobile-title { grid-column: 1 / -1; order: -1; border-bottom: 1px solid #46505b !important; padding-bottom: .75rem !important; font-weight: 600; color: #f3f6fa !important; }
  #app table[data-mobile-cards] td.cc-mobile-wide { grid-column: 1 / -1; }
  #app table[data-mobile-cards] tr:not([data-mobile-expanded]) > td.cc-mobile-secondary { display: none !important; }
  #app .cc-mobile-toggle { display: block; width: fit-content; min-height: 44px; margin-top: .5rem; padding: .4rem .75rem; border: 1px solid #697586; border-radius: .4rem; background: #343d49; color: #d4e4ff; font: inherit; font-size: .8rem; font-weight: 400; }
  #app table[data-mobile-cards] td .btn { display: inline-flex; align-items: center; justify-content: center; margin: .25rem .25rem .25rem 0 !important; max-width: 100%; min-width: 5rem; padding: .5rem .75rem; }
  #app table[data-mobile-cards] td :is(.action-cell, .reservation-actions) { display: flex; flex-wrap: wrap; width: 100%; min-width: 0; gap: .4rem; }
  #app table[data-mobile-cards] .action-cell > .btn { flex: 1 1 calc(50% - .5rem); margin: 0 !important; }
  #app table[data-mobile-cards] td :is(img, video) { max-width: 100%; height: auto; }
  #app table[data-mobile-cards] td :is(.d-flex, .input-group) { flex-wrap: wrap; gap: .375rem; }
  #app .pagination { flex-wrap: wrap; gap: .375rem; margin-top: 1rem !important; font-size: .875rem; }
  #app .pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; margin: 0; border-radius: .375rem; }
  #app .pagination .cc-page-away { display: none; }
  #app .pagination .cc-page-gap-before { display: inline-flex; align-items: center; gap: .375rem; }
  #app .pagination .cc-page-gap-before::before { content: '…'; color: #b5c1d0; }
  #app .pagination[data-mobile-page] { align-items: center; flex-wrap: nowrap; }
  #app .pagination[data-mobile-page] > .cc-page-number { display: none; }
  #app .pagination[data-mobile-page]::before { content: attr(data-mobile-page); order: 2; min-width: 6rem; text-align: center; }
  #app .pagination[data-mobile-page] > :first-child { order: 1; }
  #app .pagination[data-mobile-page] > :last-child { order: 3; }
  #app .page-link:disabled { opacity: .45; cursor: default; }
  #app :is(.reservation-pagination, .member-pagination, .log-pagination) { gap: .75rem; }
  #app :is(.reservation-pagination, .member-pagination, .log-pagination) nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; gap: .5rem; }
  #app .modal .modal-dialog { width: calc(100% - 1rem) !important; max-width: calc(100% - 1rem) !important; margin: .5rem !important; min-height: 0; }
  #app .modal .modal-content { max-height: calc(100dvh - 1rem - env(safe-area-inset-bottom) - var(--cc-local-banner-height, 0px)); overflow: hidden; }
  #app .modal :is(.modal-header, .modal-footer) { flex-shrink: 0; padding: .8rem 1rem; }
  #app .modal .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  #app .modal-footer { gap: .5rem; flex-wrap: wrap; }
  #app .modal-footer > .btn { flex: 1 1 auto; margin: 0; }
  #app .modal .btn-close { min-width: 44px; min-height: 44px; box-sizing: border-box; margin: -.4rem; flex-shrink: 0; }
  #app .modal .table:not([data-mobile-cards]) :is(td, th) { white-space: normal; overflow-wrap: anywhere; }
  #app .modal :is(.w-1\/2, .w-1\/3, .w-1\/4) { width: 100% !important; }
  #app .modal .d-flex.gap-2 { flex-wrap: wrap; }
  #app .log-dialog { max-height: calc(100dvh - 2rem - var(--cc-local-banner-height, 0px)); overflow-y: auto; }
  #app .log-detail-grid { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  #app .log-detail-grid dd { margin-bottom: .75rem; }
  #app .member-reservation-help summary { min-height: 44px; }
  #app .order-mobile-item { border: 1px solid #46505b; border-radius: .75rem; margin-bottom: .85rem; background: #292e35; }
  #app .invoice-copy-btn { min-width: 44px !important; min-height: 44px !important; }
  #app.cc-auth-page { padding: 1.5rem 1rem !important; padding-bottom: calc(2rem + var(--cc-local-banner-height, 0px)) !important; }
  #app.cc-auth-page .mb-12 { margin-bottom: 1.5rem !important; }
  #app.cc-auth-page .row.justify-content-between { row-gap: .75rem; }
  #app.cc-auth-page .row.justify-content-between > [class*=col-] { width: 100%; padding-left: calc(var(--x-gutter-x) * .5) !important; }
  .liff-shell { min-height: 100svh; padding: 1rem !important; }
  .liff-card { padding: 1.25rem !important; border-radius: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  #navbarVertical .collapsing { transition: none; }
}