/* Hallmark · system theme · genre: modern-minimal · theme: Santo Té nocturno
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: WCAG AA
 */

.st-theme-control {
    display: grid;
    min-width: 0;
    gap: .35rem;
}

.st-theme-control label {
    color: var(--st-text-muted);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.st-theme-select {
    width: 100%;
    min-height: 2.75rem;
    padding: .5rem 2.25rem .5rem .75rem;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    background-color: var(--st-surface-subtle);
    color: var(--st-text);
    font: 600 .8125rem/1.2 var(--st-font);
    cursor: pointer;
}

.st-theme-select:hover {
    border-color: var(--st-border-strong);
    background-color: var(--st-surface-hover);
}

.st-theme-select:focus-visible {
    outline: 0;
    border-color: var(--st-primary);
    box-shadow: var(--st-focus);
}

/* Hallmark · component: theme toggle · genre: modern-minimal · theme: Santo Té
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: WCAG AA
 */
.st-theme-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, 2.75rem);
    align-items: center;
    padding: .1875rem;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-pill);
    background: var(--st-surface-subtle);
    box-shadow: var(--st-shadow-sm);
}

.st-theme-toggle-button {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--st-text-muted);
    cursor: pointer;
    transition: background-color var(--st-transition), color var(--st-transition), box-shadow var(--st-transition);
}

.st-theme-toggle-button svg {
    width: 1.125rem;
    height: 1.125rem;
    pointer-events: none;
}

.st-theme-toggle-button:hover {
    background: var(--st-surface-hover);
    color: var(--st-text);
}

.st-theme-toggle-button:focus-visible {
    outline: 0;
    box-shadow: var(--st-focus);
}

.st-theme-toggle-button.is-active {
    background: var(--st-surface);
    color: var(--st-primary);
    box-shadow: var(--st-shadow-sm);
}

.st-theme-toggle-button[data-theme-value="light"] {
    color: var(--st-brand-accent);
}

.st-theme-toggle-button[data-theme-value="dark"] {
    color: var(--st-primary);
}

.st-theme-toggle-button[data-theme-value="light"].is-active {
    background: var(--st-warning-soft);
    color: var(--st-warning);
}

.st-theme-toggle-button[data-theme-value="dark"].is-active {
    background: var(--st-primary-soft);
    color: var(--st-primary);
}

.st-theme-toggle-button:active {
    background: var(--st-primary-soft);
}

.st-theme-toggle-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.st-theme-toggle-button.is-loading {
    cursor: progress;
    opacity: .7;
}

.st-theme-toggle-button[data-state="error"] {
    color: var(--st-danger);
}

.st-theme-toggle-button[data-state="success"] {
    color: var(--st-success);
}

.st-theme-logo-pair {
    display: grid;
    min-width: 0;
}

.st-theme-logo-pair > img {
    grid-area: 1 / 1;
}

.st-theme-logo--dark {
    display: none !important;
}

html[data-theme="dark"] .st-theme-logo--light {
    display: none !important;
}

html[data-theme="dark"] .st-theme-logo--dark {
    display: block !important;
}

.rb-sidebar-footer .st-theme-control {
    margin-bottom: var(--st-space-3);
}

.rb-shell.is-collapsed .rb-sidebar-footer .st-theme-control {
    display: none;
}

.st-theme-control--login {
    margin-top: 1.25rem;
}

.st-theme-control--pos {
    width: 8.25rem;
}

html[data-theme="dark"] .rb-topbar {
    background: rgb(17 27 46 / .94);
}

html[data-theme="dark"] :is(.table, .form-control, .form-select, .input-group-text) {
    --bs-table-bg: var(--st-surface);
    --bs-table-color: var(--st-text);
    --bs-table-border-color: var(--st-border);
    border-color: var(--st-border);
    background-color: var(--st-control-bg);
    color: var(--st-text);
}

html[data-theme="dark"] :is(.form-control, .form-select):hover:not(:disabled) {
    border-color: var(--st-border-strong);
    background-color: var(--st-control-bg-hover);
}

html[data-theme="dark"] :is(.form-control, .form-select):disabled {
    background-color: var(--st-surface-disabled);
    color: var(--st-text-disabled);
}

html[data-theme="dark"] :is(.form-control, .form-select)::placeholder {
    color: var(--st-text-muted);
    opacity: 1;
}

html[data-theme="dark"] :is(.dropdown-menu, .modal-content, .card, .list-group-item) {
    border-color: var(--st-border);
    background-color: var(--st-surface);
    color: var(--st-text);
    box-shadow: var(--st-shadow-panel);
}

html[data-theme="dark"] :is(.dropdown-item, .btn-close) {
    color: var(--st-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: var(--st-surface-hover);
}

html[data-theme="dark"] .text-muted {
    color: var(--st-text-muted) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--st-surface-subtle) !important;
}

html[data-theme="dark"] .st-login-body {
    --st-login-surface: #0b1220;
    --st-login-field: #111b2e;
    --st-login-border: #3a4c68;
    --st-login-primary: #60a5fa;
    --st-login-primary-hover: #93c5fd;
    --st-login-focus: 0 0 0 .1875rem rgb(96 165 250 / .28);
    --st-login-seam: rgb(148 163 184 / .18);
    --st-login-seam-shadow: -.75rem 0 2rem rgb(0 0 0 / .24);
}

html[data-theme="dark"] .st-pos-payment-error {
    border-color: var(--st-danger);
    background: var(--st-danger-soft);
    color: var(--st-danger);
}

html[data-theme="dark"] .st-pos-body #mobileCount {
    background: var(--st-text) !important;
    color: var(--st-bg) !important;
}

html.is-theme-ready body,
html.is-theme-ready .rb-sidebar,
html.is-theme-ready .rb-topbar,
html.is-theme-ready .rb-content,
html.is-theme-ready .st-table-card,
html.is-theme-ready .st-metric-card {
    transition:
        background-color 190ms ease,
        border-color 190ms ease,
        color 190ms ease;
}

@media (max-width: 767.98px) {
    .st-pos-body .mobile-order-context {
        gap: .5rem !important;
    }

    .st-pos-body .mobile-order-context .st-theme-toggle {
        flex: 0 0 auto;
    }
}

@media print {
    html,
    html[data-theme="dark"],
    body {
        color-scheme: light !important;
        background: #fff !important;
        color: #000 !important;
    }

    .st-theme-control {
        display: none !important;
    }
}