/* =============================================================================
   Brand Palette & Bootstrap Bridge (Primary = #4C0EE5)
   - DRY setup: names in :root, values per theme (light/dark)
   - Semantic scales keep consistent grades (50..900)
   - NON-BREAKING: variable names unchanged
============================================================================= */

/* ============================================================================
   0) SHARED NAMES (tokens, no values) — keep names stable for both themes
============================================================================ */
:root {
    --font-base: "SpaceGrotesk", sans-serif; /* Base font family */
    --sidebar-width: 280px; /* Sidebar expanded width */
    --sidebar-collapsed-width: 68px; /* Sidebar collapsed width */

    /* Brand scale placeholders (values set per theme) */
    --brand-primary: 0;
    --brand-primary-50: 0;
    --brand-primary-100: 0;
    --brand-primary-200: 0;
    --brand-primary-300: 0;
    --brand-primary-400: 0;
    --brand-primary-500: 0;
    --brand-primary-600: 0;
    --brand-primary-700: 0;
    --brand-primary-800: 0;
    --brand-primary-900: 0;

    /* Neutral & surface system (values set per theme) */
    --brand-bg: 0; /* App/page background */
    --brand-fg: 0; /* Primary text color */
    --brand-muted: 0; /* Secondary text / helpers */
    --brand-border: 0; /* Divider/border color */
    --brand-elev: 0; /* Surface 1 (cards, sheets) */
    --brand-elev-2: 0; /* Surface 2 (headers, modals) */
    --brand-sidebar-bg: 0; /* Sidebar background */
    --brand-sidebar-fg: 0; /* Sidebar text/icons */
    --brand-card-bg: 0; /* Card background */

    /* Semantic statuses */
    --brand-success: 0;
    --brand-success-600: 0;
    --brand-warning: 0;
    --brand-warning-600: 0;
    --brand-danger: 0;
    --brand-danger-600: 0;
    --brand-info: 0;
    --brand-info-600: 0;

    /* Effects */
    --brand-shadow: 0;
    --brand-focus-ring: 0;

    /* Dashboard accents (module-specific) */
    --card-bg: 0;
    --keyword-accent: 0;
    --domain-accent: 0;
    --email-accent: 0;
    --username-accent: 0;
    --cases-accent: 0;
    --pending-cases-accent: 0;
    --progress-cases-accent: 0;
    --fixed-cases-accent: 0;
    --takedown-accent: 0;
    --pending-takedown-accent: 0;
    --progress-takedown-accent: 0;
    --fixed-takedown-accent: 0;

    /* Selects */
    --select-bg: 0;
    --select-border: 0;
    --select-fg: 0;
    --select-arrow-svg: 0;

    --app-bg: 0; /* Alias for page bg */
}

/* ============================================================================
   1) LIGHT THEME — glare-reduced, comfortable neutrals, crisp borders
   - Goal: lower eye strain vs. pure white while keeping clean look
============================================================================ */
:root,
html[data-bs-theme="light"] {
    /* -------- Primary (base = #4C0EE5) -------- */
    --brand-primary: #4C0EE5; /* Main brand hue */
    --brand-primary-50: #F5F3FF; /* Subtle backgrounds, chips */
    --brand-primary-100: #ECE7FF; /* Hover fills on subtle UI */
    --brand-primary-200: #DCD1FF; /* Selected states (quiet) */
    --brand-primary-300: #C2B0FF; /* Light badges */
    --brand-primary-400: #A488FF; /* Links on hover (alt) */
    --brand-primary-500: #7F5BFF; /* Medium emphasis */
    --brand-primary-600: #5E2FEF; /* Hover/active on brand */
    --brand-primary-700: #4C0EE5; /* Brand buttons/links */
    --brand-primary-800: #3A0CB4; /* Focus outlines alt */
    --brand-primary-900: #2A0885; /* High-contrast text on brand */

    /* -------- Neutrals (comfort tune) --------
       Tip: bg slightly warm-grey, surfaces white, borders crisp */
    --brand-bg: #F4F6F9; /* App/page bg (reduced glare) */
    --brand-fg: #0F172A; /* Primary text (≈ Slate-900) */
    --brand-muted: #667085; /* Secondary text/icons */
    --brand-border: rgba(2, 6, 23, 0.10); /* Hairline borders (1:0.10) */
    --brand-elev: #FFFFFF; /* Surface 1 (cards, tables) */
    --brand-elev-2: #FAFBFF; /* Surface 2 (headers, sheets) */

    /* -------- Semantics -------- */
    --brand-success: #22C55E; /* Success bg */
    --brand-success-600: #16A34A; /* Success text/hover */
    --brand-warning: #F59E0B; /* Warning bg */
    --brand-warning-600: #D97706; /* Warning text/hover */
    --brand-danger: #EF4444; /* Error bg */
    --brand-danger-600: #DC2626; /* Error text/hover */
    --brand-info: #0EA5E9; /* Info bg */
    --brand-info-600: #0284C7; /* Info text/hover */

    /* -------- Component specifics -------- */
    --brand-sidebar-bg: #FFFFFF; /* Sidebar surface */
    --brand-sidebar-fg: #475569; /* Sidebar icons/labels */
    --brand-card-bg: var(--brand-elev);

    /* -------- Effects -------- */
    --brand-shadow: 0 10px 28px rgba(2, 6, 23, .06); /* Soft elevation */
    --brand-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 28%, transparent);

    /* -------- Dashboard tokens -------- */
    --card-bg: hsla(220, 20%, 98%, 1); /* Panels behind widgets */

    --keyword-accent: #16A34A; /* "Keywords" chip/border */
    --domain-accent: #0369A1; /* Domain labels/links */
    --email-accent: #C2410C; /* Email markers/badges */
    --username-accent: #7E22CE; /* Username markers */

    --cases-accent: #475569; /* Neutral cases count */
    --pending-cases-accent: #CA8A04; /* Pending status */
    --progress-cases-accent: #0891B2; /* In-progress status */
    --fixed-cases-accent: #65A30D; /* Resolved status */

    --takedown-accent: #0F766E;
    --pending-takedown-accent: #B45309;
    --progress-takedown-accent: #1E40AF;
    --fixed-takedown-accent: #BE185D;

    /* -------- Selects (comfortable contrast) -------- */
    --select-bg: #FFFFFF; /* Field bg */
    --select-border: rgba(2, 6, 23, 0.18); /* Field border */
    --select-fg: #0F172A; /* Text color */
    --select-arrow-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23647085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

    /* -------- Bootstrap bridge (light) -------- */
    --bs-body-bg: var(--brand-bg);
    --bs-body-color: var(--brand-fg);
    --bs-border-color: var(--brand-border);
    --bs-card-bg: var(--brand-card-bg);
    --bs-card-border-color: var(--brand-border);
    --bs-sidebar-bg: var(--brand-sidebar-bg);
    --bs-sidebar-color: var(--brand-sidebar-fg);
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 76, 14, 229; /* #4C0EE5 */
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-600);
    --bs-success: var(--brand-success);
    --bs-warning: var(--brand-warning);
    --bs-danger: var(--brand-danger);
    --bs-info: var(--brand-info);
    --bs-muted: var(--brand-muted);

    --app-bg: var(--brand-bg);

    /* -------- Legacy/custom system tokens (kept for parity) -------- */
    --cs-bg: #F4F6F9; /* Matches page bg */
    --cs-text: #0B1324; /* High-contrast text */
    --cs-muted: #5B6474; /* Secondary text */
    --cs-border: rgba(2, 6, 23, .12); /* Dividers */
    --cs-card: rgba(255, 255, 255, .96); /* Translucent card */
    --cs-shadow: 0 18px 48px rgba(2, 6, 23, .10);
}

/* ============================================================================
   2) DARK THEME (kept; minor tuning already good for comfort)
============================================================================ */
html[data-bs-theme="dark"] {
    /* Primary scale (dark-friendly) */
    --brand-primary: #4C0EE5;
    --brand-primary-50: #2A2350;
    --brand-primary-100: #342A66;
    --brand-primary-200: #40327F;
    --brand-primary-300: #5239A6;
    --brand-primary-400: #6B46D9;
    --brand-primary-500: #825BFF;
    --brand-primary-600: #9C7DFF;
    --brand-primary-700: #B8A4FF;
    --brand-primary-800: #D6CBFF;
    --brand-primary-900: #EEE8FF;

    /* Neutrals (dark) */
    --brand-bg: #0F1319;
    --brand-fg: #E5E7EB;
    --brand-muted: #9CA3AF;
    --brand-border: rgba(255, 255, 255, .10);
    --brand-elev: #121721;
    --brand-elev-2: #151B24;

    /* Semantics (bright for dark) */
    --brand-success: #22C55E;
    --brand-success-600: #16A34A;
    --brand-warning: #FBBF24;
    --brand-warning-600: #F59E0B;
    --brand-danger: #F87171;
    --brand-danger-600: #EF4444;
    --brand-info: #38BDF8;
    --brand-info-600: #0EA5E9;

    /* Components */
    --brand-sidebar-bg: #0F1319;
    --brand-sidebar-fg: #CBD5E1;
    --brand-card-bg: var(--brand-elev);

    /* Effects */
    --brand-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    --brand-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 45%, transparent);

    /* Dashboard */
    --card-bg: hsla(224, 66%, 8%, 1);

    /* Accents (consistent across themes) */
    --keyword-accent: #22C55E;
    --domain-accent: #0284C7;
    --email-accent: #F97316;
    --username-accent: #A855F7;

    --cases-accent: #64748B;
    --pending-cases-accent: #EAB308;
    --progress-cases-accent: #06B6D4;
    --fixed-cases-accent: #84CC16;

    --takedown-accent: #0D9488;
    --pending-takedown-accent: #F59E0B;
    --progress-takedown-accent: #2563EB;
    --fixed-takedown-accent: #EC4899;

    /* Selects (dark) */
    --select-bg: var(--dark-surface-2, #2A2D3A);
    --select-border: var(--dark-border, rgba(255, 255, 255, .15));
    --select-fg: #FFFFFF;
    --select-arrow-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

    /* Bootstrap bridge (dark) */
    --bs-body-bg: var(--brand-bg);
    --bs-body-color: var(--brand-fg);
    --bs-border-color: var(--brand-border);
    --bs-card-bg: var(--brand-card-bg);
    --bs-card-border-color: var(--brand-border);
    --bs-sidebar-bg: var(--brand-sidebar-bg);
    --bs-sidebar-color: var(--brand-sidebar-fg);
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 76, 14, 229;
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-600);
    --bs-success: var(--brand-success);
    --bs-warning: var(--brand-warning);
    --bs-danger: var(--brand-danger);
    --bs-info: var(--brand-info);
    --bs-muted: var(--brand-muted);

    --app-bg: var(--brand-bg);

    /* Custom system tokens (kept) */
    --cs-primary: #4C0EE5;
    --cs-primary-2: #00E5FF;
    --cs-bg: #0B1224;
    --cs-text: #E6EEF8;
    --cs-muted: #9AA3B2;
    --cs-border: rgba(255, 255, 255, .12);
    --cs-card: rgba(16, 22, 35, .78);
    --cs-rad: 18px;
    --cs-shadow: 0 24px 64px rgba(0, 0, 0, .4);
    --success: #22C55E;
    --info: #0EA5E9;
}


/* =============================================================================
   Fonts — keep original sources and weights (no visual change)
============================================================================= */
@font-face {
    font-family: "SpaceGrotesk";
    src: url("../fonts/Space_Grotesk/SpaceGrotesk-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "SpaceGrotesk";
    src: url("../fonts/Space_Grotesk/SpaceGrotesk-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "SpaceGrotesk";
    src: url("../fonts/Space_Grotesk/SpaceGrotesk-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "SpaceGrotesk";
    src: url("../fonts/Space_Grotesk/SpaceGrotesk-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "SpaceGrotesk";
    src: url("../fonts/Space_Grotesk/SpaceGrotesk-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "IBMPlexSans_Condensed";
    src: url("../fonts/IBM_Plex_Sans/IBMPlexSans_Condensed-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "IBMPlexSans_Condensed";
    src: url("../fonts/IBM_Plex_Sans/IBMPlexSans_Condensed-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "IBMPlexSans_Condensed";
    src: url("../fonts/IBM_Plex_Sans/IBMPlexSans_Condensed-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "IBMPlexSans_Condensed";
    src: url("../fonts/IBM_Plex_Sans/IBMPlexSans_Condensed-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "JetBrainsMono";
    src: url("../fonts/IBM_Plex_Sans/JetBrainsMono-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

/* =============================================================================
   Base — typography, helpers, and form controls
============================================================================= */
body {
    background-color: var(--brand-bg);
    color: var(--brand-fg);
    overflow-x: hidden;
    overflow-y: auto !important;

    font-family: var(--font-base);
    font-weight: 400;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--brand-fg);
}

h1, h2, h3, .dashboard-title {
    font-weight: 600;
}

/* headings */
.number-val, code, .badge {
    font-weight: 500;
}

/* semibold accents */

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.btn {
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
}

.bg-light {
    background: var(--brand-elev) !important;
}

/* Buttons — keep exact palette */
.btn-primary {
    color: #fff;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-danger {
    color: var(--brand-danger);
    border-color: var(--brand-danger);
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: var(--brand-danger);
    border-color: var(--brand-danger);
}

.btn-outline-success {
    color: var(--brand-success);
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--brand-primary);
}

.btn-danger {
    color: #fff;
    background-color: var(--brand-danger);
    border-color: var(--brand-danger);
}

.btn-danger:hover {
    color: #fff;
    background-color: var(--brand-danger-600);
    border-color: var(--brand-danger-600);
}

.border {
    border-color: var(--brand-border) !important;
}

.text-light, .text-dark, .dark-swal-title, .text-white {
    color: var(--brand-fg) !important;
}

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

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

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

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

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

.header .theme-icon, .header .user-icon {
    color: var(--brand-fg);
}

.form-control {
    background: var(--brand-elev-2);
    border-color: var(--brand-border) !important;
    color: var(--brand-fg);
}

/* =============================================================================
   Header & Layout
============================================================================= */
.footer {
    background: var(--brand-elev-1) !important; /* keep original token name as used */
    border-color: var(--brand-border) !important;
}

.footer,
.dashboard-header,
body.sidebar-expanded .main-content {
    margin-left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important;
}

.dashboard-header {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--brand-elev-2);
    border-bottom: 1px solid var(--brand-border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

html[data-bs-theme='light'] .dashboard-header {
    background: #fff;
}

html[data-bs-theme='dark'] .main-content {
    background: #0E1016;
}

.header h1 {
    font-size: 32px;
    font-weight: 600;
    flex: 1;
    margin: 0;
}

.header .description-header {
    margin: 0;
    font-size: 14px;
    color: #9B9B9B;
}

.main-content {
    flex: 1;
    padding: 120px 20px 40px;
}

/* =============================================================================
   Dashboard Cards (base + dark gradient)
============================================================================= */
.dashboard-card {
    border-radius: 8px;
    min-height: 100px;
    width: 100%;
    padding: 16px;
    position: relative;
    background: #fff;
}

html[data-bs-theme=dark] .dashboard-card {
    background: linear-gradient(105deg, rgba(29, 57, 136, 0.15) 49.97%, rgba(29, 136, 130, 0.08) 99.87%);
}

.dashboard-card .card-value {
    position: relative;
}

/* Icon tone — base + dark inversion override later (kept order) */
.dashboard-card .icon-state {
    position: absolute;
    top: 16px;
    right: 16px;
    filter: grayscale(1) brightness(0);
}

html[data-bs-theme="dark"] .dashboard-card .icon-state {
    filter: grayscale(1) brightness(0) invert(1);
}

.dashboard-card .card-value .metric-label {
    color: var(--brand-muted);
    font-size: 14px;
}

.dashboard-card .card-value .number-val {
    color: var(--brand-fg);
    font-size: 32px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.dashboard-card .card-value .metric-subtitle {
    color: var(--brand-muted);
    font-size: 12px;
}

.card-value span {
    display: block;
}

.card-value .metric-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-value .metric-status .status-text {
    color: var(--brand-fg);
    font-size: 12px;
    margin-top: 2px;
}

.status-badge {
    display: flex;
    height: 22px;
    padding: 4px 6px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: #4E1E23;
    color: #D62923;
    font-size: 10px;
}

.metric-status .status-dot {
    width: 8px;
    height: 8px;
    background: #9CA3AF;
    border-radius: 50%;
}

/* =============================================================================
   Card Variants (color via currentColor + variant badges)
============================================================================= */
.keyword-card, .domain-card, .email-card, .username-card,
.cases-card, .pending-cases-card, .progress-cases-card, .fixed-cases-card,
.takedown-card, .pending-takedown-card, .progress-takedown-card, .fixed-takedown-card {
    border: 1px solid var(--brand-border) !important;
}

/* Assign currentColor per variant */
.keyword-card {
    color: var(--keyword-accent);
}

.domain-card {
    color: var(--domain-accent);
}

.email-card {
    color: var(--email-accent);
}

.username-card {
    color: var(--username-accent);
}

.cases-card {
    color: var(--cases-accent);
}

.pending-cases-card {
    color: var(--pending-cases-accent);
}

.progress-cases-card {
    color: var(--progress-cases-accent);
}

.fixed-cases-card {
    color: var(--fixed-cases-accent);
}

.takedown-card {
    color: var(--takedown-accent);
}

.pending-takedown-card {
    color: var(--pending-takedown-accent);
}

.progress-takedown-card {
    color: var(--progress-takedown-accent);
}

.fixed-takedown-card {
    color: var(--fixed-takedown-accent);
}

/* Variant-specific badge/dot fills */
.keyword-card .status-badge {
    background: color-mix(in srgb, var(--keyword-accent) 20%, transparent);
    color: var(--keyword-accent);
}

.keyword-card .status-dot {
    background: var(--keyword-accent);
}

.domain-card .status-badge {
    background: color-mix(in srgb, var(--domain-accent) 20%, transparent);
    color: var(--domain-accent);
}

.domain-card .status-dot {
    background: var(--domain-accent);
}

.email-card .status-badge {
    background: color-mix(in srgb, var(--email-accent) 20%, transparent);
    color: var(--email-accent);
}

.email-card .status-dot {
    background: var(--email-accent);
}

.username-card .status-badge {
    background: color-mix(in srgb, var(--username-accent) 20%, transparent);
    color: var(--username-accent);
}

.username-card .status-dot {
    background: var(--username-accent);
}

.cases-card .status-badge {
    background: color-mix(in srgb, var(--cases-accent) 20%, transparent);
    color: var(--cases-accent);
}

.cases-card .status-dot {
    background: var(--cases-accent);
}

.pending-cases-card .status-badge {
    background: color-mix(in srgb, var(--pending-cases-accent) 20%, transparent);
    color: var(--pending-cases-accent);
}

.pending-cases-card .status-dot {
    background: var(--pending-cases-accent);
}

.progress-cases-card .status-badge {
    background: color-mix(in srgb, var(--progress-cases-accent) 20%, transparent);
    color: var(--progress-cases-accent);
}

.progress-cases-card .status-dot {
    background: var(--progress-cases-accent);
}

.fixed-cases-card .status-badge {
    background: color-mix(in srgb, var(--fixed-cases-accent) 20%, transparent);
    color: var(--fixed-cases-accent);
}

.fixed-cases-card .status-dot {
    background: var(--fixed-cases-accent);
}

.takedown-card .status-badge {
    background: color-mix(in srgb, var(--takedown-accent) 20%, transparent);
    color: var(--takedown-accent);
}

.takedown-card .status-dot {
    background: var(--takedown-accent);
}

.pending-takedown-card .status-badge {
    background: color-mix(in srgb, var(--pending-takedown-accent) 20%, transparent);
    color: var(--pending-takedown-accent);
}

.pending-takedown-card .status-dot {
    background: var(--pending-takedown-accent);
}

.progress-takedown-card .status-badge {
    background: color-mix(in srgb, var(--progress-takedown-accent) 20%, transparent);
    color: var(--progress-takedown-accent);
}

.progress-takedown-card .status-dot {
    background: var(--progress-takedown-accent);
}

.fixed-takedown-card .status-badge {
    background: color-mix(in srgb, var(--fixed-takedown-accent) 20%, transparent);
    color: var(--fixed-takedown-accent);
}

.fixed-takedown-card .status-dot {
    background: var(--fixed-takedown-accent);
}

/* =============================================================================
   Sidebar — theme-aware, active/open states, collapsed tooltips
============================================================================= */
.sidebar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 100vh;
    width: 280px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    overflow: hidden;
    background: var(--brand-sidebar-bg);
    border-inline-end: 1px solid var(--brand-border);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    overflow: visible; /* needed for tooltip bubbles */
}

/* Expanded / collapsed toggles */
.sidebar.expanded {
    width: 280px;
    padding: 20px 0;
}

.sidebar.collapsed ul.sidebar-menu {
    padding: 0;
}

/* Brand/logo */
.sidebar .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--brand-border);
    position: relative;
}

.sidebar .logo img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: block;
}

.sidebar .logo .site-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    color: var(--brand-fg);
    text-decoration: none;
    white-space: nowrap;
}

/* Menu list */
.sidebar ul.sidebar-menu {
    padding: 0 10px;
    margin: 0;
    list-style: none;
}

.sidebar .sidebar-item {
    color: var(--brand-muted);
}

/* Tappable rows (links or submenu buttons) */
.sidebar .sidebar-item a,
.sidebar .sidebar-item button {
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    height: 44px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 12px;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
    position: relative;
}

.sidebar .submenu-item i {
    width: 18px;
    height: 18px;
    font-size: 16px;
    color: inherit;
}

/* Hover (non-active) */
.sidebar .sidebar-item a:hover,
.sidebar .sidebar-item button:hover {
    background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
    color: var(--brand-fg);
}

/* ACTIVE (top-level item) */
.sidebar .sidebar-item.active > a,
.sidebar .sidebar-item.active > button {
    background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
    color: var(--brand-fg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

/* Left active strip */
.submenu-item.active > a::before,
.sidebar .sidebar-item.active > a::before,
.sidebar .sidebar-item.active > button::before {
    content: "";
    position: absolute;
    inset-block: 6px 6px;
    inset-inline-start: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--brand-primary);
}

/*!* Icon contrast on light *!*/
/*html[data-bs-theme="light"] .sidebar .sidebar-item:hover i,*/
/*html[data-bs-theme="light"] .sidebar .sidebar-item.active i {*/
/*    color: var(--brand-fg) !important;*/
/*}*/

/* Submenu container (closed by default) */
.sidebar-item.has-submenu .submenu {
    max-height: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 10px;
    margin-top: 4px;
    transition: max-height .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
    opacity: .0;
    display: grid;
    gap: 3px;

}

/* Submenu open */
.sidebar-item.has-submenu.open > .submenu {
    padding: 10px;
    max-height: 800px;
    opacity: 1;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.sidebar-collapsed .sidebar-item.has-submenu.open > .submenu {
    padding: 2px;
}

/* Toggle arrow rotation */
.sidebar-item.has-submenu > .submenu-toggle .arrow-icon {
    margin-inline-start: auto;
    transition: transform .25s ease, color .25s ease;
    color: inherit;
}

.sidebar-item.has-submenu.open > .submenu-toggle .arrow-icon {
    transform: rotate(180deg);
    /*color: var(--brand-primary);*/
}


.submenu-item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--brand-muted);
    text-decoration: none;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Submenu hover/active */
.submenu-item > a:hover {
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    color: var(--brand-fg);
}

.submenu-item.active > a,
.submenu-item > a[aria-current="page"] {
    background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
    color: var(--brand-fg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

/* Layout shift via body flags */
body.sidebar-expanded .layout-header,
body.sidebar-expanded .layout-footer,
body.sidebar-expanded .main-content {
    margin-inline-start: var(--sidebar-width) !important;
    inline-size: calc(100% - var(--sidebar-width)) !important;
    width: calc(100% - var(--sidebar-width)) !important;
}

body.sidebar-collapsed .layout-header,
body.sidebar-collapsed .layout-footer,
body.sidebar-collapsed .main-content {
    margin-inline-start: var(--sidebar-collapsed-width) !important;
    inline-size: calc(100% - var(--sidebar-collapsed-width)) !important;
    width: calc(100% - var(--sidebar-collapsed-width)) !important;
}

/* Collapsed visuals */
.sidebar.collapsed .sidebar-item a,
.sidebar.collapsed .sidebar-item button {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
}

.sidebar.collapsed .sidebar-item .sidebar-text,
.sidebar.collapsed .sidebar-item .arrow-icon {
    display: none;
}

/* Collapsed + open emphasis */
.sidebar .has-submenu.open > .submenu-toggle {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 45%, transparent);
    background: color-mix(in srgb, var(--brand-primary) 15%, transparent);
    color: var(--brand-fg);
}

#sidebar .sidebar-text {
    font-weight: 500;
}

html[data-bs-theme=light] .sidebar .has-submenu.open > .submenu-toggle {
    /*background: #EAEDFB;*/
    color: #fff;
    /*box-shadow: none;*/
}

html[data-bs-theme=light] .sidebar {
    background: #0F1319;

    border-right: 1px solid #dee2e6
}

html[data-bs-theme=light] .sidebar .logo .site-name {
    color: #fff;
}

html[data-bs-theme=light]
.submenu-item.active > a::before, html[data-bs-theme=light] .sidebar .sidebar-item.active > a::before, html[data-bs-theme=light] .sidebar .sidebar-item.active > button::before {
    background: var(--brand-primary);
}

html[data-bs-theme=light] .sidebar .sidebar-item a:hover, html[data-bs-theme=light].sidebar .sidebar-item button:hover {
    color: #fff;
    /*background: #EAEDFB;*/
}

/*html[data-bs-theme=light] .sidebar-item.has-submenu.open > .submenu {*/
/*    background: #fff;*/
/*    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 6%, transparent);*/
/*}*/

/* Focus ring for keyboard nav */
.sidebar .sidebar-item a:focus-visible,
.sidebar .sidebar-item button:focus-visible,
.submenu-item > a:focus-visible {
    outline: none;
    box-shadow: var(--brand-focus-ring);
}

/*!* Stronger active backgrounds for light *!*/
/*html[data-bs-theme="light"] .sidebar .sidebar-item.active > a,*/
/*html[data-bs-theme="light"] .sidebar .sidebar-item.active > button,*/
/*html[data-bs-theme="light"] .submenu-item.active > a {*/
/*    background: color-mix(in srgb, var(--brand-primary) 22%, #ffffff);*/
/*}*/

/* === Tooltip via ::after (works for collapsed & submenu) === */
#sidebar [data-tip] {
    position: relative;
}

/* Base bubble (hidden by default) */
#sidebar [data-tip]::after {
    content: attr(data-tip);
    position: fixed;
    left: var(--tip-x, -9999px);
    top: var(--tip-y, -9999px);
    transform: translate(0, -50%);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease, transform .12s ease;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--brand-elev-2);
    color: var(--brand-fg);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow);
}

/* Show rules (collapsed + submenu) */
.sidebar.collapsed #sidebar [data-tip]:hover::after,
.sidebar.collapsed #sidebar [data-tip]:focus-visible::after,
#sidebar .submenu-item [data-tip]:hover::after,
#sidebar .submenu-item [data-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%) translateY(-2px);
}

/* Light theme bubble tweak */
html[data-bs-theme="light"] #sidebar [data-tip]::after {
    background: #EAEDFB;
}

/* Global show when body is collapsed (top-level + submenu) */
body.sidebar-collapsed #sidebar [data-tip]:hover::after,
body.sidebar-collapsed #sidebar [data-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%) translateY(-2px);
}

html[data-bs-theme="light"] .sidebar .sidebar-item.active > a, html[data-bs-theme="light"] sidebar .sidebar-item.active > button,
html[data-bs-theme="light"] .submenu-item.active > a, .submenu-item > a[aria-current="page"] {
    /*background: #EAEDFB;*/
    color: #fff;
    /*box-shadow: none;*/
}

html[data-bs-theme=light] .submenu-item.active > a, .submenu-item > a[aria-current="page"] i,
html[data-bs-theme=light] .submenu-item.active > a, .submenu-item > a[aria-current="page"] i {
    color: var(--brand-primary);
}

td .badge {
    color: #fff !important;
}

/* =============================================================================
   Selects / Filters — structure + responsiveness
============================================================================= */
.filter-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--brand-elev-2);
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    color: var(--brand-fg);
    font-size: 13px;
    padding: 12px 40px 12px 12px; /* space for arrow */
    min-width: 120px;
    outline: none;
    background-image: var(--select-arrow-svg);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

.filter-dropdown::-ms-expand {
    display: none;
}

.filter-dropdown:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
    border-color: rgba(99, 102, 241, .6);
}

.configurations > .bg-surface-1 {
    background: var(--brand-elev);
}

.filters-slab {
    background: var(--brand-elev-2);
    border: 1px solid var(--brand-border);
    padding: 12px;
    border-radius: 6px;
}

.filter-chip {
    background: var(--brand-elev-2);
    border: 1px solid var(--brand-border);
    color: var(--brand-fg);
    padding: 6px 12px;
    line-height: 1.2;
}

.filter-chip:hover {
    background: rgba(148, 163, 184, .12);
    border-color: var(--brand-border);
}

.dropdown-menu-filter .regex-filter .group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: .5rem;
}

.regex-filter .group-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

.regex-filter .group-title .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.group-head .count-badge {
    font-size: 11px;
    border-radius: 999px;
    padding: 2px 8px;
    border: 1px solid var(--brand-border);
    color: #60a5fa;
    background: color-mix(in srgb, #60a5fa 18%, transparent);
}

.group-head .count-badge.danger {
    color: var(--brand-danger);
    background: color-mix(in srgb, var(--brand-danger) 18%, transparent);
}


.dropdown-menu-filter .regex-filter .input-group-text {
    background: transparent;
    border-color: var(--brand-border);
    color: var(--bs-muted);
}

.dropdown-menu-filter .regex-filter .form-control {
    background: var(--brand-elev);
    color: var(--brand-fg);
    border-color: var(--brand-border);
}

.regex-filter .form-control::placeholder {
    color: var(--bs-muted);
    opacity: .8;
}

.regex-filter .regex-remove {
    border-color: var(--brand-border);
}

.filter-chip {
    position: relative;
}

.filter-chip .chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    margin-inline-start: .5rem;
    background: color-mix(in srgb, var(--bs-primary) 20%, transparent);
    background: linear-gradient(180deg, #5b6cff 0%, #3f51f3 100%);
    color: #fff;
    border: 1px solid #3f51f3;
}

.regex-actions {
    display: flex;
    gap: .5rem;
}

.group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.regex-list .form-control, .regex-list .form-select {
    height: 40px;
}

.regex-filter .btn-outline-primary {
    color: #60a5fa;
    border-color: #60a5fa;

}

.stat-value {
    color: var(--brand-fg);
}

.stat-label {
    color: var(--brand-muted);
}

.dropdown-menu-filter {
    min-width: 320px;
    max-width: min(90vw, 520px);
    background: var(--brand-elev);
    border: 1px solid var(--brand-border);
    border-radius: 6px;
}

.dropdown-scroll {
    max-height: min(60vh, 420px);
    overflow: auto;
    padding: 4px;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 6px 14px;
}

@media (max-width: 576px) {
    .menu-grid {
        grid-template-columns: 1fr;
    }
}

.menu-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.filters-footer {
    background: rgba(15, 19, 25, .95);
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .06);
    margin-top: 12px;
}

/* Quick actions chips */
.filters-actions {
    align-items: center;
    row-gap: 6px;
}

.filters-actions .btn.btn-sm {
    background: var(--brand-elev-2);
    color: var(--brand-fg);
    border: 1px solid var(--brand-border);
    padding: 6px 10px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .18s ease;
}

.filters-actions .btn.btn-sm:active {
    transform: translateY(0);
}

/* Outline-light (inactive) */
.filters-actions .btn-outline-light {
    --qa-bg: transparent;
    --qa-text: #cbd5e1;
    --qa-border: rgba(255, 255, 255, .18);
    background: var(--qa-bg);
    color: var(--qa-text);
    border-color: var(--qa-border);
}

.filters-actions .btn-outline-light:hover {
    background: rgba(148, 163, 184, .10);
    color: #ffffff;
    border-color: rgba(255, 255, 255, .28);
}

/* Primary (active) */
.filters-actions .btn-primary {
    background: linear-gradient(180deg, #5b6cff 0%, #3f51f3 100%);
    border: 1px solid rgba(99, 102, 241, .45);
    color: #fff;
    box-shadow: 0 4px 10px rgba(63, 81, 243, .20);
}

.filters-actions .btn-primary:hover {
    filter: brightness(1.04);
    box-shadow: 0 6px 14px rgba(63, 81, 243, .28);
}

.filters-actions .btn .bi {
    font-size: 14px;
    line-height: 1;
}

.filters-actions .btn .bi-check {
    opacity: .95;
}

.filters-actions .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .35);
}

.filters-actions .btn.disabled, .filters-actions .btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* Filter bar layout */
.filters-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 12px 16px;
}

.filters-left, .filters-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Wrapping chips row */
.filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.filters-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: max-content;
}

.search-container {
    position: relative;
    max-width: 320px;
    min-width: 220px;
}

.search-input {
    width: 100%;
    padding-left: 36px;
    transition: box-shadow .18s ease, border-color .18s ease;

}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .8;
}

/* inline spinner inside the search */
.search-spinner {
    position: absolute;
    top: 10px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
}

/* table skeleton (subtle shimmer) */
.table-skeleton {
    position: relative;
}

.table-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--bs-body-color) 6%, transparent) 45%,
    transparent 90%);
    animation: shimmer 1.2s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.skeleton-row {
    height: 42px;
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-card-bg) 96%, #000 4%);
}

/* Responsive tweaks */
@media (max-width: 992px) {
    .filters-bar {
        grid-template-columns: 1fr;
    }

    .filters-actions {
        justify-content: stretch;
    }

    .filters-actions .btn-group {
        width: 100%;
    }

    .filters-actions .btn-group .btn {
        flex: 1 1 0;
    }
}

@media (max-width: 576px) {
    .search-container {
        flex-basis: 100%;
        max-width: none;
    }

    .filters-row {
        gap: 8px;
    }

    .dropdown-menu-filter {
        max-width: 92vw;
    }
}

.btn-export-filters, .btn-clear-filters {
    padding: 6px 12px;
    line-height: 1.2;
    flex: 0 0 100px;
    font-size: 12px;
    cursor: pointer;
    transition: .2s;
    height: 40px;
}

/* =============================================================================
   Table (Phishing) + Viewport — scroll, sizing, statuses, actions
============================================================================= */
.table-viewport {
    position: relative;
    max-width: 100%;
    max-height: calc(100vh - 240px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.table-viewport::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-viewport::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .25);
    border-radius: 8px;
}

.table-viewport::-webkit-scrollbar-track {
    background: transparent;
}

.config-table, .phishing-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto !important;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    overflow: hidden;
}

.phishing-table col {
    width: auto !important;
}

@media (max-width: 992px) {
    .phishing-table {
        display: block;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.phishing-table thead th,
.phishing-table tbody td {
    white-space: nowrap;
    vertical-align: middle;
    width: auto !important;
    min-width: 0 !important;
}

/* Sensible min-widths per column */
.phishing-table thead th:nth-child(1), .phishing-table tbody td:nth-child(1) {
    min-width: 140px;
}

.phishing-table thead th:nth-child(2), .phishing-table tbody td:nth-child(2) {
    min-width: 120px;
}

.phishing-table thead th:nth-child(3), .phishing-table tbody td:nth-child(3) {
    min-width: 320px;
}

.phishing-table thead th:nth-child(4), .phishing-table tbody td:nth-child(4) {
    min-width: 160px;
}

.phishing-table thead th:nth-child(5), .phishing-table tbody td:nth-child(5) {
    min-width: 160px;
}

.phishing-table thead th:nth-child(6), .phishing-table tbody td:nth-child(6) {
    min-width: 140px;
}

.phishing-table thead th:nth-child(7), .phishing-table tbody td:nth-child(7) {
    min-width: 160px;
}

.phishing-table thead th:nth-child(8), .phishing-table tbody td:nth-child(8) {
    min-width: 140px;
}

.phishing-table thead th:nth-child(9), .phishing-table tbody td:nth-child(9) {
    min-width: 140px;
    text-align: start !important;
}

/* Sorting affordances */
.phishing-table thead th.sortable {
    cursor: pointer;
    user-select: none;
}

.phishing-table thead th .sort-icon {
    font-size: 12px;
    margin-inline-start: 6px;
}

.phishing-table thead th .sort-icon.inactive {
    opacity: .25;
}

.phishing-table thead th .sort-icon.active {
    opacity: .9;
}

/* Body cells */
.config-table tbody td,
.phishing-table tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #E8E8E8;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
}

/* Row hover */
.phishing-table tbody tr:hover {
    background: rgba(148, 163, 184, .08) !important;
}

/* Links */
.phishing-table .link-cell a {
    color: var(--brand-info) !important;
    text-decoration: underline;
    border-bottom: 1px dashed var(--brand-info);
}

.phishing-table .link-cell a:hover {
    color: var(--brand-info) !important;
    border-bottom: 1px solid var(--brand-info);
}

.link-cell a {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    text-decoration: none !important;
}

/* Status / tags */
.phishing-table .status-badge {
    background: color-mix(in srgb, var(--brand-info) 20%, transparent);
    background: linear-gradient(180deg, #5b6cff 0%, #3f51f3 100%);
    color: #fff;
    border: 1px solid #3f51f3;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


.phishing-table .tags-cell .badge {
    background: rgba(31, 111, 235, .16);
    border: 1px solid rgba(31, 111, 235, .28);
    color: #dbeafe;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 10px;
    line-height: 1;
    display: inline-block;
    margin: 1px 2px;
}

.phishing-table .green-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    margin-right: 6px;
}

/* Actions column alignment */
.action-buttons {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}

.phishing-table thead th:last-child,
.phishing-table tbody td:last-child {
    width: 1% !important;
    text-align: start;
}

.phishing-table thead th:first-child,
.phishing-table tbody td:first-child {
    width: 1% !important;
}

/* Header cell helpers */
.th-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.sort-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.sort-icons .sort-icon {
    font-size: 12px;
    cursor: pointer;
}

.found-cell {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 6px;
}

.search-bar-compact {
    max-width: 300px;
}

.search-bar-compact input {
    height: 40px;
}

.filters-actions .btn-clear-filters {
    position: unset;
}

label {
    font-size: 14px;
}

.found-value {
    background: #1b1f2a;
}

/* ============================================
   Offcanvas Alert (details drawer)
============================================ */
.offcanvas-alert {
    --bs-offcanvas-width: min(920px, 100vw);
    background: var(--dark-surface-2, #0F1319);
    color: #e5e7eb;
    border-left: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .offcanvas-alert {
        --bs-offcanvas-width: min(100vw, 100%);
    }
}

.offcanvas-surface-header {
    background: var(--brand-elev-2);
    border-bottom: 1px solid var(--brand-border);
}

.offcanvas-surface-body {
    padding-top: 1rem;
}

.offcanvas-surface-footer {
    padding: .75rem 1rem;
    background: var(--brand-elev-2);
    border-top: 1px solid var(--brand-border);
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(180%);
}

.intro-text {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.section-title {
    font-weight: 600;
    margin: .25rem 0 .5rem;
}

.detail-section {
    margin-bottom: 1rem;
}

.detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

@media (max-width: 576px) {
    .detail-list {
        grid-template-columns: 1fr;
    }
}

.detail-item {
    display: grid;
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    flex: 1;
}

.detail-label {
    color: #cbd5e1;
    font-size: .9rem;
    white-space: nowrap;
}

.detail-value {
    color: #ffffff;
    font-size: .95rem;
}

.break-all {
    word-break: break-all;
    overflow-wrap: anywhere;
}

.score-badge {
    border-radius: 16px;
    padding: 2px 10px;
    font-size: .75rem;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, .15);
}

/* ============================================
   DLM Cards (scoped recommendations/timeline)
============================================ */
.dlm-row {
    row-gap: 12px;
}

.dlm-card {
    --dlm-surface: var(--dark-surface-2, #10151d);
    --dlm-border: rgba(255, 255, 255, .10);
    --dlm-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    --dlm-text: #e6eaf2;
    background: var(--dlm-surface);
    border: 1px solid var(--dlm-border);
    border-radius: 12px;
    padding: 14px 14px 12px;
    color: var(--dlm-text);
    box-shadow: var(--dlm-shadow);
}

.dlm-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
}

.dlm-title-accent {
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: #var(--brand-primary);
    display: inline-block;
}

.dlm-title-warn .dlm-title-accent {
    background: #f59e0b;
}

.dlm-title-ok .dlm-title-accent {
    background: var(--brand-success);
}

.dlm-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.dlm-list li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #d7dde6;
}

.dlm-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 12px;
    color: var(--brand-primary);
}

.dlm-meta {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #cbd5e1;
}

.dlm-brand {
    color: var(--brand-primary-600);
}

.dlm-timeline #leakTimelineChart {
    width: 100%;
    min-height: 100px;
}

/* Light versions */
html[data-bs-theme='light'] .offcanvas-alert {
    background: #ffffff;
    color: #0f172a;
    border-left: 1px solid rgba(2, 6, 23, .08);
}


html[data-bs-theme='light'] .detail-item {
    border-color: rgba(2, 6, 23, .08);
    background: #ffffff;
}

html[data-bs-theme='light'] .detail-label {
    color: #475569;
}

html[data-bs-theme='light'] .detail-value {
    color: #0f172a;
}

html[data-bs-theme='light'] .dlm-card {
    --dlm-surface: #ffffff;
    --dlm-border: rgba(2, 6, 23, .10);
    --dlm-shadow: 0 6px 16px rgba(2, 6, 23, .08);
    --dlm-text: #0f172a;
}

html[data-bs-theme='light'] .dlm-list li {
    color: #334155;
}

html[data-bs-theme='light'] .dlm-list li::before {
    color: #2563eb;
}

html[data-bs-theme='light'] .dlm-meta {
    color: #475569;
}

html[data-bs-theme='light'] .dlm-brand {
    color: #1d4ed8;
}

/* Shared */
.intro-cybersee.introjs-tooltip {
    border-radius: 12px;
    max-width: min(420px, 90vw);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    border: 1px solid var(--intro-border);
    background: var(--intro-bg);
    color: var(--intro-fg);
}

.intro-cybersee .introjs-tooltip-header {
    border-bottom: 1px solid var(--intro-border);
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}

.intro-cybersee .introjs-tooltiptext {
    font-size: .95rem;
    line-height: 1.55;
}

.intro-cybersee .introjs-bullets ul li a {
    background: var(--intro-bullet-off);
}

.intro-cybersee .introjs-bullets ul li a.active {
    background: var(--intro-bullet-on);
}

.intro-cybersee .introjs-skipbutton,
.intro-cybersee .introjs-prevbutton,
.intro-cybersee .introjs-nextbutton,
.intro-cybersee .introjs-donebutton {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--intro-btn-border);
    background: var(--intro-btn-bg);
    color: var(--intro-btn-fg);
    padding: .35rem .7rem;
    width: max-content;
    height: 35px;
    font-size: .8rem;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: all .15s ease-in-out;
    top: 5px;
    right: 5px;
}

.intro-cybersee .introjs-nextbutton,
.intro-cybersee .introjs-donebutton {
    border-color: var(--intro-primary);
    background: var(--intro-primary);
    color: #fff;
}

.intro-highlight {
    box-shadow: 0 0 0 2px var(--intro-primary), 0 0 0 8px rgba(0, 0, 0, .25) !important;
}

/* Dark */
html[data-bs-theme='dark'] .intro-cybersee.introjs-tooltip {
    --intro-bg: #0F1319;
    --intro-fg: #E5E7EB;
    --intro-border: rgba(255, 255, 255, .08);
    --intro-bullet-off: rgba(148, 163, 184, .25);
    --intro-bullet-on: #8fb4ff;
    --intro-btn-bg: #12151d;
    --intro-btn-fg: #E5E7EB;
    --intro-btn-border: rgba(255, 255, 255, .12);
    --intro-primary: #5562f6;
}

html[data-bs-theme='dark'] .introjs-helperLayer {
    background: rgba(85, 98, 246, 0.12);
}

/* Light */
html[data-bs-theme='light'] .intro-cybersee.introjs-tooltip {
    --intro-bg: #ffffff;
    --intro-fg: #0f172a;
    --intro-border: rgba(2, 6, 23, .10);
    --intro-bullet-off: rgba(2, 6, 23, .15);
    --intro-bullet-on: #1d4ed8;
    --intro-btn-bg: #f8fafc;
    --intro-btn-fg: #0f172a;
    --intro-btn-border: rgba(2, 6, 23, .12);
    --intro-primary: #2563eb;
}

html[data-bs-theme='light'] .introjs-helperLayer {
    background: rgba(37, 99, 235, 0.10);
}

.toggle-switch-sidebar {
    flex: 0 0 42px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--brand-border);
    background: transparent;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: background-color .15s ease, transform .12s ease, border-color .15s ease, box-shadow .2s ease;
}

.toggle-switch-sidebar i {
    color: var(--brand-fg);
}

.toggle-switch-sidebar:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
}

.toggle-switch-sidebar:active {
    transform: translateY(0);
}

.toggle-switch-sidebar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .35);
}

.toggle-switch i {
    font-size: 18px;
    line-height: 1;
}


@media (max-width: 768px) {
    .footer, .dashboard-header, body.sidebar-expanded .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .left-header {
        display: none !important;
    }
}

/* ===== Actions Bar (UI فقط) ===== */
.actions-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-icon {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--brand-border);
    background: var(--brand-elev-2);
    color: var(--brand-fg);
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.btn-icon .pill-counter {
    position: absolute;
    top: -7px;
    right: -7px;
}

.btn-icon:disabled,
.btn-icon.disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

.btn-icon i {
    font-size: 16px;
    line-height: 1;
}

.actions-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, .25);
    margin-inline: .25rem;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
    color: #fff;
}

@media (max-width: 640px) {
    .actions-bar {
        gap: .25rem;
    }
}

.form-control,
.form-select {
    height: 45px;
}

/* Compact button size for header actions */
.btn-xxs {
    font-size: .75rem;
    --bs-btn-padding-y: .2rem;
    --bs-btn-padding-x: .45rem;
    --bs-btn-font-size: .75rem;
    line-height: 1;
    gap: .25rem;
}


/* Input with calendar icon */
.date-input-container {
    position: relative;
}

.date-input-container .calendar-icon {
    opacity: .7;
    color: var(--brand-fg);

}

/* Section spacing */
.filter-block + .filter-block {
    padding-top: .5rem;
    border-top: 1px dashed rgba(148, 163, 184, .18);
    margin-bottom: 16px;
}

.filter-block + .filter-block:last-child {
    margin-bottom: 0;
}

/* Off-canvas-like modal from the right */
.modals-offcanvas-right .modal {
    --bs-modal-margin: 0;
}

.modals-offcanvas-right .modal .modal-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    height: 100%;
    width: 55vw; /* adjust as needed */
    max-width: 1120px;
    transform: translateX(100%);
    transition: transform .3s ease-in-out;
    pointer-events: none; /* KEEP Bootstrap default so backdrop clicks work */
    z-index: 1055;
}

@media (max-width: 992px) {
    .modals-offcanvas-right .modal .modal-dialog {
        width: 92vw;
    }
}

/* open state */
.modals-offcanvas-right .modal.show .modal-dialog,
.modals-offcanvas-right .modal.fade.show .modal-dialog {
    transform: translateX(0);
}

/* keep default pointer behavior: content receives clicks */
.modals-offcanvas-right .modal .modal-content {
    height: 100%;
    border-radius: 0;
    pointer-events: auto;
    overflow: auto;
    background: var(--brand-sidebar-bg);
    border-color: var(--brand-border);

}

/* ------------------------------
   Scoped theme for this modal
   Uses your design tokens:
   --brand-elev/bg/fg/border/primary/shadow ...
------------------------------ */
#export_phishing .modal-content {
    background: var(--brand-elev);
    color: var(--brand-fg);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow);
    border-radius: 14px;
    overflow: hidden;
}

#export_phishing .modal-header {
    background: var(--brand-elev-2);
    border-bottom: 1px solid var(--brand-border);
    padding: 14px 18px;
}

#export_phishing .modal-title {
    font-weight: 600;
    font-size: 18px;
    color: var(--brand-fg);
}

#export_phishing .btn-close {
    filter: invert(0); /* stays visible on light */
}

html[data-bs-theme="dark"] #export_phishing .btn-close {
    filter: invert(1); /* visible on dark */
}

#export_phishing .modal-body {
    background: var(--brand-elev);
    padding: 16px 18px;
}

#export_phishing .helper-text {
    color: var(--brand-muted);
    font-size: 13px;
    margin: 6px 0 14px;
}

/* Grid & cards for options */
#export_phishing .option-card {
    border: 1px solid var(--brand-border);
    background: var(--brand-elev-2);
    border-radius: 10px;
    padding: 10px 12px;
    transition: background .2s ease, border-color .2s ease;
}

#export_phishing .option-card:hover {
    background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--brand-border));
}

/* Form controls aligned with brand */
#export_phishing .form-check-input {
    /* Modern browsers support accent-color */
    accent-color: var(--brand-primary);
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
}

#export_phishing .form-check-label {
    color: var(--brand-fg);
    font-size: 14px;
    margin-inline-start: 8px;
    cursor: pointer;
    user-select: none;
}

/* Select-All block */
#export_phishing .select-all {
    border: 1px dashed var(--brand-border);
    background: var(--brand-elev-2);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

/* Footer */
#export_phishing .modal-footer {
    border-top: 1px solid var(--brand-border);
    background: var(--brand-elev-2);
    padding: 12px 16px;
    gap: 8px;
}

/* Brand buttons (non-breaking: just styling) */
#export_phishing .btn-brand-secondary {
    /* Outline look based on tokens */
    background: transparent;
    color: var(--brand-fg);
    border: 1px solid var(--brand-border);
}

#export_phishing .btn-brand-secondary:hover {
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--brand-border));
}

#export_phishing .btn-brand-primary {
    background: var(--brand-primary);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 65%, black);
    color: #fff;
}

#export_phishing .btn-brand-primary:hover {
    background: var(--brand-primary-600);
    border-color: color-mix(in srgb, var(--brand-primary-600) 70%, black);
}

/* Small, consistent button height with your base scale */
#export_phishing .btn {
    height: 38px;
    padding: 6px 14px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Base loading dots animation */
.loading-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.loading-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 0 2px;
    background-color: var(--brand-primary);
    animation: dotPulse 1.2s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: .4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.loading-text {
    color: var(--brand-fg);
    font-weight: 500;
    letter-spacing: .5px;
}

/* Disabled look while loading */
.btn.is-loading {
    opacity: 0.85;
    cursor: wait;
    transition: all .25s ease;
}

.config-table textarea.form-control {
    height: 75px !important;
}

/* ===== Tabs: disable look & loading overlay ===== */
.nav-tabs .nav-link[disabled] {
    opacity: .5;
    pointer-events: none; /* Prevent clicks */
    cursor: not-allowed;
}

.tab-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .25); /* Dim the content */
    backdrop-filter: blur(1px);
    border-radius: .5rem;
    z-index: 10;
    width: 100%;
    height: 100%;
    transition: opacity .15s ease, visibility .15s ease;
}

/* Optional: smoother fades cause overlap; this tightens it */
.tab-pane.fade:not(.show) {
    display: none; /* Avoid overlapped fading panes */
}

.tab-loading-overlay .spinner-border {
    position: absolute;
    left: calc(50% - 16px);
    top: calc(50% - 16px);
}


/* Tabs polish */
.nav-tabs {
    border-bottom: 1px solid var(--brand-border);
    gap: 6px;
    margin-bottom: 16px;
}

.nav-tabs .nav-link {
    color: var(--brand-fg);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 10px;
    font-size: 13px;
    background: var(--brand-elev-2);
}


.nav-tabs .nav-link:hover {
    color: var(--brand-primary-600);
}

.nav-tabs .nav-link.active {
    color: var(--brand-primary-600);
    border-bottom-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 15%, transparent);
    border-radius: 6px 6px 0 0;
}

/* ============================================================
       Permissions (Accordion Layout) — Pro UI
       No logic/class name changes to Livewire bindings
       ============================================================ */

/* Wrapper rhythm */
.permissions-wrap {
    display: grid;
    gap: 16px;
}

/* Master toggle block */
.perm-master {
    background: var(--surface-1, #0F1319);
    color: var(--text-1, #E5E7EB);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Accordion base */
.perm-accordion {
    display: grid;
    gap: 12px;
}

/* Card */
.perm-card {
    background: var(--surface-1, #0F1319);
    color: var(--text-1, #E5E7EB);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(2, 6, 23, .35);
}

/* Header */
.perm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, rgba(148, 163, 184, .10), rgba(148, 163, 184, .05));
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}

.perm-card-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.perm-module {
    font-weight: 700;
    letter-spacing: .2px;
}

.perm-slug {
    font-size: 12px;
    opacity: .7;
}

/* Right header actions */
.perm-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.perm-count {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(110, 142, 234, .14);
    color: #c7d2fe;
    border: 1px solid rgba(110, 142, 234, .28);
    white-space: nowrap;
}

.perm-toggle-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .24);
    background: rgba(148, 163, 184, .08);
    transition: transform .2s ease;
}

.perm-card-header.collapsed .perm-toggle-icon {
    transform: rotate(-90deg);
}

/* Body */
.perm-card-body {
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(148, 163, 184, .16);
}

/* Row: “module master” + quick actions */
.perm-row {
    display: grid;
    gap: 12px;
}

@media (min-width: 768px) {
    .perm-row {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

/* Module master toggle */
.perm-module-master {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.perm-module-master .form-check-input {
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

/* Quick links (Select/Deselect/Advanced) */
.perm-quick {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.perm-link {
    font-size: 12px;
    color: #93c5fd;
    text-decoration: none;
}

.perm-link:hover {
    text-decoration: underline;
}

/* Actions grid (checkbox chips) */
.perm-actions {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}

@media (min-width: 576px) {
    .perm-actions {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (min-width: 992px) {
    .perm-actions {
        grid-template-columns: repeat(4, minmax(160px, 1fr));
    }
}

/* Chip */
.perm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(148, 163, 184, .08);
    border: 1px solid rgba(148, 163, 184, .22);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    height: 44px;
}

.perm-chip:hover {
    transform: translateY(-1px);
    background: rgba(148, 163, 184, .12);
    border-color: rgba(148, 163, 184, .28);
}

.perm-chip .form-check-input {
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

.perm-chip .label {
    font-size: 14px;
    letter-spacing: .1px;
}

/* Unsupported action visual */
.perm-chip--disabled {
    opacity: .55;
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .22);
    color: #fecaca;
}

/* Save button */
.perm-save {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.perm-save .btn {
    height: 44px;
    min-width: 160px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(34, 197, 94, .18);
}

/* Title field polish */
.perm-title-block {
    max-width: 100%;
    background: var(--surface-1, #0F1319);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    padding: 14px 16px;
}

.perm-title-block label {
    font-size: 13px;
    color: #cbd5e1;
}

.perm-title-block .form-control {
    height: 44px;
    border-radius: 10px;
    background: #11151d;
    color: #E5E7EB;
    border: 1px solid rgba(148, 163, 184, .22);
}

.perm-title-block .form-control:focus {
    border-color: #6E8EEA;
    box-shadow: 0 0 0 3px rgba(110, 142, 234, .18);
}

/* Light mode */
html[data-bs-theme='light'] .perm-card,
html[data-bs-theme='light'] .perm-master,
html[data-bs-theme='light'] .perm-title-block {
    background: #fff;
    color: #0f172a;
    border-color: rgba(2, 6, 23, .12);
}

html[data-bs-theme='light'] .perm-card-header {
    background: #f8fafc;
}

/* Indeterminate master checkbox look (optional) */
.form-check-input.indeterminate {
    position: relative;
}

.form-check-input.indeterminate::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 60%;
    height: 2px;
    transform: translate(-50%, -50%);
    background: currentColor;
    border-radius: 2px;
}

/* ---------- Color chip ---------- */
.color-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 34px;
    padding: 0 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .22);
    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .14);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.color-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* ---------- Toolbar (Add + Search) ---------- */
.page-toolbar {
    display: grid;
    gap: 10px 12px;
    align-items: center;
    grid-template-columns: 1fr auto; /* left grows, right is search */
    margin: 6px 0 14px 0;
}

.page-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 40px;
    border-radius: 10px;
    font-weight: 600;
}

.search-dark {
    width: min(360px, 100%);
    background: var(--tp-surface-2);
    border: 1px solid var(--tp-border);
    color: var(--tp-text);
    border-radius: 10px;
    height: 40px;
}

.search-dark::placeholder {
    color: color-mix(in srgb, var(--tp-text) 45%, transparent);
}


/* First col width */
.config-table td:first-child, .config-table th:first-child {
    width: 64px;
}


/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 2.25rem 1rem;
    color: var(--tp-text-dim);
}

.empty-state i {
    font-size: 2rem;
    opacity: .9;
}

/* ---------- Page shell ---------- */
main.main-content .page-wrap {
    background: var(--tp-surface-1);
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    box-shadow: var(--tp-shadow);
    padding: 14px;
}

/* ---------- Title ---------- */
.page-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--tp-text);
    margin: 0 0 .75rem 0;
}

.page-title i {
    opacity: .9;
}


/* --------------------------------------------
   Status badge (base)
   - On light background, use subtle tinted fill
   - Borderless pill to keep it airy
-------------------------------------------- */


/* ============================================
   Card Variants (color via currentColor)
   - Keep your existing variant classes; we only
     adapt how they render on light backgrounds.
============================================ */
html[data-bs-theme="light"] .keyword-card,
html[data-bs-theme="light"] .domain-card,
html[data-bs-theme="light"] .email-card,
html[data-bs-theme="light"] .username-card,
html[data-bs-theme="light"] .cases-card,
html[data-bs-theme="light"] .pending-cases-card,
html[data-bs-theme="light"] .progress-cases-card,
html[data-bs-theme="light"] .fixed-cases-card,
html[data-bs-theme="light"] .takedown-card,
html[data-bs-theme="light"] .pending-takedown-card,
html[data-bs-theme="light"] .progress-takedown-card,
html[data-bs-theme="light"] .fixed-takedown-card {
    /* Use a thinner border on light to avoid heavy frames */
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}

/* Assign currentColor per variant (inherits your tokens) */
html[data-bs-theme="light"] .keyword-card {
    color: var(--keyword-accent);
}

html[data-bs-theme="light"] .domain-card {
    color: var(--domain-accent);
}

html[data-bs-theme="light"] .email-card {
    color: var(--email-accent);
}

html[data-bs-theme="light"] .username-card {
    color: var(--username-accent);
}

html[data-bs-theme="light"] .cases-card {
    color: var(--cases-accent);
}

html[data-bs-theme="light"] .pending-cases-card {
    color: var(--pending-cases-accent);
}

html[data-bs-theme="light"] .progress-cases-card {
    color: var(--progress-cases-accent);
}

html[data-bs-theme="light"] .fixed-cases-card {
    color: var(--fixed-cases-accent);
}

html[data-bs-theme="light"] .takedown-card {
    color: var(--takedown-accent);
}

html[data-bs-theme="light"] .pending-takedown-card {
    color: var(--pending-takedown-accent);
}

html[data-bs-theme="light"] .progress-takedown-card {
    color: var(--progress-takedown-accent);
}

html[data-bs-theme="light"] .fixed-takedown-card {
    color: var(--fixed-takedown-accent);
}

/* --------------------------------------------
   Badge / dot backgrounds per variant (Light)
   - Softer tints for light UI
-------------------------------------------- */
html[data-bs-theme="light"] .keyword-card .status-badge {
    background: color-mix(in srgb, var(--keyword-accent) 14%, #ffffff);
    color: var(--keyword-accent);
    border-color: color-mix(in srgb, var(--keyword-accent) 35%, transparent);
}

html[data-bs-theme="light"] .keyword-card .status-dot {
    background: var(--keyword-accent);
}

html[data-bs-theme="light"] .domain-card .status-badge {
    background: color-mix(in srgb, var(--domain-accent) 14%, #ffffff);
    color: var(--domain-accent);
    border-color: color-mix(in srgb, var(--domain-accent) 35%, transparent);
}

html[data-bs-theme="light"] .domain-card .status-dot {
    background: var(--domain-accent);
}

html[data-bs-theme="light"] .email-card .status-badge {
    background: color-mix(in srgb, var(--email-accent) 14%, #ffffff);
    color: var(--email-accent);
    border-color: color-mix(in srgb, var(--email-accent) 35%, transparent);
}

html[data-bs-theme="light"] .email-card .status-dot {
    background: var(--email-accent);
}

html[data-bs-theme="light"] .username-card .status-badge {
    background: color-mix(in srgb, var(--username-accent) 14%, #ffffff);
    color: var(--username-accent);
    border-color: color-mix(in srgb, var(--username-accent) 35%, transparent);
}

html[data-bs-theme="light"] .username-card .status-dot {
    background: var(--username-accent);
}

html[data-bs-theme="light"] .cases-card .status-badge {
    background: color-mix(in srgb, var(--cases-accent) 14%, #ffffff);
    color: var(--cases-accent);
    border-color: color-mix(in srgb, var(--cases-accent) 35%, transparent);
}

html[data-bs-theme="light"] .cases-card .status-dot {
    background: var(--cases-accent);
}

html[data-bs-theme="light"] .pending-cases-card .status-badge {
    background: color-mix(in srgb, var(--pending-cases-accent) 14%, #ffffff);
    color: var(--pending-cases-accent);
    border-color: color-mix(in srgb, var(--pending-cases-accent) 35%, transparent);
}

html[data-bs-theme="light"] .pending-cases-card .status-dot {
    background: var(--pending-cases-accent);
}

html[data-bs-theme="light"] .progress-cases-card .status-badge {
    background: color-mix(in srgb, var(--progress-cases-accent) 14%, #ffffff);
    color: var(--progress-cases-accent);
    border-color: color-mix(in srgb, var(--progress-cases-accent) 35%, transparent);
}

html[data-bs-theme="light"] .progress-cases-card .status-dot {
    background: var(--progress-cases-accent);
}

html[data-bs-theme="light"] .fixed-cases-card .status-badge {
    background: color-mix(in srgb, var(--fixed-cases-accent) 14%, #ffffff);
    color: var(--fixed-cases-accent);
    border-color: color-mix(in srgb, var(--fixed-cases-accent) 35%, transparent);
}

html[data-bs-theme="light"] .fixed-cases-card .status-dot {
    background: var(--fixed-cases-accent);
}

html[data-bs-theme="light"] .takedown-card .status-badge {
    background: color-mix(in srgb, var(--takedown-accent) 14%, #ffffff);
    color: var(--takedown-accent);
    border-color: color-mix(in srgb, var(--takedown-accent) 35%, transparent);
}

html[data-bs-theme="light"] .takedown-card .status-dot {
    background: var(--takedown-accent);
}

html[data-bs-theme="light"] .pending-takedown-card .status-badge {
    background: color-mix(in srgb, var(--pending-takedown-accent) 14%, #ffffff);
    color: var(--pending-takedown-accent);
    border-color: color-mix(in srgb, var(--pending-takedown-accent) 35%, transparent);
}

html[data-bs-theme="light"] .pending-takedown-card .status-dot {
    background: var(--pending-takedown-accent);
}

html[data-bs-theme="light"] .progress-takedown-card .status-badge {
    background: color-mix(in srgb, var(--progress-takedown-accent) 14%, #ffffff);
    color: var(--progress-takedown-accent);
    border-color: color-mix(in srgb, var(--progress-takedown-accent) 35%, transparent);
}

html[data-bs-theme="light"] .progress-takedown-card .status-dot {
    background: var(--progress-takedown-accent);
}

html[data-bs-theme="light"] .fixed-takedown-card .status-badge {
    background: color-mix(in srgb, var(--fixed-takedown-accent) 14%, #ffffff);
    color: var(--fixed-takedown-accent);
    border-color: color-mix(in srgb, var(--fixed-takedown-accent) 35%, transparent);
}

html[data-bs-theme="light"] .fixed-takedown-card .status-dot {
    background: var(--fixed-takedown-accent);
}


body.sidebar-collapsed #sidebar
.submenu-item {
    padding: 0;
}


.dropdown-menu-filter .filter-block .btn.btn-outline-danger {
    height: 30px;
}

#statuses_list .modal-dialog,
#data_sources_list .modal-dialog,
#types_list .modal-dialog,
#socialMediaFormModal .modal-dialog,
#apps_monitoring .modal-dialog,
#users_monitoring_show .modal-dialog,
#threatOffcanvas .modal-dialog,
#show_bins .modal-dialog {
    width: 40vw;
}

#roleDelete .modal-dialog,
#delete .modal-dialog,
#active .modal-dialog,
#deleteKeyword .modal-dialog,
#formKeyword .modal-dialog,
#takeDown .modal-dialog {
    width: 26vw;
}

#CECheck .modal-dialog,
#socialMediaDeleteModal .modal-dialog {
    width: 35vw;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-68px);

    }

    .sidebar.expanded {
        transform: translateX(0);

    }

    .sidebar.expanded {
        top: 80px;
    }

    .sidebar.collapsed ul.sidebar-menu {
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    body.sidebar-expanded .layout-header, body.sidebar-expanded .layout-footer, body.sidebar-expanded .main-content,
    body.sidebar-collapsed .layout-header, body.sidebar-collapsed .layout-footer, body.sidebar-collapsed .main-content {
        margin-inline-start: 0 !important;
        inline-size: 100% !important;
        width: 100% !important;

    }

    .filters-actions {
        justify-content: start;
        min-width: auto;
        margin-bottom: 12px;
    }

    .filters-slab .btn-clear-filters {
        position: unset;
    }

    .filters-left, .filters-right {
        gap: 0;
    }

    .actions-divider {
        display: none;
    }

    .page-toolbar {
        grid-template-columns: 1fr;
    }

    .page-toolbar > div {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sidebar.expanded {
        width: 320px;
    }
}

.charts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.chart {
    border: 1px solid var(--brand-border);
    background-color: var(--brand-elev);
    padding: 15px;
    border-radius: 8px;
    width: 100%
}


.search-input {
    color: var(--brand-fg);
    background: var(--brand-elev-2);
    border: 1px solid var(--brand-border);
    border-radius: 0.375rem;
    font-size: 14px;
    padding: 10px 18px 10px 40px;

    outline: none;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.filter-dropdown:focus,
.search-input:focus {
    border-color: rgb(95 63 232 / 60%);
    box-shadow: 0 0 0 2px rgb(95 63 232 / 20%);
}

.found-value {
    font-size: 14px;
    font-weight: 600;
    background: var(--brand-elev-2);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--brand-border);
    color: var(--brand-fg);
}

.export-btn {
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.export-btn:hover {
    background: var(--brand-primary-600);
}


.config-table thead th,
.phishing-table thead th {
    background: var(--brand-elev-2);
    border: 1px solid var(--brand-border);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    color: var(--brand-fg);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 14px;
    text-align: left;
    line-height: 1.5;
    vertical-align: middle;
}

.config-table thead th.sortable,
.phishing-table thead th.sortable {
    cursor: pointer;
    user-select: none;
}

.config-table tbody td,
.phishing-table tbody td {
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-fg);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    vertical-align: middle;
    padding: 12px 14px;
    overflow: hidden;
}


.phishing-table .type-text {
    font-size: 14px;
}

.phishing-table .brand-text {
    font-size: 14px;
}


.phishing-table .similarity-cell .progress {
    background: var(--brand-elev-2);
    border-radius: 6px;
    height: 8px;
}

.phishing-table .similarity-cell .progress-bar {
    border-radius: 6px;
}

.phishing-table .similarity-cell .percent {
    font-size: 11px;
    color: #fff;
    min-width: 32px;
    line-height: 1;
    display: inline-block;
}

.phishing-table .tags-cell .badge {
    background: rgba(0, 123, 255, 0.2);
    border: 1px solid rgba(0, 123, 255, .3);
    color: #fff;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 10px;
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    margin: 1px 2px;
}

.phishing-table .green-dot {
    width: 8px;
    height: 8px;
    background: #28a745;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}


.action-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--brand-border);
    background: var(--brand-elev-2);
    color: var(--brand-fg) !important;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.badge-primary {
    background-color: var(--brand-primary);
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    line-height: 1;
    vertical-align: baseline;
    margin: 1px 2px;

}

.badge-primary:hover {
    background-color: var(--brand-primary-600);

}

.badge-danger {
    background-color: var(--brand-danger);
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    line-height: 1;
    vertical-align: baseline;
    margin: 1px 2px;

}

.footer-legal a {
    color: var(--brand-info) !important;
}

.loading-more {
    color: var(--brand-secondary) !important;
}


/* Role filters as “chips” */
.filter-chips .chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border: 1px solid var(--brand-border);
    border-radius: 0.375rem;
    background: var(--brand-elev-2);
    color: var(--brand-fg);
    cursor: pointer;
    transition: .15s ease;
    text-decoration: none;

}

.filter-chips .chip:hover {
    background: var(--brand-primary-600);
    border-color: var(--brand-primary-600);
    color: #fff;
}

.filter-chips .chip.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.management-panel {
    background: var(--brand-elev);
    border-radius: 8px;
    border: 1px solid var(--brand-border) !important;
}

.config-table tbody tr:hover {
    background: var(--brand-elev-2);
}

.responsive-table {
    padding: 0 1rem;
    margin: 0 auto;
    overflow-x: auto;

}

.modals-offcanvas-right .responsive-table {
    padding: 0;
}

.header-toolbar {
    padding: 1rem;
}

.loading-more {
    padding: 1rem 0;
}

/* ===========================================================
   CyberSee Auth — Shared Styles (Login & Register)
   Primary: #4C0EE5  |  Secondary: #00E5FF
=========================================================== */


/* Page shell */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(900px 600px at 12% 10%, color-mix(in srgb, var(--cs-primary) 26%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 88% 90%, color-mix(in srgb, var(--cs-primary-2) 22%, transparent), transparent 60%),
    linear-gradient(120deg, #0A0F1F, #101735 55%, #0B1226);
    padding: clamp(20px, 4vw, 48px);
    overflow: hidden;
}

.auth-wrapper {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    background: var(--cs-card);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-rad);
    overflow: hidden;
    box-shadow: var(--cs-shadow);
}

@media (max-width: 992px) {
    .auth-wrapper {
        grid-template-columns:1fr;
    }

    .auth-hero {
        display: none;
    }
}

/* Left hero */
.auth-hero {
    background: radial-gradient(circle at 20% 30%, rgba(76, 14, 229, .25), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(0, 229, 255, .2), transparent 60%),
    var(--cs-bg);
    padding: clamp(2rem, 5vw, 3.5rem);
    color: var(--cs-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-chip {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    padding: .55rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--cs-border);
    width: max-content;
    font-weight: 800;
}

.logo-hex {
    width: 28px;
    height: 28px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 95,27 95,73 50,97 5,73 5,27' /></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 95,27 95,73 50,97 5,73 5,27' /></svg>") center/contain no-repeat;
    background-image: url('{{ asset(' assets/branding/cybersee-logo.png ') }}');
    background-size: cover;
    background-position: center;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3));
}

.auth-hero h1 {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 1rem 0 .5rem;
}

.auth-hero p {
    color: var(--cs-muted);
    max-width: 50ch;
    margin-bottom: 1.25rem;
}

.features {
    display: grid;
    gap: .7rem;
}

.features .item {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.features .item i {
    color: var(--success);
}

/* Right card */
.auth-card {
    background: rgba(17, 23, 39, .9);
    backdrop-filter: blur(10px);
    color: var(--cs-text);
    padding: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-card h2 {
    font-weight: 800;
    text-align: center;
    margin-bottom: .25rem;
}

.auth-card p {
    color: var(--cs-muted);
    text-align: center;
    margin-bottom: 1.25rem;
}

/* Alerts */
.auth-card .alert {
    border-radius: 12px;
    border: 1px solid var(--cs-border);
    margin-bottom: 10px;
}

.auth-card .alert-success {
    background: rgba(16, 185, 129, .10);
    color: #86efac;
    border-color: rgba(16, 185, 129, .35);
}

.auth-card .alert-danger {
    background: rgba(244, 63, 94, .12);
    color: #fecdd3;
    border-color: rgba(244, 63, 94, .35);
}

.auth-card .alert-info {
    background: rgba(59, 130, 246, .12);
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, .35);
}

/* Form */
.form-label {
    color: var(--cs-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.form-control {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--cs-border);
    color: var(--cs-text);
    border-radius: 10px;
    padding: 10px 12px;
    transition: .25s;
}

.form-control:focus {
    border-color: color-mix(in srgb, var(--cs-primary) 60%, var(--cs-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-primary) 26%, transparent);
}

.form-check-input:checked {
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
}

/* Buttons & footer */
.btn-primary-gradient {
    background: linear-gradient(135deg, var(--cs-primary), var(--cs-primary-2));
    border: none;
    color: #fff;
    font-weight: 800;
    letter-spacing: .2px;
    border-radius: 10px;
    padding: 11px 14px;
    transition: .25s;
}

.btn-primary-gradient:hover {
    transform: translateY(-1px);
}

.auth-foot {
    text-align: center;
    color: var(--cs-muted);
    margin-top: 1rem;
}

.auth-foot a {
    color: var(--info);
    text-decoration: none;
}

.auth-foot a:hover {
    text-decoration: underline;
}

.policy-hero {
    display: grid;
    gap: 12px;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--brand-shadow, 0 8px 24px rgba(0, 0, 0, .06));
}

.policy-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.policy-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.policy-title h1 {
    font-size: clamp(1.25rem, 2vw + .5rem, 1.75rem);
    font-weight: 800;
    margin: 0;
}

.badge-soft {
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--brand-border);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.policy-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-muted);
}

.policy-meta i {
    opacity: .75;
}

/* ===== Content / editor ===== */
.policy-card {
    margin-top: 16px;
    background: var(--brand-card-bg);
    border: 1px solid var(--brand-border);
    border-radius: 14px;
    padding: 18px;
}

.policy-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.policy-actions .btn {
    border-radius: 10px;
}

.editor-wrap {
    background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border));
    border-radius: 12px;
    padding: 12px;
}

/* CKEditor fit */
.ck-editor__editable {
    min-height: 320px;
}

/* ===== Rendered document ===== */
.policy-doc {
    line-height: 1.7;
    color: var(--brand-fg);
}

.policy-doc h2, .policy-doc h3 {
    margin-top: 1.2em;
    margin-bottom: .5em;
    font-weight: 800;
}

.policy-doc p {
    margin: .6em 0;
}

.policy-doc ul, .policy-doc ol {
    padding-left: 1.25rem;
}

.policy-doc a {
    color: var(--brand-primary-600);
}

/* ===== Footer actions (accept/decline) ===== */
.consent-bar {
    position: sticky;
    bottom: -1px;
    margin-top: 16px;
    background: var(--brand-elev);
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.consent-actions .btn {
    border-radius: 10px;
    min-width: 180px;
}

/* Small helpers */
.text-muted-2 {
    color: var(--brand-muted);
}

.sep {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    opacity: .6;
}

.icon-pill {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
    border: 1px solid var(--border-color);
    color: var(--brand-fg);
}

@media (max-width: 576px) {
    .consent-actions .btn {
        min-width: auto;
        flex: 1;
    }
}


.policy-hero {
    display: grid;
    gap: 12px;
    background: var(--bs-card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--brand-shadow, 0 8px 24px rgba(0, 0, 0, .06));
}

.policy-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.policy-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.policy-title h1 {
    font-size: clamp(1.25rem, 2vw + .5rem, 1.75rem);
    font-weight: 800;
    margin: 0;
}


.policy-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-muted);
}

.policy-meta i {
    opacity: .75;
}

/* ===== Content / editor ===== */
.policy-card {
    margin-top: 16px;
    background: var(--brand-elev-2);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
}

.policy-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.policy-actions .btn {
    border-radius: 10px;
}


/* CKEditor fit */
.ck-editor__editable {
    min-height: 360px;
}

/* ===== Rendered document ===== */
.policy-doc {
    line-height: 1.7;
    color: var(--bs-body-color);
}

.policy-doc h2, .policy-doc h3 {
    margin-top: 1.2em;
    margin-bottom: .5em;
    font-weight: 800;
}

.policy-doc p {
    margin: .6em 0;
}

.policy-doc ul, .policy-doc ol {
    padding-left: 1.25rem;
}


@media (max-width: 768px) {
    .chart {
        width: 100%;
    }

    .chart-height {
        min-height: 200px !important;
    }
}

.metric-state {
    display: none !important;
}

/* ====== Page Shell ====== */
.api-card {
    background: var(--brand-elev-2);
    color: var(--brand-fg);
    border: 1px solid var(--brand-border);
    border-radius: 14px;
    padding: 18px;

}

.api-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.api-sub {
    opacity: .75;
    font-size: .9rem;
    margin: 0;
}

/* ====== Token Row ====== */
.token-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 720px;
}

.token-wrap {
    position: relative;
    flex: 1;
}

.token-wrap .form-control {
    height: 44px;
    border-radius: 0.375rem;
    color: var(--brand-fg);
    background: var(--brand-elev-2);
    border: 1px solid var(--brand-border);

}

.token-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--brand-border);
    background: var(--brand-elev-2);
    color: var(--brand-fg);
    transition: .15s ease;
}

.btn-icon:hover {
    transform: translateY(-1px);
}

.btn-pro {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 10px;
    height: 42px;
    padding: .4rem .9rem;
}

.btn-pro i {
    font-size: 1rem;
}

/* Disabled input visual for tokens (keep cursor text) */
.form-control:disabled {
    background-color: var(--brand-elev-2);
    opacity: 1;
    cursor: text;
    color: var(--brand-fg);
}

/* Divider */
.divider {
    height: 1px;
    background: var(--brand-border);
    margin: 1rem 0;
}

/* ====== Editor ====== */
.editor-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Optional improved code/markdown area inside docs preview */
.doc-content :where(pre,code) {
    background: var(--brand-elev);
    border: 1px solid var(--brand-border);
    border-radius: 0.375rem;
}

.doc-content pre {
    padding: .9rem;
    overflow: auto;
}

.doc-content code {
    padding: .15rem .35rem;
}


/* Small helpers */
.hint {
    font-size: .85rem;
    opacity: .75;
}

/* =========================================================
   Minimal, scoped styles for the banner & tooltip
   - Works in dark/light automatically
========================================================= */
:root {
    --cs-primary: #4C0EE5;
    --cs-info: #0EA5E9;
    --cs-danger: #F59E0B; /* amber-ish warning for better contrast on dark */
    --cs-bg-elev: var(--brand-elev, #121721);
    --cs-border: rgba(255, 255, 255, .12);
    --cs-text: var(--brand-fg, #E5E7EB);
}

html[data-bs-theme='light'] {
    --cs-bg-elev: var(--brand-elev, #ffffff);
    --cs-border: rgba(2, 6, 23, .12);
    --cs-text: var(--brand-fg, #0B1324);
}

/* Top banner */
.subscription-banner {
    position: absolute;
    top: 82px;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg,
    color-mix(in srgb, var(--cs-danger) 35%, transparent), transparent), var(--cs-bg-elev);
    border-bottom: 1px solid var(--cs-border);
    color: var(--cs-text);
    left: 0;
    width: 100%;
}

.subscription-banner.is-hidden {
    display: none;
}

.subscription-banner .banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.subscription-banner .bi-exclamation-triangle-fill {
    color: var(--cs-danger);
    font-size: 1.1rem;
}

.subscription-banner .banner-text {
    font-size: .95rem;
    line-height: 1.3;
}

.subscription-banner .banner-dismiss {
    border: 1px solid var(--cs-border);
    background: transparent;
    color: inherit;
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 600;
    transition: .2s;
}

.subscription-banner .banner-dismiss:hover {
    border-color: color-mix(in srgb, var(--cs-primary) 45%, var(--cs-border));
}

/* Sidebar tooltip */
.sidebar-expiry-tooltip {
    position: fixed;
    top: 88px;
    /* align next to sidebar (expanded vs collapsed) */
    left: calc(var(--sidebar-width, 280px) + 12px);
    z-index: 999;
    background: var(--cs-bg-elev);
    border: 1px solid var(--cs-border);
    color: var(--cs-text);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .25);
    max-width: 280px;
}

body.sidebar-collapsed .sidebar-expiry-tooltip {
    left: calc(var(--sidebar-collapsed-width, 68px) + 12px);
}

.sidebar-expiry-tooltip.is-hidden {
    display: none;
}

.sidebar-expiry-tooltip .tip-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-expiry-tooltip .bi-calendar-event {
    color: var(--cs-info);
    font-size: 1.1rem;
}

.sidebar-expiry-tooltip .tip-title {
    font-weight: 800;
    line-height: 1;
}

.sidebar-expiry-tooltip .tip-sub {
    font-size: .9rem;
    opacity: .9;
}

.sidebar-expiry-tooltip .tip-text {
    flex: 1 1 auto;
}

.sidebar-expiry-tooltip .tip-close {
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 8px;
    padding: 4px;
}

.sidebar-expiry-tooltip .tip-close:hover {
    color: var(--cs-info);
}

/* Small screens */
@media (max-width: 576px) {
    .sidebar-expiry-tooltip {
        top: 76px;
        left: 12px;
        right: 12px;
    }
}

/* =========================================================
   CyberSee – Filter Dropdown (scoped, no backend changes)
========================================================= */
.cs-filter {
    --cs-bg: var(--brand-elev, #121721);
    --cs-border: var(--brand-border, rgba(255, 255, 255, .12));
    --cs-fg: var(--brand-fg, #e5e7eb);
    --cs-muted: var(--brand-muted, #9ca3af);
    --cs-primary: var(--brand-primary, #4C0EE5);
    --cs-focus: 0 0 0 3px color-mix(in srgb, var(--cs-primary) 26%, transparent);
    --cs-shadow: 0 16px 38px rgba(0, 0, 0, .35);
}

html[data-bs-theme='light'] .cs-filter {
    --cs-bg: var(--brand-elev, #ffffff);
    --cs-border: var(--brand-border, rgba(2, 6, 23, .12));
    --cs-fg: var(--brand-fg, #0b1324);
    --cs-muted: #64748b;
    --cs-shadow: 0 18px 38px rgba(2, 6, 23, .12);
}

.dropdown-menu-filter.cs-filter {

    padding: 14px;
}

/* Header */
.cs-filter .filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--cs-border);
}

.cs-filter .filter-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.cs-filter .filter-title .bi {
    color: var(--cs-primary);
}

/* Blocks */
.cs-filter .block {
    padding: 12px 6px;
}

.cs-filter .block + .block {
    border-top: 1px dashed var(--cs-border);
}

.cs-filter .block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    margin-bottom: 8px;
}

.cs-filter .block-title .bi {
    color: var(--cs-primary);
}

/* Fields */
.cs-filter .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cs-filter .field {
    position: relative;
}

.cs-filter .sub-label {
    font-size: .75rem;
    color: var(--cs-muted);
    margin: 0 0 4px 2px;
}

/* Inputs */
.cs-filter .form-control {
    background: color-mix(in srgb, var(--cs-bg) 70%, transparent);
    border: 1px solid var(--cs-border);
    color: var(--cs-fg);
    border-radius: 10px !important;
    appearance: none;
    height: 40px;
    font-size: .95rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.cs-filter .form-control:focus {
    border-color: var(--cs-primary);
    box-shadow: var(--cs-focus);
    outline: none;
    background: color-mix(in srgb, var(--cs-bg) 80%, transparent) !important;
}

/* Icon inside input (decorative) */
.cs-filter .icon-end {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .8;
    background: #121721;
    padding: 5px;
    z-index: 10;
}

/* Helpers */
.cs-filter .btn-clear {
    border: 1px solid var(--cs-border);
    background: transparent;
    color: #ef4444;
    font-size: .85rem;
    border-radius: 10px;
    padding: 6px 10px;
}

.cs-filter .btn-clear:hover {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, transparent);
}

.cs-filter .btn-clear-all {
    border: 1px solid var(--cs-border);
    background: transparent;
    color: #ef4444;
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 700;
}

/* Compact spacing on small screens */
@media (max-width: 420px) {
    .dropdown-menu-filter.cs-filter {
        min-width: 94vw;
    }


    .cs-filter .row-2 {
        grid-template-columns: 1fr;
    }
}

/* ================================
        Query UI — layout & theme
        ================================ */

/* Page scaffold */
.query-shell {
    display: grid;
    gap: 16px;
}

/* Search bar */
.query-searchbar {
    position: relative;
}

.query-input {
    width: 100%;
    height: 48px;
    padding: 0 48px 0 16px;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
    box-shadow: var(--brand-shadow, 0 4px 18px rgba(0, 0, 0, .12));
    transition: box-shadow .18s ease, border-color .18s ease;
}

.query-input:focus {
    outline: none;
    box-shadow: var(--brand-focus-ring);
    border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--bs-border-color));
}

.query-searchbar .bi-search {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .7;
    font-size: 18px;
    color: var(--bs-body-color);
}

/* Tabs (Results, Dashboard, etc.) */
.query-tabs .nav-link {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.query-tabs .nav-link .bi {
    font-size: 18px;
}

.query-tabs .nav-link:focus-visible {
    box-shadow: var(--brand-focus-ring);
}

.query-tabs .nav-link.active {
    background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--bs-border-color));
}

/* 2-column grid (sidebar + content) */
.query-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 992px) {
    .query-grid {
        grid-template-columns: 320px 1fr;
    }
}

/* Sidebar widgets */
.side-widget {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 14px;
}

.side-widget h6 {
    margin: 0 0 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tag cloud */
.tag-cloud {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.apexcharts-legend {
    margin-top: 6px !important;
}

.tag-chip {
    font-size: .85rem;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
    transition: transform .1s ease, border-color .15s ease;
}

.tag-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--bs-border-color));
}

/* Mini lists (Top Countries/Ports/Tech) */
.list-mini {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-mini li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
}

.list-mini li + li {
    margin-top: 6px;
}

.list-mini .pill {
    background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 2px 8px;
    font-weight: 700;
    min-width: 44px;
    text-align: center;
}

/* Cards shell */
.cards-wrap {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 14px;
}

.cards-wrap .grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}


/* Result card */
.asset-card {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 10px;
    transition: border-color .15s ease, transform .12s ease;
}

.asset-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--bs-border-color));
}

.asset-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.asset-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.asset-tag {
    font-size: .8rem;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.asset-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.asset-sub {
    color: var(--bs-muted);
    font-size: .92rem;
}

.asset-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.meta-badge {
    border: 1px dashed var(--bs-border-color);
    border-radius: 10px;
    padding: 4px 8px;
}

/* CTA button */
.asset-cta {
    margin-left: auto;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-info, #0ea5e9));
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 700;
}

.asset-cta .bi {
    margin-left: 6px;
}

.asset-cta:focus-visible {
    outline: none;
    box-shadow: var(--brand-focus-ring);
}

.dash-grid {
    display: grid;
    grid-template-columns:1fr;
    gap: 18px
}

@media (min-width: 992px) {
    .dash-grid {
        grid-template-columns:320px 1fr
    }
}

/* KPI & panels */
.kpi-grid {
    display: grid;
    gap: 14px;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

@media (min-width: 768px) {
    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.kpi-card {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 18px;
}

.kpi-title {
    opacity: .85;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 800;
}

.panel {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 18px;
    height: 100%;
}

.table-download {
    width: 100%;
    border-collapse: collapse;
}

.table-download th, .table-download td {
    padding: 12px 10px;
    border-top: 1px solid var(--bs-border-color);
}

.badge-fmt {
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

/* Optional: sticky sidebar on large screens for better UX */
@media (min-width: 1200px) {
    .query-grid > aside {
        position: sticky;
        top: 12px;
        align-self: start;
    }
}

/* Helpers */
.m0 {
    margin: 0
}

.mt8 {
    margin-top: 8px
}

.mt12 {
    margin-top: 12px
}

.mt16 {
    margin-top: 16px
}

/* ---------------- Google GeoChart tooltip theming ---------------- */
.google-visualization-tooltip,
.google-visualization-tooltip * {
    color: var(--bs-body-color, #e5e7eb) !important;
}

.google-visualization-tooltip {
    background: var(--tooltip-bg, #151b24) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
    padding: 10px 12px !important;
}

.google-visualization-tooltip-item-list,
.google-visualization-tooltip-item {
    color: inherit !important;
}

html[data-bs-theme="light"] .google-visualization-tooltip {
    --tooltip-bg: #ffffff;
    border-color: rgba(2, 6, 23, .12) !important;
}

html[data-bs-theme="dark"] .google-visualization-tooltip {
    --tooltip-bg: #151b24;
}

/* Custom tooltip content */
.geo-tip {
    display: grid;
    gap: 4px;
}

.geo-tip .t {
    font-weight: 700;
    letter-spacing: .2px;
}

.geo-tip .s {
    opacity: .85;
}

/* Breakdown styling (under gauge) */
.gauge-breakdown {
    margin-top: -4px;
    display: grid;
    gap: 6px;
    font-size: .925rem;
}

.gauge-breakdown .gb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
    border-radius: 10px;
}

.gauge-breakdown .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    margin-right: 8px;
    display: inline-block;
}

.gauge-breakdown .lbl {
    flex: 1;
    color: var(--brand-muted, #94a3b8);
}

.gauge-breakdown .val {
    font-weight: 700;
    color: var(--bs-body-color, #e5e7eb);
}

.gauge-breakdown .gb-total {
    text-align: right;
    opacity: .85;
    margin-top: 2px;
}

/* =========================
Shell Layout
========================= */
.domain-shell {
    display: grid;
    gap: 18px;
    grid-template-columns:1fr;
}

@media (min-width: 1200px) {
    .domain-shell {
        grid-template-columns: 360px 1fr;
    }
}

/* =========================
   Sidebar
========================= */
.domain-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
    align-self: start;
}

.dw-card {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--brand-shadow);
}

.dw-card h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--bs-body-color);
    font-weight: 800;
    letter-spacing: .2px;
}

/* Map box */
.map-box {
    height: 240px;
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--brand-primary) 28%, var(--bs-border-color));
}

/* Chips (Ports / Tech / Services) */
.domain-shell .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.domain-shell
.chip {
    padding: 6px 10px;
    font-size: .9rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

.domain-shell
.chip .bi {
    margin-right: 6px;
    opacity: .85
}

/* HTTP panel (headers preview) */
.http-box {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
}

.http-head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--brand-info) 8%, transparent);
    border-bottom: 1px solid var(--bs-border-color);
}

.http-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.badge-soft {
    border: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 700;
}

.http-body {
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.kv {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px;
    align-items: center;
}

.kv + .kv {
    margin-top: 6px;
}

.kv .k {
    color: var(--brand-muted);
}

.kv .v {
    color: var(--bs-body-color);
    word-break: break-word
}

/* Last seen */
.last-seen {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-success) 10%, transparent);
    border: 1px solid var(--bs-border-color);
}

.last-seen .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-success);
}

/* =========================
   Main content
========================= */
.domain-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Card wrapper */
.kv-card {
    background: var(--bs-card-bg, #0b1220);
    border: 1px solid var(--bs-border-color, #233042);
    border-radius: 16px;
    padding: 12px;
}

/* Responsive grid of key-value blocks */
.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 0; /* dl default */
}

/* Each key-value block */
.kv-item {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--brand-primary, #4C0EE5) 6%, transparent);
    border: 1px solid var(--bs-border-color, #233042);
    border-radius: 12px;
}

/* Key (label) */
.kv-label {
    margin: 0; /* dt default reset */
    font-weight: 800;
    color: var(--bs-body-color, #cbd5e1);
    white-space: nowrap;
}

/* Value */
.kv-value {
    margin: 0; /* dd default reset */
    color: var(--bs-body-color, #cbd5e1);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small screens: كل عنصر ياخد صف كامل مع نفس التخطيط الداخلي */
@media (max-width: 480px) {
    .kv-item {
        grid-template-columns: 1fr; /* ستاك عمودي */
        gap: 6px;
    }

    .kv-label {
        opacity: .85;
    }
}

/* Section header */
.section {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 14px;
}

.section h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--bs-body-color);
    font-weight: 900;
    letter-spacing: .2px
}

.section .sub {
    color: var(--brand-muted);
    font-weight: 700;
    margin-bottom: 8px;
}

/* DNS list */
.dns-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 160px 1fr;
}

@media (max-width: 768px) {
    .dns-grid {
        grid-template-columns: 1fr;
    }
}

.dns-type {
    font-weight: 900;
    color: var(--brand-warning);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dns-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    padding: 6px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    border: 1px solid var(--bs-border-color);
    font-weight: 700;
}

/* Open ports – pro list */
.port-card {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
    border-radius: 14px;
    padding: 12px;
}

.port-head {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.port-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.port-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}


.port-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.code-badge {
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 800;
    background: color-mix(in srgb, var(--brand-success) 12%, transparent);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

.status-bad {
    color: #ef4444;
    background: color-mix(in srgb, var(--brand-danger) 12%, transparent);
}

.status-ok {
    color: #10b981;
}


/* Accordion-like HTTP raw details */
.raw {
    margin-top: 8px;
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 10px;
    font-family: ui-monospace, monospace;
    font-size: .95rem;
    color: var(--bs-body-color);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Minor helpers */
.m0 {
    margin: 0
}

.text-muted-2 {
    color: var(--brand-muted);
}


@media (max-width: 768px) {
    #pane-dashboard .domain-actions {
        display: none;
    }

    #pane-dashboard .kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .kpi-card {
        text-align: center;
    }

    .kpi-title {
        flex-direction: column;
    }

    #pane-results .stat-pill {
        flex-direction: column;
        text-align: center;
    }

    .asset-cta-text {
        display: none;
    }

    .query-shell {
        display: flex;
        flex-flow: column;
    }

    .port-head .btn-outline-primary {
        display: none;
    }

    .kv {
        grid-template-columns: 1fr;
    }
}

.map-area {
    width: 100%;
    min-height: 280px;
    display: block;
    position: relative;
}

.map-area > div {
    width: 100% !important;
    height: 100% !important;
}

.map-area svg {
    width: 100% !important;
    height: 100% !important;
}

html[data-bs-theme=light] body {
    background: #F4F5F9
}

html[data-bs-theme=light] .dashboard-header .theme-icon {
    color: var(--brand-fg) !important;
}

html[data-bs-theme=light] .dashboard-header .theme-icon:hover {
    color: var(--brand-primary) !important;
}

html[data-bs-theme=light] .header .notification-bell i, html[data-bs-theme=light] .header .theme-icon, html[data-bs-theme=light] .header .user-icon {
    color: var(--brand-primary);
}

html[data-bs-theme="light"] .sidebar .sidebar-item a:hover,
html[data-bs-theme="light"] .sidebar .sidebar-item button:hover {
    /*background: #EAEDFB;*/
    color: #fff;
}

/* ===== Header shell: glassy card feel ===== */
.header-bar {
    padding: 8px 12px;
    background: color-mix(in srgb, var(--bs-card-bg) 92%, transparent);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
}

/* ===== Icon buttons (sidebar, etc.) ===== */
.btn-icon {
    --_size: 40px;
    inline-size: var(--_size);
    block-size: var(--_size);
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.btn-icon i {
    font-size: 18px;
    line-height: 1;
}

.btn-icon:hover {
    background: color-mix(in srgb, var(--brand-primary-50, #f5f3ff) 60%, var(--bs-card-bg));
}

.btn-icon:active {
    transform: translateY(1px);
}

.btn-icon.ghost {
    border-color: color-mix(in srgb, var(--bs-border-color) 70%, transparent);
}

/* Use a clearer glyph for sidebar toggle on hover */
.toggle-switch-sidebar:hover i {
    color: var(--brand-primary);
}

/* ===== Theme toggle skin (keeps Livewire inside working) =====
   - We overlay our visual icons; clicks pass through to Livewire.
*/
.theme-toggle-skin {
    position: relative;
    width: 56px;
    height: 34px;
    border-radius: 999px;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 6%, transparent);
}

/* Hide whatever the component renders visually (but keep it clickable) */
.theme-toggle-skin > *:first-child {
    position: absolute;
    inset: 0;
    opacity: 0; /* keep events */
}

/* Visual layer (icons + slider) */
.theme-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none; /* let clicks hit Livewire element */
}

.theme-visual .icon-sun,
.theme-visual .icon-moon {
    font-size: 16px;
    transition: opacity .2s ease, transform .2s ease;
}

/* Light vs Dark icons */
html[data-bs-theme="light"] .theme-visual .icon-sun {
    opacity: 1;
    transform: none;
    color: #eab308;
}

html[data-bs-theme="light"] .theme-visual .icon-moon {
    opacity: .25;
    transform: scale(.9);
    color: #64748B;
}

html[data-bs-theme="dark"] .theme-visual .icon-sun {
    opacity: .25;
    transform: scale(.9);
    color: #cbd5e1;
}

html[data-bs-theme="dark"] .theme-visual .icon-moon {
    opacity: 1;
    transform: none;
    color: #f5faff;
}

/* ===== Avatar trigger (replace boring circle icon with initials chip) ===== */
.avatar-trigger {
    --_size: 36px;
    inline-size: var(--_size);
    block-size: var(--_size);
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    text-decoration: none;
    background: color-mix(in srgb, var(--brand-primary) 16%, var(--bs-card-bg));
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 0 rgba(2, 6, 23, .05) inset;
}

.avatar-initials {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    color: color-mix(in srgb, var(--brand-primary) 20%, var(--bs-body-color));
}

/* Hover states */
.avatar-trigger:hover {
    background: color-mix(in srgb, var(--brand-primary) 24%, var(--bs-card-bg));
}

/* ===== High-contrast adjustments for Light ===== */
html[data-bs-theme="light"] .btn-icon {
    color: #0F172A;
}

html[data-bs-theme="light"] .header-bar {
    box-shadow: 0 8px 22px rgba(2, 6, 23, .05);
}

/* ===== Panel shell ===== */
.reports-panel {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .05);

}

/* ===== Header ===== */
.reports-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 8px;
}

.reports-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--bs-body-color);
}

.reports-subtitle {
    margin: 4px 0 0;
    color: var(--bs-muted);
    font-size: 13px;
}

/* View-all icon button */
.btn-icon.subtle {
    --_s: 36px;
    inline-size: var(--_s);
    block-size: var(--_s);
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.btn-icon.subtle:hover {
    background: color-mix(in srgb, var(--brand-primary-50, #f5f3ff) 60%, var(--bs-card-bg));
    color: var(--brand-primary);
}

.btn-icon.subtle:active {
    transform: translateY(1px);
}

/* ===== List ===== */
.reports-list {
    list-style: none;
    padding: 4px;
    margin: 0;
    display: grid;
    gap: 4px;
    max-height: 375px;
    overflow-y: scroll;
}

/* Row */
.reports-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    transition: background .18s ease, box-shadow .18s ease;
    border: 1px solid transparent; /* keeps height stable */
}

.reports-item:hover {
    background: color-mix(in srgb, var(--brand-primary-50, #f5f3ff) 35%, var(--bs-card-bg));
    border-color: color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

/* Leading icon (in a soft pill) */
.reports-icon {
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-primary) 12%, var(--bs-card-bg));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--bs-border-color));
    color: var(--brand-primary);
    flex: none;
}

.reports-icon i {
    font-size: 18px;
    line-height: 1;
}

/* Content */
.reports-content {
    min-width: 0;
}

.reports-link {
    color: var(--bs-body-color);
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    max-inline-size: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* single-line clamp */
}

.reports-link:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

.reports-meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--bs-muted);
}

/* Empty state */
.reports-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bs-border-color) 16%, transparent);
    color: var(--bs-muted);
}

.empty-ico {
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px dashed var(--bs-border-color);
}

.empty-ico i {
    font-size: 18px;
}

/* Dark mode tweaks remain automatic via vars; no special rules needed. */

/* Responsive: tighter paddings on very small screens */
@media (max-width: 420px) {
    .reports-panel {
        padding: 12px;
    }

    .reports-item {
        padding: 8px;
    }
}

/* ===== Charts layout (12-column responsive grid) ===== */
.charts {
    display: grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* Card skin (apply to .chart & .reports-panel) */
.chart, .reports-panel {
    width: 100%;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .05);
}

/* Header bar */
.header-card, .reports-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.header-card h2, .reports-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bs-body-color);
}

/* Grid span utilities (desktop defaults) */
.col-12 {
    grid-column: span 12;
}

.col-8 {
    grid-column: span 8;
}

.col-6 {
    grid-column: span 6;
    height: 100%;
}

.col-4 {
    grid-column: span 4;
}

/* Chart default height */
.chart-height {
    height: 320px;
}

/* Responsive: <= 1399px -> two columns; <= 768px -> one column */
@media (max-width: 1399px) {
    .col-8 {
        grid-column: span 12;
    }

    /* Map drops full-width */
    .col-6 {
        grid-column: span 6;
    }

    .col-4 {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .col-6, .col-4 {
        grid-column: span 12;
    }
}

/* Small polish for the “view all” icon button used above */
.btn-icon.subtle {
    --_s: 36px;
    inline-size: var(--_s);
    block-size: var(--_s);
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
    transition: background .2s, color .2s, box-shadow .2s, transform .12s;
}

.btn-icon.subtle:hover {
    background: color-mix(in srgb, var(--brand-primary-50, #f5f3ff) 55%, var(--bs-card-bg));
    color: var(--brand-primary);
}

/* ===== Metrics grid (auto, non-breaking) ===== */


/* ===== Card skin ===== */
.dashboard-card {
    position: relative;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 16px 16px 16px 16px;
    min-height: 140px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .05);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Content column */
.dashboard-card .card-value {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.metric-label {
    font-size: 13px;
    color: var(--bs-muted);
}

.number-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--bs-body-color);
    line-height: 1.1;
}

/* Status row */
.metric-state {
    margin-top: auto;
}

.metric-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bs-muted);
    font-size: 12px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-success, #22C55E);
}

.status-badge {
    background: color-mix(in srgb, var(--brand-primary) 16%, var(--bs-card-bg));
    color: color-mix(in srgb, var(--brand-primary) 20%, var(--bs-body-color));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--bs-border-color));
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
}

/* Icon at the right (consistent size + tint) */
.icon-state {
    margin-inline-start: auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 1px 0 rgba(2, 6, 23, .05));
    opacity: .95;
}

/* Accent per type (soft background ribbon) */
.dashboard-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -30px;
    inset-block: 0 0;
    width: 110px;
    transform: skewX(-12deg);
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    opacity: .35;
    pointer-events: none;
}

/* Optional: distinct accents (use existing classes) */
.keyword-card::after {
    background: color-mix(in srgb, var(--username-accent, #7E22CE) 16%, transparent);
}

.domain-card::after {
    background: color-mix(in srgb, var(--domain-accent, #0369A1) 16%, transparent);
}

.email-card::after {
    background: color-mix(in srgb, var(--email-accent, #C2410C) 16%, transparent);
}

.username-card::after {
    background: color-mix(in srgb, var(--username-accent, #7E22CE) 16%, transparent);
}

.cases-card::after {
    background: color-mix(in srgb, var(--cases-accent, #475569) 16%, transparent);
}

.pending-cases-card::after {
    background: color-mix(in srgb, var(--pending-cases-accent, #CA8A04) 16%, transparent);
}

.progress-cases-card::after {
    background: color-mix(in srgb, var(--progress-cases-accent, #0891B2) 16%, transparent);
}

.fixed-cases-card::after {
    background: color-mix(in srgb, var(--fixed-cases-accent, #65A30D) 16%, transparent);
}

.takedown-card::after {
    background: color-mix(in srgb, var(--takedown-accent, #0F766E) 16%, transparent);
}

.pending-takedown-card::after {
    background: color-mix(in srgb, var(--pending-takedown-accent, #B45309) 16%, transparent);
}

.progress-takedown-card::after {
    background: color-mix(in srgb, var(--progress-takedown-accent, #1E40AF) 16%, transparent);
}

.fixed-takedown-card::after {
    background: color-mix(in srgb, var(--fixed-takedown-accent, #BE185D) 16%, transparent);
}