/* Readability pass: retain the existing APEX palette, full ticket data and 50-row pagination. */
.mobile-select-control { display: contents; }
.mobile-select-copy { display: none; }
.service-button-explainer { grid-column: 1 / -1; margin: 0; font-size: .875rem; line-height: 1.5; color: #32596b; overflow-wrap: anywhere; }
@media screen {
  :root {
    --density-text: .875rem; --density-meta: .75rem;
    --workspace-action-text: #aa402d;
  }
  .app-shell .main { font-size: .875rem; }
  .app-shell .view :is(label, label > span, .dense-filters label > span, .activity-filters label > span,
    input:not([type=checkbox]):not([type=radio]), select, .workspace-tab, .tab-button, .activity-tab, .report-category-tab) { font-size: .875rem; line-height: 1.35; }
  .app-shell .view .table-wrap :is(th, td) { font-size: .875rem; line-height: 1.3; }
  .app-shell .view :is(h3,h4) { font-size: 1rem; }
  .app-shell .view :is(.subtle,.section-kicker,.result-bar,.report-method-note) { font-size: .75rem; }
  .app-shell .view .table-wrap th { text-transform: none; letter-spacing: normal; background: #e8eef3; color: #273e50; }
  .app-shell .view .dense-filters { align-items: end; }
  .app-shell .view .dense-filters label { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
  .app-shell .view .dense-filters :is(input,select) { min-height: 36px; }
  .app-shell .view .dense-filters :is(.filter-search-button,.filter-reset) { min-height: 36px; }
  .app-shell .topbar { min-height: 68px; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .app-shell .topbar .workspace-date-weather { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .app-shell .topbar #workspace-date { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 0; font-size: 1.125rem !important; line-height: 1.35; text-transform: none; letter-spacing: 0; }
  .workspace-weekday { color: #aa402d; font-weight: 750; }
  .workspace-date-value { color: #3c4b78; font-weight: 650; }
  .app-shell .top-actions { margin-left: auto; flex-wrap: wrap; }
  .app-shell .role-picker select:disabled { opacity: 1; color: #284d50; -webkit-text-fill-color: #284d50; }
  .workspace-weather { display: flex; align-items: center; gap: 7px; font-size: .8125rem; color: #3e5d72; text-decoration: none; max-width: 480px; }
  .workspace-weather[hidden] { display: none; }
  .workspace-weather .weather-icon { display: inline-block; font-size: 1.3rem; flex: 0 0 24px; }
  .workspace-weather[data-weather]:not([data-weather=loading]):not([data-weather=unavailable]) .weather-icon { animation: weather-arrival 1.5s ease-in-out 3; }
  .workspace-weather[data-weather=rain] { color: #175b8e; }
  .workspace-weather[data-weather=sun] { color: #89551c; }
  @keyframes weather-arrival { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(8deg); } }
  .office-alerts { position: relative; inset: auto; z-index: 220; flex-shrink: 0; }
  .app-shell :is(#new-ticket-top,#new-ticket-table,#new-ticket-dispatch),
  .app-shell .office-alerts .office-alert-trigger,
  .app-shell #view-tickets .ticket-pagination button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; min-height: 40px; min-width: 104px; padding: 8px 12px;
    appearance: none; border: 0; border-radius: 0; box-shadow: none;
    background: transparent; color: var(--workspace-action-text);
    font-family: var(--apex-font-text); font-size: 1rem; font-weight: 700; line-height: 1.5; letter-spacing: 0;
    text-transform: none; white-space: nowrap; opacity: 1;
  }
  .app-shell :is(#new-ticket-top,#new-ticket-table,#new-ticket-dispatch):hover,
  .app-shell .office-alerts .office-alert-trigger:hover,
  .app-shell #view-tickets .ticket-pagination button:not(:disabled):hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .app-shell #view-tickets .ticket-pagination button { min-width: 112px; }
  .app-shell #office-alert-count {
    display: inline; height: auto; min-width: 0; margin-left: 0; padding: 0; border-radius: 0;
    font: inherit; color: inherit; background: transparent;
  }
  .app-shell #office-alert-count::before { content: "("; }
  .app-shell #office-alert-count::after { content: ")"; }
  .app-shell :is(#new-ticket-top,#new-ticket-table,#new-ticket-dispatch,.office-alert-trigger):focus-visible,
  .app-shell #view-tickets .ticket-pagination button:focus-visible {
    outline: 2px solid transparent; outline-offset: 3px;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  }
  #office-alert-panel { top: calc(100% + 8px); bottom: auto; max-height: min(650px,calc(100dvh - 110px)); }
  /* Keep real button semantics and touch targets without a visible button box. */
  .app-shell #view-tickets .ticket-pagination button:disabled { cursor: not-allowed; }
  .ticket-pagination button:disabled::before,.ticket-pagination button:disabled::after { opacity: .55; }
  .ticket-pagination [data-ticket-page="previous"]::before { content: "←"; }
  .ticket-pagination [data-ticket-page="next"]::after { content: "→"; }
  .workspace-disclosure { border: 1px solid #cbd7df; border-radius: 5px; margin: 10px 0; background: #fff; }
  .workspace-disclosure > summary { cursor: pointer; padding: 10px 12px; min-height: 40px; color: #32596b; font-size: .875rem; font-weight: 600; }
  .workspace-disclosure > :not(summary) { margin: 10px; }
  .workspace-disclosure[open] > summary { border-bottom: 1px solid #d8e1e7; }
  .parts-cost-disclosure:has(#parts-cost-panel.hidden) { display: none; }
  #view-overview .metric-card:has(#metric-attention), #view-overview .metric-card:has(#metric-parts) { display: none; }
  #view-overview .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #view-overview .metric-grid .metric-card { max-width: none; }
  #view-intake .intake-layout { grid-template-columns: minmax(0,1fr); }
  #view-intake .intake-boundary-summary { font-size: .875rem; }
  #view-intake .intake-support .intake-rules { width: auto; }
  #view-parts .part-card { padding: 9px; gap: 5px; }
  #view-parts .part-card .part-status:has(+ select) { display: none; }
  #view-shortcuts .portal-card { grid-template-rows: auto auto 1fr auto; align-content: stretch; }
  #view-shortcuts .portal-card b { align-self: end; }
  #view-ai .report-duplicate-title { display: none; }
  #view-ai #report-ticket-trend svg { width: 100%; height: 300px; max-height: 320px; }
  #view-ai .report-trend-chart { min-height: 0; }
  #view-advisor .advisor-feedback { min-height: 0; padding: 9px 12px; background: #f8fafb; border: 1px solid #d6e1e7; }
  #view-advisor .advisor-feedback.positive { background: #f7faf9; border-left: 3px solid #6e9b8b; }
  #view-advisor .advisor-feedback.neutral { background: #f3f6f8; border-left: 3px solid #7b92a0; }
  #view-advisor .advisor-feedback.attention { background: #fff8e8; border-left: 4px solid #b57615; }
  #view-advisor .advisor-feedback.practice { background: #eff6fa; border-left: 4px solid #2b789c; }
  #view-settings :is(label,label>span,button,input,select,.user-row,.account-detail-row) { font-size: .875rem; line-height: 1.4; }
  #view-settings :is(small,.section-kicker,.settings-boundary-note,.user-role-note,.account-access-help) { font-size: .75rem; line-height: 1.45; }
  #view-settings .user-list :is(span,p), #view-settings .settings-card :is(p,small,dt,dd), #view-settings .account-policy-note * { font-size: .75rem; line-height: 1.45; }
  #view-settings .danger-action { border: 1px solid #a9483b; color: #923b30; background: #fff5f2; margin-left: 12px; }
  #view-settings :is(.user-identity span,.user-security-summary span,.access-status,.portal-id-helper,.security-boundary-note,.account-summary-label) { font-size: .75rem; line-height: 1.45; }
  .app-shell #view-settings :is(.my-account-summary span,.credential-note span,.permission-list span,.guardrail-list span,.recommend-chip) { font-size: .75rem; line-height: 1.45; }
  .app-shell #view-advisor span { font-size: .75rem; }
  .app-shell #view-ai :is(.overall-status-toolbar label span,.overall-kpi-grid span,.report-private-badge,.tiny-tag) { font-size: .75rem; }
  .app-shell :is(#view-shortcuts .recommend-chip,#view-activity .report-private-badge,#view-overview .metric-card span,#route-plan-summary) { font-size: .75rem; }
  #ticket-detail-modal .detail-summary-card { padding: 6px 9px; min-height: 0; }
  #ticket-detail-modal .detail-cancellation-request-row { padding: 6px 12px; gap: 10px; background: #faf8f7; }
  #ticket-detail-modal .detail-cancellation-request-row > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  #ticket-detail-modal .detail-cancellation-request-row .request-cancellation-button { min-height: 34px; padding: 6px 10px; font-size: .75rem; width: auto; }
  #ticket-detail-modal .detail-section-title { background: #eef3f5; color: #234a5b; border-left-color: #658a99; }
  #ticket-detail-modal #detail-visits-panel #visit-form { display: grid; order: 10; gap: 10px; }
  #ticket-detail-modal #detail-visits-panel #visit-form > * { order: initial; }
  #ticket-detail-modal #detail-visits-panel #service-photo-section { order: 20; }
  #ticket-detail-modal #detail-visits-panel #service-related-history { order: 30; }
  #ticket-detail-modal #detail-visits-panel #visit-history-details { order: 40; }
  #ticket-detail-modal #detail-visits-panel .service-notes-workflow { margin: 0; }
  #ticket-detail-modal .ticket-labor-summary { padding: 9px 12px; color: #315e70; background: #eef5f8; font-size: .875rem; }
  #ticket-modal #ticket-form .form-grid > label { display: flex; flex-direction: column; align-self: start; justify-content: flex-start; gap: 5px; }
  #ticket-modal #ticket-form .form-grid > label > :is(input:not([type=hidden]), select) { min-height: 44px; height: 44px; flex: 0 0 44px; margin: 0; }
  #ticket-modal #ticket-form .input-with-action { min-height: 44px; }
  #ticket-modal #ticket-form .input-with-action input { height: 44px; min-height: 44px; }
  #ticket-modal #ticket-form .form-grid { row-gap: 16px; align-items: start; }
  .planner-empty-state { padding: 18px; border: 1px solid #d6e1e6; background: #fff; font-size: .875rem; }
  .planner-empty-state p { margin: 5px 0 0; }
  .app-shell :is(#dispatch-date-display,#planner-calendar-month,#mobile-selected-date,.calendar-day-number) { font-size: 1.0625rem; color: #176576; font-weight: 650; }
  .app-shell .calendar-weekdays span { color: #7d4b12; font-size: .875rem; font-weight: 650; }
  .app-shell :is(input[type=date],.calendar-selection) { color: #176576; }
  #view-activity .page-intro { border-left: 0; }
  .mobile-options-toggle { display: none; }
}
@media screen and (min-width:821px) {
  body .app-shell .sidebar { width: 180px; padding-inline: 10px; }
  body .app-shell .main { margin-left: 180px; }
  body .app-shell .sidebar :is(.brand,.nav-item) { padding-inline: 6px; }
  body .app-shell .sidebar .nav-label { white-space: normal; overflow-wrap: anywhere; font-size: .875rem; }
  body .app-shell .view { max-width: none; }
  .app-shell :is(#new-ticket-table,#new-ticket-dispatch) { display: none; }
}
@media screen and (max-width:820px) {
  /* Native mobile pickers with a wrapping, readable selected value. */
  #ticket-detail-modal .mobile-select-control { display: grid; position: relative; min-width: 0; width: 100%; }
  #ticket-detail-modal #detail-visits-panel label:has(> .mobile-select-control) { grid-template-rows: auto minmax(44px,auto); }
  #ticket-detail-modal .mobile-select-control > select {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 44px;
    margin: 0; opacity: 0; z-index: 1; cursor: pointer; font-size: 1rem;
  }
  #ticket-detail-modal .mobile-select-copy {
    display: block; min-width: 0; min-height: 44px; padding: 10px 30px 10px 10px;
    border: 1px solid #a5b4c0; border-radius: 6px; background: #fff; color: #173f46;
    white-space: normal; overflow-wrap: anywhere; word-break: normal;
    font-family: var(--apex-font-text, "Segoe UI", sans-serif);
    font-size: 1rem; font-weight: 400; line-height: 1.4; pointer-events: none;
  }
  #ticket-detail-modal .mobile-select-control::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid #31534a; border-bottom: 2px solid #31534a;
    transform: translateY(-65%) rotate(45deg); pointer-events: none;
  }
  #ticket-detail-modal .mobile-select-control:has(select:focus-visible) .mobile-select-copy { outline: 3px solid #1d4ed8; outline-offset: 2px; }
  #ticket-detail-modal .mobile-select-control:has(select:disabled) .mobile-select-copy { color: #526170; background: #f1f4f5; }
  #ticket-detail-modal .mobile-select-control > select:disabled { cursor: not-allowed; }
  #ticket-detail-modal #detail-visits-panel .service-status-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #ticket-detail-modal #detail-visits-panel :is(.service-status-grid,.visit-er-grid,.service-unit-grid) > label { font-size: .875rem; line-height: 1.4; }
  #ticket-detail-modal #detail-visits-panel .visit-er-grid > label:has(:is(input[type=date],select[name=visitTimeSlot],select[name=nonCompletionReason])) { grid-column: 1 / -1; }
  #ticket-detail-modal #detail-visits-panel .service-save-actions .visited-action-button { height: auto; min-height: 44px; white-space: normal; }
  #ticket-detail-modal #detail-visits-panel .service-save-actions > button { height: auto; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  #ticket-detail-modal #service-photo-section #attachment-form { grid-template-columns: minmax(0,1fr); }
  #ticket-detail-modal #service-photo-section #attachment-form > :is(label,#attachment-file-summary,#attachment-upload-button) { grid-column: 1 / -1; }
  #ticket-detail-modal #service-photo-section .attachment-field-label { white-space: normal; overflow: visible; text-overflow: clip; font-size: .875rem; }
  #ticket-detail-modal #service-photo-section #attachment-files { min-height: 44px; font-size: .875rem; }
  #ticket-detail-modal .service-parts-workspace :is(.field-part-grid,.service-part-edit-grid) > label:has(:is(input[name=partNumber],input[name=description],input[type=date],select[name=status])) { grid-column: 1 / -1; }
  #ticket-detail-modal #detail-visits-panel .service-secondary-workspace { min-width: 0; max-width: 100%; }
  #ticket-detail-modal #detail-visits-panel .claim-transaction-workspace > .repair-section-bar { flex-wrap: wrap; min-width: 0; }
  #ticket-detail-modal #detail-visits-panel .claim-transaction-workspace > .repair-section-bar > div { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  #ticket-detail-modal #detail-visits-panel .claim-transaction-workspace .repair-section-note { min-width: 0; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
  .app-shell .topbar { gap: 6px; }
  .app-shell .topbar > div.workspace-date-weather { display: flex; order: 3; flex: 1 0 100%; width: 100%; padding: 5px 0; }
  .app-shell .topbar #workspace-date { font-size: 1.0625rem !important; }
  .app-shell .top-actions { flex: 1; justify-content: flex-end; }
  .app-shell .workspace-weather { font-size: .75rem; max-width: 100%; }
  .app-shell .view :is(input:not([type=checkbox]):not([type=radio]), select,textarea) { font-size: 1rem; }
  .app-shell :is(.mobile-menu,.sidebar-close,.date-button,.mobile-tabs button,#mobile-calendar-toggle,#mobile-calendar-prev,#mobile-calendar-next,#mobile-calendar-today,
    #mobile-open-route,#mobile-calendar-week,#mobile-calendar-month,.mobile-page-actions button,.ticket-pagination button) { min-height: 44px; min-width: 44px; }
  #view-mobile .field-card-more > summary { width: 44px; height: 44px; }
  #view-mobile :is(.mobile-route-link,[data-mobile-calendar-mode]) { min-height: 44px; min-width: 44px; }
  #view-mobile .mobile-ticket-open { padding-right: 46px; }
  #ticket-list-panel > .mobile-options-toggle { display: inline-flex; min-height: 40px; margin: 4px 0; }
  #view-tickets #ticket-list-panel:not(.mobile-options-open) .dense-filters > :not(.ticket-search-field):not(#ticket-filter-search) { display: none; }
  #view-tickets #ticket-list-panel:not(.mobile-options-open) :is(.ticket-density-control,#ticket-print) { display: none; }
  #view-tickets #ticket-list-panel .dense-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
  #view-tickets #ticket-list-panel .dense-filters > label { flex: 1 1 calc(50% - 6px); min-width: 0; }
  #view-tickets #ticket-list-panel .dense-filters > .ticket-search-field { flex-basis: calc(100% - 85px); }
  #view-tickets #ticket-filter-search { min-height: 44px; align-self: end; flex: 0 0 76px; }
  #view-tickets #ticket-list-panel .result-bar { justify-content: flex-start; padding: 6px 0; gap: 4px; }
  #view-tickets .ticket-pagination { display: grid; grid-template-columns: auto minmax(0,1fr) auto; width: 100%; font-size: .75rem; gap: 6px; }
  #view-tickets .ticket-pagination [data-ticket-page-status] { min-width: 0; text-align: center; }
  /* Keep both lower navigation buttons together in the center on narrow screens. */
  #view-tickets .ticket-pagination-bottom { grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 12px; }
  #view-tickets .ticket-pagination-bottom [data-ticket-page-status] { grid-column: 1 / -1; grid-row: 1; }
  #view-tickets .ticket-pagination-bottom [data-ticket-page] { grid-row: 2; }
  .app-shell :is(#new-ticket-top,#new-ticket-table,#new-ticket-dispatch),
  .app-shell .office-alerts .office-alert-trigger,
  .app-shell #view-tickets .ticket-pagination button { min-height: 44px; padding-block: 10px; }
  .app-shell .topbar #new-ticket-top { display: none; }
  #office-alert-panel {
    position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; margin: 0;
    transform: translate(-50%,-50%); width: min(430px,calc(100vw - 24px));
    max-height: calc(100dvh - 32px); overscroll-behavior: contain;
  }
}
@media (prefers-reduced-motion: reduce) { .workspace-weather .weather-icon { animation: none !important; } }
@media print { .workspace-date-weather,.mobile-options-toggle,.workspace-weather,.office-alerts { display: none !important; } }
.service-parts-workspace .part-use-selection { display:flex; align-items:center; gap:.65rem; padding:.6rem .75rem; font-size:.875rem; line-height:1.4; color:#174a59; cursor:pointer; }
.service-parts-workspace .part-use-selection input { width:1.15rem; height:1.15rem; flex:none; accent-color:#205e6d; }
.service-parts-workspace .part-outcome-summary { margin:.45rem .75rem; font-size:.95rem; font-weight:600; color:#205e6d; overflow-wrap:anywhere; }
.service-parts-workspace .part-outcome-history { margin:.4rem .75rem .75rem; font-size:.875rem; min-width:0; }
.service-parts-workspace .part-outcome-history summary { cursor:pointer; padding:.4rem 0; color:#205e6d; }
.service-parts-workspace .part-outcome-events { margin:.4rem 0; padding-left:1.25rem; }
.service-parts-workspace .part-outcome-events li { padding:.5rem 0; overflow-wrap:anywhere; border-bottom:1px solid #dae3e5; }
.service-parts-workspace .part-outcome-events span { display:block; margin-top:.2rem; }
#ticket-detail-modal .service-parts-workspace .part-outcome-events strong { font-size:.95rem; line-height:1.4; }
#ticket-detail-modal .service-parts-workspace .service-part-summary .service-part-number,
#ticket-detail-modal .service-parts-workspace .service-part-identity > strong { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.service-parts-workspace .part-outcome-visit-label { min-width:12rem; font-size:.875rem; }
.service-parts-workspace .part-correction-note { grid-column:1/-1; }
@media(max-width:600px) {
  #ticket-detail-modal .service-parts-workspace .service-part-summary { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"identity identity" "supplier po" "quantity status"; padding:10px; gap:8px; }
  #ticket-detail-modal .service-parts-workspace .service-part-po { margin-right:0; }
  .service-parts-workspace .service-part-bulk { align-items:stretch; }
  .service-parts-workspace .part-outcome-visit-label { width:100%; min-width:0; }
  #ticket-detail-modal .service-parts-workspace .service-part-edit-grid > label:has(select[name=outcomeVisitId]) { grid-column:1/-1; }
}