/* ── CSS Variables ───────────────────────────────────────────────── */
:root {
    --sidebar-w: 260px;
    --bg-body: #12141a;
    --bg-sidebar: #16191f;
    --bg-card: #1e222a;
    --bg-input: #262a34;
    --border: #2c3040;
    --accent: #00b8d4;
    --accent-hover: #00e5ff;
    --text-1: #e4e6ea;
    --text-2: #8b92a5;
    --green: #00c853;
    --yellow: #ffd600;
    --red: #ff1744;
}
body { background: var(--bg-body); color: var(--text-1); font-family: 'Segoe UI', system-ui, sans-serif; }

/* ── Sidebar ────────────────────────────────────────────────────── */
#sidebar {
    width: var(--sidebar-w); min-height: 100vh; background: var(--bg-sidebar);
    border-right: 1px solid var(--border); position: fixed; top: 0; left: 0; z-index: 1040;
    transition: transform .25s ease;
}
#main-content { margin-left: var(--sidebar-w); min-height: 100vh; width: calc(100% - var(--sidebar-w)); }
.sidebar-brand { font-size: 1.15rem; font-weight: 700; color: var(--accent); border-bottom: 1px solid var(--border); }
#sidebar .nav-link {
    color: var(--text-2); border-radius: .5rem; padding: .55rem .85rem; margin-bottom: 2px;
    display: flex; align-items: center; gap: .6rem; font-size: .875rem; transition: all .15s;
}
#sidebar .nav-link:hover { color: var(--text-1); background: rgba(255,255,255,.05); }
#sidebar .nav-link.active { color: #fff; background: var(--accent); }
#sidebar .nav-link .badge { font-size: .7rem; }
@media (max-width: 767.98px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.show { transform: translateX(0); }
    #main-content { margin-left: 0; width: 100%; }
}

/* ── Top bar ────────────────────────────────────────────────────── */
.topbar { background: var(--bg-sidebar); min-height: 52px; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem; }
.card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; }
.stat-card { text-align: center; padding: 1.5rem; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--accent); }
.stat-card .stat-label { font-size: .8rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--bg-input); border-color: var(--border); color: var(--text-1);
}
.form-control:focus, .form-select:focus {
    background: var(--bg-input); border-color: var(--accent); color: var(--text-1);
    box-shadow: 0 0 0 .2rem rgba(0,184,212,.25);
}
.form-label { font-weight: 500; font-size: .875rem; color: var(--text-2); }
.form-text { color: var(--text-2); }

/* ── Btn accent ─────────────────────────────────────────────────── */
.btn-accent { background: var(--accent); color: #000; font-weight: 600; border: 0; }
.btn-accent:hover { background: var(--accent-hover); color: #000; }

/* ── Tables ─────────────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-1); --bs-table-border-color: var(--border); }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); font-weight: 600; }

/* ── Status badges ──────────────────────────────────────────────── */
.badge-status { font-size: .75rem; padding: .3em .65em; border-radius: 1rem; font-weight: 500; }
.badge-active  { background: rgba(0,200,83,.15); color: var(--green); }
.badge-inactive { background: rgba(139,146,165,.15); color: var(--text-2); }
.badge-testing { background: rgba(255,214,0,.15); color: var(--yellow); }

/* ── Tab nav styling ────────────────────────────────────────────── */
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--text-2); border: 0; padding: .6rem 1rem; }
.nav-tabs .nav-link:hover { color: var(--text-1); border-color: transparent; }
.nav-tabs .nav-link.active { color: var(--accent); background: transparent; border: 0; border-bottom: 2px solid var(--accent); }

/* ── Prompt preview ─────────────────────────────────────────────── */
.prompt-preview {
    background: var(--bg-input); border: 1px solid var(--border); border-radius: .5rem;
    padding: 1rem; font-family: 'Consolas', monospace; font-size: .82rem; white-space: pre-wrap;
    max-height: 500px; overflow-y: auto; color: var(--text-2);
}

/* ── Chat test ──────────────────────────────────────────────────── */
.chat-container { height: 450px; overflow-y: auto; }
.chat-bubble { max-width: 80%; padding: .6rem 1rem; border-radius: 1rem; margin-bottom: .5rem; font-size: .9rem; }
.chat-bubble.user { background: var(--accent); color: #000; margin-left: auto; border-bottom-right-radius: .25rem; }
.chat-bubble.agent { background: var(--bg-input); border: 1px solid var(--border); border-bottom-left-radius: .25rem; }

/* ── Login page ─────────────────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0d0f14 0%, #16191f 100%);
}
.login-card { width: 100%; max-width: 420px; }

/* ── Install wrapper (reuses login style) ───────────────────────── */
.install-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0d0f14 0%, #16191f 100%); }
.install-card { width: 100%; max-width: 520px; }

/* ── Dynamic row spacing ────────────────────────────────────────── */
.dynamic-row + .dynamic-row { border-top: 1px solid var(--border); padding-top: .5rem; }

/* ── Input-group inside dark theme fix ──────────────────────────── */
.input-group-text { border-color: var(--border); }

/* ── Sortable placeholder ───────────────────────────────────────── */
.sortable-ghost { opacity: .4; }
.drag-handle { cursor: grab; color: var(--text-2); }
.drag-handle:active { cursor: grabbing; }

/* ── Install wizard ─────────────────────────────────────────────── */
.install-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-body); }
.install-card { width: 100%; max-width: 560px; }