/*:root {
    --dts-navy: #0b3a5b;
    --dts-navy-dark: #082c46;
    --dts-navy-darker: #06213544;
    --dts-blue: #1565c0;
    --dts-blue-dark: #0d47a1;
    --dts-green: #1e8e3e;
    --dts-orange: #e8710a;
    --dts-red: #d93025;
    --dts-grey-bg: #f4f6f9;
    --dts-border: #dfe3e8;
}*/

:root {
    /* =========================================
       DTS THEME ALIGNED WITH RISHI
       ========================================= */

    --dts-navy: #044B53;
    --dts-navy-dark: #003F4D;
    --dts-navy-darker: rgba(4,75,83,.25);
    --dts-blue: #228994;
    --dts-blue-dark: #017784;
    --dts-green: #4fb38e;
    --dts-orange: #DE7C09;
    --dts-red: #DE2225;
    --dts-grey-bg: #f5f7f8;
    --dts-panel-bg: #ffffff;
    --dts-header-bg: #e6f3f5;
    --dts-border: #d9e1e3;
    --dts-text-primary: #1f2937;
    --dts-text-secondary: #4b5563;
}


html, body {
    height: 100%;
    background: var(--dts-grey-bg);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------- Sidebar (dynamic Area > Business Process > Data Entity > Version) ---------- */
.sidebar {
    width: 280px;
    min-width: 280px;
    background: #228994;
    color: #fff;
    display: flex;
    flex-direction: column;
}

    .sidebar .brand {
        display: flex;
        align-items: center;
        gap: .15rem;
        padding: 1.25rem 1.25rem 1rem;
        font-weight: 700;
        font-size: 0.75rem;
        line-height: 1.2;
        color: #fff;
        text-decoration: none;
    }

        .sidebar .brand i {
            font-size: 1.8rem;
        }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: .5rem 0 1.5rem;
}

.nav-section-label {
    display: none;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
    color: rgba(255,255,255,.5);
    padding: 1rem 1.25rem .35rem;
    border-radius: 12px 12px 0 0;
}

.nav-item-btn, .nav-link-item {
    display: flex;
    align-items: center;
    gap: .15rem;
    width: 100%;
    border: none;
    text-decoration: none;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 0.75rem; /* ~16px */
    font-weight: 500;
    color: #F0FCFF;
    padding: 10px 20px;
    line-height: 1.4;
    background: transparent;
    transition: background-color .15s ease;
}

    .nav-item-btn:hover, .nav-link-item:hover {
        background-color: rgba(0,0,0,0.08);
        color: #ffffff;
    }

    .nav-link-item.active {
        background: #DFF4F2 !important;
        color: #044B53 !important;
        border-left: 4px solid #228994;
        font-weight: 600;
    }

.nav-caret {
    margin-left: auto;
    transition: transform .15s ease;
    font-size: .8rem;
}

    .nav-caret.open {
        transform: rotate(180deg);
    }

.nav-children .nav-item-btn,
.nav-children .nav-link-item {
    padding-left: 1.25rem;
    font-size: .75rem;
}

.nav-children-2 .nav-item-btn,
.nav-children-2 .nav-link-item {
    padding-left: 1.50rem;
}

/* ---------- Main content column ---------- */
.app-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-content {
    flex: 1;
    padding: 1.5rem 2rem;
    overflow-x: auto;
}

/* ---------- Editable dropdown / combobox ---------- */
.dts-combo {
    position: relative;
}

.dts-combo-input-wrap {
    position: relative;
}

    .dts-combo-input-wrap .form-control {
        padding-right: 2.25rem;
    }

.dts-combo-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.25rem;
    border: none;
    background: transparent;
    color: #6b7785;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .dts-combo-toggle:hover {
        color: #228994;
    }

.dts-combo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.dts-combo-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid var(--dts-border);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    margin: .25rem 0 0;
    padding: .25rem 0;
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
}

    .dts-combo-menu li {
        padding: .45rem .9rem;
        cursor: pointer;
        font-size: .92rem;
    }

        .dts-combo-menu li:hover {
            background: var(--dts-grey-bg);
        }

.dts-combo-empty {
    color: #8a97a5;
    font-style: italic;
    cursor: default !important;
}

    .dts-combo-empty:hover {
        background: transparent !important;
    }

.page-header {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.page-header-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.page-header-actions {
    margin-left: auto;
}

.page-header-actions:first-child {
    margin-left: 0;
}

.page-title {  
    color: #038596;    
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    font-size:1.25rem;
}

.breadcrumb-nav {
    font-size: .9rem;
    color: #6b7785;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

    .breadcrumb-nav a {
        color: #228994;
        text-decoration: none;
    }

    .breadcrumb-nav .sep {
        color: #b5bcc4;
    }

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1.5rem;
    background: #ffffff;
    color: #1f2937;
    border-top: 1px solid var(--dts-border);
    font-size: .85rem;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dts-green);
    display: inline-block;
    margin-right: .4rem;
}

/* ---------- Cards / panels ---------- */
.panel-card {
    background: #fff;
    border: 1px solid var(--dts-border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

    .panel-card .panel-title {
        color: #228994;
        font-weight: 700;
        font-size: .85rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        margin-bottom: 1rem;
    }

.storage-option-card {
    border: 1px solid var(--dts-border);
    border-radius: 10px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .storage-option-card.selected {
        border-color: var(--dts-blue);
        box-shadow: 0 0 0 3px rgba(21,101,192,.12);
    }

    .storage-option-card .icon-badge {
        font-size: 1.9rem;
        margin-bottom: .5rem;
    }

/* ---------- Buttons ---------- */
.btn-dts-primary {
    background: #044B53;
    border-color: #044B53;
    color: #fff;
}

    .btn-dts-primary:hover {
        background: #017784;
        border-color: #017784;
        color: #fff;
    }

.btn-dts-success {
    background: #4fb38e;
    border-color: #4fb38e;
    color: #fff;
}

    .btn-dts-success:hover {
        background: #3ca67f;
        border-color: #3ca67f;
    }

/* ---------- Wizard steps ---------- */
.wizard-steps {
    display: flex;
    align-items: center;
    margin-bottom: 1.75rem;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #9aa5b1;
    font-weight: 600;
}

    .wizard-step .step-circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e7ebef;
        color: #8a97a5;
        font-weight: 700;
        font-size: .9rem;
    }

    .wizard-step.active .step-circle {
        background: #044B53;
        color: #fff;
    }

    .wizard-step.active {
        color: #044B53;
    }

    .wizard-step.completed .step-circle {
        background: #044B53;
        color: #fff;
    }

.wizard-connector {
    flex: 1;
    height: 2px;
    background: #e7ebef;
    margin: 0 .75rem;
    min-width: 40px;
}

/* ---------- Tables ---------- */
.table-dts thead th {
    background: #D3EEF4;
    color: #044B53;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid var(--dts-border);
}

.table-dts td {
    vertical-align: middle;
}

.text-negative {
    color: var(--dts-red);
    font-weight: 600;
}

.text-positive {
    color: #1a1a1a;
}

/* ---------- Status badges ---------- */
.record-line {
    line-height: 1.35;
    font-size: .78rem;
    white-space: nowrap;
}

.record-ok {
    color: var(--dts-green);
    font-weight: 600;
}

.record-fail {
    color: var(--dts-red);
}

.record-skip {
    color: #b8860b;
}
.record-totalread {
    color: #000000;
    font-weight: bold;
}

.badge-status {
    padding: .35rem .65rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: .78rem;
}

.badge-completed {
    background: #e6f4ea;
    color: var(--dts-green);
}

.badge-progress {
    background: #fef3e6;
    color: var(--dts-orange);
}

.badge-partial {
    background: #fff8e1;
    color: #b8860b;
}

.badge-failed {
    background: #fdeceb;
    color: var(--dts-red);
}

.badge-cancelled {
    background: #eceff1;
    color: #607080;
}

.badge-connected {
    background: #e6f4ea;
    color: var(--dts-green);
}

/* ---------- Stat cards (execution monitor) ---------- */
.stat-card {
    background: #eef5f5;
    border: 1px solid #d8e3e3;
    border-radius: 12px;
    padding: 18px 20px;
    min-height: 110px;
    position: relative;
    transition: all 0.25s ease;
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
    }

    .stat-card .stat-icon {
        width: 46px;
        height: 46px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }

    .stat-card .stat-value {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1;
    }

    .stat-card .stat-label {
        color: #6b7785;
        font-size: .85rem;
    }


.stat-label {
    font-size: 13px;
    color: #5f6b7a;
    font-weight: 500;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}

.stat-subtext {
    font-size: 12px;
    color: #8f9bb3;
    margin-top: 6px;
}


.card-total {
    border-top: 4px solid #243b63;
}

.card-completed {
    border-top: 4px solid #00a884;
}

.card-progress {
    border-top: 4px solid #f28c00;
}

.card-failed {
    border-top: 4px solid #7c3aed;
}

.card-total .stat-value {
    color: #243b63;
}

.card-completed .stat-value {
    color: #00a884;
}

.card-progress .stat-value {
    color: #f28c00;
}

.card-failed .stat-value {
    color: #7c3aed;
}

/* ---------- Colorful Data Source Tiles ---------- */
.source-tile-container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
}

.source-tile {
    flex: 1 1 120px;
    min-width: 120px;
    max-width: 150px;
    height: 120px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,.08);
}

    .source-tile i {
        font-size: 42px;
        line-height: 1;
    }

    .source-tile span {
        font-size: 14px;
        white-space: nowrap;
        color: #343a40;
    }

    /* Hover */
    .source-tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 14px rgba(0,0,0,.16);
    }

    /* Selected */
    .source-tile.selected {
        border-width: 2px;
        box-shadow: 0 0 0 4px rgba(34,137,148,.20);
    }

        .source-tile.selected span {
            font-weight: 700;
        }


    /* ---------- Source Colors ---------- */

    .source-tile.mssql i {
        color: #0d6efd;
    }

    .source-tile.azure-sql i {
        color: #0078d4;
    }

    .source-tile.mysql i {
        color: #00758f;
    }

    .source-tile.postgresql i {
        color: #336791;
    }

    .source-tile.oracle i {
        color: #f80000;
    }

    .source-tile.api i {
        color: #6f42c1;
    }

    .source-tile.excel i {
        color: #217346;
    }

    .source-tile.graphql i {
        color: #e10098;
    }

    /* ---------- Selected backgrounds ---------- */

    .source-tile.mssql.selected {
        background: #eef5ff;
        border-color: #0d6efd;
    }

    .source-tile.azure-sql.selected {
        background: #eef7ff;
        border-color: #0078d4;
    }

    .source-tile.mysql.selected {
        background: #eefafd;
        border-color: #00758f;
    }

    .source-tile.postgresql.selected {
        background: #f0f4fa;
        border-color: #336791;
    }

    .source-tile.oracle.selected {
        background: #fff0f0;
        border-color: #f80000;
    }

    .source-tile.api.selected {
        background: #f6f0ff;
        border-color: #6f42c1;
    }

    .source-tile.excel.selected {
        background: #eef8f1;
        border-color: #217346;
    }

    .source-tile.graphql.selected {
        background: #fff0fa;
        border-color: #e10098;
    }

/* ---------- Azure SQL ---------- */

.azure-sql-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

    .azure-sql-icon .bi-database-fill {
        font-size: 40px;
        color: #0078d4;
    }

    .azure-sql-icon .cloud-icon {
        position: absolute;
        right: -9px;
        bottom: -5px;
        font-size: 20px;
        color: #0078d4;
    }


@media (max-width: 1200px) {
    .source-tile {
        flex: 1 1 70px;
        max-width: 85px;
    }
}

@media (max-width: 768px) {
    .source-tile-container {
        gap: 8px;
    }

    .source-tile {
        flex: 1 1 75px;
        max-width: 95px;
        height: 76px;
    }

        .source-tile i {
            font-size: 28px;
        }
}

.save-spinner-button {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: save-spinner-rotate 0.7s linear infinite;
    vertical-align: -2px;
}

.nav-item-invalid {
    color: #dc3545 !important;
}

    .nav-item-invalid .nav-text {
        color: #dc3545 !important;
    }

    .nav-item-invalid i {
        color: #dc3545 !important;
    }

    .nav-item-invalid:hover {
        background-color: rgba(220, 53, 69, 0.08);
        color: #dc3545 !important;
    }

/* Save Loading Overlay */
.save-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.save-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #e0e0e0;
    border-top: 6px solid #228994;
    border-radius: 50%;
    animation: dts-spinner 0.8s linear infinite;
}

.save-loading-text {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #044B53;
}

@keyframes dts-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.graphql-editor {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    background: #f8f9fb;
    resize: vertical;
}
/* ---------- Login page (two-panel: sign-in form + about panel) ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dts-grey-bg);
    padding: 2rem 1rem;
}

.login-split-container {
    width: 100%;
    max-width: 960px;
    background: #fff;
    border: 1px solid var(--dts-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.login-header-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--dts-border);
    color: #044B53;
    font-weight: 700;
    font-size: 1.15rem;
}

    .login-header-centered i {
        font-size: 1.6rem;
        color: #228994;
    }

.login-split-body {
    display: flex;
    flex-wrap: wrap;
}

.login-split-left,
.login-split-right {
    flex: 1 1 360px;
    padding: 2rem 2.5rem;
}

.login-split-right {
    background: #e6f3f5;
    border-left: 1px solid var(--dts-border);
}

.login-split-left h1 {
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.login-hint {
    font-size: .82rem;
    color: #6b7785;
    margin-top: 1.25rem;
    line-height: 1.5;
}

.login-help-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .88rem;
    margin-top: .75rem;
}

.login-split-right p {
    font-size: .9rem;
    color: #4b5563;
    margin-bottom: 1rem;
    line-height: 1.55;
}

.login-split-right ul {
    font-size: .9rem;
    color: #4b5563;
    padding-left: 1.2rem;
    margin-bottom: 0;
}

    .login-split-right ul li {
        margin-bottom: .4rem;
        line-height: 1.5;
    }

/* ---------- Sidebar user block ---------- */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.9);
    font-size: .88rem;
}

    .sidebar-user i.bi-person-circle {
        font-size: 1.4rem;
    }

    .sidebar-user .sidebar-user-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-user a {
        color: rgba(255,255,255,.75);
        flex-shrink: 0;
    }

        .sidebar-user a:hover {
            color: #fff;
        }
/* ---------- Database login dialog ---------- */

.db-login-dialog {
    border: 1px solid var(--dts-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    background: #fff;
}

.db-login-dialog-header {
    background: linear-gradient( 180deg, var(--dts-navy) 0%, var(--dts-navy-dark) 100% );
    color: #fff;
    padding: .65rem 1rem;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
}

/* Standard database connection body */
.db-login-dialog-body {
    padding: 1.25rem;
    background: #fafbfc;
}

/* MSSQL / Azure SQL advanced connection area */
.db-login-dialog.advanced-db .db-login-dialog-body {
    padding: 1.25rem;
}

/* Extra section inside MSSQL / Azure SQL */
.db-table-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dts-border);
}

.db-table-section-title {
    font-size: .85rem;
    font-weight: 700;
    color: #044B53;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .db-table-section-title i {
        font-size: .9rem;
    }

/* Table/query area */
.db-table-query-area {
    background: #fff;
    border: 1px solid var(--dts-border);
    border-radius: 6px;
    padding: 1rem;
}

/* Standard DB connection cards */
.standard-db-connection {
    margin-top: 1rem;
}

    .standard-db-connection .panel-title {
        margin-bottom: 1rem;
    }

/* Connection status */
.db-connection-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    font-size: .8rem;
    font-weight: 600;
}

    .db-connection-status.connected {
        color: #198754;
    }

    .db-connection-status.failed {
        color: #dc3545;
    }

/* Azure SQL small visual indicator */
.azure-sql-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .5rem;
    padding: .15rem .5rem;
    border-radius: 12px;
    background: rgba(255,255,255,.15);
    font-size: .7rem;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {

    .db-login-dialog-body {
        padding: 1rem;
    }

    .db-table-query-area {
        padding: .75rem;
    }
}

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

.spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* ---------- Other Data Sources Accordion ---------- */

.other-sources-accordion {
    width: 100%;
    border: 1px solid var(--dts-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 15px;
    background: #fff;
}

.other-sources-header {
    width: 100%;
    min-height: 55px;
    padding: 12px 20px;
    border: none;
    background: #D3EEF4;
    color: #044B53;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}

    .other-sources-header:hover {
        background: #D3EEF4;
    }

    .other-sources-header i {
        font-size: 18px;
    }

.other-sources-body {
    width: 100%;
    padding: 18px;
    border-top: 1px solid var(--dts-border);
    background: #fff;
}


/* =========================================
   OTHER DATA SOURCE ICON COLORS
   Same style as existing source tiles
   ========================================= */

/* SharePoint */
.source-tile.sharepoint i {
    color: #0078d4;
}

/* Dataverse */
.source-tile.dataverse i {
    color: #742774;
}

/* Azure Data Lake */
.source-tile.azure-datalake i {
    color: #0078d4;
}

/* Data Lake */
.source-tile.datalake i {
    color: #0089d6;
}

/* AWS */
.source-tile.aws i {
    color: #ff9900;
}


/* =========================================
   OTHER SOURCE TILES
   Match existing source-tile appearance
   ========================================= */

.other-sources-body .source-tile {
    flex: 1 1 120px;
    min-width: 120px;
    max-width: 150px;
    height: 120px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    cursor: pointer;
    /* Same as normal source tiles */
    transition: none;
    box-shadow: 0 2px 5px rgba(0,0,0,.08);
}


    /* Same icon size as MSSQL/MySQL/Postgres/Oracle/etc. */
    .other-sources-body .source-tile i {
        font-size: 42px;
        line-height: 1;
        margin-bottom: 0;
    }


    /* Same text style */
    .other-sources-body .source-tile span {
        font-size: 14px;
        white-space: nowrap;
        color: #343a40;
    }


    /* =========================================
   REMOVE HOVER EFFECT
   ========================================= */

    .other-sources-body .source-tile:hover {
        transform: none;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,.08);
    }


    /* Keep icon color during hover */
    .other-sources-body .source-tile.sharepoint:hover i {
        color: #0078d4;
    }

    .other-sources-body .source-tile.dataverse:hover i {
        color: #742774;
    }

    .other-sources-body .source-tile.azure-datalake:hover i {
        color: #0078d4;
    }

    .other-sources-body .source-tile.datalake:hover i {
        color: #0089d6;
    }

    .other-sources-body .source-tile.aws:hover i {
        color: #ff9900;
    }


    /* =========================================
   SELECTED STATE
   Same behavior as existing source tiles
   ========================================= */

    .other-sources-body .source-tile.selected {
        border-width: 2px;
        box-shadow: 0 0 0 4px rgba(34,137,148,.20);
        background: #fff;
    }


    /* Selected icon remains colored */
    .other-sources-body .source-tile.sharepoint.selected {
        border-color: #0078d4;
        background: #fff;
    }

    .other-sources-body .source-tile.dataverse.selected {
        border-color: #742774;
        background: #fff;
    }

    .other-sources-body .source-tile.azure-datalake.selected {
        border-color: #0078d4;
        background: #fff;
    }

    .other-sources-body .source-tile.datalake.selected {
        border-color: #0089d6;
        background: #fff;
    }

    .other-sources-body .source-tile.aws.selected {
        border-color: #ff9900;
        background: #fff;
    }


    /* Selected icon colors */
    .other-sources-body .source-tile.sharepoint.selected i {
        color: #0078d4;
    }

    .other-sources-body .source-tile.dataverse.selected i {
        color: #742774;
    }

    .other-sources-body .source-tile.azure-datalake.selected i {
        color: #0078d4;
    }

    .other-sources-body .source-tile.datalake.selected i {
        color: #0089d6;
    }

    .other-sources-body .source-tile.aws.selected i {
        color: #ff9900;
    }

/* =========================================================
   CONNECTION DETAILS CARD
   ========================================================= */

.connection-details-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e4e7eb;
    border-radius: 10px;
    overflow: visible;
    margin-top: 20px;
}


/* =========================================================
   ENVIRONMENT HEADER
   ========================================================= */

.environment-header {
    min-height: 40px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 9px 9px 0 0;
    font-size: 13px;
    transition: background-color 0.2s ease;
}


/* Development */

.environment-development {
    background-color: #1E8E3E;
    color: #ffffff;
}


/* Test */

.environment-test {
    background-color: #1565C0;
    color: #ffffff;
}


/* Staging / UAT */

.environment-uat {
    background-color: #E8A90A;
    color: #ffffff;
}


/* Production */

.environment-production {
    background-color: #D93025;
    color: #ffffff;
}


/* =========================================================
   ENVIRONMENT TITLE
   ========================================================= */

.environment-title {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Small square/status indicator */

.environment-status-icon {
    width: 9px;
    height: 9px;
    border: 1px solid currentColor;
    border-radius: 2px;
    display: inline-block;
}


/* =========================================================
   CHANGE LINK
   ========================================================= */

.environment-change-link {
    border: none;
    background: transparent;
    color: inherit;
    padding: 2px 4px;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

    .environment-change-link:hover {
        opacity: 0.75;
    }


/* =========================================================
   ENVIRONMENT POPUP
   ========================================================= */

.environment-popup {
    position: absolute;
    top: 43px;
    right: 12px;
    width: 190px;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}


/* =========================================================
   ENVIRONMENT OPTION
   ========================================================= */

.environment-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    padding: 8px 9px;
    border-radius: 6px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

    .environment-option:hover {
        background-color: #f5f6f7;
    }


    /* Selected environment */

    .environment-option:has(.environment-option-check) {
        font-weight: 600;
    }


/* =========================================================
   COLORED DOTS
   ========================================================= */

.environment-option-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* Production */

.option-production .environment-option-dot {
    background-color: #d83b3b;
}


/* Staging */

.option-staging .environment-option-dot {
    background-color: #e5a900;
}


/* Test */

.option-test .environment-option-dot {
    background-color: #3787c5;
}


/* Development */

.option-development .environment-option-dot {
    background-color: #1e9b35;
}


/* =========================================================
   SELECTED OPTION BACKGROUND
   ========================================================= */

.option-production:has(.environment-option-check) {
    background-color: #fad6d6;
    color: #9b3b3b;
}

.option-staging:has(.environment-option-check) {
    background-color: #fff0c2;
    color: #8a6500;
}

.option-test:has(.environment-option-check) {
    background-color: #d9ecfa;
    color: #27648c;
}

.option-development:has(.environment-option-check) {
    background-color: #c9ebc5;
    color: #28732b;
}


/* =========================================================
   CHECK ICON
   ========================================================= */

.environment-option-check {
    margin-left: auto;
    font-size: 14px;
}


/* =========================================================
   CONNECTION DETAILS BODY
   ========================================================= */

.connection-details-body {
    padding: 16px 18px 18px;
}


    /* Heading */

    .connection-details-body .panel-title {
        color: #228994;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.4px;
        margin-bottom: 18px;
    }

/* ---------- Standard connection sources ---------- */

.standard-db-connection {
    margin-top: 1rem;
}

    /* Better spacing inside connection body */
    .standard-db-connection .db-login-dialog-body {
        padding: 1.5rem;
    }

/* ---------- GraphQL subsections ---------- */

.connection-subsection {
    border: 1px solid var(--dts-border);
    border-radius: 7px;
    background: #fff;
    padding: 1rem;
}

.connection-subsection-title {
    display: flex;
    align-items: center;
    font-size: .85rem;
    font-weight: 700;
    color: #044B53;
    margin-bottom: .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--dts-border);
}

    .connection-subsection-title i {
        font-size: .9rem;
    }

/* GraphQL editors */
.graphql-editor {
    font-family: Consolas, "Courier New", monospace;
    font-size: .85rem;
    line-height: 1.5;
    resize: vertical;
}

/* Make standard source fields breathe */
.standard-db-connection .form-label {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .4rem;
}

/* Common environment button style */
.environment-menu {
    border-radius: 14px 14px 0 0 !important;
}

/* Curve only the top-left and top-right edges */
.environment-menu:first-of-type {
        border-radius: 12px 12px 0 0;
}

.environment-menu.environment-development {
    background-color: #1E8E3E;
    color: #ffffff;
}

.environment-menu.environment-test {
    background-color: #1565C0;
    color: #ffffff;
}

.environment-menu.environment-qa {
    /* QA color remains unchanged */
}

.environment-menu.environment-uat {
    background-color: #E8A90A;
    color: #ffffff;
}

.environment-menu.environment-production {
    background-color: #D93025;
    color: #ffffff;
}

    .environment-menu.environment-others {
        background-color: #6b7785;
        color: #ffffff;
    }

/* Ensure icons and text use the environment color */
.environment-menu i,
.environment-menu .nav-text {
    color: inherit;
}

.data-entities-menu {
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.data-entities-menu .nav-section-label {
    border-radius: 16px 16px 0 0;
}

/* ---------- Job execution logs ---------- */
.log-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.log-toolbar .form-select { width: auto; min-width: 170px; }
.log-search { margin-left: auto; min-width: 220px; max-width: 320px; flex: 1 1 220px; }
@media (max-width: 768px) { .log-search { margin-left: 0; max-width: none; flex-basis: 100%; } }
.log-grid td { vertical-align: top; }
.log-row-warning > td { background-color: #fef3e6 !important; }
.log-row-error > td { background-color: #fdeceb !important; }
.log-row-success > td { background-color: #e6f4ea !important; }
.log-message-text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.5; }
.log-detail-box { margin-top: .5rem; background: #fff; border: 1px solid var(--dts-border); border-radius: 6px; padding: .6rem .75rem; font-size: .85rem; }
.log-detail-box pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; margin: 0; font-size: .82rem; }
.log-sort-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.log-sort-btn:focus-visible { outline: 2px solid #228994; outline-offset: 2px; }
}


/* Main menu group */
.sidebar-menu-group {
    width: 100%;
}

/* Expandable main menus */
.sidebar-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .15rem; /* Same as nav-link-item */
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 0.75rem; /* ~16px */
    font-weight: 600;
    color: #F0FCFF;
    padding: 14px 20px;
    line-height: 1.4;
    transition: background-color .15s ease;
}

    .sidebar-group-header > i:first-child {
        width: auto;
        min-width: auto;
    }

    .sidebar-group-header .nav-text {
        flex: 1;
    }

.sidebar-chevron {
    margin-left: auto;
    font-size: .8rem;
}

    /* Keep the main icon aligned */
    .sidebar-group-header > i:first-child {
        width: 18px;
        min-width: 18px;
        text-align: center;
    }

    /* Keep the text aligned */
    .sidebar-group-header .nav-text {
        flex: 1;
        min-width: 0;
    }

    /* Keep the chevron on the right */
    .sidebar-group-header .sidebar-chevron {
        width: auto;
        min-width: auto;
        margin-left: auto;
        font-size: 13px;
    }

    /* No background on the main menu */
.sidebar-group-header:hover,
.sidebar-group-header:focus,
.sidebar-group-header:active {
    box-shadow: none !important;
    background-color: rgba(0,0,0,0.08);
    color: #ffffff;
}

/* Child menus only move right */
.sidebar-child-link {
    padding-left: 2.25rem !important;
}

/* Keep existing hover and active colors */
.sidebar-group-header:hover {
    background: transparent;
}

/* Ensure the environment section stays below Management */
.sidebar-menu-group + .sidebar-menu-group {
    margin-top: 8px;
}

/* ==========================================
   ACTIVE / SELECTED MENU
   ========================================== */

.nav-link-item.active,
.nav-item-btn.active,
.sidebar-child-link.active {
    background-color: #ffffff !important;
    color: #044B53 !important;
    font-weight: 700;
}

    /* Text inside active menu */
    .nav-link-item.active .nav-text,
    .nav-item-btn.active .nav-text,
    .sidebar-child-link.active .nav-text {
        color: #044B53 !important;
    }

    /* Icons inside active menu */
    .nav-link-item.active i,
    .nav-item-btn.active i,
    .sidebar-child-link.active i {
        color: #044B53 !important;
    }

    /* Active chevron */
    .nav-link-item.active .sidebar-chevron,
    .nav-item-btn.active .sidebar-chevron,
    .nav-link-item.active .nav-caret,
    .nav-item-btn.active .nav-caret {
        color: #044B53 !important;
    }

/* ==========================================
   LIGHT NAVIGATION THEME
   ========================================== */

.sidebar {
    background: #FFFFFF;
    color: #344054;
    border-right: 1px solid #E4E7EC;
}

/* Menu items */
.sidebar-group-header,
.nav-item-btn,
.nav-link-item {
    color: #344054;
    font-size: .92rem;
    font-weight: 500;
    padding: .65rem 1rem;
    border-radius: 6px;
    margin: 2px 8px;
}

    /* Icons */
    .sidebar-group-header i,
    .nav-item-btn i,
    .nav-link-item i,
    .sidebar-chevron,
    .nav-caret {
        color: #98A2B3;
    }

    /* Hover */
    .sidebar-group-header:hover,
    .nav-item-btn:hover,
    .nav-link-item:hover {
        background: #F5F7F8;
        color: #344054;
    }

    /* ==========================================
   SELECTED MENU
   ========================================== */

    .nav-link-item.active,
    .nav-item-btn.active,
    .sidebar-child-link.active {
        background: #DFF4F2 !important;
        color: #044B53 !important;
        border-left: 4px solid #228994;
        font-weight: 600;
    }

        /* Active menu text */
        .nav-link-item.active .nav-text,
        .nav-item-btn.active .nav-text,
        .sidebar-child-link.active .nav-text {
            color: #044B53 !important;
        }

        /* Active icon */
        .nav-link-item.active i,
        .nav-item-btn.active i,
        .sidebar-child-link.active i {
            color: #228994 !important;
        }

        /* Active chevron */
        .nav-link-item.active .sidebar-chevron,
        .nav-item-btn.active .sidebar-chevron,
        .nav-link-item.active .nav-caret,
        .nav-item-btn.active .nav-caret {
            color: #228994 !important;
        }

/* Child menu indentation */
.sidebar-child-link,
.nav-children .nav-link-item,
.nav-children .nav-item-btn {
    padding-left: 2rem;
}

/* Section headers */
.nav-section-label {
    background: transparent;
    color: #98A2B3;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Environment menu */
.environment-menu {
    background: #F8FAFB;
    color: #344054;
    border: 1px solid #E4E7EC;
}

/* Remove white-text menu styling */
.sidebar .brand {
    color: #044B53;
}

/* =========================================================
   RISHI STYLE NAVIGATION OVERRIDE
   ========================================================= */

/* Sidebar */
.sidebar {
    background: #FFFFFF !important;
    color: #344054 !important;
    border-right: 1px solid #E4E7EC;
}

    /* Brand */
    .sidebar .brand {
        color: #044B53 !important;
    }

        .sidebar .brand i {
            color: #228994 !important;
        }

/* Main Menu */
.sidebar-group-header,
.nav-item-btn,
.nav-link-item {
    background: transparent;
    color: #344054 !important;
    font-family: Inter, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    margin: 2px 8px;
    padding: 10px 14px;
    line-height: 1.4;
}

    /* Icons */
    .sidebar-group-header i,
    .nav-item-btn i,
    .nav-link-item i,
    .sidebar-chevron,
    .nav-caret {
        color: #98A2B3;
    }

    /* Hover */
    .sidebar-group-header:hover,
    .nav-item-btn:hover,
    .nav-link-item:hover {
        background: #F5F7F8 !important;
        color: #344054 !important;
    }

/* Section Headers */
.nav-section-label {
    background: transparent !important;
    color: #98A2B3 !important;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Child Menu Levels */
.nav-children .nav-item-btn,
.nav-children .nav-link-item {
    padding-left: 2rem !important;
}

.nav-children-2 .nav-item-btn,
.nav-children-2 .nav-link-item {
    padding-left: 3rem !important;
}

/* Active Menu */
.nav-link-item.active,
.nav-item-btn.active,
.sidebar-child-link.active {
    background: #DFF4F2 !important;
    color: #044B53 !important;
    border-left: 4px solid #228994 !important;
    font-weight: 600 !important;
}

    /* Active Menu Text */
    .nav-link-item.active .nav-text,
    .nav-item-btn.active .nav-text,
    .sidebar-child-link.active .nav-text {
        color: #044B53 !important;
    }

    /* Active Icons */
    .nav-link-item.active i,
    .nav-item-btn.active i,
    .sidebar-child-link.active i {
        color: #228994 !important;
    }

    /* Active Chevron */
    .nav-link-item.active .sidebar-chevron,
    .nav-item-btn.active .sidebar-chevron,
    .nav-link-item.active .nav-caret,
    .nav-item-btn.active .nav-caret {
        color: #228994 !important;
    }

/* Environment menus remain colored */
.environment-menu.environment-development {
    background: #1E8E3E !important;
    color: #fff !important;
}

.environment-menu.environment-test {
    background: #1565C0 !important;
    color: #fff !important;
}

.environment-menu.environment-uat {
    background: #E8A90A !important;
    color: #fff !important;
}

.environment-menu.environment-production {
    background: #D93025 !important;
    color: #fff !important;
}

.environment-menu.environment-others {
    background: #6B7785 !important;
    color: #fff !important;
}

/* Environment menu icons/text */
.environment-menu i,
.environment-menu .nav-text {
    color: inherit !important;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.execution-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.page-title {
    color: #044B53;
    font-size: 28px;
    font-weight: 600;
    white-space: nowrap;
}

.header-actions {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.header-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #6c757d;
}

.header-actions .form-control,
.header-actions .form-select {
    width: 160px;
}

.btn-dts-primary {
    white-space: nowrap;
}

.stat-card {
    background: #eef5f5;
    border: 1px solid #d8e3e3;
    border-radius: 12px;
    padding: 18px 20px;
    min-height: 120px;
    transition: all 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.card-total {
    border-top: 4px solid #243b63;
}

.card-completed {
    border-top: 4px solid #00a884;
}

.card-progress {
    border-top: 4px solid #f28c00;
}

.card-failed {
    border-top: 4px solid #7c3aed;
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon i {
    font-size: 26px;
}

.stat-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.card-total .stat-value {
    color: #243b63;
}

.card-completed .stat-value {
    color: #00a884;
}

.card-progress .stat-value {
    color: #f28c00;
}

.card-failed .stat-value {
    color: #7c3aed;
}

.stat-label {
    font-size: 14px;
    color: #5f6b7a;
    font-weight: 500;
}

.stat-subtext {
    font-size: 12px;
    color: #8f9bb3;
    margin-top: 4px;
}
.stat-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .stat-icon i {
        font-size: 20px;
    }

.total-icon {
    background: #dbeafe;
    color: #2563eb;
}

.completed-icon {
    background: #d1fae5;
    color: #059669;
}

.progress-icon {
    background: #fef3c7;
    color: #d97706;
}

.failed-icon {
    background: #fee2e2;
    color: #dc2626;
}


/* ---------- Connector icon cards (Job Creation - Connect to Source) ---------- */
.connector-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    border: 1px solid var(--dts-border);
    border-radius: 8px;
    padding: .6rem .25rem;
    cursor: pointer;
    background: #fff;
    height: 100%;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .connector-icon-card:hover {
        border-color: var(--dts-blue);
    }

    .connector-icon-card.selected {
        border-color: var(--dts-blue);
        background: #f2f7fd;
        box-shadow: 0 0 0 3px rgba(21,101,192,.12);
    }

    .connector-icon-card i {
        font-size: 1.15rem;
        color: var(--dts-navy);
    }

    .connector-icon-card.selected i {
        color: var(--dts-blue);
    }

    .connector-icon-card span {
        font-size: .72rem;
        font-weight: 500;
        line-height: 1.15;
    }

/* ---------- Vendor-specific connector panel (AspenTech/Honeywell) ---------- */
.vendor-connector-card {
    border: 1px solid var(--dts-border);
    border-radius: 10px;
    overflow: hidden;
}

.vendor-connector-header {
    background: linear-gradient(135deg, var(--dts-navy) 0%, var(--dts-navy-dark) 100%);
    color: #fff;
    padding: .6rem 1rem;
    font-weight: 700;
    font-size: .9rem;
}

.vendor-connector-group {
    padding: .75rem 1rem;
    background: #f2f7fd;
}

    .vendor-connector-group + .vendor-connector-group {
        border-top: 1px solid var(--dts-border);
    }

/* ---------- Generic connector detail panel (shown below the icon card grid) ---------- */
.connector-detail-panel {
    border-left: 3px solid var(--dts-blue);
    border-radius: 0 8px 8px 0;
    background: #f2f7fd;
    padding: .9rem 1.1rem;
}