/* =============================================================================
   RMRP Helper — единые стили нативных контролов Chromium (checkbox, select,
   radio, number, scrollbar, color). Подключать на КАЖДОЙ HTML-странице.
   Элементы внутри .switch-toggle — скрытые, рисуется кастомный тумблер.
   ============================================================================= */

:root {
    --rmrp-accent: #e63939;
    --rmrp-accent-soft: rgba(230, 57, 57, 0.22);
    --rmrp-control-bg: #1c1c24;
    --rmrp-control-border: #2a2a33;
    --rmrp-control-text: #f2f2f5;
    --rmrp-control-muted: #9a9aa5;
    --rmrp-control-radius: 10px;
    --rmrp-success: #2ec4b6;
}

/* Запрет выделения текста и элементов (поля ввода — исключение) */
html,
body,
body *:not(input):not(textarea):not(select):not([contenteditable='true']) {
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
select,
[contenteditable='true'] {
    -webkit-user-select: text;
    user-select: text;
}



/* --- Скроллбары (WebKit / Electron) --- */
* {
    scrollbar-width: thin;
    scrollbar-color: #303038 #0f0f0f;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: #0f0f0f;
}

*::-webkit-scrollbar-thumb {
    background: #303038;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--rmrp-accent);
}

*::-webkit-scrollbar-corner {
    background: #0f0f0f;
}

/* --- Select / списки --- */
select:not(.hidden):not([hidden]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--rmrp-control-bg);
    border: 1px solid var(--rmrp-control-border);
    border-radius: var(--rmrp-control-radius);
    color: var(--rmrp-control-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    padding: 10px 36px 10px 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239a9aa5' d='M1.4 1.4 6 6l4.6-4.6L12 2.8 6 8.8 0 2.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

select:not(.hidden):not([hidden]):hover {
    border-color: #3a3a46;
}

select:not(.hidden):not([hidden]):focus,
select:not(.hidden):not([hidden]):focus-visible {
    outline: none;
    border-color: var(--rmrp-accent);
    box-shadow: 0 0 0 3px var(--rmrp-accent-soft);
}

select:not(.hidden):not([hidden]):disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

select option,
select optgroup {
    background: #17171d;
    color: #eee;
}

/* Select внутри обёрток без своей рамки (time.html, notein) */
.sound-select-wrap select,
.custom-select-wrap select {
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    padding-right: 28px;
}

.toolbar-select {
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath fill='%239a9aa5' d='M1.4 1.4 6 6l4.6-4.6L12 2.8 6 8.8 0 2.8z'/%3E%3C/svg%3E");
    padding-right: 22px;
    background-position: right 2px center;
}

.sound-select-wrap select:focus,
.custom-select-wrap select:focus,
.toolbar-select:focus {
    box-shadow: none;
}

/* --- Checkbox (не тумблер) --- */
input[type="checkbox"]:not(.switch-toggle input) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    border: 2px solid #3a3a46;
    border-radius: 5px;
    background: #14141a;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

input[type="checkbox"]:not(.switch-toggle input):hover {
    border-color: #55556a;
}

input[type="checkbox"]:not(.switch-toggle input):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rmrp-accent-soft);
}

input[type="checkbox"]:not(.switch-toggle input):checked {
    border-color: var(--rmrp-accent);
    background: var(--rmrp-accent);
}

input[type="checkbox"]:not(.switch-toggle input):checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:not(.switch-toggle input):disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Radio --- */
input[type="radio"]:not(.switch-toggle input) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    border: 2px solid #3a3a46;
    border-radius: 50%;
    background: #14141a;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

input[type="radio"]:not(.switch-toggle input):hover {
    border-color: #55556a;
}

input[type="radio"]:not(.switch-toggle input):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rmrp-accent-soft);
}

input[type="radio"]:not(.switch-toggle input):checked {
    border-color: var(--rmrp-accent);
}

input[type="radio"]:not(.switch-toggle input):checked::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--rmrp-accent);
}

/* --- Number: без стрелок Chromium --- */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Search: без крестика/лупы Chromium по умолчанию --- */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* --- Color picker --- */
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid var(--rmrp-control-border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 5px;
}

input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 5px;
}

/* --- Range (если появится) --- */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: #2a2a33;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--rmrp-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--rmrp-accent);
    border: 2px solid #fff;
    cursor: pointer;
}

/* =============================================================================
   Единая дизайн-система текстовых полей (ТЗ №5 п.2)
   Состояния: default · hover · focus · filled · error · disabled
   Используйте классы .rmrp-field / .rmrp-input или .field-input / .field-textarea
   ============================================================================= */

:root {
    --rmrp-field-bg: #14141a;
    --rmrp-field-bg-hover: #18181f;
    --rmrp-field-bg-focus: #16161d;
    --rmrp-field-border: #2a2a33;
    --rmrp-field-border-hover: #3a3a46;
    --rmrp-field-border-focus: var(--rmrp-accent);
    --rmrp-field-border-error: #e63939;
    --rmrp-field-text: #f2f2f5;
    --rmrp-field-placeholder: #6e6e78;
    --rmrp-field-radius: 11px;
    --rmrp-field-pad-y: 11px;
    --rmrp-field-pad-x: 14px;
    --rmrp-field-font: 13.5px;
    --rmrp-field-shadow-focus: 0 0 0 3px var(--rmrp-accent-soft);
    --rmrp-field-shadow-error: 0 0 0 3px rgba(230, 57, 57, 0.18);
    --rmrp-field-error: #ff6b6b;
    --rmrp-field-hint: #8a8a96;
    --rmrp-field-label: #b8b8c2;
}

/* Обёртка поля */
.rmrp-field,
.field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.rmrp-field:last-child,
.field-group:last-child {
    margin-bottom: 0;
}

.rmrp-field-label,
.field-label,
.rmrp-field > label,
.field-group > label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--rmrp-field-label);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.rmrp-field-hint,
.field-hint {
    font-size: 11px;
    color: var(--rmrp-field-hint);
    line-height: 1.45;
}

.rmrp-field-error,
.field-error,
.form-error {
    font-size: 12px;
    font-weight: 600;
    color: var(--rmrp-field-error);
    line-height: 1.4;
    min-height: 0;
}

.rmrp-field-error:empty,
.field-error:empty,
.form-error:empty {
    display: none;
}

/* Базовые текстовые контролы + алиасы существующих классов */
input[type="text"]:not(.toolbar-size-input):not([hidden]),
input[type="password"]:not([hidden]),
input[type="email"]:not([hidden]),
input[type="search"]:not([hidden]),
input[type="url"]:not([hidden]),
input[type="tel"]:not([hidden]),
input[type="number"]:not(.toolbar-size-input):not([hidden]),
textarea:not([hidden]),
.rmrp-input,
.rmrp-textarea,
.field-input,
.field-textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    background: var(--rmrp-field-bg);
    border: 1px solid var(--rmrp-field-border);
    border-radius: var(--rmrp-field-radius);
    color: var(--rmrp-field-text);
    font-family: inherit;
    font-size: var(--rmrp-field-font);
    font-weight: 600;
    line-height: 1.4;
    padding: var(--rmrp-field-pad-y) var(--rmrp-field-pad-x);
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease;
}

textarea:not([hidden]),
.rmrp-textarea,
.field-textarea {
    resize: vertical;
    min-height: 88px;
    line-height: 1.55;
    font-weight: 500;
}

input[type="text"]:not(.toolbar-size-input):hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="number"]:not(.toolbar-size-input):hover,
textarea:hover,
.rmrp-input:hover,
.rmrp-textarea:hover,
.field-input:hover,
.field-textarea:hover {
    border-color: var(--rmrp-field-border-hover);
    background: var(--rmrp-field-bg-hover);
}

input[type="text"]:not(.toolbar-size-input):focus,
input[type="text"]:not(.toolbar-size-input):focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-visible,
input[type="email"]:focus,
input[type="email"]:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-visible,
input[type="url"]:focus,
input[type="url"]:focus-visible,
input[type="tel"]:focus,
input[type="tel"]:focus-visible,
input[type="number"]:not(.toolbar-size-input):focus,
input[type="number"]:not(.toolbar-size-input):focus-visible,
textarea:focus,
textarea:focus-visible,
.rmrp-input:focus,
.rmrp-input:focus-visible,
.rmrp-textarea:focus,
.rmrp-textarea:focus-visible,
.field-input:focus,
.field-input:focus-visible,
.field-textarea:focus,
.field-textarea:focus-visible {
    border-color: var(--rmrp-field-border-focus);
    background: var(--rmrp-field-bg-focus);
    box-shadow: var(--rmrp-field-shadow-focus);
}

/* filled — непустой value (поддержка :placeholder-shown) */
input[type="text"]:not(:placeholder-shown):not(:focus):not(.toolbar-size-input),
input[type="password"]:not(:placeholder-shown):not(:focus),
input[type="email"]:not(:placeholder-shown):not(:focus),
input[type="search"]:not(:placeholder-shown):not(:focus),
input[type="url"]:not(:placeholder-shown):not(:focus),
input[type="tel"]:not(:placeholder-shown):not(:focus),
textarea:not(:placeholder-shown):not(:focus),
.rmrp-input:not(:placeholder-shown):not(:focus),
.rmrp-textarea:not(:placeholder-shown):not(:focus),
.field-input:not(:placeholder-shown):not(:focus),
.field-textarea:not(:placeholder-shown):not(:focus) {
    border-color: #34343f;
    background: #15151c;
}

input::placeholder,
textarea::placeholder,
.rmrp-input::placeholder,
.rmrp-textarea::placeholder,
.field-input::placeholder,
.field-textarea::placeholder {
    color: var(--rmrp-field-placeholder);
    font-weight: 500;
    opacity: 1;
}

input:disabled,
textarea:disabled,
.rmrp-input:disabled,
.rmrp-textarea:disabled,
.field-input:disabled,
.field-textarea:disabled,
input[readonly].rmrp-input,
.field-input[readonly] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #101014;
    border-color: #22222a;
    box-shadow: none;
    color: #9a9aa5;
}

/* error-состояние: класс на input или на обёртке */
input.is-error,
textarea.is-error,
.rmrp-input.is-error,
.rmrp-textarea.is-error,
.field-input.is-error,
.field-textarea.is-error,
.rmrp-field.is-error input,
.rmrp-field.is-error textarea,
.field-group.is-error input,
.field-group.is-error textarea,
.field.has-error input,
.account-modal .field.has-error input {
    border-color: var(--rmrp-field-border-error) !important;
    box-shadow: var(--rmrp-field-shadow-error) !important;
    background: rgba(230, 57, 57, 0.06);
}

input.is-error:focus,
textarea.is-error:focus,
.rmrp-input.is-error:focus,
.field-input.is-error:focus,
.rmrp-field.is-error input:focus,
.field-group.is-error input:focus {
    border-color: var(--rmrp-field-border-error) !important;
    box-shadow: var(--rmrp-field-shadow-error) !important;
}

/* success (валидный username и т.п.) */
input.is-success,
.rmrp-input.is-success,
.field-input.is-success,
.rmrp-field.is-success input {
    border-color: var(--rmrp-success) !important;
    box-shadow: 0 0 0 3px rgba(46, 196, 182, 0.16) !important;
}

/* Поля внутри .search-box / toolbar — без двойной рамки */
.search-box input,
.toolbar-input-group input,
.sound-select-wrap input,
.custom-select-wrap input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 0;
    padding-right: 0;
}

/* --- Тумблер (замена checkbox-флажка) --- */
.switch-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.switch-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.switch-track {
    display: inline-flex;
    align-items: center;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #252530;
    border: 1px solid #3a3a46;
    padding: 2px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.switch-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #888;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.switch-toggle input:checked + .switch-track {
    background: var(--rmrp-accent-soft);
    border-color: var(--rmrp-accent);
}

.switch-toggle input:checked + .switch-track .switch-thumb {
    transform: translateX(20px);
    background: var(--rmrp-accent);
    box-shadow: 0 0 10px rgba(230, 57, 57, 0.45);
}

.switch-toggle input:focus-visible + .switch-track {
    box-shadow: 0 0 0 3px var(--rmrp-accent-soft);
}

/* Зелёный тумблер для биндера */
.switch-toggle.switch-success input:checked + .switch-track {
    background: rgba(46, 196, 182, 0.2);
    border-color: var(--rmrp-success);
}

.switch-toggle.switch-success input:checked + .switch-track .switch-thumb {
    background: var(--rmrp-success);
    box-shadow: 0 0 8px rgba(46, 196, 182, 0.5);
}