/* Modern UI base elements and shared components. */
body.fkf-modern {
  background: var(--fkf-bg);
  color: var(--fkf-text);
  font-size: var(--fkf-density-font-size);
  letter-spacing: 0;
  min-height: 100vh;
}

body.fkf-modern a {
  color: var(--fkf-link);
  text-decoration: none;
}

body.fkf-modern a:hover,
body.fkf-modern a:focus,
body.fkf-modern a:active,
body.fkf-modern a:visited {
  text-decoration: none;
}

body.fkf-modern a.btn,
body.fkf-modern a.btn:visited {
  color: var(--bs-btn-color, var(--fkf-text));
}

body.fkf-modern a.btn:hover,
body.fkf-modern a.btn:focus {
  color: var(--bs-btn-hover-color, var(--bs-btn-color, var(--fkf-text)));
}

.fkf-modern h1.h3 {
  font-size: var(--fkf-page-heading-size);
  line-height: 1.15;
}

.fkf-modern h1.h3 + p.text-muted {
  font-size: var(--fkf-page-intro-size);
  line-height: var(--fkf-page-intro-line-height);
}

.fkf-modern strong,
.fkf-modern b,
.fkf-modern .fw-bold {
  font-weight: var(--fkf-font-weight-bold) !important;
}

.fkf-modern .fw-semibold {
  font-weight: var(--fkf-font-weight-semibold) !important;
}

.fkf-modern .fw-bolder {
  font-weight: var(--fkf-font-weight-heavy) !important;
}

.fkf-modern .badge {
  font-weight: var(--fkf-font-weight-semibold);
}

.fkf-modern .fkf-code-editor-grid {
  display: grid;
  gap: var(--fkf-grid-gap);
  grid-template-columns: minmax(0, 1fr);
}

.fkf-modern .fkf-code-editor-panel {
  background: var(--fkf-surface);
  border: 1px solid var(--fkf-border);
  border-radius: var(--fkf-radius);
  min-width: 0;
  overflow: hidden;
}

.fkf-modern .fkf-code-editor-toolbar {
  align-items: center;
  background: var(--fkf-surface-muted);
  border-bottom: 1px solid var(--fkf-border);
  color: var(--fkf-text);
  display: flex;
  font-size: var(--fkf-density-font-size-sm);
  font-weight: var(--fkf-font-weight-semibold);
  justify-content: space-between;
  line-height: 1.2;
  min-height: var(--fkf-control-height);
  padding: var(--fkf-space-2) var(--fkf-card-padding-x);
}

.fkf-modern .fkf-code-editor-panel .CodeMirror {
  background: var(--fkf-surface);
  border: 0;
  color: var(--fkf-text);
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: var(--fkf-density-font-size-sm);
  height: min(58vh, 560px);
  line-height: 1.45;
}

.fkf-modern .fkf-code-editor-panel .CodeMirror-gutters {
  background: var(--fkf-surface-muted);
  border-right: 1px solid var(--fkf-border);
}

.fkf-modern .fkf-code-editor-panel .CodeMirror-linenumber {
  color: var(--fkf-text-muted);
}

.fkf-modern .fkf-code-editor-panel .CodeMirror-cursor {
  border-left-color: var(--fkf-text);
}

.fkf-modern .fkf-code-editor-panel .CodeMirror-selected,
.fkf-modern .fkf-code-editor-panel .CodeMirror-focused .CodeMirror-selected {
  background: rgba(var(--fkf-primary-rgb), .2);
}

.fkf-modern .fkf-code-editor-panel .cm-tag,
.fkf-modern .fkf-code-editor-panel .cm-bracket {
  color: var(--fkf-primary);
}

.fkf-modern .fkf-code-editor-panel .cm-attribute,
.fkf-modern .fkf-code-editor-panel .cm-def {
  color: var(--fkf-link);
}

.fkf-modern .fkf-code-editor-panel .cm-string,
.fkf-modern .fkf-code-editor-panel .cm-string-2 {
  color: var(--fkf-secondary);
}

.fkf-modern .fkf-code-editor-panel .cm-comment {
  color: var(--fkf-text-muted);
}

.fkf-modern .fkf-code-editor-preview {
  min-height: min(58vh, 560px);
  overflow: auto;
  padding: var(--fkf-card-padding-y) var(--fkf-card-padding-x);
}

@media (min-width: 992px) {
  .fkf-modern .fkf-code-editor-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }
}

body.fkf-modern a.btn:active,
body.fkf-modern a.btn.active,
body.fkf-modern a.btn.show {
  color: var(--bs-btn-active-color, var(--bs-btn-hover-color, var(--bs-btn-color, var(--fkf-text))));
}

.fkf-modern .row {
  --bs-gutter-x: var(--fkf-grid-gap);
  --bs-gutter-y: var(--fkf-grid-gap);
}

.fkf-modern .g-1,
.fkf-modern .gx-1 {
  --bs-gutter-x: var(--fkf-space-1) !important;
}

.fkf-modern .g-1,
.fkf-modern .gy-1 {
  --bs-gutter-y: var(--fkf-space-1) !important;
}

.fkf-modern .g-2,
.fkf-modern .gx-2 {
  --bs-gutter-x: var(--fkf-space-2) !important;
}

.fkf-modern .g-2,
.fkf-modern .gy-2 {
  --bs-gutter-y: var(--fkf-space-2) !important;
}

.fkf-modern .g-3,
.fkf-modern .gx-3 {
  --bs-gutter-x: var(--fkf-space-3) !important;
}

.fkf-modern .g-3,
.fkf-modern .gy-3 {
  --bs-gutter-y: var(--fkf-space-3) !important;
}

.fkf-modern .g-4,
.fkf-modern .gx-4 {
  --bs-gutter-x: var(--fkf-space-4) !important;
}

.fkf-modern .g-4,
.fkf-modern .gy-4 {
  --bs-gutter-y: var(--fkf-space-4) !important;
}

.fkf-modern .g-5,
.fkf-modern .gx-5 {
  --bs-gutter-x: var(--fkf-space-5) !important;
}

.fkf-modern .g-5,
.fkf-modern .gy-5 {
  --bs-gutter-y: var(--fkf-space-5) !important;
}

.fkf-modern .gap-1 {
  gap: var(--fkf-space-1) !important;
}

.fkf-modern .gap-2 {
  gap: var(--fkf-space-2) !important;
}

.fkf-modern .gap-3 {
  gap: var(--fkf-space-3) !important;
}

.fkf-modern .gap-4 {
  gap: var(--fkf-space-4) !important;
}

.fkf-modern .gap-5 {
  gap: var(--fkf-space-5) !important;
}

.fkf-modern .mb-1 {
  margin-bottom: var(--fkf-space-1) !important;
}

.fkf-modern .mb-2 {
  margin-bottom: var(--fkf-space-2) !important;
}

.fkf-modern .mb-3 {
  margin-bottom: var(--fkf-space-3) !important;
}

.fkf-modern .mb-4 {
  margin-bottom: var(--fkf-space-4) !important;
}

.fkf-modern .mb-5 {
  margin-bottom: var(--fkf-space-5) !important;
}

.fkf-modern .mt-1 {
  margin-top: var(--fkf-space-1) !important;
}

.fkf-modern .mt-2 {
  margin-top: var(--fkf-space-2) !important;
}

.fkf-modern .mt-3 {
  margin-top: var(--fkf-space-3) !important;
}

.fkf-modern .mt-4 {
  margin-top: var(--fkf-space-4) !important;
}

.fkf-modern .mt-5 {
  margin-top: var(--fkf-space-5) !important;
}

.fkf-modern .btn {
  --bs-btn-font-size: var(--fkf-btn-font-size);
  --bs-btn-padding-x: var(--fkf-btn-padding-x);
  --bs-btn-padding-y: var(--fkf-btn-padding-y);
}

.fkf-modern .btn-sm {
  --bs-btn-font-size: var(--fkf-btn-sm-font-size);
  --bs-btn-padding-x: var(--fkf-btn-sm-padding-x);
  --bs-btn-padding-y: var(--fkf-btn-sm-padding-y);
}

.fkf-modern .btn-primary {
  --bs-btn-bg: var(--fkf-primary);
  --bs-btn-border-color: var(--fkf-primary);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--fkf-primary), #000 12%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--fkf-primary), #000 15%);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: color-mix(in srgb, var(--fkf-primary), #000 18%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--fkf-primary), #000 20%);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--fkf-primary);
  --bs-btn-disabled-border-color: var(--fkf-primary);
  --bs-btn-disabled-color: #ffffff;
  color: #ffffff;
}

.fkf-modern .btn-secondary {
  --bs-btn-bg: var(--fkf-secondary);
  --bs-btn-border-color: var(--fkf-secondary);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--fkf-secondary), #000 12%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--fkf-secondary), #000 15%);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: color-mix(in srgb, var(--fkf-secondary), #000 18%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--fkf-secondary), #000 20%);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--fkf-secondary);
  --bs-btn-disabled-border-color: var(--fkf-secondary);
  --bs-btn-disabled-color: #ffffff;
  color: #ffffff;
}

body.fkf-modern .text-bg-primary {
  background-color: var(--fkf-primary) !important;
  color: #ffffff !important;
}

body.fkf-modern .text-bg-info {
  background-color: var(--fkf-secondary) !important;
  color: #ffffff !important;
}

body.fkf-modern .btn.btn-xs {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-padding-x: 0.4rem;
  --bs-btn-font-size: 0.72rem;
  --bs-btn-border-radius: 0.25rem;
  line-height: 1.2;
}

.fkf-modern .btn-outline-primary {
  --bs-btn-color: var(--fkf-primary);
  --bs-btn-border-color: var(--fkf-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--fkf-primary), transparent 88%);
  --bs-btn-hover-border-color: var(--fkf-primary);
  --bs-btn-hover-color: var(--fkf-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--fkf-primary), transparent 80%);
  --bs-btn-active-border-color: var(--fkf-primary);
  --bs-btn-active-color: var(--fkf-primary);
  --bs-btn-disabled-color: color-mix(in srgb, var(--fkf-primary), transparent 35%);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--fkf-primary), transparent 45%);
}

.fkf-modern .btn-outline-secondary {
  --bs-btn-color: var(--fkf-secondary);
  --bs-btn-border-color: color-mix(in srgb, var(--fkf-secondary), var(--fkf-border) 35%);
  --bs-btn-hover-bg: color-mix(in srgb, var(--fkf-secondary), transparent 88%);
  --bs-btn-hover-border-color: var(--fkf-secondary);
  --bs-btn-hover-color: var(--fkf-secondary);
  --bs-btn-active-bg: color-mix(in srgb, var(--fkf-secondary), transparent 80%);
  --bs-btn-active-border-color: var(--fkf-secondary);
  --bs-btn-active-color: var(--fkf-secondary);
}

.fkf-modern [data-fkf-theme-toggle] {
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: color-mix(in srgb, var(--fkf-secondary), transparent 92%);
  --bs-btn-active-bg: transparent;
  background-color: transparent;
}

.fkf-modern [data-fkf-theme-toggle]:active,
.fkf-modern [data-fkf-theme-toggle].active,
.fkf-modern [data-fkf-theme-toggle][aria-pressed="true"] {
  background-color: transparent;
}

.fkf-modern .btn.is-copied {
  background: var(--fkf-success);
  border-color: var(--fkf-success);
  color: #ffffff;
}

.fkf-public-share {
  display: inline-flex;
}

.fkf-public-share .btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-width: 38px;
}

.fkf-modern .dropdown-menu {
  background: var(--fkf-surface);
  border-color: var(--fkf-border);
  box-shadow: var(--fkf-shadow-soft);
  color: var(--fkf-text);
}

.fkf-modern .dropdown-item {
  color: var(--fkf-text);
}

.fkf-modern .dropdown-item.active,
.fkf-modern .dropdown-item:active {
  background: var(--fkf-primary);
  color: #ffffff;
}

.fkf-modern .dropdown-item:focus,
.fkf-modern .dropdown-item:hover {
  background: color-mix(in srgb, var(--fkf-primary), transparent 88%);
  color: var(--fkf-text);
}

.fkf-modern .form-control,
.fkf-modern .form-select,
.fkf-modern .input-group-text {
  background-color: var(--fkf-surface);
  border-color: var(--fkf-border);
  color: var(--fkf-text);
  font-size: var(--fkf-control-font-size);
  min-height: var(--fkf-control-min-height);
}

.fkf-modern .form-control,
.fkf-modern .form-select {
  padding-bottom: var(--fkf-control-padding-y);
  padding-left: var(--fkf-control-padding-x);
  padding-top: var(--fkf-control-padding-y);
}

.fkf-modern .form-control {
  padding-right: var(--fkf-control-padding-x);
}

.fkf-modern .form-select {
  padding-right: calc(var(--fkf-control-padding-x) + 1.6rem);
}

.fkf-modern textarea.form-control {
  min-height: calc(var(--fkf-control-min-height) * 2.5);
}

.fkf-modern .input-group-text {
  padding: var(--fkf-control-padding-y) var(--fkf-control-padding-x);
}

.fkf-indicators-group .input-group-text {
  font-weight: 600;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

.fkf-indicators-group .form-control {
  flex: 0 1 58px;
  min-width: 42px;
}

.fkf-modern .form-label {
  margin-bottom: var(--fkf-label-margin-bottom);
}

.fkf-modern .form-control:disabled,
.fkf-modern .form-control[readonly],
.fkf-modern .form-select:disabled {
  background-color: var(--fkf-surface-muted);
  border-color: var(--fkf-border);
  color: var(--fkf-text-muted);
  opacity: 1;
}

.fkf-modern .form-text {
  color: var(--fkf-text-muted);
}

.fkf-modern .form-check-input {
  background-color: var(--fkf-surface);
  border-color: var(--fkf-border);
}

.fkf-modern .form-check-input:checked {
  background-color: var(--fkf-primary);
  border-color: var(--fkf-primary);
}

.fkf-modern .form-control::placeholder {
  color: var(--fkf-text-muted);
  opacity: 0.9;
}

.fkf-modern .form-control:focus,
.fkf-modern .form-select:focus,
.fkf-modern .form-check-input:focus,
.fkf-modern .btn:focus,
.fkf-modern .btn:focus-visible {
  border-color: var(--fkf-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--fkf-primary), transparent 78%);
  outline: 0;
}

.fkf-modern .modal {
  --bs-modal-bg: var(--fkf-surface);
  --bs-modal-border-color: var(--fkf-border);
  --bs-modal-color: var(--fkf-text);
  --bs-modal-header-border-color: var(--fkf-border);
  --bs-modal-footer-border-color: var(--fkf-border);
  --bs-modal-header-padding-x: var(--fkf-modal-padding);
  --bs-modal-header-padding-y: var(--fkf-modal-header-padding-y);
  --bs-modal-padding: var(--fkf-modal-padding);
}

.fkf-modern .modal-content {
  background: var(--fkf-surface);
  border-color: var(--fkf-border);
  box-shadow: var(--fkf-shadow-soft);
  color: var(--fkf-text);
}

.fkf-modern .modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.fkf-modern .modal-dialog-scrollable .modal-content > form > .modal-body {
  min-height: 0;
  overflow-y: auto;
}

.fkf-modern .modal-header,
.fkf-modern .modal-footer {
  background: var(--fkf-surface-muted);
  border-color: var(--fkf-border);
  padding: var(--fkf-modal-header-padding-y) var(--fkf-modal-padding);
}

.fkf-modern .modal-title {
  color: var(--fkf-text);
}

.fkf-modern .modal-body {
  background: var(--fkf-surface);
  color: var(--fkf-text);
  padding: var(--fkf-modal-padding);
}

.fkf-modern .modal .list-group {
  --bs-list-group-bg: var(--fkf-surface);
  --bs-list-group-border-color: var(--fkf-border);
  --bs-list-group-color: var(--fkf-text);
  --bs-list-group-action-color: var(--fkf-text);
  --bs-list-group-action-hover-bg: color-mix(in srgb, var(--fkf-primary) 10%, var(--fkf-surface-muted));
  --bs-list-group-action-hover-color: var(--fkf-text);
  --bs-list-group-action-active-bg: color-mix(in srgb, var(--fkf-primary) 14%, var(--fkf-surface-muted));
  --bs-list-group-action-active-color: var(--fkf-text);
}

.fkf-modern .modal .list-group-item {
  background: var(--fkf-surface);
  border-color: var(--fkf-border);
  color: var(--fkf-text);
}

.fkf-modern .modal .list-group-item strong,
.fkf-modern .modal .list-group-item label {
  color: var(--fkf-text);
}

.fkf-modern .modal .list-group-item .text-muted {
  color: var(--fkf-text-muted) !important;
}

.fkf-modern .modal .btn-close {
  filter: none;
  opacity: 0.75;
}

html[data-theme="dark"] body.fkf-modern .modal .btn-close,
body.fkf-modern[data-theme="dark"] .modal .btn-close {
  filter: invert(1) grayscale(100%);
}

/* Shared semantic status presentation */
.fkf-status-badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--fkf-radius-xs);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 600;
  gap: 0.28rem;
  line-height: 1.15;
  max-width: 100%;
  padding: 0.18rem 0.38rem;
  vertical-align: middle;
}

.fkf-status-primary {
  background: color-mix(in srgb, var(--fkf-primary), transparent 84%);
  border-color: color-mix(in srgb, var(--fkf-primary), transparent 62%);
  color: color-mix(in srgb, var(--fkf-primary), var(--fkf-text) 22%);
}

.fkf-status-secondary {
  background: color-mix(in srgb, var(--fkf-text-muted), transparent 86%);
  border-color: color-mix(in srgb, var(--fkf-text-muted), transparent 68%);
  color: var(--fkf-text-muted);
}

.fkf-status-success {
  background: color-mix(in srgb, var(--fkf-success), transparent 84%);
  border-color: color-mix(in srgb, var(--fkf-success), transparent 62%);
  color: color-mix(in srgb, var(--fkf-success), var(--fkf-text) 22%);
}

.fkf-status-warning {
  background: color-mix(in srgb, var(--fkf-warning), transparent 78%);
  border-color: color-mix(in srgb, var(--fkf-warning), transparent 48%);
  color: color-mix(in srgb, #7a5200, var(--fkf-text) 18%);
}

.fkf-status-danger {
  background: color-mix(in srgb, var(--fkf-danger), transparent 85%);
  border-color: color-mix(in srgb, var(--fkf-danger), transparent 62%);
  color: color-mix(in srgb, var(--fkf-danger), var(--fkf-text) 18%);
}

.fkf-status-info {
  background: color-mix(in srgb, var(--fkf-info), transparent 82%);
  border-color: color-mix(in srgb, var(--fkf-info), transparent 54%);
  color: color-mix(in srgb, var(--fkf-info), var(--fkf-text) 42%);
}

/* Shared asynchronous loading, empty, timeout, and failure states */
.fkf-async-state {
  align-items: center;
  color: var(--fkf-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fkf-space-2);
  justify-content: center;
  min-height: 54px;
  padding: var(--fkf-space-3);
  text-align: center;
}

.fkf-async-state-error,
.fkf-async-state-timeout {
  color: var(--fkf-danger);
}

.fkf-spin {
  animation: fkf-spin 0.8s linear infinite;
}

@keyframes fkf-spin {
  to { transform: rotate(360deg); }
}

[data-fkf-search-scope="local"] .input-group-text {
  color: var(--fkf-text-muted);
}

[data-fkf-search-scope="server"] .input-group-text {
  color: var(--fkf-primary);
}

[data-fkf-dirty-guard] [data-fkf-dirty-submit]:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.js-category-logo-preview {
  background: var(--fkf-surface-muted);
  border: 1px solid var(--fkf-border);
  height: 42px;
  object-fit: contain;
  padding: 3px;
  width: 42px;
}