/* Settings → دلایل و وضعیت‌ها (Figma 469:5952). Scoped under .rl-page. */
.rl-page .rl-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--color-border); margin-block-end: 20px; }
.rl-page .rl-tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; color: var(--color-text-secondary); font: var(--text-body); text-decoration: none; border-bottom: 2px solid transparent; margin-block-end: -1px; white-space: nowrap; }
.rl-page .rl-tab:hover { color: var(--color-text-primary); text-decoration: none; }
.rl-page .rl-tab.is-active { color: var(--color-text-brand); font: var(--text-body-strong); border-bottom-color: var(--color-brand-amber); }
.rl-page .rl-tab__count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--color-gray-100); font: var(--text-caption); color: var(--color-text-secondary); }
.rl-page .rl-tab.is-active .rl-tab__count { background: var(--color-brand-navy-50); color: var(--color-text-brand); }

.rl-page .rl-card { overflow: visible; }
.rl-page .rl-card .card-head { padding-block-end: 20px; }
.rl-page .rl-card .card-head .btn { height: 36px; flex-shrink: 0; }
.rl-page .rl-table th { height: 40px; }
.rl-page .rl-table td { height: 48px; padding-block: 2px; }
.rl-page .rl-col-order { width: 96px; }
.rl-page .rl-col-color { width: 260px; }
.rl-page .rl-col-usage { width: 88px; white-space: nowrap; }
.rl-page .rl-col-active { width: 72px; }
.rl-page .rl-col-order { white-space: nowrap; }
.rl-page .rl-handle { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--color-gray-600); cursor: grab; vertical-align: middle; }
.rl-page .rl-handle.is-fixed { cursor: not-allowed; opacity: .5; }
.rl-page .rl-move { display: inline-flex; gap: 2px; vertical-align: middle; opacity: 0; }
.rl-page tr:hover .rl-move, .rl-page .rl-move:focus-within { opacity: 1; }
.rl-page .rl-move .icon-btn { width: 24px; height: 24px; }
.rl-page .rl-move .icon { width: 14px; height: 14px; }
.rl-page .rl-label { border-color: transparent; background: transparent; height: 36px; font: var(--text-body-strong); }
.rl-page .rl-label:hover { border-color: var(--color-border); }
.rl-page .rl-label:focus { border-color: var(--color-brand-navy); background: var(--color-surface-card); }
.rl-page .rl-table .field { margin: 0; }
.rl-page tr.is-inactive .rl-label, .rl-page tr.is-inactive .num, .rl-page tr.is-inactive .badge { color: var(--color-text-muted); }
.rl-page tr.is-inactive .badge { opacity: .7; }
.rl-page tr.is-dragging { opacity: .4; }
.rl-page tr.is-drop-target td { box-shadow: inset 0 2px 0 var(--color-brand-amber); }
.rl-page tr.is-new { background: var(--color-brand-navy-50); }

.rl-page details[data-pop] { position: relative; display: inline-block; }
.rl-page details[data-pop] > summary { list-style: none; cursor: pointer; }
.rl-page details[data-pop] > summary::-webkit-details-marker { display: none; }
.rl-page .rl-color > summary .badge { cursor: pointer; }
.rl-page .rl-color > summary:focus-visible { outline: none; }
.rl-page .rl-color > summary:focus-visible .badge { box-shadow: var(--focus-ring); }
.rl-page .rl-color__pop { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 45; display: grid; grid-template-columns: repeat(2, auto); gap: 8px; padding: 12px;
  background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.rl-page .rl-color__opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rl-page .rl-color__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.rl-page .rl-color__opt input:checked + .rl-swatch { box-shadow: 0 0 0 2px var(--color-brand-navy); }
.rl-page .rl-color__opt input:focus-visible + .rl-swatch { box-shadow: var(--focus-ring); }

.rl-page .rl-foot { padding: 12px 24px; font: var(--text-small); color: var(--color-text-secondary); }
.rl-page .menu button[disabled] { color: var(--color-text-muted); cursor: not-allowed; }
.rl-page .page-actions { justify-content: flex-end; }