/* Hara One global compact typography
   Screen-only so printable documents keep their print sizing. */
@media screen {
  :root {
    --hara-compact-body: 12px;
    --hara-compact-control: 11.2px;
    --hara-compact-table: 10.75px;
    --hara-compact-small: 10px;
    --hara-compact-h1: clamp(15px, 1.15vw, 18px);
    --hara-compact-h2: clamp(13px, .95vw, 15px);
    --hara-compact-h3: clamp(12px, .85vw, 14px);
    --hara-compact-metric: clamp(16px, 1.6vw, 22px);
  }
  html {
    font-size: var(--hara-compact-body) !important;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-size: .9rem !important;
    line-height: 1.34 !important;
  }

  p, li, label, summary, figcaption,
  .muted, .sub, .subtitle, .description, .helper, .hint, .meta,
  .page-subtitle, .hdr-sub, .card-subtitle, .section-subtitle {
    font-size: .84rem !important;
    line-height: 1.32 !important;
  }

  h1, .page-title, .modal-title, .hdr-titles h1, .intent-header .hdr-titles h1,
  .pl-toolbar h1, .dashboard-title, .dash-title {
    font-size: var(--hara-compact-h1) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  h2, .section-title, .card-title, .panel-title, .selector-title,
  .modal-section h2, .content-title {
    font-size: var(--hara-compact-h2) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  h3, h4, .mini-title, .chart-title, .modal-section h3, .uploads-section h3 {
    font-size: var(--hara-compact-h3) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  table, th, td, .table, .table-min, .excel, .rfq-table, .skeleton-table,
  .data-table, .expenses, #masterTable {
    font-size: var(--hara-compact-table) !important;
    line-height: 1.22 !important;
  }

  th, td {
    padding-top: .42rem !important;
    padding-bottom: .42rem !important;
  }

  input, select, textarea, button, .btn, .mini-nav-btn, .quick-btn,
  .link-btn, .filter-chip, .calendar-button, .submit-btn {
    font-size: var(--hara-compact-control) !important;
    line-height: 1.18 !important;
  }

  small, .small, .badge, .chip, .pill, .intent-chip, .tenant-chip,
  .status-pill, .stat-title, .stat-sub, .label, .help-text {
    font-size: var(--hara-compact-small) !important;
    line-height: 1.18 !important;
  }

  .stat-value, .metric-value, .summary-value, .count, .dash-alert-num,
  .expense-banner .value, .kpi-value, .total-value, .amount-value {
    font-size: var(--hara-compact-metric) !important;
    line-height: 1.05 !important;
  }

  .modal, .modal-content, .modal-box, .modal-card, [role="dialog"] {
    font-size: .86rem !important;
  }

  .navbar, #navbar, .topbar, .sidebar, .side-nav, .nav, .menu {
    font-size: .86rem !important;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --hara-compact-body: 11.5px;
    --hara-compact-control: 11px;
    --hara-compact-table: 10.5px;
    --hara-compact-small: 9.8px;
    --hara-compact-h1: 15.5px;
    --hara-compact-h2: 13.5px;
    --hara-compact-h3: 12px;
    --hara-compact-metric: 18px;
  }}

/* Hara One global compact page density */
@media screen {
  .page-container, .page-wrapper, .content-container, .main-content {
    padding: 10px 12px !important;
  }

  .rfq-section, .report-grid, .top-controls, .top-controls-row,
  .dashboard-grid, .cards-grid, .filters-grid, .form-grid {
    gap: 10px !important;
  }

  .rfq-column, .section-box, .table-container, .search-container, .stats-box,
  .card, .panel, .dashboard-card, .dash-card, .batch-card {
    padding: 10px 12px !important;
    border-radius: 7px !important;
  }

  .table-container, .table-wrapper, .table-wrap {
    margin-top: 12px !important;
  }

  table th, table td, .rfq-table th, .rfq-table td,
  .skeleton-table th, .skeleton-table td, #masterTable th, #masterTable td {
    padding: 4px 6px !important;
  }

  input, select, textarea {
    padding: 5px 7px !important;
  }

  button, .btn, .submit-btn, .mini-nav-btn, .quick-btn, .small-btn {
    padding: 5px 8px !important;
  }

  .modal-section, .modal-card, .modal-box, .modal-content .section-box {
    padding: 9px 11px !important;
    margin-bottom: 8px !important;
  }
}

/* Scroll safety after compact UI overrides */
@media screen {
  html, body { overflow-y:auto !important; }
  html.embedded-page, body.embedded-page { height:auto !important; min-height:100% !important; overflow-y:auto !important; }
  body.embedded-page #mainContent { overflow:visible !important; }
}