/* BGPSentinel Theme Variables */
/* Light mode is default, dark mode via .dark class */

:root {
    /* Primary Background Colors */
    --bg-primary: #F8F9FA;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E9ECEF;

    /* Border */
    --border: #DEE2E6;

    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6C757D;

    /* Accent - Vivid Tangelo */
    --accent-primary: #005B5C;

    /* Highlight Colors (semantic) */
    /* 1: Links/Clickable - Deep Petrol */
    --highlight-1: #c46b22;
    /* 2: Communities - Gilded Oak */
    --highlight-2: #005B5C;
    /* 3: Origin AS / Announcements - Sage Brush */
    --highlight-3: #3c8612;
    /* 4: AS badges / IPv6 badge - Electric Indigo */
    --highlight-4: #c46b22;
    /* 5: Withdrawals/Errors - Red */
    --highlight-5: #DC3545;
    /* 6: MOAS Warning - Vivid Tangelo */
    --highlight-6: #FF5F1F;

    /* Accent aliases (for compatibility) */
    --accent-blue: var(--highlight-1);
    --accent-green: var(--highlight-3);
    --accent-red: var(--highlight-5);
    --accent-yellow: var(--highlight-6);
    --accent-purple: var(--highlight-4);

    /* Scrollbar */
    --scrollbar-track: #E9ECEF;
    --scrollbar-thumb: #CED4DA;
    --scrollbar-thumb-hover: #ADB5BD;

    /* Map/Popup specific */
    --popup-bg: #FFFFFF;
    --popup-border: #DEE2E6;
    --popup-text: #212529;
    --popup-text-secondary: #6C757D;

    /* Grid pattern */
    --grid-pattern-color: rgba(0, 91, 92, 0.03);

    /* Form inputs */
    --input-bg: #FFFFFF;
    --input-border: #DEE2E6;

    /* Map tiles */
    --map-bg: #F8F9FA;
}

.dark {
    /* Primary Background Colors */
    --bg-primary: #212529;
    --bg-secondary: #2C3034;
    --bg-tertiary: #343A40;

    /* Border - subtle, just a touch lighter than bg-tertiary */
    --border: #4b5258;

    /* Text Colors */
    --text-primary: #F8F9FA;
    --text-secondary: #A9B2B1;

    /* Accent - Vivid Tangelo (same in both modes) */
    --accent-primary: #005B5C;

    /* Highlight Colors (semantic) - Dark mode variants */
    /* 1: Links/Clickable - Deep Petrol (lighter for dark) */
    --highlight-1: #e47c28;
    /* 2: Communities - Gilded Oak (lighter for dark) */
    --highlight-2: #00b1b4;
    /* 3: Origin AS / Announcements - Sage Brush (lighter for dark) */
    --highlight-3: #47b300;
    /* 4: AS badges / IPv6 badge - Electric Indigo (lighter for dark) */
    --highlight-4: #c46b22;
    /* 5: Withdrawals/Errors - Red (lighter for dark) */
    --highlight-5: #F85149;
    /* 6: MOAS Warning - Vivid Tangelo (same) */
    --highlight-6: #FF5F1F;

    /* Scrollbar */
    --scrollbar-track: #343A40;
    --scrollbar-thumb: #3A3F44;
    --scrollbar-thumb-hover: #4A4F54;

    /* Map/Popup specific */
    --popup-bg: #2C3034;
    --popup-border: #3A3F44;
    --popup-text: #F8F9FA;
    --popup-text-secondary: #A9B2B1;

    /* Grid pattern */
    --grid-pattern-color: rgba(0, 163, 163, 0.03);

    /* Form inputs */
    --input-bg: #343A40;
    --input-border: #3A3F44;

    /* Map tiles */
    --map-bg: #212529;
}

/* Base styles using variables */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Scrollbar styling */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Grid pattern background */
.grid-pattern {
    background-image:
        linear-gradient(var(--grid-pattern-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-pattern-color) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Focus states */
input:focus,
select:focus,
button:focus {
    outline: 2px solid var(--highlight-1);
    outline-offset: 2px;
}

/* Form inputs */
select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Date picker for dark mode */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

/* Table hover effects */
tbody tr:hover {
    background-color: color-mix(in srgb, var(--bg-tertiary) 80%, transparent);
}

/* Copied tooltip */
.copied-tooltip {
    background-color: var(--highlight-3);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10010;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.copied-tooltip.visible {
    opacity: 1;
}

/* Transition for theme switching */
*, *::before, *::after {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: ease;
    transition-duration: 0.15s;
}

/* Disable transitions during initial load to prevent flash */
.no-transitions, .no-transitions * {
    transition: none !important;
}

/* Page tab content transitions */
.page-tab-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-tab-content.hiding {
    opacity: 0;
    transform: translateY(4px);
}

.page-tab-content.hidden {
    display: none;
}