/*
 * IF Composer shared admin UI contract – Core 0.1.2
 *
 * Feature modules may compose these tokens and primitives but must not redefine
 * the semantic meaning of text, surface, border, focus or disabled states.
 */
body.ifc-admin-ui,
.ifc-ui {
    --ifc-ui-page: #f0f1f3;
    --ifc-ui-surface: #ffffff;
    --ifc-ui-surface-subtle: #f7f8fa;
    --ifc-ui-surface-muted: #e8ebef;
    --ifc-ui-surface-dark: #111318;
    --ifc-ui-surface-dark-raised: #191c22;
    --ifc-ui-control: #ffffff;
    --ifc-ui-control-dark: #15181e;
    --ifc-ui-text: #17191d;
    --ifc-ui-text-secondary: #505763;
    --ifc-ui-text-muted: #68717e;
    --ifc-ui-text-on-dark: #f7f8fb;
    --ifc-ui-text-secondary-on-dark: #c5cad3;
    --ifc-ui-text-disabled: #5f6875;
    --ifc-ui-control-disabled: #e4e7eb;
    --ifc-ui-border: #c9ced6;
    --ifc-ui-border-strong: #979faa;
    --ifc-ui-border-dark: #383d47;
    --ifc-ui-focus: #315ee8;
    --ifc-ui-accent: #d90036;
    --ifc-ui-success: #18743e;
    --ifc-ui-warning: #8a5c05;
    --ifc-ui-danger: #a51f3d;
    --ifc-ui-radius: 12px;
    --ifc-ui-shadow: 0 10px 30px rgba(18, 23, 31, .08);
}

.ifc-ui,
.ifc-ui * {
    box-sizing: border-box;
}

.ifc-ui {
    color: var(--ifc-ui-text);
}

.ifc-ui [hidden] {
    display: none !important;
}

.ifc-ui-panel,
.ifc-ui-card {
    border: 1px solid var(--ifc-ui-border);
    border-radius: var(--ifc-ui-radius);
    background: var(--ifc-ui-surface);
    color: var(--ifc-ui-text);
    box-shadow: var(--ifc-ui-shadow);
}

.ifc-ui-panel--light,
.ifc-ui-card--light {
    background: var(--ifc-ui-surface);
    color: var(--ifc-ui-text);
}

.ifc-ui-panel--dark,
.ifc-ui-card--dark {
    border-color: var(--ifc-ui-border-dark);
    background: var(--ifc-ui-surface-dark);
    color: var(--ifc-ui-text-on-dark);
}

.ifc-ui-panel--light :is(h1,h2,h3,h4,h5,h6,label,legend,summary,strong),
.ifc-ui-card--light :is(h1,h2,h3,h4,h5,h6,label,legend,summary,strong) {
    color: var(--ifc-ui-text);
}

.ifc-ui-panel--light :is(p,small,.description),
.ifc-ui-card--light :is(p,small,.description) {
    color: var(--ifc-ui-text-secondary);
}

.ifc-ui-panel--dark :is(h1,h2,h3,h4,h5,h6,label,legend,summary,strong),
.ifc-ui-card--dark :is(h1,h2,h3,h4,h5,h6,label,legend,summary,strong) {
    color: var(--ifc-ui-text-on-dark);
}

.ifc-ui-panel--dark :is(p,small,.description),
.ifc-ui-card--dark :is(p,small,.description) {
    color: var(--ifc-ui-text-secondary-on-dark);
}

.ifc-ui-field,
.ifc-ui label.ifc-ui-field {
    display: grid;
    gap: 6px;
    color: var(--ifc-ui-text);
    font-weight: 600;
}

.ifc-ui-panel--dark .ifc-ui-field,
.ifc-ui-panel--dark label.ifc-ui-field {
    color: var(--ifc-ui-text-on-dark);
}

/* Light surface controls. Keep values readable even when disabled. */
.ifc-ui-panel--light :is(input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="number"],input[type="password"],input[type="file"],textarea,select),
.ifc-ui-card--light :is(input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="number"],input[type="password"],input[type="file"],textarea,select),
.ifc-ui-control--light {
    border-color: var(--ifc-ui-border);
    background: var(--ifc-ui-control);
    color: var(--ifc-ui-text) !important;
    -webkit-text-fill-color: var(--ifc-ui-text) !important;
    color-scheme: light;
}

.ifc-ui-panel--light select option,
.ifc-ui-panel--light select optgroup,
.ifc-ui-card--light select option,
.ifc-ui-card--light select optgroup {
    background: var(--ifc-ui-control) !important;
    color: var(--ifc-ui-text) !important;
    -webkit-text-fill-color: var(--ifc-ui-text) !important;
}

/* Dark surface controls. */
.ifc-ui-panel--dark :is(input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="number"],input[type="password"],input[type="file"],textarea,select),
.ifc-ui-card--dark :is(input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="number"],input[type="password"],input[type="file"],textarea,select),
.ifc-ui-control--dark {
    border-color: var(--ifc-ui-border-dark);
    background: var(--ifc-ui-control-dark);
    color: var(--ifc-ui-text-on-dark) !important;
    -webkit-text-fill-color: var(--ifc-ui-text-on-dark) !important;
    color-scheme: dark;
}

.ifc-ui-panel--dark select option,
.ifc-ui-panel--dark select optgroup,
.ifc-ui-card--dark select option,
.ifc-ui-card--dark select optgroup {
    background: var(--ifc-ui-control-dark) !important;
    color: var(--ifc-ui-text-on-dark) !important;
    -webkit-text-fill-color: var(--ifc-ui-text-on-dark) !important;
}

.ifc-ui :is(input,textarea,select,button,.button,a):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ifc-ui-focus) 44%, transparent);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--ifc-ui-focus);
}

.ifc-ui :is(input,textarea,select):disabled,
.ifc-ui :is(input,textarea,select)[aria-disabled="true"],
.ifc-ui .ifc-ui-control--disabled {
    border-color: var(--ifc-ui-border-strong) !important;
    background: var(--ifc-ui-control-disabled) !important;
    color: var(--ifc-ui-text-disabled) !important;
    -webkit-text-fill-color: var(--ifc-ui-text-disabled) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.ifc-ui input::placeholder,
.ifc-ui textarea::placeholder {
    color: var(--ifc-ui-text-muted);
    opacity: 1;
}

.ifc-ui-panel--dark input::placeholder,
.ifc-ui-panel--dark textarea::placeholder {
    color: #aeb5c0;
}

.ifc-ui input[type="checkbox"],
.ifc-ui input[type="radio"] {
    accent-color: var(--ifc-ui-accent);
}

.ifc-ui summary {
    color: inherit;
}

.ifc-ui-notice {
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--ifc-ui-border);
    border-left-width: 4px;
    border-radius: 10px;
    background: var(--ifc-ui-surface);
    color: var(--ifc-ui-text);
}

.ifc-ui-notice--success { border-left-color: var(--ifc-ui-success); }
.ifc-ui-notice--warning { border-left-color: var(--ifc-ui-warning); }
.ifc-ui-notice--error { border-left-color: var(--ifc-ui-danger); }

@media (forced-colors: active) {
    .ifc-ui :is(input,textarea,select,button,.button,a):focus-visible {
        outline: 2px solid Highlight;
    }
}

/* Canonical range + editable value control — Core owns this component. */
body.ifc-admin-ui,
.ifc-ui {
    --ifc-ui-range-track: #d9dde4;
    --ifc-ui-range-track-dark: #f0f2f5;
    --ifc-ui-range-thumb: var(--ifc-ui-accent);
    --ifc-ui-range-value-accent: #f04468;
}

.ifc-ui-range {
    --ifc-range-progress: 0%;
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: inherit;
    font-weight: 600;
}

.ifc-ui-range__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.ifc-ui-range__label {
    min-width: 0;
    color: inherit;
    font-size: 13px;
    line-height: 1.3;
}

.ifc-ui-range__value {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--ifc-ui-range-value-accent);
    font-weight: 800;
}

.ifc-ui-range .ifc-ui-range__number {
    width: 88px;
    min-height: 38px;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid var(--ifc-ui-border);
    border-radius: 9px;
    background: var(--ifc-ui-control);
    color: var(--ifc-ui-text) !important;
    -webkit-text-fill-color: var(--ifc-ui-text) !important;
    text-align: right;
    font-weight: 800;
    color-scheme: light;
}

.ifc-ui-panel--dark .ifc-ui-range .ifc-ui-range__number,
.ifc-ui-card--dark .ifc-ui-range .ifc-ui-range__number,
.ifc-ui-range.ifc-ui-range--dark .ifc-ui-range__number {
    border-color: var(--ifc-ui-border-dark);
    background: var(--ifc-ui-control-dark);
    color: var(--ifc-ui-text-on-dark) !important;
    -webkit-text-fill-color: var(--ifc-ui-text-on-dark) !important;
    color-scheme: dark;
}

.ifc-ui-range__unit {
    min-width: 12px;
    color: var(--ifc-ui-range-value-accent);
    font-size: 13px;
    line-height: 1;
}

.ifc-ui-range .ifc-ui-range__slider {
    width: 100%;
    height: 24px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    touch-action: pan-y;
}

.ifc-ui-range .ifc-ui-range__slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--ifc-ui-range-thumb) 0,
        var(--ifc-ui-range-thumb) var(--ifc-range-progress),
        var(--ifc-ui-range-track) var(--ifc-range-progress),
        var(--ifc-ui-range-track) 100%);
}

.ifc-ui-panel--dark .ifc-ui-range .ifc-ui-range__slider::-webkit-slider-runnable-track,
.ifc-ui-card--dark .ifc-ui-range .ifc-ui-range__slider::-webkit-slider-runnable-track,
.ifc-ui-range.ifc-ui-range--dark .ifc-ui-range__slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
        var(--ifc-ui-range-thumb) 0,
        var(--ifc-ui-range-thumb) var(--ifc-range-progress),
        var(--ifc-ui-range-track-dark) var(--ifc-range-progress),
        var(--ifc-ui-range-track-dark) 100%);
}

.ifc-ui-range .ifc-ui-range__slider::-moz-range-track {
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--ifc-ui-range-track);
}

.ifc-ui-panel--dark .ifc-ui-range .ifc-ui-range__slider::-moz-range-track,
.ifc-ui-card--dark .ifc-ui-range .ifc-ui-range__slider::-moz-range-track,
.ifc-ui-range.ifc-ui-range--dark .ifc-ui-range__slider::-moz-range-track {
    background: var(--ifc-ui-range-track-dark);
}

.ifc-ui-range .ifc-ui-range__slider::-moz-range-progress {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--ifc-ui-range-thumb);
}

.ifc-ui-range .ifc-ui-range__slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 0;
    border-radius: 50%;
    background: var(--ifc-ui-range-thumb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ifc-ui-range-thumb) 20%, transparent);
    cursor: grab;
    appearance: none;
    -webkit-appearance: none;
}

.ifc-ui-range .ifc-ui-range__slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--ifc-ui-range-thumb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ifc-ui-range-thumb) 20%, transparent);
    cursor: grab;
}

.ifc-ui-range .ifc-ui-range__slider:active::-webkit-slider-thumb,
.ifc-ui-range .ifc-ui-range__slider:active::-moz-range-thumb {
    cursor: grabbing;
}

.ifc-ui-range .ifc-ui-range__slider:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ifc-ui-focus) 44%, transparent);
    outline-offset: 2px;
    box-shadow: none;
}

.ifc-ui-range__description {
    display: block;
    margin: -1px 0 0;
    color: var(--ifc-ui-text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.ifc-ui-panel--dark .ifc-ui-range__description,
.ifc-ui-card--dark .ifc-ui-range__description,
.ifc-ui-range.ifc-ui-range--dark .ifc-ui-range__description {
    color: var(--ifc-ui-text-secondary-on-dark);
}

.ifc-ui-range.is-disabled {
    opacity: 1;
}

.ifc-ui-range.is-disabled .ifc-ui-range__label,
.ifc-ui-range.is-disabled .ifc-ui-range__description {
    color: var(--ifc-ui-text-muted);
}

.ifc-ui-panel--dark .ifc-ui-range.is-disabled .ifc-ui-range__label,
.ifc-ui-panel--dark .ifc-ui-range.is-disabled .ifc-ui-range__description,
.ifc-ui-range.ifc-ui-range--dark.is-disabled .ifc-ui-range__label,
.ifc-ui-range.ifc-ui-range--dark.is-disabled .ifc-ui-range__description {
    color: #aeb5c0;
}

.ifc-ui-range.is-disabled .ifc-ui-range__slider,
.ifc-ui-range.is-disabled .ifc-ui-range__number {
    cursor: not-allowed;
}

.ifc-ui-range.is-disabled .ifc-ui-range__slider::-webkit-slider-runnable-track {
    background: var(--ifc-ui-border-strong);
}
.ifc-ui-range.is-disabled .ifc-ui-range__slider::-moz-range-track,
.ifc-ui-range.is-disabled .ifc-ui-range__slider::-moz-range-progress {
    background: var(--ifc-ui-border-strong);
}

@media (max-width: 700px) {
    .ifc-ui-range__head { align-items: flex-start; }
    .ifc-ui-range .ifc-ui-range__number { width: 76px; }
}