/* =======================================================
   BASE
   ======================================================= */
body.bg-main {
    background: #f3f5fb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding-bottom: 50px;
}

body {
    overflow-x: hidden;
    margin: 0;
}

.page-title {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* =======================================================
   NAVBAR
   ======================================================= */
.navbar-gradient {
    background: linear-gradient(90deg, #111827, #1f2937);
}

/* Іконка мобільного меню більше видима */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}
.navbar-toggler-icon {
    filter: brightness(2);
}

/* =======================================================
   CARDS / PANELS
   ======================================================= */
.card-glass {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}

.stat-card {
    border-radius: 1rem;
    border: none;
    background: linear-gradient(135deg, #e0f2fe, #e5e7eb);
    transition: transform .15s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
}

/* Карточки, таблиці, превʼю з невеликим відступом знизу */
.card,
.btn,
.table,
.rules-preview {
    margin-bottom: 0.3rem;
}

/* =======================================================
   BUTTONS – ЗАГАЛЬНІ
   ======================================================= */

/* Кнопка "INICIAR HORAS" */
.btn-iniciar {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    color: #0f172a;
}
.btn-iniciar:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #0f172a;
}

/* М’які градієнти для стандартних Bootstrap-кнопок */

/* PRIMARY */
.btn-primary {
    background: linear-gradient(135deg, #7fb3ff, #5d8eff);
    border: none;
    color: #ffffff;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #6aa4ff, #4c7dff);
    color: #ffffff;
}

/* SUCCESS */
.btn-success {
    background: linear-gradient(135deg, #6ee7b7, #22c55e);
    border: none;
    color: #064e3b;
}
.btn-success:hover {
    background: linear-gradient(135deg, #4ade80, #16a34a);
    color: #022c22;
}

/* WARNING */
.btn-warning {
    background: linear-gradient(135deg, #facc6b, #f59e0b);
    border: none;
    color: #78350f;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #451a03;
}

/* INFO */
.btn-info {
    background: linear-gradient(135deg, #7dd3fc, #0ea5e9);
    border: none;
    color: #0f172a;
}
.btn-info:hover {
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    color: #0b1120;
}

/* OUTLINE залишаємо більш спокійними */
.btn-outline-danger,
.btn-outline-primary,
.btn-outline-secondary {
    border-radius: 999px;
}

/* Адаптивний розмір кнопок:
   - на мобільних більші (легше тицяти),
   - на десктопі трохи компактніші.
*/
.btn {
    border-radius: 999px;
}

/* Мобільні – кнопки крупніші */
@media (max-width: 576px) {
    .btn {
        padding-top: 0.7rem !important;
        padding-bottom: 0.7rem !important;
        font-size: 1rem !important;
    }
}

/* Десктоп – трішки менші */
@media (min-width: 992px) {
    .btn {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
        font-size: 0.9rem;
    }
}

/* Мʼяка уніфікована кнопка (можеш використовувати де хочеш) */
.btn-soft {
    background: linear-gradient(135deg, #7fb3ff, #5d8eff);
    color: #ffffff !important;
    border: none;
    padding: 0.55rem 1.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.btn-soft:hover {
    background: linear-gradient(135deg, #76a7ff, #4c7dff);
    transform: translateY(-1px);
}
.btn-soft:active {
    transform: scale(0.97);
}

/* Додатковий клас для адаптивної кнопки */
.btn-responsive {
    padding: 0.85rem 1.8rem;
    font-size: 1rem;
}
@media (min-width: 768px) {
    .btn-responsive {
        padding: 0.55rem 1.3rem;
        font-size: 0.9rem;
    }
}

/* =======================================================
   TABLES
   ======================================================= */
.table > :not(caption) > * > * {
    vertical-align: middle;
}

/* Великий текст у таблицях на мобільних не влазить */
@media (max-width: 576px) {
    table.table {
        font-size: 0.8rem;
    }
    table.table th {
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

/* =======================================================
   BADGES (календар та ін.)
   ======================================================= */
.badge {
    font-size: 0.7rem;
    padding: 4px 6px;
}

/* =======================================================
   CARD HEADER – адаптивність
   ======================================================= */
.card-header {
    padding: 0.9rem 1.2rem;
}
@media (max-width: 576px) {
    .card-header {
        text-align: center;
    }
}

/* =======================================================
   FORMS
   ======================================================= */
form .form-control,
form .form-select {
    border-radius: 0.7rem;
}

/* На мобільних поля більші — зручніше вводити */
@media (max-width: 576px) {
    form .form-control,
    form .form-select {
        font-size: 1rem;
        padding: 0.7rem 0.9rem;
    }
}

/* =======================================================
   RULES PREVIEW
   ======================================================= */
.rules-preview {
    font-size: 0.95rem;
    line-height: 1.45;
}
@media (max-width: 576px) {
    .rules-preview {
        font-size: 0.9rem;
    }
}