/* ============================================
   Б-Запись SPA — Стили partials журнала
   ============================================ */

/* ===== MONTH VIEW ===== */
.month-view-container { flex: 1; display: flex; flex-direction: column; background: #fff; overflow: hidden; width: 100%; }
.month-table-wrapper { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; }
.month-table-wrapper:active { cursor: grabbing; }
.month-table { display: table; width: max-content; min-width: 100%; border-collapse: collapse; }
.month-row { display: table-row; }
.month-cell { display: table-cell; min-width: 85px; width: 85px; padding: 10px 4px; text-align: center; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; vertical-align: middle; background: #fff; }
.month-cell.today { background: #dd1847 !important; }
.month-cell.today .month-date-weekday,
.month-cell.today .month-date-day,
.month-cell.today .month-date-month { color: #fff !important; }
.month-fixed-cell { display: table-cell; min-width: 100px; width: 100px; padding: 12px 8px; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f5f5f5; background: #fff; position: sticky; left: 0; z-index: 5; }
.month-fixed-cell-inner { display: flex; align-items: center; gap: 8px; text-align: left; }
.month-fixed-cell-inner .employee-avatar-small { flex-shrink: 0; margin: 0; }
.month-fixed-cell-inner .employee-name-short { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.month-header-cell { background: #fff; position: sticky; top: 0; z-index: 4; font-weight: 600; }
.month-fixed-header { background: #fff; position: sticky; left: 0; top: 0; z-index: 10; }
.month-date-weekday { font-size: 13px; color: #888; margin-bottom: 2px; }
.month-cell.weekend .month-date-weekday { color: #dd1847; }
.month-date-day { font-size: 16px; font-weight: 600; color: #1a1a1a; }
.month-date-month { font-size: 11px; color: #888; margin-top: 2px; }
.load-indicator { width: 48px; height: 48px; border-radius: 12px; background: #f5f5f5; position: relative; overflow: hidden; margin: 0 auto 4px; }
.load-fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #dd1847, #c1163d); transition: height 0.3s; border-radius: 0 0 12px 12px; }
.load-text { font-size: 14px; font-weight: 600; color: #1a1a1a; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.load-subtext { font-size: 10px; color: #888; }
.mv-skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 400px 100%; animation: shimmer 1.5s infinite; margin: 0 auto 4px; }
.mv-skeleton-name { width: 80px; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 400px 100%; animation: shimmer 1.5s infinite; margin: 4px auto 0; }
.mv-skeleton-indicator { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 400px 100%; animation: shimmer 1.5s infinite; margin: 0 auto; }

/* ===== ПОПАП ВЫБОРА МЕСЯЦА ===== */
.month-picker-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 10001; visibility: hidden; }
.month-picker-modal.active { visibility: visible; }
.month-picker-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s; }
.month-picker-modal.active .month-picker-overlay { opacity: 1; }
.month-picker-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 20px; width: 90%; max-width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.month-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f0f0f0; }
.month-picker-header h3 { font-size: 16px; font-weight: 600; margin: 0; }
.month-picker-close { background: none; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; color: #666; display: flex; align-items: center; justify-content: center; }
.month-picker-body { padding: 20px; }
.year-selector { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
.year-selector span { font-size: 18px; font-weight: 600; }
.year-nav-btn { background: none; border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: #666; }
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.month-btn { padding: 12px 8px; border: 2px solid #f0f0f0; border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 500; color: #1a1a1a; font-family: inherit; }
.month-btn:hover { background: #f9f9f9; border-color: #ddd; }
.month-btn.active { background: #dd1847; color: #fff; border-color: #dd1847; }
.month-btn.current:not(.active) { border-color: #f8a5b9; color: #dd1847; background: #fff5f7; }

@media (max-width: 767px) {
    .month-fixed-cell { min-width: 80px; width: 80px; }
    .month-cell { min-width: 70px; width: 70px; }
    .load-indicator { width: 40px; height: 40px; }
    .employee-name-short { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .mv-skeleton-avatar,
    .mv-skeleton-name,
    .mv-skeleton-indicator { animation: none; }
}
/* ===== LIST VIEW ===== */
.list-view-container { flex: 1; display: flex; flex-direction: column; background: #fff; overflow: hidden; width: 100%; }
.list-filters { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; background: #fff; position: sticky; top: 0; z-index: 10; }
.filter-tabs { display: flex; align-items: center; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab { padding: 8px 16px; border: none; background: #f5f5f5; font-size: 13px; font-weight: 500; color: #666; border-radius: 20px; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-family: inherit; }
.filter-tab.active { background: #dd1847; color: #fff; }
.list-filter-icon { background: #f5f5f5; border: none; width: 36px; height: 36px; border-radius: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; position: relative; }
.list-filter-icon.has-filters::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #dd1847; border-radius: 50%; border: 2px solid #fff; }
.list-items { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px; }
.list-month-header { font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; padding: 16px 0 8px; position: sticky; top: 0; background: #fff; z-index: 5; }
.list-item { padding: 16px; border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
.list-item:hover { background: #fafafa; transform: translateX(4px); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.list-item-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.list-item-time { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.list-item-status { font-size: 12px; padding: 4px 8px; border-radius: 12px; font-weight: 500; }
.list-item-status.confirmed { background: #d4edda; color: #155724; }
.list-item-status.completed { background: #d1ecf1; color: #0c5460; }
.list-item-status.cancelled { background: #f8d7da; color: #721c24; }
.list-item-new-badge { display: inline-block; font-size: 11px; padding: 2px 6px; border-radius: 8px; background: #e8f5e9; color: #2e7d32; font-weight: 600; margin-left: 6px; }
.list-item-client { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
.list-item-phone { font-size: 14px; font-weight: 500; color: #666; margin-bottom: 4px; }
.list-item-employee { font-size: 14px; color: #dd1847; font-weight: 500; margin-bottom: 4px; }
.list-item-service { font-size: 14px; color: #1a1a1a; margin-bottom: 8px; }
.list-item-created { font-size: 12px; color: #999; }
.list-loader { padding: 20px; display: flex; justify-content: center; }
.list-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: #999; }

.list-skeleton-container { display: flex; flex-direction: column; gap: 8px; }
.lv-skeleton-item { padding: 16px; background: #fff; border-radius: 12px; border: 1px solid #f0f0f0; }
.lv-skeleton-row { display: flex; justify-content: space-between; margin-bottom: 12px; }
.lv-skeleton-line { height: 14px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 400px 100%; animation: shimmer 1.5s infinite; border-radius: 7px; margin-bottom: 10px; }
.lv-skeleton-date { width: 40%; height: 16px; }
.lv-skeleton-status { width: 25%; height: 22px; border-radius: 11px; }
.lv-skeleton-name { width: 60%; height: 18px; }
.lv-skeleton-phone { width: 45%; height: 15px; }
.lv-skeleton-employee { width: 35%; height: 15px; }
.lv-skeleton-service { width: 55%; height: 15px; }

/* Модалка фильтров */
.list-filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1100; display: flex; align-items: flex-end; justify-content: center; }
.list-filter-modal { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 500px; max-height: 85vh; display: flex; flex-direction: column; }
.list-filter-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #f0f0f0; }
.list-filter-title { font-size: 18px; font-weight: 600; margin: 0; }
.list-filter-back, .list-filter-close { background: none; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.list-filter-body { flex: 1; overflow-y: auto; padding: 20px; }
.list-filter-section { margin-bottom: 24px; }
.list-filter-section-title { font-size: 14px; font-weight: 600; color: #888; text-transform: uppercase; margin: 0 0 12px; }
.list-filter-options { display: flex; flex-direction: column; gap: 8px; }
.list-filter-option { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #f8f8f8; border: 2px solid transparent; border-radius: 14px; cursor: pointer; font-family: inherit; width: 100%; text-align: left; }
.list-filter-option.active { background: #fdf2f5; border-color: #dd1847; }
.list-filter-option-text { font-size: 15px; font-weight: 500; }
.list-filter-option-check { width: 20px; height: 20px; stroke: #dd1847; display: none; }
.list-filter-option.active .list-filter-option-check { display: block; }
.list-filter-footer { display: flex; gap: 12px; padding: 20px; border-top: 1px solid #f0f0f0; }
.list-filter-reset-btn { flex: 1; padding: 16px; background: #fff; border: 1px solid #ddd; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit; }
.list-filter-apply-btn { flex: 2; padding: 16px; background: #dd1847; color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }

@media (min-width: 768px) { .list-filter-overlay { align-items: center; } .list-filter-modal { border-radius: 20px; max-height: 70vh; } }
@media (max-width: 767px) { .list-filters { padding: 8px 12px; } .filter-tab { padding: 6px 12px; font-size: 12px; } }
/* ===== BOOKING MODAL ===== */
.booking-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.booking-modal { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 500px; max-height: 85vh; display: flex; flex-direction: column; }
.booking-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.booking-modal-back, .booking-modal-close { background: none; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.booking-modal-title { font-size: 18px; font-weight: 600; margin: 0; }
.booking-modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.booking-switcher { display: flex; gap: 4px; background: #f5f5f5; border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.booking-switcher-btn { flex: 1; padding: 10px; border: none; background: transparent; font-size: 14px; font-weight: 500; color: #666; border-radius: 10px; cursor: pointer; font-family: inherit; }
.booking-switcher-btn.active { background: #fff; color: #1a1a1a; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.booking-time-info { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #f8f8f8; border-radius: 14px; margin-bottom: 16px; cursor: pointer; gap: 12px; }
.booking-time-info:hover { background: #f0f0f0; }
.booking-time-label { font-size: 13px; color: #888; }
.booking-time-value { font-size: 20px; font-weight: 600; color: #1a1a1a; }
.booking-time-hint { font-size: 12px; color: #999; }
.booking-timeslots { display: flex; flex-wrap: wrap; gap: 6px; }
.booking-timeslot { padding: 10px 0; width: calc(25% - 5px); text-align: center; background: #f8f8f8; border-radius: 10px; font-size: 13px; font-weight: 500; color: #666; cursor: pointer; border: 1px solid transparent; user-select: none; }
.booking-timeslot:hover { background: #f0f0f0; }
.booking-timeslot.selected { background: #dd1847; color: #fff; }
.booking-timeslot.unavailable { background: #f5f5f5; color: #ccc; cursor: not-allowed; pointer-events: none; text-decoration: line-through; }
.booking-modal-footer { padding: 20px; border-top: 1px solid #f0f0f0; }
.booking-next-btn { width: 100%; padding: 16px; background: #dd1847; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.booking-next-btn:hover { background: #c4153e; }

@media (min-width: 768px) { .booking-modal-overlay { align-items: center; } .booking-modal { border-radius: 20px; max-height: 75vh; } }
/* ===== CREATE BOOKING MODAL ===== */
.booking-step-title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
.booking-search-wrapper { position: relative; margin-bottom: 12px; }
.booking-search-wrapper svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; }
.booking-search-input { width: 100%; padding: 12px 12px 12px 42px; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 14px; background: #f8f8f8; box-sizing: border-box; font-family: inherit; }
.booking-search-input:focus { outline: none; border-color: #dd1847; background: #fff; }
.booking-services-list, .booking-clients-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.booking-service-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f8f8f8; border-radius: 12px; cursor: pointer; border: 2px solid transparent; transition: all .15s; }
.booking-service-item:hover { background: #f0f0f0; }
.booking-service-item.selected { background: #fdf2f5; border-color: #dd1847; }
.booking-service-photo { width: 48px; height: 48px; border-radius: 10px; background: #e8e8e8; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.booking-service-photo img { width: 100%; height: 100%; object-fit: cover; }
.booking-service-info { flex: 1; min-width: 0; }
.booking-service-name { font-size: 14px; font-weight: 500; color: #1a1a1a; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking-service-details { font-size: 12px; color: #888; }
.booking-service-check { width: 22px; height: 22px; border: 2px solid #ddd; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.booking-service-item.selected .booking-service-check { background: #dd1847; border-color: #dd1847; }
.booking-service-check svg { width: 14px; height: 14px; stroke: white; display: none; }
.booking-service-item.selected .booking-service-check svg { display: block; }
.booking-client-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f8f8f8; border-radius: 12px; cursor: pointer; border: 2px solid transparent; }
.booking-client-item:hover { background: #f0f0f0; }
.booking-client-item.selected { background: #fdf2f5; border-color: #dd1847; }
.booking-client-avatar { width: 44px; height: 44px; border-radius: 50%; background: #fdf2f5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-weight: 600; font-size: 16px; color: #dd1847; }
.booking-client-info { flex: 1; min-width: 0; }
.booking-client-name { font-size: 14px; font-weight: 500; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking-client-phone { font-size: 12px; color: #888; }
.booking-create-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; margin-top: 12px; background: #fff; border: 1px dashed #dd1847; border-radius: 12px; color: #dd1847; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; }
.booking-create-btn:hover { background: #fdf2f5; }
.btn-spinner svg { animation: bmSpin .8s linear infinite; }
@keyframes bmSpin { to { transform: rotate(360deg); } }

@media (max-width: 767px) { .booking-search-input { font-size: 16px; } }
/* ===== BOOKING VIEW MODAL ===== */
.booking-view-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 1500; display: flex; align-items: flex-end; justify-content: center; }
.booking-view { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 500px; max-height: 90vh; display: flex; flex-direction: column; }
.booking-view-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.booking-view-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: #1a1a1a; }
.booking-view-header button { background: none; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.booking-view-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.booking-view-footer { padding: 16px 20px; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
.bv-section { margin-bottom: 20px; }
.bv-section-title { font-size: 13px; font-weight: 600; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px; }
.bv-client-section { background: #f9f9f9; border-radius: 14px; padding: 14px; }
.bv-client-top { display: flex; align-items: center; gap: 12px; }
.bv-client-avatar { width: 44px; height: 44px; border-radius: 50%; background: #fdf2f5; color: #dd1847; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bv-client-info { flex: 1; min-width: 0; }
.bv-client-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.bv-client-phone { font-size: 13px; color: #888; margin-top: 2px; }
.bv-status-buttons { margin-top: 12px; }
.bv-status-row { display: flex; gap: 6px; }
.bv-status-btn { flex: 1; padding: 6px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f5f5f5; font-size: 11px; font-weight: 500; cursor: pointer; text-align: center; white-space: nowrap; color: #1a1a1a; font-family: inherit; }
.bv-confirmed.active { background: #d4edda; border-color: #4CAF50; color: #2e7d32; }
.bv-arrived.active { background: #d4edda; border-color: #4CAF50; color: #2e7d32; }
.bv-no-show.active { background: #fce4e4; border-color: #f44336; color: #c62828; }
.bv-employee-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border-radius: 16px; border: 1px solid #f0f0f0; }
.bv-employee-card-avatar { width: 48px; height: 48px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.bv-employee-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bv-employee-card-info { flex: 1; min-width: 0; }
.bv-employee-card-name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
.bv-time-row { display: flex; flex-direction: column; gap: 1px; }
.bv-time-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #f8f8f8; border-radius: 12px; }
.bv-time-label { font-size: 14px; color: #666; }
.bv-time-value { font-size: 14px; font-weight: 500; color: #1a1a1a; }
.bv-services-list { display: flex; flex-direction: column; gap: 6px; }
.bv-service-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f8f8f8; border-radius: 10px; color: #1a1a1a; }
.bv-service-photo-small { width: 40px; height: 40px; border-radius: 8px; background: #e8e8e8; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.bv-service-photo-small img { width: 100%; height: 100%; object-fit: cover; }
.bv-svc-info { flex: 1; min-width: 0; }
.bv-svc-name { font-weight: 500; font-size: 14px; }
.bv-svc-master { color: #666; font-size: 12px; margin-top: 2px; }
.bv-svc-master-name { font-weight: 500; }
.bv-svc-price { color: #888; font-size: 12px; margin-top: 1px; }
.bv-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.bv-color-squircle { width: 32px; height: 32px; border-radius: 10px; cursor: pointer; position: relative; transition: all .3s; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.bv-color-squircle.active { transform: scale(1.15); box-shadow: 0 3px 10px currentColor; }
.bv-color-glare { position: absolute; top: 0; left: 2px; right: 2px; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 100%); border-radius: 10px 10px 40% 40%; pointer-events: none; }
.bv-color-check { position: relative; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.bv-comment { width: 100%; padding: 12px 14px; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 14px; background: #f8f8f8; resize: vertical; min-height: 70px; font-family: inherit; box-sizing: border-box; color: #1a1a1a; }
.bv-comment:focus { outline: none; border-color: #dd1847; background: #fff; }
.bv-cancel-btn { width: 100%; padding: 14px; background: #fff; border: 1px solid #f44336; color: #f44336; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 20px; font-family: inherit; }
.bv-cancel-btn:hover { background: #f44336; color: #fff; }
.bv-save-btn { width: 100%; padding: 16px; background: #dd1847; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.bv-save-btn:hover { background: #c4153e; }

@media (max-width: 767px) { .booking-view-body { padding: 12px 16px; } }
/* ===== OCCUPY TIME MODAL ===== */
.occupy-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1100; display: flex; align-items: flex-end; justify-content: center; }
.occupy-modal { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 500px; max-height: 85vh; display: flex; flex-direction: column; }
.occupy-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #f0f0f0; }
.occupy-modal-back, .occupy-modal-close { background: none; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.occupy-modal-title { font-size: 18px; font-weight: 600; margin: 0; }
.occupy-modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.occupy-section { margin-bottom: 24px; }
.occupy-label { display: block; font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; }
.occupy-employee { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f8f8f8; border-radius: 12px; }
.occupy-employee-avatar { width: 44px; height: 44px; border-radius: 50%; background: #e8e8e8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.occupy-employee-avatar img { width: 100%; height: 100%; object-fit: cover; }
.occupy-employee-info { flex: 1; }
.occupy-employee-name { font-size: 15px; font-weight: 500; }
.occupy-all-day { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 14px; margin-bottom: 12px; }
.occupy-toggle { position: relative; display: inline-block; width: 48px; height: 26px; }
.occupy-toggle input { opacity: 0; width: 0; height: 0; }
.occupy-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: .3s; border-radius: 26px; }
.occupy-toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 2px; bottom: 2px; background-color: #fff; transition: .3s; border-radius: 50%; }
.occupy-toggle input:checked + .occupy-toggle-slider { background-color: #dd1847; }
.occupy-toggle input:checked + .occupy-toggle-slider:before { transform: translateX(22px); }
.occupy-datetime-selector { margin-bottom: 8px; }
.occupy-datetime-row { display: flex; align-items: center; gap: 10px; padding: 14px; background: #f8f8f8; border-radius: 12px; font-size: 15px; font-weight: 500; }
.occupy-duration { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.occupy-duration-value { font-size: 14px; color: #888; }
.occupy-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.occupy-color { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all .15s; }
.occupy-color.selected { border-color: #1a1a1a; transform: scale(1.15); }
.occupy-textarea { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 14px; background: #f8f8f8; resize: vertical; min-height: 80px; font-family: inherit; }
.occupy-textarea:focus { outline: none; border-color: #dd1847; background: #fff; }
.occupy-modal-footer { padding: 20px; border-top: 1px solid #f0f0f0; }
.occupy-delete-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; margin-bottom: 10px; background: #fff; border: 1px solid #f44336; border-radius: 12px; color: #f44336; font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit; }
.occupy-delete-btn:hover { background: #f44336; color: #fff; }
.occupy-save-btn { width: 100%; padding: 16px; background: #dd1847; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.occupy-save-btn:hover { background: #c4153e; }
.occupy-save-btn:disabled { background: #ccc; cursor: not-allowed; }

@media (min-width: 768px) { .occupy-modal-overlay { align-items: center; } .occupy-modal { border-radius: 20px; max-height: 75vh; } }
/* ===== FILTER MODAL ===== */
.filter-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.filter-modal { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 500px; max-height: 80vh; display: flex; flex-direction: column; }
.filter-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #f0f0f0; }
.filter-modal-header h3 { font-size: 18px; font-weight: 600; margin: 0; }
.filter-modal-header button { background: none; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.filter-modal-actions { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid #f0f0f0; }
.filter-modal-actions button { background: none; border: none; color: #dd1847; font-size: 14px; font-weight: 500; cursor: pointer; padding: 4px 0; font-family: inherit; }
.filter-modal-actions span { color: #ddd; }
.filter-modal-search { position: relative; padding: 12px 20px; border-bottom: 1px solid #f0f0f0; }
.filter-modal-search svg { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.filter-modal-search input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 14px; background: #f8f8f8; outline: none; font-family: inherit; }
.filter-modal-search input:focus { border-color: #dd1847; background: #fff; }
#filterEmployeeList { flex: 1; overflow-y: auto; padding: 8px 0; }
.filter-employee-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; cursor: pointer; user-select: none; }
.filter-employee-item:hover { background: #f9f9f9; }
.filter-employee-item.unchecked { opacity: 0.5; }
.filter-employee-avatar { width: 44px; height: 44px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.filter-employee-avatar img { width: 100%; height: 100%; object-fit: cover; }
.filter-employee-info { flex: 1; min-width: 0; }
.filter-employee-name { font-size: 15px; font-weight: 500; color: #1a1a1a; }
.filter-employee-position { font-size: 13px; color: #888; margin-top: 2px; }
.filter-checkbox { width: 24px; height: 24px; border-radius: 6px; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.filter-employee-item:not(.unchecked) .filter-checkbox { background: #dd1847; border-color: #dd1847; }
.filter-checkbox svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; display: none; }
.filter-employee-item:not(.unchecked) .filter-checkbox svg { display: block; }
.filter-modal-footer { padding: 16px 20px; border-top: 1px solid #f0f0f0; }
.filter-modal-apply-btn { width: 100%; padding: 14px; background: #dd1847; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }

@media (min-width: 768px) { .filter-modal-overlay { align-items: center; } .filter-modal { border-radius: 20px; } }
/* ===== NOTIFICATIONS CHANNELS ===== */
.notif-channels-page { max-width: 100%; }
.notif-channels-page h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.notif-channels-page p { font-size: 14px; color: #888; margin: 0 0 8px; }
.notif-group { margin-bottom: 24px; }
.notif-group-title { font-size: 13px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.notif-type-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; cursor: pointer; transition: all .15s; }
.notif-type-card:hover { border-color: #e0e0e0; }
.notif-type-header { display: flex; align-items: center; gap: 12px; }
.notif-type-name { flex: 1; font-size: 14px; font-weight: 600; }
.notif-type-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.notif-status { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.notif-status.on { background: #e8f5e9; color: #2e7d32; }
.notif-status.off { background: #f5f5f5; color: #999; }
.vk-type-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f8f8f8; border-radius: 10px; font-size: 14px; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.modal-content { background: #fff; border-radius: 20px; width: 90%; max-height: 80vh; display: flex; flex-direction: column; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #f0f0f0; }
.modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; }
.modal-header button { background: none; border: none; cursor: pointer; color: #666; padding: 4px; }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.modal-footer { display: flex; gap: 10px; padding: 20px; border-top: 1px solid #f0f0f0; }
.btn-cancel { flex: 1; padding: 14px; background: #f5f5f5; border: none; border-radius: 12px; font-size: 14px; cursor: pointer; font-family: inherit; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #888; margin-bottom: 6px; text-transform: uppercase; }
.service-toggle { position: relative; display: inline-block; width: 48px; height: 26px; }
.service-toggle input { opacity: 0; width: 0; height: 0; }
.service-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; transition: .3s; border-radius: 26px; }
.service-toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 2px; bottom: 2px; background: #fff; transition: .3s; border-radius: 50%; }
.service-toggle input:checked + .service-toggle-slider { background: #dd1847; }
.service-toggle input:checked + .service-toggle-slider:before { transform: translateX(22px); }
/* ===== NOTIFICATIONS HISTORY ===== */
.notif-history-page { max-width: 100%; }
.notif-history-page h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.notif-history-page > p { font-size: 13px; color: #888; margin: 0 0 20px; }
.hist-search-wrapper { position: relative; margin-bottom: 16px; }
.hist-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.hist-search { width: 100%; padding: 12px 14px 12px 42px; border: 1px solid #f0f0f0; border-radius: 14px; font-size: 14px; font-family: inherit; background: #fff; outline: none; box-sizing: border-box; }
.hist-search:focus { border-color: #dd1847; }
.hist-period { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.hist-period-label { font-size: 13px; font-weight: 600; color: #1a1a1a; cursor: pointer; background: #fff; border: 1px solid #f0f0f0; border-radius: 14px; padding: 6px 12px; white-space: nowrap; }
.hist-period-arrows { display: flex; align-items: center; gap: 8px; }
.hist-period-dates { font-size: 14px; font-weight: 500; color: #1a1a1a; white-space: nowrap; }
.hist-arrow { width: 32px; height: 32px; border: 1px solid #e0e0e0; background: #fff; border-radius: 8px; cursor: pointer; font-size: 14px; color: #666; display: flex; align-items: center; justify-content: center; }
.hist-arrow:hover { background: #f5f5f5; }
.hist-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; }
.hist-filters::-webkit-scrollbar { display: none; }
.hist-filter-group { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #f0f0f0; border-radius: 14px; padding: 10px 14px; flex-shrink: 0; }
.hist-filter-label { font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase; white-space: nowrap; }
.hist-select { padding: 8px 24px 8px 8px; border: none; background: #f5f5f5; border-radius: 10px; font-size: 13px; font-family: inherit; font-weight: 500; color: #1a1a1a; outline: none; cursor: pointer; appearance: none; background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23999%27 stroke-width=%272%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 6px center; }
.hist-loading { text-align: center; padding: 40px; color: #999; }
.hist-empty { text-align: center; padding: 40px; color: #999; }
.hist-group { margin-bottom: 24px; }
.hist-group-date { font-size: 13px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.hist-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #f3f4f6; border-radius: 14px; padding: 14px; margin-bottom: 6px; cursor: pointer; transition: all .15s; }
.hist-item:hover { border-color: #e8e8e8; }
.hist-item-avatar { width: 40px; height: 40px; border-radius: 50%; background: #f3f4f6; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: #999; overflow: hidden; }
.hist-item-info { flex: 1; min-width: 0; }
.hist-item-name { font-size: 14px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-item-details { font-size: 12px; color: #999; margin-top: 2px; }
.hist-item-phone { color: #aaa; }
.hist-item-type { font-weight: 500; color: #666; }
.hist-item-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hist-item-time { font-size: 12px; color: #999; }
.hist-item-status { display: inline-flex; align-items: center; }
.hist-item-status.sent { color: #2e7d32; }
.hist-item-status.skipped { color: #c62828; }
.hist-item-status.pending { color: #e65100; }
.hist-item-arrow { color: #ccc; flex-shrink: 0; }
.hist-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: flex-end; justify-content: center; }
.hist-detail-modal { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 500px; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; }
.hist-detail-header { display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; }
.hist-detail-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
.hist-detail-header button { position: absolute; right: 20px; top: 20px; background: none; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; color: #666; display: flex; align-items: center; justify-content: center; }
.hist-detail-body { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.hist-detail-client { display: flex; align-items: center; gap: 14px; }
.hist-detail-avatar { width: 52px; height: 52px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #dd1847; font-size: 20px; }
.hist-detail-name { font-size: 16px; font-weight: 600; }
.hist-detail-phone { font-size: 13px; color: #888; margin-top: 2px; }
.hist-detail-message { background: #f8fafc; border-radius: 14px; padding: 16px; font-size: 14px; line-height: 1.7; color: #1e293b; white-space: pre-wrap; border: 1px solid #e2e8f0; }
.hist-detail-footer { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.hist-detail-footer.sent { color: #2e7d32; }
.hist-detail-footer.skipped { color: #c62828; }
.hist-detail-footer.pending { color: #e65100; }
.hist-detail-status-text { font-weight: 600; }
.hist-detail-date { color: #999; margin-left: auto; }

@media (min-width: 768px) { .hist-detail-overlay { align-items: center; } .hist-detail-modal { border-radius: 20px; max-height: 70vh; } }
/* ===== NOTIFICATIONS MANUAL ===== */
.notif-settings-container { max-width: 100%; }
.notif-settings-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.notif-settings-header h2 { margin: 0; font-size: 20px; font-weight: 700; }
.notif-back-btn { background: none; border: none; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #666; }
.notif-back-btn:hover { background: #f5f5f5; }
.notif-settings-desc { font-size: 14px; color: #888; margin-bottom: 20px; }
.notif-settings-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 14px; padding: 16px; margin-bottom: 10px; }
.notif-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.notif-settings-label { font-size: 14px; font-weight: 600; }
.notif-settings-hint { font-size: 12px; color: #999; margin-top: 4px; line-height: 1.4; }
.notif-warning { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff9e6; border-radius: 12px; font-size: 13px; color: #8b6914; margin-bottom: 20px; line-height: 1.4; }
.notif-type-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.notif-type-desc { font-size: 12px; color: #999; }
.notif-toggle { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.notif-toggle input { opacity: 0; width: 0; height: 0; }
.notif-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: .3s; border-radius: 26px; }
.notif-toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }
.notif-toggle input:checked + .notif-toggle-slider { background-color: #dd1847; }
.notif-toggle input:checked + .notif-toggle-slider:before { transform: translateX(18px); }
/* ===== NOTIFICATIONS SEND POPUP ===== */
.ns-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.5) !important; z-index: 99999 !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; }
.ns-popup { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 500px; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; }
.ns-header { display: flex; align-items: center; justify-content: center; padding: 20px 20px 0; flex-shrink: 0; position: relative; }
.ns-header h3 { margin: 0; font-size: 18px; font-weight: 700; text-align: center; }
.ns-header button { position: absolute; right: 20px; top: 20px; background: none; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; color: #666; display: flex; align-items: center; justify-content: center; }
.ns-body { padding: 20px; display: flex; flex-direction: column; }
.ns-client { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ns-client-avatar { width: 52px; height: 52px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #dd1847; font-size: 20px; flex-shrink: 0; }
.ns-client-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ns-client-name { font-size: 16px; font-weight: 600; }
.ns-client-phone { font-size: 13px; color: #888; margin-top: 2px; }
.ns-message { background: #f8fafc; border-radius: 14px; padding: 16px; font-size: 14px; line-height: 1.7; color: #1e293b; margin-bottom: 16px; white-space: pre-wrap; border: 1px solid #e2e8f0; }
.ns-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ns-send-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 8px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; color: #334155; font-family: inherit; flex: 1; min-width: 0; }
.ns-send-btn:hover { background: #e2e8f0; }
.ns-btn-icon { width: 20px; height: 20px; }
.ns-btn-label { font-size: 10px; font-weight: 600; color: #475569; }
.ns-postpone-wrap { margin: 12px 0; }
.ns-postpone-btn-full { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; color: #64748b; font-family: inherit; }
.ns-skip-btn { width: 100%; padding: 14px; background: none; border: 1px solid #fecaca; border-radius: 12px; color: #ef4444; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; }
.ns-confirm-title { font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px; text-align: center; }
.ns-confirm-subtitle { font-size: 13px; color: #94a3b8; margin-bottom: 20px; text-align: center; }
.ns-confirm-actions { display: flex; gap: 10px; }
.ns-confirm-yes { flex: 1; padding: 14px; background: #16a34a; color: #fff; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ns-confirm-no { flex: 1; padding: 14px; background: #fff; color: #ef4444; border: 1px solid #fecaca; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; }

@media (min-width: 768px) { .ns-overlay { align-items: center !important; } .ns-popup { border-radius: 20px; max-height: 70vh; margin: 40px 0; } }
/* ===== NOTIFICATIONS STATS ===== */
.notif-stats-page { max-width: 100%; }
.stats-cards { display: flex; gap: 8px; margin-bottom: 16px; }
.stats-card { flex: 1; min-width: 0; background: #fff; border: 1px solid #f0f0f0; border-radius: 14px; padding: 12px 10px; display: flex; align-items: center; gap: 8px; }
.stats-card-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stats-card.sent .stats-card-icon { background: #e0f7f5; color: #4ECDC4; }
.stats-card.pending .stats-card-icon { background: #fff4e5; color: #FFB347; }
.stats-card.skipped .stats-card-icon { background: #ffe8ea; color: #FF8B94; }
.stats-card-info { flex: 1; min-width: 0; }
.stats-card-value { font-size: 20px; font-weight: 700; color: #1a1a1a; line-height: 1; }
.stats-card-label { font-size: 11px; color: #888; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-card-percent { font-size: 11px; color: #aaa; margin-top: 2px; font-weight: 500; }
.stats-chart-section { background: #fff; border: 1px solid #f0f0f0; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.stats-chart-section h3 { font-size: 14px; font-weight: 600; color: #1a1a1a; margin: 0 0 12px; }
.stats-chart-container { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.stats-donut { position: relative; width: 160px; height: 160px; flex-shrink: 0; }
.stats-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.stats-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.stats-donut-total { font-size: 24px; font-weight: 700; }
.stats-donut-label { font-size: 11px; color: #999; }
.stats-legend { flex: 1; min-width: 120px; }
.stats-legend-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; color: #555; }
.stats-legend-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.stats-legend-value { margin-left: auto; font-weight: 600; color: #1a1a1a; }
.stats-bars { display: flex; flex-direction: column; gap: 10px; }
.stats-bar-item { display: flex; align-items: center; gap: 10px; }
.stats-bar-label { width: 110px; font-size: 11px; color: #666; font-weight: 500; flex-shrink: 0; }
.stats-bar-track { flex: 1; height: 6px; background: #f3f4f6; border-radius: 3px; overflow: hidden; }
.stats-bar-fill { height: 100%; border-radius: 3px; }
.stats-bar-fill.sent { background: #4ECDC4; }
.stats-bar-fill.pending { background: #FFB347; }
.stats-bar-fill.skipped { background: #FF8B94; }
.stats-bar-value { width: 32px; font-size: 11px; font-weight: 600; color: #1a1a1a; flex-shrink: 0; text-align: right; }

@media (max-width: 480px) {
    .stats-card { padding: 10px 8px; gap: 6px; }
    .stats-card-value { font-size: 18px; }
    .stats-chart-container { flex-direction: column; align-items: center; }
    .stats-bar-label { width: 80px; font-size: 10px; }
}
/* Фиксация колонки времени */
.journal-schedule-table th:first-child,
.journal-schedule-table td:first-child {
    position: sticky !important;
    left: 0 !important;
    background-color: white !important;
    z-index: 15 !important;
    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1) !important;
}

.journal-schedule-table thead th:first-child {
    z-index: 30 !important;
}

/* Фиксация шапки при вертикальном скролле */
.journal-schedule-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: white;
}

/* Никто не работает */
.no-one-works-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    min-height: 300px;
}

.no-one-works-placeholder .placeholder-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.no-one-works-placeholder .placeholder-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.no-one-works-placeholder .placeholder-desc {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Полосы для нерабочего времени (как в PHP) */
.journal-employee-cell.non-working {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.06) 3px,
        rgba(0, 0, 0, 0.06) 4px
    ) !important;
    cursor: default !important;
}

.journal-employee-cell.non-working:hover {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.06) 3px,
        rgba(0, 0, 0, 0.06) 4px
    ) !important;
}

/* Адаптив */
@media (max-width: 767px) {
    .journal-schedule-table th:first-child,
    .journal-schedule-table td:first-child {
        position: sticky !important;
        left: 0 !important;
        background-color: white !important;
        z-index: 15 !important;
        box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1) !important;
    }
}
/* Активная иконка журнала в хедере */
.journal-icon-btn.active {
    background: #dd1847;
    border-radius: 14px;
    padding: 8px;
}

.journal-icon-btn.active svg {
    stroke: white;
}