/* Shared screen typography. Printed reports keep their own styles. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./fonts/plus-jakarta-sans-latin-variable.woff2") format("woff2");
}

@media screen {
  :root {
    --ui-font: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
    --ui-text: 14px;
    --ui-caption: 13px;
    --ui-input: 14px;
    --ui-page-title: 22px;
  }

  /* Layered important declarations take precedence over legacy component
     overrides without adding increasingly specific selectors. */
  @layer portal-typography {
    body, button, input, select, textarea, dialog {
      font-family: var(--ui-font) !important;
      font-optical-sizing: auto;
    }
    body { font-size: var(--ui-text) !important; font-weight: 400; line-height: 1.5; }
    p { font-size: var(--ui-text) !important; font-weight: 400 !important; line-height: 1.5 !important; }
    h1, .team-heading h2, .attendance-portal-heading h2, .portal-mobile-menu-bar h2 {
      font-size: var(--ui-page-title) !important;
      font-weight: 700 !important;
      line-height: 1.3 !important;
      letter-spacing: -.02em !important;
    }
    h2, h3, h4 { font-weight: 600 !important; line-height: 1.3 !important; }
    h2 { font-size: 19px !important; }
    h3, h4 { font-size: 16px !important; }
    .overview-card-head h2, .overview-structure-role h3 { font-size: 16px !important; }
    .operations-pending h2 { font-size: 20px !important; }
    small, label, .eyebrow, .team-eyebrow, .overview-eyebrow,
    .cell-sub, .team-table-hint, .team-calculation-note, .warehouse-entry-hint,
    .overview-card-head p, .overview-card-footer, .overview-address,
    .overview-person-copy, .overview-summary-label, .overview-activity-copy p,
    .operations-detail-heading > div > span, .operations-pending p,
    .arrival-photo-copy small, .attendance-server-time, .ing-muted, .login-footer {
      font-size: var(--ui-caption) !important;
      line-height: 1.5 !important;
    }
    small, .cell-sub { font-weight: 400 !important; }
    label { font-weight: 500 !important; }
    button, .primary, .outline-btn, .danger-btn, .edit-btn,
    .arrival-photo-actions a, .overview-link, .overview-text-button {
      font-size: var(--ui-text) !important;
      font-weight: 600 !important;
      line-height: 1.5 !important;
    }
    .nav-item, .portal-settings-trigger, .portal-settings-popover > button,
    .portal-inline-submenu > button, .portal-mobile-menu-sheet [data-mobile-nav] {
      font-size: var(--ui-caption) !important;
      font-weight: 500 !important;
      line-height: 1.5 !important;
    }
    .nav-item.active, [aria-current="page"] { font-weight: 600 !important; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea {
      font-size: var(--ui-input) !important;
      font-weight: 400 !important;
      line-height: 1.5 !important;
    }
    input::placeholder, textarea::placeholder { font-size: inherit !important; font-weight: 400 !important; }
    table { font-size: var(--ui-text) !important; font-variant-numeric: tabular-nums; }
    td { font-size: var(--ui-text) !important; font-weight: 400 !important; line-height: 1.5 !important; }
    th { font-size: var(--ui-caption) !important; font-weight: 600 !important; line-height: 1.5 !important; }
    td b, td strong { font-size: var(--ui-text) !important; font-weight: 600 !important; }
    td small, td .cell-sub { font-size: var(--ui-caption) !important; font-weight: 400 !important; }
    .overview-stat strong, .overview-warehouse-tile strong, .stat-card b { font-weight: 700 !important; }
    .brand-copy b, .brand-copy small { font-size: var(--ui-caption) !important; }
    .app-shell .brand-copy b { font-size: 16px !important; line-height: 1.25 !important; white-space: normal !important; letter-spacing: 0 !important; }
    /* Keep close controls and visual symbols distinct from text buttons. */
    .overview-dialog-head > button, .warehouse-access-dialog > header > button,
    .attendance-photo-close, .input-wrap .input-symbol { font-size: 22px !important; }
  }

  @media (max-width:760px) {
    :root { --ui-input: 16px; --ui-page-title: 20px; }
    /* Longer Plus Jakarta Sans labels wrap inside existing mobile cards and controls. */
    .overview-link { white-space: normal; }
    .overview-card-head { flex-wrap: wrap; }
    .volunteer-warehouse-draft-head { flex-wrap: wrap; }
  }
}