/* Калькулятор объёма архива видеонаблюдения — стили (страница в рамках сайта, Bootstrap 5).
   Все селекторы ограничены обёрткой .calc, чтобы не конфликтовать с классами Bootstrap. */

.calc {
    --c-bg: #f4f6f9;
    --c-card: #ffffff;
    --c-ink: #1f2733;
    --c-muted: #6b7686;
    --c-line: #e2e7ef;
    --c-brand: #1f6feb;
    --c-brand-dark: #1a5fd0;
    --c-accent-bg: #eaf1ff;
    --c-danger: #c62828;
    --c-danger-bg: #fdecea;
    --c-radius: 12px;

    max-width: 940px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    color: var(--c-ink);
}

.calc * { box-sizing: border-box; }

.calc .top h1 { font-size: 26px; margin: 0 0 6px; }
.calc .subtitle { color: var(--c-muted); margin: 0 0 20px; max-width: 640px; }

.calc .card {
    display: block;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.calc .card h2 { font-size: 17px; margin: 0 0 14px; }

.calc .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .calc .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .calc .grid-4 { grid-template-columns: 1fr; } }

.calc .field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.calc .field span { color: var(--c-muted); }

.calc input[type="number"] {
    padding: 9px 10px;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    font-size: 15px;
    width: 100%;
}
.calc input:focus, .calc select:focus {
    outline: none;
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.18);
}

.calc .hint { color: var(--c-muted); font-size: 13px; margin: 12px 0 0; }

/* ---- Таблица камер ---- */
.calc .cameras { width: 100%; border-collapse: collapse; margin-top: 8px; }
.calc .cameras th, .calc .cameras td { padding: 8px 6px; text-align: left; font-size: 14px; }
.calc .cameras thead th { color: var(--c-muted); font-weight: 600; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.calc .cameras tbody tr { border-bottom: 1px solid var(--c-line); }
.calc .cameras td input, .calc .cameras td select { padding: 8px 9px; border: 1px solid var(--c-line); border-radius: 8px; font-size: 14px; width: 100%; }
.calc .cameras td.col-num { width: 34px; color: var(--c-muted); text-align: center; }
.calc .cameras td.col-count { width: 130px; }
.calc .cameras td.col-bitrate { width: 130px; }
.calc .cameras td.col-day { width: 110px; }
.calc .cameras td.col-action { width: 44px; }
.calc .cameras td.day-cell { color: var(--c-muted); white-space: nowrap; }

.calc .row-actions { display: flex; gap: 10px; margin: 14px 0 0; }

/* ---- Кнопки ---- */
.calc .btn { border: none; border-radius: 9px; padding: 11px 18px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .05s ease; }
.calc .btn:active { transform: translateY(1px); }
.calc .btn-primary { background: var(--c-brand); color: #fff; }
.calc .btn-primary:hover { background: var(--c-brand-dark); }
.calc .btn-secondary { background: #eef2f8; color: var(--c-ink); }
.calc .btn-secondary:hover { background: #e3e9f2; }
.calc .btn-remove { background: transparent; border: none; color: var(--c-danger); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.calc .btn-remove:hover { background: var(--c-danger-bg); }

/* ---- Результаты ---- */
.calc .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .calc .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .calc .kpis { grid-template-columns: 1fr; } }
.calc .kpi { background: #f7f9fc; border: 1px solid var(--c-line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.calc .kpi-accent { background: var(--c-accent-bg); border-color: #c9dbff; }
.calc .kpi-label { color: var(--c-muted); font-size: 13px; }
.calc .kpi-value { font-size: 22px; font-weight: 700; }

.calc .hidden { display: none !important; }

.calc .foot { color: var(--c-muted); font-size: 12px; text-align: center; margin-top: 8px; }