/* ========================================
   UI COMPONENTS SYSTEM - Единая система стилей для RodX
   ======================================== */

/* ========== BUTTONS ========== */

/* Базовый класс для всех кнопок */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
    outline: none;
}

/* Стандартная кнопка (эталон из Sections Modal) */
.btn-standard {
    min-width: 50px;
    height: 22px;
    padding: 0 10px;
    border-radius: 10px;
    background-color: #BABCBB;
    color: #000000;
    font-size: 14px;
    border: 0.3px solid transparent;
}

.btn-standard:hover {
    border-color: #000000;
}

.btn-standard:active {
    background-color: #E1F6EF;
    color: #529774;
    border-color: #529774;
}

/* Export Button (например, XLS в панели Results) */
.btn-export {
    min-width: 48px;
    height: 22px;
    padding: 0 12px;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #529774;
    font-size: 14px;
    font-weight: 400;
    border: 0.5px solid #529774;
}

.btn-export:hover {
    background-color: #E1F6EF;
    border-color: #3d7558;
}

.btn-export:active {
    background-color: #529774;
    color: #FFFFFF;
}

/* Small variant for mobile */
.btn-export.btn-sm {
    min-width: 40px;
    height: 18px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
}

/* Diagram Toggle Button (M, N, Q, Ux, Uy, Uxy) */
.btn-diagram {
    flex: 1;
    height: 28px;
    min-width: 32px;
    padding: 0 8px;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #529774;
    font-size: 12px;
    font-weight: 300;
    border: 0.5px solid #529774;
}

.btn-diagram:hover {
    border-color: #3A6F56;
    color: #3A6F56;
}

.btn-diagram:focus-visible {
    outline: none;
}

.btn-diagram.active {
    background-color: #E1F6EF;
    border-color: #529774;
    color: #2F5D46;
    box-shadow: 0 0 0 1px rgba(82, 151, 116, 0.25);
}

/* Small variant for mobile */
.btn-diagram.btn-sm {
    height: 24px;
    min-width: 28px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 11px;
}

/* Asterisk Button (для вставки символа * в input) */
.btn-asterisk {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #529774;
    font-size: 16px;
    border: 1px solid #d1d5db;
}

.btn-asterisk:hover {
    background-color: #f3f4f6;
    border-color: #529774;
}

.btn-asterisk:active {
    background-color: #E1F6EF;
    border-color: #529774;
}

/* Кнопка для опасных действий (Delete) - круглая с крестиком */
.btn-danger {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border-radius: 50%;
    background-color: #F6E5E1;
    border: 0.3px solid #F25757;
    position: relative;
    font-size: 0;
}

/* Крест внутри кнопки - две линии под 45 градусов */
.btn-danger::before,
.btn-danger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 0.3px;
    background-color: #F25757;
    transform-origin: center;
}

.btn-danger::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.btn-danger::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.btn-danger:hover {
    background-color: #F8CAC0;
}

.btn-danger:active {
    background-color: #BABCBB;
    border-color: #000000;
}

.btn-danger:active::before,
.btn-danger:active::after {
    background-color: #000000;
}

/* Состояние disabled для кнопки удаления */
.btn-danger:disabled {
    background-color: #F5F5F5;
    border-color: #BABCBB;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-danger:disabled::before,
.btn-danger:disabled::after {
    background-color: #BABCBB;
}

/* Маленькая кнопка - модификатор размера (Mobile) */
.btn-sm,
.btn-small {
    min-width: 48px;
    height: 18px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 8px;
}

/* Комбинация btn-standard + btn-sm */
.btn-standard.btn-sm,
.btn-standard.btn-small {
    min-width: 48px;
    height: 18px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 8px;
}

/* Кнопка-иконка (без текста) */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #cbd5e0;
}

.btn-icon:hover {
    background-color: #d1d9e2;
    border-color: #a0aec0;
}

.btn-icon.active {
    background-color: #a7d9f7;
    border-color: #3490dc;
    box-shadow: 0 0 0 3px rgba(52, 144, 220, 0.4);
}

/* Кнопка закрытия модалки (крестик ×) */
.btn-close {
    background: none;
    border: none;
    font-size: 30px;
    font-weight: 600;
    cursor: pointer;
    color: #529774;
    padding: 4px 8px;
    line-height: 1;
}

.btn-close:hover {
    opacity: 0.7;
}

/* ========== INPUT FIELDS ========== */

/* Базовый класс для input полей */
.input-field {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #ffffff;
    color: #000000;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 300;
    box-sizing: border-box;
}

.input-field:focus {
    outline: none;
    border-color: #529774;
    box-shadow: 0 0 0 2px rgba(82, 151, 116, 0.2);
}

.input-field:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Маленькое input поле */
.input-field-small {
    padding: 2px 6px;
    font-size: 12px;
}

/* ========== SELECT DROPDOWNS ========== */

.select-field {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #ffffff;
    color: #000000;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 300;
    box-sizing: border-box;
    cursor: pointer;
}

.select-field:focus {
    outline: none;
    border-color: #529774;
    box-shadow: 0 0 0 2px rgba(82, 151, 116, 0.2);
}

/* ========== MODALS ========== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-title {
    font-size: 18px;
    font-weight: 400;
    color: #1f2937;
}

.modal-body {
    margin-bottom: 0px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

/* ========== CHECKBOXES ========== */

.checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 0.5px solid #000000;
    background-color: #FFFFFF;
    position: relative;
    margin-right: 6px;
    cursor: pointer;
}

.checkbox:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    background-color: #529774;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ========== LABELS ========== */

.label {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #374151;
    margin-bottom: 4px;
}

.label-inline {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
    color: #374151;
}

/* ========== PANELS ========== */

.panel {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 11px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 12px;
}

.panel-header {
    font-size: 14px;
    margin-bottom: 11px;
    color: #333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    font-weight: 400;
}

/* ========== UTILITY CLASSES ========== */

.text-error {
    color: #dc3545;
}

.text-success {
    color: #529774;
}

.text-muted {
    color: #6b7280;
}

.mb-2 {
    margin-bottom: 8px;
}

.mt-2 {
    margin-top: 8px;
}

.gap-2 {
    gap: 8px;
}

/* ========== CHECKBOX ========== */
/* 
 * Чекбокс с зелёной точкой — стандартный компонент RodX
 * Два размера: standard (18px) и small (14px)
 */

/* Standard checkbox (18x18) - для bottom bar и основных форм */
.checkbox-standard {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 0.5px solid #000000;
    border-radius: 4px;
    background-color: #FFFFFF;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-standard:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    background-color: #529774;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.checkbox-standard:hover {
    border-color: #529774;
}

.checkbox-standard:focus {
    outline: none;
    border-color: #529774;
}

/* Small checkbox (14x14) - для property panel и компактных форм */
.checkbox-small {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 0.5px solid #000000;
    border-radius: 3px;
    background-color: #FFFFFF;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-small:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    background-color: #529774;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.checkbox-small:hover {
    border-color: #529774;
}

.checkbox-small:focus {
    outline: none;
    border-color: #529774;
}

/* Checkbox with label wrapper */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #1f2933;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.checkbox-label-small {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #1f2933;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

/* ========== RADIO BUTTONS ========== */
/* 
 * Radio button с чёрной обводкой и зелёной точкой
 * Два размера: standard (14px) и small (12px для mobile)
 */

/* Standard radio (14x14) - для desktop */
.radio-standard {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #000000;
    border-radius: 50%;
    background-color: #FFFFFF;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.radio-standard::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #529774;
    transform: scale(0);
    transition: transform 0.15s ease-in-out;
}

.radio-standard:checked::after {
    transform: scale(1);
}

.radio-standard:hover {
    border-color: #529774;
}

.radio-standard:focus {
    outline: none;
    border-color: #529774;
}

.radio-standard:focus-visible {
    outline: 2px solid #E1F6EF;
    outline-offset: 2px;
}

/* Small radio (12x12) - для mobile */
.radio-small {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border: 1px solid #000000;
    border-radius: 50%;
    background-color: #FFFFFF;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.radio-small::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #529774;
    transform: scale(0);
    transition: transform 0.15s ease-in-out;
}

.radio-small:checked::after {
    transform: scale(1);
}

.radio-small:hover {
    border-color: #529774;
}

.radio-small:focus {
    outline: none;
    border-color: #529774;
}

.radio-small:focus-visible {
    outline: 2px solid #E1F6EF;
    outline-offset: 2px;
}

/* Radio with label wrapper */
.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #000000;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.radio-label-small {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #000000;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

/* ========== MOBILE MODAL STANDARD ========== */
/* 
 * Стандартный размер модального окна для мобильной версии (max-width: 768px)
 * Применяется к: Material Manager, Section Manager, Load Cases, и другим модалкам
 * 
 * Спецификация:
 * - Width: calc(100% - 20px) — полная ширина минус отступы
 * - Max-width: none — без ограничения максимальной ширины
 * - Height: 69vh — 69% высоты viewport
 * - Max-height: 69vh — ограничение высоты
 * - Margin: 10px — отступы от краёв экрана
 * - Padding: 12px — внутренние отступы
 * - Overflow: hidden на контейнере, auto на body
 * - Display: flex, flex-direction: column
 * 
 * Шрифты внутри модалки:
 * - h2 (заголовок): 16px
 * - h3 (подзаголовки секций): 13px, margin-bottom: 6px
 * - label: 12px, margin-bottom: 2px
 * - select, input: 12px, padding: 4px 6px
 * - button.btn: 11px, padding: 5px 10px
 */

/* ========== SELECT (DROPDOWN) ========== */

/* DEFAULT (Desktop) - height 28px, radius 8px, width 80px */
.select-standard {
    width: 80px;
    height: 28px;
    padding: 2px 24px 2px 8px;
    border-radius: 8px;
    background-color: #FFFFFF;
    border: 1px solid #d1d5db;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'><path d='M0 0 L4 6 L8 0 Z' fill='%23529774'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select-standard:hover {
    border-color: #529774;
}

.select-standard:focus {
    outline: none;
    border-color: #529774;
    box-shadow: 0 0 0 3px rgba(82, 151, 116, 0.15);
}

.select-standard:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

.select-standard option {
    padding: 8px;
    font-size: 14px;
}

/* SMALL (Mobile) - height 24px, radius 6px */
.select-standard.select-sm {
    height: 24px;
    padding: 2px 22px 2px 6px;
    font-size: 12px;
    border-radius: 6px;
    background-position: right 6px center;
    background-size: 8px 6px;
}

/* Width variations */
.select-standard.select-auto { width: auto; }
.select-standard.select-full { width: 100%; }
.select-standard.select-w60 { width: 60px; }
.select-standard.select-w80 { width: 80px; }
.select-standard.select-w100 { width: 100px; }
.select-standard.select-w120 { width: 120px; }
.select-standard.select-w150 { width: 150px; }
.select-standard.select-w200 { width: 200px; }

/* ========== INPUT (TEXT FIELD) ========== */

/* DEFAULT (Desktop) - height 28px, radius 8px, width 120px */
.input-standard {
    width: 120px;
    height: 28px;
    padding: 2px 8px;
    border-radius: 8px;
    background-color: #FFFFFF;
    border: 1px solid #d1d5db;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #000000;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-standard::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.input-standard:hover {
    border-color: #529774;
}

.input-standard:focus {
    outline: none;
    border-color: #529774;
    box-shadow: 0 0 0 3px rgba(82, 151, 116, 0.15);
}

.input-standard:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* SMALL (Mobile) - height 24px, radius 6px */
.input-standard.input-sm {
    height: 24px;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 6px;
}

/* Width variations */
.input-standard.input-auto { width: auto; }
.input-standard.input-full { width: 100%; }
.input-standard.input-w60 { width: 60px; }
.input-standard.input-w80 { width: 80px; }
.input-standard.input-w100 { width: 100px; }
.input-standard.input-w120 { width: 120px; }
.input-standard.input-w150 { width: 150px; }
.input-standard.input-w200 { width: 200px; }

@media (max-width: 768px) {
    .modal-mobile-standard {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        height: 69vh !important;
        max-height: 69vh !important;
        margin: 10px !important;
        padding: 12px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal-mobile-standard .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }

    .modal-mobile-standard h2 {
        font-size: 16px !important;
    }

    .modal-mobile-standard h3 {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .modal-mobile-standard label {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }

    .modal-mobile-standard select,
    .modal-mobile-standard input {
        font-size: 12px !important;
        padding: 4px 6px !important;
    }

    .modal-mobile-standard button.btn:not(.btn-close) {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
}