/* ==========================================================================
   DashView Pro — control bar (boards/role/filters), export menu, sparklines,
   sales funnel. Additive layer on top of dashboard.css / merged.css; reuses
   the existing design tokens (--paper, --line, --signal, etc.) so it matches
   the rest of the app in both light and dark theme.
   ========================================================================== */

/* ── Control bar: board tabs + role/region/live filters ─────────────────── */
.pro-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}

.board-tabs { display: flex; gap: 4px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; }
.board-tab {
  border: none; background: transparent; color: var(--ink-50); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600; padding: 7px 14px; border-radius: 6px;
  transition: all var(--t-fast);
}
.board-tab:hover { color: var(--ink); }
.board-tab.active { background: var(--signal); color: #191008; }
.board-tab.locked { opacity: .4; cursor: not-allowed; }
.board-tab.locked:hover { color: var(--ink-50); }

.pro-control-right { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.pro-select {
  padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); font-size: var(--fs-xs); color: var(--ink); cursor: pointer;
}

.pro-live-toggle {
  display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-70); cursor: pointer; user-select: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-full); padding: 6px 12px 6px 10px;
}
.pro-live-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.pro-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-30); transition: background var(--t-fast); }
.pro-live-toggle input:checked ~ .pro-live-dot,
.pro-live-toggle input:checked + .pro-live-dot {
  background: var(--emerald, var(--ios-green,#30d158));
  box-shadow: 0 0 0 3px var(--emerald-10, color-mix(in srgb,var(--ios-green,#30d158) 18%,transparent));
  animation: pro-live-pulse 1.4s ease-in-out infinite;
}
@keyframes pro-live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--emerald-10, color-mix(in srgb,var(--ios-green,#30d158) 18%,transparent)); }
  50% { box-shadow: 0 0 0 6px var(--emerald-10, color-mix(in srgb,var(--ios-green,#30d158) 5%,transparent)); }
}

.pro-role-note {
  font-size: var(--fs-xs); color: var(--ink-50); background: var(--signal-10);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px;
  margin: -8px 0 var(--sp-5);
}

/* ── Export dropdown ──────────────────────────────────────────────────── */
.export-menu-wrap { position: relative; }
.export-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); min-width: 200px; padding: 6px; flex-direction: column;
}
.export-menu.open { display: flex; }
.export-menu button {
  text-align: left; background: transparent; border: none; color: var(--ink-70);
  font-size: var(--fs-xs); padding: 9px 10px; border-radius: 6px; cursor: pointer;
}
.export-menu button:hover { background: var(--paper-soft); color: var(--ink); }
.export-menu button:disabled { opacity: .4; cursor: not-allowed; }
.export-menu button:disabled:hover { background: transparent; color: var(--ink-70); }

/* ── KPI sparklines ───────────────────────────────────────────────────── */
.kpi-card { position: relative; }
.kpi-spark-wrap { position: relative; width: 100%; height: 28px; margin-top: auto; flex-shrink: 0; }
.kpi-spark { display: block; width: 100%; height: 100%; opacity: .85; }

/* ── Live "new order" flash ──────────────────────────────────────────── */
@keyframes pro-flash {
  0% { background: var(--signal-10); }
  100% { background: transparent; }
}
.pro-flash { animation: pro-flash 1.1s ease-out; }
.pro-live-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700;
  color: var(--emerald, var(--ios-green,#30d158)); margin-left: 8px;
}
.pro-live-badge .pro-live-dot { width: 6px; height: 6px; background: var(--emerald, var(--ios-green,#30d158)); animation: pro-live-pulse 1.4s ease-in-out infinite; }

/* ── Sales funnel ─────────────────────────────────────────────────────── */
.funnel { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.funnel-row { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 12px; }
.funnel-label { font-size: var(--fs-xs); color: var(--ink-70); font-weight: 600; }
.funnel-track { background: var(--paper-soft); border-radius: var(--r-sm); overflow: hidden; height: 26px; border: 1px solid var(--line); }
.funnel-fill {
  height: 100%; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: flex-end;
  padding-right: 10px; color: #191008; font-size: var(--fs-xs); font-weight: 700;
  transition: width .6s var(--ease);
}
.funnel-meta { font-size: var(--fs-xs); color: var(--ink-30); text-align: right; font-family: var(--f-mono); }

/* ── Role-gated hide ──────────────────────────────────────────────────── */
.pro-hidden-by-role { display: none !important; }

/* ── Projects grid ────────────────────────────────────────────────────── */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); }
.project-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base); }
.project-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--line-strong); }
.project-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: 6px; }
.project-card-head h3 { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.project-card-desc { font-size: var(--fs-xs); color: var(--ink-50); line-height: 1.5; margin-bottom: var(--sp-4); min-height: 36px; }
.project-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); }
.project-card-lang { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-50); }
.project-card-lang-dot { width: 8px; height: 8px; border-radius: 50%; }
.project-card-actions { display: flex; align-items: center; gap: 2px; }
.project-progress-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.project-progress-row .progress-track { flex: 1; width: auto; }
.project-progress-pct { font-size: 11px; font-family: var(--f-mono); color: var(--ink-50); min-width: 32px; text-align: right; }

/* ── Team grid ────────────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5); }
.team-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); transition: box-shadow var(--t-base), border-color var(--t-base); }
.team-card:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.team-avatar-wrap { position: relative; flex-shrink: 0; }
.team-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; }
.team-status-dot { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--paper); }
.team-status-dot.online { background: var(--emerald, var(--ios-green,#30d158)); }
.team-status-dot.away { background: var(--signal); }
.team-status-dot.offline { background: var(--ink-30); }
.team-card-name { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.team-card-role { font-size: var(--fs-xs); color: var(--ink-50); margin: 2px 0 6px; }
.team-card-meta { font-size: 11px; color: var(--ink-30); font-family: var(--f-mono); }

/* ── Reports grid ─────────────────────────────────────────────────────── */
#view-reports { --report-accent: var(--signal, #e8a33d); }
#view-reports .ov-head { align-items: center; padding: 10px 0 20px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
#view-reports .ov-head h1 { margin: 0; font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -.025em; }
#view-reports .ov-head p:not(.eyebrow) { margin: 5px 0 0; color: var(--ink-50); font-size: var(--fs-sm); }
#view-reports .reports-eyebrow { margin: 0 0 5px; color: var(--report-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#view-reports .ov-head-actions { display: flex; align-items: center; gap: 10px; }
.reports-context { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 var(--sp-5); padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--report-accent, var(--signal)); border-radius: var(--r-sm); background: var(--paper); }
.reports-context-mark { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--signal) 14%, transparent); color: var(--signal); font-size: 12px; font-weight: 800; }
.reports-context p { margin: 0; color: var(--ink-50); font-size: var(--fs-xs); line-height: 1.6; }
.reports-context strong { color: var(--ink); }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-5); }
.report-card { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 24px -22px rgba(0,0,0,.55); transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); break-inside: avoid; }
.report-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.report-card-icon { width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.report-card-title { margin: 0; font-size: var(--fs-sm); font-weight: 750; color: var(--ink); line-height: 1.4; }
.report-card-desc { margin: 0; font-size: var(--fs-xs); color: var(--ink-50); line-height: 1.6; flex: 1; }
.report-card-meta { margin: auto 0 0; font-size: 10px; color: var(--ink-50); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.report-card-actions { display: flex; gap: 8px; padding-top: 11px; border-top: 1px solid var(--line); }
.report-card-actions .btn { flex: 1; }
@media (max-width: 640px) {
  #view-reports .ov-head { align-items: flex-start; }
  #view-reports .ov-head-actions { width: 100%; }
  #view-reports .ov-head-actions .btn { width: 100%; }
  .reports-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) { .report-card { transition: none; } .report-card:hover { transform: none; } }

/* ── Audit / task tables: status text colors already via .status-pill ──── */
.dash-table td.mono { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--ink-30); }

/* ── Settings page ────────────────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-5); align-items: start; }
.settings-panel { display: flex; flex-direction: column; gap: 12px; }
.settings-field-row { display: flex; flex-direction: column; gap: 5px; }
.settings-field-row label { font-size: var(--fs-xs); color: var(--ink-50); font-weight: 600; }
.settings-note { font-size: var(--fs-xs); color: var(--ink-50); line-height: 1.6; }
.settings-note code, .settings-point-list code { background: var(--paper-alt); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-family: var(--f-mono); font-size: 11px; color: var(--signal-bright); }
.settings-point-list { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; }
.settings-point-list li { font-size: var(--fs-xs); color: var(--ink-70); line-height: 1.55; padding-left: 16px; position: relative; }
.settings-point-list li::before { content: '›'; position: absolute; left: 0; color: var(--signal); font-weight: 800; }
.settings-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.kpi-card.c-purple .kpi-icon { background: rgba(139,92,246,.12); color: #8b5cf6; }
.kpi-card.c-teal .kpi-icon { background: rgba(45,166,178,.12); color: #2da6b2; }

@media (max-width: 720px) {
  .pro-control-bar { flex-direction: column; align-items: stretch; }
  .pro-control-right { justify-content: space-between; }
  .funnel-row { grid-template-columns: 90px 1fr 70px; }
}

/* ── Print / PDF export ──────────────────────────────────────────────── */
@media print {
  .dash-side, .dash-top, .pro-control-bar, .pro-role-note, .ov-head-actions,
  .export-menu-wrap, #cmdBtn, #notifBtn, #themeToggle { display: none !important; }
  .dash-shell { display: block !important; }
  .dash-content { padding: 0 !important; }
  .panel, .kpi-card { break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; }
  body { background: #fff !important; color: #111 !important; }
}

/* ---- Overview v2: professional header, KPI cards, grid ---- */
#view-overview .ov-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:6px 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line,rgba(148,155,190,.18))}
#view-overview .ov-head h1{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:0}
#view-overview .ov-head p{margin:4px 0 0;color:var(--muted,#8b93a7);font-size:13.5px}
#view-overview .ov-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#view-overview .date-range{display:inline-flex;padding:3px;border-radius:10px;border:1px solid var(--line,rgba(148,155,190,.2));background:var(--surface,transparent)}
#view-overview .date-range button{border:0;background:none;color:inherit;padding:6px 12px;border-radius:7px;font:inherit;font-size:12.5px;cursor:pointer;transition:background .15s}
#view-overview .date-range button.active{background:var(--signal,#8b5cf6);color:#fff;font-weight:600;box-shadow:0 6px 16px -8px var(--signal,#8b5cf6)}
#view-overview .kpi-card,#view-overview .ov-card,#view-overview .odoo-live-card{border-radius:16px;border:1px solid var(--line,rgba(148,155,190,.18));box-shadow:0 14px 34px -22px rgba(0,0,0,.55);transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
#view-overview .kpi-card:hover,#view-overview .ov-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--signal,#8b5cf6) 40%,transparent);box-shadow:0 22px 44px -22px rgba(0,0,0,.6)}
#view-overview .kpi-value{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#view-overview .kpi-delta.up{color:#10b981}#view-overview .kpi-delta.down{color:#ef4444}
#view-overview .ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
#view-overview,#view-overview .ov-head,#view-overview #ovKpis,#view-overview .ov-grid{min-width:0;max-width:100%}
#view-overview .ov-grid>.panel{min-width:0;max-width:100%}
#view-overview .ov-grid .chart-header,#view-overview .ov-grid .chart-header>div{min-width:0}
#view-overview .ov-grid .chart-subtitle{overflow-wrap:anywhere}
#view-overview .ov-grid .olx-chart-body,#view-overview .ov-grid .ov-canvas{width:100%;min-width:0}
#view-overview .odoo-live-status{padding:5px 12px;border-radius:999px;border:1px solid var(--line,rgba(148,155,190,.2));font-size:12px}
@media (max-width:640px){#view-overview .ov-head{align-items:flex-start}#view-overview .ov-head-actions{width:100%}}
@media (prefers-reduced-motion:reduce){#view-overview .kpi-card,#view-overview .ov-card{transition:none}}

html[data-density=compact] #view-overview .ov-grid,html[data-density=compact] #view-overview #ovKpis{gap:10px}html[data-density=compact] #view-overview .kpi-card,html[data-density=compact] #view-overview .ov-card{padding:12px}html[data-density=compact] body{font-size:14px}

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body.dash-body * { visibility: hidden !important; }
  #view-reports, #view-reports * { visibility: visible !important; }
  #view-reports { display: block !important; position: absolute !important; inset: 0 auto auto 0 !important; width: 100% !important; padding: 0 !important; background: #fff !important; color: #111 !important; }
  #view-reports .ov-head { padding: 0 0 10px !important; margin: 0 0 12px !important; }
  #view-reports .ov-head h1, #view-reports .report-card-title { color: #111 !important; }
  #view-reports .ov-head p, #view-reports .report-card-desc, #view-reports .report-card-meta, #view-reports .reports-context p { color: #444 !important; }
  #view-reports .ov-head-actions, #view-reports .report-card-actions { display: none !important; }
  #view-reports .reports-context, #view-reports .report-card { background: #fff !important; border-color: #bbb !important; box-shadow: none !important; }
  #view-reports .reports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8mm !important; }
  #view-reports .report-card { padding: 5mm !important; }
  .dash-shell { display: block !important; }
}