/* Call list grid, toolbar, action bar and settings. Light theme. */
.cl-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.5rem 0; }
.cl-count { font-weight: 600; }
.cl-count.cl-over { color: #b45309; }
.cl-filter { padding: 3px 6px; min-width: 14rem; border: 1px solid #a0a0a0; }
.cl-sort { display: inline-flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }

.cl-btn { padding: 3px 10px; border: 1px solid #8a8a8a; background: #f0f0f0; color: #222; cursor: pointer; font: inherit; }
.cl-btn:hover:not(:disabled) { background: #e2e8f0; }
.cl-btn:disabled { color: #999; border-color: #c4c4c4; cursor: not-allowed; }
.cl-primary { background: #2f6fb5; border-color: #245a94; color: #fff; }
.cl-primary:hover:not(:disabled) { background: #245a94; }
.cl-primary:disabled { background: #d6dde5; color: #8a97a5; border-color: #c4ccd5; }
.cl-danger { color: #a11; }

.cl-table-wrap { max-height: 28rem; overflow: auto; border: 1px solid #a0a0a0; }
.cl-grid { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.cl-grid th { position: sticky; top: 0; background: #e8e8e8; z-index: 1; }
.cl-grid th, .cl-grid td { border: 1px solid #b4b4b4; padding: 0; }
.cl-grid th { padding: 3px 6px; }
.cl-grid tbody tr, .cl-grid tbody tr:nth-child(even) { background: #fff; }
.cl-grid tbody tr.selected { background: #cce4f7; }
.cl-grid tbody tr.invalid { background: #fde8e8; }
.cl-grid tbody tr.invalid.selected { background: #f3d3dd; }
td.cl-readonly { padding: 3px 6px; color: #777; background: #efefef; }
.cl-grid tbody tr.selected td.cl-readonly { background: #dde6ee; }
.cl-nomatch { padding: 6px; color: #666; text-align: center; }

.cl-input { box-sizing: border-box; width: 100%; padding: 3px 6px; border: 0; background: transparent; font: inherit; }
.cl-input:focus { outline: 2px solid #2f6fb5; outline-offset: -2px; background: #fff; }
.cl-unit { min-width: 6rem; font-variant-numeric: tabular-nums; }
.cl-label.over { color: #b91c1c; }
td:has(> .cl-label) { position: relative; padding-right: 3.2rem; }
.cl-counter { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: #888; pointer-events: none; }
.cl-counter.over { color: #b91c1c; font-weight: 600; }

.cl-actions-col { width: 1%; white-space: nowrap; }
.cl-actions { white-space: nowrap; text-align: center; padding: 0 4px; }
.cl-icon { padding: 0 6px; margin: 1px; border: 1px solid #b4b4b4; background: #f6f6f6; cursor: pointer; font-size: 0.75rem; line-height: 1.5; }
.cl-icon:hover { background: #e2e8f0; }
.cl-del:hover { background: #fde8e8; color: #a11; }

.cl-empty { margin: 0.75rem 0; padding: 0.5rem 1rem; background: #f4f8fc; border: 1px dashed #9db6d1; color: #333; }
.cl-empty ol { margin: 0.25rem 0 0.25rem 1.25rem; padding: 0; }

.cl-actionbar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-top: 0.75rem; }
.cl-warning { flex: 1 1 18rem; color: #92400e; background: #fef3c7; border-left: 3px solid #d97706; padding: 3px 8px; font-size: 0.85rem; }
.cl-status { min-height: 1.3em; margin: 0.5rem 0 0; color: #166534; }
.cl-status.cl-error { color: #b91c1c; }

.cl-settings { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: flex-end; }
.cl-setting { display: flex; flex-direction: column; gap: 2px; }
.cl-setting input, .cl-setting select { padding: 3px 6px; border: 1px solid #a0a0a0; font: inherit; min-width: 8rem; }
.cl-setting small { color: #666; }

.cl-toolbar[hidden], .cl-table-wrap[hidden], .cl-empty[hidden] { display: none; }