@layer components {
  .cx-modal-backdrop[hidden] { display: none !important; }

  .cx-modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--cx-space-5);
    background: rgba(7, 26, 29, .54);
    z-index: 1000;
  }

  .cx-modal {
    width: min(760px, 100%);
    max-height: min(82vh, 760px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: var(--cx-radius-xl);
    background: var(--cx-surface);
    box-shadow: var(--cx-shadow-card);
  }
}

@layer components {
  .cx-modal-header, .cx-modal-footer, .cx-modal-body { padding:var(--cx-space-5); }
  .cx-modal-header { display:flex; align-items:center; justify-content:space-between; gap:var(--cx-space-3); border-block-end:1px solid var(--cx-border); }
  .cx-modal-footer { border-block-start:1px solid var(--cx-border); }
  .cx-modal-sm { width:min(480px,100%); }
  .cx-modal-lg { width:min(980px,100%); }
  .cx-modal-xl { width:min(1180px,100%); }
  .cx-confirm { display:grid; gap:var(--cx-space-4); }
  .cx-drawer-backdrop[hidden] { display:none !important; }
  .cx-drawer-backdrop { position:fixed; inset:0; z-index:1050; display:flex; justify-content:flex-end; background:rgba(7,26,29,.35); }
  .cx-drawer { inline-size:min(560px,100%); block-size:100%; overflow:auto; background:var(--cx-surface); box-shadow:var(--cx-shadow-card); }
  .cx-drawer-header, .cx-drawer-body, .cx-drawer-footer { padding:var(--cx-space-5); }
  .cx-drawer-header { display:flex; align-items:center; justify-content:space-between; gap:var(--cx-space-3); border-block-end:1px solid var(--cx-border); }
  .cx-drawer-footer { border-block-start:1px solid var(--cx-border); }
}

@layer components {
  .cx-modal { display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; }
  .cx-modal-body { overflow:auto; overscroll-behavior:contain; }
  .cx-modal-header { position:sticky; top:0; z-index:2; background:var(--cx-surface); }
  .cx-modal-footer { position:sticky; bottom:0; z-index:2; display:flex; align-items:center; justify-content:flex-end; gap:.75rem; flex-wrap:wrap; background:var(--cx-surface); }
  .cx-modal-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--cx-space-4); margin-block-end:var(--cx-space-4); }
  .cx-modal-table-area { display:grid; gap:var(--cx-space-4); min-width:0; }
  .cx-modal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--cx-space-3); flex-wrap:wrap; }
  .cx-confirm-danger .cx-modal-header, .cx-confirm[data-semantic="danger"] .cx-modal-header { border-block-end-color:var(--cx-sem-loss-line); }
  .cx-confirm-danger h2, .cx-confirm[data-semantic="danger"] h2 { color:var(--cx-sem-loss); }
  @media (max-width:720px) {
    .cx-modal-backdrop { padding:.65rem; align-items:stretch; }
    .cx-modal, .cx-modal-lg, .cx-modal-xl { width:100%; max-height:calc(100vh - 1.3rem); border-radius:var(--cx-radius-lg); }
    .cx-modal-footer .cx-btn { flex:1 1 auto; }
  }
}


@layer components {
  .cx-smart-detail-modal {
    width: min(1280px, 100%);
    max-height: min(90vh, 920px);
  }
  .cx-smart-detail-backdrop { z-index: 1200; }
  .cx-smart-detail { display:grid; gap:var(--cx-space-5); min-width:0; }
  .cx-smart-detail-subtitle { margin:0; color:var(--cx-muted); font-weight:800; line-height:1.7; }
  .cx-smart-detail-summary .cx-grid { margin:0; }
  .cx-smart-detail-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--cx-space-3);
    flex-wrap:wrap;
    padding:var(--cx-space-3);
    border:1px solid var(--cx-border);
    border-radius:var(--cx-radius-lg);
    background:rgba(255,255,255,.72);
  }
  .cx-smart-detail-toolbar-start { display:flex; align-items:center; gap:var(--cx-space-3); flex-wrap:wrap; min-width:0; flex:1 1 460px; }
  .cx-smart-detail-search { min-width:min(360px,100%); flex:1 1 260px; }
  .cx-smart-detail-actions { justify-content:flex-end; }
  .cx-smart-detail-table-area { display:grid; gap:0; min-width:0; }
  .cx-smart-detail-table-area .cx-table-wrap { max-height:min(52vh,560px); }
  .cx-smart-detail-table-area .cx-table th { top:0; }
  .cx-smart-detail-pagination {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--cx-space-3);
    flex-wrap:wrap;
    padding:var(--cx-space-4);
    border:1px solid var(--cx-border);
    border-block-start:0;
    border-radius:0 0 var(--cx-radius-lg) var(--cx-radius-lg);
    background:rgba(255,255,255,.78);
  }
  .cx-smart-detail-modal[data-semantic="profit"] .cx-modal-header { border-block-end-color:var(--cx-sem-profit-line); }
  .cx-smart-detail-modal[data-semantic="loss"], .cx-smart-detail-modal[data-semantic="danger"] { --cx-row-hover-border:var(--cx-sem-loss); }
  .cx-smart-detail-modal[data-semantic="cost"] { --cx-row-hover-border:var(--cx-sem-cost); }
  .cx-smart-detail-modal[data-semantic="inventory"] { --cx-row-hover-border:var(--cx-sem-inventory); }
  .cx-smart-detail-modal[data-semantic="forecast"] { --cx-row-hover-border:var(--cx-sem-forecast); }
  .cx-smart-detail-modal[data-semantic="settlement"] { --cx-row-hover-border:var(--cx-sem-settlement); }
  [data-smart-detail] { cursor:pointer; }
  [data-smart-detail]:focus-visible { outline:3px solid var(--cx-focus); outline-offset:3px; }
  @media (max-width: 1024px) {
    .cx-smart-detail-modal { width:calc(100vw - 1.5rem); max-height:calc(100vh - 1.5rem); }
    .cx-smart-detail-table-area .cx-table-wrap { max-height:50vh; }
  }
  @media (max-width: 720px) {
    .cx-smart-detail-backdrop { padding:.5rem; align-items:stretch; }
    .cx-smart-detail-modal { width:100%; height:calc(100vh - 1rem); max-height:calc(100vh - 1rem); border-radius:var(--cx-radius-lg); }
    .cx-smart-detail-modal .cx-modal-header,
    .cx-smart-detail-modal .cx-modal-body,
    .cx-smart-detail-modal .cx-modal-footer { padding:var(--cx-space-4); }
    .cx-smart-detail-toolbar { align-items:stretch; }
    .cx-smart-detail-toolbar-start, .cx-smart-detail-actions, .cx-smart-detail-search { width:100%; flex-basis:100%; }
    .cx-smart-detail-actions .cx-btn { flex:1 1 auto; }
    .cx-smart-detail-table-area .cx-table-wrap { max-height:46vh; }
    .cx-smart-detail-pagination { justify-content:center; }
    .cx-smart-detail-pagination .cx-pagination-info { width:100%; text-align:center; margin:0; }
    .cx-smart-detail-pagination .cx-field { flex:1 1 100%; }
  }
}

@layer components {
  .cx-modal {
    background: var(--cx-glass-strong);
    border: 1px solid var(--cx-border);
    backdrop-filter: blur(20px);
  }
  .cx-modal-header,
  .cx-modal-footer { background: var(--cx-glass-strong); }
  .cx-smart-detail-modal .cx-modal-header {
    min-height: 76px;
    align-items: center;
  }
  .cx-smart-detail-modal .cx-modal-header h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); }
  .cx-smart-detail-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    gap: var(--cx-space-3);
    background: var(--cx-table-toolbar-bg);
    backdrop-filter: blur(14px);
  }
  .cx-smart-detail-toolbar-start { min-width: 0; flex: initial; width: 100%; }
  .cx-smart-detail-search { min-width: min(520px, 100%); flex: 1 1 520px; }
  .cx-smart-detail-search .cx-input { min-height: 46px; font-weight: 800; }
  .cx-smart-detail-actions { justify-content: flex-end; flex-wrap: nowrap; }
  .cx-smart-detail-pagination {
    background: var(--cx-table-toolbar-bg);
    backdrop-filter: blur(14px);
    justify-content: space-between;
  }
  .cx-smart-detail-page-size {
    display: inline-grid;
    grid-template-columns: auto minmax(84px, 104px);
    align-items: center;
    gap: .55rem;
    margin-inline-start: auto;
  }
  .cx-pagination-buttons { display: inline-flex; align-items: center; gap: .55rem; }
  .cx-smart-detail-table-area .cx-table-wrap { background: var(--cx-surface); }
  .cx-smart-detail-table-area .cx-table-empty { min-height: 110px; }
  .cx-search-clear[hidden] { display: none !important; }
  @media (max-width: 820px) {
    .cx-smart-detail-toolbar { grid-template-columns: 1fr; }
    .cx-smart-detail-actions { justify-content: stretch; flex-wrap: wrap; }
    .cx-smart-detail-actions .cx-btn { flex: 1 1 auto; }
    .cx-smart-detail-pagination { justify-content: center; }
    .cx-smart-detail-page-size { margin-inline-start: 0; }
    .cx-pagination-buttons { width: 100%; justify-content: center; }
  }
}

/* Phase 31C — Costix modal and smart-detail visual consistency */
@layer components {
  .cx-modal-backdrop { background: rgba(13, 9, 32, .62); }
  .cx-modal {
    background: var(--cx-glass-strong);
    border: 1px solid var(--cx-border);
    box-shadow: var(--cx-shadow-card);
    backdrop-filter: none;
  }
  .cx-modal-header,
  .cx-modal-footer {
    background: var(--cx-glass-strong);
    border-color: var(--cx-border);
  }
  .cx-modal-header h2 { color: var(--cx-text); }
  .cx-smart-detail-toolbar,
  .cx-smart-detail-pagination {
    background: var(--cx-table-toolbar-bg);
    border-color: var(--cx-border);
    backdrop-filter: none;
  }
  .cx-smart-detail-table-area .cx-table-wrap { background: var(--cx-surface); }
  .cx-smart-detail-page-size .cx-select,
  .cx-pagination-size .cx-select,
  .cx-pagination-size select {
    background: var(--cx-control-bg);
    border-color: var(--cx-control-border);
    color: var(--cx-text);
    border-radius: var(--cx-radius-md);
  }
}