/* ColorPickerWidget: an inline saturation square, hue slider and hex box. */

.color-picker {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    width: 100%;
    max-width: 260px;
    padding: .65rem;
    border: 1px solid var(--cui-border-color, #d8dbe0);
    border-radius: 10px;
    background: var(--cui-card-bg, #fff);
    user-select: none;
}

.color-picker--disabled {
    opacity: .55;
    pointer-events: none;
}

/* The square: its background colour is the pure hue, with white washing in from the left and
   black from the bottom, which is exactly saturation on x and value on y. */
.color-picker__area {
    position: relative;
    height: 140px;
    border-radius: 6px;
    cursor: crosshair;
    touch-action: none;
    overflow: hidden;
}

.color-picker__area-white,
.color-picker__area-black {
    position: absolute;
    inset: 0;
}

.color-picker__area-white {
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.color-picker__area-black {
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.color-picker__row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.color-picker__preview {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}

.color-picker__sliders {
    flex: 1 1 auto;
    min-width: 0;
}

.color-picker__hue {
    position: relative;
    height: 12px;
    border-radius: 6px;
    cursor: ew-resize;
    touch-action: none;
    background: linear-gradient(to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.color-picker__handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.color-picker__handle--hue {
    top: 50%;
    height: 16px;
    width: 16px;
    margin: -8px 0 0 -8px;
    background: transparent;
}

.color-picker__hex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}

.color-picker__hex-input {
    width: 100%;
    padding: .3rem .5rem;
    text-align: center;
    font-family: var(--cui-font-monospace, monospace);
    font-size: .8125rem;
    border: 1px solid var(--cui-border-color, #d8dbe0);
    border-radius: 6px;
    background: var(--cui-body-bg, #fff);
    color: var(--cui-body-color, #212529);
}

.color-picker__hex-input:focus {
    outline: 0;
    border-color: var(--bs-primary, #005eff);
}

.color-picker__hex-label {
    font-size: .68rem;
    letter-spacing: .08em;
    color: rgba(0, 0, 0, .5);
}

.color-picker__description {
    margin: 0;
    font-size: .75rem;
    line-height: 1.35;
    color: rgba(0, 0, 0, .58);
}

/* RestartWatcherWidget: shown while the backend is coming back up. */

.restart-watcher {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 1px solid var(--cui-border-color, #d8dbe0);
    border-radius: 10px;
    background: var(--cui-card-bg, #fff);
}

.restart-watcher__spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .15);
    border-top-color: var(--bs-primary, #005eff);
    animation: restart-watcher-spin .8s linear infinite;
}

.restart-watcher--failed .restart-watcher__spinner {
    animation: none;
    border-top-color: var(--bs-danger, #ef4444);
}

.restart-watcher__text {
    font-size: .875rem;
    color: var(--cui-body-color, #212529);
}

@keyframes restart-watcher-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .restart-watcher__spinner { animation-duration: 2.4s; }
}