/* Shared screen typography. Receipt and report printing keep their own layout. */
@media screen {
  :root { --muted: #526873; }
  body { font-size: 16px; line-height: 1.55; }
  h1 { font-size: 32px; line-height: 1.25; letter-spacing: -.6px; }
  h2, .card-head h2, .team-card h2, .pf-summary .card-head h2,
  .ng-step-title h2, .ng-section-heading h2, .ng-user-roles h2,
  .clarity-hub-card h2, .clarity-help-row h2 { font-size: 21px; line-height: 1.4; }
  h3, .record-columns h3 { font-size: 18px; }
  small { font-size: 14px; }

  /* Navigation and shared components. */
  .sidebar { overflow-y: auto; }
  .sidebar>* { flex-shrink: 0; }
  .nav-item { font-size: 16px; padding: 12px 13px; }
  .nav-label, .eyebrow, .clarity-card-caption { font-size: 13px; letter-spacing: .6px; }
  .nav-label { color: var(--muted); }
  .brand small, .sidebar-bottom, .breadcrumb, .local-pill,
  .help-button span, .app-footer { font-size: 14px; }
  .breadcrumb, .app-footer { color: var(--muted); }
  .subtitle, .clarity-intro, .clarity-patients>p, .clarity-hub-card p,
  .task p, .step p, .guide-section p, .guide-section ul, .todo-card p,
  .start-card p, .loading p, .empty p { font-size: 16px; line-height: 1.65; }
  .notice, .trial-banner, .card-head p, .chart-foot, .table-summary,
  .code, .list-total, .detail-stat span, .detail-grid dt,
  .clarity-steps p, .clarity-first-time, .clarity-patient-count,
  .clarity-day-strip span, .clarity-day-strip small, .clarity-daily-status,
  .clarity-vanguard, .clarity-recent summary>span, .clarity-help-row p {
    font-size: 14px; line-height: 1.6;
  }
  .code { color: var(--muted); }
  .task h3, .bar-top, .bar-top strong, .clarity-steps strong,
  .clarity-config-group>h2, .clarity-recent summary,
  .todo-card .action, .period { font-size: 16px; }
  .kpi-label { font-size: 15px; color: var(--muted); }
  .kpi-description { font-size: 14px; line-height: 1.6; }
  .kpi-value { font-size: 32px; }
  .badge { font-size: 13px; line-height: 1.5; padding: 4px 9px; }
  .badge.blue { color: #425984; }
  .btn, .row-actions .btn, .clarity-primary, .card-action { font-size: 16px; min-height: 44px; }
  .small-link, .table-link, .text-button, .page-back { font-size: 15px; line-height: 1.5; }
  .table-link, .text-button { padding-top: 8px; padding-bottom: 8px; }
  .card-head { gap: 16px; flex-wrap: wrap; }
  .team-card .card-head p { max-width: 680px; }
  .row-actions, .form-actions, .production-tabs { flex-wrap: wrap; gap: 12px; }

  /* Data tables and forms. */
  table, td, .ng-queue-table td, .ng-expenses-table td,
  .ng-recurring-card td, .pf-table td, .ng-daily-series td { font-size: 15px; line-height: 1.55; }
  th, .pf-table th, .ng-daily-series th { font-size: 14px; font-weight: 600; color: #49606c; }
  td, th { padding-top: 16px; padding-bottom: 16px; }
  td .secondary, .pf-table small { font-size: 14px; color: var(--muted); line-height: 1.55; }
  .table-wrap { max-width: 100%; overflow-x: auto; }
  input, select, textarea, .line-editor input, .line-editor select { font-size: 16px; line-height: 1.5; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { min-height: 44px; }
  input::placeholder, textarea::placeholder { color: #617680; opacity: 1; }
  .field label, .line-editor label { font-size: 15px; line-height: 1.5; }
  .field .hint { font-size: 14px; line-height: 1.6; }
  .form-grid { gap: 20px; }
  .field { min-width: 0; }
  .search svg { top: 50%; transform: translateY(-50%); }
  .form-error, .toast { font-size: 16px; }
  .calc-preview, .detail-grid { font-size: 16px; }
  .detail-stat strong { font-size: 22px; }
  dialog { width: min(780px, 94vw); }
  .modal-head h2 { font-size: 24px; line-height: 1.35; }
  .modal-head p { font-size: 15px; line-height: 1.6; max-width: 650px; }
  .modal-head .icon-button { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .form-actions .btn { white-space: normal; }

  /* Fast checkout: the patient, service and payment stay visually distinct. */
  .ng-checkout-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .ng-cashier-main, .ng-payment-panel, .ng-section { min-width: 0; }
  .ng-cash-state, .ng-step-title p, .ng-helper, .ng-patient-result span,
  .ng-selected-patient span:not(.ng-person-icon), .ng-selected-patient small,
  .ng-optional>summary, .ng-service-result small, .ng-empty-cart,
  .ng-cart-name small, .ng-cart-doctor small, .ng-payment-help,
  .ng-payment-remainder, .ng-success p, .ng-muted,
  .ng-form-copy, .ng-waiting-summary, .ng-discount-entry>p,
  .ng-discount-error, .ng-discount-medical { font-size: 14px; line-height: 1.6; }
  .ng-empty-cart { color: var(--muted); }
  .ng-selected-patient small { color: #41634f; }
  .ng-step-title>span { width: 34px; min-width: 34px; height: 34px; font-size: 16px; }
  .ng-patient-tabs button, .ng-range-chips button, .ng-patient-result,
  .ng-selected-patient strong, .ng-service-result strong, .ng-service-result>b,
  .ng-cart-name strong, .ng-cart-subtotal, .ng-change, .ng-success strong {
    font-size: 16px; line-height: 1.5;
  }
  .ng-patient-tabs { flex-wrap: wrap; }
  .ng-patient-tabs button, .ng-range-chips button { min-height: 44px; }
  .ng-service-search input { font-size: 16px !important; }
  .ng-service-results { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
  .ng-service-result { padding: 14px; gap: 12px; }
  .ng-service-groups button { font-size: 15px; min-height: 44px; }
  .ng-service-groups button small { font-size: 14px; }
  .ng-manual-link, .ng-split-link, .ng-success>.small-link,
  .ng-success>.btn, .ng-row-actions .table-link { font-size: 15px; }
  .ng-cart-line { grid-template-columns: minmax(0, 1fr) 64px 100px 40px; gap: 12px; padding: 18px 0; }
  .ng-qty input { width: 64px; font-size: 16px; }
  .ng-remove { min-width: 40px; min-height: 40px; }
  .ng-cart-doctor, .ng-payment-row .field label, .ng-tendered label,
  .ng-total>span, .ng-discount-entry .field label { font-size: 15px; }
  .ng-cart-doctor select, .ng-payment-row .field input,
  .ng-payment-row .field select, .ng-tendered input, .ng-discount-entry input { font-size: 16px; }
  .ng-payment-row { grid-template-columns: minmax(0, 1fr) 110px; }
  .ng-payment-row:has(>.ng-remove) { padding-top: 34px; }
  .ng-payment-row>.ng-remove { top: -8px; right: 0; }
  .ng-total>strong { font-size: 36px; line-height: 1.3; }
  .ng-charge { font-size: 16px !important; min-height: 50px; }
  .ng-line-discount>summary, .ng-line-discount>summary strong,
  .ng-discount-summary>div { font-size: 14px; }
  .ng-line-discount>summary { padding: 9px 0; }
  .ng-empty-state, .ng-form-error, .ng-refund-total { font-size: 16px; }
  .ng-queue-filters select, .ng-expense-filters input, .ng-expense-filters select { font-size: 16px; }

  /* Administration, expenses and daily activity. */
  .ng-range-chips, .pf-presets { flex-wrap: wrap; }
  .ng-date-range label, .pf-date-range label { font-size: 14px; }
  .ng-date-range input, .pf-date-range input { font-size: 16px; }
  .ng-date-range .btn, .pf-presets button { font-size: 15px; min-height: 44px; }
  .ng-live-caption, .ng-live-caption>span:last-child,
  .ng-data-quality, .ng-data-quality p, .ng-section-heading p,
  .ng-metric>small, .ng-mini-stats span, .ng-demand-row small,
  .ng-demand-label>span, .ng-report-definitions p, .ng-expense-guide p,
  .ng-recurring-generate p, .ng-check-label small, .ng-payment-history,
  .ng-payment-history p, .ng-cash-flow p { font-size: 14px; line-height: 1.6; }
  .ng-data-quality>strong, .ng-metric>span, .ng-demand-label,
  .ng-obligation-item span, .ng-report-definitions>summary,
  .ng-expense-guide span, .ng-expense-guide strong, .ng-check-label strong,
  .ng-cash-flow span { font-size: 15px; line-height: 1.55; }
  .ng-metric>strong { font-size: 30px; line-height: 1.3; }
  .ng-mini-stats strong { font-size: 28px; }
  .ng-metric>span, .ng-metric>small, .ng-mini-stats span,
  .ng-demand-row small, .ng-expense-guide p, .ng-recurring-generate p,
  .ng-check-label small, .ng-cash-flow p { color: var(--muted); }
  .ng-metric-primary>span, .ng-metric-primary>small { color: #e1f2ed; }
  .ng-payment-history { color: #476351; }
  .ng-data-quality p { color: #755c2e; }
  .ng-rank { font-size: 14px; width: 28px; min-width: 28px; height: 28px; }
  .ng-small-btn { font-size: 15px !important; min-height: 44px; }
  .ng-obligations>.btn, .ng-recurring-generate strong,
  .ng-recurring-generate input, .ng-recurring-generate .btn,
  .ng-user-roles p, .ng-loading { font-size: 16px; }
  .ng-expense-filters, .ng-recurring-generate { flex-wrap: wrap; }
  .ng-user-roles p { line-height: 1.6; }
  .ng-team-shortcuts .row-actions { justify-content: flex-start; }

  /* Catalog, group percentages, patient records and settings. */
  .catalog-status button, .catalog-status button small, .catalog-help,
  .catalog-count, .catalog-pending, .catalog-archived, .catalog-activation,
  .owner-catalog .card-head p { font-size: 14px; line-height: 1.6; }
  .catalog-status button { min-height: 44px; }
  .catalog-history summary { font-size: 16px; }
  .catalog-row-actions .table-link { min-height: 44px; }
  .pf-performer-field label { font-size: 15px; }
  .pf-performer-field select { font-size: 16px; }
  .pf-performer-field small, .pf-optional summary, .pf-activation,
  .pf-queue-person, .pf-range-caption, .pf-detail summary,
  .pf-notes, .pf-status, .pf-empty { font-size: 14px; line-height: 1.6; }
  .pf-metrics span { font-size: 15px; }
  .pf-metrics strong { font-size: 28px; }
  .pf-summary .card-head p { max-width: 760px; }
  .patient-meta, .note-text, .attachment, .cash-movements, .daily-cash,
  .workflow strong, .line-medical-preview, .medical-line-detail,
  .medical-line-detail strong { font-size: 16px; }
  .patient-meta b, .record-note .row-actions, .note-meta,
  .attachment .secondary, .workflow small, .production-tabs small,
  .production-date, .line-medical .hint, .medical-line-detail .hint,
  .ticket-settings-current, .ticket-settings-card legend, .ticket-settings-heading p,
  .ticket-format-copy>span, .ticket-format-option>a,
  .ticket-settings-actions p { font-size: 14px; line-height: 1.6; }
  .production-tabs button { font-size: 16px; }
  .ticket-settings-heading h2 { font-size: 21px; }
  .access-brand>span, .access-card .hint, .access-note, .access-footer { font-size: 14px; line-height: 1.6; }

  /* Separate the ticket, patient and services so each row is easy to scan. */
  .ng-queue .card-head { padding: 18px 20px 12px; }
  .ng-queue .card-head h2 { font-size: 21px; }
  .ng-queue .card-head p { font-size: 14px; margin-top: 4px; }
  .ng-queue-filters { gap: 12px; padding: 0 20px 16px; }
  .ng-queue-filters select { flex: 0 1 250px; }
  .ng-queue-table { width: 100%; min-width: 900px; table-layout: fixed; }
  .ng-queue .ng-queue-table thead th { padding: 11px 14px; background: #f1f5f8; color: #435d6c; font-size: 13px; font-weight: 600; }
  .ng-queue-table td { padding: 16px 14px; max-width: none; vertical-align: top; line-height: 1.45; }
  .ng-queue-table th:nth-child(1) { width: 15%; }
  .ng-queue-table th:nth-child(2) { width: 21%; }
  .ng-queue-table th:nth-child(3) { width: 28%; }
  .ng-queue-table th:nth-child(4) { width: 10%; }
  .ng-queue-table th:nth-child(5) { width: 10%; }
  .ng-queue-table th:nth-child(6) { width: 16%; }
  .ng-queue-ticket { display: block; }
  .ng-queue-ticket>strong { display: block; font-size: 15px; font-weight: 650; color: #224c63; }
  .ng-queue-ticket small { color: var(--muted); font-size: 13px; }
  .ng-queue-table .ng-queue-date { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 5px; white-space: normal; }
  .ng-queue-date>span, .ng-queue-date>time { white-space: nowrap; }
  .ng-queue-table .ng-queue-patient { display: block; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0; }
  .ng-queue-table .ng-queue-document { font-size: 13px; line-height: 1.5; margin-top: 4px; color: var(--muted); }
  .ng-queue-table .ng-queue-referrer { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.5; }
  .ng-queue-services { display: flex; flex-direction: column; gap: 5px; font-size: 15px; }
  .ng-queue-service { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
  .ng-queue-service .pf-queue-person { display: inline !important; margin: 0; font-size: 13px; line-height: 1.45; }
  .ng-queue-table .ng-queue-amount { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .ng-queue-status-cell .badge { max-width: 100%; white-space: normal; text-align: center; }
  .ng-queue-table .ng-row-actions { flex-direction: column; align-items: flex-start; gap: 7px; }
  .ng-queue .ng-row-actions .table-link { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 5px 10px; font-size: 13px; line-height: 1.4; border: 1px solid #cbdce0; border-radius: 7px; background: #fff; text-align: left; text-decoration: none; }
  .ng-queue .ng-row-actions .ng-queue-complete { background: #edf7f4; border-color: #bddbd2; color: #1c6d5d; }
  .ng-queue .ng-row-actions .table-link:hover { background: #e9f2f3; border-color: #80adb2; }
  .ng-queue .ng-row-actions .ng-danger-link { border: 0; background: transparent; padding: 5px 0; justify-content: flex-start; }
  .ng-queue-table .ng-muted { margin-top: 5px; font-size: 13px; }

  @media (max-width: 1100px) {
    .ng-checkout-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
    .ng-service-results { grid-template-columns: 1fr; }
    .ng-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ng-metric>strong { font-size: 28px; }
    .pf-metrics>div { flex-wrap: wrap; }
  }
  @media (max-width: 1000px) {
    .ng-checkout-grid { grid-template-columns: 1fr; }
    .ng-payment-panel { position: static; }
    .ng-service-results { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
    .ng-payment-panel .ng-payment-row { grid-template-columns: minmax(0, 1fr) 130px; }
  }
  @media (max-width: 600px) {
    h1 { font-size: 28px; }
    .topbar { height: auto; min-height: 70px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; gap: 10px; }
    .top-right { gap: 10px; margin-left: auto; flex-wrap: wrap; }
    .top-right .avatar { display: none; }
    .breadcrumb { gap: 8px; flex-wrap: wrap; }
    .app-footer { flex-wrap: wrap; gap: 8px; }
    .kpi-value { font-size: 28px; }
    .kpi-label { font-size: 15px; }
    .kpi-description { font-size: 14px; }
    .row-actions { width: 100%; }
    .form-grid { grid-template-columns: 1fr; gap: 18px; }
    .modal-head, .modal-content { padding-left: 18px; padding-right: 18px; }
    .modal-head h2 { font-size: 22px; }
    .form-actions { padding: 18px; }
    .ng-section, .ng-payment-panel { padding: 18px; }
    .ng-service-results { grid-template-columns: 1fr; }
    .ng-cart-line { grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 12px; }
    .ng-cart-name { grid-column: 1/-1; }
    .ng-qty input { width: 64px; }
    .ng-cart-subtotal { font-size: 16px; }
    .ng-cart-doctor select { min-width: 0; max-width: 100%; }
    .pf-performer-field { grid-template-columns: 1fr; gap: 8px; }
    .pf-performer-field small { grid-column: 1; }
    .ng-date-range, .pf-date-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; }
    .ng-date-range .btn, .pf-date-range .btn { grid-column: 1/-1; font-size: 15px; }
    .ng-date-range input, .pf-date-range input { width: 100%; min-width: 0; }
    .pf-metrics { grid-template-columns: 1fr; gap: 8px; }
    .pf-metrics>div { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; }
    .pf-metrics span { min-height: 0; font-size: 15px; }
    .pf-metrics strong { margin: 0; font-size: 26px; }
    .ng-cash-flow span { font-size: 15px; }
    .ng-cash-flow>div { flex-wrap: wrap; }
    .ng-metric-grid.ng-three { grid-template-columns: 1fr; }
    .ng-metric-grid.ng-three .ng-metric { display: flex; align-items: flex-start; }
    .ng-metric-grid.ng-three .ng-metric>strong { font-size: 28px; margin-top: 8px; }
    .ng-total { flex-wrap: wrap; }
    .ng-selected-patient { flex-wrap: wrap; }
    .ng-selected-patient>.small-link { margin-left: 0; }
    .ng-check-label { min-width: 0; }
    .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  }
  @media (max-width: 400px) {
    .kpis { grid-template-columns: 1fr; }
    .ng-metric-grid { grid-template-columns: 1fr; }
    .ng-payment-panel .ng-payment-row { grid-template-columns: 1fr; }
    .ng-payment-row>.field { grid-column: 1/-1; }
    .ng-patient-tabs button { flex-basis: 100%; }
    .ng-service-result { flex-wrap: wrap; }
    .ng-service-result>span:first-child { flex-basis: 100%; }
    .ng-service-result .ng-add { margin-left: auto; }
  }
}

/* On smaller screens each attention becomes a readable card. */
@media screen and (max-width: 1200px) {
 .ng-queue .table-wrap { overflow: visible; }
 .ng-queue .ng-queue-table { display: block; min-width: 0; }
 .ng-queue-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .ng-queue-table tbody { display: grid; gap: 12px; padding: 14px; }
 .ng-queue .ng-queue-table tbody tr:nth-child(n) { display: grid; grid-template-columns: minmax(0,1fr) minmax(90px,35%); gap: 12px 16px; padding: 16px; border: 1px solid #dce6eb; border-radius: 10px; background: #fff; }
 .ng-queue .ng-queue-table td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; }
 .ng-queue-ticket-cell { grid-column: 1; grid-row: 1; }
 .ng-queue-patient-cell { grid-column: 1; grid-row: 2; }
 .ng-queue-status-cell { grid-column: 2; grid-row: 1; text-align: right; }
 .ng-queue-total-cell { grid-column: 2; grid-row: 2; text-align: right; }
 .ng-queue-services-cell { grid-column: 1/-1; grid-row: 3; }
 .ng-queue-actions-cell { grid-column: 1/-1; grid-row: 4; }
 .ng-queue-total-cell::before, .ng-queue-services-cell::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
 .ng-queue .ng-queue-actions-cell { padding-top: 12px; border-top: 1px solid #e6edf0; }
 .ng-queue-table .ng-row-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
}
@media screen and (max-width: 550px) {
 .ng-queue .card-head { padding: 16px; gap: 12px; align-items: flex-start; }
 .ng-queue .card-head h2 { font-size: 19px; }
 .ng-queue-filters { padding: 0 16px 16px; }
 .ng-queue-filters select { flex-basis: 100%; }
 .ng-queue-table tbody { padding: 10px; }
 .ng-queue .ng-queue-table tbody tr:nth-child(n) { padding: 13px; gap: 12px 10px; }
}