/* assets/css/style.css */

/* ==== ТЕМЫ ==== */

:root[data-theme="dark"] {

--bg-primary: #020617;
--bg-secondary: #0b1120;
--bg-tertiary: #111827;

--text-primary: #e5e7eb;
--text-secondary: #9ca3af;

--border-color: #1f2937;
--border-light: #374151;

--accent-color: #60a5fa;
--accent-hover: #3b82f6;

/* Градиент «Месяц» / «Чистый остаток»: сине-фиолетовый */
--accent-gradient: linear-gradient(90deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%);
--accent-gradient-135: linear-gradient(135deg, #a5b4fc 0%, #818cf8 40%, #4f46e5 100%);
--accent-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
--accent-shadow-card: 0 8px 24px rgba(79, 70, 229, 0.35);
--table-header-gradient: linear-gradient(90deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%);

--input-bg: #020617;
--input-border: #4b5563;

--table-header-bg: #020617;
--table-border: #1f2937;
--table-hover: #111827;

--button-bg: #020617;
--button-border: #374151;

--error-bg: #7f1d1d;
--error-text: #fee2e2;

--success-border: #22c55e;
--success-bg: #1a2a1e;

--warning-bg: #422006;
--warning-text: #fed7aa;

/* итоги */

--total-boxes-color: #60a5fa;
--total-pieces-color: #10b981;
--total-returns-color: #f97316;
--total-net-color: #8b5cf6;
--total-bg: #1e293b;
--total-border: #334155;

/* админ */

--admin-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--admin-stat-icon-bg: rgba(255, 255, 255, 0.1);
--admin-card-bg: #111827;
--admin-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
--admin-tab-bg: #1f2937;
--admin-tab-active: #3b82f6;
--admin-status-success: rgba(34, 197, 94, 0.2);
--admin-status-warning: rgba(251, 191, 36, 0.2);
--admin-status-error: rgba(239, 68, 68, 0.2);

--bg-card: #111827;
--bg-hover: #1f2937;

/* календарь */

--calendar-day-bg: #2d3748;
--calendar-day-hover: #4a5568;
--calendar-today-bg: #3182ce;
--calendar-today-text: #ffffff;
--calendar-selected-bg: #38a169;
--calendar-selected-text: #ffffff;
--calendar-weekend: #f56565;
}

:root[data-theme="light"] {

--bg-primary: #f9fafb;
--bg-secondary: #ffffff;
--bg-tertiary: #f3f4f6;

--text-primary: #1f2937;
--text-secondary: #6b7280;

--border-color: #e5e7eb;
--border-light: #d1d5db;

--accent-color: #3b82f6;
--accent-hover: #2563eb;

/* Градиент «Месяц» / «Чистый остаток»: сине-фиолетовый */
--accent-gradient: linear-gradient(90deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%);
--accent-gradient-135: linear-gradient(135deg, #a5b4fc 0%, #818cf8 40%, #4f46e5 100%);
--accent-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
--accent-shadow-card: 0 8px 24px rgba(79, 70, 229, 0.3);
--table-header-gradient: linear-gradient(90deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%);

--input-bg: #ffffff;
--input-border: #d1d5db;

--table-header-bg: #f3f4f6;
--table-border: #e5e7eb;
--table-hover: #f9fafb;

--button-bg: #ffffff;
--button-border: #d1d5db;

--error-bg: #fee2e2;
--error-text: #991b1b;

--success-border: #10b981;
--success-bg: #d1fae5;

--warning-bg: #fef3c7;
--warning-text: #92400e;

/* итоги */

--total-boxes-color: #2563eb;
--total-pieces-color: #059669;
--total-returns-color: #ea580c;
--total-net-color: #7c3aed;
--total-bg: #ffffff;
--total-border: #e5e7eb;

/* админ */

--admin-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--admin-stat-icon-bg: rgba(96, 165, 250, 0.1);
--admin-card-bg: #ffffff;
--admin-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--admin-tab-bg: #f3f4f6;
--admin-tab-active: #3b82f6;
--admin-status-success: rgba(16, 185, 129, 0.1);
--admin-status-warning: rgba(245, 158, 11, 0.1);
--admin-status-error: rgba(239, 68, 68, 0.1);

--bg-card: #ffffff;
--bg-hover: #f3f4f6;

/* календарь */

--calendar-day-bg: #f7fafc;
--calendar-day-hover: #e2e8f0;
--calendar-today-bg: #3182ce;
--calendar-today-text: #ffffff;
--calendar-selected-bg: #38a169;
--calendar-selected-text: #ffffff;
--calendar-weekend: #e53e3e;
}

/* базовое тело */

body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========== ЛОГИН ========== */

body.auth-body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}

.login-wrapper {
width: 100%;
max-width: 420px;
padding: 20px;
}

.login-box {
background: var(--bg-secondary);
border-radius: 16px;
padding: 28px 24px 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
color: var(--text-primary);
}

.login-box h1 {
text-align: center;
margin: 0 0 20px;
font-size: 22px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-primary);
}

.field {
margin-bottom: 14px;
}

.field label {
display: block;
font-size: 13px;
margin-bottom: 4px;
color: var(--text-secondary);
}

.field input[type=text],
.field input[type=password] {
width: 100%;
border-radius: 10px;
border: 1px solid var(--border-color);
padding: 8px 10px;
background: var(--input-bg);
color: var(--text-primary);
box-sizing: border-box;
transition: border-color 0.2s ease;
}

.field input[type=text]:focus,
.field input[type=password]:focus {
outline: none;
border-color: var(--accent-color);
}

.field-inline {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}

.field-inline a {
color: var(--accent-color);
text-decoration: none;
}

.field-inline a:hover {
text-decoration: underline;
}

button[type=submit] {
margin-top: 10px;
width: 100%;
border: none;
border-radius: 10px;
padding: 10px;
background: var(--accent-color);
color: white;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}

button[type=submit]:hover {
background: var(--accent-hover);
}

.error-box {
background: var(--error-bg);
color: var(--error-text);
border-radius: 8px;
padding: 6px 10px;
font-size: 13px;
margin-bottom: 10px;
}

/* ========== CRM ЛЕЙАУТ ========== */

body.crm-body {
background: var(--bg-primary);
color: var(--text-primary);
}

/* шапка */

.crm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
gap: 10px;
}

.crm-header .logo {
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 14px;
}

.crm-header .user-block {
display: flex;
align-items: center;
gap: 15px;
font-size: 14px;
}

.crm-header .user-block a {
color: var(--accent-color);
text-decoration: none;
}

.crm-header .user-block a:hover {
text-decoration: underline;
}

/* кнопка скрытия левой панели */

.toggle-sidebar-btn {
background: none;
border: none;
color: var(--text-primary);
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
transition: color 0.2s ease;
}

.toggle-sidebar-btn:hover {
color: var(--accent-color);
}

/* сетка: слева меню, центр, справа календарь */

.crm-layout {
display: grid;
grid-template-columns: 245px minmax(0, 1fr) 280px;
height: calc(100vh - 48px);
transition: grid-template-columns 0.3s ease;
background: var(--bg-primary);
}

.crm-layout.sidebar-closed {
grid-template-columns: minmax(0, 1fr) 280px;
}

.crm-sidebar-left,
.crm-sidebar-right {
background: var(--bg-primary);
border-right: 1px solid var(--border-color);
padding: 8px;
overflow-y: auto;
}

.crm-sidebar-right {
border-right: none;
border-left: 1px solid var(--border-color);
}

/* скрытие левой панели */

.crm-sidebar-left.hidden {
display: none;
}

.crm-main {
padding: 16px;
overflow: auto;
background: var(--bg-primary);
color: var(--text-primary);
}

/* левое меню */

.menu-btn {
display: block;
width: 100%;
margin-bottom: 6px;
padding: 8px 10px;
border-radius: 999px;
background: var(--button-bg);
color: var(--text-primary);
text-align: left;
cursor: pointer;
transition: background 0.2s ease;
border: 1px solid var(--border-light);
font-size: 14px;
}

.menu-btn:hover {
background: var(--bg-tertiary);
}

.menu-btn.active {
background: var(--accent-gradient);
color: #ffffff;
border-color: transparent;
box-shadow: var(--accent-shadow);
font-weight: 600;
}

/* блок Заметки в левой колонке */
.notes-sidebar-block {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border-color);
overflow: visible;
}
.notes-sidebar-block .notes-title-wrap.menu-item {
margin-bottom: 10px;
}
.notes-title-btn {
width: 100%;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
}
.notes-title-btn:hover .notes-title-row,
.notes-title-btn.notes-title-btn--active .notes-title-row {
background: var(--accent-gradient);
border-color: transparent;
color: #fff;
box-shadow: var(--accent-shadow);
}
/* заголовок «Заметки» в овале как пункты меню — сохраняем правую границу */
.notes-title-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 8px 10px;
border-radius: 999px;
background: var(--button-bg);
border: 1px solid var(--border-light);
color: var(--text-primary);
font-size: 14px;
}
.notes-title-row .menu-icon { flex-shrink: 0; }
.notes-title-row .menu-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.notes-sidebar-head {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.notes-add-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--border-light);
background: var(--button-bg);
color: var(--text-primary);
font-size: 18px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
padding: 0;
}
.notes-add-btn:hover {
background: var(--accent-gradient);
border-color: transparent;
color: #fff;
box-shadow: var(--accent-shadow);
}
/* форма добавления заметки под кнопкой + */
.notes-add-form {
display: none;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--bg-secondary);
}
.notes-add-form.visible { display: block; }
.notes-add-form-date {
font-weight: 600;
color: var(--accent-color);
font-size: 12px;
margin-bottom: 8px;
}
.notes-add-form-text {
width: 100%;
min-height: 50px;
padding: 6px 8px;
border-radius: 8px;
border: 1px solid var(--border-light);
background: var(--input-bg);
color: var(--text-primary);
font-size: 12px;
resize: vertical;
box-sizing: border-box;
}
.notes-add-form-text:focus {
outline: none;
border-color: var(--accent-color);
}
.notes-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 240px;
overflow-y: auto;
}
.note-date-block {
margin-bottom: 4px;
}
/* строка-дата: по клику раскрывается блок с заметками */
.note-date-row {
display: block;
width: 100%;
padding: 6px 10px;
border-radius: 999px;
background: var(--button-bg);
border: 1px solid var(--border-light);
color: var(--text-primary);
font-size: 13px;
text-align: left;
cursor: pointer;
transition: background 0.2s;
margin-bottom: 2px;
}
.note-date-row:hover { background: var(--bg-tertiary); }
.note-date-row.expanded {
background: var(--accent-gradient);
border-color: transparent;
color: #fff;
box-shadow: var(--accent-shadow);
font-weight: 600;
}
.note-bubble-wrap {
display: none;
margin-left: 8px;
margin-bottom: 8px;
padding-top: 4px;
}
.note-bubble-wrap.visible { display: block; }
/* визуал сообщения (облачко) — содержимое раскрытой даты */
.note-bubble {
position: relative;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 10px 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
font-size: 12px;
}
.note-bubble::before {
content: '';
position: absolute;
left: 12px;
bottom: -8px;
border: 8px solid transparent;
border-top-color: var(--border-color);
border-left-width: 0;
}
.note-bubble::after {
content: '';
position: absolute;
left: 13px;
bottom: -6px;
border: 7px solid transparent;
border-top-color: var(--bg-secondary);
border-left-width: 0;
}
.note-bubble-items {
list-style: none;
margin: 0;
padding: 0;
}
.note-bubble-items li {
padding: 4px 0;
border-bottom: 1px solid var(--border-light);
color: var(--text-primary);
}
.note-bubble-items li:last-child { border-bottom: none; }
.note-item { cursor: pointer; }
.note-item:hover .note-item-text { text-decoration: underline; }
.note-item.editing { padding: 4px 0; }
.note-edit-input {
width: 100%;
min-height: 36px;
padding: 4px 6px;
border-radius: 6px;
border: 1px solid var(--accent-color);
background: var(--input-bg);
color: var(--text-primary);
font-size: 12px;
resize: vertical;
box-sizing: border-box;
}
.note-edit-input:focus { outline: none; }
.note-bubble-time {
font-size: 10px;
color: var(--text-secondary);
margin-right: 6px;
}
.notes-empty {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 8px 4px;
}

/* Страница «Заметки» */
.notes-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 4px 24px;
}
.notes-page-header {
    margin-bottom: 20px;
}
.notes-page-header h2 {
    margin: 0 0 6px;
    font-size: 1.5rem;
    color: var(--text-primary);
}
.notes-page-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}
.notes-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}
.notes-page-add-form {
    display: none;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.notes-page-add-form.visible { display: block; }
.notes-page-add-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.notes-page-add-form input[type="date"],
.notes-page-add-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}
.notes-page-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.notes-page-date-group {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-primary);
}
.notes-page-date-title {
    padding: 10px 14px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: var(--table-header-gradient, linear-gradient(135deg, #4f46e5, #6366f1));
}
.notes-page-items {
    padding: 8px 0;
}
.notes-page-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    cursor: pointer;
}
.notes-page-item:last-child {
    border-bottom: none;
}
.notes-page-item:hover {
    background: var(--bg-secondary);
}
.notes-page-item-meta {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.notes-page-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Модальное окно редактирования заметки */
.notes-edit-modal-content {
    width: min(640px, calc(100vw - 32px));
    max-width: 640px;
}
.notes-edit-modal-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color, #4f46e5);
    margin-bottom: 10px;
}
.notes-edit-modal-text {
    width: 100%;
    min-height: 200px;
    max-height: 50vh;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.55;
    resize: vertical;
}
.notes-edit-modal-text:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.notes-edit-modal-footer {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.notes-edit-modal-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.btn-danger {
    background: #ef4444;
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background: #dc2626;
}

/* базовые .btn */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
cursor: pointer;
border: 1px solid transparent;
}

.btn-primary {
background: var(--accent-gradient);
border: none;
color: #fff;
box-shadow: var(--accent-shadow);
font-weight: 600;
}
.btn-primary:hover {
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5);
filter: brightness(1.05);
}

.btn-secondary {
background: var(--button-bg);
border-color: var(--border-light);
color: var(--text-primary);
}

/* Таблицы: заголовки в стиле «Месяц» — градиент, белый текст, тень */
.crm-main .report-table thead,
.crm-main .report-table thead th,
.crm-main .brigadier-table thead,
.crm-main .brigadier-table thead th,
.crm-main .data-table thead,
.crm-main .data-table thead th,
.crm-main table.report-table thead,
.crm-main table.report-table thead th {
background: var(--table-header-gradient) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.15) !important;
font-weight: 600;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}
.crm-main .report-table-container,
.crm-main .table-container {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--accent-shadow-card);
}

/* Бригадир: горизонтальная прокрутка, чтобы не обрезать текст в полях ввода */
.crm-main .brigadier-table-container {
overflow-x: auto !important;
}

/* ========== КАЛЕНДАРЬ ========= */

.calendar-container {
background: var(--bg-secondary);
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
margin-bottom: 20px;
}

.calendar-header {
margin-bottom: 15px;
}

.calendar-header h3 {
color: var(--text-primary);
font-size: 16px;
margin: 0;
font-weight: 600;
}

.calendar-widget {
display: flex;
flex-direction: column;
gap: 15px;
}

.calendar-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.calendar-nav-title {
font-weight: 600;
color: var(--text-primary);
font-size: 16px;
flex-grow: 1;
text-align: center;
}

.calendar-nav button {
background: var(--button-bg);
border: 1px solid var(--button-border);
color: var(--text-primary);
width: 30px;
height: 30px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all 0.2s;
}

.calendar-nav button:hover {
background: var(--bg-tertiary);
}

.calendar-selectors {
display: flex;
gap: 10px;
}

.cal-select {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--input-border);
border-radius: 6px;
background: var(--input-bg);
color: var(--text-primary);
font-size: 14px;
cursor: pointer;
}

.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 5px;
}

.cal-cell-header {
text-align: center;
padding: 8px 0;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
}

.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}

.cal-cell {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s;
}

.cal-cell-day {
color: var(--text-primary);
background: var(--calendar-day-bg);
}

.cal-cell-day:hover {
background: var(--calendar-day-hover);
}

.cal-cell-today {
background: var(--calendar-today-bg) !important;
color: var(--calendar-today-text) !important;
font-weight: 600;
}

.cal-cell-day.selected {
background: var(--calendar-selected-bg);
color: var(--calendar-selected-text);
font-weight: 600;
}

.cal-cell-day.other-month {
color: var(--text-secondary);
opacity: 0.5;
}

.cal-cell-day.weekend {
color: var(--calendar-weekend);
}

.calendar-legend {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 10px;
font-size: 12px;
}

.legend-item {
display: flex;
align-items: center;
gap: 5px;
color: var(--text-secondary);
}

.legend-color {
width: 12px;
height: 12px;
border-radius: 3px;
}

.legend-color.today {
background: var(--calendar-today-bg);
}

.legend-color.selected {
background: var(--calendar-selected-bg);
}

/* Блок погоды - независимый от календаря */
.weather-container {
background: var(--bg-secondary);
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
border: 1px solid var(--border-color);
position: relative;
z-index: 1;
}

/* Кнопки сравнения для склада */
.btn-compare-warehouse {
background: var(--accent-color);
color: white;
border: none;
border-radius: 8px;
padding: 15px 30px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: inline-flex;
align-items: center;
gap: 10px;
}

.btn-compare-warehouse:hover {
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-compare-warehouse i {
font-size: 18px;
}

.weather-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #38bdf8, #6366f1);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
}

.weather-main {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
}

.weather-desc {
font-size: 13px;
color: var(--text-secondary);
text-align: center;
}

/* Отчёт по коробкам: базовая полоса периода и сообщения */
.period-control-bar-boxes {
padding: 20px;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
}
.consistency-results-wrap { margin-top: 30px; }
.info-message-consistency {
text-align: center;
padding: 40px;
color: var(--text-secondary);
}
.date-range-sep { color: var(--text-secondary); }

/* ========== БАЗОВЫЕ МОДАЛКИ ========= */

.modal-overlay {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
}

.modal-overlay.open {
display: block;
}

.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
}

.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -48%);
min-width: 360px;
background: var(--bg-secondary);
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
padding: 16px 18px 14px;
}

.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}

.modal-title {
margin: 0;
font-size: 18px;
}

.modal-close-btn {
border: none;
background: transparent;
font-size: 22px;
line-height: 1;
cursor: pointer;
color: var(--text-secondary);
}

.modal-body {
padding: 4px 0 10px;
}

.modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid var(--border-color);
padding-top: 10px;
margin-top: 6px;
}

/* ========== АДАПТИВ ========= */

@media (max-width: 768px) {
.crm-layout {
grid-template-columns: 1fr;
}
.crm-layout.sidebar-closed {
grid-template-columns: 1fr;
}
.crm-sidebar-left,
.crm-sidebar-right {
display: none;
}
.crm-sidebar-left.active,
.crm-sidebar-right.active {
display: block;
position: fixed;
top: 48px;
bottom: 0;
z-index: 1000;
width: 280px;
}
.crm-sidebar-left.active { left: 0; }
.crm-sidebar-right.active { right: 0; }
}

/* Маркер‑отчёты: базовые отступы (чтобы не мешать marker.css) */
.marker-report-page {
padding: 10px 20px 30px;
}
/* ===== Бухгалтер: отчёты по маркировке ===== */

.accountant-page .report-card {
    max-width: 900px;
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 16px 20px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border-color);
}

.accountant-page .report-card-header {
    margin-bottom: 12px;
}

.accountant-page .report-card-title h2 {
    font-size: 20px;
    margin: 0 0 4px;
}

.accountant-page .report-card-title p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.accountant-page .report-filters-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
}

.accountant-page .report-filter label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.accountant-page .report-filter-actions {
    padding-top: 20px;
}

.accountant-page .report-block {
    margin-top: 18px;
}

.accountant-page .report-block-title {
    font-size: 15px;
    margin: 0 0 8px;
    font-weight: 600;
}

/* Таблица как у админских отчётов */

.accountant-page .report-card-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.accountant-page .report-card-title {
    flex: 1;
}

.accountant-page .report-card {
    max-width: 1100px; /* было 900, можно изменить с учётом нового макета */
    margin: 0 auto;
}


.accountant-page .report-table-wrapper {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--table-border);
    overflow: hidden;
}

.accountant-page table.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.accountant-page table.report-table thead {
    background: var(--table-header-bg);
}

.accountant-page table.report-table th,
.accountant-page table.report-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--table-border);
}

.accountant-page table.report-table tbody tr:hover {
    background: var(--table-hover);
}

.accountant-page table.report-table .total-row td {
    font-weight: 600;
}
/* Бухгалтер: фильтры периода */
.accountant-page .report-filters-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 18px;
}

.accountant-page .report-filter {
    min-width: 170px;
}

.accountant-page .crm-date-input {
    width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 13px;
    box-sizing: border-box;
}

.accountant-page .crm-date-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.accountant-page .crm-text-input {
    width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 13px;
    box-sizing: border-box;
}

.accountant-page .crm-text-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.accountant-page .acc-autocomplete-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    z-index: 50;
    max-height: 280px;
    overflow: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.accountant-page .report-filter-actions {
    padding-top: 20px;
}
.text-center { text-align: center; }
.text-right  { text-align: right;  }
.text-left   { text-align: left;   }
.accountant-page .report-print-row {
    margin-top: 16px;
    text-align: right;
}

/* Печатная версия: только заголовок + даты + таблицы */
@media print {
    body.accountant-print-body {
        background: #ffffff;
    }

    .crm-header,
    .crm-sidebar-left,
    .crm-sidebar-right,
    .calendar-container {
        display: none !important;
    }

    .crm-main.accountant-page {
        padding: 0;
        margin: 0;
        box-shadow: none;
    }

    .accountant-page .report-print-row {
        display: none !important;
    }

    /* Итоги отчётов — только на последней странице, не разрывать; выравнивание справа */
    .report-totals-block {
        page-break-inside: avoid;
        break-inside: avoid;
        text-align: right;
    }
}

@page {
    margin: 8mm 10mm;
}

/* Блок итогов на страницах отчётов — выравнивание справа */
.report-totals-block {
    text-align: right;
}

.accountant-page .report-table-wrapper {
    width: 100%;
}

.accountant-page table.report-table {
    width: 100%;
    table-layout: fixed;
}

.accountant-page table.report-table th:nth-child(1) {
    width: 50px;
}
.accountant-page table.report-table th:nth-child(3),
.accountant-page table.report-table th:nth-child(4),
.accountant-page table.report-table th:nth-child(5) {
    width: 120px;
}

/* ========== Тёмная тема: основной контент (все роли) ========== */
:root[data-theme="dark"] .crm-main .reports-simple-container,
:root[data-theme="dark"] .crm-main .report-content-simple,
:root[data-theme="dark"] .crm-main .period-section-simple,
:root[data-theme="dark"] .crm-main .period-control-bar,
:root[data-theme="dark"] .crm-main .period-controls-simple,
:root[data-theme="dark"] .crm-main .stats-horizontal,
:root[data-theme="dark"] .crm-main .stat-card-horizontal,
:root[data-theme="dark"] .crm-main .stat-content-horizontal,
:root[data-theme="dark"] .crm-main .report-table-container,
:root[data-theme="dark"] .crm-main .table-responsive,
:root[data-theme="dark"] .crm-main .report-header,
:root[data-theme="dark"] .crm-main .compare-container-simple .report-header,
:root[data-theme="dark"] .crm-main .boxes-consistency-report,
:root[data-theme="dark"] .crm-main .period-control-bar,
:root[data-theme="dark"] .crm-main .products-detail,
:root[data-theme="dark"] .crm-main .differences-section,
:root[data-theme="dark"] .crm-main .consistency-status,
:root[data-theme="dark"] .crm-main .info-message {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .crm-main .report-table,
:root[data-theme="dark"] .crm-main .report-table thead,
:root[data-theme="dark"] .crm-main .report-table tfoot,
:root[data-theme="dark"] .crm-main .report-table th,
:root[data-theme="dark"] .crm-main .report-table td,
:root[data-theme="dark"] .crm-main .compare-container-simple .report-table,
:root[data-theme="dark"] .crm-main .compare-container-simple .report-table thead,
:root[data-theme="dark"] .crm-main .compare-container-simple .report-table th,
:root[data-theme="dark"] .crm-main .compare-container-simple .report-table td {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .crm-main .report-table tbody tr:hover,
:root[data-theme="dark"] .crm-main .compare-container-simple .report-table tbody tr:hover {
    background: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .crm-main input[type="date"],
:root[data-theme="dark"] .crm-main input[type="text"],
:root[data-theme="dark"] .crm-main .date-input,
:root[data-theme="dark"] .crm-main .date-inputs-simple input {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

:root[data-theme="dark"] .crm-main .report-subtitle,
:root[data-theme="dark"] .crm-main .report-hint,
:root[data-theme="dark"] .crm-main .info-message {
    color: var(--text-secondary) !important;
}

/* Карточки отчёта по коробкам и таблицы внутри контента */
:root[data-theme="dark"] .crm-main table thead,
:root[data-theme="dark"] .crm-main .products-detail table thead {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .crm-main .products-detail,
:root[data-theme="dark"] .crm-main .differences-section {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .crm-main .products-detail h3,
:root[data-theme="dark"] .crm-main .differences-section h3 {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .crm-main .diff-card {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Таблицы бригадира и маркера */
:root[data-theme="dark"] .crm-main .brigadier-table-container,
:root[data-theme="dark"] .crm-main .brigadier-table,
:root[data-theme="dark"] .crm-main .brigadier-table thead,
:root[data-theme="dark"] .crm-main .brigadier-table thead th,
:root[data-theme="dark"] .crm-main .brigadier-table tbody td {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .crm-main .brigadier-table tbody tr:nth-child(even) td,
:root[data-theme="dark"] .crm-main .brigadier-table tbody tr:hover td {
    background: var(--bg-tertiary) !important;
}

:root[data-theme="dark"] .crm-main .table-wrapper,
:root[data-theme="dark"] .crm-main .marker-table,
:root[data-theme="dark"] .crm-main .marker-table thead,
:root[data-theme="dark"] .crm-main .marker-table th,
:root[data-theme="dark"] .crm-main .marker-table td {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .crm-main .marker-totals,
:root[data-theme="dark"] .crm-main .marker-totals .total-box {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Страница «Наименования» (products) */
:root[data-theme="dark"] .crm-main .crm-section-title,
:root[data-theme="dark"] .crm-main .products-table-wrapper,
:root[data-theme="dark"] .crm-main table.report-table + * {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .crm-main .report-title,
:root[data-theme="dark"] .crm-main .boxes-consistency-report .report-title {
    color: var(--text-primary) !important;
}

/* Карточки дашборда админа и отчётов */
:root[data-theme="dark"] .crm-main .stat-card,
:root[data-theme="dark"] .crm-main .admin-dashboard .stat-card,
:root[data-theme="dark"] .crm-main .admin-stats-grid .stat-card {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .crm-main .stat-content .stat-label { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .crm-main .stat-content .stat-value { color: var(--text-primary) !important; }
:root[data-theme="dark"] .crm-main .stat-content .stat-boxes-caption { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .crm-main .stat-content .stat-boxes-caption span { color: var(--text-primary) !important; }
:root[data-theme="dark"] .crm-main .stat-boxes-horizontal { color: var(--text-secondary) !important; }

/* Карточки статистики бригадира (total-box как у менеджера) */
:root[data-theme="dark"] .crm-main .brigadier-stats .total-box {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .crm-main .brigadier-stats .total-label { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .crm-main .brigadier-stats .total-value { color: var(--text-primary) !important; }
:root[data-theme="dark"] .crm-main .brigadier-stats .total-value-green { color: #34d399 !important; }

/* Таблица наклеек маркера: панель, подсказки, заголовок */
:root[data-theme="dark"] .crm-main .marker-container,
:root[data-theme="dark"] .crm-main .marker-controls,
:root[data-theme="dark"] .crm-main #marker-top-info-placeholder,
:root[data-theme="dark"] .crm-main .marker-help,
:root[data-theme="dark"] .crm-main .marker-help .small {
    background: transparent !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .crm-main .marker-help .small { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .crm-main .marker-help .small.warning { color: var(--warning-text) !important; }
:root[data-theme="dark"] .crm-main #marker-title,
:root[data-theme="dark"] .crm-main .marker-container h2 { color: var(--text-primary) !important; }
:root[data-theme="dark"] .crm-main .date-info { color: var(--text-primary) !important; }

/* Страница «Наименования»: секция, таблица, тулбар */
:root[data-theme="dark"] .crm-main .crm-section,
:root[data-theme="dark"] .crm-main .crm-section-header,
:root[data-theme="dark"] .crm-main .table-card,
:root[data-theme="dark"] .crm-main .products-toolbar,
:root[data-theme="dark"] .crm-main .products-search-wrapper,
:root[data-theme="dark"] .crm-main .compact-products-table,
:root[data-theme="dark"] .crm-main .compact-products-table th,
:root[data-theme="dark"] .crm-main .compact-products-table td {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .crm-main .crm-section-subtitle,
:root[data-theme="dark"] .crm-main .products-count-label { color: var(--text-secondary) !important; }

/* Календарь в правой колонке (вне .crm-main) */
:root[data-theme="dark"] .calendar-container {
    background: var(--bg-secondary) !important;
}
:root[data-theme="dark"] .calendar-widget {
    background: transparent !important;
}
:root[data-theme="dark"] .calendar-nav-title,
:root[data-theme="dark"] .cal-cell-header,
:root[data-theme="dark"] .legend-item {
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .calendar-weekdays {
    background: transparent !important;
}
:root[data-theme="dark"] .calendar-grid {
    background: var(--bg-secondary) !important;
}
:root[data-theme="dark"] .cal-cell,
:root[data-theme="dark"] .cal-cell-day {
    background: var(--calendar-day-bg) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .cal-cell-day:hover {
    background: var(--calendar-day-hover) !important;
}
:root[data-theme="dark"] .cal-cell-empty {
    background: transparent !important;
}
:root[data-theme="dark"] .cal-select {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

/* Карточки «Статистика обклейки» (brig-stat-card) */
:root[data-theme="dark"] .crm-main .brig-stat-card {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .crm-main .brig-stats-title { color: var(--text-primary) !important; }
:root[data-theme="dark"] .crm-main .brig-stat-boxes { color: var(--text-secondary) !important; }

/* Период и поля бригадира (step-section, report-period-section) */
:root[data-theme="dark"] .crm-main .step-section,
:root[data-theme="dark"] .crm-main .report-period-section,
:root[data-theme="dark"] .crm-main input.brigadier-boxes-input,
:root[data-theme="dark"] .crm-main input.brigadier-pieces-input {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

/* Карточки выбора работника (worker-card) */
:root[data-theme="dark"] .crm-main .worker-card,
:root[data-theme="dark"] .crm-main .workers-grid {
    background: transparent !important;
}
:root[data-theme="dark"] .crm-main .worker-card {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .crm-main .worker-card.selected {
    background: var(--bg-tertiary) !important;
    border-color: var(--accent-color) !important;
}
:root[data-theme="dark"] .crm-main .worker-name { color: var(--text-primary) !important; }
:root[data-theme="dark"] .crm-main .worker-status { color: var(--text-secondary) !important; }

/* Полоса периода бригадира (brigadier-period-row) */
:root[data-theme="dark"] .crm-main .brigadier-period-row {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .crm-main .brigadier-period-field label { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .crm-main .brigadier-period-field input[type="date"] {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

/* Финансовый отчёт: карточки, кнопки периода, детали расчёта */
:root[data-theme="dark"] .crm-main .stats-cards,
:root[data-theme="dark"] .crm-main .financial-report-final .stat-card {
    background: transparent !important;
}
:root[data-theme="dark"] .crm-main .financial-report-final .stat-card,
:root[data-theme="dark"] .crm-main .stat-card.card-total,
:root[data-theme="dark"] .crm-main .stat-card.card-last-day,
:root[data-theme="dark"] .crm-main .stat-card.card-income,
:root[data-theme="dark"] .crm-main .stat-card.card-taxes,
:root[data-theme="dark"] .crm-main .stat-card.card-salary,
:root[data-theme="dark"] .crm-main .stat-card.card-expenses,
:root[data-theme="dark"] .crm-main .stat-card.card-rima-irina,
:root[data-theme="dark"] .crm-main .stat-card.card-profit {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .crm-main .card-label,
:root[data-theme="dark"] .crm-main .card-note { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .crm-main .card-value { color: var(--text-primary) !important; }
:root[data-theme="dark"] .crm-main .period-buttons-group {
    background: var(--bg-tertiary) !important;
}
:root[data-theme="dark"] .crm-main .period-btn {
    color: var(--text-secondary) !important;
}
:root[data-theme="dark"] .crm-main .period-btn.active {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .crm-main .financial-report-final .date-input {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}
:root[data-theme="dark"] .crm-main .date-separator { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .crm-main .info-box,
:root[data-theme="dark"] .crm-main #calculation-details {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .crm-main .info-box h3 { color: var(--text-primary) !important; }

/* Панель управления маркера (marker-controls) */
:root[data-theme="dark"] .crm-main .marker-controls-left,
:root[data-theme="dark"] .crm-main .marker-buttons {
    background: transparent !important;
}
:root[data-theme="dark"] .crm-main .marker-add-row-btn {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Индикатор загрузки таблиц при смене даты */
.crm-table-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: rgba(255, 255, 255, 0.72);
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
}

.crm-table-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #cbd5e1;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: crm-table-spin 0.7s linear infinite;
}

@keyframes crm-table-spin {
    to { transform: rotate(360deg); }
}

:root[data-theme="dark"] .crm-table-loading-overlay {
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
}