/* Vlastné zoznamy — tabuľka, editor definície a DB autocomplete. */
.cl-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cl-toolbar-spacer {
  flex: 1 1 auto;
}

.cl-import-button {
  cursor: pointer;
}

.cl-save-status {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--tx3);
  font-size: 9px;
  font-weight: 760;
  white-space: nowrap;
}

.cl-save-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

.cl-save-status[data-state="saving"] .cl-save-dot,
.cl-save-status[data-state="syncing"] .cl-save-dot {
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .13);
  animation: cl-pulse 1s ease-in-out infinite;
}

.cl-save-status[data-state="incomplete"] .cl-save-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .14);
}

.cl-save-status[data-state="error"] .cl-save-dot,
.cl-save-status[data-state="conflict"] .cl-save-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .13);
}

.cl-save-status.is-actionable {
  border-color: rgba(239, 68, 68, .35);
  color: #b91c1c;
  cursor: pointer;
}

@keyframes cl-pulse {
  50% { opacity: .42; transform: scale(.82); }
}

.cl-toolbar select {
  min-width: 220px;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--tx);
  font: inherit;
  font-size: 11px;
}

.cl-meta {
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(248, 250, 252, .78);
  color: var(--tx3);
  font-size: 10px;
}

.cl-table-wrap {
  overflow: auto;
  max-height: min(64vh, 640px);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, .76);
}

.cl-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.cl-table-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 9px;
  align-items: start;
}

.cl-table thead {
  position: sticky;
  z-index: 6;
  top: 0;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .06);
}

.cl-table th,
.cl-table td {
  padding: 7px 8px;
  border-right: 1px solid rgba(226, 232, 240, .8);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  font-size: 10px;
}

.cl-table th {
  position: static;
  background: #f8fafc;
  color: var(--tx2);
  font-weight: 850;
}

.cl-head-row th {
  height: 30px;
  padding-top: 6px;
  padding-bottom: 4px;
  border-bottom: 0;
}

.cl-pgr-tag {
  display: inline-flex;
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: #ede9fe;
  color: #4338ca;
  font-size: 7px;
  font-weight: 900;
  vertical-align: 1px;
}

.cl-filter-row th {
  padding: 3px 6px 6px;
  border-bottom: 1.5px solid rgba(148, 163, 184, .35);
}

.cl-table .cl-column-filter {
  min-width: 105px;
  height: 27px;
  padding: 4px 7px 4px 24px;
  border-color: rgba(203, 213, 225, .9);
  border-radius: 7px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 7px center;
  font-size: 9px;
}

.cl-action-head {
  width: 54px;
  min-width: 54px;
  text-align: center !important;
}

.cl-clear-filters {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 7px;
  background: #fff;
  color: var(--tx3);
  cursor: pointer;
  font: inherit;
}

.cl-add-row-side {
  position: sticky;
  top: 8px;
  width: 92px;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 9px 7px;
  border: 1.5px dashed rgba(16, 185, 129, .5);
  border-radius: 11px;
  background: rgba(236, 253, 245, .78);
  color: #047857;
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.25;
  transition: transform .15s, border-color .15s, background .15s;
}

.cl-add-row-side:hover {
  border-color: #10b981;
  background: #d1fae5;
  transform: translateY(-1px);
}

.cl-add-row-plus {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #10b981;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(16, 185, 129, .22);
}

.cl-table-empty {
  padding: 28px !important;
  color: var(--tx3);
  text-align: center !important;
}

.cl-row-actions {
  width: 54px;
  white-space: nowrap;
  text-align: center !important;
}

.cl-row-state {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  background: #10b981;
  vertical-align: 1px;
}

.cl-row-state[data-state="saving"],
.cl-row-state[data-state="pending"] {
  background: #3b82f6;
  animation: cl-pulse 1s ease-in-out infinite;
}

.cl-row-state[data-state="incomplete"] { background: #f59e0b; }
.cl-row-state[data-state="error"],
.cl-row-state[data-state="conflict"] { background: #ef4444; }

.cl-delete-row {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: 7px;
  background: #fff;
  color: #dc2626;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

.cl-delete-row:hover { background: #fef2f2; }

.cl-row-conflict td { background: rgba(254, 242, 242, .72); }

.cl-table input,
.cl-table select {
  width: 100%;
  min-width: 110px;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--tx);
  font: inherit;
  font-size: 10px;
}

.cl-table input:focus,
.cl-table select:focus {
  border-color: var(--acc);
  outline: 0;
  box-shadow: 0 0 0 3px var(--accl);
}

.cl-ref-picker {
  position: relative;
  min-width: 190px;
}

.cl-ref-picker::before {
  content: "⌕";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 9px;
  color: var(--tx3);
  font-size: 14px;
  transform: translateY(-53%);
  pointer-events: none;
}

.cl-table .cl-ref-input {
  padding-left: 27px;
  padding-right: 28px;
}

.cl-ref-picker.is-selected::before {
  content: "✓";
  color: #047857;
  font-size: 11px;
  font-weight: 900;
}

.cl-ref-picker.is-selected .cl-ref-input {
  border-color: rgba(16, 185, 129, .55);
  background: #f0fdf9;
}

.cl-ref-clear {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tx3);
  cursor: pointer;
  transform: translateY(-50%);
}

.cl-ref-clear:hover {
  background: #e2e8f0;
  color: var(--tx);
}

.cl-ref-value {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--tx2);
  font-weight: 650;
}

.cl-ref-popup {
  position: fixed;
  z-index: 10040;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 11px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .2);
  backdrop-filter: blur(12px);
}

.cl-ref-popup.open {
  display: grid;
  gap: 2px;
}

.cl-ref-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tx);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.cl-ref-option:hover,
.cl-ref-option.active {
  background: var(--accl);
  color: var(--acc);
}

.cl-ref-option-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 760;
}

.cl-ref-option-detail {
  flex: 0 0 auto;
  color: var(--tx3);
  font-size: 9px;
}

.cl-ref-empty {
  padding: 11px 10px;
  color: var(--tx3);
  font-size: 10px;
}

.cl-dialog-bg {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(5px);
}

.cl-dialog {
  width: min(940px, calc(100vw - 44px));
  max-height: min(900px, calc(100vh - 44px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
  color: var(--tx);
}

.cl-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 24px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #f0fdf9 0%, #fff 58%, #eff6ff 100%);
}

.cl-dialog-kicker {
  margin-bottom: 4px;
  color: #047857;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cl-dialog-title {
  margin: 0;
  color: #123c2d;
  font-size: 20px;
  line-height: 1.2;
}

.cl-dialog-subtitle {
  max-width: 640px;
  margin: 6px 0 0;
  color: var(--tx3);
  font-size: 10px;
  line-height: 1.45;
}

.cl-dialog-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 1px solid rgba(16, 185, 129, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  color: #047857;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(15, 118, 110, .08);
}

.cl-dialog-close:hover {
  border-color: #10b981;
  background: #ecfdf5;
}

.cl-dialog-body {
  overflow-y: auto;
  display: grid;
  gap: 14px;
  padding: 18px 24px 22px;
}

.cl-form-section {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(248, 250, 252, .62);
}

.cl-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(230px, .7fr);
  gap: 12px;
}

.cl-form-grid + .cl-field {
  margin-top: 12px;
}

.cl-field {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.cl-field-label,
.cl-section-title {
  color: var(--tx2);
  font-size: 10px;
  font-weight: 850;
}

.cl-field-help,
.cl-section-help {
  color: var(--tx3);
  font-size: 9px;
  line-height: 1.45;
}

.cl-field input,
.cl-field select,
.cl-field textarea,
.cl-col-row input,
.cl-col-row select {
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--tx);
  font: inherit;
  font-size: 11px;
  transition: border-color .15s, box-shadow .15s;
}

.cl-field textarea {
  min-height: 66px;
  resize: vertical;
}

.cl-field input:focus,
.cl-field select:focus,
.cl-field textarea:focus,
.cl-col-row input:focus,
.cl-col-row select:focus {
  border-color: var(--acc);
  outline: 0;
  box-shadow: 0 0 0 3px var(--accl);
}

.cl-validity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.cl-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.cl-section-title {
  margin: 0 0 3px;
  font-size: 11px;
}

.cl-add-column {
  flex: 0 0 auto;
}

.cl-column-head,
.cl-col-row {
  display: grid;
  grid-template-columns: 28px minmax(150px, 1fr) 155px minmax(150px, .9fr) 84px 62px 36px;
  gap: 8px;
  align-items: center;
}

.cl-column-head {
  padding: 0 10px 6px;
  color: var(--tx3);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cl-columns {
  display: grid;
  gap: 7px;
}

.cl-col-row {
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, .8);
  border-radius: 10px;
  background: #fff;
}

.cl-col-index {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #ecfdf5;
  color: #047857;
  font-size: 9px;
  font-weight: 900;
}

.cl-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--tx2);
  font-size: 9px;
  font-weight: 720;
  white-space: nowrap;
}

.cl-check input,
.cl-role-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #10b981;
}

.cl-remove-column {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border-radius: 9px !important;
}

.cl-role-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cl-role-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--tx2);
  font-size: 10px;
  font-weight: 720;
  cursor: pointer;
}

.cl-role-option:has(input:checked) {
  border-color: rgba(16, 185, 129, .45);
  background: #ecfdf5;
  color: #065f46;
}

.cl-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: rgba(248, 250, 252, .94);
}

.cl-dialog-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 840px) {
  .cl-dialog-bg { padding: 10px; }
  .cl-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 16px; }
  .cl-dialog-head,
  .cl-dialog-body,
  .cl-dialog-footer { padding-left: 15px; padding-right: 15px; }
  .cl-column-head { display: none; }
  .cl-col-row { grid-template-columns: 28px minmax(150px, 1fr) 145px 36px; }
  .cl-col-row .cl-options { grid-column: 2 / -1; }
  .cl-col-row .cl-check { grid-row: 2; }
  .cl-table-stage { grid-template-columns: minmax(0, 1fr) 76px; }
  .cl-add-row-side { width: 76px; }
}

@media (max-width: 600px) {
  .cl-form-grid,
  .cl-validity-grid { grid-template-columns: 1fr; }
  .cl-col-row { grid-template-columns: 28px minmax(0, 1fr) 36px; }
  .cl-col-row .cl-type,
  .cl-col-row .cl-options,
  .cl-col-row .cl-check { grid-column: 2 / -1; }
  .cl-dialog-footer { align-items: stretch; flex-direction: column; }
  .cl-dialog-actions { width: 100%; }
  .cl-dialog-actions .btn { flex: 1; }
  .cl-toolbar-spacer { display: none; }
  .cl-save-status { width: 100%; box-sizing: border-box; justify-content: center; }
  .cl-table-stage { grid-template-columns: 1fr; }
  .cl-add-row-side { position: static; width: 100%; min-height: 42px; flex-direction: row; }
}