/* 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: #DDFF2A;
  --color-action-hover: #CFF214;
  --color-action-pressed: #C1E30F;
  --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: #F0FFB3;
  --color-info: #2D4BFF;
  --color-info-bg: #EEF2FF;
  --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; --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; }
/* "Heritage" keeps the original Malvern oxblood and butter for shops that prefer a warmer, traditional look. */
html[data-brand="heritage"] { --brand-primary: #F9D96B; --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, #DDFF2A); 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: #DDFF2A; 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: #DDFF2A; }
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, #DDFF2A), 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, #DDFF2A); }
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, rgba(221, 255, 42, .16) 0%, rgba(221, 255, 42, 0) 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: #DDFF2A; }
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 rgba(221, 255, 42, .65); 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: #000000; background: #DDFF2A; 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, #DDFF2A); }
}

/* ---- Shared surfaces every interface style starts from ---- */
html[data-ui] .pay-button.cash { color: #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, rgba(221, 255, 42, .7)); 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: #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: #000000; 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; }