/*
 * Ilion Portal - Corporate CSS Framework
 * Built on PatternFly v6 Design System
 * 
 * Table of Contents:
 * 1. CSS Custom Properties (Brand Colors, Typography, Spacing)
 * 2. Brand Identity (Logo, Corporate Styling)
 * 3. Dark/Light Mode Implementation
 * 4. Layout Components (Cards, Tables, Buttons)
 * 5. Form Controls and Widgets
 * 6. Dashboard Components (KPI, System Cards)
 * 7. Utility Classes
 */

/*-----------------------------------------------------------
 * 1. CSS Custom Properties - Corporate Design System
 *----------------------------------------------------------- */
:root {
    /* Brand Colors - Light and Dark Mode Compatible */
    --pf-t--global--color--brand--default: #FABE30; 
    --pf-t--global--color--brand--hover: #D48806;   
    --pf-t--global--color--secondary--default: #F5A623;  
    --pf-t--global--color--secondary--hover: #D48806;

    --pf-t--global--text--color--link--default: var(--pf-t--global--color--brand--default);

    /* Typography - Corporate Font Stack */
    --pf-t--global--font--family--100: 'Roboto', Arial, sans-serif;
    --pf-t--global--font--family--200: 'Roboto', Arial, sans-serif;
    --pf-t--global--font--family--300: 'Roboto', Arial, sans-serif;
    --pf-t--global--font--family--400: 'Roboto', Arial, sans-serif;
    --bs-body-font-family: 'Roboto', Arial, sans-serif;

    /* Corporate Spacing and Sizing */
    --pf-t--global--border-radius--default: 5px;
    --pf-t--global--border-radius--large: 5px;
    --pf-t--global--letter-spacing--heading: 4.4px;
    --pf-t--global--letter-spacing--subheading: 1.5px;
    --pf-t--global--spacer--xs: 0.25rem;
    --pf-t--global--spacer--sm: 0.5rem;
    --pf-t--global--spacer--md: 1rem;
    --pf-t--global--spacer--lg: 1.5rem;
    --pf-t--global--spacer--xl: 2rem;
    --pf-t--global--spacer--2xl: 3rem;

    /* Font Weights */
    --pf-t--global--font--weight--300: 300;
    --pf-t--global--font--weight--400: 400;
    --pf-t--global--font--weight--500: 500;
    --pf-t--global--font--weight--700: 700;

     /* Light Mode Colors (2025-09 refinement to reduce glare)
         Goal: slightly lower luminance, remove gold as a structural surface, keep brand for accents only */
     --pf-t--global--background-color--primary: #F2F3F5; /* was #FAFAF7 */
     --pf-t--global--background-color--secondary: #E3E6EA; /* was #E6E8ED (tiny shift cooler & darker) */
     --pf-t--global--background-color--tertiary: #D5DAE0; /* neutral elevated surface (replaces gold) */
     --pf-t--global--background-color--accent: #FABE30; /* dedicated brand accent background */
     --pf-t--global--text--color--regular: #414246; /* slight darken for contrast on darker base */
     --pf-t--global--text--color--secondary: #55595E; /* adjusted neutral */
     --pf-t--global--text--color--subtle: #6B7177; /* slightly cooler */
     --pf-t--global--text--color--on-brand: #FFFFFF;
     --pf-t--global--border-color--default: #C7CCD2; /* lowered contrast vs pure white */
     --pf-t--global--border-color--subtle: #D5D9DE; 
     --pf-t--global--border-color--hover: #FABE30;

    /* Light mode page backgrounds */
    .pf-v6-c-page__main-container,
    .pf-v6-c-page__main,
    .pf-v6-c-page__main-section,
    .pf-v6-c-page__main-body {
        background-color: var(--pf-t--global--background-color--secondary) !important;
        border: none !important;
    }

    /* Shadows and Effects */
    --pf-t--global--box-shadow--sm--shadow: 4px 4px 6px rgba(74, 74, 74, 0.18);
    --pf-t--global--box-shadow--md--shadow: 4px 4px 6px rgba(74, 74, 74, 0.18);
    --pf-t--global--box-shadow--lg--shadow: 4px 4px 6px rgba(74, 74, 74, 0.18);

    /* PatternFly Integration Variables */
    --pf-t--global--background--color--primary--default: var(--pf-t--global--background-color--primary);
    --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background-color--primary);
    --pf-t--global--background--color--secondary--default: var(--pf-t--global--background-color--primary) !important;
}

/*-----------------------------------------------------------
 * 2. Brand Identity and Corporate Styling
 *----------------------------------------------------------- */

/* Logo Adaptation */
.logo-svg {
    height: 100%;
    width: auto;
    max-height: 240px;
}

.logo-svg .logo-text { 
    fill: var(--pf-t--global--text--color--regular); 
}

.logo-svg path {
    transition: fill 0.3s ease;
}

/* (Scoped logo sizing utilities removed; start page will handle sizing locally) */

/* Corporate Typography */
h1, h2, h3, .pf-v6-c-title {
    color: var(--pf-t--global--text--color--regular);
    font-family: var(--pf-t--global--font--family--400);
}

.learning-hub-title {
    font-size: 22px;
    font-weight: var(--pf-t--global--font--weight--400);
    letter-spacing: var(--pf-t--global--letter-spacing--heading);
    color: var(--pf-t--global--text--color--regular);
    text-transform: uppercase;
}

.learning-hub-subtitle {
    font-size: 16px;
    font-weight: var(--pf-t--global--font--weight--400);
    color: var(--pf-t--global--text--color--regular);
}

/* Corporate Text Hierarchy */
.corporate-text-regular { color: var(--pf-t--global--text--color--regular); }
.corporate-text-secondary { color: var(--pf-t--global--text--color--secondary); }
.corporate-text-subtle { color: var(--pf-t--global--text--color--subtle); }

/*-----------------------------------------------------------
 * 3. Dark Mode Implementation
 *----------------------------------------------------------- */
.pf-v6-theme-dark {
    /* Dark theme palette refresh (2025-09) — cooler neutrals + disciplined gold accent */
    --pf-t--global--background-color--primary: #0F1215; /* base canvas */
    --pf-t--global--background-color--secondary: #181D22; /* layered surface */
    --pf-t--global--background-color--tertiary: #1F252B; /* elevated surface (was brand gold) */
    --pf-t--global--text--color--regular: #F2F5F7; /* primary text */
    --pf-t--global--text--color--secondary: #C8D0D6; /* secondary text */
    --pf-t--global--text--color--subtle: #88949E; /* muted / helper */
    --pf-t--global--text--color--on-brand: #FFFFFF; /* text on brand backgrounds */
    --pf-t--global--border-color--default: #354049; /* default delineation */
    --pf-t--global--border-color--subtle: #273038; /* subtle separators */
    --pf-t--global--border-color--hover: #FABE30; /* interactive emphasis (brand) */
    --pf-t--global--box-shadow--sm--shadow: 0 2px 4px rgba(0,0,0,0.6);
    --pf-t--global--box-shadow--md--shadow: 0 4px 10px rgba(0,0,0,0.65);
    --pf-t--global--box-shadow--lg--shadow: 0 8px 18px rgba(0,0,0,0.7);
    
    /* PatternFly Integration */
    --pf-t--global--background--color--primary--default: var(--pf-t--global--background-color--primary);
    --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background-color--primary) !important;
    --pf-t--global--background--color--secondary--default: var(--pf-t--global--background-color--primary) !important;
}

/* Dark mode page backgrounds */
.pf-v6-theme-dark .pf-v6-c-page__main-container,
.pf-v6-theme-dark .pf-v6-c-page__main,
.pf-v6-theme-dark .pf-v6-c-page__main-section,
.pf-v6-theme-dark .pf-v6-c-page__main-body {
    background-color: var(--pf-t--global--background-color--secondary) !important;
    border: none !important;
}

.pf-v6-theme-dark .pf-v6-c-title {
    color: var(--pf-t--global--color--brand--default) !important;
}

.pf-v6-theme-dark .logo-svg .logo-text { 
    fill: var(--pf-t--global--text--color--regular); 
}

/*-----------------------------------------------------------
 * 4. Layout Components
 *----------------------------------------------------------- */

/* Page Layout */
.pf-v6-c-page {
    background-color: var(--pf-t--global--background-color--secondary);
}

/* Corporate Card Styling */
.pf-v6-c-card {
    background: var(--pf-t--global--background-color--primary);
    border-radius: var(--pf-t--global--border-radius--default);
    box-shadow: var(--pf-t--global--box-shadow--md--shadow);
    /* border: 1px solid var(--pf-t--global--border-color--default); */
}

/* Remove all inner card borders */
.pf-v6-c-card .pf-v6-c-card__header,
.pf-v6-c-card .pf-v6-c-card__header *,
.pf-v6-c-card .pf-v6-c-card__header::before,
.pf-v6-c-card .pf-v6-c-card__header::after {
    border: none !important;
    box-shadow: none !important;
}

/* Corporate Button Styling */
.pf-v6-c-button.pf-m-primary {
    background-color: var(--pf-t--global--color--brand--default);
    border-color: var(--pf-t--global--color--brand--default);
    color: var(--pf-t--global--text--color--on-brand);
    border-radius: var(--pf-t--global--border-radius--large);
    font-weight: var(--pf-t--global--font--weight--500);
}

.pf-v6-c-button.pf-m-primary:hover {
    background-color: var(--pf-t--global--color--brand--hover);
    border-color: var(--pf-t--global--color--brand--hover);
}

.pf-v6-c-button.pf-m-secondary {
    background-color: var(--pf-t--global--background-color--tertiary);
    border-color: var(--pf-t--global--border-color--subtle);
    color: var(--pf-t--global--text--color--regular);
    border-radius: var(--pf-t--global--border-radius--large);
}

/* Corporate Table Styling */
.pf-v6-c-table {
    --pf-v6-c-table--border-width--base: 1px;
    --pf-v6-c-table--BorderColor: var(--pf-t--global--border-color--default);
}

.pf-v6-c-table thead th {
    color: var(--pf-t--global--text--color--secondary);
    font-weight: var(--pf-t--global--font--weight--500);
    border-bottom: 1px solid var(--pf-t--global--border-color--default);
    padding: var(--pf-t--global--spacer--md);
    background-color: var(--pf-t--global--background-color--secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pf-v6-c-table tbody td {
    color: var(--pf-t--global--text--color--regular);
    border-bottom: 1px solid var(--pf-t--global--border-color--default);
    padding: var(--pf-t--global--spacer--md);
    vertical-align: middle;
}

.pf-v6-c-table tbody tr:hover {
    background-color: var(--pf-t--global--background-color--secondary);
    transition: background-color 0.2s ease;
}

.pf-v6-c-table .pf-v6-c-button.pf-m-link.pf-m-inline {
    color: var(--pf-t--global--color--brand--default);
    text-decoration: none;
    font-weight: var(--pf-t--global--font--weight--500);
}

.pf-v6-c-table .pf-v6-c-button.pf-m-link.pf-m-inline:hover {
    color: var(--pf-t--global--color--brand--hover);
    text-decoration: underline;
}

/* Sidebar Styling */
#dashboard-sidebar {
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 500;
    border-right: 1px solid var(--pf-t--global--border-color--default);
}

@media (prefers-color-scheme: dark) {
    #dashboard-sidebar {
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
    }
}

/*-----------------------------------------------------------
 * 5. Form Controls and Widgets
 *----------------------------------------------------------- */

/* Form Layout Variants */
.pf-v6-c-form.pf-m-compact .pf-v6-c-form__group {
    margin-bottom: var(--pf-t--global--spacer--sm);
}

.pf-v6-c-form.pf-m-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--pf-t--global--spacer--lg);
}

.pf-v6-c-form.pf-m-grid .pf-v6-c-form__group {
    margin-bottom: 0;
}

/* Field Width Utility Classes */
.pf-v6-c-form__group.pf-m-width-auto { width: auto; max-width: fit-content; }
.pf-v6-c-form__group.pf-m-width-small { width: auto; max-width: 200px; }
.pf-v6-c-form__group.pf-m-width-medium { width: auto; max-width: 400px; }
.pf-v6-c-form__group.pf-m-width-large { width: auto; max-width: 600px; }

/* PatternFly Select Widget Styling */
.pf-v6-c-select {
    position: relative;
    display: block;
    width: 100%;
}

.pf-v6-c-select .pf-v6-c-select__toggle {
    display: flex !important;
    width: 100% !important;
    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) !important;
    background-color: var(--pf-t--global--background-color--primary) !important;
    border: 2px solid var(--pf-t--global--border-color--default) !important;
    border-radius: var(--pf-t--global--border-radius--default) !important;
    color: var(--pf-t--global--text--color--regular) !important;
    font-family: var(--pf-t--global--font--family--400) !important;
    min-height: 40px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.pf-v6-c-select .pf-v6-c-select__toggle:hover {
    border-color: var(--pf-t--global--border-color--hover) !important;
}

.pf-v6-c-select .pf-v6-c-select__toggle:focus,
.pf-v6-c-select .pf-v6-c-select__toggle[aria-expanded="true"] {
    border-color: var(--pf-t--global--color--brand--default) !important;
    outline: 2px solid var(--pf-t--global--color--brand--default) !important;
    outline-offset: 2px !important;
}

.pf-v6-c-select .pf-v6-c-select__toggle-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: var(--pf-t--global--spacer--sm) !important;
}

.pf-v6-c-select .pf-v6-c-select__toggle-arrow {
    transition: transform 0.2s ease !important;
}

.pf-v6-c-select .pf-v6-c-select__toggle[aria-expanded="true"] .pf-v6-c-select__toggle-arrow {
    transform: rotate(180deg) !important;
}

.pf-v6-c-select .pf-v6-c-select__menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background-color: var(--pf-t--global--background-color--primary) !important;
    border: 2px solid var(--pf-t--global--border-color--default) !important;
    border-radius: var(--pf-t--global--border-radius--default) !important;
    box-shadow: var(--pf-t--global--box-shadow--lg--shadow) !important;
    z-index: 1000 !important;
    margin-top: 2px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

.pf-v6-c-select .pf-v6-c-select__menu.pf-m-hidden {
    display: none !important;
}

.pf-v6-c-select .pf-v6-c-menu__item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) !important;
    background: none !important;
    border: none !important;
    color: var(--pf-t--global--text--color--regular) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.pf-v6-c-select .pf-v6-c-menu__item:hover {
    background-color: var(--pf-t--global--background-color--secondary) !important;
}

.pf-v6-c-select .pf-v6-c-menu__item.pf-m-selected {
    background-color: var(--pf-t--global--color--brand--default) !important;
    color: var(--pf-t--global--text--color--on-brand) !important;
}

/* Responsive Form Behavior */
@media (max-width: 768px) {
    .pf-v6-c-form__group.pf-m-width-small,
    .pf-v6-c-form__group.pf-m-width-medium,
    .pf-v6-c-form__group.pf-m-width-large {
        max-width: 100%;
    }
    
    .pf-v6-c-form.pf-m-grid {
        grid-template-columns: 1fr;
    }
}

/*-----------------------------------------------------------
 * 6. Dashboard Components
 *----------------------------------------------------------- */

/* KPI Stats Grid */
.kpi-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--pf-t--global--spacer--lg);
    margin-bottom: var(--pf-t--global--spacer--xl);
}

.kpi-card {
    background: var(--pf-t--global--background-color--primary);
    padding: var(--pf-t--global--spacer--xl);
    border-radius: var(--pf-t--global--border-radius--default);
    box-shadow: var(--pf-t--global--box-shadow--md--shadow);
    border: 1px solid var(--pf-t--global--border-color--default);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pf-t--global--box-shadow--lg--shadow);
}

.kpi-title {
    font-size: 0.75rem;
    font-weight: var(--pf-t--global--font--weight--500);
    color: var(--pf-t--global--text--color--secondary);
    margin-bottom: var(--pf-t--global--spacer--sm);
    letter-spacing: var(--pf-t--global--letter-spacing--subheading);
    text-transform: uppercase;
}

.kpi-value {
    font-size: 2.5rem;
    font-weight: var(--pf-t--global--font--weight--700);
    color: var(--pf-t--global--color--brand--default);
    line-height: 1;
    margin-bottom: var(--pf-t--global--spacer--xs);
}

.kpi-subtext {
    font-size: 0.875rem;
    color: var(--pf-t--global--text--color--subtle);
    font-weight: var(--pf-t--global--font--weight--400);
}

/* System Cards */
.system-card {
    background: var(--pf-t--global--background-color--primary);
    border: 1px solid var(--pf-t--global--border-color--default);
    border-radius: var(--pf-t--global--border-radius--default);
    padding: var(--pf-t--global--spacer--lg);
    margin-bottom: var(--pf-t--global--spacer--md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.system-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--pf-t--global--box-shadow--md--shadow);
}

/*-----------------------------------------------------------
 * 7. Utility Classes and Animations
 *----------------------------------------------------------- */

/* Action Buttons */
.action-button-primary,
.action-button-secondary,
.action-button-outline {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.action-button-primary {
    background-color: var(--pf-t--global--color--brand--default);
    color: var(--pf-t--global--text--color--on-brand);
}

.action-button-secondary {
    background-color: var(--pf-t--global--color--neutral--600);
    color: var(--pf-t--global--text--color--on-brand);
}

.action-button-outline {
    background-color: var(--pf-t--global--background-color--primary);
    border: 1px solid var(--pf-t--global--color--neutral--600);
    color: var(--pf-t--global--text--color--regular);
}

/* Status Badges */
.status-badge {
    font-size: var(--pf-t--global--font--size--sm);
    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
    border-radius: var(--pf-t--global--border-radius--large);
    font-weight: var(--pf-t--global--font--weight--500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Animation Utilities */
@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.kpi-card.alert-warning .kpi-value {
    animation: pulse-warning 2s ease-in-out infinite;
}

.kpi-card.alert-danger .kpi-value {
    animation: pulse-danger 2s ease-in-out infinite;
}

/* Check box button border fix
.pf-v6-c-form-control {
    --pf-v6-c-form-control--before--BorderStyle: None;
} */

/*-----------------------------------------------------------
 * 8. Dropdown Components
 *----------------------------------------------------------- */

/* Enhanced Dropdown Styles for PatternFly v6 */
.pf-v6-c-dropdown {
    position: relative;
    display: inline-block;
    z-index: 9998 !important;
}

.pf-v6-c-dropdown.pf-m-expanded {
    z-index: 9999 !important;
}

.pf-v6-c-dropdown__toggle {
    background: var(--pf-t--global--background-color--primary) !important;
    border: 1px solid var(--pf-t--global--border-color--default) !important;
    border-radius: var(--pf-t--global--border-radius--default) !important;
    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) !important;
    color: var(--pf-t--global--text--color--regular) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--pf-t--global--spacer--sm);
    transition: all 0.2s ease;
    min-height: 40px;
    position: relative;
    z-index: 9998 !important;
}

.pf-v6-c-dropdown__toggle:hover {
    border-color: var(--pf-t--global--border-color--hover) !important;
    background-color: var(--pf-t--global--background-color--secondary) !important;
}

.pf-v6-c-dropdown__toggle:focus,
.pf-v6-c-dropdown__toggle[aria-expanded="true"] {
    border-color: var(--pf-t--global--color--brand--default) !important;
    outline: 2px solid var(--pf-t--global--color--brand--default) !important;
    outline-offset: 2px;
}

.pf-v6-c-dropdown__toggle-icon {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.pf-v6-c-dropdown__toggle[aria-expanded="true"] .pf-v6-c-dropdown__toggle-icon {
    transform: rotate(180deg);
}

.pf-v6-c-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--pf-t--global--background-color--primary) !important;
    border: 1px solid var(--pf-t--global--border-color--default) !important;
    border-radius: var(--pf-t--global--border-radius--default) !important;
    box-shadow: var(--pf-t--global--box-shadow--lg--shadow) !important;
    z-index: 10000 !important;
    margin-top: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

/* Ensure dropdown menus are above all buttons including kebab buttons */
.pf-v6-c-dropdown__menu.pf-m-expanded,
.pf-v6-c-dropdown__menu[aria-hidden="false"] {
    z-index: 10001 !important;
}

.pf-v6-c-dropdown__menu.pf-m-expanded {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pf-v6-c-dropdown__menu-item {
    display: block;
    width: 100%;
    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md);
    border: none;
    background: none;
    text-align: left;
    color: var(--pf-t--global--text--color--regular) !important;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.4;
}

.pf-v6-c-dropdown__menu-item:hover {
    background-color: var(--pf-t--global--background-color--secondary) !important;
    color: var(--pf-t--global--text--color--regular) !important;
}

.pf-v6-c-dropdown__menu-item:focus {
    background-color: var(--pf-t--global--color--brand--default) !important;
    color: var(--pf-t--global--text--color--on-brand) !important;
    outline: none;
}

.pf-v6-c-dropdown__menu-item:first-child {
    border-top-left-radius: var(--pf-t--global--border-radius--default);
    border-top-right-radius: var(--pf-t--global--border-radius--default);
}

.pf-v6-c-dropdown__menu-item:last-child {
    border-bottom-left-radius: var(--pf-t--global--border-radius--default);
    border-bottom-right-radius: var(--pf-t--global--border-radius--default);
}

/*-----------------------------------------------------------
 * 9. Enhanced PatternFly Select Components for Toolbar
 *----------------------------------------------------------- */

/* Enhanced PatternFly dropdown styling for project toolbar */
.pf-v6-c-select {
    position: relative;
}

.pf-v6-c-select .pf-v6-c-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--pf-t--global--background-color--primary);
    border: 1px solid var(--pf-t--global--border-color--default);
    border-radius: var(--pf-t--global--border-radius--default);
    box-shadow: var(--pf-t--global--box-shadow--lg--shadow);
    max-height: 300px;
    overflow-y: auto;
    margin-top: 2px;
}

.pf-v6-c-select .pf-v6-c-menu.pf-m-hidden {
    display: none !important;
}

.pf-v6-c-select .pf-v6-c-menu:not(.pf-m-hidden) {
    display: block !important;
}

.pf-v6-c-select .pf-v6-c-menu__item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    text-align: left;
    color: var(--pf-t--global--text--color--regular);
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.875rem;
}

.pf-v6-c-select .pf-v6-c-menu__item:hover {
    background-color: var(--pf-t--global--background-color--secondary);
}

.pf-v6-c-select .pf-v6-c-menu__item.pf-m-selected {
    background-color: var(--pf-t--global--color--brand--default);
    color: var(--pf-t--global--text--color--on-brand);
}

/* Ensure dropdown toggle has proper styling */
.pf-v6-c-select__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--pf-t--global--border-color--default);
    border-radius: var(--pf-t--global--border-radius--default);
    background: var(--pf-t--global--background-color--primary);
    color: var(--pf-t--global--text--color--regular);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-v6-c-select__toggle:hover {
    border-color: var(--pf-t--global--border-color--hover);
    background-color: var(--pf-t--global--background-color--secondary);
}

.pf-v6-c-select__toggle[aria-expanded="true"] {
    border-color: var(--pf-t--global--color--brand--default);
}

/*-----------------------------------------------------------
 * 10. Project Card Enhancements
 *----------------------------------------------------------- */

/* Project title link styling */
.pf-v6-c-card__title-text a {
    color: var(--pf-t--global--text--color--regular);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pf-v6-c-card__title-text a:hover {
    color: var(--pf-t--global--color--brand--default);
    text-decoration: underline;
}

/* Project card button icon styling */
.pf-v6-c-card__body .pf-v6-c-button .pf-v6-c-button__icon {
    color: var(--pf-t--global--text--color--regular);
}