/* =====================================================================
   BCS SmartOffice – Operations Dashboard Builder CSS v2
   Design: ThingWorx Mashup Builder / GE Operations Hub / Grafana 10
   ===================================================================== */

/* ── Mode Toggles ─────────────────────────────────────────────────────── */
.monitor-view.dashboard-mode > .monitor-side,
.monitor-view.dashboard-mode > .monitor-inspector { display: none; }
.monitor-view.dashboard-mode > .monitor-main { grid-column: 1 / -1; }
.monitor-view.dashboard-mode .monitor-dashboard {
  padding: 0;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* ── Empty Start Screen ───────────────────────────────────────────────── */
.db-start {
  min-height: calc(100vh - 130px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
  background: linear-gradient(160deg, #f8faff 0%, #eef2fb 100%);
}
.db-start h2 { margin: 10px 0 8px; font-size: 18px; color: #111827; }
.db-start p  { max-width: 520px; margin: 0 0 24px; color: #6b7280; font-size: 13px; line-height: 1.6; }
.db-start .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #2563eb; text-transform: uppercase; }
.dsi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  width: 80px; height: 60px; margin: 0 auto 20px;
  padding: 10px; background: #fff; border: 1px solid #dde3f0;
  border-radius: 14px; box-shadow: 0 8px 28px rgba(37,99,235,.12);
}
.dsi-grid i { border-radius: 4px; background: linear-gradient(135deg,#bfdbfe,#93c5fd); }

/* ── Dashboard Switcher Bar ───────────────────────────────────────────── */
.db-switcher {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  overflow-x: auto; overflow-y: hidden;
  flex-shrink: 0;
}
.db-switcher.in-viewbar {
  padding: 0 0 0 10px;
  margin-left: 4px;
  border-bottom: none;
  border-left: 1px solid #e2e8f0;
  background: transparent;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.db-switcher.in-viewbar.hidden { display: none !important; }
.db-switcher.in-viewbar .db-switcher-btn { padding: 4px 12px; font-size: 11.5px; border-radius: 16px; }
.db-switcher.in-viewbar .btn.compact { padding: 4px 9px; font-size: 11px; }
.db-switcher-list { display: flex; gap: 5px; min-width: 0; }
.db-switcher-btn {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; padding: 6px 14px;
  border: 1px solid #e5e7eb; border-radius: 20px;
  background: #fff; color: #6b7280;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: .15s;
}
.db-switcher-btn:hover { border-color: #93c5fd; color: #1d4ed8; }
.db-switcher-btn.active {
  border-color: #2563eb; background: #eff6ff; color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.db-tab-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 13px; line-height: 1; color: #9ca3af;
  margin-left: 2px; transition: all .15s;
}
.db-tab-del:hover { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.db-switcher-actions {
  display: flex; align-items: center; gap: 4px;
  padding-left: 8px; border-left: 1px solid #e5e7eb; margin-left: 2px;
  flex-shrink: 0;
}
.db-switcher-del { color: #dc2626 !important; }
.db-switcher-del:hover { background: #fef2f2 !important; border-color: #fca5a5 !important; }

.delete-warning {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; background: #fef2f2; border: 1px solid #fee2e2; border-radius: 8px; margin-bottom: 12px;
}
.delete-warning i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #ef4444; color: #fff;
  font-weight: 800; font-style: normal; font-size: 14px; flex-shrink: 0;
}
.delete-warning b { display: block; font-size: 13px; color: #991b1b; margin-bottom: 4px; }
.delete-warning p { margin: 0; font-size: 12px; color: #b91c1c; line-height: 1.4; }

/* ── Builder Title Bar ────────────────────────────────────────────────── */
.db-builder-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 18px;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.db-builder-bar-left { display: flex; flex-direction: column; gap: 1px; }
.db-builder-bar-left .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.db-builder-title { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.db-builder-bar-right { display: flex; align-items: center; gap: 8px; }
.db-save-badge {
  padding: 3px 9px; border-radius: 12px;
  font-size: 11.5px; font-weight: 700;
}
.db-save-badge.saved  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.db-save-badge.unsaved { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }

/* ── Builder Layout ───────────────────────────────────────────────────── */
.db-builder {
  display: grid;
  flex: 1;
  min-height: 0;
  height: 100%;
  align-items: stretch;
  overflow: hidden;
}
.db-builder.edit-mode  { grid-template-columns: 240px 1fr 270px; }
.db-builder.view-mode  { grid-template-columns: 1fr; }

/* ── Palette (Left Panel) ─────────────────────────────────────────────── */
.db-palette {
  height: 100%;
  min-height: 0;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  overflow-x: hidden;
}
.db-palette > .db-panel-head:first-child {
  position: sticky; top: 0; z-index: 5; background: #fff;
}
.db-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #f1f3f7;
}
.db-panel-head b    { font-size: 13px; color: #111827; }
.db-panel-head span { font-size: 11px; color: #9ca3af; }
.db-widget-list { display: flex; flex-direction: column; gap: 5px; padding: 10px; }
.db-widget-chip {
  display: grid; grid-template-columns: 1fr 14px;
  align-items: center; gap: 9px; padding: 9px 10px;
  border: 1px solid #e5e7eb; border-radius: 9px;
  background: #fff; cursor: grab; transition: .15s;
}
.db-widget-chip:hover  { border-color: #93c5fd; background: #f8fbff; box-shadow: 0 2px 8px rgba(37,99,235,.08); }
.db-widget-chip:active { cursor: grabbing; }
.db-widget-chip div b     { display: block; font-size: 12.5px; color: #111827; }
.db-widget-chip > em { color: #cbd5e1; font-style: normal; font-size: 13px; }

/* Layout chips inside palette */
.db-layout-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
.db-layout-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 6px; border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff; cursor: pointer; transition: .15s;
}
.db-layout-chip:hover { border-color: #93c5fd; background: #f8fbff; }
.db-layout-chip small { font-size: 11.5px; color: #6b7280; }
.db-layout-mini {
  display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 8px;
  gap: 2px; width: 52px; height: 24px; overflow: hidden;
}
.db-layout-mini i { border-radius: 2px; background: #bfdbfe; }

/* Canvas (Center) */
.db-canvas {
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding: 16px;
  background: #f0f2f5;
  overflow-y: auto;
  overflow-x: auto;
}
.db-builder.edit-mode .db-canvas {
  padding-bottom: 420px !important;
  scroll-behavior: smooth;
}
.db-canvas-toolbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.db-canvas-toolbar span { font-size: 12px; color: #64748b; }

/* Fixed layout grid */
.db-canvas-fixed {
  display: grid; gap: 12px; align-items: stretch;
  grid-auto-rows: minmax(200px, 1fr);
}
/* Custom layout grid – explicit positions */
.db-canvas-custom {
  display: grid; gap: 10px;
  grid-auto-rows: 80px;   /* ROW_UNIT */
}

/* ── Slots ────────────────────────────────────────────────────────────── */
.db-slot {
  position: relative; min-width: 0; min-height: 160px;
  border: 2px dashed #d1d5db; border-radius: 12px;
  background: rgba(255,255,255,.55); transition: border-color .15s, background .15s, transform .15s ease, box-shadow .15s ease;
}
.db-slot.custom { overflow: visible; }
.db-slot.fixed  { overflow: hidden; }
.db-slot.occupied { border-style: solid; border-color: #e5e7eb; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.db-slot.drag-over { border: 2px solid #2563eb; background: #eff6ff; box-shadow: 0 0 0 4px rgba(37,99,235,.12); }

/* Mobile-style Drag & Swap States */
.db-slot.is-dragging, .dbw.is-dragging {
  opacity: 0.35 !important;
  transform: scale(0.96) !important;
  border: 2px dashed #3b82f6 !important;
  box-shadow: none !important;
}
.db-slot.drag-swap-target {
  border: 2px solid #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.22), 0 8px 24px rgba(37,99,235,.15) !important;
  transform: scale(1.02);
  z-index: 25;
}
.db-slot.drag-swap-target .dbw-swap-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Swap Overlay & Pill */
.dbw-swap-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(37, 99, 235, 0.14);
  border-radius: 10px;
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
}
.dbw-swap-pill {
  padding: 8px 18px; border-radius: 20px;
  background: #2563eb; color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(37,99,235,.45);
  display: inline-flex; align-items: center; gap: 6px;
  animation: dbwSwapPulse 1.1s infinite alternate ease-in-out;
}
.dbw-swap-pill.empty {
  background: #059669;
  box-shadow: 0 4px 16px rgba(5,150,105,.45);
}
@keyframes dbwSwapPulse {
  0% { transform: scale(0.95); }
  100% { transform: scale(1.05); }
}

/* Slot controls & actions (Integrated Header Style) */
.db-slot-move {
  width: 22px; height: 22px; border: 1px solid #cbd5e1; border-radius: 4px;
  background: rgba(255,255,255,.95); color: #475569;
  cursor: grab; font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
.db-slot-move:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.db-slot-move:active { cursor: grabbing; background: #dbeafe; }

/* Segmented directional nudge group (◀ ▲ ▼ ▶) */
.db-slot-nudge-group {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.95);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.db-slot-nudge-group .db-slot-nudge {
  border: none;
  border-radius: 0;
  border-right: 1px solid #e2e8f0;
  width: 20px;
  height: 22px;
  background: transparent;
  color: #475569;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  padding: 0;
}
.db-slot-nudge-group .db-slot-nudge:last-child {
  border-right: none;
}
.db-slot-nudge-group .db-slot-nudge:hover {
  background: #eff6ff;
  color: #2563eb;
  box-shadow: none;
  transform: none;
}
.db-slot-nudge-group .db-slot-nudge:active {
  background: #dbeafe;
  color: #1d4ed8;
}

.db-slot-del {
  width: 22px; height: 22px; border: 1px solid #fecaca; border-radius: 4px;
  background: #fff; color: #dc2626; font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
.db-slot-del:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

.db-slot-info {
  padding: 2px 6px; border-radius: 4px; background: rgba(241,245,249,0.9);
  border: 1px solid #e2e8f0; color: #64748b; font-size: 11px;
  font-weight: 600; pointer-events: none; flex-shrink: 0; white-space: nowrap;
}

/* Resize handles */
.db-slot-resize-x, .db-slot-resize-y, .db-slot-resize-xy {
  position: absolute; z-index: 15; background: rgba(37,99,235,.15); border-radius: 3px;
}
.db-slot-resize-x  { right: -4px; top: 20%; bottom: 20%; width: 8px; cursor: ew-resize; }
.db-slot-resize-y  { bottom: -4px; left: 20%; right: 20%; height: 8px; cursor: ns-resize; }
.db-slot-resize-xy { right: -4px; bottom: -4px; width: 16px; height: 16px; cursor: nwse-resize; border-radius: 0 0 12px 0; background: rgba(37,99,235,.3); }

/* Empty slot */
.db-slot-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
}
.db-slot-empty-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; min-height: 34px; width: 100%; box-sizing: border-box;
  background: #f8fafc; border-bottom: 1px dashed #cbd5e1; border-radius: 10px 10px 0 0;
  gap: 8px; flex-shrink: 0;
}
.db-slot-empty-inner {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 14px; text-align: center; color: #9ca3af;
}
.db-slot-empty-inner i  { display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px dashed #d1d5db; border-radius: 50%; background: #fff; color: #2563eb; font-style: normal; font-size: 1.1rem; }
.db-slot-empty-inner b  { font-size: 13px; color: #6b7280; }
.db-slot-empty-inner span { font-size: 11.5px; line-height: 1.4; }
.db-slot-add-btn {
  margin-top: 4px; padding: 5px 12px;
  border: 1px solid #bfdbfe; border-radius: 6px;
  background: #eff6ff; color: #1d4ed8; font-size: 12px; cursor: pointer;
}
.db-slot-add-btn:hover { background: #dbeafe; }

/* ── Widget Card (dbw) ────────────────────────────────────────────────── */
.dbw {
  position: relative;
  height: 100%; display: flex; flex-direction: column;
  overflow: hidden; border-radius: 10px; background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
  user-select: none;
}
.dbw-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; min-height: 34px; flex-shrink: 0;
  cursor: grab; border-bottom: 1px solid #e2e8f0; gap: 8px;
}
.dbw-header:active { cursor: grabbing; }
.dbw.editing { cursor: default; }

.dbw-title-wrap {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;
}
.dbw-title-text {
  font-size: 12.5px; font-weight: 700; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.2; display: inline-flex; align-items: center; gap: 4px;
  min-width: 0;
}
.dbw-title-text b {
  font-size: 12.5px; font-weight: 700; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dbw-title-text.clickable-title {
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  transition: all .15s ease; border: 1px solid transparent;
}
.dbw-title-text.clickable-title:hover {
  background: rgba(37,99,235,0.08); color: #2563eb;
  border-color: rgba(37,99,235,0.25);
}
.dbw-title-text.clickable-title:hover b {
  color: #2563eb;
}
.dbw-title-edit-icon {
  font-size: 11px; color: #64748b; font-style: normal;
  opacity: 0.7; transition: all .15s ease;
}
.dbw-title-text.clickable-title:hover .dbw-title-edit-icon {
  color: #2563eb; opacity: 1; transform: scale(1.1);
}
.dbw-title-inline-input {
  font-size: 12px; font-weight: 700; color: #1e293b;
  background: #fff; border: 1.5px solid #2563eb; border-radius: 4px;
  padding: 2px 6px; outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
  width: 170px; max-width: 100%;
}

.dbw-header-right {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.dbw-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  cursor: grab; font-size: 11px; color: #64748b;
  transition: color .15s, background .15s;
}
.dbw-drag-handle:hover { color: #1e293b; background: rgba(0,0,0,.06); }
.dbw-move-hint { color: #64748b; font-size: 11px; cursor: grab; }

.dbw-actions { display: flex; gap: 4px; flex-shrink: 0; }
.dbw-actions button {
  width: 22px; height: 22px; border: 1px solid #e2e8f0; border-radius: 4px;
  background: #ffffff; color: #475569;
  font-size: 11px; cursor: pointer; transition: all .12s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.dbw-actions button:hover { background: #f1f5f9; color: #1e293b; border-color: #cbd5e1; }
.dbw-actions button.del { background: #fff; color: #dc2626; border-color: #fecaca; }
.dbw-actions button.del:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

.dbw-body {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 14px 16px; min-height: 0; overflow: hidden;
}
.dbw.point-over { box-shadow: inset 0 0 0 3px #2563eb; transition: box-shadow .1s ease; }
.dbw.point-over .dbw-body::after {
  content: '이 위젯에 데이터포인트 바인딩'; position: absolute; inset: 6px;
  display: grid; place-items: center;
  border: 2px dashed #2563eb; border-radius: 8px;
  background: rgba(239,246,255,.94); color: #1d4ed8; font-size: 13px; font-weight: 800;
  z-index: 20; pointer-events: none !important;
}
.dbw.point-over .dbw-body * { pointer-events: none !important; }
.dbw-drop-hint { padding: 5px; text-align: center; background: #f9fafb; color: #9ca3af; font-size: 11px; }

/* ── Widget Internals – Shared ────────────────────────────────────────── */
.dw-label { margin: 8px 0 0; text-align: center; color: #6b7280; font-size: 12px; }

/* Unbound */
.dw-unbound { text-align: center; color: #9ca3af; }
.dw-unbound-icon { font-size: 1.6rem; margin-bottom: 8px; opacity: .5; }
.dw-unbound b   { display: block; font-size: 13px; color: #475569; margin-bottom: 4px; }
.dw-unbound span { display: block; font-size: 11.5px; line-height: 1.5; max-width: 220px; }

/* KPI */
.dw-kpi { width: 100%; text-align: center; }
.dw-kpi-value { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; color: #111827; line-height: 1.1; }
.dw-kpi-trend { display: inline-block; margin: 4px 0; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.dw-kpi-trend.up   { background: #f0fdf4; color: #15803d; }
.dw-kpi-trend.down { background: #fef2f2; color: #dc2626; }
.dw-kpi-label  { margin-top: 6px; color: #6b7280; font-size: 12px; }
.dw-kpi-status { margin-top: 5px; font-size: 11px; }
.dw-kpi-status.ok  { color: #15803d; }
.dw-kpi-status.err { color: #dc2626; }

/* Status */
.dw-status { text-align: center; }
.dw-status-ring {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto 6px;
  border-radius: 50%; background: rgba(156,163,175,.1);
}
.dw-status.on  .dw-status-ring { background: rgba(34,197,94,.1); box-shadow: 0 0 0 6px rgba(34,197,94,.08); }
.dw-status.off .dw-status-ring { background: rgba(156,163,175,.1); }
.dw-status-dot {
  width: 18px; height: 18px; border-radius: 50%; background: #9ca3af;
  box-shadow: 0 0 0 4px rgba(156,163,175,.15);
}
.dw-status.on  .dw-status-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.dw-status strong { display: block; font-size: 14px; font-weight: 700; color: #1e293b; }
.dw-status span   { display: block; margin-top: 2px; color: #2563eb; font-size: 12px; font-weight: 600; }
.dw-status small  { display: block; margin-top: 2px; color: #64748b; font-size: 10.5px; }

/* Palette Category Tag & Chip Style */
.db-palette-sec-tag {
  font-size: 11px; font-weight: 700; color: #475569;
  padding: 4px 6px; background: #f1f5f9; border-radius: 5px;
  letter-spacing: -0.02em; margin-bottom: 2px;
}
.db-widget-chip {
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #ffffff; cursor: grab; transition: all .15s ease;
}
.db-chip-info { flex: 1; min-width: 0; }
.db-chip-info b { display: block; font-size: 12.5px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-widget-chip em { color: #cbd5e1; font-style: normal; font-size: 13px; }
.db-widget-chip:hover { border-color: #3b82f6; background: #f8faff; box-shadow: 0 2px 6px rgba(59,130,246,0.1); }

/* ── Data Card Widget (Analog & Digital) ────────────────────────────────── */
.dw-data-card {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  justify-content: space-between; padding: 4px 6px; box-sizing: border-box;
}
.dw-dc-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: #64748b; font-weight: 600;
}
.dw-dc-badge {
  padding: 1px 7px; border-radius: 12px; font-size: 10px; font-weight: 700;
}
.dw-dc-badge.on  { background: #dcfce7; color: #15803d; }
.dw-dc-badge.off { background: #f1f5f9; color: #64748b; }
.dw-dc-comm.ok  { color: #15803d; font-size: 10.5px; font-weight: 600; }
.dw-dc-comm.err { color: #dc2626; font-size: 10.5px; font-weight: 600; }
.dw-dc-source-name {
  font-size: 12px; color: #334155; font-weight: 600;
  max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Data card Digital */
.dw-dc-indicator {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: auto 0; padding: 8px 0;
}
.dw-dc-ring {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.dw-data-card.digital.on .dw-dc-ring {
  background: rgba(16,185,129,0.12); box-shadow: 0 0 0 6px rgba(16,185,129,0.08);
}
.dw-data-card.digital.off .dw-dc-ring {
  background: rgba(148,163,184,0.12); box-shadow: 0 0 0 4px rgba(148,163,184,0.05);
}
.dw-dc-dot {
  width: 20px; height: 20px; border-radius: 50%;
}
.dw-data-card.digital.on .dw-dc-dot {
  background: #10b981; box-shadow: 0 0 10px rgba(16,185,129,0.6);
}
.dw-data-card.digital.off .dw-dc-dot {
  background: #94a3b8;
}
.dw-dc-state {
  font-size: 18px; font-weight: 800; color: #1e293b;
}
.dw-dc-footer {
  font-size: 11px; color: #64748b; text-align: center;
  border-top: 1px dashed #e2e8f0; padding-top: 5px; margin-top: 4px;
}
.dw-dc-footer span { display: block; font-weight: 600; color: #334155; }

/* Data card Analog */
.dw-dc-val-wrap {
  display: flex; align-items: baseline; justify-content: center;
  gap: 8px; margin: auto 0;
}
.dw-dc-val {
  font-size: 2.2rem; font-weight: 800; color: #0f172a;
  letter-spacing: -0.03em; line-height: 1;
}
.dw-dc-trend {
  font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 10px;
}
.dw-dc-trend.up   { background: #f0fdf4; color: #15803d; }
.dw-dc-trend.down { background: #fef2f2; color: #dc2626; }
.dw-dc-track-wrap { margin-top: auto; }
.dw-dc-track {
  width: 100%; height: 6px; background: #e2e8f0; border-radius: 4px; overflow: hidden;
}
.dw-dc-bar {
  height: 100%; background: linear-gradient(90deg, #3b82f6, #2563eb); border-radius: 4px;
  transition: width .3s ease;
}
.dw-dc-range {
  display: flex; justify-content: space-between; font-size: 10px; color: #64748b; font-weight: 600;
  margin-top: 3px;
}

/* ── Grid Widget (Analog & Digital) ─────────────────────────────────────── */
.dw-grid-wrap {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  overflow: auto; font-size: 11px; padding: 2px 4px; box-sizing: border-box;
}
.dw-grid-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0;
}
.dw-grid-head b { font-size: 12px; color: #1e293b; font-weight: 700; }
.dw-grid-badge {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
}
.dw-grid-badge.on  { background: #dcfce7; color: #15803d; }
.dw-grid-badge.off { background: #f1f5f9; color: #64748b; }
.dw-grid-val-pill {
  font-size: 11px; font-weight: 700; color: #2563eb; background: #eff6ff;
  padding: 1px 6px; border-radius: 4px;
}
.dw-grid-tbl {
  width: 100%; border-collapse: collapse; text-align: left;
}
.dw-grid-tbl th {
  padding: 4px 6px; color: #64748b; font-weight: 600; border-bottom: 1px solid #f1f5f9; width: 38%;
  white-space: nowrap; font-size: 11px;
}
.dw-grid-tbl td {
  padding: 4px 6px; color: #1e293b; font-size: 11px; border-bottom: 1px solid #f1f5f9;
}
.dw-grid-tbl code {
  font-size: 10.5px; color: #64748b; font-family: monospace; background: #f8fafc; padding: 1px 4px; border-radius: 3px;
}
.dw-state-pill {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; display: inline-block;
}
.dw-state-pill.on  { background: #dcfce7; color: #166534; }
.dw-state-pill.off { background: #f1f5f9; color: #475569; }
.dw-inline-bar {
  width: 60px; height: 5px; background: #e2e8f0; border-radius: 3px; display: inline-block;
  vertical-align: middle; overflow: hidden; margin-right: 4px;
}
.dw-ib-fill { height: 100%; background: #3b82f6; border-radius: 3px; }
.text-ok  { color: #15803d; font-weight: 600; }
.text-bad { color: #dc2626; font-weight: 600; }
.text-val { color: #2563eb; font-weight: 700; }

/* ── Multi-Point Data Grid Widget ───────────────────────────────────────── */
.dw-multi-grid-wrap {
  width: 100%; height: 100%; min-height: 0;
  overflow-y: auto; overflow-x: auto;
  box-sizing: border-box;
}
.dw-multi-grid-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.dw-multi-grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dw-multi-grid-wrap::-webkit-scrollbar-track { background: transparent; }

.dw-multi-grid-empty {
  width: 100%; height: 100%; min-height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px; color: #64748b;
}
.dw-mg-empty-icon { font-size: 24px; margin-bottom: 4px; color: #cbd5e1; }
.dw-mg-empty-title { font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.dw-mg-empty-desc { font-size: 11px; color: #64748b; max-width: 240px; margin: 0; line-height: 1.4; }

.dw-multi-grid-tbl {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 11.5px;
  table-layout: fixed;
}
.dw-multi-grid-tbl th,
.dw-multi-grid-tbl td {
  border: 1px solid #cbd5e1;
  padding: 6px 10px;
  vertical-align: middle;
  box-sizing: border-box;
}
.dw-multi-grid-tbl thead th {
  position: sticky; top: 0; background: #f8fafc; z-index: 2;
  color: #334155; font-weight: 700; font-size: 11.5px;
  border-bottom: 2px solid #94a3b8; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dw-multi-grid-tbl tbody tr.grid-row-group-start {
  border-top: 1.5px solid #94a3b8;
}
.dw-multi-grid-tbl tbody tr.grid-row-sub {
  background: #ffffff;
}
.dw-multi-grid-tbl tbody tr:hover { background: #f8fbff; }
.dw-multi-grid-tbl tbody td.col-pt {
  background: #ffffff;
  vertical-align: middle;
  font-weight: 600;
}
.dw-multi-grid-tbl tbody td.col-val {
  background: #ffffff;
  vertical-align: middle;
  text-align: center;
}
.dw-multi-grid-tbl tbody td.col-act {
  vertical-align: middle;
  text-align: center;
}
.dw-pt-name { color: #1e293b; font-weight: 600; font-size: 12px; }
.dw-cell-text { color: #334155; }
.dw-cell-empty { color: #64748b; font-weight: 500; font-size: 11px; }
.dw-multi-grid-tbl tbody td.col-off,
.dw-multi-grid-tbl tbody td.col-roi,
.dw-multi-grid-tbl tbody td.col-dev {
  white-space: normal;
  max-width: 220px;
  line-height: 1.4;
}
.dw-cell-badge {
  display: inline-block; padding: 1.5px 6px; background: #f1f5f9;
  border: 1px solid #e2e8f0; border-radius: 4px; font-size: 10.5px; color: #475569;
  margin: 1px 2px 1px 0;
}
.dw-grid-num-val {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 13px; font-weight: 700; color: #0284c7;
}
.btn-grid-row-del {
  border: none; background: transparent; color: #64748b;
  font-size: 14px; font-weight: 700; cursor: pointer;
  border-radius: 4px; padding: 0 5px; line-height: 1; transition: .15s;
}
.btn-grid-row-del:hover { background: #fee2e2; color: #dc2626; }

/* ── ECharts Enhanced Head ──────────────────────────────────────────────── */
.dw-echart-wrap {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  min-height: 0; position: relative;
  overflow: hidden;
}
.dw-echart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 6px 4px; flex-shrink: 0;
}
.dw-eh-left {
  display: flex; align-items: center; gap: 6px;
}
.dw-echart-head strong { font-size: 14px; font-weight: 700; color: #1e293b; }
.dw-eh-badge {
  font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 8px;
}
.dw-eh-badge.digital { background: #dcfce7; color: #15803d; }
.dw-eh-badge.analog  { background: #eff6ff; color: #2563eb; }
.dw-eh-type { font-size: 10.5px; color: #64748b; font-weight: 600; }
.dw-echart-canvas {
  width: 100%; flex: 1; min-height: 90px; min-width: 0;
}
.dw-echart-footer {
  text-align: center; font-size: 11px; color: #64748b; margin-top: 2px;
  flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Gauge (SVG half-circle) */
.dw-gauge { width: 100%; text-align: center; }
.dw-gauge-wrap { width: min(170px,90%); margin: 0 auto; }
.dw-gauge-svg { overflow: visible; }
.dw-gauge-track { fill: none; stroke: #f1f5f9; stroke-width: 9; stroke-linecap: round; }
.dw-gauge-fill  { fill: none; stroke: #2563eb; stroke-width: 9; stroke-linecap: round; stroke-dashoffset: 0; transition: stroke-dasharray .4s ease; }
.dw-gauge-val   { font-size: 14px; font-weight: 700; fill: #1e293b; text-anchor: middle; }
.dw-gauge-pct   { font-size: 10.5px; font-weight: 600; fill: #64748b; text-anchor: middle; }
.dw-gauge-range { display: flex; justify-content: space-between; padding: 2px 10px; color: #64748b; font-size: 10.5px; }

/* Line chart */
.dw-line { width: 100%; height: 100%; display: flex; flex-direction: column; }
.dw-line-head strong { display: block; font-size: 16px; font-weight: 700; color: #1e293b; }
.dw-line-head span   { display: block; color: #64748b; font-size: 11.5px; margin-top: 1px; }
.dw-line-svg { flex: 1; width: 100%; min-height: 80px; margin-top: 8px; }
.dw-line-stroke { fill: none; stroke: #2563eb; stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Bar */
.dw-bar { width: 92%; }
.dw-bar-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.dw-bar-head strong { font-size: 16px; font-weight: 700; color: #1e293b; }
.dw-bar-head span   { color: #64748b; font-size: 12px; }
.dw-bar-track { height: 8px; border-radius: 8px; background: #f1f5f9; overflow: hidden; }
.dw-bar-fill  { height: 100%; border-radius: 8px; background: linear-gradient(90deg,#2563eb,#60a5fa); transition: width .3s ease; }
.dw-bar-range { display: flex; justify-content: space-between; margin-top: 4px; color: #64748b; font-size: 10.5px; }

/* Donut */
.dw-donut { text-align: center; width: 100%; }
.dw-donut-wrap {
  position: relative;
  width: min(120px, 85%);
  margin: 0 auto;
}
.dw-donut-svg {
  display: block; width: 100%; height: auto;
  transform: rotate(-90deg);
}
.dw-donut-track { fill: none; stroke: #f1f5f9; stroke-width: 10; }
.dw-donut-arc   { fill: none; stroke: #4f46e5; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .3s ease; }
.dw-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.dw-donut-val {
  font-size: 14px; font-weight: 700; color: #1e293b; line-height: 1.1;
}
.dw-donut-lbl {
  font-size: 11px; font-weight: 600; color: #64748b; margin-top: 3px;
}

/* Heatmap bar */
.dw-heatmap { width: 100%; text-align: center; }
.dw-heatmap-bar {
  position: relative; height: 38px; border-radius: 8px; margin-bottom: 8px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.dw-heatmap-bar span { position: relative; z-index: 1; font-size: 13.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.dw-heatmap-bar::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,#10b981,#f59e0b,#ef4444);
  opacity: .2;
}
.dw-heatmap-bar::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--pct,50%); border-radius: 8px;
  background: linear-gradient(90deg,#10b981,#f59e0b,#ef4444);
}
.dw-heatmap-scale { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.dw-heatmap-scale span { font-size: 10.5px; color: #64748b; }
.dw-heatmap-gradient {
  flex: 1; height: 5px; border-radius: 5px;
  background: linear-gradient(90deg,#10b981,#f59e0b,#ef4444);
}

/* Data table */
.dw-table { width: 100%; }
.dw-table-row {
  display: grid; grid-template-columns: 90px 1fr;
  gap: 8px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid #f3f4f6;
}
.dw-table-row:last-child { border-bottom: 0; }
.dw-table-row span { color: #9ca3af; font-size: 11.5px; }
.dw-table-row b, .dw-table-row code { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; }
.dw-table-row .ok  { color: #15803d; }
.dw-table-row .bad { color: #dc2626; }

/* ── Data Points Panel (Right) ────────────────────────────────────────── */
.db-points {
  height: 100%;
  min-height: 0;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  overflow-y: auto;
  overflow-x: hidden;
}
.db-points > .db-panel-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
}
.db-point-search {
  position: sticky;
  top: 41px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px;
  padding: 0 9px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #f9fafb;
}
.db-point-search span { color: #9ca3af; }
.db-point-search input {
  height: 34px; border: 0; background: transparent;
  font-size: 12px; outline: none; width: 100%;
}

/* ── Slim Scrollbars ─────────────────────────────────────────────────── */
.db-palette::-webkit-scrollbar,
.db-canvas::-webkit-scrollbar,
.db-points::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.db-palette::-webkit-scrollbar-track,
.db-canvas::-webkit-scrollbar-track,
.db-points::-webkit-scrollbar-track {
  background: transparent;
}
.db-palette::-webkit-scrollbar-thumb,
.db-canvas::-webkit-scrollbar-thumb,
.db-points::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.db-palette::-webkit-scrollbar-thumb:hover,
.db-canvas::-webkit-scrollbar-thumb:hover,
.db-points::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.db-point-tree { padding: 0 10px 12px; }
.db-tree-group { margin: 6px 0; }
.db-tree-group.hidden { display: none !important; }
.db-tree-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 8px 10px; border-radius: 7px; cursor: pointer; list-style: none; user-select: none;
  background: #f8fafc; border: 1px solid #e2e8f0; transition: background .12s, border-color .12s;
}
.db-tree-group > summary::-webkit-details-marker { display: none; }
.db-tree-group > summary > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.db-tree-group > summary i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; flex-shrink: 0; }
.db-tree-group > summary b { font-size: 12.5px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-tree-group > summary small {
  color: #64748b; font-size: 11px; font-weight: 600;
  background: #e2e8f0; padding: 1px 6px; border-radius: 10px;
}
.db-tree-group > summary:hover { background: #f1f5f9; border-color: #cbd5e1; }
.db-tree-group[open] > summary { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.db-tree-group > div { padding: 4px 0 2px 8px; border-left: 2px solid #e2e8f0; margin-left: 6px; margin-top: 2px; }
.db-tree-group.level-device > summary i { background: #3b82f6; }
.db-tree-group.level-unbound > summary i { background: #f59e0b; }
.db-point-item {
  display: grid; grid-template-columns: 32px 1fr 12px;
  align-items: center; gap: 6px; margin: 3px 0; padding: 7px 8px;
  border: 1px solid #e5e7eb; border-radius: 7px; background: #fff;
  cursor: grab; transition: .12s;
}
.db-point-item:hover  { border-color: #93c5fd; background: #f8fbff; }
.db-point-item:active { cursor: grabbing; }
.db-point-item > i { display: block; text-align: center; font-size: 10px; font-style: normal; font-weight: 800; color: #1d4ed8; }
.db-point-item span b    { display: block; font-size: 12px; }
.db-point-item span code { display: block; margin-top: 2px; font-size: 11px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-point-item > em  { color: #d1d5db; font-style: normal; }
.db-point-item.hidden, .db-empty { display: none; }
.db-empty { color: #9ca3af; font-size: 12px; padding: 10px; text-align: center; }
.db-point-item.hidden { display: none !important; }

/* ── Layout Templates (Modal) ─────────────────────────────────────────── */
.layout-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.layout-template {
  display: block; padding: 10px; border: 1.5px solid #e5e7eb;
  border-radius: 9px; background: #fff; cursor: pointer; transition: .15s;
}
.layout-template:has(input:checked) { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.layout-template input { position: absolute; opacity: 0; }
.layout-template > b, .layout-template > small { display: block; }
.layout-template > b { margin-top: 8px; font-size: 12.5px; }
.layout-template > small { margin-top: 2px; color: #9ca3af; font-size: 11px; }
.layout-preview {
  display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 14px;
  gap: 2px; height: 34px; overflow: hidden;
}
.layout-preview i { border-radius: 2px; background: #bfdbfe; }
.preview-single { grid-template-columns: 1fr; }
.preview-two, .preview-quad { grid-template-columns: repeat(2,1fr); }

/* Widget pick grid in modal */
.db-widget-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.db-widget-pick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 8px; border: none; border-radius: 10px; cursor: pointer; transition: .15s;
  color: #fff;
}
.db-widget-pick-btn:hover { opacity: .85; transform: translateY(-1px); }
.db-widget-pick-btn i  { font-size: 1.4rem; font-style: normal; }
.db-widget-pick-btn b  { font-size: 12.5px; font-weight: 700; }
.db-widget-pick-btn small { font-size: 11px; opacity: .85; }

/* ── BCS SmartOffice Modular Widgets Styling (Image 1 & 2) ────────────────────────── */
.dw-so-card {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: #ffffff; border-radius: 8px;
  overflow: hidden; padding: 6px 10px;
}
.dw-so-title {
  font-size: 13px; font-weight: 700; color: #475569;
  margin-bottom: 6px; flex-shrink: 0;
}

/* Air Quality Card */
.dw-aq-card { justify-content: space-between; }
.dw-aq-grid {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; flex: 1; gap: 6px;
}
.dw-aq-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; text-align: center;
}
.dw-aq-emoji { font-size: 24px; line-height: 1.1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.08)); }
.dw-aq-lbl { font-size: 11px; font-weight: 600; color: #64748b; margin-top: 4px; }
.dw-aq-val { font-size: 20px; font-weight: 800; line-height: 1.2; margin-top: 2px; }
.dw-aq-val small { font-size: 12px; font-weight: 600; margin-left: 1px; }
.c-vgood .dw-aq-val { color: #2563eb; }
.c-good  .dw-aq-val { color: #10b981; }
.c-mod   .dw-aq-val { color: #f59e0b; }
.c-bad   .dw-aq-val { color: #f97316; }
.c-vbad  .dw-aq-val { color: #ef4444; }
.c-oxy   .dw-aq-val { color: #334155; font-size: 16px; }
.dw-aq-icon-oxy {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: #10b981; color: #fff; font-size: 15px;
}

/* Facility & IoT Status Cards */
.dw-fac-grid { display: flex; align-items: center; justify-content: space-around; flex: 1; }
.dw-fac-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dw-fac-icon {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 17px; margin-bottom: 4px;
}
.dw-fac-icon.yellow { background: #fef3c7; color: #d97706; }
.dw-fac-icon.blue   { background: #e0f2fe; color: #0284c7; }
.dw-fac-icon.purple { background: #f3e8ff; color: #7e22ce; }
.dw-fac-lbl { font-size: 11px; font-weight: 600; color: #64748b; }
.dw-fac-val { font-size: 17px; font-weight: 800; color: #1e293b; margin-top: 4px; }
.dw-iot-card .single-iot { flex: 1; }
.dw-iot-card .dw-fac-val { font-size: 22px; }

/* Floor Matrix & Floor Cards */
.dw-floor-matrix-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.dw-floor-matrix-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-shrink: 0;
}
.dw-floor-matrix-head b { font-size: 15px; font-weight: 800; color: #1e293b; }
.dw-floor-matrix-head span { font-size: 12px; color: #64748b; }
.dw-floor-cards-row {
  display: flex; gap: 10px; flex: 1; min-height: 0;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
}
.dw-floor-card {
  flex: 1; min-width: 120px; max-width: 170px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dw-fc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2px 2px;
}
.dw-fc-head strong { font-size: 13px; font-weight: 700; color: #475569; }
.dw-fc-plus {
  width: 20px; height: 20px; border-radius: 4px; border: 1px solid #cbd5e1;
  background: #f8fafc; color: #64748b; font-size: 14px; font-weight: bold;
  cursor: pointer; display: grid; place-items: center; line-height: 1;
}
.dw-fc-plus:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
.dw-fc-tile {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px;
  background: #f8fafc; border-radius: 6px; min-width: 0;
}
.dw-fc-icon {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; flex-shrink: 0;
}
.dw-fc-icon.blue   { background: #e0f2fe; }
.dw-fc-icon.green  { background: #dcfce7; }
.dw-fc-icon.yellow { background: #fef3c7; }
.dw-fc-icon.purple { background: #f3e8ff; }
.dw-fc-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dw-fc-info span { font-size: 10px; color: #64748b; }
.dw-fc-info strong { font-size: 12px; font-weight: 700; color: #1e293b; white-space: nowrap; }
.dw-fc-info strong small { font-size: 10px; color: #64748b; font-weight: 500; }
.dw-fc-tile .badge {
  display: inline-block; font-size: 9.5px; font-weight: 700; padding: 1px 4px;
  border-radius: 4px; width: fit-content;
}
.dw-fc-tile .badge.vgood { background: #dbeafe; color: #1d4ed8; }

/* Batch Control Toolbar */
.dw-batch-bar {
  width: 100%; height: 100%; display: flex; align-items: center;
  overflow-x: auto; gap: 8px; padding: 0 4px;
}
.dw-batch-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.btn-batch {
  padding: 6px 12px; border-radius: 6px; border: 1px solid #cbd5e1;
  background: #ffffff; color: #334155; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: .15s;
}
.btn-batch:hover { background: #f1f5f9; border-color: #94a3b8; }
.btn-batch.on { background: #dcfce7; border-color: #86efac; color: #15803d; }
.btn-batch.on:hover { background: #bbf7d0; }
.btn-batch.off { background: #f1f5f9; color: #64748b; }
.btn-batch.mode.active { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; font-weight: 700; }
.btn-batch.temp { min-width: 48px; text-align: center; }
.btn-batch.timer { background: #faf5ff; border-color: #e9d5ff; color: #7e22ce; }

/* HVAC Unit Cards Grid */
.dw-hvac-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px;
  width: 100%; height: 100%; overflow-y: auto; padding: 2px;
}
.dw-hvac-card {
  background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 10px;
  padding: 8px; display: flex; flex-direction: column; justify-content: space-between;
  min-width: 110px; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: border-color .2s;
}
.dw-hvac-card.on { border-color: #86efac; }
.dw-hc-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.dw-hc-name { font-size: 12px; font-weight: 700; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-hc-more { border: none; background: transparent; color: #64748b; font-size: 14px; cursor: pointer; line-height: 1; }
.dw-hc-main {
  display: flex; align-items: center; justify-content: space-between; margin: 4px 0;
}
.dw-hc-power {
  position: relative; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: #334155; color: #94a3b8; cursor: pointer; display: grid; place-items: center;
  transition: .2s;
}
.dw-hc-power.on {
  background: #22c55e; color: #ffffff; box-shadow: 0 0 10px rgba(34,197,94,.4);
}
.p-icon { font-size: 16px; font-weight: 900; }
.dw-hc-cur { text-align: right; }
.dw-hc-cur small { display: block; font-size: 10px; color: #64748b; }
.dw-hc-cur strong { font-size: 18px; font-weight: 800; color: #1e293b; }
.dw-hc-target {
  display: flex; align-items: center; justify-content: space-between;
  background: #f1f5f9; border-radius: 6px; padding: 2px 4px; margin: 4px 0;
}
.btn-temp-step {
  width: 22px; height: 22px; border-radius: 4px; border: none; background: #ffffff;
  color: #334155; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.btn-temp-step:hover { background: #e2e8f0; }
.target-val { font-size: 14px; font-weight: 700; color: #1e293b; }
.dw-hc-modes { display: flex; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.mode-icon { font-size: 14px; opacity: .4; transition: opacity .2s; }
.mode-icon.active { opacity: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }

/* 4-Grid Environmental Analytics */
.dw-analytics-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; }
.dw-analytics-toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; flex-shrink: 0;
}
.dw-at-dates { display: flex; align-items: center; gap: 4px; }
.dw-date-input {
  border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 8px;
  font-size: 12px; color: #334155; font-family: inherit;
}
.btn-device-pick {
  padding: 5px 10px; border-radius: 6px; border: 1px solid #2563eb;
  background: #2563eb; color: #ffffff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.btn-excel-export {
  padding: 5px 12px; border-radius: 6px; border: 1px solid #cbd5e1;
  background: #ffffff; color: #334155; font-size: 12px; font-weight: 600; cursor: pointer;
  margin-left: auto; transition: .15s;
}
.btn-excel-export:hover { background: #f8fafc; border-color: #94a3b8; }
.dw-analytics-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px;
  flex: 1; min-height: 0;
}
.dw-ag-item {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 6px 8px; display: flex; flex-direction: column; min-height: 120px;
}
.dw-ag-title { font-size: 12px; font-weight: 700; color: #475569; text-align: center; margin-bottom: 2px; flex-shrink: 0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .db-builder.edit-mode { grid-template-columns: 210px 1fr 240px; }
  .dw-hvac-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .db-builder.edit-mode { display: block; }
  .db-palette, .db-points { max-height: 320px; border: 0; border-bottom: 1px solid #e5e7eb; }
  .db-widget-list { display: grid; grid-template-columns: 1fr 1fr; }
  .db-canvas { overflow-x: auto; }
  .db-canvas-fixed, .db-canvas-custom { min-width: 680px; }
  .dw-hvac-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .db-start h2 { font-size: 1.2rem; }
  .dw-kpi-value { font-size: 1.8rem; }
  .dw-analytics-grid { grid-template-columns: 1fr; }
}