/*
  Scoped stylesheet for BMS Module (مدیریتِ هوشمندِ ساختمان).
  همه‌ی کلاس‌ها و متغیرها با پیشوند "bms-" هستند — دقیقاً هم‌الگو با maintenance-module.css
  (mtn-)/wallet-module.css/chat-module.css، تا با کلاس‌های عمومیِ سایر ماژول‌ها تداخل نکند.

  بازطراحیِ رنگ (۱): نسخه‌ی قبلی در حالتِ تاریک، رنگ‌هایِ Textِ حالت (accent/success/danger/
  warning) را از حالتِ روشن به ارث می‌برد — یعنی سبز/آبیِ تیره رویِ پس‌زمینه‌ی تقریباً مشکی، که
  خوانایی و کنتراست را از بین می‌برد (دقیقاً همان چیزی که در اسکرین‌شاتِ صفحه‌ی Overview دیده
  می‌شد: نشان‌هایِ کم‌رنگ، کارت‌هایِ تخت و بدونِ عمق). این نسخه هر متغیرِ رنگ را جداگانه برایِ
  حالتِ تاریک بازتعریف می‌کند، سطحِ کارت‌ها را از پس‌زمینه واقعاً جدا می‌کند (Elevation + Shadow)،
  و یک شاخصِ رنگیِ بالایِ هر KPI + آیکون‌بج اضافه می‌کند تا سلسله‌مراتبِ بصری روشن‌تر شود.
*/

.bms-page {
  --bms-bg: #f4f6f9;
  --bms-surface: #ffffff;
  --bms-surface-2: #f8fafc;
  --bms-border: rgba(15,23,42,0.08);
  --bms-border-strong: rgba(15,23,42,0.16);
  --bms-text: #0f172a;
  --bms-text-2: #52606f;
  --bms-text-3: #94a3b8;
  --bms-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 20px -12px rgba(15,23,42,0.12);

  --bms-accent: #0891b2;
  --bms-accent-2: #6366f1;
  --bms-accent-bg: #ecfeff;
  --bms-accent-text: #0e7490;
  --bms-accent-border: #a5f3fc;

  --bms-success: #16a34a;
  --bms-success-bg: #f0fdf4;
  --bms-success-text: #15803d;
  --bms-success-border: #bbf7d0;

  --bms-danger: #dc2626;
  --bms-danger-bg: #fef2f2;
  --bms-danger-text: #b91c1c;
  --bms-danger-border: #fecaca;

  --bms-warning: #d97706;
  --bms-warning-bg: #fffbeb;
  --bms-warning-text: #b45309;
  --bms-warning-border: #fde68a;

  --bms-radius: 10px;
  --bms-radius-lg: 16px;
  font-family: inherit;
  color: var(--bms-text);
}

@media (prefers-color-scheme: dark) {
  .bms-page {
    --bms-bg: #0a0f1a;
    --bms-surface: #131b2c;
    --bms-surface-2: #1a2338;
    --bms-border: rgba(148,163,184,0.14);
    --bms-border-strong: rgba(148,163,184,0.24);
    --bms-text: #eef2ff;
    --bms-text-2: #a3aec2;
    --bms-text-3: #6b7690;
    --bms-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.55);

    --bms-accent: #22d3ee;
    --bms-accent-2: #818cf8;
    --bms-accent-bg: rgba(34,211,238,0.12);
    --bms-accent-text: #67e8f9;
    --bms-accent-border: rgba(34,211,238,0.3);

    --bms-success: #34d399;
    --bms-success-bg: rgba(52,211,153,0.12);
    --bms-success-text: #6ee7b7;
    --bms-success-border: rgba(52,211,153,0.28);

    --bms-danger: #f87171;
    --bms-danger-bg: rgba(248,113,113,0.13);
    --bms-danger-text: #fca5a5;
    --bms-danger-border: rgba(248,113,113,0.3);

    --bms-warning: #fbbf24;
    --bms-warning-bg: rgba(251,191,36,0.12);
    --bms-warning-text: #fcd34d;
    --bms-warning-border: rgba(251,191,36,0.28);
  }
}

.bms-hdr { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bms-title { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 9px; letter-spacing: -0.2px; }
.bms-title i { color: var(--bms-accent); font-size: 19px; }
.bms-desc { font-size: 12.5px; color: var(--bms-text-2); margin-top: 5px; max-width: 720px; line-height: 1.85; }

/* نشانِ «زنده» — پیش‌تر یک نقطه‌ی ثابتِ کم‌رنگ بود؛ حالا با Pulse واقعی و کنتراستِ کافی */
.bms-live-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: var(--bms-success-text); background: var(--bms-success-bg); border: 1px solid var(--bms-success-border);
  border-radius: 999px; padding: 3px 11px 3px 9px; margin-inline-start: 8px; vertical-align: middle;
}
.bms-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bms-success); position: relative; display: inline-block; }
.bms-live-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--bms-success);
  opacity: 0.55; animation: bms-pulse 1.8s ease-out infinite;
}
@keyframes bms-pulse { 0% { transform: scale(0.6); opacity: 0.55; } 100% { transform: scale(2.2); opacity: 0; } }

.bms-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bms-border); margin-bottom: 16px; overflow-x: auto; }
.bms-tab { padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--bms-text-2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s; }
.bms-tab:hover { color: var(--bms-text); }
.bms-tab.active { color: var(--bms-accent-text); border-color: var(--bms-accent); }

.bms-card {
  background: var(--bms-surface); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-lg);
  padding: 20px; box-shadow: var(--bms-shadow);
}
.bms-card + .bms-card { margin-top: 14px; }

/* کارت‌هایِ خلاصه‌ی نمای‌کلی (KPI) — بازطراحیِ کامل: آیکون‌بجِ رنگی + نوارِ شاخصِ بالا + عمقِ واقعی */
.bms-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.bms-kpi {
  position: relative; overflow: hidden; background: var(--bms-surface); border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-lg); padding: 16px 18px; box-shadow: var(--bms-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bms-kpi::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
  background: var(--bms-accent); opacity: 0.85;
}
.bms-kpi:hover { transform: translateY(-2px); }
.bms-kpi-icon {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--bms-accent-bg); color: var(--bms-accent-text); font-size: 16px; margin-bottom: 10px;
}
.bms-kpi-label { font-size: 12px; color: var(--bms-text-2); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.bms-kpi-value { font-size: 25px; font-weight: 800; margin-top: 6px; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.bms-kpi-value small { font-weight: 600; }

.bms-kpi.success::before { background: var(--bms-success); }
.bms-kpi.success .bms-kpi-icon { background: var(--bms-success-bg); color: var(--bms-success-text); }
.bms-kpi.success .bms-kpi-value { color: var(--bms-success-text); }

.bms-kpi.danger::before { background: var(--bms-danger); }
.bms-kpi.danger .bms-kpi-icon { background: var(--bms-danger-bg); color: var(--bms-danger-text); }
.bms-kpi.danger .bms-kpi-value { color: var(--bms-danger-text); }

.bms-kpi.warning::before { background: var(--bms-warning); }
.bms-kpi.warning .bms-kpi-icon { background: var(--bms-warning-bg); color: var(--bms-warning-text); }
.bms-kpi.warning .bms-kpi-value { color: var(--bms-warning-text); }

.bms-field { margin-bottom: 14px; }
.bms-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--bms-text-2); margin-bottom: 6px; }
.bms-input, .bms-select, .bms-textarea {
  width: 100%; height: 40px; border-radius: var(--bms-radius); border: 1px solid var(--bms-border-strong);
  padding: 0 14px; font-size: 13px; background: var(--bms-surface-2); color: var(--bms-text); transition: border-color .15s, box-shadow .15s;
}
.bms-textarea { height: auto; min-height: 80px; padding: 10px 14px; resize: vertical; }
.bms-input:focus, .bms-select:focus, .bms-textarea:focus { outline: none; border-color: var(--bms-accent); box-shadow: 0 0 0 3px var(--bms-accent-bg); }
.bms-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

.bms-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

.bms-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px;
  border-radius: var(--bms-radius); border: 1px solid var(--bms-border-strong); background: var(--bms-surface-2);
  color: var(--bms-text); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s;
}
.bms-btn:hover { border-color: var(--bms-border-strong); background: var(--bms-surface); }
.bms-btn:active { transform: translateY(1px); }
.bms-btn.primary {
  background: linear-gradient(135deg, var(--bms-accent), var(--bms-accent-2)); border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px -4px rgba(8,145,178,0.45);
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--bms-accent) 60%, transparent);
}
.bms-btn.primary:hover { filter: brightness(1.06); }
.bms-btn.danger { color: var(--bms-danger-text); border-color: var(--bms-danger-border); }
.bms-btn.danger:hover { background: var(--bms-danger-bg); }
.bms-btn.sm { height: 32px; padding: 0 10px; font-size: 11.5px; }
.bms-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.bms-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--bms-radius); font-size: 12.5px; margin-top: 12px; line-height: 1.8; }
.bms-alert i { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.bms-alert.danger { background: var(--bms-danger-bg); color: var(--bms-danger-text); border: 1px solid var(--bms-danger-border); }
.bms-alert.success { background: var(--bms-success-bg); color: var(--bms-success-text); border: 1px solid var(--bms-success-border); }
.bms-alert.warning { background: var(--bms-warning-bg); color: var(--bms-warning-text); border: 1px solid var(--bms-warning-border); }
.bms-alert.info { background: var(--bms-accent-bg); color: var(--bms-accent-text); border: 1px solid var(--bms-accent-border); }

.bms-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.bms-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.bms-badge.online, .bms-badge.resolved, .bms-badge.low { background: var(--bms-success-bg); color: var(--bms-success-text); }
.bms-badge.offline, .bms-badge.medium { background: var(--bms-surface-2); color: var(--bms-text-2); border: 1px solid var(--bms-border); }
.bms-badge.fault, .bms-badge.open, .bms-badge.critical, .bms-badge.high { background: var(--bms-danger-bg); color: var(--bms-danger-text); }
.bms-badge.unknown, .bms-badge.acknowledged { background: var(--bms-warning-bg); color: var(--bms-warning-text); }

.bms-tbl-wrap { overflow-x: auto; }
.bms-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bms-tbl th { text-align: right; padding: 10px 12px; color: var(--bms-text-2); font-weight: 700; border-bottom: 1px solid var(--bms-border); white-space: nowrap; }
.bms-tbl td { padding: 11px 12px; border-bottom: 1px solid var(--bms-border); vertical-align: middle; }
.bms-tbl tr:last-child td { border-bottom: none; }
.bms-tbl tr:hover td { background: var(--bms-surface-2); }
.bms-tbl-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.bms-empty { text-align: center; padding: 44px 16px; color: var(--bms-text-2); }
.bms-empty i {
  font-size: 26px; color: var(--bms-text-3); margin-bottom: 12px; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--bms-surface-2); margin-inline: auto;
}

.bms-skeleton { height: 90px; border-radius: var(--bms-radius); background: linear-gradient(90deg, var(--bms-surface-2) 25%, var(--bms-border) 37%, var(--bms-surface-2) 63%); background-size: 400% 100%; animation: bms-shimmer 1.4s ease infinite; }
@keyframes bms-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.bms-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; display: inline-block; animation: bms-spin 0.7s linear infinite; }
@keyframes bms-spin { to { transform: rotate(360deg); } }

/* درختِ فضاها */
.bms-tree-node { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--bms-radius); transition: background .12s; }
.bms-tree-node:hover { background: var(--bms-surface-2); }
.bms-tree-indent { display: inline-block; width: 18px; }

/* نمایش یک‌بارِ کلیدِ API */
.bms-key-reveal { font-family: monospace; direction: ltr; text-align: left; background: var(--bms-surface-2); border: 1px dashed var(--bms-border-strong); border-radius: var(--bms-radius); padding: 12px; font-size: 13px; word-break: break-all; margin-top: 8px; }

.bms-modal-backdrop { position: fixed; inset: 0; background: rgba(6,10,20,0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 16px; }
.bms-modal { background: var(--bms-surface); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-lg); padding: 20px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45); }
.bms-modal-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bms-modal-hdr h4 { margin: 0; font-size: 15px; font-weight: 700; }
.bms-modal-close { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--bms-text-2); transition: color .15s; }
.bms-modal-close:hover { color: var(--bms-text); }

/* دسترسیِ سریع (لینک‌هایِ ورودیِ Overview) */
.bms-quick-link {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--bms-radius);
  border: 1px solid var(--bms-border-strong); background: var(--bms-surface-2); color: var(--bms-text);
  font-size: 12.5px; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s, transform .1s;
}
.bms-quick-link:hover { border-color: var(--bms-accent-border); background: var(--bms-accent-bg); color: var(--bms-accent-text); text-decoration: none; }
.bms-quick-link i { color: var(--bms-accent); }