@font-face {
    font-family: 'Nunito';
    src: url('/control/assets/fonts/Nunito-Variable.ttf') format('truetype');
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
}

:root {
    --control-vatukka: #5b214e;
    --control-tyrni: #fdbc57;
    --control-aamumaito: #f3e9db;
    --control-vispi: #e6c7d6;
    --control-lakritsi: #231f20;
    --control-background: #faf7f2;
    --control-border: rgba(91, 33, 78, .35);
    --control-danger: #a52b36;
    --control-save: #276749;
}

body.control-page {
    /* Also cover Bootstrap's body.bg-light utility and older page backgrounds. */
    background: var(--control-background) !important;
    color: var(--control-lakritsi);
    font-family: 'Nunito', sans-serif;
    --primary-color: var(--control-vatukka);
}

.control-page :is(h1, h2, .modal-title) { color: var(--control-vatukka); font-weight: 800; }
.control-page .btn {
    min-height: 44px;
    padding: 9px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.5;
}
.control-page :is(.btn-sm, .btn-group-sm > .btn, .input-group-sm > .btn) {
    min-height: 36px;
    padding: 5px 10px;
    font-size: .875rem;
}

/* Existing action classes retain their behavior and disabled/selected states. */
.control-page .btn:where(:not([class*="product-button-"])) {
    --bs-btn-color: var(--control-vatukka);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--control-border);
    --bs-btn-hover-color: var(--control-vatukka);
    --bs-btn-hover-bg: var(--control-vispi);
    --bs-btn-hover-border-color: var(--control-vatukka);
    --bs-btn-active-color: var(--control-vatukka);
    --bs-btn-active-bg: var(--control-vispi);
    --bs-btn-active-border-color: var(--control-vatukka);
    --bs-btn-disabled-color: var(--control-lakritsi);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--control-border);
    --bs-btn-focus-shadow-rgb: 91, 33, 78;
    /* Also support the small standalone credentials page without Bootstrap. */
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border: 1px solid var(--bs-btn-border-color);
}
.control-page :is(.btn-primary, .btn-success) {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--control-vatukka);
    --bs-btn-border-color: var(--control-vatukka);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--control-lakritsi);
    --bs-btn-hover-border-color: var(--control-lakritsi);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--control-lakritsi);
    --bs-btn-active-border-color: var(--control-lakritsi);
}
.control-page :is(.btn-danger, .btn-outline-danger) {
    --bs-btn-color: var(--control-danger);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--control-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--control-danger);
    --bs-btn-hover-border-color: var(--control-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--control-danger);
    --bs-btn-active-border-color: var(--control-danger);
}
.control-page .btn-warning {
    --bs-btn-color: var(--control-lakritsi);
    --bs-btn-bg: var(--control-tyrni);
    --bs-btn-border-color: var(--control-tyrni);
    --bs-btn-hover-color: var(--control-lakritsi);
    --bs-btn-hover-bg: var(--control-aamumaito);
    --bs-btn-hover-border-color: var(--control-vatukka);
}
.control-page .btn-link { text-decoration: underline; text-underline-offset: 3px; --bs-btn-bg: transparent; --bs-btn-border-color: transparent; }
.control-page .btn:where(:not([class*="product-button-"])):hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.control-page .btn:where(:not([class*="product-button-"])):is(:active, .active, .show),
.control-page .btn-check:checked + .btn {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.control-page .btn:where(:not([class*="product-button-"])):is(:disabled, .disabled) {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: .55;
    pointer-events: none;
}
/* Functional accents complement the brand palette, including custom product buttons. */
.control-page .btn[data-control-tone="save"] {
    --bs-btn-color: var(--control-save);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--control-save);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--control-save);
    --bs-btn-hover-border-color: var(--control-save);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--control-save);
    --bs-btn-active-border-color: var(--control-save);
    --bs-btn-disabled-color: var(--control-save);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--control-save);
    --bs-btn-focus-shadow-rgb: 39, 103, 73;
}
.control-page .btn[data-control-tone="neutral"] {
    --bs-btn-color: var(--control-lakritsi);
    --bs-btn-hover-color: var(--control-lakritsi);
    --bs-btn-active-color: var(--control-lakritsi);
}
.control-page .btn[data-control-tone] {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.control-page .btn[data-control-tone]:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.control-page .btn[data-control-tone]:is(:active, .active, .show) {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.control-page .btn[data-control-tone]:is(:disabled, .disabled) {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
}
.control-page :is(button, .btn, .btn-close, .navbar-toggler):focus-visible {
    outline: 2px solid var(--control-vatukka);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--control-vispi);
}
.control-page :is(.form-control, .form-select) { border-color: var(--control-border); border-radius: 8px; }
.control-page :is(.form-control, .form-select):focus {
    border-color: var(--control-vatukka);
    box-shadow: 0 0 0 3px var(--control-vispi);
}
.control-page .form-check-input:checked { background-color: var(--control-vatukka); border-color: var(--control-vatukka); }
.control-page .dropdown-menu { border-color: var(--control-border); border-radius: 10px; }
.control-page .dropdown-item:is(:hover, :focus, .active, :active) { background-color: var(--control-vispi); color: var(--control-vatukka); }
.control-page .modal-header,
.control-page .modal-footer { background-color: var(--control-aamumaito); }

.control-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background: var(--control-aamumaito);
    border: 1px solid rgba(91, 33, 78, .16);
    border-radius: 12px;
}
.control-page .control-ai-fab { background: var(--control-vatukka); }
.control-page .control-ai-header { background: var(--control-vatukka); }
.control-page :is(.control-ai-suggestion, .price-list-fill-column-button, .price-list-column-menu-button) {
    color: var(--control-vatukka);
    border-color: var(--control-border);
    border-radius: 8px;
    font-family: inherit;
}
.control-page :is(.control-ai-suggestion, .price-list-fill-column-button, .price-list-column-menu-button):hover {
    background: var(--control-vispi);
    color: var(--control-vatukka);
}
.control-page :is(#cancel-scan, #closeGraphButton) {
    min-height: 44px;
    color: var(--control-vatukka);
    background: #fff;
    border: 1px solid var(--control-border);
    border-radius: 8px;
}
.control-page :is(#cancel-scan, #closeGraphButton):hover { background: var(--control-vispi); }

/* Decorative icons do not change text, accessible names or click targets. */
.control-page :is(.btn, button.dropdown-item)[data-control-icon]::before {
    content: '';
    display: inline-block;
    flex: 0 0 1em;
    width: 1em;
    height: 1em;
    margin-inline-end: 6px;
    vertical-align: -2px;
    background-color: currentColor;
    mask: var(--control-button-icon) center / contain no-repeat;
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .control-toolbar { padding: 12px; }
    .control-page .btn { padding-inline: 10px; font-size: .875rem; }
    .control-page .product-toolbar .btn { padding-inline: 6px; }
}