/* Application controls. Loaded after Saga: its component colors are compiled
   literals, so both tokens and component states must be themed here.
   Scope to the body so dialogs and dropdowns appended outside the shell inherit it. */
:root {
    --beauty-ink: #34252b;
    --beauty-muted: #72636a;
    --beauty-rose: var(--brand-accent);
    --beauty-rose-deep: var(--brand-accent-hover);
    --beauty-blush: var(--brand-blush);
    --beauty-cream: #fffaf6;
    --beauty-sage: #6d7b67;
    --beauty-border: #ebdedf;
    --primary-color: var(--beauty-rose);
    --primary-color-text: #fff;
    --primary-50: #fcf5f7;
    --primary-100: var(--beauty-blush);
    --primary-200: #e6becb;
    --primary-300: #ce93a6;
    --primary-400: #b96884;
    --primary-500: var(--beauty-rose);
    --primary-600: #8c3d57;
    --primary-700: var(--beauty-rose-deep);
    --primary-800: #60273c;
    --primary-900: #43213f;
    --text-color: var(--beauty-ink);
    --text-color-secondary: var(--beauty-muted);
    --surface-ground: #faf7f7;
    --surface-border: var(--beauty-border);
    --surface-hover: #f8edf0;
    --control-border: #cbb9c0;
    --control-radius: .65rem;
    --focus-ring: 0 0 0 3px rgb(156 69 98 / 22%);
}

body.app-theme { color: var(--text-color); accent-color: var(--primary-color); }

/* Keep page-specific sizing (large search actions, compact toolbars) intact. */
:where(body.app-theme) .ui-button.ui-widget {
    border-radius: var(--control-radius);
    min-height: 2.75rem;
    font-weight: 600;
}

/* Shared button geometry and state colors. Variants only change these tokens. */
body.app-theme .ui-button.ui-widget {
    --button-color: var(--beauty-rose);
    --button-hover: var(--beauty-rose-deep);
    --button-active: #60273c;
    --button-soft: var(--surface-hover);
    --button-soft-active: var(--beauty-blush);
    background: var(--button-color);
    border-color: var(--button-color);
    color: #fff;
    box-shadow: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
body.app-theme .ui-button.ui-button-secondary,
body.app-theme .ui-button.ui-button-plain {
    --button-color: #67515e;
    --button-hover: #503e49;
    --button-active: var(--beauty-ink);
}
body.app-theme .ui-button.ui-button-success {
    --button-color: #4f6b53;
    --button-hover: #3e5542;
    --button-active: #304233;
    --button-soft: #edf3ed;
    --button-soft-active: #dbe8dc;
}
body.app-theme .ui-button.ui-button-danger {
    --button-color: #b13e46;
    --button-hover: #932e35;
    --button-active: #76242a;
    --button-soft: #fff0f0;
    --button-soft-active: #f5dadd;
}
body.app-theme .ui-button.ui-widget:is(:hover, .ui-state-hover):not(:disabled):not(.ui-state-disabled) {
    background: var(--button-hover);
    border-color: var(--button-hover);
    color: #fff;
}
body.app-theme .ui-button.ui-widget:is(:active, .ui-state-active, .ui-state-down):not(:disabled):not(.ui-state-disabled) {
    background: var(--button-active);
    border-color: var(--button-active);
    color: #fff;
}
body.app-theme .ui-button.ui-widget.ui-button-outlined {
    background: #fff;
    border-color: var(--button-color);
    color: var(--button-color);
}
/* ui-button-text is used by our views; Saga calls this variant ui-button-flat. */
body.app-theme .ui-button.ui-widget:is(.ui-button-text, .ui-button-flat) {
    background: transparent;
    border-color: transparent;
    color: var(--button-color);
}
body.app-theme .ui-button.ui-widget:is(.ui-button-outlined, .ui-button-text, .ui-button-flat):is(:hover, .ui-state-hover):not(:disabled):not(.ui-state-disabled) {
    background: var(--button-soft);
    color: var(--button-hover);
}
body.app-theme .ui-button.ui-widget:is(.ui-button-outlined, .ui-button-text, .ui-button-flat):is(:active, .ui-state-active, .ui-state-down):not(:disabled):not(.ui-state-disabled) {
    background: var(--button-soft-active);
    color: var(--button-active);
}
body.app-theme .ui-button.ui-widget:is(.ui-button-text, .ui-button-flat):is(:hover, :active, .ui-state-hover, .ui-state-active, .ui-state-down) {
    border-color: transparent;
}
body.app-theme .ui-button.ui-widget:is(:focus-visible, .ui-state-focus) {
    outline: 2px solid var(--button-color);
    outline-offset: 3px;
    box-shadow: var(--focus-ring);
}
body.app-theme .ui-button.ui-widget:is(:disabled, .ui-state-disabled) {
    opacity: .55;
    box-shadow: none;
    cursor: default;
}
body.app-theme .ui-button.ui-button-icon-only { min-width: 2.75rem; }
body.app-theme .ui-button:is(.rounded-button, .ui-button-rounded) { border-radius: 2rem; }

/* Calendar triggers use the input's theme sizing, not standalone button sizing. */
body.app-theme .ui-calendar .ui-datepicker-trigger { min-height: 0; }

/* Segmented options stay neutral until selected. Preserve Saga's joined corners. */
body.app-theme :is(.ui-selectonebutton, .ui-selectmanybutton) > .ui-button.ui-widget,
body.app-theme .ui-selectbooleanbutton.ui-button.ui-widget {
    background: #fff;
    color: var(--text-color);
    border-color: var(--control-border);
}
body.app-theme :is(.ui-selectonebutton, .ui-selectmanybutton) > .ui-button.ui-widget { border-radius: 0; }
body.app-theme :is(.ui-selectonebutton, .ui-selectmanybutton) > .ui-button.ui-widget:first-child { border-radius: var(--control-radius) 0 0 var(--control-radius); }
body.app-theme :is(.ui-selectonebutton, .ui-selectmanybutton) > .ui-button.ui-widget:last-child { border-radius: 0 var(--control-radius) var(--control-radius) 0; }
body.app-theme :is(.ui-selectonebutton, .ui-selectmanybutton) > .ui-button.ui-widget.ui-state-active,
body.app-theme .ui-selectbooleanbutton.ui-button.ui-widget.ui-state-active {
    background: var(--beauty-rose);
    border-color: var(--beauty-rose);
    color: #fff;
}
body.app-theme .ui-button.ui-widget .ui-icon { color: inherit; }

/* Inputs, dropdowns, checkboxes and range controls use the same border and focus. */
body.app-theme select.country-select {
    appearance: auto;
    min-height: 44px;
    max-width: 100%;
    font: inherit;
}
body.app-theme :is(.ui-inputfield, .ui-selectonemenu, .ui-selectcheckboxmenu) {
    color: var(--text-color);
    border-color: var(--control-border);
    border-radius: var(--control-radius);
}
body.app-theme :is(.ui-inputfield, .ui-selectonemenu, .ui-selectcheckboxmenu):is(:hover, .ui-state-hover):not(.ui-state-disabled):not(.ui-state-error) {
    border-color: var(--beauty-rose);
}
body.app-theme :is(.ui-inputfield, .ui-selectonemenu, .ui-selectcheckboxmenu):is(:focus, .ui-state-focus) {
    border-color: var(--beauty-rose);
    box-shadow: var(--focus-ring);
}
body.app-theme :is(.ui-inputfield, .ui-selectonemenu, .ui-selectcheckboxmenu, .ui-chkbox-box, .ui-radiobutton-box).ui-state-error { border-color: #b13e46; }
body.app-theme .ui-chkbox .ui-chkbox-box,
body.app-theme .ui-radiobutton .ui-radiobutton-box { border-color: var(--control-border); }
body.app-theme .ui-chkbox .ui-chkbox-box.ui-state-hover,
body.app-theme .ui-radiobutton .ui-radiobutton-box.ui-state-hover { border-color: var(--beauty-rose); }
body.app-theme .ui-chkbox .ui-chkbox-box.ui-state-active,
body.app-theme .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    background: var(--beauty-rose);
    border-color: var(--beauty-rose);
    color: #fff;
}
body.app-theme .ui-chkbox .ui-chkbox-box.ui-state-focus,
body.app-theme .ui-radiobutton .ui-radiobutton-box.ui-state-focus,
body.app-theme .ui-toggleswitch.ui-toggleswitch-focus .ui-toggleswitch-slider { box-shadow: var(--focus-ring); }
body.app-theme .ui-slider { background: var(--beauty-border); }
body.app-theme .ui-slider .ui-slider-range,
body.app-theme .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider { background: var(--beauty-rose); }
body.app-theme .ui-slider .ui-slider-handle { border-color: var(--beauty-rose); }
body.app-theme .ui-slider .ui-slider-handle.ui-state-hover { background: var(--beauty-rose); }
body.app-theme .ui-slider .ui-slider-handle:is(:focus-visible, .ui-state-focus) { box-shadow: var(--focus-ring); }

/* Selection overlays are rendered directly under body, including in dialogs. */
body.app-theme .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight,
body.app-theme .ui-autocomplete-panel .ui-autocomplete-items .ui-autocomplete-item.ui-state-highlight,
body.app-theme .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item.ui-state-highlight,
body.app-theme .ui-datatable .ui-datatable-data > tr.ui-state-highlight,
body.app-theme .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background: var(--surface-hover);
    color: var(--beauty-rose-deep);
}
body.app-theme .ui-datepicker .ui-datepicker-calendar td:is(.ui-datepicker-today, .ui-datepicker-current-day) > a { color: var(--beauty-rose-deep); }
body.app-theme .ui-datepicker .ui-datepicker-calendar td > :is(a, span).ui-state-active,
body.app-theme .ui-datepicker .ui-monthpicker-month.ui-state-active {
    background: var(--beauty-blush);
    color: var(--beauty-rose-deep);
}
body.app-theme .ui-datepicker :is(a, button):focus { box-shadow: var(--focus-ring); }
body.app-theme .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active :is(a, .ui-icon),
body.app-theme .ui-datatable thead th.ui-state-active {
    color: var(--beauty-rose-deep);
    border-color: var(--beauty-rose);
}
body.app-theme .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content.ui-state-highlight,
body.app-theme .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label.ui-state-highlight {
    background: var(--surface-hover);
    color: var(--beauty-rose-deep);
}
body.app-theme .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-tree-toggler:focus,
body.app-theme .ui-datatable .ui-datatable-data > tr .ui-row-toggler:focus,
body.app-theme .ui-datatable .ui-datatable-data > tr .ui-row-editor > a:focus { box-shadow: var(--focus-ring); }
body.app-theme .ui-tree .ui-tree-container .ui-treenode-outline,
body.app-theme .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-tabs-outline,
body.app-theme .ui-datatable thead th.ui-sortable-column.ui-state-focus { box-shadow: inset var(--focus-ring); }
@media (max-width: 640px) {
    body.app-theme :is(.ui-selectonebutton, .ui-selectmanybutton) > div.ui-button.ui-widget:first-child { border-radius: var(--control-radius) var(--control-radius) 0 0; }
    body.app-theme :is(.ui-selectonebutton, .ui-selectmanybutton) > div.ui-button.ui-widget:last-child { border-radius: 0 0 var(--control-radius) var(--control-radius); }
}
@media (prefers-reduced-motion: reduce) {
    body.app-theme .ui-button.ui-widget { transition: none; }
}

/* Native currency choices keep amount edits intact and work without an AJAX roundtrip. */
.service-currency-select { display: block; width: 100%; max-width: 100%; padding: .6rem; border: 1px solid #ced4da; border-radius: 6px; background: #fff; color: inherit; font: inherit; }