/* SafeStation Card Color Palette - Dark Theme Optimized */
/* Base colors: Primary Blue #0D6EFD, Background Gray #212529 */

:root {
    /* Primary Card Colors - Pastel palette optimized for dark theme */
    --card-client-bg: #0D6EFD;        /* Your main blue - keeps brand consistency */
    --card-client-text: #ffffff;
    
    --card-location-bg: #5F8BBF;      /* Pastel Sky Blue - easier on eyes, complements main blue */
    --card-location-text: #ffffff;
    
    --card-server-bg: #5FB85F;        /* Pastel Green - softer than bootstrap green */
    --card-server-text: #ffffff;
    
    --card-tablet-bg: #5FBFBF;        /* Pastel Teal - complements blue nicely */
    --card-tablet-text: #ffffff;
    
    --card-access-point-bg: #FF9F5F;  /* Pastel Orange - warm contrast */
    --card-access-point-text: #ffffff;
    
    --card-manager-bg: #BF5F8B;       /* Pastel Rose - elegant and professional */
    --card-manager-text: #ffffff;
    
    --card-transaction-bg: #FF6B6B;   /* Pastel Red - softer than bootstrap danger */
    --card-transaction-text: #ffffff;
    
    --card-transaction-authorized-bg: #5FB85F;    /* Green for authorized transactions */
    --card-transaction-authorized-text: #ffffff;
    
    --card-transaction-unauthorized-bg: #FF6B6B;  /* Red for unauthorized transactions */
    --card-transaction-unauthorized-text: #ffffff;
    
    /* Neutral/Default */
    --card-default-bg: #6C757D;       /* Your gray scheme - unchanged */
    --card-default-text: #ffffff;
    
    /* Hover states - slightly darker for interaction feedback */
    --card-client-hover: #0A58CA;
    --card-location-hover: #4F7AA6;
    --card-server-hover: #4FA64F;
    --card-tablet-hover: #4FA6A6;
    --card-access-point-hover: #E8894F;
    --card-manager-hover: #A6477A;
    --card-transaction-hover: #E85A5A;
    --card-transaction-authorized-hover: #4FA64F;
    --card-transaction-unauthorized-hover: #E85A5A;
    --card-default-hover: #5A6268;
    
    /* Light variants for badges/indicators */
    --card-client-light: #6BA3FF;
    --card-location-light: #8FB4D9;
    --card-server-light: #8FD98F;
    --card-tablet-light: #8FD9D9;
    --card-access-point-light: #FFB88F;
    --card-manager-light: #D98FB4;
    --card-transaction-light: #FF9B9B;
    --card-transaction-authorized-light: #8FD98F;
    --card-transaction-unauthorized-light: #FF9B9B;
    --card-default-light: #9CA3AF;
}

/* Card Header Classes */
.card-header-client {
    background-color: var(--card-client-bg) !important;
    color: var(--card-client-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header-location {
    background-color: var(--card-location-bg) !important;
    color: var(--card-location-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header-server {
    background-color: var(--card-server-bg) !important;
    color: var(--card-server-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header-tablet {
    background-color: var(--card-tablet-bg) !important;
    color: var(--card-tablet-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header-access-point {
    background-color: var(--card-access-point-bg) !important;
    color: var(--card-access-point-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header-manager {
    background-color: var(--card-manager-bg) !important;
    color: var(--card-manager-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header-transaction {
    background-color: var(--card-transaction-bg) !important;
    color: var(--card-transaction-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header-transaction-authorized {
    background-color: var(--card-transaction-authorized-bg) !important;
    color: var(--card-transaction-authorized-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header-transaction-unauthorized {
    background-color: var(--card-transaction-unauthorized-bg) !important;
    color: var(--card-transaction-unauthorized-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header-default {
    background-color: var(--card-default-bg) !important;
    color: var(--card-default-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hover effects for interactive headers */
.card-header-client:hover { background-color: var(--card-client-hover) !important; }
.card-header-location:hover { background-color: var(--card-location-hover) !important; }
.card-header-server:hover { background-color: var(--card-server-hover) !important; }
.card-header-tablet:hover { background-color: var(--card-tablet-hover) !important; }
.card-header-access-point:hover { background-color: var(--card-access-point-hover) !important; }
.card-header-manager:hover { background-color: var(--card-manager-hover) !important; }
.card-header-transaction:hover { background-color: var(--card-transaction-hover) !important; }
.card-header-transaction-authorized:hover { background-color: var(--card-transaction-authorized-hover) !important; }
.card-header-transaction-unauthorized:hover { background-color: var(--card-transaction-unauthorized-hover) !important; }
.card-header-default:hover { background-color: var(--card-default-hover) !important; }

/* Ensure icons inherit the text color */
.card-header-client .oi,
.card-header-location .oi,
.card-header-server .oi,
.card-header-tablet .oi,
.card-header-access-point .oi,
.card-header-manager .oi,
.card-header-transaction .oi,
.card-header-transaction-authorized .oi,
.card-header-transaction-unauthorized .oi,
.card-header-default .oi {
    color: inherit !important;
}

/* Badge variants for consistency across components */
.badge-client { background-color: var(--card-client-bg) !important; color: var(--card-client-text) !important; }
.badge-location { background-color: var(--card-location-bg) !important; color: var(--card-location-text) !important; }
.badge-server { background-color: var(--card-server-bg) !important; color: var(--card-server-text) !important; }
.badge-tablet { background-color: var(--card-tablet-bg) !important; color: var(--card-tablet-text) !important; }
.badge-access-point { background-color: var(--card-access-point-bg) !important; color: var(--card-access-point-text) !important; }
.badge-manager { background-color: var(--card-manager-bg) !important; color: var(--card-manager-text) !important; }
.badge-transaction { background-color: var(--card-transaction-bg) !important; color: var(--card-transaction-text) !important; }

/* Light badge variants for subtle indicators */
.badge-client-light { background-color: var(--card-client-light) !important; color: #000000 !important; }
.badge-location-light { background-color: var(--card-location-light) !important; color: #000000 !important; }
.badge-server-light { background-color: var(--card-server-light) !important; color: #000000 !important; }
.badge-tablet-light { background-color: var(--card-tablet-light) !important; color: #000000 !important; }
.badge-access-point-light { background-color: var(--card-access-point-light) !important; color: #000000 !important; }
.badge-manager-light { background-color: var(--card-manager-light) !important; color: #000000 !important; }
.badge-transaction-light { background-color: var(--card-transaction-light) !important; color: #000000 !important; }

/* Smooth transitions for better UX */
.card-header-client,
.card-header-location,
.card-header-server,
.card-header-tablet,
.card-header-access-point,
.card-header-manager,
.card-header-transaction,
.card-header-default {
    transition: background-color 0.15s ease-in-out;
}