/* theme.css — общая тема админ-панелей BIMFunction (светлая/тёмная). Тема задаётся атрибутом ; переключатель в шапке портала, выбор хранится в localStorage 'bimf_theme', по умолчанию — тема системы. */ :root, html[data-theme="light"] { --bg: #f0f2f5; --sidebar: #ffffff; --surface: #ffffff; --thead: #f7f8fa; --hover: #fafbfc; --border: #e3e5e8; --text: #1f2328; --text-2: #5c6066; --muted: #979ba1; --accent: #007ACC; --accent-hover: #0068ad; --on-accent: #ffffff; --danger: #e53935; --input-bg: #ffffff; --overlay: rgba(0,0,0,.35); --shadow: 0 1px 4px rgba(0,0,0,.08); --shadow-lg: 0 4px 24px rgba(0,0,0,.2); --ok-bg: #e8f5e9; --ok-fg: #2e7d32; --bad-bg: #fce4ec; --bad-fg: #c62828; --warn-bg: #fff3e0; --warn-fg: #e65100; --info-bg: #e3f2fd; --info-fg: #1565c0; --teal-bg: #e0f7fa; --teal-fg: #00695c; --viol-bg: #ede7f6; --viol-fg: #4527a0; --prio-high: #c62828; --prio-medium: #ef6c00; --prio-low: #2e7d32; --st-new: #1565c0; --st-in_progress: #ef6c00; --st-done: #8a8a85; } html[data-theme="dark"] { --bg: #17181b; --sidebar: #1f2023; --surface: #232427; --thead: #2a2b2f; --hover: #2a2b30; --border: #37383d; --text: #e6e6e4; --text-2: #b0b0aa; --muted: #83837e; --accent: #3b9ae0; --accent-hover: #5aabe8; --on-accent: #ffffff; --danger: #ef6a67; --input-bg: #1c1d20; --overlay: rgba(0,0,0,.55); --shadow: 0 1px 4px rgba(0,0,0,.4); --shadow-lg: 0 4px 24px rgba(0,0,0,.6); --ok-bg: #12351a; --ok-fg: #81c784; --bad-bg: #3d1418; --bad-fg: #ef9a9a; --warn-bg: #3a2410; --warn-fg: #ffb74d; --info-bg: #102a43; --info-fg: #90caf9; --teal-bg: #0d3236; --teal-fg: #80cbc4; --viol-bg: #241b3a; --viol-fg: #b39ddb; --prio-high: #ef9a9a; --prio-medium: #ffb74d; --prio-low: #81c784; --st-new: #90caf9; --st-in_progress: #ffb74d; --st-done: #83837e; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: Segoe UI, sans-serif; font-size: 14px; background: var(--bg); color: var(--text); transition: background .15s, color .15s; } /* ── Каркас портала ── */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 220px; flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 10px; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 8px; padding: 4px 10px 16px; } .brand b { font-size: 15px; font-weight: 600; color: var(--text); } .brand .logo { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-divider { border-top: 1px solid var(--border); margin: 10px 10px 8px; } .nav-group-label { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; padding: 0 10px 4px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; text-decoration: none; font-size: 13px; color: var(--text-2); } .nav a svg { width: 16px; height: 16px; flex-shrink: 0; } .nav a:hover { background: var(--hover); color: var(--text); } .nav a.active { background: var(--accent); color: var(--on-accent); } .sidebar .spacer { flex: 1; } .sidebar .foot { padding: 8px 10px; font-size: 11px; color: var(--muted); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; } .topbar h1 { font-size: 15px; font-weight: 600; } .topbar .grow { flex: 1; } .content { padding: 24px; max-width: 1400px; width: 100%; } /* ── Кнопки ── */ .btn { padding: 7px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; transition: opacity .15s, background .15s; background: transparent; color: var(--text); } .btn:hover { opacity: .85; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-danger { background: var(--danger); color: #fff; } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-2); } .btn-ghost:hover { background: var(--hover); opacity: 1; } .btn-sm { padding: 4px 10px; font-size: 12px; } .icon-btn { background: none; border: none; cursor: pointer; padding: 4px; color: var(--muted); line-height: 0; border-radius: 5px; } .icon-btn:hover { color: var(--accent); background: var(--hover); } /* ── Карточки-метрики ── */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; } .metric { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .15s; } .metric:hover { border-color: var(--accent); } .metric .label { font-size: 12px; color: var(--text-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .metric .label svg { width: 14px; height: 14px; } .metric .value { font-size: 24px; font-weight: 600; } .metric .sub { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ── Виджеты аналитики на «Сводке» (2026-07-15) ── */ .dashWidgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 14px 0; } .dashWidget { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .dashWidget .wtitle { font-size: 12px; color: var(--text-2); margin-bottom: 10px; font-weight: 600; } .dashWidget .wempty { font-size: 12px; color: var(--muted); padding: 12px 0; } /* Легенда: цветная точка + подпись текстовым цветом (цвет — только у точки) */ .wlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin-top: 10px; } .wlegend .li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .wlegend .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } /* Полоса-стек по статусам: сегменты с зазором 2px, скругление у крайних */ .wstack { display: flex; gap: 2px; height: 18px; border-radius: 5px; overflow: hidden; } .wstack .seg { min-width: 3px; } /* Горизонтальные полоски топа модулей */ .wbars .brow { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; margin: 5px 0; } .wbars .bname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wbars .btrack { background: var(--bg); border-radius: 4px; height: 12px; } .wbars .bfill { background: var(--accent); border-radius: 4px; height: 12px; min-width: 2px; } .wbars .bval { text-align: right; color: var(--text-2); } /* Мини-график «события по дням»: столбики */ .wdays { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-top: 12px; } .wdays .day { flex: 1; background: var(--accent); opacity: .75; border-radius: 2px 2px 0 0; min-height: 2px; } .wdays .day:hover { opacity: 1; } /* ── Таблицы ── */ .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } .toolbar h2 { font-size: 15px; font-weight: 600; } .filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tableWrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { background: var(--thead); padding: 10px 14px; text-align: left; font-size: 12px; color: var(--text-2); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; } tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--hover); } .mono { font-family: Consolas, monospace; font-size: 12px; color: var(--text-2); } .muted { color: var(--muted); } .empty { padding: 40px; text-align: center; color: var(--muted); } .text-cell { max-width: 360px; white-space: pre-wrap; word-break: break-word; } .ctx { font-size: 11px; color: var(--muted); margin-top: 4px; } /* ── Поля ввода ── */ input, select, textarea { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; background: var(--input-bg); color: var(--text); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; } input[type=date] { width: 132px; } input[type=checkbox] { accent-color: var(--accent); cursor: pointer; } textarea { resize: vertical; min-height: 80px; width: 100%; } select.cell { padding: 4px 8px; font-size: 12px; cursor: pointer; } select.prio-high { color: var(--prio-high); font-weight: 600; } select.prio-medium { color: var(--prio-medium); } select.prio-low { color: var(--prio-low); } select.st-new { color: var(--st-new); font-weight: 600; } select.st-in_progress { color: var(--st-in_progress); } select.st-done { color: var(--st-done); } /* Пункты выпадающих списков приоритета/статуса — каждый своим цветом. Без этого пункты наследуют цвет самого select (по текущему значению), и весь раскрытый список выглядит одноцветным. */ option.prio-high { color: var(--prio-high); font-weight: 600; } option.prio-medium { color: var(--prio-medium); font-weight: 400; } option.prio-low { color: var(--prio-low); font-weight: 400; } option.st-new { color: var(--st-new); font-weight: 600; } option.st-in_progress { color: var(--st-in_progress); font-weight: 400; } option.st-done { color: var(--st-done); font-weight: 400; } /* Развёрнутая заявка (аккордеон): лёгкий фон + акцентная полоса слева — сразу видно, в какой заявке находишься (защита от ответа не в ту заявку). */ tr.row-open > td { background: rgba(0, 122, 204, .06); } tr.row-open > td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* Колонка «Выполнена» — только на вкладке «Выполнено» (класс вешает renderTicketTabs). */ #ticketsTable .doneCol { display: none; } #ticketsTable.show-done .doneCol { display: table-cell; } /* ── Бейджи ── */ .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; } .badge-ok { background: var(--ok-bg); color: var(--ok-fg); } .badge-bad { background: var(--bad-bg); color: var(--bad-fg); } .badge-warn { background: var(--warn-bg); color: var(--warn-fg); } .badge-info { background: var(--info-bg); color: var(--info-fg); } .badge-teal { background: var(--teal-bg); color: var(--teal-fg); } .badge-viol { background: var(--viol-bg); color: var(--viol-fg); } .tab-checks { display: flex; gap: 10px; flex-wrap: wrap; } .tab-check { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; } .tab-check input[type=checkbox] { width: 14px; height: 14px; } .tab-check span { font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 8px; } .tab-check.eom span { background: var(--info-bg); color: var(--info-fg); } .tab-check.ss span { background: var(--ok-bg); color: var(--ok-fg); } .tab-check.ud span { background: var(--teal-bg); color: var(--teal-fg); } /* Роль «Диспетчер заявок» (helpdesk): вход в панель, раздел «Заявки» */ .tab-check.helpdesk span { background: var(--warn-bg); color: var(--warn-fg); } /* ── Модальные окна ── */ .overlay { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 100; justify-content: center; align-items: center; } .overlay.show { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 28px; width: 440px; max-width: calc(100vw - 32px); box-shadow: var(--shadow-lg); } .modal h3 { font-size: 15px; margin-bottom: 20px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; } .field input, .field select { width: 100%; } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; } .modalBtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } .err { color: var(--danger); font-size: 12px; min-height: 16px; } .pwd-wrap { position: relative; } .pwd-wrap input { padding-right: 36px; } .eye-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 2px; color: var(--muted); line-height: 0; } .eye-btn:hover { color: var(--text-2); } .row-pwd-eye { position: static; transform: none; } .expire-cell { display: flex; align-items: center; gap: 8px; } .check-forever { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12px; color: var(--ok-fg); white-space: nowrap; } .check-forever input { width: 13px; height: 13px; accent-color: var(--ok-fg); } /* ── Экран входа ── */ #keyScreen { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .keyCard { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 32px; width: 360px; box-shadow: var(--shadow); } .keyCard h2 { font-size: 15px; margin-bottom: 6px; } .keyCard p { font-size: 12px; color: var(--muted); margin-bottom: 16px; } .keyCard input { width: 100%; margin-bottom: 12px; } /* ── Лайтбокс просмотра картинок ── */ .lightbox { display: none; position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.75); flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; } .lightbox.show { display: flex; } .lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 6px; background: #fff; box-shadow: var(--shadow-lg); } .lb-bar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px 6px 14px; max-width: 92vw; } .lb-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; } /* ── Тост ── */ #toast { position: fixed; bottom: 24px; right: 24px; background: #323232; color: #fff; padding: 10px 18px; border-radius: 6px; font-size: 13px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 200; } html[data-theme="dark"] #toast { background: #e6e6e4; color: #1f2328; } #toast.show { opacity: 1; } /* ── Адаптив ── */ @media (max-width: 760px) { .sidebar { width: 60px; padding: 16px 6px; } .sidebar .brand b, .nav a span, .sidebar .foot, .nav-group-label { display: none; } .nav a { justify-content: center; } .nav-divider { margin: 8px 6px; } .content { padding: 16px; } }