/* Ariadne Dark Mode - Kano.chat inspired */

html, body { min-height: 100%; } /* keep base styles intact */

[data-bs-theme="dark"] , [data-bs-theme="dark"] body {
    color: var(--kano-text-main) !important;
    background:
        radial-gradient(1200px 650px at 10% -10%, #123824 0%, transparent 55%),
        radial-gradient(900px 600px at 90% 5%, #0f2c20 0%, transparent 58%),
        linear-gradient(145deg, #010302 0%, #030906 45%, #020705 100%) !important;
    background-attachment: fixed !important;
}

[data-bs-theme="dark"] .login-page {
    background: transparent !important;
}

[data-bs-theme="dark"] .login-card {
    background: var(--kano-bg-soft) !important;
    border: 1px solid var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .login-qr-card {
    background: rgba(26, 82, 58, 0.1) !important;
    border: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .qr-url-label {
    color: var(--kano-text-soft) !important;
}

[data-bs-theme="dark"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background-image:
        linear-gradient(rgba(40, 255, 158, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 255, 158, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 100%);
    pointer-events: none;
}

/* Scoped overrides for MainLayout and other components in dark mode */

[data-bs-theme="dark"] .top-row {
    background-color: rgba(3, 9, 6, 0.8) !important;
    border-bottom: 1px solid var(--kano-line) !important;
    backdrop-filter: blur(8px);
}

[data-bs-theme="dark"] .dropdown-content {
    background-color: var(--kano-bg-soft) !important;
    border: 1px solid var(--kano-line) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--kano-text-soft) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .dropdown-item-title {
    color: var(--kano-glow-strong) !important;
}

[data-bs-theme="dark"] .dropdown-item-desc {
    color: var(--kano-text-soft) !important;
    opacity: 0.7;
}

[data-bs-theme="dark"] .primary-link {
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .nav-link {
    color: var(--kano-text-soft) !important;
}

[data-bs-theme="dark"] .nav-link:hover {
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .app-brand {
    color: var(--kano-glow) !important;
    text-shadow: 0 0 10px rgba(40, 255, 158, 0.5);
}

/* Button overrides */
[data-bs-theme="dark"] .btn-primary {
    background: linear-gradient(180deg, #37ffaa, #14bf76) !important;
    color: #00210f !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(40, 255, 158, 0.3) !important;
}

[data-bs-theme="dark"] .btn-primary:hover {
    box-shadow: 0 0 25px rgba(40, 255, 158, 0.5) !important;
    transform: translateY(-1px);
}

/* Card / Content area */
[data-bs-theme="dark"] .content {
    color: var(--kano-text-main);
}

[data-bs-theme="dark"] .chat-container {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .user-info-area {
    background-color: rgba(7, 21, 15, 0.4) !important;
    border-bottom: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .input-area {
    background-color: rgba(7, 21, 15, 0.4) !important;
    border-top: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .sidebar-area {
    background-color: var(--kano-bg-soft) !important;
    border-right: 1px solid var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .list-group-item {
    background-color: transparent !important;
    color: var(--kano-text-soft) !important;
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: rgba(40, 255, 158, 0.05) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .list-group-item.active {
    background-color: var(--kano-line) !important;
    border-color: var(--kano-glow) !important;
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .group-header {
    border-bottom-color: var(--kano-line) !important;
    color: var(--kano-glow-strong) !important;
}

[data-bs-theme="dark"] .reasoning-mode-select {
    color: var(--kano-text-main) !important;
    background-color: var(--kano-bg-soft) !important;
}

[data-bs-theme="dark"] .reasoning-mode-select option {
    background-color: var(--kano-bg-soft) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

/* placeholder is trickier — no selector for ::placeholder in BS5 but keep it */
[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--kano-text-soft) !important;
    opacity: 0.5;
}

[data-bs-theme="dark"] .chat-window {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .message-bubble {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .user-message .message-bubble {
    background: transparent !important;
    border: none !important;
}

[data-bs-theme="dark"] .author-name {
    color: var(--kano-glow-strong) !important;
}

[data-bs-theme="dark"] .timestamp {
    color: var(--kano-text-soft) !important;
    opacity: 0.6;
}

[data-bs-theme="dark"] .message-content {
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .tool-call-bubble {
    background: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-soft) !important;
}

[data-bs-theme="dark"] .tool-call-bubble code {
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .status-update {
    color: var(--kano-text-soft) !important;
    opacity: 0.8;
}

[data-bs-theme="dark"] .status-history-panel {
    background: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .status-history-item {
    color: var(--kano-text-soft) !important;
}

[data-bs-theme="dark"] .modal-content {
    background: var(--kano-bg-soft) !important;
    color: var(--kano-text-main) !important;
    border: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] code {
    background: var(--kano-bg-main) !important;
    color: var(--kano-glow) !important;
    border: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .image-thumbnail-container {
    background: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .file-attachment-badge {
    background: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .file-attachment-badge span {
    color: var(--kano-text-main) !important;
}

/* Scrollbar styling — webkit only */
[data-bs-theme="dark"] .chat-window::-webkit-scrollbar,
[data-bs-theme="dark"] .sidebar-area::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-bs-theme="dark"] .chat-window::-webkit-scrollbar-track,
[data-bs-theme="dark"] .sidebar-area::-webkit-scrollbar-track {
    background: transparent;
}

[data-bs-theme="dark"] .chat-window::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .sidebar-area::-webkit-scrollbar-thumb {
    background: var(--kano-line);
    border-radius: 10px;
}

[data-bs-theme="dark"] .chat-window::-webkit-scrollbar-thumb:hover,
[data-bs-theme="dark"] .sidebar-area::-webkit-scrollbar-thumb:hover {
    background: var(--kano-glow);
}

/* Top-row overrides */
[data-bs-theme="dark"] .top-row,
[data-bs-theme="dark"] .top-row[b-tuz5qhqemw] {
    background-image: none !important;
    background-color: var(--kano-bg-soft) !important;
    border-bottom: 1px solid var(--kano-line) !important;
}

/* Only target the brand link, not every <a> in .top-row (which includes dropdown items) */
[data-bs-theme="dark"] .top-row .navbar-brand,
[data-bs-theme="dark"] .top-row .app-brand {
    color: var(--kano-glow) !important;
    text-shadow: 0 0 10px rgba(40, 255, 158, 0.5);
}

/* Explicitly reset dropdown item colour so it isn't inherited from .top-row rules */
[data-bs-theme="dark"] .top-row .dropdown-menu .dropdown-item,
[data-bs-theme="dark"] .top-row .dropdown-menu a {
    color: var(--kano-text-soft) !important;
    text-decoration: none !important;
}

[data-bs-theme="dark"] .top-row .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .top-row .dropdown-menu a:hover {
    color: var(--kano-glow) !important;
    background-color: rgba(40, 255, 158, 0.1) !important;
}

/* Home Page Sidebar Selected Conversation */
[data-bs-theme="dark"] .sidebar-area .list-group-item.active,
[data-bs-theme="dark"] .sidebar-area .conversation-item-wrapper.active {
    background-color: rgba(40, 255, 158, 0.1) !important;
    border-left: 3px solid var(--kano-glow) !important;
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .sidebar-area .conversation-item-wrapper.active .list-group-item {
    background-color: transparent !important;
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .sidebar-area .conversation-item-wrapper.active .text-muted {
    color: var(--kano-text-soft) !important;
    opacity: 0.8;
}

/* Transcribe Page */
[data-bs-theme="dark"] .transcribe-container {
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .transcribe-container h2,
[data-bs-theme="dark"] .transcribe-container .display-6 {
    color: var(--kano-glow) !important;
}

/* Read Content Page */
[data-bs-theme="dark"] .read-content-page h2 {
    color: var(--kano-glow) !important;
}

/* Briefings Page */
[data-bs-theme="dark"] .briefings-page {
    background: transparent !important;
}

[data-bs-theme="dark"] .featured-card {
    background: rgba(26, 82, 58, 0.1) !important;
    border: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .topic-item {
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .briefings-page .bg-light {
    background-color: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
}

/* Agents Page */
[data-bs-theme="dark"] .agents-page h2 {
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .agent-item.active {
    background-color: var(--kano-line) !important;
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs > li > a.nav-link.active,
[data-bs-theme="dark"] ul.nav.nav-tabs li.active a {
    background-color: var(--kano-bg-soft) !important;
    color: var(--kano-glow) !important;
    border-color: var(--kano-line) var(--kano-line) transparent !important;
}

/* Knowledge Page */
[data-bs-theme="dark"] .knowledge-page {
    color: var(--kano-text-main) !important;
}

/* Goals Page & Kanban */
[data-bs-theme="dark"] .kanban-column {
    background-color: rgba(7, 21, 15, 0.4) !important;
    border: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .kanban-card {
    background-color: var(--kano-bg-soft) !important;
    border: 1px solid var(--kano-line) !important;
}

/* Workflows & Tools Editor */
[data-bs-theme="dark"] .workflows-layout-wrapper {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .workflows-sidebar {
    background-color: var(--kano-bg-soft) !important;
    border-right: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .workflows-header {
    background-color: rgba(7, 21, 15, 0.4) !important;
    border-bottom: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .workflow-editor-shell {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .workflow-list-row.active {
    background-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .workflow-list-row.active .workflow-row-main,
[data-bs-theme="dark"] .workflow-list-row.active .workflow-row-secondary {
    color: var(--kano-glow) !important;
}

/* MCP Servers Page */
[data-bs-theme="dark"] .mcp-servers-page {
    color: var(--kano-text-main) !important;
}

/* General overrides for dropdowns and buttons */
[data-bs-theme="dark"] .nav-dropdown .dropdown-menu,
[data-bs-theme="dark"] .user-identity .dropdown-menu {    background: rgba(10, 25, 20, 0.95) !important;
    border: 1px solid var(--kano-line) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    animation: dropdownFadeInDark 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes dropdownFadeInDark {
    from { opacity: 0; transform: translateY(-15px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Nav dropdown items — dark mode overrides (mirrors app.css light mode rules) */
[data-bs-theme="dark"] .nav-dropdown .dropdown-menu .dropdown-item,
[data-bs-theme="dark"] .user-identity .dropdown-menu .dropdown-item {
    color: var(--kano-text-soft) !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

[data-bs-theme="dark"] .nav-dropdown .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .user-identity .dropdown-menu .dropdown-item:hover {
    background-color: rgba(40, 255, 158, 0.1) !important;
    color: var(--kano-glow) !important;
    transform: translateX(4px);
    text-decoration: none !important;
}

[data-bs-theme="dark"] .nav-dropdown .dropdown-menu .dropdown-item.active,
[data-bs-theme="dark"] .nav-dropdown .dropdown-menu .dropdown-item:active,
[data-bs-theme="dark"] .user-identity .dropdown-menu .dropdown-item.active,
[data-bs-theme="dark"] .user-identity .dropdown-menu .dropdown-item:active {
    background-color: rgba(40, 255, 158, 0.2) !important;
    color: var(--kano-glow) !important;
    text-decoration: none !important;
}

/* Theme selector buttons — dark mode */
[data-bs-theme="dark"] .ariadne-theme-btn {
    color: var(--kano-text-soft);
    background-color: transparent;
}

[data-bs-theme="dark"] .ariadne-theme-btn:hover {
    background-color: rgba(40, 255, 158, 0.1) !important;
    color: var(--kano-glow) !important;
    transform: translateX(4px);
}

[data-bs-theme="dark"] .ariadne-theme-btn.active {
    background-color: rgba(40, 255, 158, 0.2) !important;
    color: var(--kano-glow) !important;
}
/* User-identity dropdown menu (Identity menu) dark mode styling */
[data-bs-theme="dark"] .user-identity .dropdown-menu {
    background: rgba(10, 25, 20, 0.95) !important;
    border: 1px solid var(--kano-line) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(12px) !important;
}

/* Dropdown overrides - ensure they don't break other page layouts */
[data-bs-theme="dark"] .dropdown-menu:not(.nav-dropdown .dropdown-menu) {
    background-color: var(--kano-bg-soft) !important;
    border: 1px solid var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .dropdown-item:not(.nav-dropdown .dropdown-item) {
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .dropdown-item:not(.nav-dropdown .dropdown-item):hover {
    background-color: var(--kano-line) !important;
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .card {
    background-color: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: var(--kano-line) !important;
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .card-body {
    background-color: transparent !important;
    color: var(--kano-text-main) !important;
}

/* Home Page specific popups */
[data-bs-theme="dark"] .conversation-info-popup {
    background-color: var(--kano-bg-soft) !important;
    border: 1px solid var(--kano-line) !important;
    color: var(--kano-text-main) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
    padding: 1rem !important;
    border-radius: 8px !important;
}

/* General overrides for buttons */
[data-bs-theme="dark"] .btn-primary {
    background-color: var(--kano-glow) !important;
    border-color: var(--kano-glow) !important;
    color: var(--kano-bg) !important;
    font-weight: bold !important;
}

[data-bs-theme="dark"] .btn-primary:hover {
    filter: brightness(1.2) !important;
    box-shadow: 0 0 15px var(--kano-glow-trans) !important;
}

/* User info row on Home page */
[data-bs-theme="dark"] .user-info-area {
    background-color: var(--kano-bg) !important;
    border-bottom: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .header-meta .text-muted {
    color: var(--kano-text-soft) !important;
}

[data-bs-theme="dark"] .reasoning-mode-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .share-location-toggle .form-check-label {
    color: var(--kano-text-soft) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--kano-text-soft) !important;
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--kano-bg-soft) !important;
    border-bottom-color: var(--kano-line) !important;
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .card-body {
    background-color: var(--kano-bg-soft) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--kano-text-soft) !important;
}

/* Table styling */
[data-bs-theme="dark"] .table {
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--kano-text-main) !important;
}

/* Alert styling */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(0, 212, 255, 0.1) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
    color: #81e6ff !important;
}

[data-bs-theme="dark"] .alert-info code {
    color: var(--kano-glow) !important;
}

[data-bs-theme="dark"] .alert-secondary {
    background-color: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffda6a !important;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: rgba(220, 53, 69, 0.2) !important;
    color: #ea868f !important;
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
    border-color: rgba(25, 135, 84, 0.2) !important;
    color: #75b798 !important;
}

/* Standard Bootstrap card override */
[data-bs-theme="dark"] .card {
    background-color: rgba(7, 21, 15, 0.7) !important;
    border: 1px solid var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

/* Global scrollbar */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--kano-bg-main);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--kano-line);
    border-radius: 5px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--kano-glow);
}

/* ================================================================
   MOBILE DARK MODE — stacking context fixes
   backdrop-filter on .top-row creates a stacking context with z-index:auto.
   Because article.content is later in the DOM it paints over the entire
   .top-row stacking context (including dropdowns at z-index:1050 inside it).
   Giving .top-row an explicit z-index promotes it above article.content.
   This only needs to apply at mobile widths; ≥641px already has
   position:sticky + z-index:1000 from MainLayout.razor.css.
   ================================================================ */
@media (max-width: 640.98px) {
    body.theme-dark .top-row {
        position: relative;
        z-index: 1000;
    }
}

/* ================================================================
   CHAT HOME PAGE SIDEBAR — semi-transparent so the page gradient shows
   ================================================================ */

body.theme-dark .sidebar-area {
    background-color: rgba(5, 14, 9, 0.72) !important;
    border-right: 1px solid rgba(27, 255, 180, 0.1) !important;
    backdrop-filter: blur(4px);
    color: var(--kano-text-soft) !important;
}

body.theme-dark .sidebar-area .list-group-item {
    color: var(--kano-text-soft) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

body.theme-dark .sidebar-area .list-group-item:hover {
    background-color: rgba(40, 255, 158, 0.07) !important;
    color: var(--kano-text-main) !important;
}

body.theme-dark .conversation-item-wrapper.active {
    background-color: rgba(40, 255, 158, 0.13) !important;
    border-left-color: var(--kano-glow) !important;
}

body.theme-dark .conversation-item-wrapper.active .list-group-item {
    color: var(--kano-glow) !important;
}

body.theme-dark .conversation-item-wrapper:not(.active):hover {
    background-color: rgba(40, 255, 158, 0.05) !important;
}

body.theme-dark .conversation-item-wrapper.headless-conversation {
    background-color: rgba(255, 193, 7, 0.08) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

body.theme-dark .conversation-item-wrapper.headless-conversation.active {
    background-color: rgba(255, 193, 7, 0.18) !important;
}

body.theme-dark .delete-conversation-btn {
    color: var(--kano-text-soft) !important;
}

body.theme-dark .delete-conversation-btn:hover {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #f87171 !important;
    opacity: 1 !important;
}

body.theme-dark .sidebar-title {
    color: var(--kano-text-soft) !important;
}

body.theme-dark .group-header {
    color: var(--kano-text-soft) !important;
    border-color: var(--kano-line) !important;
}

/* Chat container in dark mode */
body.theme-dark .chat-container {
    background-color: transparent !important;
}

body.theme-dark .user-info-area {
    background-color: rgba(5, 14, 9, 0.55) !important;
    border-color: var(--kano-line) !important;
    backdrop-filter: blur(4px);
    /* backdrop-filter creates a stacking context with z-index:auto; without an
       explicit z-index the later .chat-window sibling paints over the popup. */
    position: relative;
    z-index: 10;
}

/* Thinking/status bar dark mode */
body.theme-dark .status-update-bar {
    background-color: rgba(5, 14, 9, 0.7) !important;
    border-top-color: rgba(27, 255, 180, 0.15) !important;
    color: var(--kano-text-soft) !important;
}

body.theme-dark .status-update-bar:hover {
    background-color: rgba(27, 255, 180, 0.06) !important;
}

body.theme-dark .status-update-pulse {
    background-color: var(--kano-glow) !important;
}

body.theme-dark .status-update-expand-hint {
    color: var(--kano-text-soft) !important;
}

/* Status history panel dark mode */
body.theme-dark .status-history-indicator .btn-link {
    color: var(--kano-text-soft) !important;
}

body.theme-dark .status-history-panel {
    background-color: rgba(5, 14, 9, 0.6) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-soft) !important;
}

body.theme-dark .status-history-item {
    border-color: var(--kano-line) !important;
    color: var(--kano-text-soft) !important;
}

/* ================================================================
   PAGE-SPECIFIC DARK MODE — uses body.theme-dark (set by setBsTheme)
   so these win over any inline or scoped-CSS light-mode values.
   ================================================================ */

/* --- Shared sidebar/header pattern (Goals, Knowledge, Workflows, Tools, MCP) --- */
body.theme-dark .goals-sidebar,
body.theme-dark .workflows-sidebar,
body.theme-dark .knowledge-sidebar {
    background-color: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
}

body.theme-dark .goals-sidebar .list-group-item,
body.theme-dark .workflows-sidebar .list-group-item,
body.theme-dark .knowledge-sidebar .list-group-item {
    color: var(--kano-text-soft) !important;
}

body.theme-dark .goals-sidebar .list-group-item:hover,
body.theme-dark .workflows-sidebar .list-group-item:hover,
body.theme-dark .knowledge-sidebar .list-group-item:hover {
    background-color: rgba(40, 255, 158, 0.06) !important;
    color: var(--kano-text-main) !important;
}

body.theme-dark .goals-sidebar .list-group-item.active,
body.theme-dark .workflows-sidebar .list-group-item.active,
body.theme-dark .knowledge-sidebar .list-group-item.active,
body.theme-dark .workflow-list-row.active .workflow-row-main {
    background-color: rgba(40, 255, 158, 0.14) !important;
    color: var(--kano-glow) !important;
    border-left-color: var(--kano-glow) !important;
}

body.theme-dark .sidebar-section-label {
    color: var(--kano-text-soft) !important;
}

body.theme-dark .goals-header,
body.theme-dark .workflows-header,
body.theme-dark .knowledge-header {
    background-color: rgba(5, 14, 9, 0.6) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

body.theme-dark .goals-header h2,
body.theme-dark .workflows-header h2,
body.theme-dark .knowledge-header h2 {
    color: var(--kano-text-main) !important;
}

body.theme-dark .goals-board-container,
body.theme-dark .goals-layout-wrapper,
body.theme-dark .workflows-layout-wrapper,
body.theme-dark .knowledge-layout-wrapper,
body.theme-dark .workflows-editor,
body.theme-dark .knowledge-editor,
body.theme-dark .workflow-editor-shell,
body.theme-dark .knowledge-editor-shell {
    background: transparent !important;
}

/* --- Kanban board (Goals) --- */
body.theme-dark .kanban-column {
    background-color: rgba(5, 14, 9, 0.5) !important;
    border-color: var(--kano-line) !important;
}

body.theme-dark .kanban-column-header {
    color: var(--kano-text-main) !important;
    border-color: var(--kano-line) !important;
}

body.theme-dark .status-count {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--kano-text-main) !important;
}

body.theme-dark .goal-card {
    background-color: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* --- Workflow canvas --- */
body.theme-dark .workflow-canvas {
    background: rgba(5, 14, 9, 0.4) !important;
    border-color: var(--kano-line) !important;
}

body.theme-dark .workflow-node {
    background: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body.theme-dark .workflow-node.selected {
    border-color: var(--kano-glow) !important;
    box-shadow: 0 0 0 3px rgba(27, 255, 180, 0.2), 0 8px 16px rgba(0, 0, 0, 0.5) !important;
}

body.theme-dark .workflow-node-header {
    background: rgba(27, 255, 180, 0.05) !important;
    border-color: var(--kano-line) !important;
}

body.theme-dark .node-title {
    color: var(--kano-text-main) !important;
}

body.theme-dark .prompt-preview {
    color: var(--kano-text-soft) !important;
}

body.theme-dark .workflow-link {
    stroke: var(--kano-glow) !important;
    opacity: 0.6;
}

body.theme-dark .port {
    background: var(--kano-bg-soft) !important;
    border-color: var(--kano-glow) !important;
}

body.theme-dark .workflow-inline-add {
    color: var(--kano-text-soft) !important;
}

body.theme-dark .workflow-inline-add:hover {
    background: rgba(40, 255, 158, 0.08) !important;
    color: var(--kano-glow) !important;
}

/* --- Knowledge item cards --- */
body.theme-dark .knowledge-item-card {
    background: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

body.theme-dark .knowledge-item-card:hover {
    border-color: rgba(27, 255, 180, 0.4) !important;
    box-shadow: 0 2px 8px rgba(27, 255, 180, 0.1) !important;
}

body.theme-dark .knowledge-value-preview {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

body.theme-dark .knowledge-item-key code {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: var(--kano-glow) !important;
}

body.theme-dark .knowledge-item-footer {
    border-color: var(--kano-line) !important;
}

body.theme-dark .knowledge-editor-form {
    border-color: var(--kano-line) !important;
}

/* --- Schedules page --- */
body.theme-dark .schedule-agent-chip {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

/* --- Transcribe page --- */
body.theme-dark .transcription-display {
    background-color: rgba(5, 14, 9, 0.5) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

body.theme-dark .transcript-line {
    color: var(--kano-text-soft) !important;
}

/* --- Briefings page --- */
body.theme-dark .briefings-page {
    background: transparent !important;
}

body.theme-dark .featured-card {
    background: rgba(5, 14, 9, 0.5) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

body.theme-dark .briefing-card {
    background: var(--kano-bg-soft) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

body.theme-dark .markdown-content a {
    color: var(--kano-glow) !important;
}

/* --- Agents page --- */
body.theme-dark .agent-item:hover {
    background-color: rgba(40, 255, 158, 0.06) !important;
}

body.theme-dark .agent-item.active {
    background-color: rgba(40, 255, 158, 0.14) !important;
    color: var(--kano-glow) !important;
    border-left-color: var(--kano-glow) !important;
}

body.theme-dark .agent-item.active small {
    color: var(--kano-text-soft) !important;
}

/* ================================================================
   CONSOLIDATED OVERRIDES — last in file so they win cascade ties
   ================================================================ */

/* --- Top-row: dark gradient with green accent --- */
[data-bs-theme="dark"] .top-row,
[data-bs-theme="dark"] .top-row[b-tuz5qhqemw] {
    background: linear-gradient(90deg, #050e09 0%, #0b1f14 40%, #061209 70%, #0c1a11 100%) !important;
    border-bottom: 1px solid rgba(27, 255, 180, 0.18) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Ariadne brand: soft light mint for contrast against the dark gradient */
[data-bs-theme="dark"] .top-row .navbar-brand,
[data-bs-theme="dark"] .top-row .app-brand {
    color: #c8f5e8 !important;
    text-shadow: none !important;
}

/* Nav buttons in top-row remain readable */
[data-bs-theme="dark"] .top-row .primary-link,
[data-bs-theme="dark"] .top-row .nav-link {
    color: rgba(200, 245, 232, 0.75) !important;
}

[data-bs-theme="dark"] .top-row .primary-link:hover,
[data-bs-theme="dark"] .top-row .nav-link:hover {
    color: #c8f5e8 !important;
}

/* --- btn-primary: fix green-on-green — consolidated single rule --- */
[data-bs-theme="dark"] .btn-primary {
    background: linear-gradient(160deg, #1bffb4 0%, #0db87e 100%) !important;
    color: #001a08 !important;   /* dark forest green — high contrast on bright green */
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(27, 255, 180, 0.2) !important;
}

[data-bs-theme="dark"] .btn-primary:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 18px rgba(27, 255, 180, 0.4) !important;
    transform: translateY(-1px);
}

/* --- Bootstrap bg-white / bg-light utilities: override in dark mode --- */
/* Must be more specific than Bootstrap's .bg-white { ...!important } */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--kano-bg-soft) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .border-bottom {
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: var(--kano-text-soft) !important;
}

[data-bs-theme="dark"] .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

/* --- Schedules page --- */
[data-bs-theme="dark"] .schedules-page {
    color: var(--kano-text-main) !important;
}

/* --- Knowledge page sidebar and header --- */
[data-bs-theme="dark"] .knowledge-layout-wrapper {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .knowledge-header {
    background-color: rgba(7, 21, 15, 0.4) !important;
    border-bottom: 1px solid var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .knowledge-sidebar {
    background-color: var(--kano-bg-soft) !important;
    border-right: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .sidebar-section-label {
    color: var(--kano-text-soft) !important;
    opacity: 0.7;
}

/* --- Goals page header and card --- */
[data-bs-theme="dark"] .goals-layout-wrapper {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .goals-header {
    background-color: rgba(7, 21, 15, 0.4) !important;
    border-bottom: 1px solid var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .goal-card {
    background-color: var(--kano-bg-soft) !important;
    border: 1px solid var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .kanban-column-header {
    color: var(--kano-glow-strong) !important;
    border-bottom: 1px solid var(--kano-line) !important;
}

/* --- Agents page --- */
[data-bs-theme="dark"] .agents-page {
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .agent-item {
    background-color: transparent !important;
    color: var(--kano-text-soft) !important;
    border-color: var(--kano-line) !important;
}

[data-bs-theme="dark"] .agent-item:hover {
    background-color: rgba(40, 255, 158, 0.05) !important;
    color: var(--kano-text-main) !important;
}

/* --- Transcribe page: transcript area and card --- */
[data-bs-theme="dark"] .transcribe-container .card-header {
    background-color: var(--kano-bg-soft) !important;
    border-bottom: 1px solid var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .transcription-display {
    background-color: rgba(7, 21, 15, 0.5) !important;
    border-color: var(--kano-line) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .transcript-line {
    color: var(--kano-text-soft) !important;
}

/* --- Authorise Access page --- */
[data-bs-theme="dark"] .card-header h4,
[data-bs-theme="dark"] .card-header .h4,
[data-bs-theme="dark"] .card-header h5,
[data-bs-theme="dark"] .card-header .h5 {
    color: var(--kano-text-main) !important;
}

/* ================================================================
   CONVERSATION PROPERTIES PANEL — dark mode
   ================================================================ */

body.theme-dark .conv-props-panel {
    background: rgba(5, 14, 9, 0.96) !important;
    border-left: 1px solid var(--kano-line) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(12px);
    color: var(--kano-text-main) !important;
}

body.theme-dark .conv-props-header {
    background: rgba(7, 21, 15, 0.8) !important;
    border-bottom: 1px solid var(--kano-line) !important;
}

body.theme-dark .conv-props-title {
    color: var(--kano-text-main) !important;
}

body.theme-dark .conv-props-tabs {
    background: rgba(7, 21, 15, 0.6) !important;
    border-bottom: 1px solid var(--kano-line) !important;
}

body.theme-dark .conv-props-tabs .nav-link {
    color: var(--kano-text-soft) !important;
    border-bottom-color: transparent !important;
}

body.theme-dark .conv-props-tabs .nav-link:hover {
    color: var(--kano-text-main) !important;
    background: rgba(27, 255, 180, 0.05) !important;
}

body.theme-dark .conv-props-tabs .nav-link.active {
    color: var(--kano-glow) !important;
    border-bottom-color: var(--kano-glow) !important;
    background: transparent !important;
}

body.theme-dark .conv-props-tab-content {
    color: var(--kano-text-main) !important;
}

/* Members list rows */
body.theme-dark .conv-props-tab-content .border-bottom {
    border-color: var(--kano-line) !important;
}

body.theme-dark .conv-props-tab-content code {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--kano-glow) !important;
    border: 1px solid var(--kano-line) !important;
    padding: 0.1em 0.35em;
    border-radius: 3px;
}

/* Data sources cards */
body.theme-dark .conv-props-tab-content .border.rounded {
    border-color: var(--kano-line) !important;
    background: rgba(7, 21, 15, 0.4) !important;
}

body.theme-dark .conv-props-tab-content .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--kano-text-soft) !important;
}

/* Tools list */
body.theme-dark .conv-tools-list .border-bottom {
    border-color: var(--kano-line) !important;
}

/* Backdrop */
body.theme-dark .conv-props-backdrop {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* Mirror rules for [data-bs-theme="dark"] so both selector paths work */
[data-bs-theme="dark"] .conv-props-panel {
    background: rgba(5, 14, 9, 0.96) !important;
    border-left: 1px solid var(--kano-line) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important;
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .conv-props-header {
    background: rgba(7, 21, 15, 0.8) !important;
    border-bottom: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .conv-props-title {
    color: var(--kano-text-main) !important;
}

[data-bs-theme="dark"] .conv-props-tabs {
    background: rgba(7, 21, 15, 0.6) !important;
    border-bottom: 1px solid var(--kano-line) !important;
}

[data-bs-theme="dark"] .conv-props-tabs .nav-link {
    color: var(--kano-text-soft) !important;
    border-bottom-color: transparent !important;
}

[data-bs-theme="dark"] .conv-props-tabs .nav-link:hover {
    color: var(--kano-text-main) !important;
    background: rgba(27, 255, 180, 0.05) !important;
}

[data-bs-theme="dark"] .conv-props-tabs .nav-link.active {
    color: var(--kano-glow) !important;
    border-bottom-color: var(--kano-glow) !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .conv-props-backdrop {
    background: rgba(0, 0, 0, 0.45) !important;
}