/* ==================================================================
   COLOR VARIABLES ONLY

   This file contains ONLY color-related CSS variables.
   Layout tokens (spacing, border-radius, transitions) are in main_layout.css
   All component styling has been moved to main_layout.css
   ================================================================== */

:root {
    /* Base colors */
    --color-primary: #F0F9FF;
    --color-secondary: #b5b683;
    --color-accent: #BAE6FD;
    --color-muted: #aaa;
    --color-white: #ffffff;
    --color-black: #000000;
    /* Background colors */
    --color-dark-bg: #1D1D1D;
    --color-card-bg: #272b30;
    --color-border: #292929;
    --color-topbar-bg: #242424;
    --bg-primary: #1D1D1D;
    --bg-secondary: #242424;
    --bg-tertiary: #292929;
    /* Text colors */
    --color-text-light: #f0f0f0;
    --color-text-secondary: #9c9c9c;
    --color-text-muted: #CCCCCC;
    /* Border colors */
    --border-color-ui: #404040;
    --border-color-dark: #444;
    --border-color-light: #666666;
    /* Interactive state colors */
    --hover-bg: #404040;
    --hover-border: #606060;
    --multiselect-hover-bg: #404040;
    /* Baby blue palette */
    --baby-blue-100: #DFF0FB;
    --baby-blue-200: #A8D9F5;
    --baby-blue-300: #76C5EF;
    --baby-blue-400: #3FB0E9;
    --baby-blue-500: #199AD6;
    --baby-blue-600: #147AAE;
    --baby-blue-700: #0F5880;
    /* Accent colors */
    --accent-blue: #119DFF;
    --accent-teal: #008489;
    --content-subtle: #C7C7C7;
    /* Gray scale */
    --gray-dark: #505050;
    --gray-medium: #555555;
    --gray-light: #787878;
    --gray-lighter: #E5E5E5;
    --border-divider: #909090;

    /* Component-specific colors */
    --placeholder-bg-color: #1D1D1D;
    --placeholder-text-color: #9c9c9c;
    --button-light-bg: #f8f9fa;
    --button-text-light: #fff9f9;

    /* MultiSelect pill colors */
    --pill-default-bg: #555555;
    --pill-default-color: #ffffff;

    /* Table colors */
    --table-bg-dark: #222;
    --table-row-hover: #2e2e2e;
    --table-row-dark: rgb(33, 33, 33);
    /* Shadow colors */
    --shadow-color-sm: rgba(0, 0, 0, 0.1);
    --shadow-color-md: rgba(0, 0, 0, 0.15);
    --shadow-color-lg: rgba(0, 0, 0, 0.2);
    --shadow-focus: rgba(64, 64, 64, 0.25);
    --shadow-subtle: rgba(199, 199, 199, 0.25);
}


/* ============================================================================
   This section implements dynamic pill coloring:
   - Grey pills by default when repos/orgs are selected
   - Blue pills (like Data Ready badge) when search is executing

   The .searching class is toggled by a callback in index_callbacks.py


/* Style for filter pills (grey by default when selected) */

.mantine-MultiSelect-pill,
.mantine-MultiSelect-value {
    background-color: var(--gray-medium);
    color: var(--color-white);
}

.searchbar-dropdown .mantine-MultiSelect-pill,
.searchbar-dropdown .mantine-MultiSelect-value {
    background-color: var(--gray-medium);
    color: var(--color-white);
}


/* Style for filter pills when search is active */


/* !important needed to override inline styles from Mantine components */

.searchbar-dropdown.searching .mantine-MultiSelect-pill,
.searchbar-dropdown.searching .mantine-MultiSelect-value {
    background-color: var(--baby-blue-700) !important;
    color: var(--color-white) !important;
}