:root {
        --app-bg: #f4f6f8;
        --app-surface: #ffffff;
        --app-surface-muted: #f0f4f2;
        --app-border: #d7e0d8;
        --app-border-strong: rgba(15, 44, 32, 0.22);
        --app-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
        --app-radius: 18px;
        --app-topbar-height: 64px;
        --app-text: #0b1b22;
        --app-text-muted: #5b6b7a;
        --app-grid-line: rgba(15, 23, 42, 0.03);
        --app-green-900: #1b5b43;
        --app-green-800: #217152;
        --app-green-600: #2f8a64;
        --app-navy-900: #244e82;
        --app-builder-sidebar-width: 320px;
        --app-builder-shell-gap: 1.25rem;
        --app-table-canvas-gutter: 32px;
        --builder-table-max-height: calc(100vh - 300px);
        --app-font-body: "Public Sans", "Source Sans 3", "Noto Sans", "Liberation Sans", sans-serif;
        --app-font-display: "Source Serif 4", "Libre Baskerville", "Noto Serif", "Georgia", serif;
      }

      body.app-body {
        min-height: 100vh;
        color: var(--app-text);
        font-family: var(--app-font-body);
        letter-spacing: 0.1px;
        background:
          radial-gradient(1200px 800px at 12% 0%, rgba(24, 148, 115, 0.14), transparent 55%),
          radial-gradient(1200px 800px at 90% 100%, rgba(35, 75, 125, 0.08), transparent 60%),
          repeating-linear-gradient(0deg, var(--app-grid-line) 0 1px, transparent 1px 36px),
          repeating-linear-gradient(90deg, var(--app-grid-line) 0 1px, transparent 1px 36px),
          var(--app-bg);
      }

      .app-topbar {
        position: relative;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
          repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 10px),
          repeating-linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 10px),
          linear-gradient(90deg, var(--app-green-900), var(--app-green-800) 52%, var(--app-green-600));
        box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
      }

      .app-topbar::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(
          90deg,
          var(--app-cm-green) 0%,
          var(--app-cm-green) 33%,
          var(--app-cm-red) 33%,
          var(--app-cm-red) 66%,
          var(--app-cm-yellow) 66%,
          var(--app-cm-yellow) 100%
        );
        opacity: 0.75;
      }

      .app-topbar .navbar-brand {
        display: inline-flex;
        align-items: center;
        gap: 0.85rem;
        font-family: var(--app-font-display);
        letter-spacing: 0.04em;
        text-transform: none;
        color: rgba(255, 255, 255, 0.95);
      }

      .app-topbar .navbar-brand:hover,
      .app-topbar .navbar-brand:focus {
        color: #ffffff;
      }

      .app-topbar-brand-logo {
        width: 44px;
        height: 44px;
        object-fit: contain;
        flex: 0 0 auto;
        filter: drop-shadow(0 10px 24px rgba(2, 6, 23, 0.24));
      }

      .app-topbar-brand-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        line-height: 1.02;
      }

      .app-topbar-brand-name {
        font-family: var(--app-font-display);
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .app-topbar-brand-module {
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.8);
      }

      .app-topbar .btn {
        border-radius: 999px;
        font-weight: 600;
        letter-spacing: 0.01em;
      }

      .app-topbar .btn-outline-light {
        border-color: rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.95);
      }

      .app-topbar .btn-outline-light:hover,
      .app-topbar .btn-outline-light:focus {
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.18);
      }

      .app-topbar .btn-success {
        border-color: rgba(255, 255, 255, 0.3);
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%),
          linear-gradient(135deg, #2f8a64, #1b5b43);
        box-shadow: 0 12px 28px rgba(2, 6, 23, 0.2);
      }

      .app-topbar .app-lang-switcher {
        min-width: 104px;
      }

      .app-topbar .app-lang-switcher .input-group-text,
      .app-topbar .app-lang-switcher .form-select {
        background: rgba(255, 255, 255, 0.08) !important;
      }

      .app-topbar .app-lang-switcher .form-select {
        color: rgba(255, 255, 255, 0.95);
        font-weight: 600;
        border-radius: 0 999px 999px 0;
      }

      .app-topbar .app-lang-switcher .input-group-text {
        border-radius: 999px 0 0 999px;
      }

      .app-topbar .app-lang-switcher .form-select option {
        color: #0f172a;
      }

      .app-page-footer {
        border-top: 1px solid var(--app-border);
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(8px);
      }

      .app-page-footer .app-lang-switcher {
        min-width: 0;
        width: auto;
        margin-left: auto;
        flex: 0 0 auto;
      }

      .app-page-footer .app-lang-switcher .input-group-text,
      .app-page-footer .app-lang-switcher .form-select {
        border-color: rgba(33, 113, 82, 0.35);
        background: #ffffff;
      }

      .app-page-footer .app-lang-switcher .form-select {
        color: #14532d;
        font-weight: 700;
        border-radius: 0 999px 999px 0;
        width: 4.25rem;
        padding-left: 0.55rem;
        padding-right: 1.55rem;
      }

      .app-page-footer .app-lang-switcher .input-group-text {
        color: #14532d;
        border-radius: 999px 0 0 999px;
        min-width: 2.1rem;
        justify-content: center;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
      }

      .app-main {
        margin: 0 auto;
        max-width: 1680px;
      }

      .app-builder-shell {
        position: relative;
        display: grid;
        grid-template-columns: var(--app-builder-sidebar-width) minmax(0, 1fr);
        gap: var(--app-builder-shell-gap);
        align-items: start;
      }

      .app-sidebar,
      .app-workspace {
        min-width: 0;
      }

      .app-sidebar {
        position: relative;
        z-index: 1;
      }

      .app-workspace {
        position: relative;
      }

      .app-card {
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius);
        box-shadow: 0 18px 40px rgba(2, 6, 23, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 249, 0.96));
        backdrop-filter: blur(6px);
        position: relative;
        overflow: hidden;
        animation: app-rise 0.45s ease-out;
        animation-fill-mode: both;
      }

      .app-card::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        display: none;
      }

      .app-sidebar .app-card {
        animation-delay: 0.04s;
      }

      .app-workspace .app-card {
        animation-delay: 0.08s;
      }

      .app-sidebar .form-control,
      .app-sidebar .form-select {
        border-radius: 14px;
        border-color: rgba(15, 23, 42, 0.18);
        /* Keep Bootstrap background-* sub-properties (icons, no-repeat, position). */
        background-color: rgba(255, 255, 255, 0.96);
      }

      .app-sidebar .form-control:focus,
      .app-sidebar .form-select:focus {
        border-color: rgba(34, 197, 94, 0.55);
        box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.18);
      }

      /* ===== Table ID picker (custom dropdown; replaces <datalist>) ===== */
      .app-table-id-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 0.35rem;
        padding: 0.35rem;
        border: 1px solid var(--app-border);
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 18px 50px rgba(2, 6, 23, 0.18);
        z-index: 1050;
        max-height: 160px;
        overflow: auto;
        display: none;
      }

      .app-table-id-menu.is-open {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .app-table-id-option {
        display: block;
        width: 100%;
        border: 1px solid transparent;
        background: transparent;
        text-align: left;
        padding: 1rem 0.2rem;
        font-weight: 650;
        font-size: 0.82rem;
        line-height: 1.2;
        font-family:
          ui-monospace,
          SFMono-Regular,
          Menlo,
          Monaco,
          Consolas,
          "Liberation Mono",
          "Courier New",
          monospace;
        color: #0f172a;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
      }

      .app-table-id-option:hover,
      .app-table-id-option.is-active,
      .app-table-id-option:focus {
        background: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.25);
        color: #14532d;
        outline: none;
      }

      .app-version-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.3rem 0.4rem;
        border: 1px solid var(--app-border);
        border-radius: 12px;
        background: var(--app-surface-muted);
      }

      .app-version-nav__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        border: 1px solid transparent;
        border-radius: 9px;
        background: transparent;
        color: var(--app-green-800);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        transition:
          background-color 0.15s ease,
          border-color 0.15s ease,
          color 0.15s ease;
      }

      .app-version-nav__btn:hover:not(:disabled),
      .app-version-nav__btn:focus-visible {
        background: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.25);
        color: #14532d;
        outline: none;
      }

      .app-version-nav__btn:disabled {
        color: var(--app-text-muted);
        opacity: 0.4;
        cursor: default;
      }

      .app-version-nav__info {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
        font-size: 0.78rem;
        font-weight: 650;
        color: var(--app-text-muted);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .app-version-nav__info .bi {
        color: var(--app-green-600);
        font-size: 0.85rem;
      }

      .app-version-nav.is-busy .app-version-nav__info .bi {
        animation: app-version-nav-spin 0.9s linear infinite;
      }

      @keyframes app-version-nav-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      body.sidebar-collapsed .app-builder-shell {
        grid-template-columns: 0 minmax(0, 1fr);
      }

      body.sidebar-collapsed .app-sidebar {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
        max-height: 0;
        margin: 0;
      }

      .section-title {
        font-size: 0.95rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-family: var(--app-font-display);
        color: var(--app-green-900);
      }

      .section-subtitle {
        font-size: 0.86rem;
        color: var(--app-text-muted);
      }

      .app-workspace .card-body {
        padding: 1.15rem 1.2rem 1rem;
      }

      .app-workspace-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
      }

      .app-workspace-heading {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }

      .app-workspace-heading .section-title {
        font-size: 1rem;
      }

      .app-workspace-heading .section-subtitle {
        max-width: 52rem;
        font-size: 0.92rem;
        line-height: 1.45;
      }

      .app-workspace-canvas {
        min-width: 0;
        margin-top: 0.85rem;
      }

      .app-sidebar-rail-toggle,
      .app-sidebar-inline-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        min-height: 36px;
        border: 1px solid rgba(27, 91, 67, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--app-green-900);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
        backdrop-filter: blur(12px);
      }

      .app-sidebar-rail-toggle:hover,
      .app-sidebar-rail-toggle:focus,
      .app-sidebar-inline-toggle:hover,
      .app-sidebar-inline-toggle:focus {
        color: var(--app-green-900);
        background: #ffffff;
        border-color: rgba(27, 91, 67, 0.28);
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
      }

      .app-sidebar-rail-toggle:focus-visible,
      .app-sidebar-inline-toggle:focus-visible,
      .app-toolbar .btn:focus-visible,
      .app-toolbar .dropdown-toggle:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 0.22rem rgba(47, 138, 100, 0.18), 0 16px 34px rgba(15, 23, 42, 0.14);
      }

      .app-sidebar-rail-toggle {
        position: absolute;
        top: 0.85rem;
        left: calc(var(--app-builder-sidebar-width) - 17px);
        width: 34px;
        height: 34px;
        padding: 0;
        z-index: 4;
      }

      body.sidebar-collapsed .app-sidebar-rail-toggle {
        left: 0;
      }

      .app-sidebar-inline-toggle {
        padding: 0.45rem 0.8rem;
        font-size: 0.84rem;
        font-weight: 700;
        white-space: nowrap;
      }

      .app-modal-title {
        font-family: var(--app-font-display);
        letter-spacing: 0.03em;
      }

      .app-modal-header::after {
        height: 3px;
        background: linear-gradient(
          90deg,
          var(--app-cm-green) 0%,
          var(--app-cm-green) 33%,
          var(--app-cm-red) 33%,
          var(--app-cm-red) 66%,
          var(--app-cm-yellow) 66%,
          var(--app-cm-yellow) 100%
        );
        opacity: 0.75;
      }

      .app-modal-actions {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
      }

      .app-modal-actions--filter {
        margin-left: auto;
      }

      .app-modal-primary-action {
        border-radius: 999px;
        font-weight: 700;
        border-color: rgba(255, 255, 255, 0.4);
        color: var(--app-green-900);
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 10px 22px rgba(2, 6, 23, 0.18);
      }

      .app-modal-primary-action:hover,
      .app-modal-primary-action:focus {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(255, 255, 255, 0.65);
      }

      .app-modal-secondary-action {
        border-radius: 999px;
        font-weight: 600;
        border-color: rgba(255, 255, 255, 0.45);
        color: rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.08);
      }

      .app-modal-secondary-action:hover,
      .app-modal-secondary-action:focus {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.68);
      }

      .app-modal-header--preview {
        gap: 1.1rem;
      }

      .app-modal-heading {
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 0.2rem;
      }

      .app-modal-heading .app-modal-title {
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .app-modal-subtitle {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.78);
      }

      .app-modal-header--preview .nav-tabs {
        margin-left: auto;
        gap: 0.5rem;
      }

      .app-modal-header--preview .nav-tabs .nav-link {
        padding: 0.4rem 0.85rem;
      }

      @media (max-width: 768px) {
        .app-modal-header--preview {
          flex-wrap: wrap;
        }

        .app-modal-header--preview .nav-tabs {
          width: 100%;
          margin-left: 0;
        }
      }

      .app-body .app-modal-content {
        border: 1px solid var(--app-border);
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 249, 0.96));
        box-shadow: 0 30px 70px rgba(2, 6, 23, 0.25);
      }

      .modal-fullscreen .app-modal-content {
        border-radius: 0;
        box-shadow: none;
        border: none;
      }

      .app-body .app-modal-header {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
          linear-gradient(135deg, var(--app-green-900), var(--app-green-800) 52%, var(--app-green-600));
        padding: 0.75rem 1.1rem;
      }

      .app-body .app-modal-body {
        background:
          radial-gradient(1000px 600px at 12% 0%, rgba(24, 148, 115, 0.08), transparent 55%),
          radial-gradient(1000px 600px at 88% 0%, rgba(35, 75, 125, 0.06), transparent 60%),
          repeating-linear-gradient(0deg, var(--app-grid-line) 0 1px, transparent 1px 32px),
          repeating-linear-gradient(90deg, var(--app-grid-line) 0 1px, transparent 1px 32px),
          linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 249, 0.96) 100%);
      }

      .app-body .app-modal-footer {
        background: rgba(20, 83, 45, 0.04);
        border-top: 1px solid var(--app-border);
      }

      .app-body .app-modal-header .nav-tabs .nav-link {
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.12);
        font-weight: 700;
      }

      .app-body .app-modal-header .nav-tabs .nav-link:hover {
        border-color: rgba(255, 255, 255, 0.42);
      }

      .app-body .app-modal-header .nav-tabs .nav-link.active {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(255, 255, 255, 0.7);
        color: var(--app-green-900);
      }

      .custom-header {
        background: linear-gradient(90deg, #28a745, #218838);
      }
      .custom-export-btn {
        background-color: #218838;
        border-color: #218838;
      }
      #htmlTableContainer {
        max-height: 400px;
        overflow-y: auto;
        overflow-x: auto;
      }
      .tooltip-inner {
        background-color: red !important;
        color: white;
      }
      #modal-suggestions {
        max-height: 300px;
        overflow-y: auto;
      }
      #toolbar.toolbar-surface {
        padding: 0.48rem 0.65rem;
        border-radius: 14px;
        border: 1px solid rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 248, 0.92));
        backdrop-filter: blur(12px);
        position: sticky;
        top: calc(var(--app-topbar-height) + 12px);
        z-index: 1020;
        box-shadow: 0 12px 28px rgba(2, 6, 23, 0.08);
      }

      .app-toolbar-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.55rem;
        min-width: 0;
        overflow: visible;
      }

      .app-toolbar-row::-webkit-scrollbar {
        height: 0;
      }

      .app-toolbar-group {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        min-width: 0;
      }

      .app-toolbar-group + .app-toolbar-group {
        padding-left: 0.5rem;
        margin-left: 0;
        border-left: 1px solid rgba(15, 23, 42, 0.1);
      }

      .app-toolbar-group--history {
        margin-left: auto;
      }

      .app-toolbar-group__label {
        display: none;
      }

      .app-toolbar-group__actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
      }

      #toolbar.toolbar-surface .btn,
      #toolbar.toolbar-surface .dropdown-toggle {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        border-radius: 12px;
        padding: 0.35rem 0.68rem;
        font-weight: 700;
        white-space: nowrap;
        line-height: 1.15;
      }

      #toolbar.toolbar-surface .btn-outline-success,
      #toolbar.toolbar-surface .dropdown-toggle {
        border-color: rgba(47, 138, 100, 0.52);
        color: var(--app-green-800);
        background: rgba(255, 255, 255, 0.86);
      }

      #toolbar.toolbar-surface .btn-outline-secondary {
        border-color: rgba(15, 23, 42, 0.14);
        color: #50606e;
        background: rgba(255, 255, 255, 0.75);
      }

      #toolbar.toolbar-surface .btn-outline-secondary:hover,
      #toolbar.toolbar-surface .btn-outline-secondary:focus {
        color: #33404d;
        border-color: rgba(15, 23, 42, 0.22);
        background: rgba(255, 255, 255, 0.96);
      }

      #toolbar .dropdown {
        flex: 0 0 auto;
        min-width: 0;
      }

      #toolbar .app-toolbar-compact-action {
        padding-left: 0.62rem;
        padding-right: 0.62rem;
      }

      #toolbar .app-toolbar-btn-label {
        display: inline-block;
        min-width: 0;
      }

      #toolbar .dropdown-toggle {
        min-width: 0;
      }

      #toolbar .dropdown-menu {
        z-index: 1050;
        min-width: 176px;
        max-width: 220px;
        word-wrap: break-word;
      }

      @media (min-width: 992px) and (max-width: 1199.98px) {
        .app-toolbar-row {
          overflow-x: auto;
          overflow-y: hidden;
          overscroll-behavior-x: contain;
          scrollbar-width: none;
        }

        .app-toolbar-row::-webkit-scrollbar {
          display: none;
        }
      }
      .app-body .btn {
        border-radius: 12px;
        font-weight: 600;
        transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
      }
      .app-body .btn:hover {
        transform: translateY(-1px);
      }
      .app-body .btn:active {
        transform: translateY(0);
      }

      .table-canvas {
        border: 1px solid var(--app-border);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
        background:
          linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
        background-size: var(--app-table-canvas-gutter) var(--app-table-canvas-gutter);
      }

      .table-canvas .table-responsive {
        max-height: var(--builder-table-max-height);
        overflow: auto;
        scrollbar-gutter: stable both-edges;
      }

      /* Table template preview styles (driven by the Style modal). */
      #dynamicTable {
        font-family: var(--yb-tpl-font-family, inherit);
        font-size: var(--yb-tpl-font-size, 1rem);
        color: var(--yb-tpl-text-color, inherit);
        --bs-table-border-color: var(--yb-tpl-border-color, rgba(15, 23, 42, 0.18));
      }

      #dynamicTable td,
      #dynamicTable th {
        border-color: rgba(27, 91, 67, 0.28);
      }

      #dynamicTable tr.yb-template-header-row > td,
      #dynamicTable tr.yb-template-header-row > th {
        background-color: var(--yb-tpl-header-bg, #dce6f1);
        color: var(--yb-tpl-header-fg, inherit);
      }

      /* Ensure selection highlight stays visible even on header rows. */
      #dynamicTable tr.yb-template-header-row > td.selected,
      #dynamicTable tr.yb-template-header-row > th.selected {
        background-color: #d4edda;
      }

      /* Keep table inputs visually consistent even when read-only (we edit via the search modal). */
      #dynamicTable .form-control[readonly] {
        background-color: #fff;
      }

      /* Rotated header labels from rendered style_config (preview/export). */
      .yb-rotated-text {
        position: relative;
        overflow: visible;
      }

      .yb-rotated-text .yb-cell-text {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(var(--yb-text-rotation));
        transform-origin: center center;
        white-space: normal;
        line-height: 1.1;
        width: calc(100% - 8px);
        max-width: none;
        text-overflow: clip;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: break-word;
        text-align: center;
      }

      .yb-rotated-text.yb-text-vertical .yb-cell-text {
        transform-origin: center center;
      }

      .yb-rotated-text.yb-text-diagonal {
        vertical-align: middle !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        height: 92px;
        min-height: 92px;
      }

      .yb-rotated-text.yb-text-diagonal .yb-cell-text {
        transform-origin: center center;
        line-height: 1;
      }

      /* Visual markers for mappings & filters (subtle corner flags). */
      #dynamicTable td.cell-has-mapping,
      #dynamicTable td.cell-has-filter {
        position: relative;
      }

      #dynamicTable td.cell-has-variable-alias,
      #dynamicTable th.cell-has-variable-alias {
        position: relative;
      }

      #dynamicTable td.cell-has-mapping::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-top: 12px solid rgba(34, 197, 94, 0.95);
        border-left: 12px solid transparent;
        pointer-events: none;
      }

      /* Make a configured mapping visible at a glance (not just the small corner
         flag): a clear green left accent on the cell's input. Combined with the
         hover tooltip, the mapping set by the assistant is discoverable without
         opening the per-cell mapping modal. */
      #dynamicTable td.cell-has-mapping .autocomplete-input {
        border-left: 3px solid rgba(34, 197, 94, 0.9);
      }

      #dynamicTable td.cell-has-filter::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-top: 12px solid rgba(16, 185, 129, 0.95);
        border-right: 12px solid transparent;
        pointer-events: none;
      }

      #dynamicTable td.cell-has-variable-alias .autocomplete-input,
      #dynamicTable th.cell-has-variable-alias .autocomplete-input {
        padding-right: 4.6rem;
      }

      #dynamicTable .cell-variable-alias-badge {
        position: absolute;
        top: 0.35rem;
        right: 0.35rem;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 3.2rem;
        height: 1.45rem;
        padding: 0 0.45rem;
        border: none;
        border-radius: 999px;
        background: #0f766e;
        color: #fff;
        font-size: 0.66rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.02em;
        box-shadow: 0 8px 18px rgba(15, 118, 110, 0.2);
        cursor: pointer;
      }

      #dynamicTable .cell-variable-alias-badge:hover,
      #dynamicTable .cell-variable-alias-badge:focus-visible {
        background: #115e59;
        outline: none;
        box-shadow:
          0 0 0 0.15rem rgba(15, 118, 110, 0.2),
          0 10px 20px rgba(15, 118, 110, 0.22);
      }
      .dropdown-menu {
        border-radius: 0.5rem;
        animation: fadeIn 0.3s ease-in-out;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .modal-backdrop.show {
        z-index: 1040;
      }
      /* Ensure nested modals stack above Blockly overlays */
      #valuePickerModal {
        z-index: 1070;
      }
      #autocompleteModal {
        z-index: 1080;
      }
      #spinnerModal {
        z-index: 1090;
      }
      #cellContextMenu {
        min-width: 230px;
        border: 1px solid rgba(15, 81, 50, 0.15);
        border-radius: 14px;
        background: #fdfefe;
        box-shadow: 0 20px 60px rgba(11, 17, 29, 0.15);
        padding: 0.35rem 0;
        z-index: 1065;
        backdrop-filter: blur(4px);
        animation: contextMenuFade 120ms ease-out;
      }
      #cellContextMenu .menu-hint,
      #cellContextMenu .menu-variable {
        padding: 0.5rem 1rem;
      }
      #cellContextMenu .menu-hint {
        color: #6c757d;
        font-size: 0.82rem;
      }
      #cellContextMenu .menu-variable {
        font-size: 0.85rem;
        color: #166534;
        font-weight: 600;
        display: none;
      }
      #cellContextMenu .dropdown-item {
        font-weight: 500;
        color: #0f5132;
        padding: 0.55rem 1rem;
      }
      #cellContextMenu .dropdown-item i {
        font-size: 1rem;
      }
      #cellContextMenu .dropdown-item:hover,
      #cellContextMenu .dropdown-item:focus {
        background: rgba(34, 197, 94, 0.1);
        color: #14532d;
      }
      #cellContextMenu .dropdown-item.disabled,
      #cellContextMenu .dropdown-item.disabled:hover {
        color: #94a3b8;
        background: transparent;
        cursor: not-allowed;
      }
      @keyframes contextMenuFade {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      /* Blockly injects very large z-index values (Bootstrap3 era). Override so dropdowns/tooltips
         don't float above higher-priority modals like Autocomplete/Value Picker. */
      .blocklyWidgetDiv,
      .blocklyDropDownDiv,
      .blocklyTooltipDiv {
        z-index: 1060 !important;
      }
      .highlight-selection {
        background: rgba(34, 197, 94, 0.14);
        border-color: rgba(34, 197, 94, 0.35);
        box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35);
      }

      /* ===== Autocomplete modal (variables) ===== */
      #autocompleteModal .modal-content {
        border-radius: 18px;
        overflow: hidden;
      }
      #autocompleteModal .modal-body {
        background-color: #f8fafc;
      }
      #autocompleteModal .autocomplete-search .input-group-text {
        border-right: 0;
      }
      #autocompleteModal #modal-input {
        border-left: 0;
      }
      #autocompleteModal #autocompleteClearBtn {
        border-left: 0;
      }
      #autocompleteModal .autocomplete-results {
        max-height: 360px;
        overflow: auto;
        border: 1px solid rgba(15, 81, 50, 0.25);
        border-radius: 14px;
        background: #ffffff;
      }
      #autocompleteModal .autocomplete-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 0.75rem;
        border-color: #eef2f7;
      }
      #autocompleteModal .autocomplete-item:hover,
      #autocompleteModal .autocomplete-item:focus {
        background: #f8fafc;
      }
      #autocompleteModal .autocomplete-item.is-active,
      #autocompleteModal .autocomplete-item.highlight-selection {
        background: rgba(34, 197, 94, 0.14);
        border-color: rgba(34, 197, 94, 0.35);
      }
      #autocompleteModal .autocomplete-item:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.18);
      }
      #autocompleteModal .autocomplete-item .var-table {
        font-weight: 700;
        color: #166534;
      }
      #autocompleteModal .autocomplete-item .var-col {
        font-weight: 600;
        color: #0f766e;
      }
      #autocompleteModal .autocomplete-item .var-kind-icon {
        flex: 0 0 auto;
        font-size: 1.05rem;
        opacity: 0.95;
      }
      #autocompleteModal .autocomplete-item .var-kind-icon.is-table {
        color: #166534;
      }
      #autocompleteModal .autocomplete-item .var-kind-icon.is-view {
        color: var(--app-navy-900);
      }
      #autocompleteModal .autocomplete-item .var-kind-icon.is-atlas {
        color: #0f766e;
      }
      #autocompleteModal .autocomplete-item .autocomplete-item-meta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
      }
      #autocompleteModal .autocomplete-item .var-kind-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.18rem 0.55rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border: 1px solid transparent;
        line-height: 1.2;
      }
      #autocompleteModal .autocomplete-item .var-kind-badge.is-table {
        background: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.28);
        color: #166534;
      }
      #autocompleteModal .autocomplete-item .var-kind-badge.is-view {
        background: rgba(35, 75, 125, 0.12);
        border-color: rgba(35, 75, 125, 0.3);
        color: var(--app-navy-900);
      }
      #autocompleteModal .autocomplete-item .var-kind-badge.is-atlas {
        background: rgba(20, 184, 166, 0.12);
        border-color: rgba(20, 184, 166, 0.28);
        color: #0f766e;
      }
      #autocompleteModal .autocomplete-item .min-w-0 {
        min-width: 0 !important;
      }
      #autocompleteModal .autocomplete-item .var-table,
      #autocompleteModal .autocomplete-item .var-col {
        max-width: 18rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #autocompleteModal .autocomplete-item mark {
        background: rgba(34, 197, 94, 0.22);
        border-radius: 6px;
        padding: 0 0.18rem;
      }
      #autocompleteModal #autocompleteEmptyState {
        padding: 1rem;
        text-align: center;
      }
      /* Blocks UI helpers */
      #filterBlocklyDiv {
        flex: 1;
        min-height: 0;
        width: 100%;
        background: #ffffff;
        border: 1px solid rgba(15, 81, 50, 0.22);
        border-radius: 12px;
        box-shadow: 0 10px 26px rgba(15, 81, 50, 0.08);
      }
      #filterBlocksSql,
      #filterBlocksAst {
        max-height: 160px;
        overflow: auto;
        background: #0b1220;
        color: #e5e7eb;
        border-radius: 10px;
        padding: 10px;
        font-size: 12px;
        margin: 0;
      }    
        /* ===== Filter modal (fullscreen like mapping) ===== */
        #filterModal .modal-content{
          height: 100vh;
          border-radius: 0;
        }
        #filterModal .modal-body{
          overflow: hidden;
          display: flex;
          flex-direction: column;
          gap: .5rem;
          min-height: 0;
        }
        #filtersBlocksPane{
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: .5rem;
          min-height: 0;
        }

        #filterModal .filter-target-info{
          border-radius: 16px;
          border: 1px solid rgba(14, 116, 144, 0.22);
          background: rgba(224, 242, 254, 0.95);
          color: #0f172a;
        }

        #filterModal .filter-modal-layout{
          flex: 1 1 auto;
          min-height: 0;
          display: flex;
          flex-direction: column;
          gap: .85rem;
        }

        #filterModal .filter-scope-wrap{
          display: flex;
          align-items: center;
          gap: .75rem;
          margin-top: .35rem;
          padding: .6rem .8rem;
          border-radius: 16px;
          border: 1px solid rgba(15, 81, 50, 0.14);
          background: rgba(255, 255, 255, 0.94);
          box-shadow: 0 10px 24px rgba(15, 81, 50, 0.06);
        }

        #filterModal .filter-scope-label{
          flex: 0 0 auto;
          margin: 0;
          font-size: .82rem;
          font-weight: 700;
          letter-spacing: .02em;
          text-transform: uppercase;
          color: #14532d;
        }

        #filterModal .filter-scope-select{
          flex: 1 1 auto;
          min-width: 0;
          border-radius: 14px;
          border-color: rgba(20, 83, 45, 0.18);
        }

        #filterModal .filter-blockly-stage{
          flex: 1 1 auto;
          min-height: 0;
          min-width: 0;
          width: 100%;
          display: flex;
          flex-direction: column;
        }

        #filterModal #filterBlocklyDiv{
          flex: 1 1 auto;
          min-height: 0;
          min-width: 0;
          width: 100%;
          border-radius: 20px;
          overflow: hidden;
        }

        #filterModal .filter-modal-toolbar{
          position: sticky;
          top: 0;
          z-index: 5;
          padding: .5rem;
          border-radius: 14px;
          border: 1px solid rgba(15, 81, 50, 0.18);
          background: rgba(255, 255, 255, 0.86);
          backdrop-filter: blur(10px);
          box-shadow: 0 10px 26px rgba(15, 81, 50, 0.08);
        }

        #filterModal .filter-modal-toolbar .btn{
          border-radius: 999px;
        }

        #filterModal .filter-modal-toolbar .btn-outline-secondary{
          border-color: rgba(71, 85, 105, 0.35);
          color: #334155;
        }

        #filterModal .filter-modal-toolbar .btn-outline-secondary:hover{
          background: rgba(148, 163, 184, 0.12);
        }

        @media (max-width: 991.98px) {
          #filterModal .filter-modal-layout{
            gap: .75rem;
          }
        }

        /* ===== Preview modal (fullscreen like mapping) ===== */
        #previewModal .modal-content{
          height: 100vh;
          border-radius: 0;
        }
        #previewModal .modal-body{
          overflow: hidden;
          display: flex;
          flex-direction: column;
          gap: .5rem;
          min-height: 0;
        }
        #previewModal .tab-content{
          flex: 1;
          min-height: 0;
        }
        #previewModal .tab-pane{
          height: 100%;
        }
        #previewModal .tab-pane.active{
          display: flex;
          flex-direction: column;
          min-height: 0;
        }
        #previewModal #htmlTableContainer{
          flex: 1;
          min-height: 0;
          overflow: auto;
        }
        #previewModal #previewQueriesContainer{
          flex: 1;
          min-height: 0;
          overflow: auto;
        }

        #previewModal .preview-queries-toolbar {
          padding: 0.5rem 0.75rem;
          border-radius: 14px;
          border: 1px solid var(--app-border);
          background: rgba(255, 255, 255, 0.92);
          box-shadow: 0 12px 24px rgba(2, 6, 23, 0.08);
        }

        #previewModal .preview-queries-badge {
          background: rgba(24, 148, 115, 0.12);
          border: 1px solid rgba(24, 148, 115, 0.28);
          color: var(--app-green-900);
          font-weight: 700;
          letter-spacing: 0.02em;
          text-transform: uppercase;
          padding: 0.35rem 0.65rem;
        }

        #previewModal .preview-queries-copy {
          border-radius: 999px;
          font-weight: 600;
        }

        #previewModal .preview-queries-empty {
          color: var(--app-text-muted);
          font-size: 0.9rem;
          margin-top: 0.5rem;
        }

        #previewModal .preview-queries-list {
          margin-top: 0.5rem;
        }

        #previewModal .preview-query-card {
          border: 1px solid var(--app-border);
          border-radius: 16px;
          padding: 0.9rem;
          background: rgba(255, 255, 255, 0.96);
          box-shadow: 0 12px 26px rgba(2, 6, 23, 0.08);
          transition: transform 140ms ease, box-shadow 140ms ease;
        }

        #previewModal .preview-query-card:hover {
          transform: translateY(-1px);
          box-shadow: 0 16px 32px rgba(2, 6, 23, 0.12);
        }

        #previewModal .preview-query-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 0.75rem;
          margin-bottom: 0.6rem;
        }

        #previewModal .preview-query-title {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          flex-wrap: wrap;
        }

        #previewModal .preview-query-badge {
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          padding: 0.2rem 0.6rem;
          border-radius: 999px;
          border: 1px solid rgba(35, 75, 125, 0.28);
          background: rgba(35, 75, 125, 0.1);
          color: var(--app-navy-900);
          font-weight: 700;
          font-size: 0.75rem;
          letter-spacing: 0.03em;
        }

        #previewModal .preview-query-sql {
          margin: 0;
          font-size: 0.85rem;
          line-height: 1.6;
          white-space: pre;
          overflow: auto;
          max-height: 50vh;
          padding: 0.75rem;
          border-radius: 12px;
          border: 1px solid rgba(15, 44, 32, 0.18);
          background: rgba(248, 250, 249, 0.9);
          color: var(--app-text);
        }
        #previewModal #previewGraphContainer{
          flex: 1;
          min-height: 0;
          overflow: hidden;
        }
        #previewModal #previewGraphCanvas{
          width: 100%;
          height: 100%;
          flex: 1;
          min-height: 0;
          border-radius: .75rem;
          border: 1px solid #e5e7eb;
          background-color: #ffffff;
          background-image:
            linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
          background-size: 24px 24px;
          position: relative;
        }

        /* ===== Value Picker aesthetics ===== */
        #valuePickerModal .modal-content{
        border-radius: 18px;
        }
        #valuePickerModal .modal-header{
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        }
        #valuePickerModal #valuePickerList{
        border: 1px solid #cbd5e1;
        background: #ffffff;
        }
        #valuePickerModal #valuePickerList .list-group-item{
        padding: .5rem .75rem;
        border-color: #eef2f7;
        }
        #valuePickerModal #valuePickerList .list-group-item:hover{
        background: #f8fafc;
        }


        /* ===== Blockly controls position (zoom/trash) ===== */
        #filterBlocklyDiv .blocklyZoom {
        top: 12px !important;
        bottom: auto !important;
        right: 12px !important;
        }
        #filterBlocklyDiv .blocklyTrash {
        top: 12px !important;
        bottom: auto !important;
        right: 78px !important;
        }
        #filterBlocklyDiv .blocklyToolboxDiv {
        border-right: 1px solid #e5e7eb;
        }

        /* ===== Inline styles moved out of templates/index.html ===== */
        #filterBlocklyToolbox {
          display: none;
        }

        #cellContextMenu {
          display: none;
          position: fixed;
        }

        #cellContextMenuDivider {
          display: none;
        }

        #spinnerModalCancelBtn {
          display: none;
        }

        #mappingValueThenDataWrap,
        #mappingAllowUnlinkedWrap,
        /* #mappingConnectAllValuesToAllData, */
        #valuePickerLoadMore {
          display: none;
        }

        .app-spinner-xl {
          width: 4rem;
          height: 4rem;
        }

        #exportFormat {
          width: auto;
        }

        #previewGraphQuerySelect {
          width: auto;
        }

        /* Modal color themes */
        #filterModal .modal-header,
        #mappingModal .modal-header,
        #previewModal .modal-header {
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
            linear-gradient(135deg, var(--app-green-900), var(--app-green-800) 52%, var(--app-green-600));
          box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
        }

        #autocompleteModal .modal-header,
        #sortModal .modal-header,
        #extraFieldModal .modal-header {
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
            linear-gradient(135deg, var(--app-green-900), var(--app-green-800) 52%, var(--app-green-600));
          box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
        }

        #valuePickerModal .modal-header {
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
            linear-gradient(135deg, var(--app-green-900), var(--app-green-800) 52%, var(--app-green-600));
          box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
        }

        #filterModal .modal-body,
        #mappingModal .modal-body,
        #previewModal .modal-body {
          background:
            radial-gradient(1000px 600px at 12% 0%, rgba(24, 148, 115, 0.08), transparent 55%),
            radial-gradient(1000px 600px at 88% 0%, rgba(35, 75, 125, 0.06), transparent 60%),
            repeating-linear-gradient(0deg, var(--app-grid-line) 0 1px, transparent 1px 32px),
            repeating-linear-gradient(90deg, var(--app-grid-line) 0 1px, transparent 1px 32px),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 249, 0.96) 100%);
        }

        #filterModal .modal-footer,
        #mappingModal .modal-footer,
        #previewModal .modal-footer {
          background: rgba(20, 83, 45, 0.04);
          border-top: 1px solid var(--app-border);
        }

        #autocompleteModal .modal-footer,
        #sortModal .modal-footer,
        #extraFieldModal .modal-footer {
          background: rgba(20, 83, 45, 0.04);
          border-top: 1px solid var(--app-border);
        }

        #sortModal .modal-body {
          background:
            radial-gradient(1000px 600px at 12% 0%, rgba(24, 148, 115, 0.08), transparent 55%),
            radial-gradient(1000px 600px at 88% 0%, rgba(35, 75, 125, 0.06), transparent 60%),
            repeating-linear-gradient(0deg, var(--app-grid-line) 0 1px, transparent 1px 32px),
            repeating-linear-gradient(90deg, var(--app-grid-line) 0 1px, transparent 1px 32px),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 249, 0.96) 100%);
        }

        #valuePickerModal .modal-body {
          background:
            radial-gradient(1000px 600px at 12% 0%, rgba(24, 148, 115, 0.08), transparent 55%),
            radial-gradient(1000px 600px at 88% 0%, rgba(35, 75, 125, 0.06), transparent 60%),
            repeating-linear-gradient(0deg, var(--app-grid-line) 0 1px, transparent 1px 32px),
            repeating-linear-gradient(90deg, var(--app-grid-line) 0 1px, transparent 1px 32px),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 249, 0.96) 100%);
        }

        #valuePickerModal .modal-footer {
          background: rgba(20, 83, 45, 0.04);
          border-top: 1px solid var(--app-border);
        }

        /* Preview legend */
        .preview-legend-dot {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 999px;
        }

        .preview-legend-dot-terminal {
          background: #16a34a;
        }

        .preview-legend-dot-steiner {
          background: #94a3b8;
        }

        .preview-legend-dot-root {
          background: var(--app-navy-900);
        }

        .preview-legend-line {
          display: inline-block;
          width: 12px;
          height: 2px;
          vertical-align: middle;
        }

        .preview-legend-line-selected {
          background: #16a34a;
        }

        .preview-legend-line-available {
          background: #cbd5e1;
        }

        /* Value picker sizing */
        #valuePickerModal .modal-dialog {
          max-width: 980px;
        }

        #valuePickerModal #valuePickerList {
          max-height: 420px;
          overflow: auto;
          border-radius: 10px;
        }

        #valuePickerTabList .input-group {
          max-width: 560px;
        }

        /* Mapping panels */
        #mappingModal #left-panel,
        #mappingModal #right-panel,
        #mappingModal #data-panel {
          border: 1px solid rgba(34, 197, 94, 0.35);
          border-radius: 12px;
          padding: 15px;
          flex: 1;
          background: #ffffff;
          min-width: 0;
        }

        #mappingModal #middle-panel,
        #mappingModal #middle-panel-2 {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 0.2;
          border: 1px dashed rgba(34, 197, 94, 0.35);
          border-radius: 12px;
          padding: 15px;
          background-color: rgba(34, 197, 94, 0.06);
        }

        #mappingModal .panel-header {
          color: #166534;
        }

        #mappingModal .mapping-arrows-icon {
          font-size: 1.5rem;
          color: var(--app-green-600);
        }

        [data-theme="dark"] {
          --app-bg: #0c1512;
          --app-surface: #12201b;
          --app-surface-muted: #172923;
          --app-border: #284338;
          --app-border-strong: rgba(179, 232, 210, 0.2);
          --app-shadow: 0 20px 46px rgba(0, 0, 0, 0.38);
          --app-text: #e5f1ea;
          --app-text-muted: #9bb5aa;
          --app-grid-line: rgba(255, 255, 255, 0.04);
          --app-green-900: #0f3f30;
          --app-green-800: #15684d;
          --app-green-600: #2aa777;
          --app-navy-900: #6aa0e3;
        }

        [data-theme="dark"] body.app-body {
          color-scheme: dark;
        }

        [data-theme="dark"] .app-card,
        [data-theme="dark"] .app-body .app-modal-content,
        [data-theme="dark"] #mappingModal #left-panel,
        [data-theme="dark"] #mappingModal #right-panel,
        [data-theme="dark"] #mappingModal #data-panel {
          background: linear-gradient(180deg, rgba(18, 32, 27, 0.98), rgba(13, 25, 21, 0.96));
          border-color: var(--app-border);
          box-shadow: var(--app-shadow);
          color: var(--app-text);
        }

        [data-theme="dark"] .app-page-footer {
          background: rgba(10, 18, 15, 0.88);
          border-top-color: var(--app-border);
        }

        [data-theme="dark"] .app-page-footer .app-lang-switcher .input-group-text,
        [data-theme="dark"] .app-page-footer .app-lang-switcher .form-select,
        [data-theme="dark"] .app-topbar .app-lang-switcher .input-group-text,
        [data-theme="dark"] .app-topbar .app-lang-switcher .form-select {
          background: rgba(18, 32, 27, 0.9) !important;
          border-color: rgba(179, 232, 210, 0.18);
          color: var(--app-text);
        }

        [data-theme="dark"] .app-topbar .app-lang-switcher .form-select option {
          color: #0f172a;
        }

        [data-theme="dark"] .app-sidebar .form-control,
        [data-theme="dark"] .app-sidebar .form-select,
        [data-theme="dark"] .app-body .form-control,
        [data-theme="dark"] .app-body .form-select,
        [data-theme="dark"] .app-body .input-group-text {
          background-color: rgba(17, 29, 25, 0.96);
          color: var(--app-text);
          border-color: rgba(179, 232, 210, 0.16);
        }

        [data-theme="dark"] .app-sidebar .form-control::placeholder,
        [data-theme="dark"] .app-body .form-control::placeholder {
          color: var(--app-text-muted);
        }

        [data-theme="dark"] .app-sidebar .form-control:focus,
        [data-theme="dark"] .app-sidebar .form-select:focus,
        [data-theme="dark"] .app-body .form-control:focus,
        [data-theme="dark"] .app-body .form-select:focus {
          background-color: rgba(17, 29, 25, 1);
          color: var(--app-text);
          border-color: rgba(88, 202, 152, 0.65);
          box-shadow: 0 0 0 0.2rem rgba(42, 167, 119, 0.18);
        }

        [data-theme="dark"] .app-body .app-modal-header,
        [data-theme="dark"] .app-body .app-modal-body,
        [data-theme="dark"] .app-body .app-modal-footer,
        [data-theme="dark"] .yb-style-modal,
        [data-theme="dark"] .yb-style-section,
        [data-theme="dark"] .yb-style-hint {
          background: transparent;
          color: var(--app-text);
          border-color: var(--app-border);
        }

        [data-theme="dark"] .table-canvas,
        [data-theme="dark"] #previewModal #htmlTableContainer,
        [data-theme="dark"] #previewModal #previewQueriesContainer,
        [data-theme="dark"] #previewModal #previewGraphContainer {
          background-color: rgba(12, 21, 18, 0.95);
          border-color: var(--app-border);
          color: var(--app-text);
        }

        [data-theme="dark"] .dropdown-menu,
        [data-theme="dark"] .list-group-item,
        [data-theme="dark"] #autocompleteModal .autocomplete-results,
        [data-theme="dark"] #autocompleteModal .autocomplete-item,
        [data-theme="dark"] #valuePickerModal #valuePickerList .list-group-item,
        [data-theme="dark"] #mappingModal #middle-panel,
        [data-theme="dark"] #mappingModal #middle-panel-2 {
          background-color: rgba(17, 29, 25, 0.98);
          color: var(--app-text);
          border-color: rgba(179, 232, 210, 0.14);
        }

        [data-theme="dark"] #autocompleteModal .autocomplete-item:hover,
        [data-theme="dark"] #autocompleteModal .autocomplete-item:focus,
        [data-theme="dark"] #autocompleteModal .autocomplete-item.is-active,
        [data-theme="dark"] #autocompleteModal .autocomplete-item.highlight-selection,
        [data-theme="dark"] #valuePickerModal #valuePickerList .list-group-item:hover,
        [data-theme="dark"] .dropdown-item:hover,
        [data-theme="dark"] .dropdown-item:focus {
          background-color: rgba(42, 167, 119, 0.14);
          color: var(--app-text);
        }

        [data-theme="dark"] .dropdown-item,
        [data-theme="dark"] .text-muted,
        [data-theme="dark"] .small.text-muted {
          color: var(--app-text-muted) !important;
        }

        [data-theme="dark"] .table,
        [data-theme="dark"] .table td,
        [data-theme="dark"] .table th,
        [data-theme="dark"] .table > :not(caption) > * > * {
          color: var(--app-text);
          border-color: rgba(179, 232, 210, 0.12);
          background-color: transparent;
        }

        [data-theme="dark"] .table-success,
        [data-theme="dark"] .table-success > th,
        [data-theme="dark"] .table-success > td {
          --bs-table-bg: rgba(42, 167, 119, 0.18);
          --bs-table-color: var(--app-text);
          --bs-table-border-color: rgba(179, 232, 210, 0.14);
        }

        [data-theme="dark"] .btn-light,
        [data-theme="dark"] .btn-outline-light {
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(255, 255, 255, 0.16);
          color: var(--app-text);
        }

        [data-theme="dark"] .btn-light:hover,
        [data-theme="dark"] .btn-light:focus,
        [data-theme="dark"] .btn-outline-light:hover,
        [data-theme="dark"] .btn-outline-light:focus {
          background: rgba(255, 255, 255, 0.12);
          color: var(--app-text);
        }

        [data-theme="dark"] mark {
          background: rgba(250, 204, 21, 0.22);
          color: #fff2b2;
        }

        @media (max-width: 991.98px) {
          .app-toolbar-row {
            flex-wrap: wrap;
            align-items: stretch;
            overflow: visible;
          }

          .app-builder-shell,
          body.sidebar-collapsed .app-builder-shell {
            grid-template-columns: minmax(0, 1fr);
          }

          body.sidebar-collapsed .app-builder-shell {
            gap: 0;
          }

          body.sidebar-collapsed .app-sidebar {
            display: none;
          }

          .app-workspace .card-body {
            padding: 1.1rem;
          }

          .app-workspace-header {
            align-items: stretch;
            margin-bottom: 1rem;
          }

          .app-sidebar-inline-toggle {
            width: 100%;
            justify-content: center;
          }

          .app-toolbar-group,
          .app-toolbar-group__actions {
            width: 100%;
          }

          .app-toolbar-group__actions {
            flex-wrap: wrap;
          }

          .app-toolbar-group {
            flex-direction: column;
            align-items: stretch;
            gap: 0.7rem;
          }

          .app-toolbar-group + .app-toolbar-group {
            padding-left: 0;
            margin-left: 0;
            border-left: none;
          }

          .app-toolbar-group--history {
            margin-left: 0;
          }

          .app-toolbar-group__actions > .dropdown,
          .app-toolbar-group__actions > button {
            flex: 1 1 100%;
          }

          .app-toolbar-group__actions .btn,
          .app-toolbar-group__actions .dropdown-toggle {
            width: 100%;
            justify-content: center;
          }
        }

        @keyframes app-rise {
          from {
            opacity: 0;
            transform: translateY(8px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .app-card {
            animation: none;
          }
          .app-body .btn {
            transition: none;
          }
        }

        /* =====================================================================
           Function picker dropdown
           --------------------------------------------------------------------
           The picker exposes ~20 functions plus a search input. We cap the
           dropdown height and scroll the *list* (not the search input) so the
           search stays sticky at the top and the menu never grows past the
           viewport. Items show a localized label + a one-line description.
           ===================================================================== */

        .app-function-picker {
          width: 22rem;
          max-width: 90vw;
          padding-top: 0;
          padding-bottom: 0;
        }

        .app-function-picker__search {
          position: sticky;
          top: 0;
          background: var(--bs-dropdown-bg, #fff);
          z-index: 2;
          border-top-left-radius: inherit;
          border-top-right-radius: inherit;
        }

        .app-function-picker__scroll {
          max-height: min(60vh, 22rem);
          overflow-y: auto;
          padding-bottom: 0.25rem;
          /* Smooth keyboard arrow-scroll. */
          scroll-behavior: smooth;
          outline: none;
        }

        .app-function-picker__item {
          padding: 0.35rem 1rem;
          line-height: 1.25;
          white-space: normal;
        }

        .app-function-picker__item-label {
          font-weight: 600;
        }

        .app-function-picker__item-help {
          display: block;
          font-size: 0.75rem;
          color: var(--bs-secondary-color, #6c757d);
          margin-top: 0.15rem;
          white-space: normal;
        }

        .app-function-picker__category {
          padding: 0.35rem 1rem 0.15rem;
          font-size: 0.7rem;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          color: var(--bs-secondary-color, #6c757d);
        }

        .app-function-picker__item.is-focused,
        .app-function-picker__item:hover,
        .app-function-picker__item:focus {
          background-color: var(--bs-dropdown-link-hover-bg, rgba(0, 128, 0, 0.08));
        }

        /* Active toggle state for picker items already applied to the cell. */
        .app-function-picker__item.is-active {
          background-color: rgba(25, 135, 84, 0.08);
        }

        .app-function-picker__item-check {
          display: inline-block;
          width: 1rem;
          margin-right: 0.4rem;
          font-weight: 700;
          color: var(--bs-success, #198754);
        }

        .app-function-picker__item-check.is-inactive {
          color: transparent;
        }

        .app-function-picker__item-disabled-note {
          display: block;
          font-size: 0.7rem;
          color: var(--bs-warning, #b58a00);
          margin-top: 0.15rem;
        }

        .app-function-picker__item.is-disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }