:root {
  --eg-card-radius: 0.5rem;
  --eg-font-min: 12px;
  --eg-caption-size: 10px;
  --eg-section-title-size: 24px;
  --eg-content-line-height: 1.5;
}

html,
body,
#app {
  line-height: var(--eg-content-line-height);
}

#app h2,
#app .section-title {
  font-size: var(--eg-section-title-size) !important;
  line-height: var(--eg-content-line-height) !important;
}

#app :is(
  small,
  figcaption,
  time,
  .account-caption,
  .ai-photo-eyebrow,
  .calculation-note,
  .card-kicker,
  .checksheet-matrix-footnote,
  .checksheet-started-note,
  .checksheet-table-label-note,
  .closure-note,
  .context-trail-kicker,
  .create-note,
  .customer-footnote,
  .doc-kicker,
  .eyebrow,
  .footnote-field,
  .hint,
  .issued-kicker,
  .library-card-kicker,
  .nav-asset-hint,
  .nav-caption,
  .pdf-approve-note,
  .profile-install-hint,
  .report-kicker,
  .report-title-meta,
  .section-kicker,
  .send-note,
  .version-panel-note
) {
  font-size: var(--eg-caption-size) !important;
  line-height: var(--eg-content-line-height) !important;
}

#app :is(
  .app-update-restart-card,
  .auth-card,
  .checksheet-card,
  .customer-panel,
  .dashboard-panel,
  .deleted-project-card,
  .deleted-project-card-assets,
  .evidence-preview-panel,
  .gauge-card,
  .illustrative-panel,
  .inspection-set-card,
  .kind-card,
  .library-card,
  .metric-card,
  .notification-center-panel,
  .photo-preview-panel,
  .camera-panel,
  .record-summary,
  .state-card,
  .stat-tile,
  .thermal-card,
  .version-panel
),
#app .record-summary dl > div {
  border: 0 !important;
  border-radius: var(--eg-card-radius) !important;
}

#app .project-detail .doc-table th {
  font-size: 12px !important;
}

#app .project-detail .doc-table td {
  font-size: 14px !important;
}

#app .project-detail .doc-table :is(
  time,
  .status-detail,
  .report-job-status,
  .defect-badge,
  .defect-mobile-label
) {
  font-size: 12px !important;
}

#app .state-card.selected {
  background: #1c3a38;
  box-shadow: none !important;
}

#app .content button:not(.icon):not(.evidence-icon-button):not(.evidence-thumb):not(.evidence-remove) {
  font-size: 16px !important;
}

@media (min-width: 1101px) {
  #app .content:has(.operations-dashboard) {
    min-height: 0;
    padding-bottom: 1.25rem !important;
    overflow: hidden !important;
  }
}

@media (max-width: 700px) {
  #app .content {
    padding-top: 1rem;
    padding-right: 0.75rem !important;
    padding-bottom: 1.5rem;
    padding-left: 0.75rem !important;
    font-size: 12px;
  }

  #app .content h1,
  #app .content :is(
    .management-heading h1,
    .dashboard-heading h1,
    .customer-heading h1,
    .inspection-heading h1,
    .profile-heading h1,
    .report-title h1,
    .record-heading h1,
    .product-intro h1,
    .doc-title
  ) {
    font-size: 24px !important;
    line-height: var(--eg-content-line-height) !important;
  }

  #app .content h2,
  #app .content .section-title {
    font-size: 18px !important;
    line-height: var(--eg-content-line-height) !important;
  }

  #app .content h3 {
    font-size: 16px !important;
    line-height: var(--eg-content-line-height) !important;
  }

  #app .content :is(p, li, td, th, label, input, select, textarea, button) {
    font-size: 12px;
  }

  #app .content button:not(.icon):not(.evidence-icon-button):not(.evidence-thumb):not(.evidence-remove),
  #app .content .action:not(.icon),
  #app .content .k-button {
    min-height: 32px !important;
    padding: .3rem .6rem !important;
    font-size: 12px !important;
  }

  #app .content button.icon,
  #app .content .action.icon,
  #app .content .action.compact.icon {
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
  }

  #app :is(.management-heading, .dashboard-heading, .customer-heading, .inspection-heading, .profile-heading) {
    margin-bottom: 0.75rem !important;
  }

  #app :is(.management-heading, .dashboard-heading, .customer-heading, .profile-heading) > p:last-child,
  #app :is(.metric-card, .stat-tile, .state-card) small,
  #app .dashboard-panel > header > span,
  #app .activity-panel :is(p, time),
  #app .notification-center-subtitle {
    display: none !important;
  }

  #app .operations-dashboard {
    gap: 0.75rem;
  }

  #app .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem;
  }

  #app .metric-card {
    min-height: 7rem;
    padding: 0.65rem;
    justify-content: flex-start;
    gap: 0.35rem;
  }

  #app .metric-card span {
    min-height: 3em;
    font-size: 10px !important;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }

  #app .metric-card strong {
    margin-top: auto;
    font-size: 32px !important;
    line-height: 1.5 !important;
  }

  #app .illustrative-panel {
    display: none !important;
  }

  #app .dashboard-detail-grid {
    gap: 0.75rem;
  }

  #app .dashboard-panel > header {
    padding: 0.75rem;
  }

  #app .activity-panel li {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    padding: 0.65rem 0.75rem;
  }

  #app .dashboard-panel td[data-label="Serial number"],
  #app .dashboard-panel td small {
    display: none !important;
  }

  #app .stat-grid,
  #app .report-metrics,
  #app .report-states,
  #app .record-summary dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: initial;
    gap: 0.5rem;
    overflow: visible;
  }

  #app :is(.stat-tile, .state-card) {
    min-height: 5.5rem;
    padding: 0.65rem;
  }

  #app :is(.stat-tile, .state-card) strong {
    font-size: 24px !important;
  }

  #app :is(.table-toolbar, .library-card-actions, .action-buttons, .editor-actions) {
    gap: 0.5rem;
  }

  #app .library-card:has(.library-card-photo) {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    min-height: 9.5rem;
  }

  #app .library-card:has(.library-card-photo) .library-card-photo {
    width: 100%;
    height: 100%;
    min-height: 9.5rem;
  }

  #app .library-card:has(.library-card-photo) .library-card-body {
    align-content: start;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.7rem;
  }

  #app .library-card:has(.library-card-photo) .library-card-body h2 {
    font-size: 16px !important;
  }

  #app .library-card:has(.library-card-photo) .library-card-actions {
    margin-top: 0.35rem;
    padding-top: 0.4rem;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  #app main:has(.operations-dashboard) {
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #app .content:has(.operations-dashboard) {
    display: block;
    flex: none;
    height: auto;
    min-height: min-content;
    overflow: visible !important;
  }

  #app .workspace-layout:has(.operations-dashboard) {
    display: block;
    flex: none;
    min-height: auto;
    overflow: visible !important;
  }

  #app .operations-dashboard {
    min-height: max-content;
    overflow: visible;
  }
}

@media (max-width: 400px) {
  #app .top-tagline-short {
    display: none;
  }
}

#app main:has(.asset-detail) {
  min-height: 0;
  overflow: hidden !important;
}

#app .workspace-layout:has(.asset-detail),
#app .content:has(.asset-detail),
#app .management:has(.asset-detail) {
  display: flex !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#app .workspace-layout:has(.asset-detail) {
  flex-direction: row;
}

#app .content:has(.asset-detail),
#app .management:has(.asset-detail) {
  height: auto !important;
  flex-direction: column;
}

#app .content:has(.asset-detail) {
  padding-bottom: .75rem !important;
}

#app .asset-detail > .record-summary {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  #app main:has(.asset-detail) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #app .workspace-layout:has(.asset-detail),
  #app .content:has(.asset-detail),
  #app .management:has(.asset-detail),
  #app .asset-detail {
    display: flex !important;
    flex: none !important;
    height: auto !important;
    min-height: min-content !important;
    overflow: visible !important;
  }

  #app .asset-detail {
    flex-direction: column !important;
  }

  #app .asset-detail .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: initial;
    gap: .4rem;
    overflow: visible;
  }

  #app .asset-detail .stat-tile {
    min-height: 4.75rem;
    padding: .5rem;
  }

  #app .asset-detail .stat-tile strong {
    font-size: 18px !important;
  }

  #app .asset-detail .record-summary .record-title h2 {
    font-size: 16px !important;
  }

  #app .asset-detail .record-summary .record-title p {
    font-size: 10px !important;
  }
}