@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&display=swap");

/* ─── Reference match: BIP soft glass (201.51.0.48) ─── */
:root,
html[data-theme="ref"] {
  --bg: #eef5f8;
  --bg-soft: #e4eef3;
  --bg-warm: #f7f3ef;
  --bg-base: #e8f2f6;
  --bg-image: url("/static/bg-variant-safety.jpg?v=20260731bg1");
  --bg-overlay: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(238, 245, 248, 0.32) 50%,
    rgba(255, 255, 255, 0.36) 100%
  );
  --surface: #ffffff;
  --surface-secondary: #f0f6f9;
  --panel: rgba(255, 255, 255, 0.42);
  --panel-solid: rgba(255, 255, 255, 0.58);
  --panel-border: rgba(45, 90, 110, 0.14);
  --panel-shadow: 0 8px 32px rgba(45, 90, 110, 0.08);
  --card: rgba(255, 255, 255, 0.57);
  --card-border: rgba(45, 90, 110, 0.14);
  --card-shadow: 0 2px 8px rgba(45, 90, 110, 0.06);
  --topbar-bg: rgba(255, 255, 255, 0.40);
  --topbar-border: rgba(45, 90, 110, 0.12);
  --text: #1a2530;
  --muted: #455563;
  --text-tertiary: #6b7c8a;
  --accent: #3d9cad;
  --accent-strong: #2d6f7c;
  --accent-hover: #328893;
  --accent-soft: rgba(61, 156, 173, 0.14);
  --tone-sky: #7eb8e8;
  --tone-mint: #8ecfbf;
  --tone-peach: #f0b89a;
  --success: #5cb88a;
  --danger: #e07d6f;
  --input-bg: #ffffff;
  --input-border: rgba(45, 90, 110, 0.16);
  --chip-bg: rgba(255, 255, 255, 0.50);
  --chip-border: rgba(45, 90, 110, 0.16);
  --chip-text: #1a2530;
  --chip-active-bg: #3d9cad;
  --chip-active-border: #3d9cad;
  --chip-radius: 999px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-card: 20px;
  --radius-modal: 24px;
  --metric-bg: rgba(240, 246, 249, 0.58);
  --modal-header: #2d6f7c;
  --login-bg: transparent;
  --login-card: rgba(255, 255, 255, 0.55);
  --user-chip-bg: rgba(61, 156, 173, 0.14);
  --collapse-bg: rgba(255, 255, 255, 0.40);
  --collapse-border: rgba(45, 90, 110, 0.14);
  --font-ui: "Comfortaa", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Comfortaa", system-ui, sans-serif;
  --font-mono: "Segoe UI", ui-monospace, Consolas, monospace;
  --font-input: "Segoe UI", system-ui, -apple-system, sans-serif;
  --panel-accent-shops: #3d9cad;
  --panel-accent-filters: #e07d6f;
  --panel-accent-presence: #5cb88a;
  --glass: rgba(255, 255, 255, 0.42);
  --glass-panel: rgba(255, 255, 255, 0.42);
  --border: rgba(45, 90, 110, 0.1);
  --border-strong: rgba(45, 90, 110, 0.16);
  --shadow-sm: 0 2px 8px rgba(45, 90, 110, 0.06);
  --shadow: 0 8px 32px rgba(45, 90, 110, 0.08);
}

html {
  color-scheme: light;
  min-height: 100%;
}

body {
  font-family: var(--font-ui);
  font-weight: 500;
  background: transparent;
  background-color: var(--bg-base);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Full-bleed illustration + soft wash (static fallback) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--bg-base);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg-overlay);
}

/* Dual-layer crossfade rotator (injected by bg-rotate.js) */
.akb-bg-stack {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--bg-base);
}
.akb-bg-layer {
  position: absolute;
  inset: 0;
  background-color: var(--bg-base);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--akb-bg-fade, 1.25s) ease-in-out;
  will-change: opacity;
}
.akb-bg-layer.is-active {
  opacity: 1;
}
.akb-bg-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg-overlay);
}
body.akb-bg-rotating:not(.has-critical-safety)::before {
  background-image: none;
  background-color: transparent;
}
body.akb-bg-rotating::after {
  background: none;
}
body.akb-bg-rotating .login-gate::before {
  background-image: none;
  background-color: transparent;
}
body.akb-bg-rotating .login-gate::after {
  background: none;
}

.topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: var(--shadow-sm);
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.brand span {
  color: var(--accent) !important;
}

.panel,
.analytics-card,
.akb-monitor-setup,
.akb-monitor-events,
.akb-monitor-archives,
.akb-monitor-bridge-box,
.empty-filter {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-modal) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.panel h2,
.analytics-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-strong) !important;
  letter-spacing: -0.01em;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.panel-shops {
  border-left: 5px solid var(--panel-accent-shops) !important;
}
.panel-managers,
.panel-presence {
  border-left: 5px solid var(--panel-accent-presence) !important;
}
/* 2026-09-28: у панели фильтров убрана цветная полоса слева по просьбе заказчика.
   Как вернуть: взять правило из бэкапа /opt/akb-monitor/static/themes.css.bak_before_noborder2
   (описание — MEMORY/ui-copy.md) и поднять ?v= у themes.css в index.html. */

.akb-monitor-card,
.chart-card,
.akb-monitor-bridge-card,
.worst-cab .stat {
  background: var(--card) !important;
  border-color: var(--card-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--card-shadow) !important;
  color: var(--text);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.akb-monitor-card-title,
.chart-card-title,
.chart-card-stats b,
.prob-shop-row .name,
.worst-cab .title {
  color: var(--text) !important;
  font-family: var(--font-display);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.akb-monitor-metric {
  background: var(--metric-bg) !important;
  border-radius: var(--radius-sm) !important;
}
.akb-monitor-metric .value {
  font-family: var(--font-mono);
  font-weight: 700;
}
.akb-monitor-metric .label,
.akb-monitor-card-ip,
.akb-monitor-statusline,
.hint-click,
.analytics-empty,
.prob-shop-row .meta,
.filter-count,
.manager-hint,
.shop-select label,
.shop-add label,
.form-group label,
.search-box label {
  color: var(--muted) !important;
}

.akb-locker-slot {
  background: var(--metric-bg) !important;
  border-radius: var(--radius-sm) !important;
}
.akb-locker-slot-num {
  font-family: var(--font-mono);
}

.shop-select select,
.shop-add input,
.form-group input,
.search-box input,
.login-card input,
.contact-edit-row input,
#incidentsSearch,
#incidentsKindFilter,
.cell-token-field {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-input);
  box-shadow: var(--shadow-sm);
}
.shop-select select:focus,
.shop-add input:focus,
.form-group input:focus,
.search-box input:focus,
.login-card input:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cell-token-field {
  font-family: var(--font-mono) !important;
}

/* Tabs / chips — pill style like reference main-tab-btn */
.filter-chip {
  background: var(--accent) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--chip-radius) !important;
  font-family: var(--font-ui);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(45, 90, 110, 0.12);
  transition: filter 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.filter-chip:hover:not(.active) {
  filter: brightness(1.06);
  color: #fff !important;
}
.filter-chip.active {
  background: #fff !important;
  border: none !important;
  color: var(--accent-strong) !important;
  box-shadow: 0 2px 10px rgba(45, 90, 110, 0.15);
}
.filter-chip.door.active {
  background: #fff !important;
  color: var(--door-open) !important;
  box-shadow: 0 2px 10px rgba(194, 65, 12, 0.2);
}
.filter-chip.temp-hot.active,
.filter-chip.hot.active {
  background: #fff !important;
  color: var(--temp-alert) !important;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.18);
}
.filter-chip.warn.active {
  background: #fff !important;
  color: #7c3aed !important;
}
.filter-chip.sound-on.active {
  background: #fff !important;
  color: var(--accent-strong) !important;
}
.filter-chip.sound-off {
  background: var(--text-tertiary) !important;
  color: #fff !important;
}

.modal-card {
  background: var(--panel-solid) !important;
  border-radius: var(--radius-modal) !important;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(45, 90, 110, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-card header {
  background: var(--modal-header) !important;
  font-family: var(--font-display);
}
.modal-body,
.modal-section h4,
.contact-row .who {
  color: var(--text);
}
.contact-row {
  border-bottom-color: var(--border) !important;
}
.contact-row .role,
.contact-empty,
.modal-status .box .l {
  color: var(--muted) !important;
}
.modal-status .box {
  background: var(--metric-bg) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
}
.modal-status .box .v {
  font-family: var(--font-mono);
  color: var(--text);
}
.modal-door-log,
.card-log {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
.collapse-head {
  background: var(--collapse-bg) !important;
  border-color: var(--collapse-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-display);
  font-weight: 700;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.collapse-head:hover {
  filter: brightness(0.98);
}

.login-gate {
  background: transparent !important;
}
.login-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: transparent;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.login-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-overlay);
}
.login-card {
  background: var(--login-card) !important;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-modal) !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.login-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-strong);
}
.login-card p,
.login-card label {
  color: var(--muted) !important;
}
.login-card .btn-login {
  background: var(--accent) !important;
  border-radius: 999px !important;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(45, 90, 110, 0.12);
}
.login-card .btn-login:hover {
  filter: brightness(0.94);
}
.login-card .login-link {
  color: var(--accent-strong) !important;
}

.user-chip {
  background: var(--user-chip-bg) !important;
  color: var(--accent-strong) !important;
  border-radius: 999px !important;
  border: 1px solid var(--border);
}

.btn-sm,
.btn-success,
.ui-btn,
.rename-akb-cabinet-btn,
.delete-akb-cabinet-btn,
.ack-btn,
.clear-crit-btn {
  border-radius: 999px !important;
  font-family: var(--font-ui);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(45, 90, 110, 0.1);
}
.btn-sm {
  background: var(--success) !important;
}
.btn-sm.ghost {
  background: var(--text-tertiary) !important;
}
.btn-sm.danger {
  background: var(--danger) !important;
}
.btn-success {
  background: var(--success) !important;
}
.ui-btn {
  background: var(--accent-strong) !important;
}
.ui-btn-primary {
  background: var(--accent) !important;
}
.ui-btn-primary:hover {
  filter: brightness(0.94);
}
.ack-btn {
  background: var(--accent) !important;
}

.manager-shop-item,
.presence-col {
  background: var(--metric-bg) !important;
  border-color: var(--border) !important;
  color: var(--text);
  border-radius: var(--radius) !important;
}
.presence-item .nm {
  color: var(--text) !important;
}
.presence-item .meta,
.presence-empty {
  color: var(--muted) !important;
}
.panel-admin .users-table th,
.panel-admin .users-table td,
.incidents-table th,
.incidents-table td {
  border-bottom-color: var(--border) !important;
  color: var(--text);
}
code {
  background: var(--metric-bg) !important;
  color: var(--text);
  font-family: var(--font-mono);
}

.akb-monitor-shop-tag {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
  border-radius: 999px !important;
}

.hbar-track,
.door-zone-row .bar-wrap {
  background: var(--metric-bg) !important;
}
.hbar-lab,
.door-zone-row .lab {
  color: var(--text) !important;
}
.prob-shop-row {
  border-bottom-color: var(--border) !important;
}
.prob-shop-row:hover {
  background: var(--accent-soft) !important;
  border-radius: var(--radius-sm);
}

.toast {
  background: var(--accent-strong);
  border-radius: var(--radius) !important;
  font-family: var(--font-ui);
}

.chart-card-title::before {
  background: var(--accent) !important;
}

/* Bridge / archive accents stay readable on glass */
.akb-monitor-bridge-box {
  background: rgba(61, 156, 173, 0.12) !important;
  border-color: rgba(61, 156, 173, 0.35) !important;
  color: var(--accent-strong) !important;
}
.akb-monitor-bridge-card {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(61, 156, 173, 0.25) !important;
}
.bridge-dl-btn,
.akb-monitor-archive-btn {
  border-radius: 999px !important;
  font-family: var(--font-ui);
  font-weight: 700;
}
.bridge-dl-btn {
  background: var(--accent) !important;
}
.akb-monitor-archive-btn {
  background: var(--success) !important;
}

@media (max-width: 900px) {
  body::before {
    background-attachment: scroll;
  }
}