@charset "UTF-8";
/* ==========================================================
   UI BUTTONS — стили всех кнопок
   ========================================================== */

.btn {
    border-radius:  var(--ui-radius);
    font-weight:    500;
    font-size:      0.875rem;
    padding:        0.44rem 1.1rem;
    letter-spacing: 0.01em;
    line-height:    1.5;
    border:         1px solid transparent;
    transition:
        background   var(--ui-transition),
        box-shadow   var(--ui-transition),
        border-color var(--ui-transition);
}

.btn:active:not(:disabled) {
    box-shadow: none !important;
}

.btn:disabled,
.btn.disabled {
    opacity:    0.55;
    transform:  none;
    box-shadow: none;
}


/* ----------------------------------------------------------
   Primary  (#4a8ef8 → #1d4ed8)
   ---------------------------------------------------------- */

.btn-primary {
    background:   linear-gradient(135deg, #4a8ef8 0%, #2563eb 100%);
    border:       none;
    color:        #fff;
    box-shadow:   0 2px 6px rgba(37, 99, 235, 0.30),
                  inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-primary:hover,
.btn-primary:focus {
    background:   linear-gradient(135deg, #3b7eed 0%, #1d4ed8 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(37, 99, 235, 0.42),
                  inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-outline-primary {
    background:   transparent;
    border-color: var(--c-primary);
    color:        var(--c-primary);
    box-shadow:   none;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background:   linear-gradient(135deg, #4a8ef8 0%, #2563eb 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(37, 99, 235, 0.38);
}


/* ----------------------------------------------------------
   Info  (#38bdf8 → #0284c7)
   ---------------------------------------------------------- */

.btn-info {
    background:   linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    border:       none;
    color:        #fff;
    box-shadow:   0 2px 6px rgba(2, 132, 199, 0.30),
                  inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-info:hover,
.btn-info:focus {
    background:   linear-gradient(135deg, #22d3ee 0%, #0369a1 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(2, 132, 199, 0.42),
                  inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-outline-info {
    background:   transparent;
    border-color: var(--c-info);
    color:        var(--c-info);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background:   linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(2, 132, 199, 0.38);
}


/* ----------------------------------------------------------
   Success  (#4ade80 → #16a34a)
   ---------------------------------------------------------- */

.btn-success {
    background:   linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
    border:       none;
    color:        #fff;
    box-shadow:   0 2px 6px rgba(22, 163, 74, 0.30),
                  inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-success:hover,
.btn-success:focus {
    background:   linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(22, 163, 74, 0.42),
                  inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-outline-success {
    background:   transparent;
    border-color: var(--c-success);
    color:        var(--c-success-h);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background:   linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(22, 163, 74, 0.38);
}


/* ----------------------------------------------------------
   Warning  (#fcd34d → #d97706)
   ---------------------------------------------------------- */

.btn-warning {
    background:   linear-gradient(135deg, #fcd34d 0%, #d97706 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 2px 6px rgba(217, 119, 6, 0.30),
                  inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-warning:hover,
.btn-warning:focus {
    background:   linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(217, 119, 6, 0.42),
                  inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-outline-warning {
    background:   transparent;
    border-color: #f59e0b;
    color:        #b45309;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background:   linear-gradient(135deg, #fcd34d 0%, #d97706 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(217, 119, 6, 0.38);
}


/* ----------------------------------------------------------
   Danger  (#f87171 → #b91c1c)
   ---------------------------------------------------------- */

.btn-danger {
    background:   linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 2px 6px rgba(220, 38, 38, 0.30),
                  inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-danger:hover,
.btn-danger:focus {
    background:   linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(220, 38, 38, 0.42),
                  inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-outline-danger {
    background:   transparent;
    border-color: var(--c-danger);
    color:        var(--c-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background:   linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(220, 38, 38, 0.38);
}


/* ----------------------------------------------------------
   Secondary  (#94a3b8 → #475569)
   ---------------------------------------------------------- */

.btn-secondary {
    background:   linear-gradient(135deg, #94a3b8 0%, #475569 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 2px 6px rgba(71, 85, 105, 0.28),
                  inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background:   linear-gradient(135deg, #64748b 0%, #334155 100%);
    border-color: transparent;
    color:        #fff;
    box-shadow:   0 6px 18px rgba(71, 85, 105, 0.38),
                  inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-outline-secondary {
    background:   transparent;
    border-color: #c8d0da;
    color:        var(--c-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background:   #f1f5f9;
    border-color: #94a3b8;
    color:        var(--c-secondary-h);
    box-shadow:   0 3px 10px rgba(71, 85, 105, 0.15);
}


/* ----------------------------------------------------------
   Размеры
   ---------------------------------------------------------- */

.btn-sm {
    padding:       0.3rem 0.75rem;
    font-size:     0.8rem;
    border-radius: var(--ui-radius-sm);
}

.btn-lg {
    padding:       0.6rem 1.5rem;
    font-size:     1rem;
    border-radius: calc(var(--ui-radius) + 1px);
}

.btn-block {
    width: 100%;
}


/* ----------------------------------------------------------
   Тёмная тема
   ---------------------------------------------------------- */

.dark-mode .btn-outline-secondary {
    border-color: #3d4a5c;
    color:        #8fa3be;
}

.dark-mode .btn-outline-secondary:hover,
.dark-mode .btn-outline-secondary:focus {
    background:   #2e3a4e;
    border-color: #5a6a7e;
    color:        #c8d6e8;
    box-shadow:   0 3px 10px rgba(0, 0, 0, 0.25);
}

/* Fix: app.css `.dark-mode a { color: #ccf }` overrides btn-outline anchor colors.
   These selectors have specificity 0,2,0 which beats 0,1,1 of `.dark-mode a`. */
.dark-mode .btn-outline-primary { color: var(--c-primary); }
.dark-mode .btn-outline-success { color: var(--c-success-h); }
.dark-mode .btn-outline-danger  { color: var(--c-danger); }
.dark-mode .btn-outline-info    { color: var(--c-info); }
.dark-mode .btn-outline-warning { color: #b45309; }

/* Icons inside buttons inherit button text color, overriding app.css
   `.dark-mode .fa { color: white }` which erases color distinction. */
.dark-mode .btn .fa,
.dark-mode .btn .fas,
.dark-mode .btn .far,
.dark-mode .btn .fab {
    color: inherit;
}


/* ----------------------------------------------------------
   Mobile — кнопки на 100% ширины (< 576px)
   ---------------------------------------------------------- */

@media (max-width: 575.98px) {
    /* Главные кнопки действий (не -sm, не dropdown-toggle, не close) */
    .card-body .btn:not(.btn-sm):not(.dropdown-toggle):not(.close),
    .modal-footer .btn {
        display:       block;
        width:         100%;
        margin-right:  0 !important;
        margin-left:   0 !important;
        margin-bottom: 0.45rem;
    }

    /* Последняя кнопка не нужен нижний отступ */
    .card-body .btn:not(.btn-sm):not(.dropdown-toggle):not(.close):last-child,
    .modal-footer .btn:last-child {
        margin-bottom: 0;
    }

    /* Исключение: кнопки внутри input-group остаются инлайн */
    .input-group .btn,
    .input-group-append .btn,
    .input-group-prepend .btn {
        display:       inline-flex !important;
        width:         auto !important;
        margin-bottom: 0 !important;
    }

    /* Исключение: кнопки в ячейках таблицы */
    td .btn,
    th .btn {
        display:       inline-block !important;
        width:         auto !important;
        margin-bottom: 0 !important;
    }

    /* Исключение: кнопки внутри btn-group */
    .btn-group  .btn,
    .btn-group-vertical .btn {
        display:       inline-block !important;
        width:         auto !important;
        margin-bottom: 0 !important;
    }
}