/* keedian-ui.css — shared topbar / period bar / settings modal / site picker */

/* Topbar period bar */
#k-period-bar{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
#k-period-bar .k-prd{padding:3px 9px;border-radius:5px;border:1px solid #e5e7eb;background:#fff;font-size:11px;color:#374151;cursor:pointer}
#k-period-bar .k-prd:hover{background:#f9fafb}
#k-period-bar .k-prd.active{background:#2563eb;color:#fff;border-color:#2563eb}
#k-period-bar .k-prd.k-apply{background:#10b981;color:#fff;border-color:#10b981}
#k-period-bar .k-date{padding:3px 6px;border-radius:5px;border:1px solid #e5e7eb;font-size:11px;color:#374151;background:#fff}

#k-period-label{font-size:11px;color:#6b7280}

/* Cross-link button (Open site dashboard / Back to portfolio) */
.k-cross{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;background:#eff6ff;color:#1d4ed8;font-size:11px;text-decoration:none;border:1px solid #bfdbfe;font-weight:500}
.k-cross:hover{background:#dbeafe}
.k-cross svg{width:11px;height:11px}

/* Settings gear button */
#k-settings-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;color:#6b7280}
#k-settings-btn:hover{background:#f3f4f6;color:#111827}
#k-settings-btn svg{width:14px;height:14px}

/* Site picker dropdown */
#k-site-picker{position:relative;display:inline-block}
.k-site-btn{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;font-size:12px;color:#111827;font-weight:500;cursor:pointer}
.k-site-btn:hover{background:#f9fafb}
.k-site-btn svg{color:#6b7280}
.k-site-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.08);min-width:260px;z-index:1000;padding:4px 0}
.k-site-opt{padding:7px 12px;font-size:11px;color:#374151;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px}
.k-site-opt:hover{background:#f3f4f6}
.k-site-opt.active{background:#eff6ff;color:#1d4ed8;font-weight:500}
.k-site-opt.soon{color:#9ca3af;cursor:not-allowed}
.k-site-opt.soon:hover{background:transparent}
.k-site-soon{font-size:9px;background:#f3f4f6;color:#6b7280;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:0.04em}

/* Section-level period-type badges
 * Period   = responds to topbar selector
 * Live     = current snapshot
 * Cumulative = since installation
 * Monthly  = always monthly grain (does not respond to selector)
 */
.k-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:8px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;line-height:1.3;white-space:nowrap}
.k-badge::before{content:'';width:5px;height:5px;border-radius:50%;display:inline-block}
.k-badge-period{background:#dbeafe;color:#1e40af}
.k-badge-period::before{background:#2563eb}
.k-badge-live{background:#dcfce7;color:#15803d}
.k-badge-live::before{background:#16a34a}
.k-badge-cum{background:#ede9fe;color:#6b21a8}
.k-badge-cum::before{background:#7c3aed}
.k-badge-monthly{background:#ffedd5;color:#9a3412}
.k-badge-monthly::before{background:#ea580c}
.k-badge-trend{background:#ccfbf1;color:#0f766e}
.k-badge-trend::before{background:#0d9488}

/* Section header that combines slabel + badge */
.k-section-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.k-section-hdr .slabel{margin:0}
.k-section-hdr-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Optional: legend strip explaining the badges (small, dismissible) */
.k-badge-legend{display:flex;gap:10px;align-items:center;padding:8px 12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:10px;font-size:10px;color:#6b7280;flex-wrap:wrap}
.k-badge-legend .k-bl-item{display:inline-flex;align-items:center;gap:4px}
.k-badge-legend .k-bl-close{margin-left:auto;background:none;border:none;color:#9ca3af;cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.k-badge-legend .k-bl-close:hover{color:#111827}

/* Settings modal */
.k-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.5);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.k-modal{background:#fff;border-radius:12px;width:520px;max-width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.k-modal-hdr{padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:flex-start;justify-content:space-between}
.k-modal-ttl{font-size:15px;font-weight:600;color:#111827}
.k-modal-sub{font-size:11px;color:#6b7280;margin-top:2px}
.k-x{background:none;border:none;font-size:24px;color:#9ca3af;cursor:pointer;line-height:1;padding:0 4px}
.k-x:hover{color:#111827}
.k-modal-body{padding:18px 20px;overflow-y:auto}
.k-row{margin-bottom:18px}
.k-row:last-child{margin-bottom:0}
.k-lbl{display:block;font-size:11px;font-weight:600;color:#111827;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:7px}
.k-seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.k-seg button{padding:6px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;font-size:12px;color:#374151;cursor:pointer}
.k-seg button:hover{background:#f9fafb}
.k-seg button.active{background:#2563eb;color:#fff;border-color:#2563eb}
.k-hint{font-size:10px;color:#9ca3af;margin-top:6px}
.k-modal-ftr{padding:14px 20px;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;gap:8px;background:#f9fafb}
.k-btn-primary{padding:7px 16px;border-radius:6px;border:none;background:#2563eb;color:#fff;font-size:12px;font-weight:500;cursor:pointer}
.k-btn-primary:hover{background:#1d4ed8}
.k-btn-ghost{padding:7px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;color:#6b7280;font-size:11px;cursor:pointer}
.k-btn-ghost:hover{background:#f3f4f6;color:#111827}

/* Info tooltip — used on every chart and KPI to explain what it is */
.k-info{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#e5e7eb;color:#6b7280;font-size:9px;font-weight:600;cursor:help;margin-left:4px;font-style:normal;line-height:1;vertical-align:middle;position:relative;flex-shrink:0;border:none;font-family:sans-serif}
.k-info:hover{background:#3b82f6;color:#fff}
.k-info::before{content:'?';display:block;line-height:1}
.k-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:8px 11px;border-radius:6px;font-size:11px;font-weight:400;line-height:1.5;width:280px;white-space:normal;text-align:left;letter-spacing:0;text-transform:none;z-index:1000;opacity:0;pointer-events:none;transition:opacity 0.12s;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.k-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#111827}
.k-tip b{color:#a5f3fc;font-weight:500;display:inline-block;min-width:60px}
.k-tip .k-tip-src{display:inline-block;background:rgba(59,130,246,0.3);color:#bfdbfe;padding:1px 6px;border-radius:3px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px}
.k-info:hover .k-tip,.k-info:focus .k-tip{opacity:1}
.k-info{outline:none}

/* Heat map for Energy tab */
.k-heatmap{display:inline-grid;grid-template-columns:auto repeat(24, minmax(18px, 1fr));gap:2px;width:100%;font-size:9px;color:#6b7280}
.k-heatmap .hm-corner,.k-heatmap .hm-hour,.k-heatmap .hm-day{display:flex;align-items:center;justify-content:center;padding:2px 0}
.k-heatmap .hm-hour{font-size:8px;color:#9ca3af}
.k-heatmap .hm-day{justify-content:flex-end;padding-right:6px;color:#374151;font-weight:500;font-size:10px}
.k-heatmap .hm-cell{aspect-ratio:1;border-radius:2px;cursor:default;position:relative;min-height:14px;border:1px solid rgba(0,0,0,0.02)}
.k-heatmap .hm-cell:hover{outline:2px solid #2563eb;outline-offset:-1px}
.k-heatmap-legend{display:flex;align-items:center;gap:6px;font-size:10px;color:#6b7280;margin-top:8px}
.k-heatmap-legend .hm-scale{display:flex;height:8px;width:160px;border-radius:2px;overflow:hidden}
.k-heatmap-legend .hm-scale > div{flex:1}

/* Signal toggle chips — telemetry chart */
.k-sig-bar{display:flex;flex-wrap:wrap;gap:5px}
.k-sig{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;font-size:11px;color:#9ca3af;cursor:pointer;user-select:none;font-weight:500;transition:all 0.12s}
.k-sig:hover{background:#f9fafb;color:#374151}
.k-sig.active{background:#fff;color:#111827;border-color:transparent;box-shadow:0 0 0 1.5px var(--k-sig-color)}
.k-sig .k-sig-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;flex-shrink:0;transition:background 0.12s}
.k-sig.active .k-sig-dot{background:var(--k-sig-color)}

/* Peer ranking strip — used in Energy KPI card */
.k-rank-bar{position:relative;height:6px;background:#e5e7eb;border-radius:3px;margin:6px 0 4px;overflow:visible}
.k-rank-fill{position:absolute;height:100%;background:linear-gradient(90deg,#10b981 0%,#f59e0b 60%,#ef4444 100%);border-radius:3px;opacity:0.35}
.k-rank-marker{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:#111827;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,0.3);transform:translateX(-50%)}
.k-rank-meta{display:flex;justify-content:space-between;font-size:9px;color:#9ca3af;margin-top:2px}

/* Command modal — control panel for an asset */
.k-cmd-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:5px;border:1px solid #e5e7eb;background:#fff;font-size:11px;color:#374151;cursor:pointer;font-weight:500;white-space:nowrap}
.k-cmd-btn:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.k-cmd-btn svg{width:11px;height:11px}

.k-cmd-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.55);z-index:9998;display:none;align-items:center;justify-content:center;padding:20px;overflow:auto}
.k-cmd-overlay.open{display:flex}
.k-cmd-modal{background:#fff;border-radius:12px;width:540px;max-width:100%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,0.25)}
.k-cmd-hdr{padding:14px 18px;border-bottom:1px solid #e5e7eb;display:flex;align-items:flex-start;justify-content:space-between;background:#f9fafb}
.k-cmd-ttl{font-size:14px;font-weight:600;color:#111827;display:flex;align-items:center;gap:8px}
.k-cmd-sub{font-size:11px;color:#6b7280;margin-top:2px}
.k-cmd-body{padding:16px 18px;overflow-y:auto;flex:1}
.k-cmd-section{margin-bottom:18px}
.k-cmd-section:last-child{margin-bottom:0}
.k-cmd-sect-ttl{font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.k-cmd-sched{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:10px 12px;font-size:11px;color:#1e3a8a}
.k-cmd-sched-line{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.k-cmd-sched b{color:#1e3a8a}
.k-cmd-sched-link{background:none;border:none;color:#2563eb;font-size:11px;cursor:pointer;padding:0;font-weight:500;text-decoration:underline}
.k-cmd-sched-link:hover{color:#1d4ed8}
.k-cmd-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.k-cmd-row-lbl{font-size:12px;color:#374151;font-weight:500;flex:0 0 auto;min-width:110px}
.k-cmd-seg{display:inline-flex;gap:0;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden}
.k-cmd-seg button{padding:5px 11px;border:none;background:#fff;font-size:11px;color:#6b7280;cursor:pointer;border-right:1px solid #e5e7eb}
.k-cmd-seg button:last-child{border-right:none}
.k-cmd-seg button:hover{background:#f9fafb;color:#111827}
.k-cmd-seg button.active{background:#2563eb;color:#fff}
.k-cmd-seg button:disabled{cursor:not-allowed;opacity:0.5}
.k-cmd-sp{display:flex;align-items:center;gap:6px}
.k-cmd-sp-btn{width:28px;height:28px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;font-size:14px;font-weight:600;color:#374151;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.k-cmd-sp-btn:hover{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.k-cmd-sp-val{font-size:18px;font-weight:600;color:#111827;min-width:60px;text-align:center}
.k-cmd-hold{font-size:11px;color:#6b7280;display:flex;align-items:center;gap:6px;margin-top:4px}
.k-cmd-hold select{padding:3px 6px;border:1px solid #e5e7eb;border-radius:5px;background:#fff;font-size:11px;color:#374151}
.k-cmd-readings{background:#f9fafb;border-radius:8px;padding:10px 12px;display:flex;gap:18px;flex-wrap:wrap}
.k-cmd-reading{font-size:11px;color:#6b7280}
.k-cmd-reading b{display:block;color:#111827;font-size:14px;font-weight:600;margin-top:1px}
.k-cmd-locked{background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:8px 12px;font-size:11px;color:#78350f;display:flex;align-items:center;gap:6px}
.k-cmd-audit{padding:10px 14px;background:#f9fafb;border-top:1px solid #e5e7eb;font-size:11px;color:#6b7280;display:flex;flex-direction:column;gap:3px}
.k-cmd-audit-line{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.k-cmd-audit-line .k-ack{color:#10b981;font-weight:500}
.k-cmd-audit-line .k-pending{color:#f59e0b;font-weight:500}
.k-cmd-ftr{padding:12px 18px;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;gap:8px}
.k-cmd-ftr .k-cmd-warn{font-size:10px;color:#9ca3af;flex:1}
.k-cmd-btn-cancel{padding:7px 14px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:12px;cursor:pointer;font-weight:500}
.k-cmd-btn-cancel:hover{background:#f9fafb}
.k-cmd-btn-send{padding:7px 14px;border-radius:6px;border:none;background:#2563eb;color:#fff;font-size:12px;cursor:pointer;font-weight:500}
.k-cmd-btn-send:hover{background:#1d4ed8}
.k-cmd-btn-send:disabled{opacity:0.5;cursor:not-allowed}

/* Toast on send command */
.k-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 18px;border-radius:8px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,0.25);z-index:10000;opacity:0;transition:opacity 0.2s,transform 0.2s;display:flex;align-items:center;gap:8px}
.k-toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.k-toast svg{width:14px;height:14px;color:#10b981}

@media (max-width:768px){
  .k-cmd-modal{width:100%}
  .k-cmd-row{flex-direction:column;align-items:flex-start}
}

/* Topbar layout helpers used by both dashboards */
.k-topbar-extras{display:flex;align-items:center;gap:10px;margin-left:auto}
.k-topbar-extras > *{flex-shrink:0}

@media (max-width:768px){
  .k-modal{width:100%}
  #k-period-bar{gap:3px}
  #k-period-bar .k-prd{padding:3px 7px;font-size:10px}
  .k-topbar-extras{gap:6px;flex-wrap:wrap}
  .k-site-btn .k-site-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ========================================================================== *
 *  KEEDIAN DESIGN SYSTEM — tokens & component overrides
 *
 *  Source: tutenlabs-dev/keedian-platform-guide / 04-design-system/
 *  Applied to: layout, surfaces, status chips, buttons, typography.
 *  This block lives AFTER the inline <style> in each dashboard so it can
 *  override the legacy styles. To roll back the design-system look, remove
 *  this block.
 * ========================================================================== */

:root {
  /* Core palette */
  --k-color-black:           #000000;
  --k-color-white:           #FFFFFF;
  --k-color-app-bg:          #EEF2FF;
  --k-color-brand-active-bg: #CFDEFF;
  --k-color-brand-blue:      #3372FF;
  --k-color-navy-deep:       #002475;
  --k-color-border-soft:     #B89CF9;

  /* Neutral greys used for borders / muted text */
  --k-color-border:    #E5E7EB;
  --k-color-muted:     #5A5A5A;
  --k-color-disabled:  #9E9E9E;
  --k-color-divider:   #F3F4F6;

  /* Status palette (chip / pill) */
  --k-status-green-bg:  #D4F4E2;  --k-status-green-text:  #1A7A45;
  --k-status-blue-bg:   #D0E8FF;  --k-status-blue-text:   #1A5FA8;
  --k-status-purple-bg: #E8DAFF;  --k-status-purple-text: #6B3BB5;
  --k-status-pink-bg:   #FFD6E7;  --k-status-pink-text:   #B5195A;
  --k-status-gray-bg:   #E8E8E8;  --k-status-gray-text:   #5A5A5A;
  --k-status-orange-bg: #FFE5CC;  --k-status-orange-text: #A04A00;
  --k-status-yellow-bg: #FFF7CC;  --k-status-yellow-text: #7A6200;

  /* Chart sequential palette */
  --k-chart-1:  #487CD8;
  --k-chart-2:  #7BBFE2;
  --k-chart-3:  #8C7AD9;
  --k-chart-4:  #68BBA8;
  --k-chart-5:  #C6A9DB;
  --k-chart-6:  #7FA1C3;
  --k-chart-7:  #73D8DE;
  --k-chart-8:  #C57FA8;
  --k-chart-9:  #E3A9A0;
  --k-chart-10: #BFCFF3;

  /* Typography */
  --k-font-sans: 'Funnel Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --k-font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
body { font-family: var(--k-font-sans); background: var(--k-color-app-bg); padding: 20px; }

/* Numeric values use Roboto Mono to distinguish from narrative text */
.kval, .fval,
[data-fmt-money], [data-fmt-money-compact],
[data-fmt-temp-f], [data-fmt-temp-range-f],
[data-fmt-number], [data-fmt-percent],
[data-fmt-area-sqft],
[data-kpi],
.k-cmd-sp-val, .k-cmd-readings b,
.k-rank-meta {
  font-family: var(--k-font-mono);
  font-feature-settings: 'tnum';  /* tabular numerals for column alignment */
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { background: var(--k-color-white); }

/* Sidebar: white background, dark stroke icons, brand-active highlight */
.sidebar { background: var(--k-color-white); border-right: 1px solid var(--k-color-border); }
.sidebar .nav { opacity: 1; }
.sidebar .nav svg { stroke: var(--k-color-muted); }
.sidebar .nav:hover { background: var(--k-color-brand-active-bg); }
.sidebar .nav:hover svg { stroke: var(--k-color-brand-blue); }
.sidebar .nav.active { background: var(--k-color-brand-active-bg); }
.sidebar .nav.active svg { stroke: var(--k-color-brand-blue); }
.sidebar .logo { background: var(--k-color-black); color: var(--k-color-white); }

/* Main content surface stays light */
.main { background: var(--k-color-app-bg); }

/* Topbar */
.topbar { background: var(--k-color-white); border-bottom: 1px solid var(--k-color-border); }

/* Tab bar: black active indicator, brand-blue hover, no decorative color */
.tab-bar { background: var(--k-color-white); border-bottom: 1px solid var(--k-color-border); }
.tab { color: var(--k-color-muted); }
.tab:hover { color: var(--k-color-brand-blue); }
.tab.active { color: var(--k-color-black); border-bottom-color: var(--k-color-black); font-weight: 500; }

/* Cards and panels: white surface, soft border, no heavy shadow */
.kcard, .fcard, .card, .chart-card, .tbl-wrap {
  background: var(--k-color-white);
  border: 1px solid var(--k-color-border);
  border-radius: 8px;
  box-shadow: none;
}

/* Primary text */
.kval, .fval, .tbl-ttl, .chart-ttl, .kpi-value, .kttl b, h1, h2, h3 {
  color: var(--k-color-black);
}

/* ── Chips and pills — full pill radius, status palette ─────────────────── */
.chip, .pill {
  border-radius: 100px;
  padding: 3px 11px;
  border: none;
  font-weight: 500;
  font-family: var(--k-font-sans);
}

.c-ok,    .p-ok     { background: var(--k-status-green-bg);  color: var(--k-status-green-text); }
.c-blue,  .p-blue   { background: var(--k-status-blue-bg);   color: var(--k-status-blue-text); }
.c-purple,.p-purple { background: var(--k-status-purple-bg); color: var(--k-status-purple-text); }
.c-err,   .p-err    { background: var(--k-status-pink-bg);   color: var(--k-status-pink-text); }
.c-warn,  .p-warn   { background: var(--k-status-yellow-bg); color: var(--k-status-yellow-text); }
.c-orange           { background: var(--k-status-orange-bg); color: var(--k-status-orange-text); }
.c-gray,  .p-gray   { background: var(--k-status-gray-bg);   color: var(--k-status-gray-text); }
.c-teal             { background: var(--k-status-green-bg);  color: var(--k-status-green-text); }

/* ── Subtabs (By site / By asset) — outline button pattern ──────────────── */
.subtab {
  border-radius: 8px;
  background: transparent;
  color: var(--k-color-black);
  border: 1px solid var(--k-color-black);
}
.subtab:hover { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }
.subtab.active { background: var(--k-color-black); color: var(--k-color-white); border-color: var(--k-color-black); }

/* ── Filter selects — neutral surface ───────────────────────────────────── */
.fsel { border: 1px solid var(--k-color-border); background: var(--k-color-white); color: var(--k-color-black); border-radius: 8px; }
.fsel:hover { border-color: var(--k-color-black); }

/* ── Buttons defined in keedian-ui — use design-system tokens ───────────── */

/* Period selector pills (in topbar) — outline pattern with active black */
#k-period-bar .k-prd {
  border-radius: 8px;
  background: transparent;
  color: var(--k-color-black);
  border: 1px solid var(--k-color-border);
}
#k-period-bar .k-prd:hover { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }
#k-period-bar .k-prd.active { background: var(--k-color-black); color: var(--k-color-white); border-color: var(--k-color-black); }

/* k-seg (segmented control) — same pattern */
.k-seg button { background: transparent; color: var(--k-color-black); border-color: var(--k-color-border); }
.k-seg button:hover { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }
.k-seg button.active { background: var(--k-color-black); color: var(--k-color-white); border-color: var(--k-color-black); }

/* Signal chips (telemetry multi-signal) */
.k-sig { border-radius: 100px; }
.k-sig.active { border-color: transparent; }

/* Cross-link (portfolio ↔ site) as outline button */
.k-cross {
  background: transparent;
  color: var(--k-color-black);
  border: 1px solid var(--k-color-black);
  border-radius: 8px;
  font-weight: 500;
  padding: 5px 12px;
}
.k-cross:hover { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }

/* Settings gear button — outline */
#k-settings-btn { background: transparent; color: var(--k-color-black); border: 1px solid var(--k-color-black); border-radius: 8px; }
#k-settings-btn:hover { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }

/* Command button — outline */
.k-cmd-btn { background: transparent; color: var(--k-color-black); border: 1px solid var(--k-color-black); border-radius: 8px; padding: 4px 11px; font-weight: 500; }
.k-cmd-btn:hover { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }

/* Site picker dropdown */
.k-site-btn { border: 1px solid var(--k-color-black); border-radius: 8px; color: var(--k-color-black); }
.k-site-btn:hover { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }
.k-site-opt.active { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); }

/* Modal buttons — contained black / outline */
.k-cmd-btn-send,
.k-btn-primary {
  background: var(--k-color-black);
  border-color: var(--k-color-black);
  color: var(--k-color-white);
  border-radius: 8px;
  font-weight: 500;
}
.k-cmd-btn-send:hover,
.k-btn-primary:hover { background: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }

.k-cmd-btn-cancel,
.k-btn-ghost {
  background: transparent;
  color: var(--k-color-black);
  border: 1px solid var(--k-color-black);
  border-radius: 8px;
  font-weight: 500;
}
.k-cmd-btn-cancel:hover,
.k-btn-ghost:hover { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }

/* Device / asset selector buttons (HVAC, Refrigeration, Aux, Energy meters) */
.dev-btn { background: transparent; color: var(--k-color-black); border: 1px solid var(--k-color-border); border-radius: 8px; }
.dev-btn:hover { background: var(--k-color-brand-active-bg); color: var(--k-color-brand-blue); border-color: var(--k-color-brand-blue); }
.dev-btn.active { background: var(--k-color-black); color: var(--k-color-white); border-color: var(--k-color-black); }

/* ── Period bar label (in topbar) ───────────────────────────────────────── */
#k-period-label { color: var(--k-color-black); font-family: var(--k-font-mono); }

/* ── Settings modal — minor polish ──────────────────────────────────────── */
.k-modal { border-radius: 8px; }
.k-seg button { border-radius: 0; }
.k-seg button:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.k-seg button:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* ── Subtle text greys ──────────────────────────────────────────────────── */
.kttl, .flbl, .ksub, .sub, .chart-sub, .tbl-sub { color: var(--k-color-muted); }

/* ── In-context spec: ⓘ info button (bottom-right of cards/charts) + modal ── */
/* Cards/chart-cards become positioning contexts so the button anchors bottom-right. */
.kcard, .fcard, .chart-card, .tbl-wrap { position: relative; }
.k-infobtn{
  position:absolute; bottom:8px; right:8px;
  width:18px; height:18px; border-radius:50%;
  border:1px solid #d1d5db; background:#fff; color:#6b7280;
  font-size:11px; font-weight:700; font-style:italic; font-family:Georgia,'Times New Roman',serif;
  line-height:1; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0.55; transition:opacity .12s, background .12s, color .12s, border-color .12s; z-index:5;
}
.k-infobtn:hover{ opacity:1; background:#2563eb; color:#fff; border-color:#2563eb; }
/* Chart cards put the button at the top-right corner of the header instead (more room) */
.chart-card > .k-infobtn, .tbl-wrap > .k-infobtn{ top:10px; right:12px; bottom:auto; }

/* Info modal — reuses .k-overlay / .k-modal; wider + scrollable for long specs.
   Header fixed, body scrolls (min-height:0 lets the flex child actually shrink
   so overflow-y engages instead of the modal clipping at 90vh). */
.k-info-modal{ width:600px; }
.k-info-modal > .k-modal-hdr{ flex-shrink:0; }
.k-info-modal > #k-info-body{ flex:1 1 auto; min-height:0; }
.k-info-sec{ padding:0 0 14px; }
.k-info-sec + .k-info-sec{ border-top:1px solid #f3f4f6; padding-top:14px; }
.k-info-sec-lbl{
  font-size:10px; font-weight:600; color:#2563eb;
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:5px;
}
.k-info-sec-body{ font-size:13px; line-height:1.55; color:#374151; }
.k-info-sec-body code{ background:#f3f4f6; padding:1px 5px; border-radius:4px; font-size:12px; }
.k-info-sec-body ul{ margin:4px 0 0 18px; }
.k-info-sec-body pre{ background:#f9fafb; border:1px solid #e5e7eb; border-radius:6px; padding:8px 10px; font-size:11px; overflow-x:auto; margin-top:4px; }