/* UI-01: screen-only typography layer. Loaded after styles.css. */
@font-face {
  font-family: "Inter CRM";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ui-01-inter-400.ttf") format("truetype");
}

@font-face {
  font-family: "Inter CRM";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/ui-01-inter-500.ttf") format("truetype");
}

@font-face {
  font-family: "Inter CRM";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ui-01-inter-600.ttf") format("truetype");
}

@media screen {
  body {
    font-family: "Inter CRM", "Segoe UI", Arial, sans-serif;
    font-weight: 400;
  }

  .brand strong,
  .user-box strong,
  .nav-item,
  .nav-submenu button,
  .btn,
  .link-button,
  .name-link,
  .page-size-field,
  .page-indicator,
  .record-card-tabs button,
  .role-task strong,
  .commissioning-section-title strong,
  .commissioning-actions strong,
  .commissioning-activity button span {
    font-weight: 500 !important;
  }

  .field > span,
  .filter-field > span,
  .request-form .field > span,
  .pending-note-field > span,
  .checkbox-field > span,
  label > span,
  .eyebrow,
  .dashboard-kpi-title span,
  .dashboard-kpi-card small,
  .commissioning-kpis span,
  .commissioning-kpis small,
  .commissioning-actions span,
  .commissioning-section-title span,
  .commissioning-activity small,
  .commissioning-hero-total span {
    font-weight: 500 !important;
  }

  table th,
  .security-table-head {
    font-weight: 500 !important;
  }

  .topbar h1 {
    font-size: 26px !important;
    font-weight: 500 !important;
  }

  body:not(.commissioning-standalone):has(#mobileView.active) .topbar h1 {
    font-size: clamp(20px, 1.75vw, 24px) !important;
  }

  body.commissioning-standalone:has(#financeView.active) .topbar h1 {
    font-size: 22px !important;
  }

  .panel-header h2,
  .request-form-panel .panel-header h2,
  .settlement-card-header h2,
  .tool-card-header h3,
  .tools-page-hero h2,
  .dash-card h2,
  .commissioning-section-title h3 {
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  .dash-card h2 {
    font-size: 15px !important;
  }

  .dialog-header h2,
  .form-section h3,
  .record-side-card h3 {
    font-weight: 500 !important;
  }

  #recordDialog .dialog-header h2 {
    font-size: 24px !important;
    font-weight: 500 !important;
  }

  #recordDialog .record-card-main h3,
  #recordDialog .record-card-main strong {
    font-size: 18px !important;
    font-weight: 500 !important;
  }

  #recordDialog .record-card-main span {
    font-weight: 500 !important;
  }

  #recordDialog .record-card-main small {
    font-weight: 400 !important;
  }

  .dashboard-kpi-card strong {
    font-size: 24px;
    font-weight: 400 !important;
  }

  body:not(.commissioning-standalone).owner-mode:has(#dashboardView.active) .hero-tabs .dashboard-kpi-card strong,
  body:not(.commissioning-standalone).admin-mode:has(#dashboardView.active) .hero-tabs .dashboard-kpi-card strong {
    font-size: clamp(20px, 1.45vw, 24px);
  }

  body:not(.commissioning-standalone):is(.partner-mode, .subpartner-mode, .b2b-mode, .salesman-mode, .qr_partner-mode):has(#dashboardView.active) .hero-tabs .dashboard-kpi-card strong {
    font-size: clamp(20px, 1.35vw, 23px);
  }

  .dashboard-kpi-title strong {
    font-weight: 500 !important;
  }

  .status-badge,
  .status-dot,
  .source-badge,
  .nav-badge,
  .unread-count,
  .nav-icon::after,
  .dashboard-kpi-refreshing {
    font-weight: 600 !important;
  }

  .commissioning-activity button strong {
    font-weight: 600 !important;
  }

  .login-card h1 {
    font-size: 26px;
    font-weight: 500;
  }

  .login-card .eyebrow {
    font-weight: 500;
  }

  .commissioning-hero h2 {
    font-size: 26px;
    font-weight: 500;
  }

  .commissioning-hero-total strong {
    font-size: 24px;
    font-weight: 400;
  }

  .commissioning-kpis strong {
    font-weight: 400;
  }
}

@media screen and (max-width: 760px) {
  .topbar h1 {
    font-size: clamp(20px, 4vw, 24px) !important;
  }

  #recordDialog .dialog-header h2 {
    font-size: 22px !important;
  }

  .login-card h1 {
    font-size: 24px;
  }

  .commissioning-hero h2 {
    font-size: 24px;
  }
}