/* OneRisk Web UI - Shared Styles */

/* ========== CSS Custom Properties (Dark Mode - Default) ========== */
:root {
    --color-bg-primary: #090c10;
    --color-bg-secondary: #131820;
    --color-bg-tertiary: #1c2332;
    --color-bg-hover: #252d3e;
    --color-text-primary: #e5e7eb;
    --color-text-secondary: #b0b8c4;
    --color-text-muted: #8891a0;
    --color-border: #232d3f;
    --color-accent: #3b82f6;
    --color-accent-hover: #2563eb;
    --color-accent-soft: rgba(59, 130, 246, 0.12);
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* ========== Base / Body ========== */
html {
    /* Bump from browser default 16px so text-sm (0.875rem) and text-xs
       (0.75rem) are readable on high-DPI / large monitors.
       16px → 17px ≈ +6%, making text-sm ~15px and text-xs ~12.75px. */
    font-size: 17px;
}
body {
    font-family: var(--font-sans);
    background: linear-gradient(135deg, #070a0f 0%, #111720 50%, #090c10 100%);
    background-attachment: fixed;
}

/* ========== Alpine.js cloak ========== */
[x-cloak] { display: none !important; }

/* Tailwind CDN fallback — ensure .hidden works even if CDN is slow */
.hidden { display: none !important; }

/* ========== Info-tip tooltips ========== */
.info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.info-tip-body {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    padding: 8px 12px;
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 50;
    pointer-events: none;
    white-space: normal;
}
.info-tip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-border);
}
.info-tip-arrow::after {
    content: '';
    position: absolute;
    top: -7px;
    left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-bg-tertiary);
}

/* ========== OneRisk AI brand mark ========== */
.onerisk-ai {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.onerisk-ai-mark {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.35));
}
.onerisk-ai-text {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ========== Custom scrollbar ========== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }
/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* ========== htmx loading indicator ========== */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* ========== Global navigation progress bar ========== */
#nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), #60a5fa);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
#nav-progress.active {
    opacity: 1;
    animation: nav-progress-grow 25s cubic-bezier(0.1, 0.5, 0.2, 1) forwards;
}
#nav-progress.done {
    width: 100% !important;
    animation: none;
    transition: width 0.2s ease, opacity 0.4s ease 0.2s;
    opacity: 0;
}
@keyframes nav-progress-grow {
    0% { width: 0; }
    10% { width: 25%; }
    30% { width: 50%; }
    60% { width: 70%; }
    80% { width: 85%; }
    100% { width: 95%; }
}

/* ========== Table loading overlay ========== */
.table-loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(9, 12, 16, 0.6);
    z-index: 10;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}
html:not(.dark) .table-loading-overlay {
    background: rgba(240, 242, 245, 0.7);
}
.table-loading-overlay.active {
    display: flex;
}

/* ========== Sidebar glassmorphism (dark mode) ========== */
.sidebar-glass {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}

/* ========== Logo gradient text ========== */
.logo-text {
    background: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}
.logo-text svg {
    color: #6366f1;
    -webkit-text-fill-color: initial;
}

/* ========== Nav active state enhancement ========== */
aside nav a.bg-bg-tertiary {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.12) 0%, transparent 100%) !important;
    border-left: 2px solid #3b82f6;
    padding-left: calc(1rem - 2px);
    color: var(--color-text-primary) !important;
    font-weight: 500;
}

/* ========== Sidebar nav group dividers ========== */
.nav-group-divider {
    height: 1px;
    margin: 0.375rem 1rem;
    background: var(--color-border);
    opacity: 0.5;
}

/* ========== Typography refinements ========== */

/* Sidebar nav items — 15px, regular weight, slight tracking */
aside nav a {
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Table headers — 13px, semibold, uppercase, tracked, muted */
thead th {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

/* Table body cells — 14px base */
tbody td {
    font-size: 0.875rem;
}

/* Table row dividers — softer than solid border */
tbody.divide-border-color > tr {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Table row hover — subtle highlight, no shift */
tbody tr.hover\:bg-bg-hover:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    transition: background 0.15s ease;
}

/* Badge/pill typography — 12px, semibold, tracked */
span.text-xs.rounded,
span.text-xs.rounded-full {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Mono font for template IDs, timestamps in tables */
td .font-mono {
    font-family: var(--font-mono);
}

/* ========== JSON viewer styles ========== */
.json-key { color: #a78bfa; }
.json-string { color: #6ee7b7; }
.json-number { color: #93c5fd; }
.json-boolean { color: #c084fc; }
.json-null { color: #c084fc; }

/* ========== Collapsible details chevron ========== */
details[open] .details-chevron { transform: rotate(180deg); }

/* ========== Code/pre blocks ========== */
pre {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.9375rem;
    font-family: var(--font-mono);
}

/* ========== Borders between grouped tbody elements ========== */
/* When multiple <tbody> elements are used (e.g. for Alpine.js scoping),
   divide-y only works within each tbody. This rule adds row dividers
   between consecutive tbody groups so the table looks consistent. */
table > tbody + tbody > tr:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
html:not(.dark) table > tbody + tbody > tr:first-child {
    border-top: 1px solid var(--color-border);
}

/* ========== Sticky table headers ========== */
.table-sticky-wrapper {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: auto;
}
.table-sticky-wrapper thead {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 0 var(--color-border);
}

/* ========== Cost tooltip ========== */
.cost-tooltip {
    z-index: 99999;
    width: 280px;
    background: #1c2332;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
html:not(.dark) .cost-tooltip {
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ========== Confidence bar ========== */
.confidence-bar {
    width: 5rem;
    height: 0.375rem;
    border-radius: 9999px;
    overflow: hidden;
}
.confidence-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* ========== Copy button ========== */
.copy-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
}
.copy-group:hover .copy-btn,
.copy-btn:focus { opacity: 1; }


/* ========== Skeleton loader ========== */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}
.skeleton {
    background: var(--color-bg-tertiary);
    border-radius: 0.25rem;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ========== Breadcrumbs ========== */
.breadcrumb { font-size: 0.875rem; }
.breadcrumb a { transition: color 0.15s ease; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb svg { width: 0.875rem; height: 0.875rem; }

/* ========== Keyboard shortcut overlay ========== */
.kbd {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    line-height: 1.5;
}

/* ========== Gallery hover zoom ========== */
.gallery-thumb {
    transition: transform 0.2s ease;
}
.gallery-thumb:hover {
    transform: scale(1.03);
}

/* ========== Excluded domain row ========== */
.excluded-row { background: rgba(239, 68, 68, 0.05); }
.excluded-row td:first-child a { text-decoration: line-through; color: var(--color-text-muted); }

/* ========== Sort column active highlight ========== */
th.sort-active {
    background-color: rgba(59, 130, 246, 0.08);
}

/* ========== Card hover lift (dark mode) ========== */
/* NOTE: uses the individual `translate` property (not the `transform` shorthand)
   so that it stacks with Tailwind's `transform: translate(-50%,-50%)` centering
   used on modal dialogs, instead of overriding it. */
.bg-bg-secondary.rounded-lg {
    transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.bg-bg-secondary.rounded-lg:hover {
    translate: 0 -2px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    background-color: #1a2030 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ========== Badge/pill border enhancement ========== */
/* Semantic colors */
.text-danger.rounded,  .text-danger.rounded-full  { border: 1px solid rgba(239, 68, 68, 0.3); }
.text-warning.rounded, .text-warning.rounded-full { border: 1px solid rgba(245, 158, 11, 0.3); }
.text-success.rounded, .text-success.rounded-full { border: 1px solid rgba(16, 185, 129, 0.3); }
.text-info.rounded,    .text-info.rounded-full    { border: 1px solid rgba(59, 130, 246, 0.3); }
.text-accent.rounded,  .text-accent.rounded-full  { border: 1px solid rgba(59, 130, 246, 0.3); }
.text-conf-high.rounded,   .text-conf-high.rounded-full   { border: 1px solid rgba(16, 185, 129, 0.3); }
.text-conf-medium.rounded, .text-conf-medium.rounded-full { border: 1px solid rgba(245, 158, 11, 0.3); }
.text-conf-low.rounded,    .text-conf-low.rounded-full    { border: 1px solid rgba(239, 68, 68, 0.3); }
/* Raw Tailwind colors (IP signals, etc.) */
.text-blue-400.rounded   { border: 1px solid rgba(96, 165, 250, 0.3); }
.text-green-400.rounded  { border: 1px solid rgba(74, 222, 128, 0.3); }
.text-purple-400.rounded { border: 1px solid rgba(192, 132, 252, 0.3); }
.text-orange-400.rounded { border: 1px solid rgba(251, 146, 60, 0.3); }
/* Muted badges (e.g. "Out of Scope") */
.text-text-muted.rounded { border: 1px solid rgba(107, 114, 128, 0.25); }

/* ========== System names / URLs in tables — white mono ========== */
td a.font-mono {
    color: var(--color-text-primary) !important;
    font-weight: 500;
}
td a.font-mono:hover {
    color: var(--color-accent) !important;
}

/* ========== Scan status left border ========== */
.border-l-3 { border-left-width: 3px; }
.border-l-success { border-left-color: var(--color-success); }
.border-l-warning { border-left-color: var(--color-warning); }
.border-l-danger { border-left-color: var(--color-danger); }
.border-l-transparent { border-left-color: transparent; }

/* ========== Log viewer ========== */
[data-log-modal] {
    contain: layout paint;
    will-change: transform;
}
.log-scroll {
    overflow-y: scroll !important;
}
.log-search-match {
    background: rgba(255, 213, 79, 0.3);
    border-radius: 2px;
}
.log-search-current {
    background: rgba(255, 213, 79, 0.7);
    outline: 1px solid #ffd54f;
    border-radius: 2px;
}


/* ========== Filter Chip System ========== */
.filter-bar {
    position: relative;
    z-index: 30;
}
.filter-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    user-select: none;
}
.filter-chip:hover {
    border-color: rgba(59, 130, 246, 0.4);
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}
.filter-chip.active {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}
.filter-chip .chip-value {
    color: var(--color-text-primary);
    font-weight: 600;
}
.filter-chip.active .chip-value {
    color: #bfdbfe;
}
.filter-chip .chip-clear {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.2);
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: #93c5fd;
    margin-left: 2px;
    border: none;
    cursor: pointer;
    padding: 0;
}
.filter-chip .chip-clear:hover {
    background: rgba(59, 130, 246, 0.35);
}
.filter-chip.active .chip-clear { display: inline-flex; }

.chip-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}
.filter-chip:hover .chip-icon,
.filter-chip.active .chip-icon { opacity: 0.9; }

.chip-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.4;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.filter-chip:hover .chip-chevron { opacity: 0.7; }
.filter-chip.open .chip-chevron { transform: rotate(180deg); opacity: 0.7; }

/* Toggle chip (binary on/off) */
.filter-chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    user-select: none;
}
.filter-chip-toggle:hover {
    border-color: rgba(59, 130, 246, 0.4);
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}
.filter-chip-toggle.active {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

/* Popover dropdown */
.chip-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
    z-index: 1000;
    min-width: 200px;
    padding: 4px;
    display: none;
}
.chip-popover.show { display: block; }
.chip-popover-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    text-align: left;
    font-size: 14px;
    color: var(--color-text-secondary);
    border-radius: 5px;
    cursor: pointer;
    border: none;
    background: none;
    transition: all 0.1s;
}
.chip-popover-item:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
.chip-popover-item.selected {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.1);
}
.chip-popover-item .item-count {
    color: var(--color-text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Popover search input */
.chip-popover-search {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    color: var(--color-text-primary);
    font-size: 13px;
}
.chip-popover-search:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}
.chip-popover-search::placeholder { color: var(--color-text-muted); }

/* Vertical divider between filter groups */
.filter-divider {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Filter bar search input (with icon) */
.filter-search-wrapper {
    position: relative;
}
.filter-search-wrapper .filter-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.filter-search-input {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 6px;
    padding: 5px 12px 5px 32px;
    font-size: 14px;
    width: 220px;
    transition: border-color 0.15s;
}
.filter-search-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}
.filter-search-input::placeholder { color: var(--color-text-muted); }

/* ========== Focus ring — accessibility ========== */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-accent-soft);
    border-color: var(--color-accent);
}
/* Don't show focus ring on mouse clicks for non-keyboard elements */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* ========== Auth page background ========== */
body.auth-bg {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, 0.04) 0%, transparent 60%),
        linear-gradient(135deg, #070a0f 0%, #111720 50%, #090c10 100%);
    background-attachment: fixed;
}
html:not(.dark) body.auth-bg {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, 0.03) 0%, transparent 60%),
        var(--color-bg-primary);
}

/* ================================================================
   LIGHT MODE OVERRIDES
   ================================================================ */

html:not(.dark) {
    --color-bg-primary: #f0f2f5;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e8ecf0;
    --color-bg-hover: #dfe4ea;
    --color-text-primary: #1a1a2e;
    --color-text-secondary: #495057;
    --color-text-muted: #868e96;
    --color-border: #d1d9e0;
    --color-accent: #2563eb;
    --color-accent-hover: #1d4ed8;
    --color-accent-soft: rgba(37, 99, 235, 0.1);
    --color-success: #059669;
    --color-danger: #dc2626;
    --color-warning: #d97706;
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

html:not(.dark) body {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
}

/* Firefox scrollbar (light) */
html:not(.dark) * {
    scrollbar-color: #ced4da #f0f2f5;
}

/* Background overrides */
html:not(.dark) .bg-bg-primary { background: var(--color-bg-primary) !important; }
html:not(.dark) .bg-bg-secondary { background: var(--color-bg-secondary) !important; }
html:not(.dark) .bg-bg-tertiary { background: var(--color-bg-tertiary) !important; }
html:not(.dark) .bg-bg-hover { background: var(--color-bg-hover) !important; }
html:not(.dark) .hover\:bg-bg-hover:hover { background: var(--color-bg-hover) !important; }

/* Text overrides */
html:not(.dark) .text-text-primary { color: var(--color-text-primary) !important; }
html:not(.dark) .hover\:text-text-primary:hover { color: var(--color-text-primary) !important; }
html:not(.dark) .text-text-secondary { color: var(--color-text-secondary) !important; }
html:not(.dark) .text-text-muted { color: var(--color-text-muted) !important; }

/* Border overrides */
html:not(.dark) .border-border-color { border-color: var(--color-border) !important; }

/* Accent overrides */
html:not(.dark) .bg-accent { background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)) !important; }
html:not(.dark) .text-accent { color: var(--color-accent) !important; }
html:not(.dark) .hover\:bg-accent-hover:hover { background: var(--color-accent-hover) !important; }
html:not(.dark) .hover\:text-accent-hover:hover { color: var(--color-accent-hover) !important; }
html:not(.dark) .focus\:border-accent:focus { border-color: var(--color-accent) !important; }
html:not(.dark) .border-accent { border-color: var(--color-accent) !important; }

/* Scrollbar (light) */
html:not(.dark) ::-webkit-scrollbar-track { background: #f0f2f5; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #ced4da; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #adb5bd; }

/* Pre blocks (light) */
html:not(.dark) pre { background: #f8f9fa; color: #333; border-color: #d1d9e0; }

/* Skeleton (light) */
html:not(.dark) .skeleton { background: #dfe4ea; }

/* Kbd (light) */
html:not(.dark) .kbd { background: #e8ecf0; border-color: #ced4da; color: #333; }

/* Sidebar — clean with subtle shadow */
html:not(.dark) .sidebar-glass {
    background: #fafbfc !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: transform;
    border-right-color: var(--color-border) !important;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.04);
}

/* Theme toggle icons: moon visible in light, sun visible in dark */
.dark .theme-icon-moon { display: none; }
.dark .theme-icon-sun { display: block; }
html:not(.dark) .theme-icon-moon { display: block; }
html:not(.dark) .theme-icon-sun { display: none; }

/* Logo — solid purple in light mode (brand color, not UI accent) */
html:not(.dark) .logo-text {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #6366f1;
    background-clip: unset;
    color: #6366f1;
}
html:not(.dark) .logo-text svg {
    color: #6366f1;
}

html:not(.dark) aside nav a.bg-bg-tertiary {
    background: rgba(37, 99, 235, 0.08) !important;
    border-left-color: #2563eb;
    color: #2563eb !important;
}

/* Card — real shadow in light mode for clear card/bg separation.
   Cancel the dark-mode `translate` lift, NOT `transform` (which would break
   modal centering via Tailwind's transform: translate(-50%,-50%)). */
html:not(.dark) .bg-bg-secondary.rounded-lg {
    border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
html:not(.dark) .bg-bg-secondary.rounded-lg:hover {
    translate: none;
    background-color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--color-accent) !important;
}

/* Badge borders + tinted backgrounds in light mode */
html:not(.dark) .text-danger.rounded,  html:not(.dark) .text-danger.rounded-full  { border-color: rgba(220, 38, 38, 0.25); background: rgba(220, 38, 38, 0.06); }
html:not(.dark) .text-warning.rounded, html:not(.dark) .text-warning.rounded-full { border-color: rgba(217, 119, 6, 0.25); background: rgba(217, 119, 6, 0.06); }
html:not(.dark) .text-success.rounded, html:not(.dark) .text-success.rounded-full { border-color: rgba(5, 150, 105, 0.25); background: rgba(5, 150, 105, 0.06); }
html:not(.dark) .text-info.rounded,    html:not(.dark) .text-info.rounded-full    { border-color: rgba(37, 99, 235, 0.25); background: rgba(37, 99, 235, 0.06); }
html:not(.dark) .text-text-muted.rounded { border-color: rgba(134, 142, 150, 0.35); }

/* System names in tables — dark text in light mode */
html:not(.dark) td a.font-mono {
    color: var(--color-text-primary) !important;
}
html:not(.dark) td a.font-mono:hover {
    color: var(--color-accent) !important;
}

/* Table row dividers (light) */
html:not(.dark) tbody.divide-border-color > tr {
    border-color: var(--color-border) !important;
}

/* Table row hover (light) — no slide, subtle bg */
html:not(.dark) tbody tr.hover\:bg-bg-hover:hover {
    background: var(--color-bg-hover) !important;
    transform: none;
}

/* Excluded row (light) */
html:not(.dark) .excluded-row { background: rgba(239, 68, 68, 0.06); }

/* Sort column (light) */
html:not(.dark) th.sort-active { background-color: rgba(37, 99, 235, 0.06); }

/* JSON colors (light) */
html:not(.dark) .json-key { color: #2563eb; }
html:not(.dark) .json-string { color: #059669; }
html:not(.dark) .json-number { color: #2563eb; }
html:not(.dark) .json-boolean { color: #7c3aed; }
html:not(.dark) .json-null { color: #7c3aed; }

/* Border-l status colors */
html:not(.dark) .border-l-success { border-left-color: var(--color-success); }
html:not(.dark) .border-l-warning { border-left-color: var(--color-warning); }
html:not(.dark) .border-l-danger { border-left-color: var(--color-danger); }

/* Chip popover shadow (light) */
html:not(.dark) .chip-popover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}