/* ============================================================
   DASHBOARD HEAD ACTIONS — print button
   ============================================================ */
.btn-icon-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #E5E7EB;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-end;
  margin-left: 4px;
}
.btn-icon-pill:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #FBBF24;
  transform: translateY(-1px);
}
.btn-icon-pill span:first-child { font-size: 15px; }

.head-actions { display: flex; align-items: flex-end; gap: 8px; }

.btn-ghost.warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #FBBF24;
}
.btn-ghost.warn:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
}

.realtime-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34D399;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px;
}
.rt-dot {
  width: 7px; height: 7px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10B981;
  animation: pulse 1.4s ease-in-out infinite;
}

/* ============================================================
   BUDGET vs ACTUAL BAR COMPARISON (Realtime)
   ============================================================ */
.bva-card {
  background: rgba(17, 20, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 24px 28px;
  backdrop-filter: blur(20px);
  animation: slideUp 0.5s cubic-bezier(.2, .9, .3, 1) both;
  margin-bottom: 8px;
}
.bva-grid {
  display: flex; flex-direction: column;
  gap: 22px;
}
.bva-row {
  display: flex; flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  animation: slideUp 0.5s cubic-bezier(.2, .9, .3, 1) both;
}
.bva-row:last-child { border-bottom: none; padding-bottom: 0; }
.bva-row-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
}
.bva-row-title {
  display: flex; align-items: center; gap: 12px;
}
.bva-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 15px; color: white; font-weight: 700;
  box-shadow: 0 6px 16px var(--cat-glow);
  flex-shrink: 0;
}
.bva-name { font-size: 15px; font-weight: 700; color: #F3F4F6; }
.bva-meta { font-size: 12px; color: #9CA3AF; margin-top: 3px; }
.bva-meta strong { font-weight: 700; }
.bva-sep { opacity: 0.4; margin: 0 6px; }
.bva-row-remain { text-align: right; }
.bva-remain-label { font-size: 10px; color: #6B7280; text-transform: uppercase; letter-spacing: 1px; }
.bva-remain-val { font-size: 18px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }

.bva-bar-stack { display: flex; flex-direction: column; gap: 4px; }
.bva-bar {
  display: grid;
  grid-template-columns: 38px 1fr 110px;
  gap: 12px;
  align-items: center;
}
.bva-bar-label {
  font-size: 10px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: right;
}
.bva-bar-amount {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #F3F4F6;
}
.bva-budget .bva-bar-amount { color: #FBBF24; }
.bva-actual .bva-bar-amount { color: #E5E7EB; }
.bva-bar-track {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  overflow: hidden;
}
.bva-bar-track.full {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.2));
  border: 1px dashed rgba(245, 158, 11, 0.35);
}
.bva-bar-fill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  transition: width 0.9s cubic-bezier(.2, .9, .3, 1);
  overflow: hidden;
}
.bva-bar-shine {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  width: 60px;
  animation: shine 2.2s linear infinite;
}
.bva-overflow {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 9px;
  font-weight: 700;
  color: white;
  background: #EF4444;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 10mm 14mm;
  }

  /* Force light/printable colors */
  html, body {
    background: white !important;
    color: #111827 !important;
  }
  body[data-mood],
  body[data-surface],
  body[data-energy] { background: white !important; }

  /* Hide chrome */
  .topbar,
  .bg-fx,
  .twk-panel,
  .role-badge-wrap,
  .proj-switcher,
  .meta-pill,
  .modal-overlay,
  .toast,
  .no-print,
  .btn-icon-pill,
  .print-btn,
  .tabs,
  .head-actions,
  .filter-bar,
  .section-link,
  .submit-btn,
  .btn-primary,
  .ot-actions,
  .bs-mini-btn,
  .bs-row-actions,
  .bs-edit-actions,
  .bs-add-trigger,
  .role-menu,
  .proj-menu,
  .ot-form-card,
  .form-panel,
  .preview-panel { display: none !important; }

  /* Page layout */
  .app { padding-bottom: 0 !important; }
  .main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .page-head { margin-bottom: 16px !important; flex-direction: row !important; }
  .page-eyebrow { color: #9CA3AF !important; font-size: 9px !important; }
  .page-title { font-size: 22px !important; color: #111827 !important; }
  .page-sub { color: #4B5563 !important; font-size: 12px !important; }

  /* Header brand info for print */
  body::before {
    content: "BUILDBUDGET · Boatpattana Construction · " attr(data-print-date);
    display: block;
    font-size: 9px;
    color: #6B7280;
    letter-spacing: 1.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 16px;
    text-transform: uppercase;
    font-weight: 600;
  }

  /* All cards: white background, black borders */
  .hero-card,
  .activity-card,
  .cat-card,
  .entries-table,
  .ot-stat,
  .ot-card,
  .craft-summary-card,
  .movement-card,
  .tl-card,
  .trend-chart-card,
  .bva-card,
  .budget-sheet,
  .audit-card {
    background: white !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #111827 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .hero-card::before, .hero-card::after { display: none !important; }
  .cat-card-bg { display: none !important; }
  .cat-card::before { display: none !important; }

  /* Text colors */
  .hero-label,
  .meta-key,
  .donut-label,
  .head-stat-label,
  .cat-row-label,
  .cat-id,
  .progress-meta,
  .act-time-d,
  .act-note,
  .act-count,
  .tl-time,
  .tl-bot,
  .tl-note,
  .tl-workers,
  .td-note,
  .cs-meta,
  .ot-stat-label,
  .ot-detail-row span,
  .ot-reason-label,
  .ot-amount-label,
  .bs-cat-count,
  .bs-money.muted,
  .audit-time,
  .audit-user,
  .bva-meta,
  .bva-remain-label,
  .bva-bar-label,
  .tc-sub,
  .tc-kpi-label,
  .field-suffix,
  .foot-label { color: #6B7280 !important; }
  .hero-amount,
  .meta-val,
  .head-stat-value,
  .cat-name,
  .cat-row-value,
  .donut-pct,
  .act-time-h,
  .act-craft,
  .tl-date,
  .cs-name,
  .cs-num,
  .ot-stat-num,
  .foot-num,
  .td-workers,
  .td-amount,
  .bs-cat-name,
  .bs-money.strong,
  .audit-detail,
  .bva-name,
  .bva-remain-val,
  .bva-bar-amount,
  .tc-title,
  .tc-kpi-value { color: #111827 !important; }
  .progress-pct,
  .cs-amount { color: #B45309 !important; }
  .act-amount,
  .tl-amount { color: #B91C1C !important; }
  .bva-bar-track.full { border: 1px dashed #B45309 !important; background: #FEF3C7 !important; }
  .bva-bar-track { background: #F3F4F6 !important; border-color: #E5E7EB !important; }
  .bva-bar-shine { display: none !important; }

  /* Progress bars: print friendly */
  .progress-track,
  .cs-bar,
  .mc-bar,
  .bs-pct-bar {
    background: #F3F4F6 !important;
    border-color: #E5E7EB !important;
  }

  /* Donut chart — keep colors */
  .donut svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .progress-fill, .progress-shine { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .bva-bar-fill, .cs-bar-fill, .mc-bar-seg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* Section headings */
  .section-head h2 {
    color: #111827 !important;
    font-size: 14px !important;
    border-bottom: 1px solid #D1D5DB;
    padding-bottom: 4px;
    margin-bottom: 8px;
  }
  .section-head { margin: 16px 0 8px !important; }
  .section-tools { display: none !important; }

  /* Cat grid → 2 cols for print */
  .cat-grid.four { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .cat-grid.four .cat-card-inner { padding: 12px !important; }
  .cat-card { page-break-inside: avoid; }

  /* Trend chart */
  .trend-chart-card { padding: 16px !important; page-break-inside: avoid; }
  .tc-tooltip { display: none !important; }
  .tc-axis-text { fill: #6B7280 !important; }
  .tc-budget-label { fill: #B45309 !important; }
  .tc-legend { border-top-color: #E5E7EB !important; }
  .tc-legend-item { background: #F9FAFB !important; border-color: #E5E7EB !important; color: #374151 !important; }
  .tcl-dash { border-top-color: #B45309 !important; }

  /* Activity / table */
  .activity-row { border-bottom-color: #E5E7EB !important; padding: 10px 16px !important; }
  .table-head, .bs-head { background: #F9FAFB !important; color: #4B5563 !important; border-bottom-color: #D1D5DB !important; }
  .table-row, .bs-item-row { border-bottom-color: #E5E7EB !important; }
  .cat-chip { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* Page break helpers */
  .hero-card { page-break-after: avoid; }
  .bva-card { page-break-before: auto; }
  .section-head { page-break-after: avoid; }

  /* Force tabular numeric alignment */
  .bva-bar-amount, .head-stat-value, .meta-val, .hero-amount, .td-amount, .tl-amount {
    font-variant-numeric: tabular-nums !important;
  }

  /* Hide unused tabs/pages by default; only print Dashboard contents */
  .log-page, .ot-page, .report-page, .budget-page { display: none !important; }
}

/* ============================================================
   THEME OVERRIDES — BVA card for paper mood
   ============================================================ */
body[data-mood="paper"] .bva-card {
  background: rgba(255, 253, 248, 0.85);
  border-color: rgba(31, 41, 55, 0.1);
}
body[data-mood="paper"] .bva-name { color: #0F172A; }
body[data-mood="paper"] .bva-meta { color: #6B7280; }
body[data-mood="paper"] .bva-remain-label { color: #6B7280; }
body[data-mood="paper"] .bva-row { border-bottom-color: rgba(31, 41, 55, 0.08); }
body[data-mood="paper"] .bva-bar-track { background: rgba(31, 41, 55, 0.05); border-color: rgba(31, 41, 55, 0.06); }
body[data-mood="paper"] .bva-bar-track.full { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.3); }
body[data-mood="paper"] .bva-bar-label { color: #6B7280; }
body[data-mood="paper"] .bva-bar-amount { color: #0F172A; }
body[data-mood="paper"] .bva-budget .bva-bar-amount { color: #DC2626; }
body[data-mood="paper"] .btn-icon-pill { background: rgba(255, 255, 255, 0.7); border-color: rgba(31, 41, 55, 0.1); color: #1F2937; }
body[data-mood="paper"] .btn-icon-pill:hover { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.3); color: #DC2626; }
body[data-mood="paper"] .realtime-pill { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #047857; }
body[data-mood="paper"] .btn-ghost.warn { background: rgba(220, 38, 38, 0.05); border-color: rgba(220, 38, 38, 0.25); color: #DC2626; }
body[data-mood="paper"] .btn-ghost.warn:hover { background: rgba(220, 38, 38, 0.12); }