/* v102 shared application components. All rules are screen-only.
   #content deliberately excludes the navigation shell. Document/label canvases
   keep their own sizing, and no authorization or role visibility is changed. */
@media screen {
  :is(#content, #modalRoot, #login) {
    --ui-control-height: 40px;
    --ui-control-font: 14px;
    --ui-field-font: 14px;
    --ui-control-radius: 10px;
    --ui-gap: 8px;
  }

  /* Undo v99's arbitrary character wrapping without resizing image/card buttons. */
  :is(#content, #modalRoot, #login) :is(button, .btn, [role="button"]),
  :is(#content, #modalRoot, #login) button > :is(span, b, strong) {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  :is(#content, #modalRoot, #login) :is(.btn, .quick-btn, .chip, .quote-add-item, .pay-opt),
  #modalRoot #owner-alerts-v98 button:not(.oa-close) {
    min-width: 0;
    max-width: 100%;
    min-height: var(--ui-control-height);
    height: auto;
    padding: 8px 12px;
    border-radius: var(--ui-control-radius);
    font-size: var(--ui-control-font);
    font-weight: 700;
    line-height: 20px;
    white-space: normal !important;
    text-align: center;
    gap: 6px;
    vertical-align: middle;
  }
  :is(#content, #modalRoot) .btn.ow100-action { font-size: var(--ui-control-font) !important; }
  :is(#content, #modalRoot) :is(.chip, .shop-category-bar .btn) { border-radius: 999px; }
  :is(#content, #modalRoot, #login) :is(button, input, select, textarea):focus-visible {
    outline: 3px solid #00958780;
    outline-offset: 2px;
  }

  /* Icons, quantity controls and close buttons stay square, not text-button sized. */
  :is(#content, #modalRoot) :is(.ic-btn, .qty button, .modal-close, .image-lightbox-close),
  #modalRoot #owner-alerts-v98 .oa-close {
    width: var(--ui-control-height);
    min-width: var(--ui-control-height);
    height: var(--ui-control-height);
    min-height: var(--ui-control-height);
    flex: 0 0 var(--ui-control-height);
    padding: 0;
    line-height: 1;
    text-align: center;
  }
  :is(#content, #modalRoot) .qty { flex-shrink: 0; gap: 6px; }
  :is(#content, #modalRoot) .project-color-swatch {
    flex-shrink: 0;
    /* Keep the existing circular color preview and selected outline. */
  }

  /* Ordinary form fields share dimensions; file overlays/checks/ranges are excluded. */
  :is(#content, #modalRoot, #login) :is(
    input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"])),
    select, textarea
  ) {
    min-width: 0;
    max-width: 100%;
    min-height: var(--ui-control-height);
    padding: 8px 12px;
    border: 1px solid var(--line, #d7ebe8);
    border-radius: var(--ui-control-radius);
    font-family: inherit;
    font-size: var(--ui-field-font);
    line-height: 20px;
    box-sizing: border-box;
  }
  :is(#content, #modalRoot, #login) :is(.field, .ob99-field, .ow100-field, .oa-field) { min-width: 0; }
  :is(#content, #modalRoot, #login) :is(.field, .ob99-field, .ow100-field, .oa-field) > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { width: 100%; }
  :is(#content, #modalRoot, #login) textarea { min-height: 88px; resize: vertical; }
  :is(#content, #modalRoot) input[type="file"] { max-width: 100%; min-width: 0; font-size: 13px; }
  :is(#content, #modalRoot, #login) .field > label { font-size: 12px; line-height: 1.4; margin-bottom: 6px; }
  :is(#content, #modalRoot) .search input { padding-left: 38px; }
  #content .scanbar input { padding-inline: 12px; }
  #content .scanbar { padding: 12px; gap: var(--ui-gap); }
  #content .scanbar .scan-in { min-width: 0; }
  #content .of98-period { padding: 0 10px; min-height: var(--ui-control-height); }
  #content .of98-period input { border: 0; padding-inline: 0; background: transparent; }
  #modalRoot .modal .field input.big { font-size: 22px; }

  /* Shared, content-sized action rows override historical mobile full-width rules. */
  :is(#content, #modalRoot) :is(
    .toolbar, .work-actions, .shop-card-actions, .quote-card-actions,
    .quote-detail-actions, .quote-toolbar-actions, .quote-inline-actions,
    .cart-actions, .project-tabs, .quote-directory-tabs, .quote-customer-tabs,
    .sa99-actions, .of98-actions, .ob99-footer, .ow100-footer,
    .oa-actions, .oa-pagination-buttons, .of98-form .buttons
  ) {
    min-width: 0;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-gap);
  }
  :is(#content, #modalRoot) :is(
    .toolbar, .work-actions, .shop-card-actions, .quote-card-actions,
    .quote-detail-actions, .quote-toolbar-actions, .quote-inline-actions,
    .project-tabs, .quote-directory-tabs, .quote-customer-tabs,
    .sa99-actions, .of98-actions, .ob99-footer, .ow100-footer,
    .oa-actions, .oa-pagination-buttons, .of98-form .buttons
  ) > :is(.btn, button) {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
  :is(#content, #modalRoot) :is(.work-actions, .shop-card-actions, .quote-card-actions) { justify-content: flex-start; align-items: stretch; }
  :is(#content, #modalRoot) :is(.cart-actions, .quote-wizard-footer) { align-items: stretch; }
  :is(#content, #modalRoot) .cart-actions > .btn { flex: 1 1 100px; width: auto; }
  :is(#content, #modalRoot) .toolbar > * { min-width: 0; max-width: 100%; }
  :is(#content, #modalRoot) .toolbar > div[style*="flex"] { flex-wrap: wrap; gap: var(--ui-gap); }
  :is(#content, #modalRoot) .toolbar > div:first-child:not(.search):not(.quote-toolbar-actions) { flex: 1 1 240px; }
  :is(#content, #modalRoot) .toolbar .search { flex: 1 1 220px; min-width: 0; width: auto; max-width: 420px; }
  :is(#content, #modalRoot) :is(.work-card, .project-group-line-v92) > .btn-block + .btn-block { margin-top: 8px; }

  /* Catalog categories must never shrink into narrow columns of individual letters. */
  #content :is(.shop-category-bar, .cats) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-gap);
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    padding: 4px 0 12px;
  }
  #content :is(.shop-category-bar > .btn, .cats > .chip),
  #content #catalog-filters > div > .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }
  #content .shop-category-bar .btn > span { flex-shrink: 0; white-space: nowrap !important; }
  #content #catalog-filters > div { align-items: center; gap: var(--ui-gap); }
  #content .shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr)); gap: 14px; }
  #content .shop-card-body { padding: 14px; gap: 9px; }
  #content .shop-card-title { font-size: 15px; line-height: 1.4; min-height: 42px; }

  /* Min-content-safe cards, badges and form grids, common to every authorized role. */
  :is(#content, #modalRoot) :is(
    .card, .work-card, .quote-card, .shop-card, .kpi, .mini-kpi,
    .of98-kpi, .of98-panel, .of98-control, .ob99-card, .wsi100-card,
    .grid2, .grid-2f, .form2, .order-grid, .quote-grid, .pos,
    .quote-filterbar, .quote-prospect-grid, .quote-service-grid,
    .cash101-filters, .ob99-grid, .ow100-grid, .of98-form .grid
  ) { min-width: 0; max-width: 100%; }
  :is(#content, #modalRoot) :is(
    .grid2, .grid-2f, .form2, .order-grid, .quote-grid, .pos,
    .quote-filterbar, .quote-prospect-grid, .quote-service-grid,
    .cash101-filters, .ob99-grid, .ow100-grid, .of98-form .grid
  ) > * { min-width: 0; max-width: 100%; }
  :is(#content, #modalRoot) :is(.grid-2f, .form2) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :is(#content, #modalRoot) :is(.work-top, .quote-card-top, .quote-item-editor-head, .of98-panel-head, .ob99-card-heading, .ow100-heading) { flex-wrap: wrap; gap: var(--ui-gap); }
  :is(#content, #modalRoot) :is(.work-top, .quote-card-top, .quote-item-editor-head, .of98-panel-head, .ob99-card-heading, .ow100-heading) > * { min-width: 0; max-width: 100%; }
  :is(#content, #modalRoot) :is(.work-card h3, .quote-card h3, .shop-card-title, .module-sub, .info-strip, .context-value) {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.45;
  }
  :is(#content, #modalRoot) :is(.work-card h3, .quote-card h3) { font-size: 16px; }
  :is(#content, #modalRoot) :is(.badge, .worker-chip, .quote-author-badge, .quote-change-badge-v91, .project-group-count-v92, .of98-tag, .ob99-badge, .ow100-tag, .ow100-review-tag, .wsi100-status, .cash101-type),
  #modalRoot #owner-alerts-v98 .oa-badge {
    max-width: 100%;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Let data tables scroll inside their own panel, never the page or modal. */
  :is(#content, #modalRoot) :is(.tablewrap, .cash101-table, .ow100-table) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  :is(#content, #modalRoot) :is(.tablewrap, .cash101-table, .ow100-table) :is(th, td) {
    padding: 11px 12px;
    vertical-align: top;
    line-height: 1.45;
    word-break: normal;
  }
  :is(#content, #modalRoot) :is(.tablewrap, .cash101-table, .ow100-table) th { font-size: 11px; }
  :is(#content, #modalRoot) .tablewrap td { font-size: 13px; }
  :is(#content, #modalRoot) .tablewrap td .btn { margin-block: 2px; }
  :is(#content, #modalRoot) .tablewrap td > .btn + .btn { margin-left: 4px; }

  /* Modal headers remain readable; content scrolls, dedicated preview sizes survive. */
  #modalRoot :is(.modal-h, .modal-b, .oa-head, .oa-scroll) { overflow-wrap: break-word; word-break: normal; }
  #modalRoot .modal-h { align-items: flex-start; font-size: 18px; line-height: 1.4; gap: 10px; }
  #modalRoot .modal-h > :not(button) { min-width: 0; }
  #modalRoot .quote-stepper { flex-wrap: wrap; gap: var(--ui-gap); }
  #modalRoot .quote-step { flex: 0 1 auto; min-width: 0; min-height: var(--ui-control-height); padding: 8px 10px; }
  #modalRoot .quote-step > span:first-child { flex: 0 0 22px; }
  #modalRoot .quote-step .quote-step-label { width: auto; height: auto; display: inline; border: 0; border-radius: 0; background: none; }
  #modalRoot .quote-wizard-footer { flex-direction: row; flex-wrap: wrap; gap: var(--ui-gap); }
  #modalRoot .quote-wizard-footer > div { width: auto; flex: 1 1 auto; justify-content: flex-end; }
  #modalRoot .quote-wizard-footer .btn { width: auto; flex: 0 1 auto; }
  #modalRoot #owner-alerts-v98 .oa-field { min-width: 0; flex: 1 1 180px; }
  #modalRoot #owner-alerts-v98 select { min-height: var(--ui-control-height); padding: 8px 12px; font-size: var(--ui-field-font); line-height: 20px; }

  /* CSS normalization cannot reveal controls hidden by role, workflow or loading state. */
  :is(#content, #modalRoot, #login) :is([hidden], .hide) { display: none !important; }
}

@media screen and (max-width: 1100px) {
  #content .order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #content .quote-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 720px) {
  :is(#content, #modalRoot, #login) {
    --ui-control-height: 44px;
    --ui-field-font: 16px; /* Avoid automatic input zoom on iOS. */
  }
  :is(#content, #modalRoot) :is(.grid-2f, .form2, .quote-filterbar, .quote-prospect-grid, .quote-service-grid, .ob99-grid, .ow100-grid, .of98-form .grid) { grid-template-columns: minmax(0, 1fr); }
  #content :is(.order-grid, .quote-grid) { grid-template-columns: minmax(0, 1fr); }
  #content .shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
  /* A large catalog stays one reachable row on phones, not a wall of filters. */
  #content :is(.shop-category-bar, .cats) {
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #91bbb5 transparent;
    padding: 4px 2px 10px;
  }
  #content :is(.shop-category-bar > .btn, .cats > .chip) {
    flex: 0 0 auto;
    max-width: min(280px, 90%);
    white-space: normal !important;
    overflow-wrap: normal;
  }
  #content :is(.shop-category-bar, .cats)::-webkit-scrollbar { display: block; height: 6px; }
  #content :is(.shop-category-bar, .cats)::-webkit-scrollbar-thumb { background: #91bbb5; border-radius: 6px; }
  :is(#content, #modalRoot) .toolbar { align-items: center; gap: 10px; }
  :is(#content, #modalRoot) .toolbar > div:first-child:not(.search):not(.quote-toolbar-actions) { flex-basis: 100%; }
  :is(#content, #modalRoot) .toolbar .search { max-width: none; }
  #content .quick-row { display: flex; flex-wrap: wrap; gap: var(--ui-gap); }
  #content .quick-row > .quick-btn { flex: 0 1 auto; width: auto; }
  #content .of98-tabs { flex-wrap: wrap; gap: 4px; }
  #content .of98-tabs button { flex: 0 1 auto; min-height: var(--ui-control-height); padding: 8px 10px; font-size: 13px; }
  #content :is(.of98-filters, .wsi100-filters, .ow100-filters) { gap: 10px; }
  #content :is(.of98-filters, .wsi100-filters, .ow100-filters) > label { flex: 1 1 180px; min-width: 0; max-width: 100%; }
  #content :is(.of98-filters, .wsi100-filters, .wsi100-header) > .btn { flex: 0 1 auto; width: auto; }
  #content .wsi100-filters .wsi100-all { flex-basis: 100%; }
  #content .cash101-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #content .cash101-filters .btn { align-self: end; margin-top: 0; }
  :is(#content, #modalRoot) :is(.sa99-actions, .of98-actions, .ob99-footer, .ow100-footer) > .btn { flex: 0 1 auto; width: auto; }
  #modalRoot .quote-step { font-size: 12px; }
  #modalRoot .quote-step .quote-step-label { display: inline; }
  #modalRoot .quote-wizard-footer { position: static; margin-top: 16px; }
  #modalRoot .project-color-swatch { width: 44px; height: 44px; }
  /* The legacy inline three-column timetable clips native time-input minutes. */
  #modalRoot .schedule-day-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0;
  }
  #modalRoot .schedule-day-row > label { grid-column: 1 / -1; padding-bottom: 0 !important; }
  #modalRoot .schedule-day-row input[type="time"] { padding: 8px 6px; min-width: 110px !important; }
}

@media screen and (max-width: 400px) {
  #content .cash101-filters { grid-template-columns: minmax(0, 1fr); }
  #content .cash101-filters > .btn { width: auto; justify-self: start; }
  #modalRoot :is(.modal-h, .modal-b) { padding-inline: 12px; }
  #modalRoot .quote-wizard-footer { margin-inline: 0; padding-inline: 0; }
  #modalRoot .quote-stepper { padding-inline: 12px; }
}

@media screen and (max-width: 360px) {
  #modalRoot .schedule-day-row { grid-template-columns: minmax(0, 1fr) !important; }
}