/*
 * Тёмная тема — основная и единственная.
 *
 * Цвета задаются переменными Bootstrap 5.3, поэтому все его компоненты
 * (таблицы, формы, модалки, бейджи) подхватывают палитру сами, без правки разметки.
 */

:root,
[data-bs-theme="dark"] {
    /* color-scheme красит нативные контролы: календарь в input[type=date],
       выпадающие списки, полосы прокрутки. Без него дейтпикер остаётся белым. */
    color-scheme: dark;

    --fc-bg: #0e1117;
    --fc-surface: #161a22;
    --fc-surface-2: #1c212b;
    --fc-border: #262c38;
    --fc-text: #e6e9ef;
    --fc-muted: #8b93a7;
    --fc-accent: #6c8cff;
    --fc-accent-soft: rgba(108, 140, 255, .14);
    --fc-positive: #3ddc97;
    --fc-negative: #ff6b81;
    --fc-warning: #ffb454;
    --fc-radius: 14px;

    /* Размеры подписи к полю. Из них же считается отступ для колонок без подписи,
       иначе кнопка в строке формы встаёт на уровень подписи, а не поля. */
    --fc-label-size: .82rem;
    --fc-label-line: 1.35;
    --fc-label-gap: .3rem;
    --fc-label-offset: calc(var(--fc-label-size) * var(--fc-label-line) + var(--fc-label-gap));

    --bs-body-bg: var(--fc-bg);
    --bs-body-color: var(--fc-text);
    --bs-border-color: var(--fc-border);
    --bs-border-color-translucent: var(--fc-border);
    --bs-secondary-color: var(--fc-muted);
    --bs-emphasis-color: #fff;
    --bs-primary: var(--fc-accent);
    --bs-primary-rgb: 108, 140, 255;
    --bs-link-color: var(--fc-accent);
    --bs-link-hover-color: #8ba5ff;
    --bs-border-radius: var(--fc-radius);
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: 18px;

    --bs-tertiary-bg: var(--fc-surface-2);
    --bs-secondary-bg: var(--fc-surface-2);
}

body {
    background: var(--fc-bg);
    color: var(--fc-text);
    font-feature-settings: "tnum" 0;
    -webkit-font-smoothing: antialiased;
}

/* Пока Alpine.js не инициализировался, скрытые блоки не должны мелькать */
[x-cloak] {
    display: none !important;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------- Каркас: шапка и боковое меню ---------- */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    background: rgba(14, 17, 23, .85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fc-border);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--fc-text);
}

.app-brand:hover {
    color: var(--fc-text);
    text-decoration: none;
}

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: var(--fc-surface);
    color: var(--fc-text);
    flex: 0 0 auto;
}

.burger:hover {
    background: var(--fc-surface-2);
    border-color: var(--fc-accent);
}

.app-sidebar {
    background: var(--fc-surface);
    border-right: 1px solid var(--fc-border);
    width: 17rem;
}

.app-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--fc-border);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .8rem;
    margin-bottom: .15rem;
    border-radius: 10px;
    color: var(--fc-muted);
    font-size: .95rem;
}

.sidebar-link i {
    font-size: 1.05rem;
    width: 1.3rem;
    text-align: center;
}

.sidebar-link:hover {
    background: var(--fc-surface-2);
    color: var(--fc-text);
    text-decoration: none;
}

.sidebar-link.active {
    background: var(--fc-accent-soft);
    color: #cdd8ff;
}

.sidebar-section {
    padding: .5rem .8rem .25rem;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fc-muted);
}

.app-main {
    padding: 1.25rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* ---------- Карточки и типографика ---------- */

.card,
.metric-card {
    background: var(--fc-surface);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius);
    box-shadow: none;
}

.card-body {
    padding: 1.1rem 1.15rem;
}

.hero-number {
    font-size: 2.4rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.hero-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--fc-muted);
    margin-bottom: .2rem;
}

.metric-value {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.money-negative {
    color: var(--fc-negative);
}

.money-positive {
    color: var(--fc-positive);
}

.text-success {
    color: var(--fc-positive) !important;
}

.text-danger {
    color: var(--fc-negative) !important;
}

.text-muted,
.form-text {
    color: var(--fc-muted) !important;
}

/* ---------- Формы: одна сетка на всё приложение ---------- */

.form-label {
    font-size: var(--fc-label-size);
    line-height: var(--fc-label-line);
    color: var(--fc-muted);
    margin-bottom: var(--fc-label-gap);
}

.form-control,
.form-select {
    background: var(--fc-surface-2);
    border: 1px solid var(--fc-border);
    color: var(--fc-text);
    border-radius: 10px;
    padding: .5rem .75rem;
}

.form-control:focus,
.form-select:focus {
    background: var(--fc-surface-2);
    border-color: var(--fc-accent);
    color: var(--fc-text);
    box-shadow: 0 0 0 .2rem var(--fc-accent-soft);
}

.form-control::placeholder {
    color: #5c6478;
}

/* Иконка календаря в дейтпикере по умолчанию тёмная на тёмном — осветляем */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.55);
    cursor: pointer;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.9);
}

.form-check-input {
    background-color: var(--fc-surface-2);
    border-color: var(--fc-border);
}

.form-check-input:checked {
    background-color: var(--fc-accent);
    border-color: var(--fc-accent);
}

.form-check-input:focus {
    box-shadow: 0 0 0 .2rem var(--fc-accent-soft);
}

/*
 * Строки форм выравниваются по ВЕРХУ. При выравнивании по низу поле с подсказкой
 * тянет соседей вверх, и колонки разъезжаются — именно это и выглядело как
 * «поля смещены то вниз, то вверх».
 */
.form-row {
    align-items: flex-start !important;
}

/*
 * Колонка без подписи — кнопка или флажок. Её опускают ровно на высоту подписи
 * соседей, поэтому отступ считается из тех же переменных, а не подбирается на глаз.
 * На узком экране колонки идут друг под другом, и компенсировать нечего.
 */
.form-row .form-action {
    padding-top: var(--fc-label-offset);
}

/* Флажок ниже поля по высоте — центрируем его относительно строки ввода */
.form-row .form-action.d-flex {
    min-height: calc(var(--fc-label-offset) + 2.45rem);
    align-items: center;
}

@media (max-width: 767.98px) {
    .form-row .form-action {
        padding-top: 0;
    }

    .form-row .form-action.d-flex {
        min-height: 0;
    }
}

.invalid-feedback {
    color: var(--fc-negative);
}

/* ---------- Кнопки ---------- */

.btn {
    border-radius: 10px;
    font-weight: 500;
}

.btn-primary {
    background: var(--fc-accent);
    border-color: var(--fc-accent);
    color: #0b0f18;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #8ba5ff;
    border-color: #8ba5ff;
    color: #0b0f18;
}

.btn-success {
    background: var(--fc-positive);
    border-color: var(--fc-positive);
    color: #06231a;
}

.btn-success:hover {
    background: #5ee9ac;
    border-color: #5ee9ac;
    color: #06231a;
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-light {
    border-color: var(--fc-border);
    color: var(--fc-text);
    background: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover {
    background: var(--fc-surface-2);
    border-color: var(--fc-accent);
    color: var(--fc-text);
}

.btn-outline-danger {
    border-color: rgba(255, 107, 129, .35);
    color: var(--fc-negative);
}

.btn-outline-danger:hover {
    background: rgba(255, 107, 129, .12);
    border-color: var(--fc-negative);
    color: var(--fc-negative);
}

/* ---------- Таблицы ---------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fc-text);
    --bs-table-border-color: var(--fc-border);
    --bs-table-hover-bg: var(--fc-surface-2);
    --bs-table-hover-color: var(--fc-text);
    margin-bottom: 0;
}

.table > thead th {
    background: transparent;
    color: var(--fc-muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--fc-border);
    padding: .7rem .75rem;
}

.table > tbody td {
    border-color: var(--fc-border);
    padding: .7rem .75rem;
    vertical-align: middle;
}

.table-compact td,
.table-compact th {
    padding: .4rem .6rem;
    font-size: .86rem;
}

/* Таблица графика длинная, поэтому шапка липкая */
.schedule-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--fc-surface);
}

.schedule-scroll {
    max-height: 30rem;
    overflow-y: auto;
}

/* ---------- Бейджи и уведомления ---------- */

.badge {
    font-weight: 500;
    padding: .35em .6em;
    border-radius: 8px;
}

.bg-success {
    background: rgba(61, 220, 151, .16) !important;
    color: var(--fc-positive) !important;
}

.bg-danger {
    background: rgba(255, 107, 129, .16) !important;
    color: var(--fc-negative) !important;
}

.bg-warning {
    background: rgba(255, 180, 84, .16) !important;
    color: var(--fc-warning) !important;
}

.bg-primary {
    background: var(--fc-accent-soft) !important;
    color: #cdd8ff !important;
}

.bg-secondary {
    background: var(--fc-surface-2) !important;
    color: var(--fc-muted) !important;
}

.alert {
    border-radius: 12px;
    border: 1px solid var(--fc-border);
    background: var(--fc-surface-2);
    color: var(--fc-text);
}

.alert-success {
    border-color: rgba(61, 220, 151, .3);
    background: rgba(61, 220, 151, .1);
}

.alert-danger {
    border-color: rgba(255, 107, 129, .3);
    background: rgba(255, 107, 129, .1);
}

.alert-warning {
    border-color: rgba(255, 180, 84, .3);
    background: rgba(255, 180, 84, .1);
}

.alert-info {
    border-color: rgba(108, 140, 255, .3);
    background: var(--fc-accent-soft);
}

.alert-secondary {
    background: var(--fc-surface-2);
}

/* ---------- Бюджет ---------- */

.envelope-row.overspent {
    background-color: rgba(255, 107, 129, .07);
}

.envelope-slider {
    accent-color: var(--fc-accent);
}

.progress {
    background: var(--fc-surface-2);
    border-radius: 6px;
}

.progress-bar.bg-success {
    background: var(--fc-positive) !important;
}

.progress-bar.bg-warning {
    background: var(--fc-warning) !important;
}

.progress-bar.bg-danger {
    background: var(--fc-negative) !important;
}

/* Счётчик нераспределённого остатка липнет к низу страницы */
.budget-summary {
    position: sticky;
    bottom: 0;
    z-index: 5;
    border-top: 1px solid var(--fc-border);
    background: rgba(22, 26, 34, .95);
    backdrop-filter: blur(10px);
}

/* ---------- Календарь платежей ---------- */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .5rem;
}

.calendar-day {
    min-height: 7rem;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    padding: .45rem .55rem;
    background: var(--fc-surface);
    font-size: .8rem;
}

.calendar-day.weekend {
    background: var(--fc-surface-2);
}

.calendar-day.cash-gap {
    border-color: rgba(255, 107, 129, .5);
    background: rgba(255, 107, 129, .08);
}

.calendar-day .day-number {
    font-weight: 600;
    color: var(--fc-muted);
}

.calendar-entry {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grace-countdown {
    font-size: 1.7rem;
    font-weight: 650;
}

.strategy-card.active {
    border-color: var(--fc-accent);
    box-shadow: 0 0 0 1px var(--fc-accent);
}

/* ---------- Мобильные устройства ---------- */

@media (max-width: 767.98px) {
    .app-main {
        padding: .9rem .75rem 1.5rem;
    }

    .hero-number {
        font-size: 1.85rem;
    }

    .metric-value {
        font-size: 1.15rem;
    }

    .grace-countdown {
        font-size: 1.4rem;
    }

    /* Календарь в семь колонок на телефоне нечитаем — разворачиваем в список дней */
    .calendar-grid {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .calendar-weekdays,
    .calendar-blank,
    .calendar-day.is-empty {
        display: none;
    }

    .calendar-day {
        min-height: auto;
    }

    .schedule-scroll {
        max-height: 22rem;
    }

    .budget-summary .hero-label {
        font-size: .62rem;
    }

    .budget-summary .metric-value {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .form-control,
    .form-select {
        font-size: 16px; /* меньше 16px — Safari зумит страницу при фокусе */
    }

    .table-responsive {
        font-size: .85rem;
    }
}