/*
 * Shared UI components and theme completion layer.
 * New component work belongs here so the legacy shared stylesheet can be
 * reduced incrementally instead of receiving another end-of-file override.
 */

/* Case item / labour modal ------------------------------------------------ */
body.admin-page #m-item .case-item-modal {
  width: min(900px, calc(100vw - 32px));
}

body.admin-page #m-item .case-item-modal-head > div {
  min-width: 0;
}

body.admin-page #m-item .case-item-modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

body.admin-page #m-item .modal-body {
  gap: 12px !important;
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface)) !important;
}

body.admin-page #m-item .case-item-form-section {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--surface);
}

body.admin-page #m-item .case-item-form-section[hidden] {
  display: none;
}

body.admin-page #m-item .case-item-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-border);
}

body.admin-page #m-item .case-item-section-head > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

body.admin-page #m-item .case-item-section-head > div > span {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font-size: 11px;
  font-weight: 760;
}

body.admin-page #m-item .case-item-section-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

body.admin-page #m-item .case-item-section-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 520;
  line-height: 1.3;
  text-align: right;
}

body.admin-page #m-item .case-item-search-control {
  position: relative;
}

body.admin-page #m-item .case-item-search-control > span {
  position: absolute;
  z-index: 1;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 23px;
  line-height: 1;
  pointer-events: none;
}

body.admin-page #m-item #ai-catalog-search {
  padding-left: 42px !important;
}

body.admin-page #m-item #ai-catalog-search[aria-busy="true"] {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--ui-border)) !important;
}

body.admin-page #m-item .case-item-catalog-results {
  max-height: 246px;
  display: grid;
  gap: 7px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--surface-soft);
  scrollbar-gutter: stable;
}

body.admin-page #m-item .case-item-catalog-results[hidden] {
  display: none;
}

body.admin-page #m-item .case-item-catalog-result {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

body.admin-page #m-item .case-item-catalog-result:hover,
body.admin-page #m-item .case-item-catalog-result:focus-visible,
body.admin-page #m-item .case-item-catalog-result.is-selected {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--ui-border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  outline: none;
}

body.admin-page #m-item .case-item-result-main,
body.admin-page #m-item .case-item-result-stock {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.admin-page #m-item .case-item-result-main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page #m-item .case-item-result-main small,
body.admin-page #m-item .case-item-result-main em,
body.admin-page #m-item .case-item-result-stock small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
}

body.admin-page #m-item .case-item-result-main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page #m-item .case-item-result-stock {
  justify-items: end;
  white-space: nowrap;
}

body.admin-page #m-item .case-item-result-stock b {
  color: var(--success);
  font-size: 12px;
}

body.admin-page #m-item .case-item-catalog-loading,
body.admin-page #m-item .case-item-catalog-empty {
  min-height: 70px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 14px;
  color: var(--muted);
  text-align: center;
}

body.admin-page #m-item .case-item-catalog-loading {
  grid-template-columns: 18px auto;
}

body.admin-page #m-item .case-item-catalog-loading > span {
  width: 17px;
  height: 17px;
  border: 2px solid var(--ui-border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: case-item-spin .7s linear infinite;
}

body.admin-page #m-item .case-item-catalog-empty strong {
  color: var(--ink);
  font-size: 13px;
}

body.admin-page #m-item .case-item-catalog-empty span,
body.admin-page #m-item .case-item-catalog-more {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

body.admin-page #m-item .case-item-catalog-empty.is-error {
  color: var(--danger);
}

body.admin-page #m-item .case-item-catalog-more {
  padding: 7px 10px;
  text-align: center;
}

body.admin-page #m-item .case-item-catalog-selection {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--success) 38%, var(--ui-border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

body.admin-page #m-item .case-item-catalog-selection[hidden] {
  display: none;
}

body.admin-page #m-item .case-item-selection-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  color: var(--success);
  font-weight: 800;
}

body.admin-page #m-item .case-item-catalog-selection > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.admin-page #m-item .case-item-catalog-selection small,
body.admin-page #m-item .case-item-catalog-selection em {
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
}

body.admin-page #m-item .case-item-catalog-selection strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page #m-item .case-item-catalog-selection > b {
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}

body.admin-page #m-item #ai-catalog-hint {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

body.admin-page #m-item #ai-catalog-hint[data-tone="warn"] {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--ui-border));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

body.admin-page #m-item #ai-catalog-hint[data-tone="err"] {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--ui-border));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  color: color-mix(in srgb, var(--danger) 72%, var(--ink));
}

@keyframes case-item-spin { to { transform: rotate(360deg); } }

/* Dark-theme completion --------------------------------------------------- */
body:is(.site-page,.portal-page)[data-portal-theme="dark"] {
  --bg: #0b1220;
  --surface: #111a28;
  --surface-soft: #0f1828;
  --ink: #f8fbff;
  --text: #eef4ff;
  --muted: #b8c4d6;
  --muted-2: #8fa1b8;
  --line: #304056;
  --line-strong: #40516a;
  --card: var(--surface);
  --control-bg: #0b1322;
  --control-bg-muted: #111a28;
  --control-text: #f8fbff;
  --control-muted: #aebbd0;
  color-scheme: dark;
}

:root[data-theme="dark"] body.admin-page,
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) {
  color-scheme: dark;
}

:root[data-theme="dark"] body.admin-page #sb,
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) #sb {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 38%, #171724), #211923 74%, #17171f) !important;
  border-right-color: var(--line) !important;
}

:root[data-theme="dark"] body.admin-page .admin-toolbar .global-search .search-box,
:root[data-theme="dark"] body.admin-page .admin-toolbar .global-search input,
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) .admin-toolbar .global-search .search-box,
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) .admin-toolbar .global-search input {
  border-color: var(--line) !important;
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body.admin-page :where(.data-table thead,.data-table th,table thead,table th),
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(.data-table thead,.data-table th,table thead,table th) {
  background: #0d1726 !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

:root[data-theme="dark"] body.admin-page :where(.panel-card-header,.admin-side-head,.admin-chart-head,.ch),
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(.panel-card-header,.admin-side-head,.admin-chart-head,.ch) {
  background: color-mix(in srgb, var(--surface-soft) 84%, #080f1b) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

:root[data-theme="dark"] body.admin-page :where(.topbar-icon,.icon-control,.avatar),
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(.topbar-icon,.icon-control,.avatar) {
  border-color: var(--line) !important;
  background: var(--control-bg) !important;
  color: var(--primary) !important;
}

/* Public site: eliminate white cards with light text in dark mode. */
body.site-page[data-portal-theme="dark"] :where(
  .card,.section,.tracker-card,.toggle-card,.category-strip,.process,
  .portal-review-panel,.portal-download-panel,.portal-review-grid article,
  .process-item,.service-mini,.price-row,.portal-action-split
) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.site-page[data-portal-theme="dark"] :where(
  .portal-review-panel h2,.portal-download-panel h2,.process h2,
  .portal-review-grid b,.process-item strong,.service-mini strong,.toggle-title
) {
  color: var(--ink) !important;
}

body.site-page[data-portal-theme="dark"] :where(
  .portal-review-panel p,.portal-download-panel p,.portal-review-grid p,
  .process-item span,.service-mini span span,.toggle-sub
) {
  color: var(--muted) !important;
}

body.site-page[data-portal-theme="dark"] .site-header,
body.site-page[data-portal-theme="dark"] .site-nav {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
}

body.site-page[data-portal-theme="dark"] .site-nav a:not(.is-active) {
  color: var(--muted) !important;
}

/* Public-site dark contract.  Contact/map, FAQ and install surfaces used
   literal light backgrounds in the legacy templates and therefore escaped
   the generic card rules above. */
body.site-page[data-portal-theme="dark"] :where(
  .loc-card,.portal-contact-one-card,.portal-contact-panel,.portal-map-panel,
  .portal-map-top-card,.portal-map-marker-card,.portal-contact-item,
  .portal-hours-line,.portal-faq-item,.portal-app-phone
) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.site-page[data-portal-theme="dark"] :where(
  .loc-card,.portal-contact-panel,.portal-map-panel,.portal-map-top-card,
  .portal-map-marker-card,.portal-contact-item,.portal-faq-item,.portal-app-phone
) :where(h2,h3,h4,strong,b,summary) {
  color: var(--ink) !important;
}

body.site-page[data-portal-theme="dark"] :where(
  .loc-card,.portal-contact-panel,.portal-map-panel,.portal-map-top-card,
  .portal-map-marker-card,.portal-contact-item,.portal-faq-item
) :where(p,small,span,address) {
  color: var(--muted) !important;
}

body.site-page[data-portal-theme="dark"] .portal-app-phone {
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line)) !important;
  background: var(--surface-soft) !important;
}

body.site-page[data-portal-theme="dark"] :where(.btn-outline,.btn-secondary) {
  border-color: var(--control-border) !important;
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
  box-shadow: none !important;
}

body.site-page[data-portal-theme="dark"] .btn-outline:hover,
body.site-page[data-portal-theme="dark"] .btn-secondary:hover {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--control-border)) !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--control-bg)) !important;
  color: var(--ink) !important;
}

/* Client profile: the tab bar, workspace cards and case preview use one dark surface. */
body.portal-page[data-portal-theme="dark"] :where(
  .portal-tabs,.portal-profile-tabs,.portal-profile-content,.portal-profile-main,
  .portal-overview-grid .card,.document-grid .card,.panel-card,.recent-card,
  .portal-profile-case-preview,.profile-case-preview-grid article,
  .portal-case-board,.portal-case-hero,.portal-case-progress,.portal-case-kpis,
  .portal-case-next-grid article,.portal-case-insight-grid article,.portal-case-panel,
  .portal-case-cta-row,.portal-privacy-workspace,.portal-aside-card
) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.portal-page[data-portal-theme="dark"] :where(
  .portal-tabs a,.portal-tabs button,.portal-profile-tabs a,.portal-profile-tabs button
):not(.active):not(.is-active) {
  color: var(--muted) !important;
  background: transparent !important;
}

body.portal-page[data-portal-theme="dark"] :where(
  .section-head h3,.panel-card h3,.portal-profile-case-preview h3,
  .profile-case-preview-grid h4,.portal-case-board h2,.portal-case-board h3,
  .portal-case-board b,.portal-case-board strong
) {
  color: var(--ink) !important;
}

body.portal-page[data-portal-theme="dark"] :where(
  .section-head p,.panel-card p,.portal-profile-case-preview p,
  .profile-case-preview-grid p,.profile-case-preview-grid small,
  .portal-case-board p,.portal-case-board small,.portal-case-board span
) {
  color: var(--muted) !important;
}

body.portal-page[data-portal-theme="dark"] :where(
  .profile-case-preview-grid article,.portal-case-kpis > div,
  .portal-case-next-grid article,.portal-case-insight-grid article
) {
  background: var(--surface-soft) !important;
}

/* Client-profile dark contract.  This deliberately includes the containers,
   nested history rows, wizard controls and progress rails which were reported
   as isolated light islands by the authenticated computed-style scan. */
body.portal-page[data-portal-theme="dark"] :where(
  .portal-case-next-grid,.portal-case-insight-grid,.portal-case-history-row,
  .profile-case-preview-meta > span,.portal-wizard-step,
  .portal-wizard-rail-list > span,.portal-wizard-panel,.portal-wizard-card
) {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.portal-page[data-portal-theme="dark"] :where(
  .portal-case-next-grid,.portal-case-insight-grid,.portal-case-history-row,
  .profile-case-preview-meta > span,.portal-wizard-step,
  .portal-wizard-rail-list > span,.portal-wizard-panel,.portal-wizard-card
) :where(h2,h3,h4,strong,b) {
  color: var(--ink) !important;
}

body.portal-page[data-portal-theme="dark"] :where(
  .portal-case-next-grid,.portal-case-insight-grid,.portal-case-history-row,
  .profile-case-preview-meta > span,.portal-wizard-step,
  .portal-wizard-rail-list > span,.portal-wizard-panel,.portal-wizard-card
) :where(p,small,span) {
  color: var(--muted) !important;
}

body.portal-page[data-portal-theme="dark"] :where(
  .btn-outline,.btn-secondary,.portal-outline-btn,.portal-wizard-nav .back,
  .portal-case-mini-action
) {
  border-color: var(--control-border) !important;
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
  box-shadow: none !important;
}

body.portal-page[data-portal-theme="dark"] :where(
  .btn-outline,.btn-secondary,.portal-outline-btn,.portal-wizard-nav .back,
  .portal-case-mini-action
):hover {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--control-border)) !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--control-bg)) !important;
  color: var(--ink) !important;
}

body.portal-page[data-portal-theme="dark"] :where(
  .portal-case-progress-line,.portal-case-meter,.portal-progress-meter,
  .portal-wizard-progress,.profile-case-preview-progress
) {
  border-color: var(--line) !important;
  background: var(--line) !important;
}

body.portal-page[data-portal-theme="dark"] progress {
  color: var(--primary) !important;
  background: var(--line) !important;
}

body.portal-page[data-portal-theme="dark"] progress::-webkit-progress-bar {
  background: var(--line) !important;
}

body.portal-page[data-portal-theme="dark"] progress::-webkit-progress-value,
body.portal-page[data-portal-theme="dark"] progress::-moz-progress-bar {
  background: var(--primary) !important;
}

body.portal-page[data-portal-theme="dark"] :where(.portal-status-pill,.portal-doc-status) {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--primary) 15%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--primary) 62%, var(--ink)) !important;
}

/* Runtime feedback and post-submit states are created or revealed after the
   initial dark-theme render.  Literal white legacy colors made their text
   unreadable even though the surrounding workspace already used dark tokens. */
body:is(.site-page,.portal-page)[data-portal-theme="dark"] :where(
  #portal-toast,.portal-toast,#toast,.toast,
  .success-msg,.success-code,.success-notification-warning
) {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
}

/* R324 realtime communication and explicit public selections -------------
   Compact dots were visually indistinguishable from radio decoration.  The
   request problem controls now expose a full checkbox-sized state. */
body.site-page #request-section .prob-tag,
body.portal-page #request-section .prob-tag {
  min-height: 38px !important;
  gap: 9px !important;
  border-width: 1px !important;
}

body.site-page #request-section .prob-tag::before,
body.portal-page #request-section .prob-tag::before {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid color-mix(in srgb, var(--ink) 48%, var(--control-bg)) !important;
  border-radius: 5px !important;
  background: var(--control-bg) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body.site-page #request-section .prob-tag.active,
body.portal-page #request-section .prob-tag.active {
  border-color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent) !important;
}

body.site-page #request-section .prob-tag.active::before,
body.portal-page #request-section .prob-tag.active::before {
  content: "✓" !important;
  border-color: var(--primary) !important;
  background: var(--primary) !important;
}

.wizard-estimate-value {
  display: block;
  margin-top: 6px;
  color: var(--primary) !important;
  font-size: 15px;
  line-height: 1.25;
}

.portal-chat-live-status,
.case-chat-head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-chat-live-status {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.portal-chat-live-status > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.portal-chat-live-status > span > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
}

.case-chat-head-actions {
  justify-content: flex-end;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] :where(
  #portal-toast,.portal-toast,#toast,.toast
).info {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--blue) 38%, var(--ink)) !important;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] :where(
  #portal-toast,.portal-toast,#toast,.toast
):is(.ok,.success) {
  border-color: color-mix(in srgb, var(--green) 52%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 12%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--green) 42%, var(--ink)) !important;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] :where(
  #portal-toast,.portal-toast,#toast,.toast
):is(.err,.error) {
  border-color: color-mix(in srgb, var(--red) 56%, var(--line)) !important;
  background: color-mix(in srgb, var(--red) 12%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--red) 44%, var(--ink)) !important;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] :where(
  #portal-toast,.portal-toast,#toast,.toast
).warn {
  border-color: color-mix(in srgb, var(--orange) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 12%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--orange) 48%, var(--ink)) !important;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] .success-msg :where(
  .success-title,.success-text,.success-note,.success-code
) {
  color: inherit !important;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] .success-code {
  border-color: var(--control-border) !important;
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
}

/* Typography hierarchy ---------------------------------------------------
   Body copy stays calm and readable; emphasis is reserved for headings,
   primary metrics and explicit actions. */
body.admin-page :where(p,li,td,small,input,select,textarea,.sub,.mini,.hint,.muted) {
  font-weight: 400 !important;
}

body.admin-page :where(
  button,.btn,.action-btn,.table-action,.tab,.filter-tabs button,
  .nav-item,.settings-menu button,.form-label,.field > span,label,th,.badge
) {
  font-weight: 600 !important;
}

body.admin-page :where(
  h1,h2,h3,h4,h5,h6,strong,b,.admin-title,.topbar-title,.num,.ccod,.logo-s
) {
  font-weight: 700 !important;
}

body.site-page :where(p,li,small,input,select,textarea,.toggle-sub) {
  font-weight: 400 !important;
}

body.site-page :where(
  button,.btn,.submit-btn,.site-nav a,.form-label,label,.toggle-title,.badge
) {
  font-weight: 600 !important;
}

body.site-page :where(h1,h2,h3,h4,h5,h6,strong,b,.brand-title,.logo-s) {
  font-weight: 700 !important;
}

body.portal-page :where(p,li,td,small,input,select,textarea,.muted) {
  font-weight: 400 !important;
}

body.portal-page :where(
  button,.btn,.submit-btn,.portal-outline-btn,.portal-tabs a,
  .portal-profile-tabs button,.form-label,label,.badge,.portal-status-pill,
  .portal-doc-status,.portal-case-mini-action,.info-row
) {
  font-weight: 600 !important;
}

body.portal-page .portal-tabs a,
body.portal-page .portal-profile-tabs button {
  font-weight: 600 !important;
}

body.portal-page :where(h1,h2,h3,h4,h5,h6,strong,b,.brand-title,.logo-s) {
  font-weight: 700 !important;
}

/* R322 admin visual contract ---------------------------------------------
   This block deliberately owns the shell, filters and choice controls at
   one point.  Older page-specific rules still exist in styles.css while the
   stylesheet is being split, so the final component layer must prevent a
   light legacy surface from leaking into the dark theme. */
body.admin-page > .admin-shell,
body.admin-page > .admin-shell > #main.admin-main,
body.admin-page > .admin-shell > #main.admin-main > #content.admin-content,
body.admin-page #content.admin-content > .view.active {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Registry views start at the workspace edge.  A legacy generic view rule
   previously allowed a tall empty track before the recycling toolbar. */
body.admin-page > .admin-shell > #main.admin-main > #content.admin-content > #v-recycling_register.view.active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-content: start !important;
  align-items: start !important;
  gap: 16px;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.admin-page #v-recycling_register > :where(.action-row,.filters-bar,.card) {
  width: 100%;
  min-width: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.admin-page > .admin-shell > #main.admin-main {
  min-height: 100vh;
}

body.admin-page > .admin-shell > #main.admin-main > #content.admin-content {
  min-height: calc(100vh - 78px);
}

/* Navigation is body copy, not a page title.  Keep only the active entry and
   section headings semibold so the sidebar remains calm and scannable. */
body.admin-page #sb .admin-nav :where(a,button) {
  font-weight: 520 !important;
}

body.admin-page #sb .admin-nav :where(a,button).is-active {
  font-weight: 620 !important;
  box-shadow: none !important;
}

body.admin-page #sb .nav-group-title {
  font-weight: 650 !important;
}

body.admin-page #sb .admin-brand strong,
body.admin-page #sb .admin-user-card strong {
  font-weight: 650 !important;
}

/* Every administrative filter row uses the same token-driven surface. */
body.admin-page :where(.filters-bar,.catalog-filter-bar) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.admin-page :where(.filters-bar,.catalog-filter-bar) :where(
  input:not([type="checkbox"]):not([type="radio"]),select,.control,
  .search-box,.case-search-box
) {
  border-color: var(--control-border) !important;
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
}

body.admin-page .filter-tabs button:not(.is-active) {
  border-color: var(--control-border) !important;
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
  font-weight: 560 !important;
}

body.admin-page .filter-tabs button.is-active {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--control-border)) !important;
  background: color-mix(in srgb, var(--primary) 13%, var(--surface)) !important;
  color: var(--primary) !important;
  font-weight: 620 !important;
}

/* Case detail contains several legacy cards that used literal white. */
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) #v-case :where(
  .case-detail-head,.case-brief-grid article,.case-doc-quickbar,
  .case-doc-quickbar > *, .admin-tech-workspace,.case-workspace,
  .tech-panel,.tech-file-card,.case-summary-card,.case-metric,
  .case-panel,.document-card
) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) #v-case :where(
  .case-detail-head,.case-brief-grid article,.case-doc-quickbar,
  .admin-tech-workspace,.case-workspace,.tech-panel,.tech-file-card,
  .case-summary-card,.case-metric,.case-panel,.document-card
) :where(h2,h3,h4,strong,b) {
  color: var(--ink) !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) #v-case :where(
  .case-detail-head,.case-brief-grid article,.case-doc-quickbar,
  .admin-tech-workspace,.case-workspace,.tech-panel,.tech-file-card,
  .case-summary-card,.case-metric,.case-panel,.document-card
) :where(p,small,span,.muted) {
  color: var(--muted) !important;
}

/* Choice controls must be recognizable before interaction.  The previous
   1.5px theme border could resolve almost white-on-white in a light modal. */
body.admin-page :where(input[type="checkbox"],input[type="radio"]),
body.site-page :where(input[type="checkbox"],input[type="radio"]),
body.portal-page :where(input[type="checkbox"],input[type="radio"]) {
  opacity: 1 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--ink) 48%, var(--control-bg)) !important;
  background: var(--control-bg) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent) !important;
}

body:is(.admin-page,.site-page,.portal-page) :where(input[type="checkbox"],input[type="radio"]):hover {
  border-color: color-mix(in srgb, var(--primary) 68%, var(--ink)) !important;
}

body.admin-page :where(input[type="checkbox"],input[type="radio"]):checked,
body.site-page :where(input[type="checkbox"],input[type="radio"]):checked,
body.portal-page :where(input[type="checkbox"],input[type="radio"]):checked {
  border-color: var(--control-active) !important;
  background: var(--control-active) !important;
  color: var(--control-active-text) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--control-active) 34%, transparent) !important;
}

body:is(.admin-page,.site-page,.portal-page) :where(input[type="checkbox"],input[type="radio"]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 32%, transparent) !important;
  outline-offset: 2px !important;
}

body.admin-page #m-case .prob-tag::before {
  border: 2px solid color-mix(in srgb, var(--ink) 42%, var(--control-bg)) !important;
  background: var(--control-bg) !important;
}

body.admin-page #m-case .prob-tag.active::before {
  border-color: var(--control-active) !important;
  background: var(--control-active) !important;
}

body.admin-page #m-case :where(.check-control,.gdpr-consent-check) {
  color: var(--control-text) !important;
  font-weight: 500 !important;
}

body.admin-page .gdpr-consent-card {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

body.admin-page .gdpr-consent-text {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(input[type="checkbox"],input[type="radio"]):not(:checked),
body.site-page[data-portal-theme="dark"] :where(input[type="checkbox"],input[type="radio"]):not(:checked),
body.portal-page[data-portal-theme="dark"] :where(input[type="checkbox"],input[type="radio"]):not(:checked) {
  border-color: color-mix(in srgb, var(--ink) 58%, var(--control-bg)) !important;
  background: var(--control-bg) !important;
}

@media (max-width: 720px) {
  body.admin-page #m-item .case-item-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-page #m-item .case-item-section-head small {
    text-align: left;
  }

  body.admin-page #m-item .case-item-catalog-selection {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  body.admin-page #m-item .case-item-catalog-selection > b {
    grid-column: 2;
  }

  body.admin-page #m-item .modal-foot {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  body.admin-page #m-item .modal-foot .btn-primary {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.admin-page #m-item .case-item-catalog-loading > span { animation-duration: 1.8s; }
}

/* R323 chart and icon foundation -----------------------------------------
   The legacy stylesheet hid the complete chart grid at a later cascade
   position.  This component layer is the authoritative dashboard contract. */
body.admin-page #v-dashboard .admin-chart-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 14px 0 !important;
}

body.admin-page #v-dashboard .admin-chart-card {
  position: relative;
  min-width: 0;
  min-height: 258px !important;
  max-height: none !important;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

body.admin-page #v-dashboard .admin-chart-card canvas {
  width: 100% !important;
  height: 190px !important;
  max-height: 190px !important;
  padding: 10px 14px 14px;
}

body.admin-page #v-dashboard .admin-chart-card .chart-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  padding: 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

body.admin-page #v-reports #r-audit .report-table-wrap {
  max-height: 430px;
  overflow: auto;
  scrollbar-gutter: stable;
}

body.admin-page #v-reports #r-audit .data-table thead {
  position: sticky;
  z-index: 1;
  top: 0;
}

body.admin-page #sb .admin-nav .icon {
  width: 30px !important;
  height: 30px !important;
  padding: 6px !important;
  border: 1px solid color-mix(in srgb, #fff 15%, transparent) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, #fff 8%, transparent) !important;
  color: currentColor !important;
}

body.admin-page #sb .admin-nav .icon svg,
body.admin-page :where(.icon-button,.icon-control,.btn,.table-action) .icon svg,
body.site-page .icon svg,
body.portal-page .icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  vector-effect: non-scaling-stroke;
}

/* Shared control cleanup: one surface, one border and a keyboard-only focus ring. */
body.admin-page :where(.btn.btn-primary,.action-btn,.submit-btn),
body.site-page :where(.btn-primary,.submit-btn,.search-btn),
body.portal-page :where(.btn-primary,.submit-btn,.portal-case-mini-action,.portal-outline-btn.is-primary) {
  background: var(--primary) !important;
  background-image: none !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
  filter: none !important;
}

body.admin-page :where(.btn.btn-primary,.action-btn,.submit-btn):hover,
body.site-page :where(.btn-primary,.submit-btn,.search-btn):hover,
body.portal-page :where(.btn-primary,.submit-btn,.portal-case-mini-action,.portal-outline-btn.is-primary):hover {
  background: color-mix(in srgb, var(--primary) 88%, #000) !important;
  background-image: none !important;
}

body.admin-page :where(button,.btn,.action-btn,.table-action,.icon-button,.submit-btn,.mini-btn):is(:hover,:active,:focus:not(:focus-visible)),
body.site-page :where(button,.btn,.action-btn,.table-action,.icon-button,.submit-btn,.mini-btn):is(:hover,:active,:focus:not(:focus-visible)),
body.portal-page :where(button,.btn,.action-btn,.table-action,.icon-button,.submit-btn,.mini-btn,.side-action):is(:hover,:active,:focus:not(:focus-visible)) {
  outline: none !important;
}

body.admin-page :where(button,.btn,.action-btn,.table-action,.icon-button,.submit-btn,.mini-btn):focus-visible,
body.site-page :where(button,.btn,.action-btn,.table-action,.icon-button,.submit-btn,.mini-btn):focus-visible,
body.portal-page :where(button,.btn,.action-btn,.table-action,.icon-button,.submit-btn,.mini-btn,.side-action):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent) !important;
  outline-offset: 2px !important;
}

body.admin-page .admin-toolbar :where(.search-box,.icon-button,.icon-control) {
  border: 1px solid var(--control-border, var(--line)) !important;
  background: var(--control-bg, var(--surface)) !important;
  box-shadow: none !important;
}

body.admin-page .admin-toolbar :where(.search-box,.icon-button,.icon-control) > .icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-page .admin-toolbar :where(.search-box,.icon-button,.icon-control) > .icon > svg {
  width: 20px !important;
  height: 20px !important;
}

/* Critical-case rows have four semantic children. The legacy three-column
   grid pushed the action into an implicit, extremely narrow column. */
body.admin-page :where(#d-crits,#cases-side-sla) .crit {
  grid-template-columns: 12px minmax(0,1fr) auto !important;
  grid-template-areas:
    "dot info deadline"
    ". action action";
  align-items: start !important;
  gap: 8px 10px !important;
}

body.admin-page :where(#d-crits,#cases-side-sla) .crit .cdot {
  grid-area: dot;
  align-self: center;
}

body.admin-page :where(#d-crits,#cases-side-sla) .crit .cinfo {
  grid-area: info;
  min-width: 0;
}

body.admin-page :where(#d-crits,#cases-side-sla) .crit :where(.ccod,.ccli,.cdev) {
  overflow-wrap: anywhere;
}

body.admin-page :where(#d-crits,#cases-side-sla) .crit .cdl {
  grid-area: deadline;
  white-space: nowrap;
}

body.admin-page :where(#d-crits,#cases-side-sla) .crit .table-action {
  grid-area: action;
  justify-self: end;
  width: auto !important;
  min-width: 68px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}

body.site-page .public-case-detail-anchor .portal-case-device-art > .portal-case-inline-icon,
body.site-page .public-case-detail-anchor .portal-case-device-box > .portal-case-inline-icon,
body.portal-page .portal-case-device-art > .portal-case-inline-icon,
body.portal-page .portal-case-device-box > .portal-case-inline-icon {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: currentColor !important;
}

body :where(.portal-case-kpis) i[data-kpi] {
  display: grid !important;
  place-items: center !important;
  color: var(--primary) !important;
}

body :where(.portal-case-kpis) i[data-kpi] > .portal-case-inline-icon {
  display: grid !important;
  width: 17px !important;
  height: 17px !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: currentColor !important;
}

body :where(.portal-case-kpis) i[data-kpi] > .portal-case-inline-icon > svg {
  width: 17px !important;
  height: 17px !important;
}

body.admin-page #sb .admin-nav :where(a,button).is-active .icon {
  border-color: color-mix(in srgb, #fff 34%, transparent) !important;
  background: color-mix(in srgb, #fff 17%, transparent) !important;
}

body:is(.site-page,.portal-page) #request-section .svc-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface)) !important;
  color: var(--primary) !important;
}

body:is(.site-page,.portal-page) #request-section .svc-icon .icon {
  width: 20px !important;
  height: 20px !important;
}

/* R323 complete dark-surface contract ------------------------------------
   Covers expanded request accordions and generated profile workspaces, not
   only their collapsed parent cards. */
body.site-page[data-portal-theme="dark"] :where(
  .toggle-head,.toggle-body,.request-form,.tracker-card,.svc-card,
  .legal-stack,.request-doc-box,.estimate-box,.price-hint,.portal-info-pop,
  .recycle-steps,.rc-step,.recycle-mode,.recycle-subpanel,.remote-downloads
),
body.portal-page[data-portal-theme="dark"] :where(
  #request-section,#reservation-section,#prices-section,#full-prices-section,#contacts-section,
  .toggle-card,.toggle-head,.toggle-body,.request-form,.tracker-card,.svc-card,
  .legal-stack,.request-doc-box,.estimate-box,.price-hint,.portal-info-pop,
  .recycle-steps,.rc-step,.recycle-mode,.recycle-subpanel,.remote-downloads,
  .portal-profile-revealed,.portal-profile-revealed > *
) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] :where(
  .toggle-head,.toggle-body,.request-form,.tracker-card,.svc-card,
  .legal-stack,.request-doc-box,.estimate-box,.price-hint,.portal-info-pop,
  .recycle-steps,.rc-step,.recycle-mode,.recycle-subpanel,.remote-downloads,
  .portal-profile-revealed
) :where(h1,h2,h3,h4,strong,b,.svc-title,.tracker-title,.recycle-mode-title) {
  color: var(--ink) !important;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] :where(
  .toggle-head,.toggle-body,.request-form,.tracker-card,.svc-card,
  .legal-stack,.request-doc-box,.estimate-box,.price-hint,.portal-info-pop,
  .recycle-steps,.rc-step,.recycle-mode,.recycle-subpanel,.remote-downloads,
  .portal-profile-revealed
) :where(p,small,label,span,.svc-desc,.tracker-sub,.toggle-sub,.recycle-mode-desc) {
  color: var(--muted) !important;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] :where(
  .request-form,.portal-profile-revealed,.portal-privacy-workspace,.portal-profile-content
) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.form-input,.file-input) {
  border-color: var(--control-border) !important;
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
  box-shadow: none !important;
}

body:is(.site-page,.portal-page)[data-portal-theme="dark"] :where(
  .request-form,.portal-profile-revealed,.portal-privacy-workspace,.portal-profile-content
) :where(input::placeholder,textarea::placeholder) {
  color: var(--control-muted) !important;
  opacity: .92;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .view.active,.admin-left,.admin-right,.admin-dashboard-grid,
  .admin-chart-card,.admin-recent-card,.panel-card,.report-panel,.report-grid,.table-wrap,
  .case-stats,.filters-bar,.catalog-filter-bar,.settings-layout,
  .modal,.modal-body,.modal-foot,.data-table,table,tbody,tr,td
) {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .modal-body,.admin-content,.view.active,.admin-left,.admin-right,.admin-dashboard-grid
) {
  background: var(--bg) !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .panel-card-header,.admin-chart-head,.admin-side-head,.modal-head,.modal-foot,
  .data-table thead,.data-table th,table thead,table th
) {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
}

@media (max-width: 1080px) {
  body.admin-page #v-dashboard .admin-chart-grid {
    grid-template-columns: 1fr !important;
  }
}

/* R328 client-auth and dark-surface ownership ---------------------------
   These rules deliberately live in the component layer. They replace the
   legacy white-card login treatment and keep generated admin surfaces from
   falling back to browser/light defaults after an asynchronous render. */
body.portal-page #portal-profile-auth {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(34px, 6vw, 76px) 0 72px;
}

body.portal-page #portal-profile-auth .portal-auth-shell {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 24px 62px rgba(18, 29, 48, .12);
}

body.portal-page #portal-profile-auth .portal-auth-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(32px, 5vw, 62px);
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  color: var(--ink);
}

body.portal-page #portal-profile-auth .portal-auth-brand-mark,
body.portal-page #portal-profile-auth .portal-login-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

body.portal-page #portal-profile-auth :where(.portal-auth-brand-mark,.portal-login-icon) .icon,
body.portal-page #portal-profile-auth :where(.portal-auth-brand-mark,.portal-login-icon) svg {
  width: 22px;
  height: 22px;
}

body.portal-page #portal-profile-auth .portal-profile-page-title {
  width: auto;
  margin: 0;
  padding: 8px 0 0;
}

body.portal-page #portal-profile-auth .portal-profile-page-title h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

body.portal-page #portal-profile-auth .portal-profile-page-title p {
  max-width: 520px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

body.portal-page #portal-profile-auth .portal-auth-benefits {
  display: grid;
  gap: 12px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

body.portal-page #portal-profile-auth .portal-auth-benefits li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 17%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

body.portal-page #portal-profile-auth .portal-auth-benefits .icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

body.portal-page #portal-profile-auth .portal-auth-benefits .icon svg {
  width: 19px;
  height: 19px;
}

body.portal-page #portal-profile-auth .portal-auth-benefits span,
body.portal-page #portal-profile-auth .portal-auth-benefits strong,
body.portal-page #portal-profile-auth .portal-auth-benefits small {
  display: block;
  min-width: 0;
}

body.portal-page #portal-profile-auth .portal-auth-benefits strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

body.portal-page #portal-profile-auth .portal-auth-benefits small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

body.portal-page #portal-profile-auth .portal-login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(32px, 5vw, 62px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.portal-page #portal-profile-auth .portal-login-card-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

body.portal-page #portal-profile-auth .portal-login-card-head .portal-login-icon {
  margin: 0;
}

body.portal-page #portal-profile-auth .portal-card-kicker {
  color: var(--primary);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .09em;
}

body.portal-page #portal-profile-auth .portal-login-card h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

body.portal-page #portal-profile-auth .portal-login-hint {
  margin: 6px 0 24px;
  color: var(--muted);
  line-height: 1.55;
}

body.portal-page #portal-profile-auth :where(.portal-login-form,.portal-forgot-form,.portal-reset-form) {
  display: grid;
  gap: 14px;
  margin: 0;
}

body.portal-page #portal-profile-auth :where(.portal-login-form,.portal-forgot-form,.portal-reset-form) .form-group {
  margin: 0;
}

body.portal-page #portal-profile-auth :where(.form-input,input:not([type="hidden"])) {
  min-height: 48px;
  border-color: var(--control-border, var(--line));
  background: var(--control-bg, var(--card));
  color: var(--control-text, var(--ink));
  box-shadow: none;
}

body.portal-page #portal-profile-auth .portal-login-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
}

body.portal-page #portal-profile-auth .portal-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

body.portal-page #portal-profile-auth .portal-login-divider::before,
body.portal-page #portal-profile-auth .portal-login-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--line);
}

body.portal-page #portal-profile-auth .portal-login-assistance {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
  align-items: end;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

body.portal-page #portal-profile-auth .portal-login-assistance > div {
  align-self: center;
}

body.portal-page #portal-profile-auth .portal-login-assistance strong,
body.portal-page #portal-profile-auth .portal-login-assistance small {
  display: block;
}

body.portal-page #portal-profile-auth .portal-login-assistance strong {
  color: var(--ink);
  font-size: 13px;
}

body.portal-page #portal-profile-auth .portal-login-assistance small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

body.portal-page #portal-profile-auth .portal-forgot-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0;
  border: 0;
  background: transparent;
}

body.portal-page #portal-profile-auth .portal-forgot-form .btn {
  width: auto;
  min-height: 48px;
  white-space: nowrap;
}

body.portal-page #portal-profile-auth .portal-login-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 11px;
}

body.portal-page #portal-profile-auth .portal-login-privacy .icon,
body.portal-page #portal-profile-auth .portal-login-privacy svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

body.portal-page[data-portal-theme="dark"] #portal-profile-auth .portal-auth-shell,
body.portal-page[data-portal-theme="dark"] #portal-profile-auth :where(.portal-auth-intro,.portal-login-card,.portal-login-assistance) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.portal-page[data-portal-theme="dark"] #portal-profile-auth .portal-auth-intro {
  background: color-mix(in srgb, var(--primary) 13%, var(--surface)) !important;
}

body.portal-page[data-portal-theme="dark"] #portal-profile-auth .portal-login-assistance {
  background: var(--surface-soft) !important;
}

body.portal-page[data-portal-theme="dark"] #portal-profile-auth :where(h1,h2,strong,.form-label) {
  color: var(--ink) !important;
}

body.portal-page[data-portal-theme="dark"] #portal-profile-auth :where(p,small,.portal-login-divider) {
  color: var(--muted) !important;
}

/* The default service logo already owns its dark rounded surface. A forced
   white image background created the extra tile circled in QA screenshots. */
body.admin-page .admin-brand .logo-img,
body.admin-page #sb .admin-brand .logo-img {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .admin-toolbar .search-box > .icon,
  .admin-toolbar .icon-control > .icon,
  .admin-toolbar .icon-button > .icon,
  .case-search-box > .icon,
  .admin-avatar
) {
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) .admin-avatar {
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--primary) 84%, #fff) !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .data-table thead,.data-table th,table thead,table th,
  .panel-card-header,.admin-side-head,.admin-chart-head,.ch
) {
  border-color: var(--line) !important;
  background-color: var(--surface-soft) !important;
  background-image: none !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .panel-card-header,.admin-side-head,.admin-chart-head,.ch
) :where(h2,h3,strong) {
  color: var(--ink) !important;
}

body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .empty-mini,.admin-empty-state,.case-detail-empty-compact,.case-detail-empty-row,
  .report-empty,.case-chat-empty,.admin-load-error
) {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  body.portal-page #portal-profile-auth .portal-auth-shell {
    grid-template-columns: 1fr;
  }

  body.portal-page #portal-profile-auth .portal-auth-intro {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  body.portal-page #portal-profile-auth {
    width: min(100% - 24px, 560px);
    padding: 22px 0 54px;
  }

  body.portal-page #portal-profile-auth .portal-auth-shell {
    border-radius: 18px;
  }

  body.portal-page #portal-profile-auth :where(.portal-auth-intro,.portal-login-card) {
    padding: 24px !important;
  }

  body.portal-page #portal-profile-auth .portal-auth-benefits {
    margin-top: 24px;
  }

  body.portal-page #portal-profile-auth .portal-login-card-head,
  body.portal-page #portal-profile-auth .portal-login-assistance,
  body.portal-page #portal-profile-auth .portal-forgot-form {
    grid-template-columns: 1fr;
  }

  body.portal-page #portal-profile-auth .portal-forgot-form .btn {
    width: 100%;
  }
}

/* R329 full visual-surface and choice-control contract -------------------
   The live audit checks the rendered controls, not only token definitions.
   Keep one background/border owner for every generated admin surface and
   expose public problem choices as real keyboard buttons. */
body:is(.site-page,.portal-page) #request-section button.prob-tag {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
}

body:is(.site-page,.portal-page) #request-section button.prob-tag:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 58%, transparent) !important;
  outline-offset: 2px !important;
}

body:is(.site-page,.portal-page) #request-section button.prob-tag[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line)) !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;
  color: var(--primary) !important;
}

body:is(.site-page,.portal-page) .portal-info-icon-btn {
  display: inline-grid !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}

body:is(.site-page,.portal-page) .portal-info-icon-btn :where(.icon,.portal-case-inline-icon,svg) {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.admin-page #sb .admin-nav :where(a,button) {
  font-weight: 500 !important;
}

body.admin-page #sb .admin-nav :where(a,button).is-active {
  font-weight: 600 !important;
}

body.admin-page :where(.search-box,.case-search-box) > .icon {
  display: inline-grid !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.admin-page :where(.search-box,.case-search-box) > .icon > svg {
  width: 20px !important;
  height: 20px !important;
}

:root[data-theme="dark"] body.admin-page,
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) {
  --bg: #0b1220;
  --surface: #111a28;
  --surface-soft: #0d1726;
  --text: #eef4ff;
  --ink: #f8fbff;
  --muted: #b8c4d6;
  --muted-2: #8fa1b8;
  --line: #304056;
  --line-strong: #40516a;
  --card: var(--surface);
  --admin-panel: var(--surface);
  --admin-panel-2: var(--surface-soft);
  --admin-field: #0b1322;
  --admin-field-text: #f8fbff;
  --admin-field-muted: #aebbd0;
  --control-bg: #0b1322;
  --control-bg-muted: var(--surface);
  --control-text: #f8fbff;
  --control-muted: #aebbd0;
  --control-border: var(--line);
  color-scheme: dark;
  background: var(--bg) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] body.admin-page :where(#main,#content,.admin-main,.admin-content,.view.active),
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(#main,#content,.admin-main,.admin-content,.view.active) {
  background: var(--bg) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] body.admin-page :where(
  .card,.panel-card,.admin-chart-card,.admin-recent-card,.admin-side-panel,
  .finance-panel,.report-panel,.table-wrap,.data-table,table,tbody,tr,td,
  .filters-bar,.catalog-filter-bar,.case-stats,.stat-card,.fin-kpi,
  .case-detail-head,.case-brief-grid article,.case-doc-quickbar,
  .case-detail-layout,.case-detail-layout .card,.case-summary-panel,
  .tech-workspace,.tech-work-card,.complaints-register-card,
  .complaint-register-shell,.recycling-register-shell,.settings-layout,
  .settings-menu,.settings-section,.visual-module,.modal
),
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .card,.panel-card,.admin-chart-card,.admin-recent-card,.admin-side-panel,
  .finance-panel,.report-panel,.table-wrap,.data-table,table,tbody,tr,td,
  .filters-bar,.catalog-filter-bar,.case-stats,.stat-card,.fin-kpi,
  .case-detail-head,.case-brief-grid article,.case-doc-quickbar,
  .case-detail-layout,.case-detail-layout .card,.case-summary-panel,
  .tech-workspace,.tech-work-card,.complaints-register-card,
  .complaint-register-shell,.recycling-register-shell,.settings-layout,
  .settings-menu,.settings-section,.visual-module,.modal
) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body.admin-page :where(
  .data-table thead,.data-table thead tr,.data-table th,table thead,table thead tr,table th,
  .panel-card-header,.admin-chart-head,.admin-side-head,.ch,.ph,
  .modal-head,.modal-foot,.settings-head,.complaint-register-head,
  .recycling-register-head,.case-tabs,.theme-subtabs
),
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .data-table thead,.data-table thead tr,.data-table th,table thead,table thead tr,table th,
  .panel-card-header,.admin-chart-head,.admin-side-head,.ch,.ph,
  .modal-head,.modal-foot,.settings-head,.complaint-register-head,
  .recycling-register-head,.case-tabs,.theme-subtabs
) {
  border-color: var(--line) !important;
  background: #0d1726 !important;
  background-image: none !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body.admin-page :where(
  .empty-mini,.admin-empty-state,.case-detail-empty-compact,.case-detail-empty-row,
  .report-empty,.case-chat-empty,.admin-load-error,.catalog-stats,
  .complaint-evidence-note,.recycling-empty,.ld
),
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(
  .empty-mini,.admin-empty-state,.case-detail-empty-compact,.case-detail-empty-row,
  .report-empty,.case-chat-empty,.admin-load-error,.catalog-stats,
  .complaint-evidence-note,.recycling-empty,.ld
) {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  background-image: none !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body.admin-page :where(.avatar,.admin-avatar),
body.admin-page:is([data-theme="dark"],[data-admin-theme="dark"]) :where(.avatar,.admin-avatar) {
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface)) !important;
  background-image: none !important;
  color: color-mix(in srgb, var(--primary) 84%, #fff) !important;
  box-shadow: none !important;
}