/* Shared phone and tablet layouts. Desktop styles stay in their existing files. */
img { max-width: 100%; }
input, select, textarea { max-width: 100%; }
.table-responsive, .table-scroll { position: relative; max-width: 100%; overscroll-behavior-x: contain; }
.workspace-main, .workspace-main [class*="col-"], .workspace-navigation { min-width: 0; }
.workspace-main dl dd, .workspace-main dl dt { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  .workspace-sidebar { border-bottom: 1px solid #dce5df; }
  .workspace-brand { padding: 10px 12px !important; }
  .workspace-brand h5 { margin: 0 !important; font-size: 16px; }
  .workspace-brand h5 small { font-size: 11px; }
  .workspace-brand .btn { min-height: 44px; }
  .workspace-navigation > .p-3 { padding: 10px 12px !important; }
  .workspace-navigation .list-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .workspace-navigation .list-group-item { border: 1px solid #dce5df; border-radius: 6px; padding: 9px; font-size: 13px; }
  .workspace-navigation .nav { flex-direction: row !important; gap: 8px; }
  .workspace-navigation .position-sticky { position: static !important; padding: 8px 12px !important; }
  .workspace-main > .p-4 { padding: 12px !important; }
  .workspace-main .p-4, .modal .p-4 { padding: 14px !important; }
  .workspace-main .p-5 { padding: 20px !important; }
  .workspace-main .mb-4 { margin-bottom: 16px !important; }
  .workspace-main .g-4 { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
  .workspace-main .invite-hero { border-radius: 12px; gap: 10px !important; }
  .workspace-main .h2 { font-size: 24px; }
  .workspace-main .h3 { font-size: 22px; }
  .workspace-main .card-body { padding: 12px; }
  .workspace-main .data-card { height: auto; border-radius: 12px; }
  .workspace-main .table { font-size: 13px; }
  .workspace-main .table th, .workspace-main .table td { padding: 8px; }
  .workspace-main .table th { font-size: 11px; letter-spacing: .02em; }
  .workspace-main .table td:first-child { min-width: 130px; }
  .workspace-main .btn, .modal .btn { min-height: 42px; white-space: normal; }
  .workspace-main .form-control, .workspace-main .form-select, .modal input:not([type=checkbox]):not([type=radio]), .modal select { font-size: 16px; }
  .workspace-main .form-text, .modal .form-text { font-size: 12px; line-height: 1.45; }
  .workspace-main .form-check-input, .modal .form-check-input { min-width: 20px; min-height: 20px; }
  .workspace-main .table input:not([type=checkbox]):not([type=hidden]), .workspace-main .table select,
  .modal .table input:not([type=checkbox]):not([type=hidden]), .modal .table select { min-width: 110px; }
  .modal .table select { min-width: 175px; }
  .modal-dialog { margin: 8px; }
  .modal-content { max-height: calc(100dvh - 16px); }
  .modal-body { overflow-y: auto; min-height: 0; padding: 12px; }
  .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .modal-header, .modal-footer { flex-shrink: 0; }
  .modal-header, .modal-footer { padding: 12px; }
  .modal .btn-close, .invoice-detail-dialog .btn-close, .invoice-scanner .btn-close { min-width: 44px; min-height: 44px; }
  .invoice-scanner .btn { min-height: 44px; }
  dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
  .invoice-detail-dialog, .invoice-scanner { width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; border-radius: 12px !important; }
  .invoice-detail-dialog .p-3, .invoice-detail-dialog .p-md-4 { padding: 12px !important; }
  .invoice-detail-dialog .btn { min-height: 42px; }
  .invoice-detail-dialog input, .invoice-detail-dialog select, .invoice-detail-dialog textarea { font-size: 16px; }
  .pos-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .pos-product-info { padding: 10px !important; }
  .pos-product-info .btn { min-height: 42px; }
  .pos-product-info h4 { font-size: 14px; }
  .pos-mobile-actions { position: sticky; top: 0; z-index: 2; }
  .pos-mobile-actions .btn { flex: 1; font-size: 13px; padding: 8px; }
  #pos-products, #pos-invoice, #pos-payment { scroll-margin-top: 66px; }
  .pos-draft-table thead { display: none; }
  .pos-draft-table tbody { display: block; }
  .pos-draft-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid #dce5df; }
  .pos-draft-table td { display: block; border: 0; min-width: 0; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; }
  .pos-draft-table td::before { content: attr(data-label); display: block; color: #64716d; font-size: 11px; }
  .pos-draft-table td:first-child { grid-column: 1 / -1; }
  .pos-draft-table td:last-child { grid-column: 2; text-align: right !important; }
  .pos-draft-table td[colspan] { grid-column: 1 / -1; }
  .invoice-table { min-width: 0 !important; }
  .invoice-table thead { display: none; }
  .invoice-table tbody { display: block; padding: 8px; }
  .invoice-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "reference reference" "student student" "batch ordered" "status items" "total balance" "manage manage"; border: 1px solid #dce5df; border-radius: 10px; margin-bottom: 8px; padding: 6px; }
  .invoice-table td { display: block; border: 0; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
  .invoice-table td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 500; color: #64716d; }
  .invoice-table td:first-child, .invoice-table td:last-child { grid-column: 1 / -1; }
  .invoice-table td:nth-child(1) { grid-area: reference; }
  .invoice-table td:nth-child(2) { grid-area: batch; }
  .invoice-table td:nth-child(3) { grid-area: student; }
  .invoice-table td:nth-child(4) { grid-area: ordered; }
  .invoice-table td:nth-child(5) { grid-area: items; }
  .invoice-table td:nth-child(6) { grid-area: status; }
  .invoice-table td:nth-child(7) { grid-area: total; }
  .invoice-table td:nth-child(8) { grid-area: balance; }
  .invoice-table td:nth-child(9) { grid-area: manage; }
  .invoice-table td:last-child .btn { width: 100%; }
  .invoice-table .invoice-email, .invoice-table .invoice-student, .invoice-table .invoice-reference { min-width: 0; max-width: none; }
  .invoice-table .invoice-secondary { font-size: 11px; }
  .invoice-table td[colspan] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { overflow-wrap: anywhere; }
  .portal-header { padding: 12px; gap: 12px; }
  .portal-brand { gap: 8px; }
  .brand { font-size: 20px; }
  .portal-nav { gap: 8px; }
  .portal-nav-section:not(.portal-nav-account) { display: grid; grid-template-columns: 1fr 1fr 1.4fr; }
  .portal-nav-button { padding: 8px; min-height: 44px; font-size: 13px; }
  .portal-nav-account { display: flex; min-width: 0; }
  .portal-student-button { flex: 1; min-width: 0; }
  .portal-student-button span { max-width: none; }
  .portal-nav-icon { flex: 0 0 44px; width: 44px; }
  body > main { margin: 18px auto; padding: 0 12px 24px; }
  .commerce-heading { gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
  .commerce-heading h1, .profile-intro h1 { font-size: 26px; }
  .card { padding: 14px; margin-bottom: 14px; border-radius: 12px; }
  h2 { font-size: 19px; }
  .profile-section { padding: 16px; }
  .profile-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .profile-fields > div:first-child { grid-column: 1 / -1; }
  .profile-fields dd { font-size: 14px; }
  .profile-section-heading { gap: 8px; margin-bottom: 14px; }
  .cards { gap: 12px; margin-top: 16px; }
  .store-page .order-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .store-page .normal-product { grid-template-rows: 130px 1fr; min-height: 0; padding: 0; }
  .store-product-information { padding: 12px; }
  .store-page .order-product h2 { font-size: 16px; margin-top: 0; }
  .store-product-description, .store-product-information p, .store-prices, .store-features { font-size: 12px; }
  .store-subtypes dd { flex-shrink: 1; }
  .store-prices > div { gap: 6px; }
  .store-product-action { padding-top: 12px; }
  .store-voucher-student { display: none; }
  .store-product-vouchers { padding: 8px; margin-bottom: 10px; }
  .store-add-product { padding: 10px 6px; font-size: 13px; min-height: 44px; }
  .student-picker { width: calc(100vw - 16px); padding: 16px; max-height: calc(100dvh - 16px); }
  .student-picker-option { padding: 12px; gap: 10px; }
  .student-picker-submit { margin-top: 16px; }
  .cart-dialog-close { top: 12px; right: 12px; }
  .cart-dialog-actions { gap: 8px; flex-wrap: wrap; }
  .cart-form-field { margin: 14px 0; }
  .cart-total { gap: 10px; font-size: 16px; padding-top: 14px; flex-wrap: wrap; }
  .cart-total strong { margin-left: auto; }
  input, select, textarea { font-size: 16px; min-width: 0; }
  button, .button { min-height: 44px; }
  .cart-records table, .cart-records tbody { display: block; }
  .cart-records thead { display: none; }
  .cart-records tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid #dce5df; }
  .cart-records td { padding: 8px 0; border: 0; min-width: 0; }
  .cart-records td::before { content: attr(data-label); display: block; color: #63766e; font-size: 12px; }
  .cart-records td:first-child, .cart-records td:nth-child(3), .cart-records td:last-child { grid-column: 1 / -1; }
  .cart-records td:nth-child(4) { grid-row: 2; grid-column: 2; text-align: right; }
  .cart-product-summary, .cart-update { min-width: 0; }
  .cart-product-summary { gap: 10px; }
  .cart-product-summary img { width: 44px; height: 44px; flex-shrink: 0; }
  .cart-money { white-space: normal; }
  .cart-vouchers table, .cart-vouchers tbody { display: block; }
  .cart-vouchers thead { display: none; }
  .cart-vouchers tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid #dce5df; }
  .cart-vouchers td { display: block; border: 0; padding: 6px; min-width: 0; }
  .cart-vouchers td::before { content: attr(data-label); display: block; font-size: 12px; color: #63766e; }
  .cart-vouchers td:nth-child(1), .cart-vouchers td:nth-child(2), .cart-vouchers td[colspan] { grid-column: 1 / -1; }
  .purchase-page table { min-width: 440px; }
  .purchase-page table { font-size: 13px; }
  .purchase-page th, .purchase-page td { padding: 8px; min-width: 70px; }
  .purchase-actions { gap: 8px; }
  .auth-page { padding: 12px !important; gap: 12px !important; }
  .auth-brand, .auth-card { padding: 18px !important; border-radius: 14px !important; min-width: 0; }
  .auth-brand h1 { font-size: 24px; }
  .auth-brand p { margin-bottom: 0; font-size: 14px; }
  .auth-points { display: none; }
  .auth-card h2 { font-size: 22px; }
  .auth-card input, .auth-card select { font-size: 16px !important; }
  .auth-card .btn { min-height: 44px; }
  .auth-card input[type=checkbox] { width: 20px; height: 20px; min-height: 0; }
  .auth-card label[for=id_remember] { display: inline-flex; align-items: center; min-height: 44px; }
  .welcome { min-width: 0; }
}
@media (max-width: 575.98px) {
  .modal-dialog.modal-fullscreen-sm-down { margin: 0; width: 100%; height: 100dvh; }
  .modal-fullscreen-sm-down .modal-content { max-height: 100dvh; }
}
@media (max-width: 359px) {
  .store-page .order-products { grid-template-columns: 1fr; }
  .pos-product-grid { grid-template-columns: 1fr !important; }
}

.admin-menu-heading { font-size:12px; font-weight:700; color:#63766e; margin:16px 0 8px; }

.admin-menu-main .list-group-item { grid-column:1 / -1; }