:root {
    --sidebar-width: 256px;

    /* smartX brand accent: deep amber, dark enough to clear 4.5:1 text/link contrast on
       white (and white-on-amber for filled buttons) - the dark sidebar uses its own
       lighter amber tint separately since it isn't held to that same white-bg rule. */
    --color-primary: #B45309;
    --color-primary-hover: #92400E;
    --color-primary-rgb: 180, 83, 9;

    --color-bg: #F8FAFC;
    --color-fg: #1E293B;
    --color-card: #FFFFFF;
    --color-border: #E2E8F0;
    --color-muted: #64748B;

    --sidebar-bg: #111827;
    --sidebar-fg: #CBD5E1;
    --sidebar-fg-muted: #8B93A7;
    --sidebar-fg-active: #FFFFFF;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: rgba(255, 171, 61, 0.22);
    --sidebar-border: rgba(255, 255, 255, 0.08);

    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Push page content right of the fixed sidebar, only on pages that render it. */
body:has(.app-sidebar) {
    padding-left: var(--sidebar-width);
}

body:has(.app-sidebar) > .container,
body:has(.app-sidebar) > .container-fluid {
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
}

/* ---------- Sidebar ---------- */

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    overflow-y: auto;
    transition: transform 0.25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 1.1rem 0.75rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

/* Brand mark: a plain amber signal dot (no logo asset) - deliberately small next to the
   wordmark rather than a full 30px tile, echoing the "system status" dot used on the
   marketing site's eyebrow. */
.brand-mark {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFAB3D;
    box-shadow: 0 0 0 5px rgba(255, 171, 61, 0.2);
    flex: none;
}

.brand-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.15rem;
}

.brand-name-x {
    color: #FFAB3D;
}

/* The auth panel gives the wordmark much more room than the 256px sidebar, so its mark
   and type both scale up accordingly instead of looking lost in all that space. */
.auth-brand-mark .brand-mark {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 7px rgba(255, 171, 61, 0.2);
}

.auth-brand-mark .brand-name {
    font-size: 1.5rem;
}

/* Base icon sizing - every sidebar SVG relies on this, since an <svg> with no explicit
   width/height and no matching rule falls back to the browser default (often ~300x150). */
.icon {
    display: inline-block;
    flex: none;
    width: 18px;
    height: 18px;
    opacity: 0.85;
}

.icon-sm {
    width: 13px;
    height: 13px;
}

.sidebar-workspace {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 0.5rem;
}

.workspace-switcher {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: 7px;
    color: var(--sidebar-fg-active);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.2;
    border: 1px solid var(--sidebar-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.workspace-switcher:hover {
    background: var(--sidebar-hover-bg);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--sidebar-fg-active);
}

.workspace-switcher .icon {
    color: var(--sidebar-fg-muted);
    width: 16px;
    height: 16px;
}

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

.workspace-switcher .chevron {
    opacity: 0.5;
    flex: none;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0.75rem;
}

.sidebar-nav-bottom {
    padding-bottom: 1rem;
    border-top: 1px solid var(--sidebar-border);
    padding-top: 0.75rem;
}

.sidebar-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sidebar-fg-muted);
    padding: 0.9rem 0.6rem 0.3rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: var(--sidebar-fg);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-fg-active);
}

.sidebar-link.active {
    background: var(--sidebar-active-bg);
    color: #fff;
}

.sidebar-link.active .icon {
    opacity: 1;
    color: #FFC876;
}

.sidebar-logout-form {
    margin: 0;
}

.sidebar-logout:hover {
    color: #FCA5A5;
}

.sidebar-spacer {
    flex: 1 1 auto;
}

.sidebar-toggle {
    position: fixed;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 1040;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-fg);
}

.sidebar-toggle svg {
    width: 20px;
    height: 20px;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1020;
}

.sidebar-backdrop.is-open {
    display: block;
}

@media (max-width: 991.98px) {
    body:has(.app-sidebar) {
        padding-left: 0;
    }

    .app-sidebar {
        transform: translateX(-100%);
    }

    .app-sidebar.is-open {
        transform: translateX(0);
    }

    body:has(.app-sidebar) > .container,
    body:has(.app-sidebar) > .container-fluid {
        padding-top: 4.5rem;
    }
}

/* ---------- General UI polish ---------- */

.card {
    border-color: var(--color-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.table {
    color: var(--color-fg);
}

.table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    font-weight: 600;
    border-bottom-width: 1px;
}

.text-muted {
    color: var(--color-muted) !important;
}

/* ---------- Status badges ---------- */

.badge-status-NEW { background-color: #6c757d; }
.badge-status-PROCESSING { background-color: var(--color-primary); }
.badge-status-PENDING_APPROVAL { background-color: #fd7e14; }
.badge-status-APPROVED { background-color: #20c997; }
.badge-status-REJECTED { background-color: #dc3545; }
.badge-status-COMPLETED { background-color: #198754; }
.badge-status-COMPLETED_WITH_ERRORS { background-color: #b8860b; }
.badge-status-FAILED { background-color: #dc3545; }

.badge-run-RUNNING { background-color: var(--color-primary); }
.badge-run-PAUSED { background-color: #fd7e14; }
.badge-run-COMPLETED { background-color: #198754; }
.badge-run-FAILED { background-color: #dc3545; }

/* ---------- Workflow canvas ---------- */

#drawflow-canvas {
    width: 100%;
    height: 70vh;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-size: 25px 25px;
    background-image: radial-gradient(circle, #d9dde3 1px, rgba(0,0,0,0) 1px);
}

/* Palette / config-panel columns stay in view while the page scrolls; only their own list
   scrolls internally, so the "Node palette" / "Cấu hình node" header never scrolls away. */
.canvas-side-panel {
    position: sticky;
    top: 1rem;
}

.canvas-scroll-region {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.canvas-scroll-region::-webkit-scrollbar {
    width: 6px;
}

.canvas-scroll-region::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 6px;
}

.canvas-scroll-region::-webkit-scrollbar-track {
    background: transparent;
}

.node-palette-item {
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card);
    margin-bottom: 0.4rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.node-palette-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.12);
}

.node-palette-item:active {
    cursor: grabbing;
}

.node-palette-icon {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-palette-icon .icon {
    width: 15px;
    height: 15px;
    opacity: 1;
}

.node-palette-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-fg);
}

.drawflow .drawflow-node {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: auto;
    min-width: 200px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    /* No overflow:hidden here - Drawflow renders its .input/.output connector dots
       positioned OUTSIDE the node box (e.g. .input at left:-27px), so clipping overflow
       would hide those dots and make it impossible to drag a connection onto them. */
}

.drawflow .drawflow-node.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .22);
}

.wf-node-icon {
    position: absolute;
    top: 0.6rem;
    left: 0.9rem;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wf-node-icon .icon {
    width: 16px;
    height: 16px;
    opacity: 1;
}

.wf-node-body {
    display: block;
    padding: 0.65rem 0.8rem 0.65rem calc(0.9rem + 30px + 0.6rem);
    min-height: 54px;
}

.wf-node-title {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-fg);
    line-height: 1.3;
}

.wf-node-category {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
    width: 22px;
    height: 22px;
    background: #fff;
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
    cursor: crosshair;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

/* Drawflow's own default offsets ports far from the node edge (input at -27px) - pull them
   closer so "dragging near the node" actually reaches the clickable dot. */
.drawflow .drawflow-node .input {
    left: -14px;
}

.drawflow .drawflow-node .output {
    right: -14px;
}

.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
    background: var(--color-primary);
    transform: scale(1.35);
    box-shadow: 0 0 0 7px rgba(var(--color-primary-rgb), 0.28);
}

/* While a connection is being dragged (see workflow-editor.js), every valid input target
   pulses so the user can see exactly where to drop it, not just the one under the cursor.
   #drawflow-canvas gets .is-connecting directly - Drawflow's own ".drawflow" class lands on
   an inner wrapper div it creates itself, not on our container, so this can't be combined
   with ".drawflow" the way the other rules on this page are. */
#drawflow-canvas.is-connecting .drawflow-node .input {
    animation: input-target-pulse 1s ease-in-out infinite;
}

.drawflow .drawflow-node .input.drop-hover {
    background: var(--color-primary);
    transform: scale(1.5);
    box-shadow: 0 0 0 9px rgba(var(--color-primary-rgb), 0.32);
    animation: none;
}

@keyframes input-target-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); }
    50% { box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb), 0.3); }
}

.drawflow .connection .main-path {
    stroke: #8a94a6;
    stroke-width: 2px;
}

.drawflow .connection .main-path:hover {
    stroke: var(--color-primary);
    cursor: pointer;
}

/* ---------- Config panel field-output chips ---------- */

.field-chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.field-chip {
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt, #F1F5F9);
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    line-height: 1.5;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.field-chip:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---------- Login / auth page ---------- */

.auth-body {
    background: var(--color-bg);
}

.auth-shell {
    min-height: 100dvh;
    display: flex;
}

.auth-brand-panel {
    flex: 1 1 45%;
    max-width: 520px;
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem;
}

.auth-brand-mark {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
}

.auth-brand-copy h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    max-width: 22rem;
    margin-bottom: 0.9rem;
}

.auth-brand-copy p {
    color: var(--sidebar-fg);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 24rem;
}

.auth-brand-footer {
    color: var(--sidebar-fg-muted);
    font-size: 0.8rem;
}

.auth-form-panel {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 360px;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--color-fg);
}

.auth-submit {
    margin-top: 0.25rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-weight: 600;
}

.auth-submit:disabled {
    opacity: 0.75;
}

@media (max-width: 899.98px) {
    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        flex: 1 1 100%;
    }
}

/* ---------- Page header (title + subtitle + primary action) ---------- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.page-header-text {
    min-width: 0;
}

.page-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: 0.15rem;
}

.page-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-fg);
    margin: 0;
    letter-spacing: -0.01em;
}

.page-subtitle {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-top: 0.3rem;
    max-width: 42rem;
}

/* ---------- KPI / stat cards ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}

@media (max-width: 767.98px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.stat-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
}

.stat-icon .icon {
    width: 19px;
    height: 19px;
    opacity: 1;
}

.stat-icon.tone-warning { background: rgba(253, 126, 20, 0.12); color: #c2610d; }
.stat-icon.tone-danger { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.stat-icon.tone-success { background: rgba(25, 135, 84, 0.12); color: #198754; }

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-fg);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-top: 0.1rem;
}

/* ---------- Card with header, wrapping a table ---------- */

.panel {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

.panel-header-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-fg);
}

.panel-header-meta {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.panel .table {
    margin-bottom: 0;
}

.panel .table-responsive {
    margin: 0;
}

.panel .table > thead > tr > th:first-child,
.panel .table > tbody > tr > td:first-child {
    padding-left: 1.1rem;
}

.panel .table > thead > tr > th:last-child,
.panel .table > tbody > tr > td:last-child {
    padding-right: 1.1rem;
}

.panel .table > tbody > tr {
    transition: background-color 0.1s ease;
}

.panel .table > tbody > tr:hover {
    background-color: rgba(var(--color-primary-rgb), 0.04);
}

.panel .table > tbody > tr > td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    vertical-align: middle;
}

/* ---------- Empty state ---------- */

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-muted);
}

.empty-state .icon {
    width: 34px;
    height: 34px;
    opacity: 0.35;
    margin-bottom: 0.75rem;
}

.empty-state-title {
    font-weight: 600;
    color: var(--color-fg);
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.empty-state-text {
    font-size: 0.83rem;
    max-width: 26rem;
    margin: 0 auto;
}

.empty-state .btn {
    margin-top: 1rem;
}

/* ---------- Type picker (Connections "new" step 1) ---------- */

.type-picker-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: var(--color-fg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.type-picker-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.12);
    transform: translateY(-1px);
    color: var(--color-fg);
}

.type-picker-icon {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
}

.type-picker-icon .icon {
    width: 20px;
    height: 20px;
    opacity: 1;
}

.type-picker-name {
    font-weight: 600;
    font-size: 0.9rem;
}

/* ---------- Member avatar ---------- */

.member-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

/* ---------- Confirm modal (replaces native window.confirm) ---------- */

.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.confirm-modal-overlay[hidden] {
    display: none;
}

.confirm-modal {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
}

.confirm-modal p {
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
    color: var(--color-fg);
    line-height: 1.5;
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}