/* ====== Страница «Ввод данных» — расширяем контейнер ====== */
body.page-data .container {
    max-width: none;
    padding: 16px 16px;
}

/* Карточка с таблицей — без внутренних отступов, на всю ширину */
.card--wide {
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
}

/* Контейнер для самого виджета */
#spreadsheet {
    width: 100%;
    overflow: auto;
}

/* Принудительно растягиваем внутреннюю таблицу Jspreadsheet на 100% */
#spreadsheet .jss,
#spreadsheet .jexcel,
#spreadsheet > div,
#spreadsheet table {
    width: 100% !important;
}

/* ====== Шапка ====== */
#spreadsheet thead td {
    background: #374151 !important;
    color: #fff !important;
    font-weight: 600;
    text-align: center;
    border-color: #4b5563 !important;
    padding: 6px 8px;
}

/* Группирующая строка (Лиды / Приезд) — чуть темнее */
#spreadsheet thead tr:first-child td {
    background: #1f2937 !important;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Колонка нумерации слева */
#spreadsheet tbody tr td:first-child {
    background: #f9fafb !important;
    color: #6b7280;
    font-weight: 500;
    text-align: center;
}

/* Источник снят с рекламы — оранжевая «лампочка» в нумерации строки */
#spreadsheet tbody td.jexcel_row.rownum--off-ads {
    background: #f97316 !important;
    color: #fff;
    font-weight: 700;
}

/* ====== Зебра ====== */
#spreadsheet tbody tr:nth-child(even) > td:not(:first-child) {
    background-color: #f9fafb;
}
#spreadsheet tbody tr:nth-child(odd) > td:not(:first-child) {
    background-color: #ffffff;
}

/* Серая подсветка для read-only ячеек (Период, Колцентр, Источник) */
#spreadsheet tbody td.readonly {
    background-color: #eef2ff !important;
    color: #1f2937;
}
#spreadsheet tbody tr:nth-child(even) > td.readonly {
    background-color: #e0e7ff !important;
}

/* Hover по строке — голубоватый */
#spreadsheet tbody tr:hover > td:not(:first-child) {
    background-color: #dbeafe !important;
}

/* ====== Прочее ====== */
#spreadsheet td {
    border-color: #e5e7eb !important;
}
#spreadsheet tbody td {
    padding: 5px 8px;
}

/* ====== Поле выбора периода (flatpickr) ====== */
.period-input,
input.flatpickr-input + input.form-control,
input.flatpickr-alt-input {
    min-width: 260px;
    padding: 8px 12px 8px 36px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    background: #fff
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%231f2937" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>')
        no-repeat 12px center;
    cursor: pointer;
}
.period-input:focus { outline: 2px solid #93c5fd; }

/* ====== Подсветка «заполненных» дней в flatpickr ====== */
.flatpickr-day { position: relative; }

.flatpickr-day.flatpickr-filled:not(.selected):not(.startRange):not(.endRange):not(.inRange) {
    background-color: rgba(16, 185, 129, 0.15);
    color: #047857;
    font-weight: 600;
    border-color: rgba(16, 185, 129, 0.35);
}
.flatpickr-day.flatpickr-filled:hover:not(.selected):not(.startRange):not(.endRange):not(.inRange) {
    background-color: rgba(16, 185, 129, 0.28);
}

/* Зелёная точка-маркер под числом дня (показывается всегда, даже в выделенном
   диапазоне — чтобы было видно «эти дни уже заполнены»). */
.flatpickr-day.flatpickr-filled::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #ffffff;
}
.flatpickr-day.flatpickr-filled.selected::after,
.flatpickr-day.flatpickr-filled.startRange::after,
.flatpickr-day.flatpickr-filled.endRange::after {
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.7);
}

#status { margin-left: 8px; }
#status.ok   { color: #15803d; font-weight: 600; }
#status.fail { color: #b91c1c; font-weight: 600; }