/* =====================================================
 * VGen Portal — App Shell & Global Styles
 * Design tokens: tokens.css
 * Legacy Bootstrap override'ları için site.css (transition period).
 * ===================================================== */

/* ---------- Reset ---------- */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-13);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
}

code, pre, kbd, samp {
    font-family: var(--font-mono);
}

/* ---------- Shell: Page + Sidebar + Main ---------- */
.page {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--color-sidebar);
    color: var(--color-text-dark);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border-dark);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transition: width .18s ease;
    overflow: hidden;
}

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}

main {
    flex: 1;
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .18s ease, width .18s ease;
}

main.sidebar-collapsed {
    margin-left: var(--sidebar-width-collapsed);
    width: calc(100% - var(--sidebar-width-collapsed));
}

/* ---------- Sidebar: brand header ---------- */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-7);
    height: 56px;
    border-bottom: 1px solid var(--color-border-dark);
}

.sidebar-brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--color-grad-from), var(--color-grad-to));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.sidebar-brand-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sidebar-brand-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-inverted);
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.sidebar-brand-sub {
    font-size: 10.5px;
    color: var(--color-text-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 1px;
    white-space: nowrap;
}

.sidebar-toggle {
    background: transparent;
    border: 0;
    color: var(--color-text-dark);
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
}

.sidebar-toggle:hover {
    color: var(--color-text-inverted);
    background: var(--color-sidebar-hover);
}

/* Collapsed brand: 30px logo + 16px×2 padding + toggle can't fit inside a
   64px-wide sidebar — toggle ends up overflowing to the right of the
   sidebar and gets clipped. Drop the logo and tighten padding so the
   toggle is the centered, visible affordance in the collapsed header. */
.sidebar.collapsed .sidebar-brand {
    padding: var(--sp-5) 0;
    justify-content: center;
    gap: 0;
}
.sidebar.collapsed .sidebar-brand-logo {
    display: none;
}

/* ---------- Sidebar: search trigger ---------- */
.sidebar-search {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) var(--sp-5) var(--sp-2);
    padding: 7px 10px;
    background: var(--color-sidebar-alt);
    border: 1px solid var(--color-border-dark);
    border-radius: 7px;
    color: var(--color-text-soft);
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
}

.sidebar-search span.kbd {
    padding: 0 5px;
    background: var(--color-sidebar-alt);
    border: 1px solid var(--color-border-dark);
    border-radius: 4px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--color-text-dark);
}

/* ---------- Sidebar: nav ---------- */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-3) var(--sp-3) var(--sp-7);
    scrollbar-width: thin;
}

.nav-group {
    margin-top: var(--sp-5);
}

.nav-group-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3) var(--sp-1);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    font-weight: 600;
}

.nav-group-count {
    padding: 0 var(--sp-2);
    background: var(--color-sidebar-alt);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-pill);
    font-size: 9.5px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 7px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-text-dark);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.005em;
    text-align: left;
    text-decoration: none;
    width: 100%;
    position: relative;
    transition: background .12s, color .12s;
}

.nav-link:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-text-inverted);
    text-decoration: none;
}

.nav-link.active {
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
    font-weight: 600;
}

.nav-link.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--color-brand);
    border-radius: 4px;
}

.nav-link i, .nav-link svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    font-size: 13px;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: var(--sp-3) 0;
}

/* Hide all inline spans when the sidebar is collapsed EXCEPT the tenant
   short-code chip — the collapsed state uses that code as the only visible
   tenant identifier. Previously this rule killed it along with the label
   span, so Quick Access went invisible when the sidebar folded. */
.sidebar.collapsed .nav-link > span:not(.nav-link-dot):not(.nav-link-code) {
    display: none;
}

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .nav-group-title,
.sidebar.collapsed .sidebar-user-text {
    display: none;
}

/* quick tenant health dot — docker reachability of the tenant's remote host */
.nav-link-dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--color-text-soft);   /* muted default */
    flex-shrink: 0;
    transition: background 0.2s;
}

.nav-link-dot--ok     { background: var(--color-success); }
.nav-link-dot--warn   { background: var(--color-warning); animation: navDotPulse 1.2s ease-in-out infinite; }
.nav-link-dot--danger { background: var(--color-danger); }
.nav-link-dot--muted  { background: var(--color-text-soft); }

/* legacy aliases (pre-BEM) */
.nav-link-dot.warn { background: var(--color-warning); }
.nav-link-dot.danger { background: var(--color-danger); }

@keyframes navDotPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* 2-char tenant code shown when the sidebar is collapsed — replaces the
   name/dot combo with a compact square that still identifies the tenant. */
.nav-link-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: var(--font-mono);
    color: var(--color-text-dark);
    background: var(--color-sidebar-alt);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.nav-link-code--prod {
    color: var(--color-prod);
    background: var(--color-prod-bg);
    border-color: var(--color-prod-border, var(--color-danger-border));
}

/* Health ring on the collapsed code chip — thin left-border in the tone of the
   tenant's current docker reachability. Keeps the full-width dot identity but
   adds a signal when the sidebar is too narrow for the label. */
.nav-link-code--ok     { box-shadow: inset 2px 0 0 var(--color-success); }
.nav-link-code--warn   { box-shadow: inset 2px 0 0 var(--color-warning); }
.nav-link-code--danger { box-shadow: inset 2px 0 0 var(--color-danger); }
.nav-link-code--muted  { /* no ring */ }

.nav-link:hover .nav-link-code {
    color: var(--color-text-inverted);
    background: var(--color-sidebar-hover);
}

.nav-link-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-prod);
}

/* Retry button (shown inline for Disconnected / NotCloned tenants). Hidden
   by default; appears on nav-link hover so it doesn't add visual noise on
   every row. Click handler in NavMenu.razor stops propagation so navigation
   to the tenant page is skipped. */
.nav-link-retry {
    display: none;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.nav-link:hover .nav-link-retry {
    display: inline-flex;
}
.nav-link-retry:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-text-inverted);
}

/* ---------- Sidebar: user footer ---------- */
.sidebar-user {
    border-top: 1px solid var(--color-border-dark);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.sidebar-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--color-grad-from), var(--color-grad-to));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-user-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sidebar-user-name {
    font-size: 12px;
    color: var(--color-text-inverted);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-role {
    font-size: 10.5px;
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 900;
}

.topbar-user-strip {
    height: var(--topbar-user-height);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-7);
    gap: var(--sp-5);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.topbar-spacer { flex: 1; }

.topbar-user-info {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-text-muted);
    font-size: var(--fs-12);
}

.topbar-env-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 2px 10px;
    background: var(--color-prod-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-prod);
}

.topbar-env-banner .dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--color-prod);
}

.topbar-quick-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 3px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 11.5px;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: inherit;
}

.topbar-title-bar {
    height: var(--topbar-tab-height);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-7);
    gap: var(--sp-5);
}

.topbar-title {
    font-size: var(--fs-16);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
}

.topbar-title i {
    color: var(--color-brand);
    font-size: var(--fs-14);
}

/* Blazor's <FocusOnNavigate Selector="h1" /> programmatically focuses h1 on nav.
   h1 is a heading, not an interactive control — suppress focus ring entirely. */
.topbar-title:focus,
.topbar-title:focus-visible {
    outline: none;
}

/* ---------- Content area ---------- */
.content {
    flex: 1;
    padding: var(--sp-8);
    overflow-y: auto;
    background: var(--color-bg);
}

/* ---------- Kbd ---------- */
.kbd {
    display: inline-flex;
    align-items: center;
    padding: 0 5px;
    height: 18px;
    background: #F1F3F7;
    border: 1px solid var(--color-border);
    border-bottom-width: 1.5px;
    border-radius: var(--radius-sm);
    font-size: 10.5px;
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.collapsed {
        transform: translateX(0);
        width: var(--sidebar-width);
    }
    main,
    main.sidebar-collapsed {
        margin-left: 0;
        width: 100%;
    }
}

/* ---------- Blazor error UI (unchanged, retokenized) ---------- */
#blazor-error-ui {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    bottom: 0;
    box-shadow: var(--shadow-md);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1200;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---------- Command palette (Ctrl+K) ---------- */
.cmdp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1200;
}

.cmdp {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, 92vw);
    z-index: 1201;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: hidden;
}

.cmdp__search {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--color-border);
}

.cmdp__search-icon {
    color: var(--color-text-muted);
    font-size: 13px;
}

.cmdp__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 15px;
    font-family: inherit;
    color: var(--color-text);
}

.cmdp__input::placeholder {
    color: var(--color-text-muted);
}

.cmdp__kbd {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-size: 10.5px;
    font-family: var(--font-mono, monospace);
    color: var(--color-text-muted);
}

.cmdp__list {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-3) var(--sp-2);
}

.cmdp__empty {
    padding: var(--sp-7);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--fs-13);
}

.cmdp__item {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-3) var(--sp-5);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-13);
    text-align: left;
    cursor: pointer;
    transition: background .08s;
}

.cmdp__item--active {
    background: var(--color-brand-soft);
}

.cmdp__item-icon {
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

.cmdp__item--active .cmdp__item-icon {
    color: var(--color-brand-text);
}

.cmdp__item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cmdp__item-title {
    font-weight: 500;
}

.cmdp__item-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: var(--font-mono, monospace);
}

.cmdp__item-group {
    font-size: 10.5px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cmdp__footer {
    display: flex;
    gap: var(--sp-5);
    padding: var(--sp-3) var(--sp-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    font-size: 11px;
    color: var(--color-text-muted);
}

.cmdp__footer kbd {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    font-family: var(--font-mono, monospace);
    color: var(--color-text);
    margin: 0 2px;
}

/* ---------- Theme toggle (sidebar footer) ---------- */
.sidebar-theme-toggle {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--color-text-dark);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity .12s, background .12s;
}

.sidebar-theme-toggle:hover {
    opacity: 1;
    background: var(--color-sidebar-hover);
}

/* ---------- Language switcher (sidebar footer / logged-out topbar) ---------- */
.sidebar-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    border: 1px solid var(--color-border, rgba(127,127,127,.3));
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sidebar-lang-option {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    color: var(--color-text-dark);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity .12s, background .12s, color .12s;
}

.sidebar-lang-option:hover {
    opacity: 1;
    background: var(--color-sidebar-hover);
}

.sidebar-lang-option.active {
    opacity: 1;
    color: var(--color-primary, #fff);
    background: var(--color-sidebar-hover);
}

/* ---------- Navigation progress bar ---------- */
/* Fixed 2px strip at the top of the viewport; runs an indeterminate shimmer
   while Blazor Server is fetching/rendering the new route. Pages with slow
   OnInitializedAsync (e.g. Services loading tenant + docker status) no
   longer look frozen. */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s ease-out;
}

.nav-progress--active {
    opacity: 1;
    background: var(--color-brand-soft);
}

.nav-progress--active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -35%;
    width: 35%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-brand) 50%,
        transparent 100%);
    animation: nav-progress-slide 900ms ease-in-out infinite;
}

@keyframes nav-progress-slide {
    0%   { left: -35%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-progress--active::before { animation: none; background: var(--color-brand); width: 100%; left: 0; }
}

/* ---------- Top tab bar (browser-like, replaces topbar-title-bar) ---------- */
.topbar-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 var(--sp-5);
    height: var(--topbar-tab-height);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.topbar-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3) 0 var(--sp-4);
    height: calc(var(--topbar-tab-height) - 4px);
    max-width: 240px;
    min-width: 0;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid transparent;
    border-bottom: 0;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    position: relative;
    white-space: nowrap;
}

.topbar-tab:hover:not(.topbar-tab--active) {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.5);
}

.topbar-tab__icon {
    font-size: 11px;
    opacity: 0.85;
    flex-shrink: 0;
}

.topbar-tab__label {
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
}

.topbar-tab__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    opacity: 0.6;
    cursor: pointer;
    transition: background .12s, opacity .12s, color .12s;
    flex-shrink: 0;
    font-size: 10px;
}

.topbar-tab__close:hover {
    opacity: 1;
    background: var(--color-border);
    color: var(--color-text);
}

/* Active tab: white card pulled up, brand-colored bottom-line indicator */
.topbar-tab--active {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    /* Overlap the bottom border of the strip so the tab "joins" the content */
    margin-bottom: -1px;
    padding-bottom: 1px;
    box-shadow: 0 -1px 0 var(--color-brand) inset;
}

.topbar-tab--active .topbar-tab__icon {
    color: var(--color-brand);
    opacity: 1;
}

/* =====================================================
 * Dark mode: Bootstrap utility class fixes
 * data-bs-theme=dark handles card/modal/alert/table natively, but these
 * utility classes hard-encode light colors — remap them to our tokens
 * so the 47 legacy usages across dialogs don't stay white-on-white.
 * ===================================================== */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body-secondary {
    background-color: var(--color-surface-alt) !important;
    color: var(--color-text);
}

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

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

/* Bootstrap's .btn-light keeps a light pill even in dark mode; tone it down */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: var(--color-surface-alt);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-bg);
    --bs-btn-hover-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-text);
}

/* .border-success / .border-warning etc. on dark cards can look harsh; soften. */
[data-bs-theme="dark"] .card.border-success {
    border-color: var(--color-success-border) !important;
}
[data-bs-theme="dark"] .card.border-warning {
    border-color: var(--color-warning-border) !important;
}
[data-bs-theme="dark"] .card.border-danger {
    border-color: var(--color-danger-border) !important;
}
[data-bs-theme="dark"] .card.border-info {
    border-color: var(--color-info-border) !important;
}