/* Shared responsive UI components for tables and action controls. */
:root {
  --ui-ink: #111;
  --ui-line: #e5e2dd;
  --ui-soft: #f7f6f4;
  --ui-radius: 14px;
}

img, video, canvas, svg { max-width: 100%; }
body, main, section, article, aside, header, footer, nav, form, fieldset,
.staff-content, .page-main, .admin-page, .manager-page, .account-shell,
.store-page, .pos-report-shell { min-width: 0; }
:where(p, a, label, small, code, pre) { overflow-wrap: anywhere; }
pre, code { white-space: pre-wrap; word-break: break-word; }

.btn,
a.btn,
button.btn,
.data-table a.btn,
.data-table button,
.data-table form button,
.order-actions > a,
.order-actions form button,
.admin-actions > a,
.admin-actions button,
.manager-report-actions > a,
.manager-report-actions button,
.pos-report-actions > a,
.pos-report-actions button,
.pos-manage-list article button,
.address-card form button,
.cart-line form button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ui-ink);
  font: 700 12px/1.2 Poppins, Poppins, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.btn-primary, .button-dark, .btn[data-variant="primary"] { border-color: #111 !important; background: #111 !important; color: #fff !important; }
.btn-secondary, .button-outline { border-color: #cfcac4 !important; background: #fff !important; color: #111 !important; }
.btn-ghost { border-color: transparent !important; background: transparent !important; color: #111 !important; }
.btn-danger, .btn[data-variant="danger"] { border-color: #8d2525 !important; background: #8d2525 !important; color: #fff !important; }
.btn-sm { min-height: 36px; padding: 7px 12px; font-size: 11px; }
.btn-md { min-height: 44px; padding: 11px 18px; }
.btn-lg { min-height: 50px; padding: 14px 24px; font-size: 13px; }
.btn:hover, .data-table a.btn:hover, .data-table button:hover, .order-actions > a:hover,
.order-actions form button:hover, .admin-actions > a:hover, .admin-actions button:hover,
.manager-report-actions > a:hover, .manager-report-actions button:hover,
.pos-report-actions > a:hover, .pos-report-actions button:hover,
.pos-manage-list article button:hover, .address-card form button:hover,
.cart-line form button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px #00000012; }
.btn-primary:hover, .button-dark:hover { background: #333 !important; }
.btn:active, .data-table a.btn:active, .data-table button:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible, .data-table a.btn:focus-visible, .data-table button:focus-visible { outline: 3px solid #888; outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn-loading::after { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; animation: shared-button-spin .7s linear infinite; }
@keyframes shared-button-spin { to { transform: rotate(360deg); } }

.table-wrap, .table-scroll, .admin-table-scroll, .manager-table-scroll,
.data-table-scroll, .report-table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto !important; overflow-y: visible !important; overscroll-behavior-x: contain; }
table, .data-table, .manager-report-table { width: 100%; max-width: 100%; min-width: 0; table-layout: auto; border-collapse: collapse; }
table th, table td { min-width: 7ch; padding: 10px 12px; text-align: left; vertical-align: top; white-space: normal; overflow-wrap: break-word; word-break: normal; }
table thead { position: sticky; top: var(--table-sticky-top, 0); z-index: 2; }
table th { font-size: 11px; font-weight: 700; }
table td { font-size: 12px; }
table td img { max-width: 64px; height: auto; }
table td.responsive-actions { width: 1%; }
table td.responsive-primary { font-weight: 700; }
table td.responsive-status { color: #111; font-weight: 700; }
.responsive-table-details { margin-top: 5px; color: #555; font-size: 11px; }
.responsive-table-details summary { width: fit-content; padding: 5px 0; color: #111; font-weight: 700; cursor: pointer; }
.responsive-table-detail { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--ui-line); }
.responsive-table-detail strong { color: #777; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.responsive-table-detail span { overflow-wrap: anywhere; }
.responsive-table-more { display: none; }
.data-table tr > td:first-child { font-weight: 700; }

.admin-actions, .order-actions, .manager-report-actions, .pos-report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.address-card, .cart-line, .pos-manage-list article { min-width: 0; }
.cart-line { grid-template-columns: minmax(0, 1fr) auto auto; }
.cart-line > img, .cart-line > .product-placeholder { width: min(72px, 100%); height: auto; aspect-ratio: 4 / 5; }
.order-identification img { display: none !important; }

@media (max-width: 1100px) {
  .pos-register { grid-template-columns: minmax(0, 1fr) minmax(300px, 38vw) !important; }
  .manager-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .manager-approval-form { min-width: 0 !important; }
}
@media (min-width: 761px) and (max-width: 900px) {
  body.page-staff .staff-topbar { gap: 8px; padding-inline: 10px; }
  body.page-staff .staff-command-trigger span,
  body.page-staff .staff-command-trigger kbd,
  body.page-staff .staff-user-trigger-copy { display: none; }
  body.page-staff .staff-command-trigger { width: 42px; min-width: 42px; justify-content: center; padding-inline: 0; }
  body.page-staff .view-store { flex: 0 0 42px; width: 42px; min-width: 42px; max-width: 42px; justify-content: center; padding: 0; overflow-wrap: normal; font-size: 0; }
  body.page-staff .view-store svg { flex: 0 0 18px; }
}
@media (max-width: 720px) {
  .table-wrap, .table-scroll, .admin-table-scroll, .manager-table-scroll,
  .data-table-scroll, .report-table-scroll { overflow-x: auto !important; overflow-y: visible !important; }
  .data-table, .manager-report-table { min-width: 680px; }
  .cart-line { grid-template-columns: minmax(0, 1fr) auto; }
  .cart-line > img, .cart-line > .product-placeholder { display: none; }
  .cart-line-info { min-width: 0; }
  .cart-line form { min-width: 0; }
  .cart-line .cart-remove-form { grid-column: 1 / -1; }
  .address-card { align-items: flex-start; gap: 10px; }
  .address-card form { flex: 0 0 auto; }
  .address-card form button, .cart-line form button { min-height: 44px; }
}
@media (max-width: 420px) {
  .responsive-table-detail { grid-template-columns: 1fr; gap: 2px; }
  .pos-register { grid-template-columns: minmax(0, 1fr) !important; }
  .pos-top nav { flex-wrap: wrap; }
  .manager-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .data-table a.btn, .data-table button { transition: none; }
  .btn-loading::after { animation-duration: 1.5s; }
}




[hidden]{display:none!important}
.btn-close{position:relative;display:inline-grid!important;place-items:center!important;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:2px!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#111!important;font-size:0!important;line-height:0!important;cursor:pointer;z-index:2}
.btn-close::before{content:'';position:absolute;inset:2px;border:1px solid var(--ui-line,#e5e2dd);border-radius:50%;background:#fff;transition:background-color .2s ease,border-color .2s ease}
.btn-close svg{position:relative;z-index:1;width:18px;height:18px;max-width:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.btn-close:hover::before{background:#f0efed;border-color:#111}
.btn-close:focus-visible{outline:3px solid #777;outline-offset:2px}

.public-mobile-menu__head,.public-search-head,.public-login-dialog__head,.public-cart-drawer__head,.filter-head,.banner-crop-dialog__panel>header,.pos-dialog-card{position:relative}
.public-mobile-menu__head>.btn-close,.public-search-head>.btn-close,.public-login-dialog__head>.btn-close,.public-cart-drawer__head>.btn-close,.filter-head>.btn-close,.banner-crop-dialog__panel>header>.btn-close,.pos-dialog-card>.btn-close,.gallery-zoom-dialog>.btn-close,.quick-view-dialog>.btn-close{position:absolute;top:8px;right:8px}
.public-flash-toast,.staff-toast,[data-flash-toast]{position:relative;padding-right:58px}
.public-flash-toast>.btn-close,.staff-toast>.btn-close,[data-flash-toast]>.btn-close{position:absolute;top:4px;right:4px}
.public-announcement>.btn-close{position:absolute;top:50%;right:8px;transform:translateY(-50%)}

.data-table,.manager-report-table{min-width:680px;table-layout:auto}
.page-inner .data-table :is(th,td),body.page-staff .data-table :is(th,td){overflow-wrap:break-word;word-break:normal;white-space:normal}
:is(.td-nowrap,.td-num,.td-status){white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}
.td-num{text-align:right;font-variant-numeric:tabular-nums}
.td-status{font-weight:700}

.page-inner .data-table :is(td,th,a),body.page-staff .data-table :is(td,th,a){overflow-wrap:break-word;word-break:normal}
/* Announcement bar: plain × like the reference, no circle */
.public-announcement > .btn-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0 !important;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.public-announcement > .btn-close::before {
  content: none !important;
}

.public-announcement > .btn-close svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.public-announcement > .btn-close:hover {
  opacity: .7;
}


/* Consistent black-and-white select controls across storefront, staff and POS screens. */
select:not([multiple]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 42px;
  padding: 9px 38px 9px 12px !important;
  border: 1px solid #d8d5d1 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%) !important;
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  color: #111 !important;
  font: inherit;
  cursor: pointer;
}
select:not([multiple]):focus-visible { outline: 2px solid #111 !important; outline-offset: 2px !important; }
select:not([multiple]):disabled { color: #777 !important; cursor: not-allowed; }
select option { background: #fff; color: #111; }

/* Keep public validation notices anchored to the viewport after shared styles load. */
.public-flash-toast,[data-validation-toast]{position:fixed!important;z-index:150;top:calc(var(--band-h,0px) + 14px);right:20px;left:auto;width:min(420px,calc(100vw - 32px));margin:0;padding:13px 58px 13px 15px;border:1px solid #dedbd7;border-radius:10px;background:#fff;box-shadow:0 12px 34px #0002}
.public-flash-toast[data-flash-type="error"],[data-validation-toast]{border-color:#b42318}
@media(max-width:760px){.public-flash-toast,[data-validation-toast]{top:calc(var(--band-h,0px) + 8px);right:auto;left:50%;transform:translateX(-50%)}}

/* Shared black-and-white confirmation dialog for staff and storefront actions. */
.site-confirm-dialog{position:fixed;inset:0;width:min(480px,calc(100% - 32px));max-width:none;max-height:min(80vh,520px);margin:auto;padding:24px;border:1px solid #dedbd7;border-radius:14px;background:#fff;color:#111;box-shadow:0 24px 70px #0004}
.site-confirm-dialog::backdrop{background:rgba(8,8,8,.62);backdrop-filter:blur(3px)}
.site-confirm-dialog h2{margin:0 0 10px;font:400 27px/1.15 "Playfair Display","Times New Roman",serif}
.site-confirm-dialog p{margin:0;color:#555;font:14px/1.65 Poppins,sans-serif;overflow-wrap:anywhere}
.site-confirm-input-label{display:grid;gap:7px;margin-top:16px;color:#444;font:600 12px/1.4 Poppins,sans-serif}
.site-confirm-input-label input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #d8d5d1;border-radius:8px;background:#fff;color:#111;font:14px Poppins,sans-serif}
.site-confirm-input-label input[aria-invalid="true"]{border-color:#111;box-shadow:0 0 0 2px #1112}
.site-confirm-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}
.site-confirm-actions .button{min-height:42px;margin:0;padding:10px 17px;border-radius:999px;font:700 11px/1.2 Poppins,sans-serif;letter-spacing:.08em}
.site-confirm-actions .button-outline{border:1px solid #d8d5d1;background:#fff;color:#111}
.site-confirm-actions .button-dark{border:1px solid #111;background:#111;color:#fff}
.site-confirm-actions .button-dark:hover{background:#333}
@media(max-width:520px){.site-confirm-dialog{padding:20px}.site-confirm-actions{flex-wrap:wrap}.site-confirm-actions .button{flex:1}}
.manager-product-bulk button[value="trash"]{border-color:#edc5c1!important;background:#fff1ef!important;color:#963b34!important}.manager-product-bulk button[value="trash"]:hover:not(:disabled){border-color:#dfaaa5!important;background:#ffe6e3!important;color:#7f2b25!important}