@layer components {
  .cx-field { display: grid; gap: .4rem; min-width: 0; }
  .cx-label { font-weight: 850; color: var(--cx-text); }
  .cx-help { color: var(--cx-muted); font-size: .88rem; }
  .cx-input,
  .cx-select,
  .cx-textarea {
    inline-size: 100%;
    min-height: var(--cx-control-height, 44px);
    border: 1px solid var(--cx-control-border, var(--cx-border));
    border-radius: var(--cx-radius-md);
    background: var(--cx-control-bg, var(--cx-surface));
    color: var(--cx-text);
    padding: .7rem .85rem;
    transition: border-color var(--cx-transition), box-shadow var(--cx-transition), background var(--cx-transition);
  }
  .cx-textarea { min-height: 96px; resize: vertical; }
  .cx-input:hover,
  .cx-select:hover,
  .cx-textarea:hover { border-color: color-mix(in srgb, var(--cx-brand-accent) 30%, var(--cx-control-border, var(--cx-border))); }
  .cx-input:focus,
  .cx-select:focus,
  .cx-textarea:focus { outline: 0; border-color: var(--cx-brand-accent); box-shadow: 0 0 0 4px var(--cx-focus); }
  .cx-field[data-invalid="true"] .cx-input,
  .cx-field[data-invalid="true"] .cx-select,
  .cx-field[data-invalid="true"] .cx-textarea,
  .cx-input[aria-invalid="true"],
  .cx-select[aria-invalid="true"],
  .cx-textarea[aria-invalid="true"] { border-color: var(--cx-sem-loss); box-shadow: 0 0 0 4px var(--cx-sem-loss-soft); }
  .cx-validation-message { color: var(--cx-sem-loss); font-size: .82rem; font-weight: 850; }
  .cx-required-mark { color: var(--cx-sem-loss); margin-inline-start: .2rem; }
  .cx-form-stack { display: grid; gap: var(--cx-space-4); }
  .cx-form-error { padding: .85rem 1rem; border: 1px solid rgba(180,35,24,.24); border-radius: var(--cx-radius-md); background: rgba(180,35,24,.08); color: var(--cx-danger); font-weight: 850; }
  .cx-icon-text { display: inline-flex; align-items: center; gap: .45rem; }

  .cx-search { position: relative; display: flex; align-items: center; min-height: var(--cx-control-height); min-width: min(100%, 220px); }
  .cx-search::before { content: '⌕'; position: absolute; inset-inline-start: .85rem; color: var(--cx-muted); font-weight: 900; pointer-events: none; }
  [dir="rtl"] .cx-search::before { inset-inline-start: auto; inset-inline-end: .85rem; }
  .cx-search .cx-input,
  .cx-search-input { inline-size: 100%; padding-inline-start: 2.35rem; padding-inline-end: 2.4rem; direction: rtl; }
  [dir="rtl"] .cx-search .cx-input,
  [dir="rtl"] .cx-search-input { padding-inline-start: 2.4rem; padding-inline-end: 2.35rem; }
  .cx-search-clear { position: absolute; inset-inline-end: .45rem; inline-size: 2rem; block-size: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--cx-muted); display: grid; place-items: center; cursor: pointer; }
  [dir="rtl"] .cx-search-clear { inset-inline-end: auto; inset-inline-start: .45rem; }
  .cx-search-clear:hover { background: var(--cx-sem-neutral-soft); color: var(--cx-text); }
  .cx-search[data-loading="true"]::after { content: ''; position: absolute; inset-inline-end: .86rem; inline-size: 1rem; block-size: 1rem; border: 2px solid var(--cx-brand-soft); border-block-start-color: var(--cx-brand-strong); border-radius: 999px; animation: cx-spin 800ms linear infinite; }
  [dir="rtl"] .cx-search[data-loading="true"]::after { inset-inline-end: auto; inset-inline-start: .86rem; }

  .cx-filter-panel,
  .cx-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--cx-space-4);
    align-items: end;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-lg);
    background: var(--cx-table-toolbar-bg);
    padding: var(--cx-space-4);
    box-shadow: var(--cx-shadow-soft);
  }
  .cx-filter-bar .cx-search { min-width: 0; }
  .cx-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
  .cx-no-results { border: 1px dashed var(--cx-border); border-radius: var(--cx-radius-lg); padding: var(--cx-space-5); background: var(--cx-sem-neutral-soft); color: var(--cx-muted); text-align: center; font-weight: 850; }
  .cx-pagination-size .cx-select,
  .cx-pagination-size select { min-width: 86px; text-align: center; font-weight: 900; }

  .cx-scope-filter-card {
    margin-block-end: var(--cx-space-5);
    border: 1px solid color-mix(in srgb, var(--cx-brand-accent) 16%, var(--cx-border));
    border-radius: var(--cx-radius-xl);
    background: var(--cx-panel-bg);
    box-shadow: var(--cx-shadow-soft);
    overflow: visible;
  }
  .cx-scope-filter { display: grid; gap: var(--cx-space-3); padding: var(--cx-space-4); overflow: visible; }
  .cx-scope-filter-fields {
    display: grid;
    grid-template-columns: minmax(270px, 1.5fr) minmax(150px, .85fr) minmax(150px, .85fr) minmax(150px, .85fr) minmax(150px, .85fr);
    gap: var(--cx-space-3);
    align-items: end;
    inline-size: 100%;
  }
  .cx-scope-filter-fields > * { min-width: 0; }
  .cx-scope-field .cx-label,
  .cx-scope-field-label { color: var(--cx-text); font-size: .84rem; font-weight: 950; }
  .cx-scope-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .65rem;
    flex-wrap: wrap;
    padding-block-start: .85rem;
    border-block-start: 1px solid color-mix(in srgb, var(--cx-border) 72%, transparent);
  }
  .cx-scope-filter-actions .cx-btn { min-inline-size: 112px; min-height: var(--cx-control-height); }
  .cx-scope-filter-meta { margin-inline-start: auto; color: var(--cx-muted); font-size: .84rem; font-weight: 850; }
  .cx-scope-operational-day { color: var(--cx-brand-strong); }

  .cx-branch-multiselect { position: relative; align-self: end; min-width: 0; border: 0; background: transparent; overflow: visible; }
  .cx-branch-multiselect summary::-webkit-details-marker { display: none; }
  .cx-branch-trigger {
    list-style: none;
    min-height: var(--cx-control-height);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
    border: 1px solid var(--cx-control-border);
    border-radius: var(--cx-radius-md);
    background: var(--cx-control-bg);
    color: var(--cx-text);
    padding: .62rem .85rem;
    transition: border-color var(--cx-transition), box-shadow var(--cx-transition), background var(--cx-transition);
  }
  .cx-branch-trigger:hover,
  .cx-branch-multiselect[open] .cx-branch-trigger { border-color: color-mix(in srgb, var(--cx-brand-accent) 48%, var(--cx-control-border)); box-shadow: 0 0 0 4px var(--cx-focus); }
  .cx-branch-trigger strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cx-brand-strong); font-size: .94rem; font-weight: 950; text-align: start; }
  .cx-branch-trigger i { color: var(--cx-brand-strong); font-style: normal; transition: transform var(--cx-transition); }
  .cx-branch-multiselect[open] .cx-branch-trigger i { transform: rotate(180deg); }
  .cx-branch-menu {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(100% + .5rem);
    z-index: 90;
    inline-size: min(380px, calc(100vw - 2rem));
    max-block-size: 390px;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--cx-brand-accent) 22%, var(--cx-border));
    border-radius: var(--cx-radius-xl);
    background: var(--cx-panel-bg);
    color: var(--cx-text);
    box-shadow: 0 24px 70px rgba(36, 16, 102, .20);
    padding: .7rem;
  }
  [data-theme="dark"] .cx-branch-menu { box-shadow: 0 26px 80px rgba(0,0,0,.48); }
  .cx-branch-menu-head { padding: .45rem .55rem .7rem; color: var(--cx-muted); font-weight: 950; font-size: .83rem; }
  .cx-branch-list { display: grid; gap: .35rem; padding-block: .35rem; border-block: 1px solid var(--cx-border); margin-block: .35rem; }
  .cx-branch-option { position: relative; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: center; gap: .7rem; min-height: 42px; border: 1px solid transparent; border-radius: var(--cx-radius-md); padding: .5rem .6rem; background: transparent; color: var(--cx-text); cursor: pointer; font-weight: 850; transition: background var(--cx-transition), border-color var(--cx-transition), color var(--cx-transition); }
  .cx-branch-option:hover { background: color-mix(in srgb, var(--cx-brand-soft) 62%, transparent); border-color: color-mix(in srgb, var(--cx-brand-accent) 18%, transparent); }
  .cx-branch-option.is-selected { background: linear-gradient(135deg, rgba(91,26,163,.11), rgba(216,59,190,.10)); border-color: rgba(216,59,190,.28); color: var(--cx-brand-strong); }
  .cx-branch-option input { position: absolute; opacity: 0; pointer-events: none; }
  .cx-branch-check { inline-size: 1.08rem; block-size: 1.08rem; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--cx-muted) 36%, transparent); background: var(--cx-surface); display: inline-grid; place-items: center; }
  .cx-branch-option.is-selected .cx-branch-check { border-color: var(--cx-brand-accent); background: linear-gradient(135deg, var(--cx-brand-secondary), var(--cx-brand-accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-brand-accent) 14%, transparent); }
  .cx-branch-option.is-selected .cx-branch-check::after { content: '✓'; color: #fff; font-size: .72rem; font-weight: 1000; line-height: 1; }
  .cx-branch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cx-branch-help { color: var(--cx-muted); font-size: .76rem; line-height: 1.7; padding: .35rem .55rem .15rem; }

  @media (max-width: 1180px) {
    .cx-scope-filter-fields { grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(140px, 1fr)); }
  }
  @media (max-width: 760px) {
    .cx-filter-bar { grid-template-columns: 1fr; }
    .cx-filter-actions { justify-content: stretch; }
    .cx-filter-actions .cx-btn { flex: 1 1 auto; }
    .cx-scope-filter { padding: var(--cx-space-3); }
    .cx-scope-filter-fields { grid-template-columns: 1fr; }
    .cx-scope-filter-actions { justify-content: stretch; }
    .cx-scope-filter-actions .cx-btn { flex: 1 1 120px; }
    .cx-scope-filter-meta { margin-inline-start: 0; inline-size: 100%; }
    .cx-branch-menu { inline-size: 100%; max-inline-size: none; }
  }
}