/* Стили страниц на Bootstrap 5 (layout.php).
   Палитра приглушённая: мягкие акценты, не чисто-чёрный текст, подложки вместо насыщенных заливок.
   Тёмная тема — атрибут data-bs-theme="dark" на <html> (переключатель в шапке, выбор в localStorage). */

/* ---------- Светлая тема ---------- */
:root, [data-bs-theme=light] {
    --vn-primary: #3d7ea6;   --vn-primary-rgb: 61, 126, 166;
    --vn-success: #4a8f6a;   --vn-success-rgb: 74, 143, 106;
    --vn-danger:  #b9534f;   --vn-danger-rgb: 185, 83, 79;
    --vn-warning: #b9862f;   --vn-warning-rgb: 185, 134, 47;
    --vn-muted-strong: #545a63;
    --vn-thead-bg: #f6f7f9;
    --vn-row-off: rgba(185, 83, 79, .07);
    --vn-row-hover: rgba(61, 126, 166, .05);
    --vn-on-accent: #ffffff;

    --bs-body-color: #2d3138;        --bs-body-color-rgb: 45, 49, 56;
    --bs-body-bg: #ffffff;           --bs-body-bg-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(45, 49, 56, .68);
    --bs-tertiary-color: rgba(45, 49, 56, .5);
    --bs-tertiary-bg: #f3f4f6;       --bs-tertiary-bg-rgb: 243, 244, 246;
    --bs-secondary-bg: #eceef1;
    --bs-border-color: #e3e6ea;
    --bs-emphasis-color: #1e2126;
    --bs-heading-color: #262a30;

    --bs-primary: var(--vn-primary); --bs-primary-rgb: var(--vn-primary-rgb);
    --bs-success: var(--vn-success); --bs-success-rgb: var(--vn-success-rgb);
    --bs-danger: var(--vn-danger);   --bs-danger-rgb: var(--vn-danger-rgb);
    --bs-warning: var(--vn-warning); --bs-warning-rgb: var(--vn-warning-rgb);
    --bs-primary-text-emphasis: #2c5e7d; --bs-primary-bg-subtle: #e6f0f6; --bs-primary-border-subtle: #c3d9e7;
    --bs-success-text-emphasis: #336a4d; --bs-success-bg-subtle: #e7f2ec; --bs-success-border-subtle: #c4e0d0;
    --bs-danger-text-emphasis: #8c3b38;  --bs-danger-bg-subtle: #f8e9e8;  --bs-danger-border-subtle: #ecc9c7;
    --bs-warning-text-emphasis: #7d5a1d; --bs-warning-bg-subtle: #f8f0e1; --bs-warning-border-subtle: #ead7b3;
    --bs-link-color: var(--vn-primary); --bs-link-color-rgb: var(--vn-primary-rgb);
    --bs-link-hover-color: #2c5e7d;     --bs-link-hover-color-rgb: 44, 94, 125;
    --bs-link-decoration: none;
}

/* ---------- Тёмная тема ---------- */
[data-bs-theme=dark] {
    --vn-primary: #6fa8cc;   --vn-primary-rgb: 111, 168, 204;
    --vn-success: #6fb48c;   --vn-success-rgb: 111, 180, 140;
    --vn-danger:  #d9827e;   --vn-danger-rgb: 217, 130, 126;
    --vn-warning: #d6a85a;   --vn-warning-rgb: 214, 168, 90;
    --vn-muted-strong: #b4bac3;
    --vn-thead-bg: #23272e;
    --vn-row-off: rgba(217, 130, 126, .09);
    --vn-row-hover: rgba(111, 168, 204, .06);
    --vn-on-accent: #15181c;

    --bs-body-color: #d3d6dc;        --bs-body-color-rgb: 211, 214, 220;
    --bs-body-bg: #1f2228;           --bs-body-bg-rgb: 31, 34, 40;
    --bs-secondary-color: rgba(211, 214, 220, .64);
    --bs-tertiary-color: rgba(211, 214, 220, .45);
    --bs-tertiary-bg: #17191d;       --bs-tertiary-bg-rgb: 23, 25, 29;
    --bs-secondary-bg: #282c33;
    --bs-border-color: #343a42;
    --bs-emphasis-color: #eceef1;
    --bs-heading-color: #e3e6ea;

    --bs-primary: var(--vn-primary); --bs-primary-rgb: var(--vn-primary-rgb);
    --bs-success: var(--vn-success); --bs-success-rgb: var(--vn-success-rgb);
    --bs-danger: var(--vn-danger);   --bs-danger-rgb: var(--vn-danger-rgb);
    --bs-warning: var(--vn-warning); --bs-warning-rgb: var(--vn-warning-rgb);
    --bs-primary-text-emphasis: #a9cde3; --bs-primary-bg-subtle: #1f3340; --bs-primary-border-subtle: #2f4d60;
    --bs-success-text-emphasis: #a6d6b9; --bs-success-bg-subtle: #1f3329; --bs-success-border-subtle: #2f4d3d;
    --bs-danger-text-emphasis: #edb2af;  --bs-danger-bg-subtle: #3a2423;  --bs-danger-border-subtle: #5a3533;
    --bs-warning-text-emphasis: #ead0a0; --bs-warning-bg-subtle: #382e1d; --bs-warning-border-subtle: #57472a;
    --bs-link-color: var(--vn-primary); --bs-link-color-rgb: var(--vn-primary-rgb);
    --bs-link-hover-color: #a9cde3;     --bs-link-hover-color-rgb: 169, 205, 227;
    color-scheme: dark;
}

body { background: var(--bs-tertiary-bg); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Кнопки на приглушённых цветах ---------- */
.btn-primary, .btn-outline-primary { --vn-c: var(--vn-primary); --vn-rgb: var(--vn-primary-rgb); }
.btn-success, .btn-outline-success { --vn-c: var(--vn-success); --vn-rgb: var(--vn-success-rgb); }
.btn-danger,  .btn-outline-danger  { --vn-c: var(--vn-danger);  --vn-rgb: var(--vn-danger-rgb); }
.btn-warning { --vn-c: var(--vn-warning); --vn-rgb: var(--vn-warning-rgb); }
.btn-primary, .btn-success, .btn-danger, .btn-warning {
    --bs-btn-color: var(--vn-on-accent); --bs-btn-hover-color: var(--vn-on-accent);
    --bs-btn-active-color: var(--vn-on-accent); --bs-btn-disabled-color: var(--vn-on-accent);
    --bs-btn-bg: var(--vn-c); --bs-btn-border-color: var(--vn-c);
    --bs-btn-hover-bg: color-mix(in srgb, var(--vn-c) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--vn-c) 86%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--vn-c) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--vn-c) 78%, #000);
    --bs-btn-disabled-bg: var(--vn-c); --bs-btn-disabled-border-color: var(--vn-c);
    --bs-btn-focus-shadow-rgb: var(--vn-rgb);
}
.btn-outline-primary, .btn-outline-success, .btn-outline-danger {
    --bs-btn-color: var(--vn-c); --bs-btn-border-color: rgba(var(--vn-rgb), .45);
    --bs-btn-hover-color: var(--vn-c); --bs-btn-hover-bg: rgba(var(--vn-rgb), .1); --bs-btn-hover-border-color: var(--vn-c);
    --bs-btn-active-color: var(--vn-on-accent); --bs-btn-active-bg: var(--vn-c); --bs-btn-active-border-color: var(--vn-c);
    --bs-btn-disabled-color: var(--vn-c); --bs-btn-disabled-border-color: rgba(var(--vn-rgb), .3);
    --bs-btn-focus-shadow-rgb: var(--vn-rgb);
}
.btn-outline-secondary {
    --bs-btn-color: var(--vn-muted-strong); --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color);
}
.btn-link { --bs-btn-color: var(--vn-primary); --bs-btn-hover-color: var(--bs-link-hover-color); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

.form-control:focus, .form-select:focus {
    border-color: rgba(var(--vn-primary-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--vn-primary-rgb), .16);
}
.btn-check:focus-visible + .btn { box-shadow: 0 0 0 .2rem rgba(var(--vn-primary-rgb), .25); }
.form-check-input:checked { background-color: var(--vn-primary); border-color: var(--vn-primary); }

/* ---------- Таблицы: спокойная шапка, мягкая подсветка строк ---------- */
.table { --bs-table-hover-bg: var(--vn-row-hover); --bs-table-border-color: var(--bs-border-color);
         --bs-table-color: var(--bs-body-color); --bs-table-bg: transparent; }
.table > thead > tr > th { background: var(--vn-thead-bg); color: var(--bs-secondary-color);
                           font-weight: 600; font-size: .82rem; border-bottom-width: 1px; }
.table > tbody > tr.vn-row-off > * { background-color: var(--vn-row-off); }
.table > tbody > tr.vn-row-off > td:first-child { box-shadow: inset 3px 0 0 rgba(var(--vn-danger-rgb), .55); }

/* Бейджи-подложки вместо насыщенных text-bg-* */
.vn-badge { display: inline-block; padding: .2em .65em; border-radius: 1rem; font-size: .78rem; font-weight: 500;
            border: 1px solid transparent; white-space: nowrap; }
.vn-badge-on    { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.vn-badge-off   { color: var(--bs-danger-text-emphasis);  background: var(--bs-danger-bg-subtle);  border-color: var(--bs-danger-border-subtle); }
.vn-badge-warn  { color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); }
.vn-badge-muted { color: var(--bs-secondary-color); background: var(--bs-secondary-bg); }

/* ---------- Общие элементы ---------- */
.card { --bs-card-border-color: var(--bs-border-color); --bs-card-cap-bg: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.modal-content { --bs-modal-border-color: var(--bs-border-color); }
.navbar { --bs-navbar-active-color: var(--bs-emphasis-color); }
.navbar-brand { font-weight: 700; letter-spacing: .04em; color: var(--vn-primary) !important; }
.nav-link.active { font-weight: 600; }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary-bg-subtle); --bs-dropdown-link-active-color: var(--bs-primary-text-emphasis); }
.money, .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-danger { color: var(--vn-danger) !important; }
.text-success { color: var(--vn-success) !important; }
.table td, .table th { vertical-align: middle; }
.kpi .value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-emphasis-color); }
.kpi .value.text-danger { color: var(--vn-danger) !important; }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; margin-right: .3rem; }
.status-dot.on { background: var(--vn-success); }
.status-dot.off { background: var(--bs-tertiary-color); }
.row-actions { white-space: nowrap; }
.row-actions .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .5rem; }
.toast { --bs-toast-bg: var(--bs-body-bg); --bs-toast-border-color: var(--bs-border-color); --bs-toast-color: var(--bs-body-color); }
.toast.vn-toast-success { box-shadow: inset 4px 0 0 var(--vn-success), 0 .25rem .75rem rgba(0, 0, 0, .14); }
.toast.vn-toast-warning { box-shadow: inset 4px 0 0 var(--vn-warning), 0 .25rem .75rem rgba(0, 0, 0, .14); }
.toast.vn-toast-danger  { box-shadow: inset 4px 0 0 var(--vn-danger),  0 .25rem .75rem rgba(0, 0, 0, .14); }

/* ---------- История операций (money.php?history) ---------- */
.vn-hist-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.vn-hist-summary .balance { font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--bs-emphasis-color); }
.vn-hist-summary .cap { font-size: .78rem; color: var(--bs-secondary-color); }
.vn-hist-month { position: sticky; top: -1rem; z-index: 1; display: flex; justify-content: space-between; gap: 1rem;
                 margin: 0 -1rem; padding: .45rem 1rem; background: var(--bs-tertiary-bg);
                 border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color);
                 font-size: .82rem; font-weight: 600; color: var(--vn-muted-strong); }
.vn-hist-month .totals { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.vn-hist-item { display: grid; grid-template-columns: 4.2rem 1fr auto auto; align-items: center; gap: .25rem 1rem;
                padding: .55rem .25rem; border-bottom: 1px solid var(--bs-border-color); }
.vn-hist-item:last-child { border-bottom: 0; }
.vn-hist-item:hover { background: var(--vn-row-hover); }
.vn-hist-item .date { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); font-size: .82rem; line-height: 1.2; }
.vn-hist-item .date b { display: block; color: var(--bs-body-color); font-weight: 500; font-size: .9rem; }
.vn-hist-item .what { min-width: 0; }
.vn-hist-item .what .descr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-hist-item .what .type { font-size: .78rem; color: var(--bs-secondary-color); }
.vn-hist-item .sum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.vn-hist-item .sum.in { color: var(--vn-success); }
.vn-hist-item .sum.out { color: var(--bs-body-color); }
.vn-hist-item .sum .after { display: block; font-weight: 400; font-size: .76rem; color: var(--bs-tertiary-color); }
.vn-hist-item .edit { opacity: .35; }
.vn-hist-item:hover .edit, .vn-hist-item .edit:focus { opacity: 1; }
@media (hover: none) { .vn-hist-item .edit { opacity: .8; } }
@media (max-width: 575.98px) {
    .vn-hist-item { grid-template-columns: 3.6rem 1fr auto; }
    .vn-hist-item .edit { grid-column: 3; grid-row: 1; }
    .vn-hist-item .sum { grid-column: 2 / 4; grid-row: 2; }
}

/* ---------- Телефон: строки таблицы с классом .vn-cards превращаются в карточки ---------- */
@media (max-width: 767.98px) {
    table.vn-cards thead { display: none; }
    table.vn-cards, table.vn-cards tbody { display: block; width: 100%; }
    table.vn-cards tr { display: block; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
                        border-radius: .5rem; margin-bottom: .75rem; padding: .5rem .75rem; }
    table.vn-cards td { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
                        border: 0; padding: .2rem 0; box-shadow: none !important; text-align: right !important;
                        background: transparent !important; }
    table.vn-cards td::before { content: attr(data-label); color: var(--bs-secondary-color); text-align: left; }
    table.vn-cards td.vn-card-title { display: block; text-align: left !important; }
    table.vn-cards td.vn-card-title::before, table.vn-cards td.row-actions::before { content: none; }
    table.vn-cards td.row-actions { justify-content: flex-end; padding-top: .5rem; }
    table.vn-cards td.row-actions .btn { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: .9rem; min-width: 44px; }
    table.vn-cards tr.vn-row-off { background: var(--vn-row-off); border-color: var(--bs-danger-border-subtle); }
}

/* Кнопки экспорта DataTables — тихие, как outline-secondary */
.dt-buttons .btn-secondary {
    --bs-btn-bg: transparent; --bs-btn-color: var(--vn-muted-strong); --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .82rem;
}
div.dt-container .dt-search input { min-width: 14rem; }
table.dataTable th.vn-left, table.dataTable td.vn-left { text-align: left !important; }