/* ============================================================================
   ASTANA CAM SYSTEM — STYLE GUIDE (css/style.css)
   ----------------------------------------------------------------------------
   ПРАВИЛА
     1. Бренд-цвета — только через токены: var(--brand), var(--brand-dark),
        var(--brand-rgb) и т.п. Хардкод #1976d2 в новом коде недопустим.
     2. Радиусы — через var(--r-sm/md/lg/pill), тени — var(--shadow*) —
        по мере внедрения.
     3. Повторяющиеся карточки/плашки собираются в JS на общих классах .ui-*
        (см. js/modules/components.js), а не копированием разметки.
     4. Новая секция получает номер и заголовок вида:
            /=== N. НАЗВАНИЕ ===/
     5. Новые media-запросы — в конец файла (в существующем файле часть
        исторически расположена по секциям).

   ТОКЕНЫ (:root, ниже)
     Бренд:        --brand, --brand-dark, --brand-soft, --brand-rgb
     Поверхности:  --surface, --surface-2, --surface-hover
     Границы:      --line, --line-strong
     Текст:        --text, --text-2, --muted
     Семантика:    --ok, --bad, --fix, --ptz, --tag-bg, --pink-soft
     Радиусы:      --r-sm(6), --r-md(8), --r-lg(10), --r-pill(999)
     Тени:         --shadow-sm, --shadow

   КОМПОНЕНТЫ (общие)
     .ui-card, .ui-card--clickable, .ui-card--flat
     .ui-card__head, .ui-card__title, .ui-card__badges, .ui-card__meta
     .ui-badge, .ui-badge--tag/--fix/--ptz
     .camera-status-badge.online/.offline/.unknown/.http — статус камеры
     Алиасы: .object-tag, .camera-badge → .ui-badge

   ОГЛАВЛЕНИЕ
      0. UI COMPONENTS — общие классы .ui-*
      1. RESET & BASE
      2. TOPBAR
      3. SEARCH
      4. TOPBAR ACTIONS
      5. USER MENU
      6. FILTERS BAR
      7. MAP
      8. SIDEBAR
      9. OBJECTS
     10. CAMERAS
     11. TASKS
     12. EQUIPMENT
     13. MODALS
     14. FORMS
     15. BUTTONS
     16. USERS
     17. HISTORY TABLE
     18. GALLERY
     19. REPORT PHOTOS
     20. WORKSPACE MODAL
     21. TOAST
     22. ADMIN ONLY
     23. SCROLLBAR
     24. MOBILE ADAPTIVE
     25. EMPTY STATE
     26. MISC / UTILITY
     27. CAMERA CHECKBOX LIST
     28. TASK CARD BUTTONS
     29. MOBILE (<=820px)
     30. ANIMATIONS
     31. POLISH
     32. VIEWER RESTRICTIONS
     33. HINTS
     34. CAMERA PHOTOS
     35. MAP MARKER PULSE
     36. HISTORY
     37. PING PANELS
     38. CAMCTL WARNING
     39. MAP TOOLTIP
   ============================================================================ */

/* ============================================
   DESIGN TOKENS (единый язык стилей сайдбара)
   Значения 1:1 совпадают с прежними цветами —
   внешний вид не меняется, меняется только способ задания.
   ============================================ */
:root {
    /* бренд */
    --brand:         #1976d2;
    --brand-dark:    #1565c0;
    --brand-soft:    #e8f2ff;

    /* поверхности и границы */
    --surface:       #ffffff;
    --surface-2:     #f8f9fa;
    --surface-hover: #e9ecef;
    --line:          #e5e7eb;
    --line-strong:   #d1d5db;

    /* текст */
    --text:          #1f2430;
    --text-2:        #374151;
    --muted:         #6b7280;

    /* семантика */
    --ok:            #2e7d32;
    --bad:           #d32f2f;
    --fix:           #2196f3;
    --ptz:           #7b1fa2;
    --tag-bg:        #e3f2fd;
    --pink-soft:     #fce4ec;
    --brand-rgb:     25, 118, 210;

    /* радиусы и тени */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(20, 30, 60, .05);
    --shadow:    0 4px 12px rgba(20, 30, 60, .08);
}

/* ============================================
   0. UI COMPONENTS (общие для сайдбара)
   Канонические классы, которые переиспользуют
   карточки объектов, камер, работ и оборудования.
   Внедряются постепенно; старые классы сохраняются.
   ============================================ */

/* --- карточка/строка --- */
.ui-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px;
    margin-bottom: 8px;
}
.ui-card--clickable { cursor: pointer; }
.ui-card--clickable:hover { background: var(--surface-hover); }
.ui-card--flat { background: var(--surface-2); border: none; padding: 10px 12px; }

/* шапка карточки: заголовок слева, действия справа */
.ui-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ui-card__title { font-weight: 600; }
.ui-card__badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* серая строка с иконкой (адрес, телефон, инв. №) */
.ui-card__meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
}
.ui-card__meta i {
    width: 14px;
    margin-right: 6px;
    text-align: center;
}

/* --- плашка «таблетка» (тег, тип камеры, FIX/PTZ) ---
   .object-tag / .camera-badge — старые имена, оставлены алиасами. */
.ui-badge,
.object-tag,
.camera-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin-top: 6px;
}
.ui-badge--tag,
.object-tag { background: var(--tag-bg); color: var(--brand); }
.ui-badge--fix,
.camera-badge.fix { background: var(--fix); color: #fff; }
.ui-badge--ptz,
.camera-badge.ptz { background: #f3e5f5; color: var(--ptz); }

/* ============================================
   1. RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: #f5f5f5;
    overflow: hidden;
}

/* ============================================
   2. TOPBAR (Верхняя панель)
   ============================================ */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.topbar-content {
    max-width: 1700px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.burger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #888;
    text-decoration: none;
    white-space: nowrap;
}

.logo-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* ============================================
   3. SEARCH
   ============================================ */
.search-container {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.search-container input {
    width: 100%;
    max-width: 760px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid #d7dce3;
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    transition: 0.2s;
    outline: none;
}

.search-container input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
}

/* Кнопка фильтров слева внутри строки поиска (как в Google) */
.search-box {
    width: 100%;
    max-width: 760px;
    position: relative;
}
.search-box input {
    padding-left: 44px;   /* место под кнопку фильтров */
}
.search-filter-btn {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    z-index: 1;
}
.search-filter-btn:hover { background: #f1f4f9; color: var(--brand); }
.search-filter-btn.active { background: var(--brand-soft); color: var(--brand); }

/* Выпадающее меню фильтров */
.filters-dropdown {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 700px;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 12px 16px;
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 2000;
}
.filters-dropdown.active { display: flex; }

.search-dropdown {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 700px;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    overflow-y: auto;      /* список прокручивается, если много результатов */
    max-height: 60vh;
    display: none;
    z-index: 2000;
}

.search-dropdown.active {
    display: block;
}

.search-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f3f3;
    transition: 0.15s;
}
.search-item:last-child {
    border-bottom: none;
}
.search-item:hover {
    background: #f4f8ff;
}

.search-title {
    font-weight: 600;
    color: #222;
}
.search-subtitle {
    margin-top: 3px;
    font-size: 13px;
    color: #7d8792;
}

/* ============================================
   4. TOPBAR ACTIONS (Кнопки справа)
   ============================================ */
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-icon-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fff;
    color: #666;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}
.topbar-icon-btn:hover {
    background: #f5f5f5;
    color: var(--brand);
}

/* ============================================
   5. USER MENU
   ============================================ */
.user-menu {
    position: relative;
}

.user-avatar {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    display: none;
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--r-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 1100;
}
.user-dropdown.active {
    display: block;
}

.user-dropdown-info {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

.user-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: none;
    background: none;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.user-dropdown-item:hover {
    background: #f5f5f5;
}

/* ============================================
   6. FILTERS BAR (Районы и теги)
   ============================================ */
.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-group label {
    font-size: 13px;
    color: #666;
}

.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip {
    padding: 5px 12px;
    background: #f0f0f0;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.filter-chip.active {
    background: var(--brand);
    color: white;
}
.filter-chip:hover:not(.active) {
    background: #e0e0e0;
}
/* Счётчик камер на кнопках фильтров */
.filter-chip .chip-count {
    margin-left: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    background: rgba(0, 0, 0, 0.06);
    border-radius: var(--r-lg);
    padding: 1px 7px;
    line-height: 1.5;
    white-space: nowrap;
}
.filter-chip.active .chip-count {
    color: #fff;
    background: rgba(255, 255, 255, 0.25);
}
.analytics-chip .chip-count {
    margin-left: 2px;
    pointer-events: none;
    font-size: 10px;
    padding: 0 5px;
}

/* Чекбоксы аналитики (viewer): чип с галочкой внутри */
.analytics-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 12px;
}
.analytics-chip input.analytics-check {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}
.analytics-chip span {
    cursor: pointer;
    pointer-events: none;
}
/* Компактнее: группа и список аналитики */
.filter-group#analyticsFilterGroup { gap: 6px; }
.filter-group#analyticsFilterGroup > label { font-size: 12px; }
#analyticsList { gap: 5px; }
#analyticsList .analytics-chip { font-size: 12px; }

/* Группа «Аналитика» видна только viewer и сохраняет горизонтальную раскладку */
.filter-group#analyticsFilterGroup {
    display: none;
}
body[data-analytics="1"] .filter-group#analyticsFilterGroup {
    display: flex !important;
}

/* ============================================
   7. MAP
   ============================================ */
#map {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Маркеры на карте */
.custom-marker-number {
    background: transparent;
    border: none;
}
.custom-marker-number div {
    transition: transform 0.1s ease;
    cursor: pointer;
}
.custom-marker-number div:hover {
    transform: scale(1.15);
    z-index: 1000;
}

/* ============================================
   8. SIDEBAR (Правая панель)
   ============================================ */
.sidebar {
    position: fixed;
    top: 60px;
    right: 0;
    width: 380px;
    bottom: 0;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.tabs {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
}

.tab {
    padding: 8px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 20px;
    transition: all 0.2s;
}
.tab.active {
    background: var(--brand);
    color: white;
}

.sidebar-close {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: none;
}
.tab-content.active {
    display: block;
}
/* Боковые отступы во всех вкладках одинаковые — задаются .tab-content */

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

.tab-header .task-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.btn-tool {
    width: 32px;
    height: 32px;
    background: #eef3f9;
    color: #34506e;
    border: 1px solid #d6e0ec;
    font-size: 15px;
}
.btn-icon.btn-tool:hover { background: #e1ebf6; }
.btn-icon.btn-tool.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* ===== Панель фильтра/сортировки работ (вкладка «Работы») ===== */
.task-control-panel {
    display: none;
    margin: 0 10px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--r-lg);
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.task-control-panel.active { display: block; }
.task-control-panel h4 {
    font-size: 13px;
    color: #34506e;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.tcp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.tcp-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
}
.tcp-actions .btn-secondary {
    flex: 1;
    font-size: 13px;
    padding: 7px 8px;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    background: #fff;
    border-radius: 7px;
    color: #333;
}
.tcp-actions .btn-primary {
    flex: 1;
    font-size: 13px;
    padding: 7px 8px;
    cursor: pointer;
    border: none;
    background: var(--brand);
    border-radius: 7px;
    color: #fff;
}
.task-status-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}
.task-status-checks label .chk-dot {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.sort-mode-list button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    text-align: left;
}
.sort-mode-list button.active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: #0b4ea2;
    font-weight: 600;
}
.sort-dir-btns {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.sort-dir-btns button {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}
.sort-dir-btns button.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.task-filter-status {
    display: none;
    font-size: 12px;
    color: var(--muted);
    padding: 0 10px 10px;
    word-break: break-word;
}
.task-filter-status.show { display: block; }

/* ============================================
   9. OBJECTS (Список объектов)
   ============================================ */
#objectsList {
    padding: 0;
    background: #ffffff;
}

.object-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.object-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.object-item:active {
    background: #f0f4f8;
}

.object-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.object-address {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    margin-bottom: 8px;
}
.object-address .fa-location-dot {
    color: var(--muted);
    margin-right: 5px;
}

/* В раскрытой карточке объекта (вкладка «Объект») иконки подкрашены */
#tab-object .object-card .object-address .fa-location-dot { color: var(--bad); }
#tab-object .object-card .object-phone i { color: var(--ok); }

.object-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 15px;
}

.object-contact {
    margin-top: 18px;
    font-size: 13px;
    color: #666;
}
.object-phone {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}
.object-phone a { color: inherit; text-decoration: none; }
.object-phone a:hover { color: var(--brand); text-decoration: underline; }
.object-contact i,
.object-phone i {
    width: 14px;
    color: #757575;
    margin-right: 8px;
    font-size: 12px;
}

.object-comment {
    margin-top: 10px;
    margin-bottom: 14px;
    padding: 8px 12px 8px 14px;
    border-left: 4px solid #f48fb1;
    background: var(--pink-soft);
    border-radius: var(--r-sm);
    color: #555;
    font-style: normal;
}

.object-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
/* Плашка статуса камеры рядом с плашками-таблетками — выравниваем по высоте */
.object-badges .camera-status-badge { margin-top: 6px; }

/* ============================================
   10. CAMERAS
   ============================================ */
.camera-item,
.equipment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: var(--r-md);
    margin-bottom: 8px;
    transition: background 0.2s;
    cursor: pointer;
    gap: 10px;
}
.camera-item:hover,
.equipment-item:hover {
    background: var(--surface-hover);
}
/* Левый бордер в цвет типа камеры (FIX / PTZ) */
.camera-item.fix { border-left: 4px solid var(--fix); }
.camera-item.ptz { border-left: 4px solid var(--ptz); }
.camera-item-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.camera-item-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.camera-title {
    font-weight: 600;
    font-size: 14px;
    color: #212529;
    white-space: nowrap;
}

.camera-inventory {
    font-size: 12px;
    color: #6c757d;
    margin-top: 8px;
}



.camera-card {
    margin-bottom: 15px;
}

.camera-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.camera-name {
    font-size: 18px;
    font-weight: 600;
}

.camera-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.camera-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    padding: 0;
}

.camera-action-btn:hover {
    background: var(--surface-hover);
    color: #212529;
}
/* Кнопка "Фото" - синяя */
.camera-action-btn.photo-btn {
    color: #0d6efd;
}
.camera-action-btn.photo-btn:hover {
    background: #cfe2ff;
    color: #0a58ca;
}
/* Кнопка "Редактировать" - серая */
.camera-action-btn.edit-btn {
    color: #6c757d;
}

.camera-action-btn.edit-btn:hover {
    background: var(--surface-hover);
    color: #212529;
}

/* Кнопка "Удалить" - красная */
.camera-action-btn.delete-btn {
    color: #dc3545;
}

.camera-action-btn.delete-btn:hover {
    background: #f8d7da;
    color: #b02a37;
}

.camera-action-btn i {
    font-size: 14px;
}
.camera-edit-icon {
    color: #8a8a8a;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
}
.camera-edit-icon:hover {
    color: #555;
}

.camera-delete-icon {
    color: #8a8a8a;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
}
.camera-delete-icon:hover {
    color: var(--bad);
}
.camera-status-badge {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.5;
    transition: all 0.2s;
}

/* Онлайн - зеленый фон */
.camera-status-badge.online {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Оффлайн - красный фон */
.camera-status-badge.offline {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
/* Неизвестно/загрузка - серый фон */
.camera-status-badge.unknown {
    background: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

/* ICMP не отвечает, но камера доступна по HTTP/снимку */
.camera-status-badge.http {
    background: #fff3cd;
    color: #7a5b00;
    border: 1px solid #ffe08a;
}

/* ===== КАРТОЧКА КАМЕРЫ (детальный просмотр) ===== */
.camera-card .camera-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.camera-card .camera-name {
    font-size: 18px;
    font-weight: 600;
}
/* ===== АДАПТИВ ДЛЯ МОБИЛЬНЫХ ===== */
@media (max-width: 576px) {
    .camera-item {
        flex-wrap: wrap;
        padding: 8px 10px;
    }
    
    .camera-item-top {
        gap: 6px;
    }
    
    .camera-title {
        font-size: 13px;
    }
    
    .camera-status-badge {
        font-size: 11px;
        padding: 2px 12px;
    }
    
    .camera-actions {
        gap: 2px;
    }
    
    .camera-action-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

/* ============================================
   11. TASKS (Работы)
   ============================================ */
.task-section-title {
    margin-top: 18px;
    margin-bottom: 8px;
}

.task-item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 12px;
    cursor: pointer;
}
.task-item:hover {
    background: #f9f9f9;
    border-color: #ddd;
}

.task-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    font-weight: 600;
}

.task-number {
    color: #fff;
}

.task-status {
    font-size: 12px;
    font-weight: 600;
}

.task-body {
    padding: 12px;
}

.task-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.task-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-back-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--brand);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Кнопки действий в карточке объекта — как «назад», но своего цвета */
.task-back-btn--copy { background: var(--ok); }
.task-back-btn--edit { background: #4b5563; }

.task-type-tag,
.task-status-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.task-type-tag {
    background: var(--brand-soft);
    color: #2b7de9;
}

.task-badges {
    display: flex;
    gap: 6px;
    margin: 8px 0;
}

.task-date,
.task-assignee {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}
.task-date i,
.task-assignee i {
    color: var(--muted);
    margin-right: 5px;
    width: 14px;
}

.task-solution {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 4px solid #46b54a;
    color: #666;
    line-height: 1.5;
}

/* Статусы */
.status-new {
    background: #ff9800;
    color: white;
}
.status-assigned {
    background: var(--fix);
    color: white;
}
.status-accepted {
    background: #9c27b0;
    color: white;
}
.status-in_progress {
    background: #ff5722;
    color: white;
}
.status-power {
    background: #ffb300;
    color: #3e2a00;
}
.status-provider {
    background: #8d6e63;
    color: white;
}
.status-completed {
    background: #dcedc8;
    color: var(--ok);
}
.status-confirmed {
    background: #4caf50;
    color: white;
}
.status-cancelled {
    background: #ffa0a0;
    color: white;
}

.task-info-success {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: #555;
    font-size: 14px;
}
.task-info-success i {
    color: var(--ok);
    flex-shrink: 0;
}

/* ============================================
   12. EQUIPMENT (Оборудование)
   ============================================ */
.equipment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 10px;
}
.equipment-header h4 {
    margin: 0;
    font-weight: 600;
}

.equipment-add-icon {
    color: #8a8a8a;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
}
.equipment-add-icon:hover {
    color: #555;
}

.equipment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.equipment-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equipment-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #212529;
}
/* Тип оборудования — капсом, тем же шрифтом/размером, что FIX1/PTZ1 */
.equipment-title strong {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

.equipment-name {
    font-weight: 400;
    font-size: 14px;
    color: #212529;
}

.equipment-inventory {
    font-size: 12px;
    color: #6c757d;
}

.equipment-edit-icon {
    color: #8a8a8a;
    cursor: pointer;
    font-size: 14px;
    margin-left: auto;
    padding: 6px;
}
.equipment-edit-icon:hover {
    color: #555;
}

.equipment-delete-icon {
    color: #8a8a8a;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
}
.equipment-delete-icon:hover {
    color: var(--bad);
}

.equipment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#equipmentList {
    padding: 1px;
}

/* ============================================
   13. MODALS (Модальные окна)
   ============================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.modal-header h3 {
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.modal-body {
    flex: 1;
    min-height: 0;      /* разрешить прокрутку, а не сжатие контента */
    overflow-y: auto;
    padding: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #eee;
}

/* ============================================
   14. FORMS
   ============================================ */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: var(--r-md);
    font-size: 14px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand);
}

/* ============================================
   15. BUTTONS
   ============================================ */
.btn-primary {
    padding: 10px 20px;
    background: var(--brand);
    color: white;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
}
.btn-primary:hover {
    background: var(--brand-dark);
}
.btn-primary:disabled,
.btn-primary[disabled] {
    background: #c3ccd9;
    cursor: not-allowed;
    opacity: .85;
}
.btn-primary:disabled:hover,
.btn-primary[disabled]:hover {
    background: #c3ccd9;
}

.btn-secondary {
    padding: 10px 20px;
    background: #f0f0f0;
    color: #333;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
}

.btn-small {
    padding: 5px 12px;
    font-size: 12px;
    background: var(--brand);
    color: white;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
}

/* ============================================
   16. USERS (Пользователи)
   ============================================ */
.user-item {
    padding: 12px;
    border: 1px solid #eee;
    border-radius: var(--r-md);
    margin-bottom: 10px;
    background: #fafafa;
}

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

.user-role {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}
.role-admin {
    background: #f44336;
    color: white;
}
.role-installer {
    background: #ff9800;
    color: white;
}
.role-viewer {
    background: #4caf50;
    color: white;
}

.user-details {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}
.user-details div {
    margin-bottom: 2px;
}

.user-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.user-actions .btn-small {
    padding: 4px 8px;
}

/* ============================================
   17. HISTORY TABLE
   ============================================ */
.history-table {
    width: 100%;
    border-collapse: collapse;
}
.history-table th {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    background: #fafafa;
}
.history-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.history-table tbody tr {
    cursor: pointer;
    transition: 0.15s;
}
.history-table tbody tr:hover {
    background: #f5f8fc;
}

/* ============================================
   18. GALLERY
   ============================================ */
.gallery-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 5000;
}
.gallery-modal.active {
    display: block;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}
.gallery-content img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
}

.gallery-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
}

.gallery-counter {
    margin-top: 15px;
    color: #fff;
    text-align: center;
    font-size: 16px;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 22px;
    z-index: 10;
}
.gallery-prev {
    left: -70px;
}
.gallery-next {
    right: -70px;
}

/* ============================================
   19. REPORT PHOTOS
   ============================================ */
.report-files-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.report-photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f5f5f5;
    transition: 0.2s;
    cursor: pointer;
}
.report-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.report-photo:hover {
    transform: scale(1.03);
}

.report-photo-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    opacity: 1;
}

.report-photo-add {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px dashed #cfd8dc;
    color: var(--brand);
    font-size: 28px;
    background: #fafafa;
    transition: 0.2s;
}
.report-photo-add:hover {
    background: #f2f7ff;
    border-color: var(--brand);
}

.report-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5c5c5;
    font-size: 30px;
    cursor: default;
}

.upload-zone {
    margin-top: 10px;
    padding: 20px;
    border: 2px dashed #d8dce3;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.upload-zone:hover {
    background: #f8fafc;
}
.upload-zone i {
    font-size: 28px;
    color: var(--muted);
    margin-bottom: 10px;
}
.upload-text {
    color: #555;
    font-size: 14px;
}

/* ============================================
   20. WORKSPACE MODAL (Большое окно)
   ============================================ */
.workspace-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}
.workspace-modal.active {
    display: flex;
}

.workspace-modal-content {
    width: 90%;
    max-width: 1200px;
    height: 85vh;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workspace-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
}
.workspace-modal-header h2 {
    margin: 0;
}

.workspace-modal-close {
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
}

.workspace-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ============================================
   21. TOAST (Уведомления)
   ============================================ */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 30px;
    color: white;
    font-size: 14px;
    z-index: 3000;
    animation: fadeInOut 3s ease;
}

.toast-success {
    background: #4caf50;
}
.toast-error {
    background: #f44336;
}
.toast-info {
    background: var(--fix);
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    90% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

/* ============================================
   22. ADMIN ONLY (Показывается только админу)
   ============================================ */
.admin-only {
    display: none;
}
body[data-role="admin"] .admin-only {
    display: flex;
}

/* ============================================
   23. SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* ============================================
   24. MOBILE ADAPTIVE
   ============================================ */
@media (max-width: 768px) {
    .burger {
        display: block;
    }

    .topbar-btn,
    #settingsBtn,
    .logo {
        display: none;
    }

    .search-container {
        flex: 1;
        max-width: none;
    }

    .user-info span {
        display: none;
    }

    #map {
        top: 60px;
    }

    .sidebar {
        left: 0;
        right: auto;
        width: min(360px, 90vw);
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-close {
        display: block;
    }
}

/* ============================================
   25. EMPTY STATE
   ============================================ */
.empty-state {
    color: #666;
    padding: 8px 0;
}

/* ============================================
   26. MISC / UTILITY
   ============================================ */
.inventory {
    font-size: 12px;
    color: #999;
}

.task-object,
.task-camera {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.cameras-container {
    padding: 1px;
}

.object-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-dates {
    margin: 12px 0;
}
.task-date-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}
.task-date-label {
    color: #666;
    font-size: 13px;
}
.task-date-value {
    color: #333;
    font-size: 13px;
}

.report-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #e5e5e5;
    border-radius: var(--r-md);
    background: #fafafa;
}
.report-file-item i {
    color: var(--brand);
}

/* ============================================
   27. CAMERA CHECKBOX LIST (выбор нескольких камер)
   ============================================ */
.camera-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: var(--r-md);
    padding: 10px;
    background: #fafafa;
}

.camera-checkbox-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    font-size: 14px;
}

.camera-checkbox-list label:hover {
    background: #f0f4f8;
}

.camera-checkbox-list .checkbox-all {
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.camera-checkbox-list .checkbox-all label {
    font-weight: 600;
}

.camera-checkbox-list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

#selectedCamerasCount {
    display: block;
    font-size: 13px;
    color: #666;
    margin-top: 6px;
}

.camera-type-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--r-lg);
    font-size: 10px;
    font-weight: 600;
    margin-left: auto;
}

.camera-type-badge.fix {
    background: var(--fix);
    color: white;
}

.camera-type-badge.ptz {
    background: #9c27b0;
    color: white;
}

/* ============================================
   28. TASK CARD BUTTONS (кнопки в карточке работы)
   ============================================ */
.task-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

/* Все кнопки в карточке работы — одинаковый стиль */
.task-actions .btn-primary,
.task-actions .btn-edit-task,
.task-actions .btn-confirm-task,
.task-actions .btn-cancel-task {
    padding: 10px 20px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    text-decoration: none;
    min-width: 140px;  /* ← чтобы кнопки были одинаковой ширины */
}

/* Синяя залитая (как "Создать работу") */
.task-actions .btn-confirm-task,
.task-actions .btn-primary {
    background: var(--brand);
    color: white;
}
.task-actions .btn-confirm-task:hover,
.task-actions .btn-primary:hover {
    background: var(--brand-dark);
}

/* Синяя контурная ("Редактировать") */
.task-actions .btn-edit-task {
    background: transparent;
    color: var(--brand);
    border: 2px solid var(--brand);
}
.task-actions .btn-edit-task:hover {
    background: var(--brand);
    color: white;
}

/* Красная контурная ("Отменить") */
.task-actions .btn-cancel-task {
    background: transparent;
    color: var(--bad);
    border: 2px solid var(--bad);
}
.task-actions .btn-cancel-task:hover {
    background: var(--bad);
    color: white;
}

/* Бейдж работы в списке объектов */
.task-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin: 4px 0;
    background: #e3f2fd;
    color: var(--brand);
}
/* ============================================================
   29. MOBILE (телефоны, <=820px)
   ============================================================ */
@media (max-width: 820px) {
    :root {
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    body {
        padding-bottom: var(--safe-bottom);
    }

    /* ===== Topbar: компактно, безопасная зона под вырез ===== */
    .topbar { height: calc(56px + var(--safe-top)); }
    .topbar-content {
        padding: var(--safe-top) 10px 0;
        gap: 8px;
    }
    /* Мобильная версия: логотип и история работ скрыты */
    .topbar .logo { display: none; }
    .topbar .logo .logo-icon { height: 24px; }

    .burger { font-size: 26px; padding: 6px; display: block; flex-shrink: 0; }

    .search-container { max-width: none; }
    .search-container input {
        height: 40px;
        font-size: 15px;
        -webkit-appearance: none;
        border-radius: 20px;
    }

    .user-avatar { width: 36px; height: 36px; font-size: 13px; }

    /* ===== Filters: внутри выпадающего меню строки поиска ===== */
    #historyBtn { display: none !important; }
    .filter-group { gap: 6px; }
    .filter-group > label { font-size: 11px; color: #777; margin-bottom: 2px; }
    .filter-chips { gap: 6px; }
    .filter-chip {
        padding: 7px 12px;
        font-size: 13px;
        min-height: 32px;
        border-radius: var(--r-pill);
        background: #f0f2f5;
        color: #444;
        border: 1px solid transparent;
    }
    .filter-chip.active {
        background: var(--brand);
        color: #fff;
        box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.35);
    }

    /* ===== Map: без лишних отступов ===== */
    #map { top: calc(56px + var(--safe-top)); }
    .leaflet-control-zoom a { width: 34px; height: 34px; line-height: 30px; font-size: 18px; }

    /* ===== Sidebar: полный high drawer с затемнением ===== */
    .sidebar {
        top: 0;
        bottom: 0;
        left: 0;
        width: 90vw;
        max-width: 400px;
        z-index: 1500;
        box-shadow: 4px 0 24px rgba(0,0,0,0.3);
        border-radius: 0 18px 18px 0;
    }
    .sidebar-close { font-size: 26px; }

    /* Затемнение позади сайдбара (элемент создаётся в main.js) */
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1499;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }
    .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

    /* ===== Модалки: full-screen bottom-sheet ===== */
    .modal { align-items: flex-end; padding: 0; }
    .modal-content {
        width: 100%;
        max-width: none;
        max-height: 100dvh;
        height: auto;
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(16px + var(--safe-bottom));
        animation: sheetUp 0.25s ease;
    }
    .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
    .modal-header { padding: 16px 16px 12px; position: sticky; top: 0; background: #fff; z-index: 2; }

    .workspace-modal { align-items: flex-end; }
    .workspace-modal-content {
        width: 100%;
        max-width: none;
        height: 100dvh;
        border-radius: 20px 20px 0 0;
        animation: sheetUp 0.25s ease;
    }
    .workspace-modal-header { padding: 16px; position: sticky; top: 0; background:#fff; z-index:2; }

    /* ===== Кнопки / тач-цели ===== */
    .btn-primary, .btn-secondary, .btn-confirm-task, .btn-cancel-task,
    .btn-edit-task, .btn-cancel-task {
        min-height: 46px;
        font-size: 15px;
    }
    .tab { padding: 10px 14px; font-weight: 500; }
    .object-item { padding: 14px 16px; }
    .task-item { padding: 12px 14px; }

    /* Формы крупнее */
    .form-group input, .form-group select, .form-group textarea {
        font-size: 16px;  /* предотвращает автоувеличение на iOS */
        padding: 12px;
    }

    /* Отчёт: зона загрузки больше */
    .upload-zone { min-height: 90px; }

    /* ===== Toast поверх, с safe-area ===== */
    .toast {
        bottom: calc(16px + var(--safe-bottom));
        left: 16px;
        right: 16px;
        transform: none;
        text-align: center;
        max-width: none;
        font-size: 14px;
    }

    /* Список камер-чекбоксов удобнее */
    .camera-checkbox-list label { padding: 8px; font-size: 15px; }
    .camera-checkbox-list input[type="checkbox"] { width: 20px; height: 20px; }
}

/* ===== 30. ANIMATIONS (появление bottom-sheet) ===== */
@keyframes sheetUp {
    from { transform: translateY(20px); opacity: 0.6; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ===== 31. POLISH (общая полировка) ===== */
.search-item:active { background: #e8f0fe; }
.filter-chip { cursor: pointer; user-select: none; }
.filter-chip:hover { background: #e4e9f0; }
.filter-chip.active:hover { background: var(--brand-dark); }

@media (max-width: 480px) {
    .topbar-actions { gap: 6px; }
    #settingsBtn { display: none; }
}

/* ============================================================
   32. VIEWER RESTRICTIONS (вкладка, история, фильтр «Работы»)
   ============================================================ */
body[data-role="viewer"] [data-tab="tasks"],
body[data-role="viewer"] #tab-tasks,
body[data-role="viewer"] #historyBtn,
body[data-role="viewer"] .filter-chip[data-tag="Работы"] {
    display: none !important;
}

/* Длинные адреса/комментарии в карточках объектов переносятся, а не дают горизонтальный скролл */
.object-card .object-address, .object-item .object-address,
.object-card .object-name, .object-item .object-name,
.object-comment, .object-contact span {
    overflow-wrap: anywhere;
}

/* ============================================================
   33. HINTS (подсказки «?», js/hint.js)
   ============================================================ */
.hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-left: 4px;
    border: 1px solid #cdd5e0;
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: -2px;
    -webkit-user-select: none;
    user-select: none;
}
.hint:hover, .hint.open { border-color: var(--brand); color: var(--brand); }
.hint-bubble {
    position: fixed;
    z-index: 9999;
    display: none;
    background: var(--text);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    max-width: 310px;
    box-shadow: 0 6px 18px rgba(20, 30, 60, .25);
}
.hint-bubble.show { display: block; }

/* ============================================================
   34. CAMERA PHOTOS (скрины по IP)
   ============================================================ */

.camera-photo-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--r-lg);
    background: #eef4ff;
    color: var(--brand);
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.camera-photo-btn:active { background: var(--brand); color: #fff; transform: scale(0.94); }

.camera-photo-area { margin-top: 10px; }
.camera-photo-thumb {
    width: 100%;
    border-radius: 12px;
    cursor: zoom-in;
    border: 1px solid #eee;
    display: block;
    background: #f7f9fb;
}

.photo-viewer-modal .photo-viewer-content { max-height: 85vh; }
.photo-viewer-body {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: #0d1117;
    min-height: 60vh;
}
.photo-viewer-body img { max-width: 100%; max-height: 75vh; border-radius: var(--r-sm); display: none; }
.photo-viewer-body img.loaded { display: block; }
.photo-viewer-empty {
    color: #c9d1d9;
    text-align: center;
    padding: 40px 20px;
}
.photo-viewer-empty i { font-size: 42px; opacity: 0.6; display: block; margin-bottom: 14px; }
.photo-viewer-empty p { margin: 0 0 8px; }
.photo-viewer-empty.small { color: #999; padding: 14px; }
.photo-viewer-empty.small i { font-size: 22px; margin-bottom: 6px; }


/* ===== 35. MAP MARKER PULSE (пульсация маркеров) ===== */
.camera-pulse-wrap { pointer-events: none; }
.camera-pulse {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: rgba(var(--brand-rgb), 0.4);
    border: 2px solid var(--brand);
    /* два импульса — достаточно, дальше затухает */
    animation: cameraPulse 1.6s ease-out 2 forwards;
    display: flex; align-items: center; justify-content: center;
}
@keyframes cameraPulse {
    0%   { transform: scale(0.5); opacity: 0.95; }
    70%  { transform: scale(1.7); opacity: 0.25; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* ===== 36. HISTORY (сортировка и вид таблицы) ===== */
#tab-history thead th { user-select: none; white-space: nowrap; }
#tab-history thead th:hover { background: #f0f4f8; }
#tab-history thead th.sorted-asc::after { content: " ▲"; color: var(--brand); font-size: 11px; }
#tab-history thead th.sorted-desc::after { content: " ▼"; color: var(--brand); font-size: 11px; }
.history-table { width: 100%; border-collapse: collapse; }
.history-table th, .history-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; }
.workspace-modal-body .history-table { padding: 8px 16px; }

/* ===== Панель поиска и статус фильтра в истории ===== */
.history-toolbar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 4px;
}
.history-search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    font-size: 14px;
    box-sizing: border-box;
}
.history-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb),.15); }
.history-filter-status {
    font-size: 12px;
    color: var(--muted);
    min-height: 16px;
    white-space: normal;
    word-break: break-word;
}
.history-table-wrap { max-height: 60vh; overflow-y: auto; }

/* Строка поиска + календарь + отчёт */
.history-search-row { display: flex; align-items: center; gap: 8px; }
.history-search-row .history-search { flex: 1 1 auto; min-width: 0; }
.history-icon-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    background: #fff;
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--text-2);
    font-size: 15px;
}
.history-icon-btn:hover { border-color: var(--brand); color: var(--brand); background: #f3f8fe; }
.history-icon-btn.active { border-color: var(--brand); color: #fff; background: var(--brand); }
.history-report-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    height: 40px;
    border: none;
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}
.history-report-btn:hover { background: var(--brand-dark); }
.history-report-btn:disabled { background: #c3ccd9; cursor: not-allowed; }
.history-period-label {
    font-size: 12.5px;
    color: var(--brand);
    font-weight: 600;
}

/* Поповер выбора месяца */
.history-period-pop {
    position: absolute;
    top: calc(100% - 4px);
    right: 16px;
    z-index: 60;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 30px rgba(20,30,60,.18);
    padding: 14px;
    width: 290px;
}
.history-period-pop[hidden] { display: none; }
.hpp-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; }
.hpp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--text-2); }
.hpp-row label { width: 52px; }
.hpp-row input { flex: 1; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-md); font-size: 14px; }
.hpp-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hpp-presets button {
    border: 1px solid #e3e8f0;
    background: #f7f9fd;
    border-radius: var(--r-pill);
    padding: 5px 11px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--text-2);
}
.hpp-presets button:hover { border-color: var(--brand); color: var(--brand); }
.hpp-actions { display: flex; justify-content: flex-end; gap: 8px; }
.hpp-actions .btn-secondary,
.hpp-actions .btn-primary { padding: 7px 14px; font-size: 13px; }

@media (max-width: 560px) {
    .history-search-row { flex-wrap: wrap; }
    .history-report-btn { width: 100%; justify-content: center; }
    .history-period-pop { right: 0; width: 100%; }
}

/* ===== 37. PING PANELS (дашборд «Камеры» и карточки объекта) ===== */
.object-ping-line { padding: 4px 0; }

/* Полноширинные плашки онлайн/оффлайн (цвета как у camera-status-badge) */
.ping-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border-radius: var(--r-md);
    margin-top: 6px;
    line-height: 1.3;
}
.ping-stat.online { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.ping-stat.offline { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.ping-stat-note { opacity: .8; font-size: 12px; }

/* Кнопки дашборда */
.ping-refresh-btn {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
}
.down-objects-btn {
    background: #fff3cd;   /* мягкий жёлтый */
    border: 1px solid #ffe08a;
    color: #1f2430;
}

/* Отступ от плашки оффлайн до строки «Шлюзов» */
.ping-gateways { margin-top: 10px; }

/* Второстепенный текст (обновлено, возраст фото и т.п.) */
.muted { font-size: 12px; color: var(--muted); }
.ping-updated { display: flex; align-items: center; gap: 6px; margin: 10px 0; }
.ping-updated i { font-size: 12px; }
.object-ping-panel { margin-top: 6px; }
.object-ping-panel-inner {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--r-md);
    padding: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 4px;
}

/* ===== 38. CAMCTL WARNING (ноут не в доступе) ===== */
.camctl-warn {
    background: #fdecea;
    color: #c62828;
    border: 1px solid #f5c6c0;
    border-radius: var(--r-md);
    padding: 10px;
    margin-bottom: 10px;
    font-size: 13px;
}


/* ===== 40. MAP MOVE MODE (перемещение камер админом) ===== */
.move-toggle-control { margin-top: 6px; }
.move-toggle-btn {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    color: #1f2937;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
}
.move-toggle-btn:hover { background: #f3f5f8; }
.move-toggle-btn.active {
    background: #1a9e4b;
    color: #fff;
    box-shadow: inset 0 0 0 1px #14803c;
}
.move-toggle-btn.active:hover { background: #178a43; }
/* в режиме перемещения — курсор-прицел по всей карте */
#map.map-move-mode { cursor: crosshair; }
@media (max-width: 820px) {
    .move-toggle-control { display: none; }
}

/* ===== 39. MAP TOOLTIP (подсказка на карте: адрес объекта) ===== */
.leaflet-tooltip { white-space: normal; max-width: 280px; line-height: 1.35; }
/* адрес — обычным чёрным текстом (без жёлтого и без жирного) */
.leaflet-tooltip .tt-address { color: #000; font-weight: 400; }