/* Ant Design visual specification, implemented with the existing native UI.
   Keep layout/breakpoint contracts in styles.css; this layer owns design tokens
   and component appearance. Primary actions and success states are distinct. */
:root {
  --primary: #1677ff;
  --primary-hover: #4096ff;
  --primary-active: #0958d9;
  --primary-soft: #e6f4ff;
  --ink: #262626;
  --muted: #595959;
  --subtle: #767676;
  --line: #f0f0f0;
  --line-strong: #d9d9d9;
  --canvas: #f5f5f5;
  --paper: #fff;
  --soft: #fafafa;
  --green: #389e0d;
  --green-dark: #237804;
  --green-soft: #f6ffed;
  --amber: #ad6800;
  --amber-soft: #fffbe6;
  --red: #cf1322;
  --red-soft: #fff1f0;
  --blue: #0958d9;
  --blue-soft: #e6f4ff;
  --sidebar: #fff;
  --sidebar-width: 232px;
  --surface: var(--paper);
  --surface-muted: var(--soft);
  --border: var(--line-strong);
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 8px;
  --shadow: none;
  --shadow-lg: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px rgb(0 0 0 / 6%);
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar { color: var(--ink); border-right: 1px solid var(--line); box-shadow: none; transition: transform .2s; }
.workspace { transition: none; }
.brand-block { min-height: 64px; padding: 12px 16px; border-bottom-color: var(--line); }
.brand { gap: 10px; }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 600; }
.brand-copy small { display: none; }
.brand-copy strong { margin: 0; font-size: 16px; font-weight: 600; }
.icon-button { border-radius: 6px; }
.icon-button:hover { background: #f5f5f5; }
.sidebar-collapse { width: 24px; color: var(--muted); }
.primary-nav { padding: 16px 8px; }
.nav-caption { margin: 20px 16px 8px; color: var(--subtle); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.nav-link { min-height: 40px; padding: 8px 16px; border-radius: 6px; color: var(--muted); font-weight: 400; transition: background-color .15s, color .15s; }
.nav-link:hover { background: #f5f5f5; color: var(--ink); }
.nav-link.active { background: var(--primary-soft); color: var(--primary-active); box-shadow: none; font-weight: 500; }
.nav-icon, .nav-icon svg { width: 18px; height: 18px; }
.nav-count { background: #f0f0f0; color: var(--muted); font-weight: 400; }
.nav-link.active .nav-count { background: #bae0ff; color: var(--primary-active); }
.sidebar-foot { padding: 16px; border-top-color: var(--line); }
.release-note { background: var(--soft); border-color: var(--line); border-radius: 6px; }
.release-note small, .legacy-link.inverse { color: var(--subtle); }
.release-note strong { font-weight: 500; }
.release-dot { background: var(--primary); box-shadow: none; }
.legacy-link { color: var(--primary-active); }
.topbar { min-height: 64px; padding: 8px 24px; background: #fff; backdrop-filter: none; }
.breadcrumbs { font-size: 13px; }
.breadcrumbs span:last-child { font-weight: 500; }
.prototype-badge { min-height: 24px; padding: 2px 8px; border-color: #d9d9d9; border-radius: 4px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 400; }
.system-status { min-height: 32px; border-color: #b7eb8f; border-radius: 6px; font-size: 12px; }
.system-status b { font-weight: 400; }
.admin-avatar, .account-avatar { background: var(--primary-soft); color: var(--primary-active); font-weight: 500; }
.admin-avatar { border-radius: 50%; }
.view { padding: 24px 24px 48px; }
.page-head { align-items: center; margin-bottom: 24px; }
.page-head h1, .cfg-apply .page-head h1 { font-size: 24px; line-height: 1.4; letter-spacing: 0; font-weight: 600; }
.page-head .eyebrow { display: none; }
.page-head p:last-child { font-size: 14px; }
.button { min-height: 32px; padding: 5px 15px; font-size: 14px; line-height: 1.5; font-weight: 400; box-shadow: 0 2px 0 rgb(0 0 0 / 2%); transition: border-color .15s, background-color .15s, color .15s; }
.button:hover { border-color: var(--primary-hover); color: var(--primary); background: #fff; }
.button.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.button.primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
.button.primary:active { background: var(--primary-active); }
.button.compact { min-height: 28px; padding: 3px 10px; font-size: 12px; }
.button.danger:hover { background: #ff4d4f; border-color: #ff4d4f; color: #fff; }
.button.danger-subtle:hover { border-color: #ff4d4f; color: #ff4d4f; }
.button:disabled { opacity: 1; color: #bfbfbf; border-color: #d9d9d9; background: #f5f5f5; box-shadow: none; }
.button:not(:disabled):active { transform: scale(.98); }
.status-banner { border: 1px solid #b7eb8f; background: var(--green-soft); padding: 16px 24px; }
.status-banner h2 { font-size: 16px; font-weight: 600; }
.status-icon { background: #d9f7be; color: var(--green-dark); }
.status-banner.warning { border-color: #ffe58f; background: var(--amber-soft); }
.status-banner.danger { border-color: #ffa39e; background: var(--red-soft); }
.metric { padding: 24px; }
.metric-label { font-size: 14px; }
.metric strong { font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.metric small, .help, .row-copy small, .panel-head p { font-size: 12px; }
.panel-head { padding: 16px 24px; }
.panel-head h2, .panel-head h3 { font-size: 16px; font-weight: 600; }
.panel-body { padding: 24px; }
.panel-body.flush { padding: 0; }
.panel-foot { padding: 16px 24px; }
.quick-link { background: #fff; border-radius: 6px; }
.quick-link:hover { border-color: var(--primary-hover); background: var(--primary-soft); }
.quick-link strong, .row-copy strong { font-weight: 500; }
.toolbar { padding: 24px; }
.field { gap: 8px; }
.field>span { color: var(--ink); font-size: 14px; font-weight: 400; }
.field input, .field select, .field textarea, .field-control { min-height: 32px; padding: 5px 11px; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--primary-hover); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: #f5f5f5; color: var(--subtle); cursor: not-allowed; }
.field [aria-invalid=true] { border-color: var(--red); }
.field input[readonly], .field textarea[readonly] { color: var(--muted); }
.form-grid { gap: 24px; }
input[type=checkbox], .switch-line input, .cfg-apply input[type=checkbox] { accent-color: var(--primary); }
.data-table th { background: var(--soft); color: var(--ink); font-weight: 600; }
.data-table th, .data-table td { padding: 16px; font-size: 13px; }
.data-table tbody tr:hover { background: #fafafa; }
.data-table td a:not(.button) { color: var(--primary-active); }
.badge { border: 1px solid transparent; border-radius: 4px; font-size: 12px; font-weight: 400; padding: 1px 7px; }
.badge.success { border-color: #b7eb8f; }
.badge.warning { border-color: #ffe58f; }
.badge.danger { border-color: #ffa39e; }
.badge.info { border-color: #91caff; }
.badge.neutral { background: #fafafa; border-color: #d9d9d9; }
.account-identity h2 { font-weight: 600; }
.account-nav a { font-weight: 400; }
.account-nav a.active { border-left-color: var(--primary); background: var(--primary-soft); color: var(--primary-active); }
.subtabs { gap: 24px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
.subtabs a { min-height: 46px; padding: 12px 0; border-radius: 0; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 400; }
.subtabs a.active { border-bottom-color: var(--primary); background: transparent; color: var(--primary); box-shadow: none; }
.modal::backdrop { background: rgb(0 0 0 / 45%); backdrop-filter: none; }
.modal-head, .modal-body { padding: 24px; }
.modal-head h2 { font-size: 16px; font-weight: 600; }
.modal-actions { padding: 16px 24px; background: #fff; flex-wrap: wrap; }
.toast { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.toast.error { background: var(--red-soft); color: var(--red); border-color: #ffa39e; }
.toast.warning { background: var(--amber-soft); color: var(--amber); border-color: #ffe58f; }
.empty-state { color: var(--subtle); }
.loading-state span { border-top-color: var(--primary); }
.login-screen { background: var(--canvas); }
.login-card { border-radius: 8px; }
.login-card h1 { font-size: 24px; font-weight: 600; }
.login-card .eyebrow { color: var(--subtle); }
.login-card .button { min-height: 40px; }
.cfg-apply input, .cfg-apply select { border-radius: 6px; }
.cfg-apply .cfg-binding-card.is-selected { border-color: var(--primary); box-shadow: inset 3px 0 var(--primary); background: #f7fbff; }
.cfg-apply .cfg-account-settings>summary, .cfg-apply-bar #cfgSelectedCount { color: var(--primary-active); }
.cfg-apply-bar .button { background: var(--primary); border-color: var(--primary); font-weight: 400; }
.cfg-apply-bar .button:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.cfg-apply-bar .button:disabled { background: #f5f5f5; border-color: #d9d9d9; color: #bfbfbf; opacity: 1; }
@media (min-width: 821px) {
  .collapsed .brand-block { padding-inline: 8px; flex-wrap: wrap; justify-content: center; }
  .collapsed .sidebar-collapse { display: grid; }
}
@media (max-width: 820px) {
  .view { padding: 20px 16px 40px; }
  .topbar { padding: 8px 16px; }
  .page-head { align-items: flex-start; }
  .panel-head, .panel-body, .toolbar { padding: 16px; }
  .panel-body.flush { padding: 0; }
  .button { min-height: 40px; }
  .account-nav a.active { border-left-color: transparent; border-bottom-color: var(--primary); }
  .status-banner { padding: 16px; }
  .modal-head, .modal-body, .modal-actions { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .button:not(:disabled):active { transform: none; }
}

/* Managed account directory: wrap filters without widening the page. */
.account-list-toolbar { flex-wrap: wrap; }
.account-list-toolbar .filters { flex: 1 1 700px; }
.account-list-toolbar .field { flex: 1 1 130px; }
.account-list-toolbar .field:first-child { flex-basis: 280px; }
.account-list-toolbar .field:nth-child(2) { flex-basis: 220px; }
.account-list-toolbar select { max-width: 100%; }
#accountTable { min-width: 1050px; }
#accountTable .account-organization { min-width: 170px; max-width: 280px; white-space: normal; overflow-wrap: anywhere; }
#accountFilterSummary { margin-top: 0; }
#accountTable [hidden] { display: none; }
@media (max-width: 820px) { .account-list-toolbar .filters { flex-basis: auto; width: 100%; } }