/* Malvern POS branding module: base brand layer (all interface styles).
   Fonts, the four brand palettes, the shell (splash, header, sign-in), the active nav colour and the
   shared dialog base. Interface-style specifics live in direction-<id>.css, loaded one at a time by
   manifest.js. The core app stylesheets never reference a direction. */
@font-face { font-family: "Geist"; src: url("../../assets/brand/Brand%20Pack/fonts/Geist-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../../assets/brand/Brand%20Pack/fonts/GeistMono-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

/* ---- brand palettes ---- */
html[data-brand="malvern"], html[data-brand="malvern-cobalt"], html[data-brand="mono"] {
  --malverns-ink: #08080A;
  --color-brand: #08080A;
  --color-brand-hover: #26262B;
  --color-action: #2D4BFF;
  --color-action-hover: #2440E6;
  --color-action-pressed: #1C33C2;
  --color-on-action: #FFFFFF;
  --color-action-soft: #94AFFF;
  --color-canvas: #F4F4F6;
  --color-text: #08080A;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #EEEEF1;
  --color-text-muted: #55555D;
  --color-border: #E3E3E8;
  --color-control-border: #CBCBD2;
  --color-selected: #E8EDFF;
  --color-selected-strong: #D6DFFF;
  --color-info: #2D4BFF;
  --color-info-bg: #EEF2FF;
  --brand-primary: #2D4BFF;
  --brand-on-primary: #FFFFFF;
  --brand-accent: #2D4BFF;
}
/* The app's accent is Cobalt (October 2026). "Volt" keeps the earlier green accent for shops that chose it. */
html[data-brand="malvern-volt"] {
  --malverns-ink: #08080A; --color-brand: #08080A; --color-brand-hover: #26262B; --color-canvas: #F4F4F6; --color-text: #08080A; --color-surface: #FFFFFF; --color-surface-subtle: #EEEEF1; --color-text-muted: #55555D; --color-border: #E3E3E8; --color-control-border: #CBCBD2; --color-info: #2D4BFF; --color-info-bg: #EEF2FF;
  --color-action: #DDFF2A; --color-action-hover: #CFF214; --color-action-pressed: #C1E30F; --color-on-action: #000000; --color-action-soft: #DDFF2A;
  --color-selected: #F0FFB3; --color-selected-strong: #E8FF75; --brand-primary: #DDFF2A; --brand-on-primary: #000000; --brand-accent: #2D4BFF;
}
html[data-brand="malvern-cobalt"] { --brand-primary: #2D4BFF; --brand-on-primary: #FFFFFF; --color-selected: #E0E8FF; }
html[data-brand="mono"] { --color-action: #08080A; --color-action-hover: #26262B; --color-action-pressed: #000; --color-on-action: #FFFFFF; --color-action-soft: #FFFFFF; --brand-primary: #08080A; --brand-on-primary: #FFFFFF; --color-selected: #E3E3E8; --color-text-muted: #3A3A40; }
html[data-brand="mono"] .pay-button.cash, html[data-brand="mono"] .login-submit, html[data-brand="mono"] .osk-key.enter { color: #FFFFFF !important; }
/* Preserve the stored Heritage choice while retiring its legacy yellow highlight. */
html[data-brand="heritage"] { --brand-primary: var(--mp-brand-volt); --brand-on-primary: #1E1A1C; --brand-accent: #47262D; }
html[data-brand]:not([data-brand="heritage"]) body { font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
html[data-brand]:not([data-brand="heritage"]) :is(#total, .product-price, .line-total, .basket-line strong, #subtotal) { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---- active side-nav item uses the direction's primary colour (icon + label, never colour alone) ---- */
html[data-ui] .nav-btn.active,
html[data-ui] .nav-btn.active:hover { color: var(--brand-on-primary, #000); background: var(--brand-primary, #2D4BFF); font-weight: 700; }
html[data-ui] .nav-btn.active .ui-icon { color: currentColor; }
html[data-ui] .nav-section-label { color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---- Malvern POS shell: start-up splash, header and sign-in (all palettes except Heritage) ---- */
html[data-brand]:not([data-brand="heritage"]) .startup-screen { background: #08080A; color: #FFFFFF; }
html[data-brand]:not([data-brand="heritage"]) .startup-aurora span:nth-child(1) { background: #2D4BFF; opacity: .2; }
html[data-brand]:not([data-brand="heritage"]) .startup-aurora span:nth-child(2) { background: var(--color-action); opacity: .14; }
html[data-brand]:not([data-brand="heritage"]) .startup-aurora span:nth-child(3) { background: #1D1D21; opacity: .7; }
html[data-brand]:not([data-brand="heritage"]) .startup-halo { display: none; }
html[data-brand]:not([data-brand="heritage"]) .startup-logo { width: min(520px, 78vw); height: auto; filter: none; }
html[data-brand]:not([data-brand="heritage"]) .startup-rule { background: var(--color-action); }
html[data-brand]:not([data-brand="heritage"]) :is(.startup-content h1, #startupStatus, .startup-footer, .startup-steps li) { color: #FFFFFF; opacity: 1; }
html[data-brand]:not([data-brand="heritage"]) .topbar { background: #08080A; box-shadow: inset 0 -3px 0 var(--brand-primary, #2D4BFF), 0 6px 18px rgba(0, 0, 0, .12); }
html[data-brand]:not([data-brand="heritage"]) .brand-zone { border-right-color: #26262B; }
html[data-brand]:not([data-brand="heritage"]) .brand-zone .brand-logo { max-width: 168px; margin: 0 auto; }

html[data-brand]:not([data-brand="heritage"]) #loginDialog { background: #FFFFFF; }
html[data-brand]:not([data-brand="heritage"]) .login-brand-panel { color: #FFFFFF; background: #08080A; box-shadow: inset -4px 0 0 var(--brand-primary, #2D4BFF); }
html[data-brand]:not([data-brand="heritage"]) .login-brand-panel::after { top: auto; bottom: -12%; right: -18%; width: 78%; background: url("../../assets/brand/Brand%20Pack/icon/malvern-pos-symbol-white.svg") no-repeat center / contain; filter: none; opacity: .06; }
html[data-brand]:not([data-brand="heritage"]) .login-brand-glow { background: radial-gradient(circle, color-mix(in srgb, var(--color-action) 22%, transparent) 0%, transparent 62%); }
html[data-brand]:not([data-brand="heritage"]) .login-brand-logo { width: clamp(260px, 24vw, 360px); }
html[data-brand]:not([data-brand="heritage"]) .login-clock-time { color: #FFFFFF; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; letter-spacing: -.06em; }
html[data-brand]:not([data-brand="heritage"]) .login-clock-date { color: #FFFFFF; }
html[data-brand]:not([data-brand="heritage"]) #loginStoreName { color: var(--color-action-soft, #94AFFF); }
html[data-brand]:not([data-brand="heritage"]) .login-status li { color: #FFFFFF; border-color: #3A3A40; background: #141417; }
html[data-brand]:not([data-brand="heritage"]) .login-status [data-state="connected"] i,
html[data-brand]:not([data-brand="heritage"]) .login-status [data-state="synced"] i,
html[data-brand]:not([data-brand="heritage"]) .login-status [data-state="online"] i { background: #3DD68C; box-shadow: 0 0 0 3px rgba(61, 214, 140, .2); }
html[data-brand]:not([data-brand="heritage"]) .login-brand-foot { color: #FFFFFF; }
html[data-brand]:not([data-brand="heritage"]) .login-form-panel { background: #FFFFFF; }
html[data-brand]:not([data-brand="heritage"]) .login-form-content h1 { font-size: 32px; letter-spacing: -.035em; }
html[data-brand]:not([data-brand="heritage"]) .login-field input[type="password"] { border: 2px solid #CBCBD2; border-radius: 14px; color: #08080A; }
html[data-brand]:not([data-brand="heritage"]) .login-field :is(input, select):focus { border-color: #08080A; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-action) 45%, transparent); outline: none; }
html[data-brand]:not([data-brand="heritage"]) .login-keypad { border: 1px solid #E3E3E8; border-radius: 20px; background: #F4F4F6; box-shadow: none; }
html[data-brand]:not([data-brand="heritage"]) .login-keypad button { border-radius: 14px; color: #08080A; background: #FFFFFF; box-shadow: 0 1px 0 #CBCBD2, inset 0 0 0 1px #E3E3E8; font-family: "Geist Mono", ui-monospace, monospace; }
html[data-brand]:not([data-brand="heritage"]) .login-keypad button:active,
html[data-brand]:not([data-brand="heritage"]) .login-keypad button.down { color: var(--color-on-action, #000); background: var(--color-action); box-shadow: none; }
html[data-brand]:not([data-brand="heritage"]) .login-keypad button[data-keypad="clear"],
html[data-brand]:not([data-brand="heritage"]) .login-keypad button[data-keypad="backspace"] { color: #08080A; background: #E3E3E8; font-family: "Geist", sans-serif; }
html[data-brand]:not([data-brand="heritage"]) .login-keypad button[data-keypad="clear"]:active,
html[data-brand]:not([data-brand="heritage"]) .login-keypad button[data-keypad="backspace"]:active { color: #FFFFFF; background: #08080A; }
html[data-brand]:not([data-brand="heritage"]) .login-submit { border-radius: 14px; min-height: 60px; font-size: 17px; }
@media (max-width: 979px) {
  html[data-brand]:not([data-brand="heritage"]) .login-brand-panel { box-shadow: inset 0 -3px 0 var(--brand-primary, #2D4BFF); }
}

/* ---- Shared surfaces every interface style starts from ---- */
html[data-ui] .pay-button.cash { color: var(--color-on-action, #000); background: var(--color-action); border-color: var(--color-action); }
html[data-ui] .pay-button.card { color: #08080A; background: #FFFFFF; border: 2px solid #08080A; }
html[data-ui] #productList .product-tile { box-shadow: none; }
html[data-ui] #checkoutCategories .category-filter[aria-pressed="true"] { color: #FFFFFF; background: #08080A; border-color: #08080A; box-shadow: none; }

/* ---- Every dialog: shared base (each direction file adds its own frame) ---- */
html[data-ui] dialog:not(#loginDialog)::backdrop { background: rgba(8, 8, 10, .55); }
html[data-ui] dialog:not(#loginDialog) { color: var(--color-text); }
html[data-ui] dialog:not(#loginDialog) :is(.dialog-heading, .rd-head) { border-bottom: 1px solid var(--color-border); }
html[data-ui] dialog:not(#loginDialog) :is(.dialog-heading, .rd-head) h2 { letter-spacing: -.03em; }
html[data-ui] dialog:not(#loginDialog) .button.primary { color: #FFFFFF; background: #08080A; border-color: #08080A; }
html[data-ui] dialog:not(#loginDialog) .button.secondary { color: #08080A; background: #FFFFFF; border: 1.5px solid #CBCBD2; }
html[data-ui] dialog:not(#loginDialog) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { border-color: #08080A; box-shadow: 0 0 0 3px var(--dialog-focus, color-mix(in srgb, var(--color-action) 40%, transparent)); outline: none; }
html[data-ui] dialog:not(#loginDialog) .rd-option[aria-checked="true"], html[data-ui] dialog:not(#loginDialog) .rd-option[aria-pressed="true"] { border-color: #08080A; box-shadow: inset 0 0 0 1px #08080A; background: var(--color-selected); }
html[data-ui] dialog:not(#loginDialog) .rd-switch input:checked + span::before, html[data-ui] dialog:not(#loginDialog) .rd-switch input:checked { accent-color: #08080A; }
html[data-ui] dialog:not(#loginDialog) [data-receipt-choice].active { color: var(--color-on-action, #000); background: var(--color-action); border-color: var(--color-action); }

/* ---- Card payment: "Approved, complete sale" uses the brand action colour (Volt), not success green ---- */
html[data-brand]:not([data-brand="heritage"]) .rd-foot .card-action { color: var(--color-on-action, #000); background: var(--color-action); border-color: var(--color-action); }
html[data-brand]:not([data-brand="heritage"]) .rd-foot .card-action:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
html[data-brand]:not([data-brand="heritage"]) .rd-foot .card-action:active { background: var(--color-action-pressed); }
html[data-brand="mono"] .rd-foot .card-action { color: #FFFFFF; }

/* ---- Start-up splash, October 2026: black ground, white lockup, a three-step Volt progress rail ---- */
html[data-brand]:not([data-brand="heritage"]) .startup-screen { display: grid; place-items: center; background: #08080A; }
html[data-brand]:not([data-brand="heritage"]) :is(.startup-aurora, .startup-halo, .startup-rule) { display: none; }
html[data-brand]:not([data-brand="heritage"]) .startup-content { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: min(560px, 84vw); text-align: left; animation: mp-splash-in 320ms cubic-bezier(.2, 0, 0, 1) both; }
html[data-brand]:not([data-brand="heritage"]) .startup-logo { width: min(340px, 64vw); height: auto; margin: 0 0 48px; filter: none; }
html[data-brand]:not([data-brand="heritage"]) .startup-content h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; animation: none; }
html[data-brand]:not([data-brand="heritage"]) #startupStatus { min-height: 1.5em; margin: 14px 0 28px; font: 500 14px/1.5 "Geist Mono", ui-monospace, monospace; letter-spacing: .02em; animation: none; }
html[data-brand]:not([data-brand="heritage"]) .startup-steps { order: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 12px 0 0; animation: none; font: 500 11.5px "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
html[data-brand]:not([data-brand="heritage"]) .startup-steps li { opacity: .55; }
html[data-brand]:not([data-brand="heritage"]) .startup-steps li::before { display: none; }
html[data-brand]:not([data-brand="heritage"]) .startup-steps li:is(.active, .done) { opacity: 1; }
html[data-brand]:not([data-brand="heritage"]) .startup-steps li.done::after { content: " ✓"; color: var(--color-action-soft, #94AFFF); }
html[data-brand]:not([data-brand="heritage"]) .startup-progress { order: 4; position: relative; width: 100%; height: 4px; overflow: hidden; border-radius: 2px; background: #26262B; }
html[data-brand]:not([data-brand="heritage"]) .startup-progress span { display: block; height: 100%; background: var(--color-action); box-shadow: none; border-radius: 2px; }
html[data-brand]:not([data-brand="heritage"]) #retryStartupBtn { order: 6; margin-top: 24px; }
html[data-brand]:not([data-brand="heritage"]) .startup-footer { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); font: 500 11.5px "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; color: #FFFFFF; opacity: 1; }
@keyframes mp-splash-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { html[data-brand] .startup-content { animation: none; } }

/* ---- "Just added" feedback in the basket and in record lists: the brand accent, never the old butter ---- */
html[data-brand]:not([data-brand="heritage"]) .basket-panel .basket-line.just-changed { animation: mp-line-flash 1.4s cubic-bezier(.2, 0, 0, 1); }
html[data-brand]:not([data-brand="heritage"]) .rd-row.rd-flash td { animation: mp-row-flash 1.6s cubic-bezier(.2, 0, 0, 1); }
@keyframes mp-line-flash { 0%, 35% { background: var(--color-selected, #E8EDFF); box-shadow: inset 4px 0 0 var(--brand-primary, #2D4BFF); } 100% { background: transparent; box-shadow: inset 4px 0 0 transparent; } }
@keyframes mp-row-flash { 0%, 40% { background: var(--color-selected, #E8EDFF); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  html[data-brand]:not([data-brand="heritage"]) .basket-panel .basket-line.just-changed { animation: none; background: var(--color-selected, #E8EDFF); }
  html[data-brand]:not([data-brand="heritage"]) .rd-row.rd-flash td { animation: none; background: var(--color-selected, #E8EDFF); }
}

/* ---- Text on the accent: every control filled with the accent uses --color-on-action (white on Cobalt, black on Volt) ---- */
html[data-brand]:not([data-brand="heritage"]) :is(.pay-button.cash, .login-submit, .login-keypad button:active, .login-keypad button.down, .osk-key.enter, .osk-key.down, .fp-btn:active:not(:disabled), #reportsView .metric-primary .metric-icon, .mgmt-view .ranked-product:first-child .rank-number, .segment-count.has-items, .view-segments button[aria-selected="true"] .segment-count, .step-number, #ticketsView .ticket-print-btn, .receipt-bar-btn[data-sale-receipt="print"].active, #checkoutCategories .category-filter[aria-pressed="true"] .cat-count, .category-picker-tile[aria-pressed="true"] .cat-count, .qty-pad-keys button:active, .rd-foot .cash-action:hover) { color: var(--color-on-action, #000) !important; }
html[data-brand]:not([data-brand="heritage"]) .osk-key.enter { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-action-pressed) 70%, #000), 0 3px 8px rgba(8, 8, 10, .12); }
/* Warnings stay amber: they never borrow the accent. */
html[data-brand]:not([data-brand="heritage"]) :is(.button.warning, .toast.warning) { color: var(--color-warning); background: var(--color-warning-bg); }
html[data-brand]:not([data-brand="heritage"]) body.trade-pricing .price-list-field select { background: var(--color-action); color: var(--color-on-action, #000); border-color: var(--color-action); }

/* Volt from the supplied Brand Pack replaces legacy warm hover feedback. */
html[data-brand] .nav-btn:not(.active):hover,
html[data-brand] #productList .product-tile:hover {
  color: var(--mp-text-primary);
  background: var(--mp-volt-50);
  border-color: var(--mp-volt-400);
}
/* Both icon weights share the semantic renderer adapter. */
.ph-icon .ph-fill { display: none; }
.nav-btn.active .ph-icon .ph-fill { display: initial; }
.nav-btn.active .ph-icon .ph-regular { display: none; }
html:not(:is([data-ui="original"], [data-ui="reference"])) :is(.variant-rail-brand,.variant-rail-scroll,.variant-payment-actions,#variantSaleActions,.variant-sale-context,.variant-close-basket,.variant-mobile-nav) { display: none !important; }