/* ==========================================================================
   Brand bridge — maps the --brand-* contract (brands/<name>/theme.css) onto the
   variables and Bootstrap classes the POS already uses. Loaded AFTER app.css and
   modern.css. Do not put brand values here.
   ========================================================================== */

:root {
    /* Derived shades */
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 82%, black);
    --brand-primary-light: color-mix(in srgb, var(--brand-primary) 55%, white);
    --brand-primary-tint:  color-mix(in srgb, var(--brand-primary) 12%, white);

    /* modern.css names */
    --primary-color:   var(--brand-primary);
    --primary-hover:   var(--brand-primary-hover);
    --primary-light:   var(--brand-primary-light);
    --accent-color:    var(--brand-secondary);
    --success-color:   var(--brand-ok);
    --success-hover:   color-mix(in srgb, var(--brand-ok) 82%, black);
    --warning-color:   var(--brand-warn);
    --warning-hover:   color-mix(in srgb, var(--brand-warn) 88%, white);
    --danger-color:    var(--brand-danger);
    --danger-hover:    color-mix(in srgb, var(--brand-danger) 82%, black);
    --info-color:      var(--brand-info);
    --info-hover:      color-mix(in srgb, var(--brand-info) 82%, black);
    --bg-primary:      var(--brand-surface, #fff);
    --bg-secondary:    var(--brand-paper);
    --bg-tertiary:     var(--brand-paper-2);
    --text-primary:    var(--brand-ink);
    --text-secondary:  var(--brand-muted);
    --border-color:    var(--brand-border);
    --radius-sm:       var(--brand-radius-sm);
    --radius-md:       var(--brand-radius-md);
    --radius-lg:       var(--brand-radius-lg);
    --shadow-md:       0 4px 6px -1px rgba(var(--brand-shadow-color), .12), 0 2px 4px -1px rgba(var(--brand-shadow-color), .08);
    --shadow-lg:       0 10px 15px -3px rgba(var(--brand-shadow-color), .14), 0 4px 6px -2px rgba(var(--brand-shadow-color), .06);

    /* app.css names */
    --neutral-light:   var(--brand-paper);
    --neutral-medium:  var(--brand-paper-2);
    --neutral-dark:    var(--brand-ink);
    --accent-gold:     var(--brand-secondary);
    --accent-green:    var(--brand-ok);

    /* Bootstrap 5 */
    --bs-primary:        var(--brand-primary);
    --bs-primary-dark:   var(--brand-primary-hover);
    --bs-primary-light:  var(--brand-primary-light);
    --bs-primary-rgb:    var(--brand-primary-rgb);
    --bs-success:        var(--brand-ok);
    --bs-warning:        var(--brand-warn);
    --bs-danger:         var(--brand-danger);
    --bs-info:           var(--brand-info);
    --bs-light:          var(--brand-paper);
    --bs-dark:           var(--brand-ink);
    --bs-body-bg:        var(--brand-paper);
    --bs-body-color:     var(--brand-ink);
    --bs-body-font-family: var(--brand-font-body);
    --bs-success-rgb:    var(--brand-ok-rgb);
    --bs-warning-rgb:    var(--brand-warn-rgb);
    --bs-danger-rgb:     var(--brand-danger-rgb);
    --bs-info-rgb:       var(--brand-info-rgb);
    --bs-link-color:     var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-hover);
}

html, body {
    font-family: var(--brand-font-body);
    background: var(--brand-paper);
    color: var(--brand-ink);
}

h1, h2, h3, .pos-brand {
    font-family: var(--brand-font-display);
}

/* Bootstrap buttons: use brand text colours (gold needs dark text) */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary-hover);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-color: var(--brand-on-primary);
    --bs-btn-hover-color: var(--brand-on-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    color: var(--brand-on-primary);
    border-color: var(--brand-primary-hover);
}

.btn-warning,
.btn-warning:hover {
    color: var(--brand-on-secondary);
}

.btn-primary:focus,
.btn-primary:active,
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

/* Sidebar chrome */
.pos-sidebar {
    background: var(--brand-chrome);
    color: var(--brand-on-chrome);
}

/* ==========================================================================
   Syncfusion (bootstrap5 theme) — recolour primary interactions to the brand.
   ========================================================================== */

.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary-hover);
    color: var(--brand-on-primary);
}

.e-btn.e-primary:hover,
.e-btn.e-primary:focus,
.e-btn.e-primary:active {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--brand-on-primary);
}

.e-input-group.e-control-wrapper.e-input-focus,
.e-input-group:not(.e-float-icon-left):not(.e-float-input).e-control-wrapper.e-input-focus,
.e-float-input.e-control-wrapper.e-input-focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

.e-checkbox-wrapper .e-frame.e-check,
.e-radio:checked + label::before,
.e-switch-wrapper .e-switch-on,
.e-switch-wrapper:hover .e-switch-on {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

.e-grid .e-headercell,
.e-grid .e-gridheader {
    background-color: var(--brand-paper-2);
    color: var(--brand-ink);
}

.e-grid .e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active) {
    background-color: var(--brand-primary-tint);
}

.e-grid .e-rowcell.e-selectionbackground,
.e-grid .e-row .e-selectionbackground,
.e-dropdownbase .e-list-item.e-active,
.e-popup.e-popup-open .e-list-item.e-active,
.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-selected:hover span.e-day {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

.e-dropdownbase .e-list-item.e-item-focus,
.e-dropdownbase .e-list-item:hover,
.e-popup.e-popup-open .e-list-item:hover {
    background-color: var(--brand-primary-tint);
    color: var(--brand-ink);
}

.e-calendar .e-content td.e-today span.e-day {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.e-dialog .e-dlg-header-content {
    background-color: var(--brand-card);
    color: var(--brand-ink);
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

/* Info alerts: tint of the brand info colour instead of Bootstrap cyan */
.alert-info {
    --bs-alert-bg: color-mix(in srgb, var(--brand-info) 10%, white);
    --bs-alert-border-color: color-mix(in srgb, var(--brand-info) 30%, white);
    --bs-alert-color: color-mix(in srgb, var(--brand-info) 70%, black);
}

/* Bootstrap component variants compiled with fixed colours */
.btn-success, .btn-outline-success:hover {
    --bs-btn-bg: var(--brand-ok);
    --bs-btn-border-color: var(--brand-ok);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-ok) 82%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-ok) 82%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--brand-ok) 82%, black);
}
.btn-outline-success {
    --bs-btn-color: var(--brand-ok);
    --bs-btn-border-color: var(--brand-ok);
    --bs-btn-hover-bg: var(--brand-ok);
    --bs-btn-hover-border-color: var(--brand-ok);
    --bs-btn-active-bg: var(--brand-ok);
}
.btn-outline-danger {
    --bs-btn-color: var(--brand-danger);
    --bs-btn-border-color: var(--brand-danger);
    --bs-btn-hover-bg: var(--brand-danger);
    --bs-btn-hover-border-color: var(--brand-danger);
    --bs-btn-active-bg: var(--brand-danger);
}
.btn-danger {
    --bs-btn-bg: var(--brand-danger);
    --bs-btn-border-color: var(--brand-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-danger) 82%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-danger) 82%, black);
}
.text-success { color: var(--brand-ok) !important; }
.text-danger  { color: var(--brand-danger) !important; }
.text-primary { color: var(--brand-primary) !important; }
.bg-primary   { background-color: var(--brand-primary) !important; color: var(--brand-on-primary); }
.bg-success   { background-color: var(--brand-ok) !important; }
.bg-danger    { background-color: var(--brand-danger) !important; }
.border-primary { border-color: var(--brand-primary) !important; }

/* Cards/tiles use --brand-card (cream); inputs and overlays stay on --brand-surface */
.form-control, .form-select, .modal-content, .dropdown-menu, .e-popup, .e-input-group, .e-dialog {
    background-color: var(--brand-surface, #fff);
}

/* Cards and list rows are cream (--brand-card); the page itself stays white */
.card,
.list-group-item {
    --bs-card-bg: var(--brand-card);
    --bs-list-group-bg: var(--brand-card);
    background-color: var(--brand-card);
}

/* Info badges: soft tint with dark brand-info text (the solid info colour is dark in this brand) */
.badge.bg-info {
    background-color: color-mix(in srgb, var(--brand-info) 16%, white) !important;
    color: color-mix(in srgb, var(--brand-info) 80%, black) !important;
}

/* Payment type tiles (Cash / Card / Split) share one look: cream tile, green border and text,
   filled green on hover. (modern.css gives every tile a white gradient, which hid the white
   label of the btn-primary ones.) */
.btn-payment-type,
.btn-payment-type.btn-primary,
.btn-payment-type.btn-outline-primary {
    background: var(--brand-card);
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
}

.btn-payment-type:hover:not(:disabled),
.btn-payment-type:focus-visible,
.btn-payment-type.btn-primary:hover,
.btn-payment-type.btn-outline-primary:hover:not(:disabled) {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}