/* Approved ON staff theme: navy work area, white navigation chrome, pale-blue selects. */
:root {
  --on-main-blue: #062b50;
  --on-main-blue-2: #0a4d88;
  --on-light-blue: #dff2fc;
  --on-sidebar-ink: #082c52;
}

body { color:#fff; background:var(--on-main-blue); }
.app-shell { background:var(--on-main-blue); }
.main-area { min-width:0; color:#fff; background:var(--on-main-blue); }
.view { color:#fff; background:var(--on-main-blue); }
.topbar { color:var(--on-sidebar-ink); background:#fff; border-bottom-color:#dce5ef; }
.page-heading h1,.topbar .eyebrow { color:var(--on-sidebar-ink); }
.icon-button,.help-button,.mobile-menu { color:var(--on-sidebar-ink); background:#fff; border-color:#dce5ef; }

.sidebar { color:var(--on-sidebar-ink); background:#fff; border-right:1px solid #e1e8ef; }
.brand { color:var(--on-sidebar-ink); }
.sidebar-user { color:var(--on-sidebar-ink)!important; background:#f4f8fb!important; border-color:#dce5ef!important; }
.sidebar-user .profile-button,.sidebar .profile-button { color:var(--on-sidebar-ink)!important; }
.sidebar .profile-button small,.sidebar .profile-button b,.sidebar .store-chip { color:#526e84!important; }
.sidebar .sign-out-button { color:#315b79!important; border-top-color:#dce5ef!important; }
.sidebar .sign-out-button:hover { color:var(--on-main-blue)!important; }
.sidebar .nav-link { color:#315b79; }
.sidebar .nav-link:hover,.sidebar .nav-link.active { color:#fff; background:var(--on-main-blue-2); }
.sidebar .nav-link.active { box-shadow:inset 3px 0 #82c9ed; }
.sidebar .avatar { color:#fff; background:var(--on-main-blue-2); }
.sidebar .status-dot { background:#2088bd; }

/* Keep cards/forms white for contrast while the page canvas follows the customer navy theme. */
.data-card,.metric-card,.report-card,.cart-panel,.product-card,.master-stock-card,
.ops-summary-card,.purchase-summary,.cashier-order-panel,.shift-summary-card {
  color:var(--ink);
}
.section-intro h2,.catalog-header h2,.view > h2,.view > h3 { color:#fff; }
.section-intro > div > p,.view > p { color:#d0e0ee; }
.view > .section-intro,
.purchase-return-area > .section-intro {
  color:#fff;
  background:var(--on-main-blue);
  box-shadow:0 8px 14px -14px rgba(255,255,255,.7);
}
.view > .section-intro h2,
.purchase-return-area > .section-intro h2 { color:#fff; }
.view > .section-intro p,
.view > .section-intro .helper-text,
.purchase-return-area > .section-intro p { color:#d3e5f3; }
.view > .section-intro .primary-button,
.view > .section-intro .outline-button,
.purchase-return-area > .section-intro .primary-button,
.purchase-return-area > .section-intro .outline-button {
  color:#082c52;
  background:#dff2fc;
  border-color:#9acbe5;
}
.view > .section-intro .primary-button:hover,
.view > .section-intro .outline-button:hover,
.purchase-return-area > .section-intro .primary-button:hover,
.purchase-return-area > .section-intro .outline-button:hover { background:#c8e9f8; }

/* Notices are inserted at runtime by the finance/server module after login.
   Keep their light backgrounds paired with dark, readable text in every view. */
.finance-notice { color:#29465e; }
.finance-notice strong { color:#0b355b; }
.finance-notice.warning { color:#68420b; }
.finance-notice.warning strong { color:#563300; }

/* Membership cards are hidden for staff mode, so their former side-by-side
   grid must not reserve an empty track. Let the remaining panels use the full
   available width on desktop, tablet, and mobile. */
#membership .membership-grid { grid-template-columns:minmax(0,1fr); }
#membership .membership-grid > [hidden] { display:none!important; }
#membership .membership-grid > .data-card { width:100%; min-width:0; max-width:none; margin:0; }
#membership .membership-grid.preview-grid > .point-simulator { width:100%; }

/* Native selects and their menus use the approved light-blue treatment. */
select,
.form-grid select,
.report-filter select,
.full-field select,
.data-card select,
.cart-panel select,
.ops-form-card select {
  color:#082c52;
  background-color:var(--on-light-blue);
  border-color:#9acbe5;
  color-scheme:light;
}
select option { color:#082c52; background:#dff2fc; }

/* Role selector: keep a clear gap under its label and match the rounded,
   pale-blue controls used throughout the staff interface. */
#role-setting-select {
  box-sizing:border-box;
  display:block;
  width:min(100%, 360px);
  min-height:44px;
  margin-top:9px;
  padding:9px 38px 9px 12px;
  color:#082c52;
  border:1px solid #9acbe5;
  border-radius:11px!important;
  background-color:var(--on-light-blue);
  box-shadow:none;
  font:inherit;
  color-scheme:light;
}
#role-setting-select:focus-visible { outline:2px solid #69b8dd; outline-offset:2px; }

/* Outlet setup: use the available canvas instead of leaving wide gutters,
   keep the form dominant, and make the commission tools follow the same grid. */
#outlet > .ops-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,290px)!important;
  width:100%;
  max-width:none!important;
  margin:0 0 16px!important;
  gap:16px;
  align-items:start;
}
#outlet > .ops-layout > .ops-form-card {
  width:100%;
  min-width:0;
  padding:22px;
  color:#082c52;
  background:#fff;
  border-radius:16px;
}
#outlet .ops-form-card .card-heading { margin-bottom:18px; }
#outlet .ops-form-card .card-heading h3 { color:#082c52; }
#outlet .ops-form-card .card-heading p:not(.eyebrow) { color:#526e84; line-height:1.5; }
#outlet .ops-form-card .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
#outlet .ops-form-card .full-field { margin-top:4px; }
#outlet .ops-form-card .purchase-actions { padding-top:12px; }
#outlet > .ops-layout > .ops-summary-card {
  min-width:0;
  min-height:0;
  padding:20px;
  border-radius:16px;
}
#outlet > .ops-layout > .ops-summary-card .ops-icon { width:38px; height:38px; margin:7px 0; }
#outlet > .ops-layout > .ops-summary-card h3 { margin:5px 0; font-size:18px; line-height:1.3; }
#outlet > .ops-layout > .ops-summary-card > div { gap:12px; padding:10px 0; }
#outlet > .ops-layout > .ops-summary-card .ops-summary-note { margin-top:10px; line-height:1.45; }
#outlet > .ops-history { width:100%; max-width:none; margin:0 0 16px; border-radius:16px; }
#outlet .outlet-commission-layout {
  grid-template-columns:minmax(0,1fr) minmax(230px,290px);
  width:100%;
  max-width:none;
  margin:16px 0;
  gap:16px;
  align-items:start;
}
#outlet .outlet-commission-form,
#outlet .outlet-commission-preview {
  min-width:0;
  padding:20px;
  border-radius:16px;
}
#outlet .outlet-commission-form { color:#082c52; background:#fff; }
#outlet .outlet-commission-form h3 { color:#082c52; }
#outlet .outlet-commission-form .card-heading > div > p:not(.eyebrow) { color:#526e84; line-height:1.5; }
#outlet .outlet-commission-preview { color:#fff; }
#outlet .outlet-commission-preview h3 { color:#fff; }
#outlet .outlet-commission-preview > p,
#outlet .outlet-commission-preview > small,
#outlet .outlet-commission-preview span { color:#d7eaf6; }
#outlet .outlet-commission-simulator { width:100%; max-width:none; margin:16px 0; padding:20px; border-radius:16px; }
#outlet .outlet-commission-simulator .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#outlet > .ops-history:last-child { width:100%; max-width:none; margin:16px 0 0; }
@media(max-width:900px) {
  #outlet > .ops-layout,
  #outlet .outlet-commission-layout { grid-template-columns:minmax(0,1fr)!important; }
  #outlet > .ops-layout > .ops-summary-card { min-height:0; }
}
@media(max-width:620px) {
  #outlet > .ops-layout > .ops-form-card,
  #outlet .outlet-commission-form,
  #outlet .outlet-commission-preview,
  #outlet .outlet-commission-simulator { padding:15px; }
  #outlet .ops-form-card .form-grid,
  #outlet .outlet-commission-simulator .form-grid { grid-template-columns:minmax(0,1fr); }
}

/* Transaction search: give the search field the available width before refresh. */
#transaksi .transaction-search-card { margin:0 0 16px; padding:16px; }
#transaksi .transaction-search-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; }
#transaksi .transaction-search-toolbar label { display:grid; min-width:0; gap:7px; color:#082c52; font-weight:700; }
#transaksi #staff-transaction-search { display:block; width:100%; min-width:0; min-height:44px; padding:9px 13px; color:#082c52; background:#dff2fc; border:1px solid #9acbe5; border-radius:10px; outline-color:#0a4d88; box-shadow:none; }
#transaksi #staff-transaction-search::placeholder { color:#526e84; opacity:1; }
#transaksi #staff-transactions-refresh { min-height:44px; color:#082c52; background:#dff2fc; border:1px solid #9acbe5; border-radius:10px; box-shadow:none; }
#transaksi #staff-transactions-refresh:hover { background:#c8e9f8; }
#transaksi #staff-transactions-note { margin:12px 0 0; color:#526e84; }
@media(max-width:560px) { #transaksi .transaction-search-toolbar { grid-template-columns:minmax(0,1fr); } #transaksi #staff-transactions-refresh { width:100%; } }

/* Unify delete/trash actions in a clear red danger color across every module. */
.row-delete-button,
.danger-action,
.product-category-remove,
.mutation-saved-remove,
.delete-affiliate,
button[aria-label^="Hapus"],
button[data-remove-promo],
button[data-remove-mutation-line] {
  color:#c62828!important;
  font-variant-emoji:text;
}
.row-delete-button { border-color:#efb5b5!important; background:#fff1f1!important; }
.row-delete-button:disabled { color:#d66b6b!important; border-color:#f2d2d2!important; background:#fff7f7!important; }
.row-delete-button:hover:not(:disabled),
.danger-action:hover:not(:disabled),
.product-category-remove:hover:not(:disabled),
.mutation-saved-remove:hover:not(:disabled),
.delete-affiliate:hover:not(:disabled),
button[aria-label^="Hapus"]:hover:not(:disabled),
button[data-remove-promo]:hover:not(:disabled),
button[data-remove-mutation-line]:hover:not(:disabled) { color:#fff!important; border-color:#b71c1c!important; background:#c62828!important; }

/* Make every destructive rejection choice visibly distinct from approval. */
.reject,
button[data-waste-review="reject"],
button[data-void-review="reject"],
button[data-purchase-return-review="reject"],
button[data-cash-expense-review="reject"],
button[data-reject-order-action] {
  color:#fff!important;
  border:1px solid #b71c1c!important;
  border-radius:8px;
  background:#c62828!important;
  font-weight:750;
  box-shadow:none!important;
}
.reject:hover:not(:disabled),
button[data-waste-review="reject"]:hover:not(:disabled),
button[data-void-review="reject"]:hover:not(:disabled),
button[data-purchase-return-review="reject"]:hover:not(:disabled),
button[data-cash-expense-review="reject"]:hover:not(:disabled),
button[data-reject-order-action]:hover:not(:disabled) { color:#fff!important; background:#a91515!important; }
#purchase-return-stock-effect option[value="reject"] { color:#b71c1c; background:#fff0f0; }
#purchase-return-stock-effect:has(option:checked[value="reject"]) { color:#a91515; background:#fff0f0; border-color:#e6a0a0; }

.master-stock-placeholder { min-height:112px; padding:22px; }
.master-stock-placeholder h3 { margin:0 0 7px; color:#082c52; font-size:17px; }
.master-stock-placeholder p { margin:0; color:#526e84; line-height:1.5; }

/* Keep summary panels readable and reclaim space for the working form/table. */
.ops-layout { grid-template-columns:minmax(0,1fr) minmax(250px,280px)!important; max-width:none!important; width:100%; margin-right:0!important; margin-left:0!important; align-items:start; }
.ops-summary-card { min-width:0; padding:17px!important; }
.ops-summary-card h3,
.ops-summary-card #recipe-preview-name,
.ops-summary-card #production-preview-name,
.ops-summary-card #new-product-preview-name,
.ops-summary-card #outlet-preview-name { color:#fff!important; }
.ops-summary-card > p:not(.eyebrow) { overflow-wrap:anywhere; }
.ops-history,.delivery-note-action { max-width:none!important; width:100%; }
@media(max-width:1120px) { .ops-layout { grid-template-columns:minmax(0,1fr)!important; } }

/* Consistent rounded control treatment across modules (including recipe template and notes). */
:where(.view) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
:where(.view) select,
:where(.view) textarea {
  border-radius:10px!important;
}
:where(.view) textarea {
  padding:10px 12px;
}
:where(.view) .ops-form-card select,
:where(.view) .ops-form-card textarea,
:where(.view) .ops-form-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  border-color:#9acbe5;
}
:where(.view) .ops-form-card select,
:where(.view) .ops-form-card textarea {
  background-color:var(--on-light-blue);
}

/* Table-row action buttons (for example recipe “Ubah”) should not fall back to browser-gray squares. */
:where(.view) button { border-radius:10px; }
:where(.view) .ops-history button:not(.row-delete-button),
:where(.view) .recipe-builder-row button:not(.row-delete-button) {
  min-height:34px;
  padding:6px 11px;
  color:#082c52;
  border:1px solid #9acbe5;
  border-radius:10px;
  background:#dff2fc;
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
:where(.view) .ops-history button:not(.row-delete-button):hover,
:where(.view) .recipe-builder-row button:not(.row-delete-button):hover { background:#c8e9f8; }

@media(min-width:901px) {
  .ops-fieldset .repeat-head:has(+ #product-unit-rows),
  #product-unit-rows .product-unit-row {
    grid-template-columns:42px minmax(118px,1.25fr) minmax(92px,.85fr) minmax(105px,1fr) minmax(190px,1.7fr) minmax(96px,.9fr) 38px;
  }
  #product-unit-rows .unit-price-setting { grid-template-columns:minmax(112px,1fr) 76px; gap:7px; }
  #product-unit-rows .unit-price-setting select { min-width:112px; font-size:12px; }
}

/* Use a monochrome CSS-mask trash icon so the OS emoji glyph cannot stay blue. */
.row-delete-button,
.product-category-remove { font-size:0!important; }
.row-delete-button::before,
.product-category-remove::before {
  content:"";
  display:inline-block;
  flex:0 0 17px;
  width:17px;
  height:17px;
  background-color:#c62828;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m4 4v6m6-6v6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m4 4v6m6-6v6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.row-delete-button { display:inline-grid; place-items:center!important; align-items:center!important; justify-items:center!important; align-self:center; padding:0!important; line-height:0!important; }
.row-delete-button::before { grid-area:1/1; display:block; margin:auto; }
.waste-ledger .row-actions { width:100%; min-height:40px; align-items:center; justify-content:center; }
.waste-ledger .row-actions .row-delete-button { margin:0 auto; }
.row-delete-button:hover:not(:disabled)::before { background-color:#fff; }
.row-delete-button:disabled::before { background-color:#d66b6b; }
.product-category-remove { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.product-category-remove:hover:not(:disabled)::before { background-color:#fff; }

/* Approval decisions are intentionally large and separated to reduce mis-taps. */
.approval-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px!important; }
.approval-actions .approve,
.approval-actions button[data-approve-order-action],
.approval-actions button[data-purchase-action="approve"],
button[data-approve-waste],
button[data-approve-purchase-return],
button[data-waste-review="approve"],
button[data-void-review="approve"],
button[data-purchase-return-review="approve"],
button[data-cash-expense-review="approve"],
button[data-purchase-action="approve"] {
  min-width:132px;
  min-height:44px;
  padding:10px 14px;
  color:#fff!important;
  border:1px solid #16804a!important;
  border-radius:11px!important;
  background:#16804a!important;
  font-size:13px;
  font-weight:800;
  line-height:1.25;
  white-space:normal;
  box-shadow:none!important;
}
.approval-actions .approve:hover:not(:disabled),
button[data-approve-waste]:hover:not(:disabled),
button[data-approve-purchase-return]:hover:not(:disabled),
button[data-waste-review="approve"]:hover:not(:disabled),
button[data-void-review="approve"]:hover:not(:disabled),
button[data-purchase-return-review="approve"]:hover:not(:disabled),
button[data-cash-expense-review="approve"]:hover:not(:disabled),
button[data-purchase-action="approve"]:hover:not(:disabled) { background:#11683d!important; }
.approval-actions .reject,
.approval-actions button[data-reject-order-action],
button[data-waste-review="reject"],
button[data-void-review="reject"],
button[data-purchase-return-review="reject"],
button[data-cash-expense-review="reject"] {
  min-width:112px;
  min-height:44px;
  padding:10px 14px;
  color:#fff!important;
  border:1px solid #b71c1c!important;
  border-radius:11px!important;
  background:#c62828!important;
  font-size:13px;
  font-weight:800;
  line-height:1.25;
  white-space:normal;
  box-shadow:none!important;
}
.approval-actions .reject:hover:not(:disabled),
button[data-waste-review="reject"]:hover:not(:disabled),
button[data-void-review="reject"]:hover:not(:disabled),
button[data-purchase-return-review="reject"]:hover:not(:disabled),
button[data-cash-expense-review="reject"]:hover:not(:disabled) { background:#a91515!important; }
.row-actions:has(button[data-approve-waste]) { gap:12px!important; }
td:has(> button[data-waste-review]),
td:has(> button[data-void-review]),
td:has(> button[data-purchase-return-review]),
td:has(> button[data-cash-expense-review]) {
  min-width:250px;
  padding:12px 14px!important;
  text-align:center!important;
  vertical-align:middle;
}
td:has(> button[data-waste-review]) > button,
td:has(> button[data-void-review]) > button,
td:has(> button[data-purchase-return-review]) > button,
td:has(> button[data-cash-expense-review]) > button { margin:6px; }
.po-approval-item > button[data-purchase-action="approve"] { flex:0 0 auto; }
@media(max-width:700px) {
  .approval-actions { justify-content:stretch; gap:10px!important; }
  .approval-actions > button { flex:1 1 130px; }
  td:has(> button[data-waste-review]),td:has(> button[data-void-review]),td:has(> button[data-purchase-return-review]),td:has(> button[data-cash-expense-review]) { min-width:220px; }
}

/* Operational is separated by role-aware tabs; the cashier form uses the full content width. */
.operational-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; padding:7px; border:1px solid #2b567b; border-radius:14px; background:#0a365f; }
.operational-tabs[hidden] { display:none!important; }
.operational-tabs button { min-height:42px; padding:9px 16px; color:#d6e8f5; border:1px solid transparent; border-radius:11px; background:transparent; font:inherit; font-weight:800; cursor:pointer; }
.operational-tabs button[aria-selected="true"] { color:#082c52; border-color:#9acbe5; background:#dff2fc; }
.cash-expense-grid { grid-template-columns:minmax(0,1fr)!important; }
.cash-expense-form { width:100%; }
.cash-expense-presets { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:end; gap:10px; }
.cash-expense-presets label { display:grid; gap:6px; color:#526e84; font-size:12px; font-weight:750; }
.cash-expense-presets select { width:100%; min-height:40px; padding:8px 10px; color:#082c52; border:1px solid #9acbe5; border-radius:10px; background:#dff2fc; }
.cash-expense-presets button { min-height:40px; }
@media(max-width:560px) { .operational-tabs button { flex:1 1 100%; } .cash-expense-presets { grid-template-columns:minmax(0,1fr); } }

@media (max-width:760px) {
  .topbar { background:#fff; }
  .sidebar { background:#fff; }
}

/* Promo module: separate banner, promotion rules, and affiliate management into tabs. */
.promo-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 17px; padding:7px; border:1px solid #2b567b; border-radius:14px; background:#0a365f; }
.promo-tab-button { min-height:42px; padding:9px 17px; color:#d6e8f5; border:1px solid transparent; border-radius:11px; background:transparent; font:inherit; font-weight:800; cursor:pointer; }
.promo-tab-button.active { color:#082c52; border-color:#9acbe5; background:#dff2fc; }
.promo-tab-panel[hidden] { display:none!important; }
.promo-tab-panel { display:grid; gap:17px; min-width:0; }
.promo-tab-panel > .banner-settings-card,.promo-tab-panel > .promo-layout,.promo-tab-panel > .affiliate-layout,.promo-tab-panel > .affiliate-table,.promo-tab-panel > .promo-profit-card,.promo-tab-panel > .promo-history-card,.promo-tab-panel > .promo-simulator { margin-top:0; }
.banner-settings-card > .card-heading { align-items:center; gap:16px; }
.banner-settings-card > .card-heading > button { flex:0 0 auto; }
.promo-banner-spec { display:grid; gap:5px; margin-top:14px; padding:14px 16px; border:1px solid #c9e2f1; border-radius:12px; background:#eff8fd; color:#48677e; font-size:12px; line-height:1.5; }
.promo-banner-spec strong { color:#0b355b; font-size:13px; }
.promo-history-card { scroll-margin-top:90px; }
.promo-simulator { max-width:1250px; margin:0 auto 17px; padding:20px; }
.promo-sim-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.promo-sim-grid > section { min-width:0; padding:15px; border:1px solid #d6e5ef; border-radius:13px; background:#f7fbfe; }
.promo-sim-grid h4 { margin:0 0 8px; color:#0b355b; }
.promo-sim-grid section > small { display:block; margin-bottom:10px; color:#627e92; }
.promo-sim-options { display:grid; gap:8px; max-height:280px; overflow:auto; }
.promo-sim-options > label { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px; border:1px solid #d4e5ef; border-radius:10px; background:#fff; color:#183c59; }
.promo-sim-options > label:has([data-sim-promo]) { grid-template-columns:auto minmax(0,1fr); }
.promo-sim-options input[type="checkbox"] { width:18px; height:18px; accent-color:#0a568b; }
.promo-sim-options label span,.promo-sim-options label strong,.promo-sim-options label small { display:block; min-width:0; }
.promo-sim-options label strong { color:#153b5a; font-size:12px; }
.promo-sim-options label small { margin-top:3px; color:#688195; font-size:11px; }
.promo-sim-qty { width:72px; min-height:36px; padding:6px 8px; border:1px solid #b7d8e9; border-radius:9px; background:#e8f6fc; color:#0b355b; }
.promo-sim-empty { margin:0; color:#647d91; font-size:12px; }
.promo-simulator .purchase-actions { align-items:center; flex-wrap:wrap; gap:12px; }
#promo-sim-status { color:#536f83; font-size:12px; line-height:1.5; }
.promo-sim-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.promo-sim-summary > div { display:grid; gap:6px; padding:13px; border:1px solid #d4e5ef; border-radius:11px; background:#f5faff; }
.promo-sim-summary small { color:#617b8f; font-size:11px; }
.promo-sim-summary strong { color:#0b355b; font-size:17px; }
.customer-crm-table .crm-view-button { min-width:68px; min-height:38px; padding:8px 14px; border:1px solid #9acbe5; border-radius:10px; background:#dff2fc; color:#0b355b; font:inherit; font-weight:800; cursor:pointer; transition:background .15s ease,transform .15s ease; }
.customer-crm-table .crm-view-button:hover,.customer-crm-table .crm-view-button:focus-visible { background:#c7eafa; outline:2px solid #76b8d7; outline-offset:2px; }
.customer-crm-table .crm-view-button[aria-pressed="true"] { border-color:#0b4b7c; background:#0b4b7c; color:#fff; }
@media(max-width:600px) { .promo-tabs { gap:6px; } .promo-tab-button { flex:1 1 100%; text-align:left; } .banner-settings-card > .card-heading { align-items:flex-start; flex-direction:column; } }
@media(max-width:760px) { .promo-sim-grid { grid-template-columns:1fr; } .promo-sim-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Kasir: member actions inline, search and recommendations share one rounded surface. */
#kasir .customer-actions-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:9px; margin:10px 0 13px; }
#kasir .customer-actions-row:not(.has-member) { grid-template-columns:minmax(0,1fr); }
#kasir .customer-actions-row:not(.has-member) .member-inline-actions { display:none; }
#kasir .customer-actions-row .customer-select { min-width:0; margin:0; min-height:56px; border-radius:12px; }
#kasir .member-inline-actions { display:flex; align-items:stretch; gap:8px; }
#kasir .member-inline-actions > button { min-height:56px; padding:9px 14px; border-radius:12px; white-space:nowrap; }
#kasir .member-inline-actions .point-purchase-button { border:1px solid #9acbe5; background:#dff2fc; color:#0b355b; font:inherit; font-weight:800; cursor:pointer; }
#kasir .member-inline-actions > [hidden],.cashier-shift-button[hidden],.cashier-pending-orders-button[hidden] { display:none!important; }
#kasir .cashier-discovery { display:grid; gap:8px; margin:10px 0 12px; padding:8px; border:1px solid #9acbe5; border-radius:14px; background:#dff2fc; }
#kasir .cashier-discovery .cashier-marketing { margin:0; border:0; border-radius:10px; background:transparent; color:#0b355b; }
#kasir .cashier-discovery .cashier-marketing[hidden] { display:none!important; }
#kasir .cashier-discovery .cashier-marketing > summary { min-height:36px; padding:8px 11px; border:1px solid #b9deef; border-radius:9px; background:#eff8fd; color:#0b355b; font-weight:750; }
#kasir .cashier-discovery .cashier-marketing-body { padding:8px 11px 4px; }
#kasir .cashier-discovery .search-box { min-height:44px; margin:0; border:1px solid #b8d8e8; border-radius:10px; background:#fff; box-shadow:none; }
#kasir .cashier-discovery .search-box:focus-within { border-color:#3186b2; outline:2px solid #9bd5ed; outline-offset:1px; }
#kasir .cashier-order-tabs { align-items:center; }
#kasir .cashier-pending-orders-button { flex:0 0 auto; min-height:42px; padding:9px 14px; border:1px solid #a92332; border-radius:11px; background:#c83242; color:#fff; font:inherit; font-weight:800; white-space:nowrap; cursor:pointer; }
#kasir .cashier-pending-orders-button:hover,#kasir .cashier-pending-orders-button:focus-visible { background:#a92332; outline:2px solid #f2aab2; outline-offset:2px; }
.topbar-actions .cashier-shift-button { min-height:38px; padding:8px 13px; border:1px solid #9acbe5; border-radius:11px; background:#dff2fc; color:#0b355b; font:inherit; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; }
@media(max-width:760px) { #kasir .customer-actions-row { grid-template-columns:minmax(0,1fr); } #kasir .member-inline-actions > button { flex:1; min-height:44px; } .topbar-actions .cashier-shift-button { padding:7px 9px; font-size:11px; } }
@media(max-width:420px) { #kasir .member-inline-actions { gap:6px; } #kasir .member-inline-actions > button { padding:8px 9px; font-size:11px; } }

.finance-profit-loss[hidden] { display:none!important; }
.finance-profit-loss { margin:17px 0; }
.finance-profit-loss .card-heading { align-items:flex-start; gap:14px; }
.finance-pnl-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 16px; }
.finance-pnl-metrics > article { display:grid; gap:6px; min-width:0; padding:14px; border:1px solid #cfe1eb; border-radius:12px; background:#f4faff; }
.finance-pnl-metrics small { color:#60798d; font-size:11px; font-weight:750; }
.finance-pnl-metrics strong { color:#0b355b; font-size:18px; overflow-wrap:anywhere; }
.finance-pnl-metrics p { margin:0; color:#6a8091; font-size:11px; line-height:1.45; }
#finance-pnl-warnings { margin:10px 0; line-height:1.5; }
#finance-pnl-warnings ul { margin:8px 0 0; padding-left:20px; }
#finance-pnl-warnings li { margin:4px 0; }
#finance-pnl-total td { padding:12px 8px; border-top:2px solid #9acbe5; font-weight:850; }
@media(max-width:760px) { .finance-pnl-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .finance-profit-loss .card-heading { flex-direction:column; } }
@media(max-width:460px) { .finance-pnl-metrics { grid-template-columns:1fr; } }