/* ═══════════════════════════════════════════════════════════════════════════
   TABLER DASHBOARD STYLE FOR FITBASE OPERATOR PANEL (Tabler v1.4.0 Parity)
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  color-scheme: dark;

  /* Style 7: единый холодный teal/cyan акцент. */
  --accent-rgb: 45,212,191;
  --color-primary: #2dd4bf;       /* Teal Accent */
  --color-primary-hover: #14b8a6;
  --color-primary-soft: rgba(45, 212, 191, 0.13);

  --color-bg: #080b11;            /* Deep Dark BG */
  --color-surface: #0e131c;       /* Card Surface */
  --color-surface-2: #131a25;
  --color-surface-offset: rgba(255, 255, 255, 0.015);
  
  --color-border: rgba(255, 255, 255, 0.08);   /* Elegant transparent border */
  --color-border-hover: rgba(255, 255, 255, 0.16);
  
  /* Text */
  --color-text: #94a3b8;          /* Soft Gray-Blue */
  --color-text-strong: #f8fafc;   /* Crisp White */
  --color-text-muted: #64748b;
  
  /* Semantics */
  --color-success: #10b981;       /* Emerald Green */
  --color-warning: #f59e0b;       /* Amber Yellow */
  --color-danger: #ef4444;        /* Rose Red */
  --color-info: #38bdf8;          /* Sky Blue */
  
  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
  
  /* Typography & Transitions */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SF Mono", ui-monospace, monospace;
  --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy Variable Mappings for Compatibility */
  --btn-grey-bg: var(--color-surface-2);
  --btn-grey-hover: var(--color-border);
  --btn-green-bg: var(--color-success);
  --btn-green-hover: var(--color-success);
  --text: var(--color-text);
  --text-strong: var(--color-text-strong);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --border-hover: var(--color-border-hover);
  --transition: var(--transition-fast);
}

/* Aether Light Theme Variables */
body.theme-light {
  color-scheme: light;
  --accent-rgb: 37,99,235;
  --color-primary: #0f948f;       /* Daylight Blue */
  --color-primary-hover: #0f948f;
  --color-primary-soft: rgba(15, 148, 143, 0.08);
  
  --color-bg: #f8f9fa;            /* Light BG */
  --color-surface: #ffffff;       /* Pure White Cards */
  --color-surface-2: #f1f3f5;
  --color-surface-offset: rgba(0, 0, 0, 0.015);
  
  --color-border: rgba(0, 0, 0, 0.08);        /* Light transparent border */
  --color-border-hover: rgba(0, 0, 0, 0.16);
  
  --color-text: #475569;          
  --color-text-strong: #0f172a;
  --color-text-muted: #64748b;
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ─── Global Reset ─── */
body {
  font-family: var(--font-sans) !important;
  background-color: var(--color-bg) !important;
  background-image: none !important;
  color: var(--color-text) !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased;
}

/* ─── Layout Column ─── */
.page-wrap,
.app {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.main-content-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: visible !important;
  height: auto !important;
  width: 100% !important;
}

/* ─── Workspace Grid ─── */
.workspace {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  grid-template-areas: "sidebar content" !important;
  gap: 24px !important;
  align-items: start !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 24px 60px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1000px) {
  .workspace {
    grid-template-columns: 1fr !important;
    grid-template-areas: "sidebar" "content" !important;
    gap: 16px !important;
    padding: 16px 16px 40px !important;
  }
}

/* ─── Topbar: Navbar Header ─── */
.topbar {
  width: 100% !important;
  max-width: 100% !important;
  height: 64px !important;
  margin: 0 !important;
  background: var(--color-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  position: static !important;
  box-shadow: var(--shadow-sm) !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  gap: 14px !important;
}

.brand .logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-primary) !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  transition: background var(--transition-fast) !important;
}

.brand-title {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text-strong) !important;
  letter-spacing: -0.2px !important;
}

.brand-sub {
  display: block !important;
  font-size: 11.5px !important;
  color: var(--color-text-muted) !important;
  margin-top: 1px !important;
}

.nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
}

.nav-group-title, .nav-item {
  display: none !important;
}

/* Header Action Buttons */
.nav .btn {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 12px !important;
  color: var(--color-text) !important;
  height: 30px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: var(--transition-fast) !important;
  display: inline-flex !important;
  align-items: center;
  cursor: pointer;
}

.nav .btn:hover {
  background: var(--color-border) !important;
  border-color: var(--color-border-hover) !important;
  color: var(--color-text-strong) !important;
}

#logoutBtn {
  border-color: rgba(214, 57, 57, 0.2) !important;
  color: var(--color-danger) !important;
}

#logoutBtn:hover {
  background: rgba(214, 57, 57, 0.08) !important;
  border-color: var(--color-danger) !important;
}

#themeToggleBtn {
  width: 30px !important;
  padding: 0 !important;
  justify-content: center !important;
}

#authBadge.auth {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
}

/* ─── Left Sidebar Navigation (Tabler Sidebar Menu style) ─── */
#operatorsTabs {
  grid-area: sidebar !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 24px !important;
  z-index: 100 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1000px) {
  #operatorsTabs {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    margin-bottom: 20px !important;
  }
}

#operatorsTabs .nav-group {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

@media (max-width: 1000px) {
  #operatorsTabs .nav-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: auto !important;
  }
}

#operatorsTabs .nav-group-title {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--color-text-muted) !important;
  margin: 12px 0 6px 18px !important;
  opacity: 0.8;
}

@media (max-width: 1000px) {
  #operatorsTabs .nav-group-title {
    display: none !important;
  }
}

#operatorsTabs .seg-tab {
  flex: none !important;
  width: calc(100% - 24px) !important;
  margin: 2px 12px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 12px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  position: relative !important;
  transition: all var(--transition-fast) !important;
}

@media (max-width: 1000px) {
  #operatorsTabs .seg-tab {
    width: auto !important;
    margin: 4px !important;
    padding: 0 12px !important;
  }
}

#operatorsTabs .seg-tab:hover {
  color: var(--color-text-strong) !important;
  background-color: var(--color-surface-2) !important;
}

#operatorsTabs .seg-tab.active {
  color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  font-weight: 600 !important;
}

#operatorsTabs .seg-tab.active::before {
  content: "" !important;
  position: absolute !important;
  left: -12px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  background-color: var(--color-primary) !important;
  border-radius: 0 4px 4px 0 !important;
}

#operatorsTabs .seg-tab .tab-icon {
  margin-right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  opacity: 0.7;
}

#operatorsTabs .seg-tab.active .tab-icon {
  opacity: 1 !important;
}

#operatorsTabs .seg-tab .tab-icon svg {
  stroke-width: 2px !important;
}

/* ─── Grid Area Mapping ─── */
#section-overview,
#section-config,
#desktop-section-config,
#section-templates,
#section-pinned,
#section-history,
#section-online,
#section-accounts,
#section-teach,
#section-motivation {
  grid-area: content !important;
  min-width: 0 !important;
}

/* Outer Section View Wrappers (transparent background) */
section.shell,
section.panel {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  box-sizing: border-box !important;
}
section.shell::before,
section.panel::before {
  display: none !important;
}

/* Actual Visual Card Surfaces (Tabler Card styling) */
.card, 
.summary-card, 
.metric, 
.asset-form-card, 
.asset-list-card, 
.history-card, 
.stat, 
.monitor-status-card,
.attention-panel,
.quick-actions-panel,
.filters-bar {
  position: relative !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  box-sizing: border-box !important;
}

.card:hover, 
.asset-form-card:hover,
.asset-list-card:hover,
.stat:hover,
.attention-panel:hover,
.quick-actions-panel:hover,
.filters-bar:hover {
  transform: none !important;
  border-color: var(--color-border-hover) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Tabler Card Top Status Accent Border */
.card::before, 
.asset-form-card::before, 
.asset-list-card::before,
.summary-card::before,
.monitor-status-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important; /* Thicker for premium feel */
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  background: var(--color-primary) !important;
  z-index: 5 !important;
}

/* ─── Flat View Page Header (sitting directly on background) ─── */
.section-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin: 0 0 24px 0 !important;
  padding: 0 0 16px 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}

.section-head h2 {
  font-family: var(--font-display) !important;
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--color-text-strong) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.section-head p {
  margin: 6px 0 0 0 !important;
  font-size: 13.5px !important;
  color: var(--color-text-muted) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* ─── Tabler Card Header Structure (inside widgets and cards) ─── */
.asset-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: -24px -24px 20px -24px !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--color-border) !important;
  background-color: var(--color-surface-2) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.asset-title, h2 {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-text-strong) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  line-height: 1.2 !important;
}

.asset-subtitle {
  margin: 2px 0 0 0 !important;
  font-size: 12px !important;
  color: var(--color-text) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* ─── App Mode Switcher — визуальным слоем владеет Style 7 system. ─── */
/* старые Tabler-правила удалены: они форсировали height:32px и max-width:450 !important,
   что ломало новую шапку с иконками/подписями/бейджами. */

/* ─── KPI Metrics ─── */
.mini-stats-grid,
.overview-grid,
.summary-grid,
.kpi-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

@media (max-width: 950px) {
  .mini-stats-grid,
  .overview-grid,
  .summary-grid,
  .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .mini-stats-grid,
  .overview-grid,
  .summary-grid,
  .kpi-row {
    grid-template-columns: 1fr !important;
  }
}

.mini-stat,
.r-kpi-item,
.metric {
  position: relative !important;
  overflow: hidden !important;
  padding: 20px 20px 20px 24px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  box-shadow: var(--shadow-sm) !important;
}

.mini-stat::before,
.r-kpi-item::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.mini-stat:nth-child(1)::before, .r-kpi-item:nth-child(1)::before { background: var(--color-primary) !important; }
.mini-stat:nth-child(2)::before, .r-kpi-item:nth-child(2)::before { background: var(--color-success) !important; }
.mini-stat:nth-child(3)::before, .r-kpi-item:nth-child(3)::before { background: var(--color-info) !important; }
.mini-stat:nth-child(4)::before, .r-kpi-item:nth-child(4)::before { background: var(--color-warning) !important; }

.mini-stat-value,
.r-kpi-val {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--color-text-strong) !important;
  margin: 6px 0 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
}

.mini-stat-label,
.r-kpi-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--color-text-muted) !important;
}

#summaryOnline {
  color: var(--color-success) !important;
}

#summaryLocked {
  color: var(--color-warning) !important;
}

.mini-stat-note,
.r-kpi-sub {
  font-size: 11.5px !important;
  color: var(--color-text-muted) !important;
  line-height: 1.3 !important;
}

/* ─── Tabler Flat Tables ─── */
.asset-table-wrap, 
.table-wrap, 
.data-table-wrap {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

.data-table, .asset-table, .history-table, table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13.5px !important;
}

table th,
.asset-table th,
.data-table th,
.history-table th {
  background: var(--color-surface-2) !important;
  color: var(--color-text) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--color-border) !important;
  text-align: left !important;
}

table td,
.asset-table td,
.data-table td,
.history-table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-strong) !important;
  vertical-align: middle !important;
  transition: background-color var(--transition-fast) !important;
}

table tr:last-child td,
.asset-table tr:last-child td,
.data-table tr:last-child td,
.history-table tr:last-child td {
  border-bottom: none !important;
}

table tbody tr:nth-child(even) td,
.asset-table tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) td,
.history-table tbody tr:nth-child(even) td {
  background-color: var(--color-surface-offset) !important;
}

table tr:hover td,
.asset-table tr:hover td,
.data-table tr:hover td,
.history-table tr:hover td {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light table tr:hover td,
body.theme-light .asset-table tr:hover td,
body.theme-light .data-table tr:hover td,
body.theme-light .history-table tr:hover td {
  background-color: rgba(0, 0, 0, 0.015) !important;
}

.data-table td,
.asset-table td,
.history-table td,
.metric-value,
.stat-value,
.number-col {
  font-variant-numeric: tabular-nums !important;
}

/* ─── Form Inputs ─── */
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select,
.r-input,
.r-select {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-strong) !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-size: 13.5px !important;
  font-family: var(--font-sans) !important;
  box-sizing: border-box !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

input, select, .r-input, .r-select {
  height: 34px !important;
}

textarea {
  min-height: 80px !important;
  line-height: 1.5 !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.r-input:focus,
.r-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px var(--color-primary-soft) !important;
  outline: none !important;
}

body.theme-light input, 
body.theme-light textarea, 
body.theme-light select,
body.theme-light .r-input,
body.theme-light .r-select {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

body.theme-light input:focus, 
body.theme-light textarea:focus, 
body.theme-light select:focus,
body.theme-light .r-input:focus,
body.theme-light .r-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px var(--color-primary-soft) !important;
}

.field label,
.field span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ─── Buttons ─── */
.btn, .r-btn {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-strong) !important;
  border-radius: 4px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-sm) !important;
}

.btn:hover, .r-btn:hover {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border-hover) !important;
}

.btn:active, .r-btn:active {
  transform: scale(0.98) !important;
}

.btn-primary, .r-btn-primary, .btn.primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover, .r-btn-primary:hover, .btn.primary:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

.btn-soft, .btn-dark, .btn.ghost {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(15, 148, 143, 0.15) !important;
  box-shadow: none !important;
}

.btn-soft:hover, .btn-dark:hover, .btn.ghost:hover {
  background: rgba(15, 148, 143, 0.16) !important;
  border-color: rgba(15, 148, 143, 0.3) !important;
  color: var(--color-primary-hover) !important;
}

.btn:disabled, .r-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Custom Checkbox Toggles */
.toggle-card {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
}

.toggle-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-strong) !important;
  margin-bottom: 2px !important;
}

.toggle-text {
  font-size: 12px !important;
  color: var(--color-text) !important;
}

.toggle-card input[type="checkbox"] {
  appearance: none !important;
  width: 36px !important;
  height: 20px !important;
  background-color: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  position: relative !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.toggle-card input[type="checkbox"]::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  background-color: var(--color-text-muted) !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.toggle-card input[type="checkbox"]:checked {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

.toggle-card input[type="checkbox"]:checked::after {
  left: 18px !important;
  background-color: #ffffff !important;
}

/* ─── Badges (Pills) ─── */
.pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
}

.pill.good, .pill.success, .pill.ok {
  background: rgba(47, 179, 68, 0.12) !important;
  color: var(--color-success) !important;
  border: 1px solid rgba(47, 179, 68, 0.2) !important;
}

.pill.bad, .pill.danger, .pill.fail {
  background: rgba(214, 57, 57, 0.12) !important;
  color: var(--color-danger) !important;
  border: 1px solid rgba(214, 57, 57, 0.2) !important;
}

.pill.warn, .pill.warning {
  background: rgba(245, 159, 0, 0.12) !important;
  color: var(--color-warning) !important;
  border: 1px solid rgba(245, 159, 0, 0.2) !important;
}

.pill.info, .pill.primary {
  background: rgba(34, 199, 192, 0.12) !important;
  color: var(--color-info) !important;
  border: 1px solid rgba(34, 199, 192, 0.2) !important;
}

.pill.grey, .pill.muted {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

.status-pulse-dot {
  background-color: var(--color-success) !important;
  animation: pulseGlow 2s infinite ease-in-out !important;
}

/* Config Grid & RAG layouts */
.config-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 24px !important;
}

.config-group-title {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-strong) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

.preview-card {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
}

.asset-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 20px !important;
  align-items: start !important;
  width: 100% !important;
}

@media (max-width: 1350px) {
  .asset-grid,
  .config-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Sticky Save Config Bar (Tabler alert overlay design) ─── */
.sticky-save-bar {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 12px 24px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  z-index: 9999 !important;
  transition: transform 0.2s ease, opacity 0.2s !important;
}

.sticky-save-bar.hidden {
  display: none !important;
  transform: translateX(-50%) translateY(100px) !important;
  opacity: 0 !important;
}

/* ─── Online Grid ─── */
.online-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

/* ─── RAG Index Folders Navigation ─── */
.folder-card {
  transition: all var(--transition-fast) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}

.folder-card:hover {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border-hover) !important;
  transform: translateY(-2px) !important;
}

.folder-card.active {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  box-shadow: 0 0 12px var(--color-primary-soft) !important;
}

.folder-card.active[data-folder="all"] {
  border-color: var(--color-primary) !important;
}

.folder-card.active[data-folder="operator_correction"] {
  border-color: var(--color-info) !important;
  background: rgba(34, 199, 192, 0.06) !important;
}

.folder-card.active[data-folder="confluence"] {
  border-color: var(--color-primary) !important;
}

.folder-card.active[data-folder="help"] {
  border-color: var(--color-success) !important;
  background: rgba(47, 179, 68, 0.06) !important;
}

.folder-card.active[data-folder="admin_upload"] {
  border-color: var(--color-warning) !important;
  background: rgba(245, 159, 0, 0.06) !important;
}

/* Row Action Dropdowns */
.dropdown-wrapper {
  position: relative !important;
  display: inline-block !important;
}

.dropdown-menu {
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  margin-top: 4px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  z-index: 1000 !important;
  min-width: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 4px 0 !important;
}

.dropdown-menu.hidden {
  display: none !important;
}

.dropdown-item {
  text-align: left !important;
  padding: 8px 12px !important;
  background: none !important;
  border: none !important;
  font-size: 13px !important;
  color: var(--color-text-strong) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background-color var(--transition-fast) !important;
}

.dropdown-item:hover {
  background-color: var(--color-surface-2) !important;
  color: var(--color-primary) !important;
}

.dropdown-item.text-danger {
  color: var(--color-danger) !important;
}

.dropdown-item.text-danger:hover {
  background-color: rgba(239, 68, 68, 0.08) !important;
}

/* ─── Timeline Logs ─── */
.timeline {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding-left: 20px !important;
  margin-top: 10px !important;
}

.timeline::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: var(--color-border) !important;
  z-index: 1 !important;
}

.timeline-item {
  display: flex !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  position: relative !important;
}

/* RAG Import Wizard */
.wizard-steps {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: 10px !important;
}

.wizard-step {
  font-size: 12px !important;
  color: var(--color-text-muted) !important;
  transition: color var(--transition-fast) !important;
}

.wizard-step.active {
  font-weight: 600 !important;
  color: var(--color-primary) !important;
}

.wizard-panel {
  display: block !important;
}

.wizard-panel.hidden {
  display: none !important;
}

/* ─── Scrollbars ─── */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-2) !important;
  border-radius: var(--radius-pill) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-hover) !important;
}

/* ─── Keyframe Animations ─── */
@keyframes pulseGlow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(47, 179, 68, 0.4);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(47, 179, 68, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(47, 179, 68, 0);
  }
}

/* Anti-Overflow Rules */
html, 
body, 
.page-wrap, 
.app {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.main-content-wrap,
.workspace {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.workspace {
  min-width: 0 !important;
}

.data-table-wrap,
.asset-table-wrap,
.table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
}

.data-table {
  min-width: 900px !important;
  width: 100% !important;
  table-layout: fixed !important;
}

.data-table td {
  word-break: break-word !important;
}

.asset-table,
.history-table {
  min-width: 600px !important;
  width: 100% !important;
  table-layout: auto !important;
}

/* ==========================================================================
   🖥️ VISUAL REDESIGN FOR DESKTOP MODE (Tabler Amber/Yellow Custom UI)
   ========================================================================== */

/* 1. Page Background & Scanlines */
body.mode-desktop {
  background-color: var(--color-bg) !important;
  background-image: 
    linear-gradient(rgba(245, 159, 0, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 159, 0, 0.012) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

/* 2. macOS Window Mockup Header */
body.mode-desktop .topbar {
  border-bottom: 2px solid var(--color-primary) !important;
  padding-left: 90px !important;
  position: relative !important;
}

body.mode-desktop .topbar::before {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #ff5f56 !important; /* Mac red dot */
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f !important; /* Yellow and Green dots */
  z-index: 10 !important;
}

/* 3. Control Deck Sidebar Tabs */
body.mode-desktop #operatorsTabs .seg-tab.active {
  color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  border-left-color: var(--color-primary) !important;
}

/* 4. Mini stats top indicators in desktop mode */
body.mode-desktop .mini-stat::before,
body.mode-desktop .r-kpi-item::before {
  background: var(--color-primary) !important;
}

/* 5. Glowing Amber buttons in desktop mode */
body.mode-desktop .btn-primary,
body.mode-desktop .r-btn-primary,
body.mode-desktop .btn.primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(245, 159, 0, 0.25) !important;
}

body.mode-desktop .btn-primary:hover,
body.mode-desktop .r-btn-primary:hover,
body.mode-desktop .btn.primary:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

body.mode-desktop .btn-soft {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(245, 159, 0, 0.15) !important;
}

body.mode-desktop .btn-soft:hover {
  background: rgba(245, 159, 0, 0.16) !important;
  border-color: rgba(245, 159, 0, 0.3) !important;
}

body.mode-desktop .status-pulse-dot {
  background-color: var(--color-primary) !important;
}

body.mode-desktop .status-pulse-text {
  color: var(--color-primary) !important;
}

body.mode-desktop .folder-card.active {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 12px var(--color-primary-soft) !important;
}

/* ─── DESKTOP MODE ACTIVE OVERRIDES (AMBER SCHEME) ─── */
body.mode-desktop {
  --color-primary: #f59f00;       /* Tabler Yellow/Amber */
  --color-primary-hover: #d97706;
  --color-primary-soft: rgba(245, 159, 0, 0.08);
  
  --color-bg: #0c0a06;            /* Deep obsidian warm background */
  --color-surface: #14120e;       /* Card Surface */
  --color-surface-2: #1a1712;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);
}

/* Light Theme in Desktop Mode */
body.theme-light.mode-desktop {
  --color-primary: #d97706;
  --color-primary-hover: #b45309;
  --color-primary-soft: rgba(217, 119, 6, 0.06);
  
  --color-bg: #fdfaf7;
  --color-surface: #ffffff;
  --color-surface-2: #faf6f0;
  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-hover: rgba(0, 0, 0, 0.12);
}

/* Extra styled alert and filters panels */
.alert-item {
  font-size: 13.5px !important;
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.filters-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  align-items: flex-end !important;
  margin-top: 0 !important;
}

.filters-bar .field {
  flex: 1 1 200px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Vertical List View for Online Operators (instead of tiles) */
.online-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.online-grid .op-card {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  border-radius: var(--radius-md) !important;
}

.online-grid .op-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.online-grid .op-name {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-text-strong) !important;
  flex: 1 !important;
  min-width: 120px !important;
}

.online-grid .op-status {
  font-size: 13px !important;
  color: var(--color-text-muted) !important;
  flex: 2 !important;
  min-width: 180px !important;
  margin-top: 0 !important;
}

.online-grid .op-extra {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 !important;
  min-width: 150px !important;
}

@media (max-width: 800px) {
  .online-grid .op-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .online-grid .op-name,
  .online-grid .op-status,
  .online-grid .op-extra {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   ПАЛИТРА СТАТИСТИКИ ИСПОЛЬЗОВАНИЯ

   Блок рисуется инлайновыми стилями из operators.js, и раньше цвета были
   зашиты под тёмный фон: полупрозрачный белый на белом не даёт ни рамки,
   ни подложки, а пастельные акценты на светлом теряют контраст. Значения
   вынесены сюда, поэтому каждая тема получает свой набор.
   ───────────────────────────────────────────────────────────────────── */
:root,
body {
  --u-green:            #4ec89a;
  --u-green-deep:       #3f9d7c;
  --u-indigo:           #22d3ee;
  --u-indigo-2:         #22c7c0;
  --u-indigo-3:         #22c7c0;
  --u-indigo-deep:      #0f827e;
  --u-lavender:         #51d8e5;
  --u-cyan:             #5bc0de;
  --u-amber:            #d9a94e;
  --u-red:              #e0715f;
  --u-mute:             #4a4f63;
  --u-mute-2:           #3a4055;
  --u-slate:            #5a6076;
  --u-slate-2:          #6a7090;
  --u-slate-3:          #6b7180;

  --u-card:             rgba(255, 255, 255, .02);
  --u-track:            rgba(255, 255, 255, .05);
  --u-line:             rgba(255, 255, 255, .07);
  --u-line-strong:      rgba(255, 255, 255, .12);
  --u-card-shadow:      none;

  --u-green-soft:       rgba(78, 200, 154, .09);
  --u-green-soft-line:  rgba(78, 200, 154, .28);
  --u-indigo-soft:      rgba(20,184,166, .09);
  --u-indigo-soft-line: rgba(20,184,166, .28);
}

body.theme-light {
  /* Те же оттенки, но затемнённые до читаемого контраста на белом. */
  --u-green:            #0f9d76;
  --u-green-deep:       #047857;
  --u-indigo:           #0f948f;
  --u-indigo-2:         #0f948f;
  --u-indigo-3:         #0b6f6b;
  --u-indigo-deep:      #0b6f6b;
  --u-lavender:         #22c7c0;
  --u-cyan:             #0e8aa8;
  --u-amber:            #b7791f;
  --u-red:              #dc2626;
  /* Нейтральные доли полос: на белом это светло-серый, а не тёмный. */
  --u-mute:             #cbd5e1;
  --u-mute-2:           #e2e8f0;
  --u-slate:            #64748b;
  --u-slate-2:          #94a3b8;
  --u-slate-3:          #94a3b8;

  /* Карточка на светлом должна быть карточкой: белая подложка, видимая
     рамка и мягкая тень вместо прозрачности. */
  --u-card:             #ffffff;
  --u-track:            #eef2f7;
  --u-line:             rgba(15, 23, 42, .10);
  --u-line-strong:      rgba(15, 23, 42, .16);
  --u-card-shadow:      0 1px 2px rgba(15, 23, 42, .04), 0 2px 10px rgba(15, 23, 42, .04);

  --u-green-soft:       rgba(15, 157, 118, .07);
  --u-green-soft-line:  rgba(15, 157, 118, .26);
  --u-indigo-soft:      rgba(15, 148, 143, .06);
  --u-indigo-soft-line: rgba(15, 148, 143, .24);
}

/* Тень задаётся только тут: в инлайновых стилях её нет, поэтому цепляем
   карточки по их подложке — так правка не зависит от разметки. */
body.theme-light #usageKpis > div {
  box-shadow: var(--u-card-shadow);
}

/* Пояснения под цифрами задавались прозрачностью, рассчитанной на светлый
   текст поверх тёмного. На белом фоне такой текст выцветает — поднимаем. */
body.theme-light #usageKpis [style*="opacity:.45"],
body.theme-light #usageKpis [style*="opacity:.75"] {
  opacity: 1 !important;
  color: var(--u-slate);
}