/*
 * CouchCMS and add-on compatibility layer.
 * Core tokens, controls, shell and authentication styles live in the miova-* files.
 */

/* Rich text editors */
.nicEdit-mainContain.nicEdit-mainSelected {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.cke_chrome,
.nicEdit-mainContain {
  border-color: var(--color-border) !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-field) !important;
}

.cke_top,
.cke_bottom {
  border-color: var(--color-border) !important;
  background: var(--color-surface-subtle) !important;
}

/* Sidebar scrollbar plug-in */
#scroll-sidebar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background: var(--color-border-strong);
}
#scroll-sidebar .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
#scroll-sidebar .mCSB_scrollTools .mCSB_dragger_onDrag .mCSB_dragger_bar {
  background: var(--color-text-faint);
}
#scroll-sidebar .mCSB_scrollTools .mCSB_draggerRail {
  background: transparent;
}

/* Comments */
.comment-heading.panel-primary::before {
  border-right-color: var(--color-primary-subtle);
}
.comment-heading.panel-primary::after {
  border-right-color: var(--color-primary-subtle);
}
.comment-body {
  color: var(--color-text);
}
.comment-details {
  color: var(--color-text-muted);
  text-shadow: none;
}

/* Repeatable and Mosaic fields */
.rr_container,
.rr_container .table,
.mosaic .table {
  font-size: 0.8125rem;
}

.rr_container .th,
.rr_container .td {
  padding: var(--space-2) var(--space-3);
  border-color: var(--color-border);
  color: var(--color-text);
}

.rr_container .th {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-weight: 650;
}

.rr_container input,
.rr_container textarea,
.rr_container select {
  min-height: 2.5rem;
  height: 2.5rem;
}

.rr_container textarea {
  min-height: 6rem;
  height: auto;
}

.rr td.delete label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-xs);
  color: var(--color-danger);
  cursor: pointer;
}

.rr td.delete label:hover {
  background: var(--color-danger-subtle);
}
.rr td.delete label .hgi-stroke {
  font-size: 1rem;
}
.rr td.delete label::before {
  display: none !important;
}

/* Repeatable regions. addons/repeatable/tablegear.css loads after the theme,
   so these rules carry a `body` prefix to outrank it; !important is reserved
   for values CouchCMS writes as inline styles. */
body .tableholder {
  padding: var(--space-2) 0 0;
}

body .rr {
  border: 1px solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: var(--color-surface-raised);
}

body .rr th,
body .rr td {
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

body .rr th,
body .rr thead td,
body .rr thead tr:hover td {
  padding: 0.625rem var(--space-3);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

body .rr td {
  padding: var(--space-3);
  vertical-align: top;
}

/* Column rules so adjacent fields read as separate columns. */
body .rr th + th,
body .rr td + td {
  border-left: 1px solid var(--color-border);
}

body .rr tbody tr:last-child td {
  border-bottom: 0;
}

body .rr tr.odd,
body .rr tr.even,
body .rr tr:nth-child(2n) td,
body .rr tr.even td {
  background: var(--color-surface-raised);
}

body .rr tbody tr:hover td {
  background: var(--color-surface-subtle);
}

body .rr td.dg-arrange-table-rows-drag-icon,
body .rr th.dg-arrange-table-header {
  width: 1.25rem !important;
  padding: 0;
}

body .rr td.dg-arrange-table-rows-drag-icon {
  background-image: radial-gradient(circle, var(--color-border-strong) 1px, transparent 1.5px) !important;
  background-position: center var(--space-3) !important;
  background-repeat: repeat !important;
  background-size: 6px 6px !important;
  background-clip: content-box;
  padding: 0 0.25rem;
}

body .rr th.delete,
body .rr td.delete {
  width: 3rem !important;
  padding: var(--space-3) var(--space-2) !important;
  text-align: center;
}

body .rr td.delete img {
  display: none;
}

body .rr td.delete label {
  display: inline-flex !important;
}

body .rr .upload-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

body .rr .upload-group > .upload-path {
  flex: 1 1 8rem;
  min-width: 0;
}

body .tableholder p.addRow {
  float: none;
  margin: var(--space-1) 0 0;
}

body .tableholder p.addRow a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: auto;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

body .tableholder p.addRow a:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-primary-hover);
}

body .tableholder p.addRow a .hgi-stroke {
  font-size: 1rem;
}

body .tableholder p.addRow a::before {
  display: none !important;
}

.mosaic-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.mosaic-buttons .btn {
  height: 2.5rem;
  line-height: 1;
}
.mosaic .col-up-down {
  min-width: 2.75rem !important;
  width: 2.75rem !important;
  padding: var(--space-2);
}
.mosaic .popover .popover-title {
  font-size: 0.75rem;
  line-height: 1.2;
}
.mosaic-popover .btn {
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.mosaic-list .group-heading {
  margin: var(--space-5) 0 var(--space-3);
  color: var(--color-text-strong);
  font-size: 1rem;
  font-weight: 680;
}
.mosaic-list .cell-label label {
  color: var(--color-text-strong);
  font-weight: 620 !important;
}

/* Action columns */
.col-actions > .btn-group,
.col-actions > .icon,
.gallery-icons > .btn-group {
  gap: var(--space-1);
}

.col-actions .btn-actions,
.gallery-icons .btn-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
}

.col-actions .btn-actions:hover,
.gallery-icons .btn-actions:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
}

/* Toast icon alignment */
.toast > .i,
.toast > .hgi-stroke {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  display: block;
  margin: 0;
  font-size: 1.75rem;
  line-height: 1;
  transform: translateY(-50%);
}

/* Upload and gallery images */
.img-preview > .popup-img,
.img-preview > .popup-img > img {
  border-radius: var(--radius-sm);
}
.gallery-img-none > .i,
.gallery-img-folder > .i {
  fill: var(--color-on-primary);
}

/* Legacy cleanup */
.table > thead,
.panel-heading,
.popover-title,
.field > .field-label,
.ctrl-label,
.breadcrumbs,
.comment-details {
  text-shadow: none;
}

.k_reverse_relation a,
.k_securefile a,
p.addRow a {
  text-underline-offset: 0.16em;
}

.delete-screen {
  z-index: calc(var(--z-overlay) - 1);
  background: var(--color-danger-subtle);
  opacity: 0.78;
}

#k-modal-body {
  border-top-color: var(--color-border);
}
#k-modal-footer {
  border-top-color: var(--color-border);
  background: var(--color-surface-raised);
}

@media (max-width: 899px) {
  .mCustomScrollbar,
  .mCustomScrollBox,
  .mCSB_container {
    overflow: visible !important;
  }
}

@media (max-width: 560px) {
  .toast > .i,
  .toast > .hgi-stroke {
    display: none;
  }
}