/* Shared 2026-10-27 usability pass. Loaded last on the guest and admin surfaces. */
:root {
  --ui-espresso: #3f2d21;
  --ui-coffee: #59432e;
  --ui-cream: #fff7ea;
  --ui-ink: #302116;
  --ui-muted: #654d39;
  --ui-gold: #f0cb75;
  --ui-font: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
}

html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { font-family: var(--ui-font) !important; }
button, input, select, textarea { font-family: var(--ui-font) !important; }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #f0cb75 !important;
  outline-offset: 2px !important;
}

/* Guest menu: remove tiny labels and keep the existing controls easy to use. */
.product-category, .product-category-heading > span,
.featured-card small, .featured-note, .product-desc,
.product-detail-trigger, .product-controls select,
.quantity-input, .cart-item small {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.product-title-row h3, .featured-card b { font-size: 17px !important; line-height: 1.3 !important; }
.product-price, .featured-card em { font-size: 16px !important; }
.product-detail-trigger { min-height: 40px; display: inline-flex; align-items: center; }
.product-controls { gap: 8px !important; }
.product-controls select { min-height: 44px !important; padding: 8px !important; }
.quantity-control { min-height: 44px !important; }
.quantity-control button, .quantity-control input { min-height: 44px !important; font-size: 15px !important; }
.product-purchase-actions { grid-template-columns: 1fr !important; gap: 7px !important; }
.product-purchase-actions .buy-now-button,
.product-purchase-actions .add-button {
  min-height: 46px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}
.detail-buy-button, .detail-add-button { min-height: 46px !important; font-size: 14px !important; }
.detail-copy p, .detail-copy dd { font-size: 14px !important; line-height: 1.55 !important; }
.detail-copy dt { font-size: 12px !important; }

/* Make the mobile category picker read like a clear menu control. */
@media (max-width: 700px) {
  .menu-category-rail { gap: 9px !important; padding: 10px 14px !important; }
  .mobile-category-summary { font-size: 12px !important; letter-spacing: .08em !important; }
  #mobile-category-select { min-height: 48px !important; font-size: 15px !important; padding-inline: 13px 38px !important; }
  .menu-category-picker, .mobile-category-picker { min-height: 60px; }
  .menu-category-rail > .install-app-trigger { min-height: 46px !important; font-size: 13px !important; }
  .featured-heading h3 { font-size: 21px !important; }
  .featured-card small { font-size: 12px !important; }
  .featured-card b { white-space: normal !important; }
  .menu-search input { min-height: 46px !important; font-size: 16px !important; }
  .checkout-dialog { font-family: var(--ui-font) !important; }
  .checkout-field > label, .checkout-dialog .payment-methods legend,
  .checkout-dialog .payment-copy b { font-size: 14px !important; }
  .checkout-field input:not([type=hidden]), .checkout-field select,
  .checkout-field textarea { min-height: 46px !important; font-size: 16px !important; }
  .checkout-field .address-editor > label,
  .checkout-field .address-preview,
  .checkout-profile-hint,
  .checkout-dialog .payment-copy small,
  .checkout-dialog .online-channel,
  .checkout-dialog .online-channel p { font-size: 13px !important; }
  .checkout-dialog .payment-choice { min-height: 64px !important; }
  .checkout-summary .checkout-item small { font-size: 13px !important; }
  .checkout-summary .checkout-submit { min-height: 50px !important; font-size: 15px !important; }
  .quick-cart-dock { min-height: 62px !important; }
}

/* Small phones: one roomy product row instead of two cramped columns. */
@media (max-width: 430px) {
  .product-category-products { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .product-card { display: grid !important; grid-template-columns: minmax(128px, 42%) minmax(0, 1fr) !important; align-items: stretch; }
  .product-card > .product-art { grid-column: 1; grid-row: 1; min-height: 100%; }
  .product-card > .product-art img { height: 100% !important; min-height: 100%; object-fit: cover; }
  .product-card > .product-info { grid-column: 2; padding: 11px !important; }
  .product-title-row { align-items: flex-start !important; gap: 6px !important; }
  .product-title-row h3 { overflow-wrap: anywhere; }
  .product-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .product-controls { grid-template-columns: minmax(0,1fr) !important; }
  .product-controls select { min-width: 0; }
  .product-purchase-actions .buy-now-button, .product-purchase-actions .add-button { min-height: 44px !important; }
  .featured-products { grid-template-columns: minmax(0,1fr) !important; }
  .featured-card { grid-template-columns: 112px minmax(0,1fr) !important; }
  .featured-card img { width: 112px !important; height: 94px !important; }
}

/* Admin contrast and touch targets. The coffee texture stays on surfaces only. */
#admin-dashboard, #admin-dashboard :where(p, small, label, td, th, span, li) {
  text-shadow: none;
}
#admin-dashboard :where(small, .admin-kicker, .admin-form small,
  .workflow-intro, .order-tools span, .admin-table-wrap td small) {
  color: #f2dfc3 !important;
  opacity: 1 !important;
}
/* Several admin panels intentionally use a light surface. Keep their text dark. */
#admin-dashboard .workflow-step :where(small, p) { color: #4b3524 !important; opacity: 1 !important; }
#admin-dashboard .workflow-step-top small { color: #654a2d !important; }
#admin-dashboard .finance-summary article :where(span, small) { color: #503b29 !important; opacity: 1 !important; }
#admin-dashboard .admin-boss-link-card .admin-access-link-list :where(th, td, small) { color: #3f2d21 !important; opacity: 1 !important; }
#admin-dashboard .admin-boss-link-card .admin-access-link-list th { color: #65451f !important; }
#admin-dashboard .inventory-waste-form :where(p, small, label) { color: #49301f !important; opacity: 1 !important; }
#admin-dashboard .inventory-setup { color: #fff0d8 !important; }
#admin-dashboard .inventory-setup > summary,
#admin-dashboard .inventory-setup > p { color: #f2dfc3 !important; opacity: 1 !important; }
#admin-dashboard .admin-form.inventory-waste-form {
  background: #fff5e4 !important;
  border-color: #c99a61 !important;
  color: #49301f !important;
}
#admin-dashboard .admin-form.inventory-waste-form :where(h3, p, label, small) {
  color: #49301f !important;
  opacity: 1 !important;
}
#admin-dashboard .admin-form.inventory-waste-form :where(input, select, textarea) {
  background: #fff !important;
  color: #302116 !important;
  border-color: #aa8254 !important;
}
#admin-dashboard .admin-form.inventory-waste-form input::placeholder { color: #725d47 !important; opacity: 1 !important; }
#admin-dashboard .admin-table-wrap :where(th, td, td small) { opacity: 1 !important; }
#admin-dashboard .admin-table-wrap td small { color: #f2dfc3 !important; }
#admin-dashboard :where(input, select, textarea) {
  min-height: 44px;
  color: #302116 !important;
  font-size: 15px !important;
}
#admin-dashboard :where(button, .admin-tabs button) { min-height: 44px; font-size: 14px; }
#admin-dashboard .admin-tabs button { padding-inline: 13px; }
#admin-dashboard :where(.admin-form, .admin-table-wrap, .workflow-card, .admin-panel) {
  line-height: 1.5;
}
#admin-dashboard .admin-table-wrap th { color: #ffe2a4 !important; font-size: 12px !important; }
#admin-dashboard .admin-table-wrap td { color: #fff7e9 !important; font-size: 14px !important; }
#admin-dashboard .admin-table-wrap td small { display: block; font-size: 13px !important; line-height: 1.45; }
#admin-dashboard .admin-panel :where(.status-pill, .count-pill) { font-size: 12px !important; }

/* Reduce the texture overlay where it competes with small text. */
.product-card::before, .featured-menu::before, .menu-category-rail::before,
#admin-dashboard .admin-panel::before, #admin-dashboard .admin-form::before,
#admin-dashboard .workflow-panel::before, #admin-dashboard .workflow-step::before,
#admin-dashboard .admin-boss-link-card::before { opacity: .18 !important; }

/* On phones the ten-column order table becomes a readable stack of order cards. */
@media (max-width: 760px) {
  .admin-shell { width: min(100% - 24px, 560px) !important; margin: 20px auto 40px !important; }
  .admin-topbar { min-height: 64px !important; height: auto !important; padding: 10px 14px !important; }
  .admin-top-actions { gap: 8px !important; flex-wrap: wrap; justify-content: flex-end; }
  .admin-top-actions :where(a, button, span) { font-size: 13px !important; }
  .admin-welcome h1 { font-size: 29px !important; }
  .admin-tabs { gap: 7px !important; padding: 8px 2px 10px !important; }
  .admin-tabs button { min-height: 46px !important; font-size: 14px !important; }
  .admin-panel { padding: 15px !important; }
  .panel-heading h2 { font-size: 24px !important; }
  .order-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 10px !important; }
  .order-filters label:first-child { grid-column: 1 / -1; }
  .order-filters :where(label, input, select, button) { min-width: 0; font-size: 14px !important; }
  .order-tools { flex-wrap: wrap; gap: 8px !important; }
  .order-tools button { min-height: 46px !important; }
  #admin-orders-panel .admin-table-wrap { overflow: visible !important; border: 0 !important; }
  #admin-orders-panel table, #admin-orders-panel tbody { display: block !important; width: 100% !important; min-width: 0 !important; }
  #admin-orders-panel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  #admin-orders-panel tbody { display: grid !important; gap: 12px; }
  #admin-orders-panel tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 0 12px;
    padding: 8px 12px !important;
    border: 1px solid #b38a52 !important;
    border-radius: 12px;
    background: #4b3728 !important;
    box-shadow: 0 5px 14px #1e130d22;
  }
  #admin-orders-panel tbody td {
    display: block !important;
    min-width: 0;
    padding: 9px 0 !important;
    border-bottom: 1px solid #806341 !important;
    overflow-wrap: anywhere;
    font-size: 14px !important;
  }
  #admin-orders-panel tbody td::before {
    display: block;
    margin-bottom: 4px;
    color: #f0cb75;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
  }
  #admin-orders-panel tbody td:nth-child(1) { grid-column: 1 / -1; }
  #admin-orders-panel tbody td:nth-child(1)::before { content: "MÃ ĐƠN · THỜI GIAN"; }
  #admin-orders-panel tbody td:nth-child(2)::before { content: "KÊNH ĐẶT"; }
  #admin-orders-panel tbody td:nth-child(3) { grid-column: 1 / -1; }
  #admin-orders-panel tbody td:nth-child(3)::before { content: "KHÁCH NHẬN"; }
  #admin-orders-panel tbody td:nth-child(4)::before { content: "THANH TOÁN"; }
  #admin-orders-panel tbody td:nth-child(5)::before { content: "TỔNG TIỀN"; }
  #admin-orders-panel tbody td:nth-child(6)::before { content: "TIẾN ĐỘ ĐƠN"; }
  #admin-orders-panel tbody td:nth-child(7)::before { content: "GHI CHÚ"; }
  #admin-orders-panel tbody td:nth-child(8) { grid-column: 1 / -1; }
  #admin-orders-panel tbody td:nth-child(8)::before { content: "MÓN ĐÃ GỌI"; }
  #admin-orders-panel tbody td:nth-child(9)::before { content: "PHIẾU"; }
  #admin-orders-panel tbody td:nth-child(10)::before { content: "THAO TÁC"; }
  #admin-orders-panel tbody td[hidden], #admin-orders-panel tbody td[style*="display: none"] { display: none !important; }
  #admin-orders-panel tbody td :where(button, .order-save, .order-advance, .order-print, .table-action) {
    min-height: 44px !important;
    margin: 4px 4px 0 0;
    padding: 9px 11px !important;
    font-size: 14px !important;
    white-space: normal;
  }
  #admin-orders-panel tbody td:nth-child(10) { grid-column: 1 / -1; }
  #admin-orders-panel tbody td:last-child { border-bottom: 0 !important; }
  #admin-orders-panel .order-tools:last-child { justify-content: space-between; }
  #admin-dashboard .admin-columns { grid-template-columns: minmax(0,1fr) !important; }
  #admin-dashboard .admin-table-wrap { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Mobile menu refresh 2026-11-06: show food photos at full card width and keep choices/actions roomy. */
@media (max-width: 600px) {
  .product-category-products { grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; }
  .product-card { display: grid !important; grid-template-columns: minmax(0,1fr) !important; align-items: start !important; overflow: hidden; }
  .product-card > .product-art { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: clamp(180px, 58vw, 250px) !important; min-height: 0 !important; aspect-ratio: 16 / 10; }
  .product-card > .product-art img { display:block; width:100% !important; height:100% !important; min-height:0 !important; aspect-ratio:16 / 10; object-fit:cover !important; }
  .product-card > .product-info { grid-column: 1 !important; grid-row: 2 !important; min-width:0; padding:14px !important; }
  .product-title-row { align-items:center !important; }
  .product-title-row h3 { font-size:19px !important; }
  .product-desc { font-size:14px !important; line-height:1.5 !important; }
  .product-controls { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .product-controls select { min-height:46px !important; font-size:14px !important; }
  .product-purchase-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:8px !important; }
  .product-purchase-actions :is(.buy-now-button,.add-button) { min-height:48px !important; }
  .featured-products { grid-template-columns:minmax(0,1fr) !important; gap:12px !important; }
  .featured-card { grid-template-columns: minmax(0,1fr) !important; }
  .featured-card img { width:100% !important; height:clamp(165px,52vw,220px) !important; aspect-ratio:16 / 10; object-fit:cover !important; }
  .featured-card > div { padding:12px 14px !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .product-category-products { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; }
  .product-card > .product-art img { width:100%; height:190px; object-fit:cover; }
}

/* Order details: make table-session batches readable on small screens. */
.order-batch-details{margin-top:8px;border:1px solid #9a7a54;border-radius:10px;background:#f1dfc7;color:#302319;overflow:hidden}
.order-batch-details>summary{padding:10px 12px;color:#30432d;font-weight:800;cursor:pointer;min-height:42px;display:flex;align-items:center}
.order-batch-list{padding:0 10px 8px}
.order-batch-entry{padding:9px 3px;border-top:1px solid #c9ad8d;display:grid;gap:4px}
.order-batch-entry>strong,.order-item-line b,.order-batch-total{color:#302319}
.order-batch-time,.order-item-line small,.order-batch-note{color:#4f4336!important;opacity:1!important}
.order-item-line{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding:3px 0}
.order-item-line b{font-size:13px}.order-item-line small{text-align:right;font-size:12px;line-height:1.35}
.order-batch-total{font-size:12px;text-align:right}
@media(max-width:760px){
 #admin-orders-panel tbody td:nth-child(8){min-width:0}
 #admin-orders-panel .order-batch-details>summary{font-size:14px}
 #admin-orders-panel .order-batch-entry{padding:11px 3px}
 #admin-orders-panel .order-item-line{gap:6px}
 #admin-orders-panel .order-item-line b{font-size:14px;line-height:1.35}
 #admin-orders-panel .order-item-line small{font-size:13px;max-width:44%}
 #admin-orders-panel .order-batch-total{font-size:13px}
}