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

:root {
    /* Primary Card Colors - Softer palette optimized for dark theme */
    --card-client-bg: #2563eb;
    /* Softer blue */
    --card-client-text: #ffffff;

    --card-location-bg: #5F8BBF;
    /* Pastel Sky Blue */
    --card-location-text: #ffffff;

    --card-server-bg: #5FB85F;
    /* Pastel Green */
    --card-server-text: #ffffff;

    --card-tablet-bg: #5FBFBF;
    /* Pastel Teal */
    --card-tablet-text: #ffffff;

    --card-access-point-bg: #FF9F5F;
    /* Pastel Orange */
    --card-access-point-text: #ffffff;

    --card-manager-bg: #BF5F8B;
    /* Pastel Rose */
    --card-manager-text: #ffffff;

    --card-transaction-bg: #FF6B6B;
    /* Pastel Red */
    --card-transaction-text: #ffffff;

    --card-search-bg: #0D9488;
    /* Teal */
    --card-search-text: #ffffff;

    --card-transaction-authorized-bg: #5FB85F;
    --card-transaction-authorized-bg-2: #059669;
    --card-transaction-authorized-text: #ffffff;

    --card-transaction-unauthorized-bg: #FF6B6B;
    --card-transaction-unauthorized-bg-2: #b91c1c;
    --card-transaction-unauthorized-text: #ffffff;

    --card-stats-bg: #6366f1;
    /* Indigo */
    --card-stats-text: #ffffff;

    /* Neutral/Default */
    --card-default-bg: #6C757D;
    --card-default-bg-2: #4b5563;
    --card-default-text: #ffffff;

    /* Hover states */
    --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-search-hover: #0F766E;
    --card-transaction-authorized-hover: #4FA64F;
    --card-transaction-unauthorized-hover: #E85A5A;
    --card-stats-hover: #4f46e5;
    --card-default-hover: #5A6268;

    /* Light variants */
    --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-search-light: #5eead4;
    --card-transaction-authorized-light: #8FD98F;
    --card-transaction-unauthorized-light: #FF9B9B;
    --card-stats-light: #a5b4fc;
    --card-default-light: #9CA3AF;

    /* Modern Gradient Secondary Colors (for Hue Shift) */
    --card-client-bg-2: #4f46e5;
    /* Indigo shift */
    --card-location-bg-2: #3b82f6;
    /* Blue shift */
    --card-server-bg-2: #059669;
    /* Emerald shift */
    --card-tablet-bg-2: #0891b2;
    /* Cyan shift */
    --card-access-point-bg-2: #ea580c;
    /* Orange shift */
    --card-manager-bg-2: #be185d;
    /* Pink shift */
    --card-transaction-bg-2: #dc2626;
    /* Red shift */
    --card-search-bg-2: #0891b2;
    /* Cyan shift */
    --card-stats-bg-2: #8b5cf6;
    /* Violet shift */

    /* Modern Gradients */
    --card-client-gradient: linear-gradient(135deg, var(--card-client-bg), var(--card-client-bg-2));
    --card-location-gradient: linear-gradient(135deg, var(--card-location-bg), var(--card-location-bg-2));
    --card-server-gradient: linear-gradient(135deg, var(--card-server-bg), var(--card-server-bg-2));
    --card-tablet-gradient: linear-gradient(135deg, var(--card-tablet-bg), var(--card-tablet-bg-2));
    --card-access-point-gradient: linear-gradient(135deg, var(--card-access-point-bg), var(--card-access-point-bg-2));
    --card-manager-gradient: linear-gradient(135deg, var(--card-manager-bg), var(--card-manager-bg-2));
    --card-transaction-gradient: linear-gradient(135deg, var(--card-transaction-bg), var(--card-transaction-bg-2));
    --card-search-gradient: linear-gradient(135deg, var(--card-search-bg), var(--card-search-bg-2));
    --card-stats-gradient: linear-gradient(135deg, var(--card-stats-bg), var(--card-stats-bg-2));
    --card-default-gradient: linear-gradient(135deg, var(--card-default-bg), var(--card-default-bg-2));

    /* Glass header helpers */
    --card-header-highlight: rgba(255, 255, 255, 0.02);
    --card-header-blur: 8px;
    --card-glow-strength: 8%;
}

/* Shared modern header styling - Clean professional look */
:is(.card-header-client, .card-header-location, .card-header-server, .card-header-tablet, .card-header-access-point, .card-header-manager, .card-header-transaction, .card-header-search, .card-header-transaction-authorized, .card-header-transaction-unauthorized, .card-header-stats, .card-header-default) {
    --card-header-accent: var(--card-default-bg);
    --card-header-accent-2: var(--card-default-bg-2);
    --card-header-accent-light: var(--card-default-light);
    position: relative;
    /* Consistent height for all card headers */
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--card-header-accent), transparent 55%), color-mix(in srgb, var(--card-header-accent-2), transparent 65%)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--card-header-accent), transparent 70%) !important;
    border-top: none !important;
    box-shadow: none !important;
    color: #f8fafc !important;
    text-shadow: none;
    transition: background 0.15s ease;
}

.card-header-client {
    --card-header-accent: var(--card-client-bg);
    --card-header-accent-2: var(--card-client-bg-2);
    --card-header-accent-light: var(--card-client-light);
    color: var(--card-client-text) !important;
}

.card-header-location {
    --card-header-accent: var(--card-location-bg);
    --card-header-accent-2: var(--card-location-bg-2);
    --card-header-accent-light: var(--card-location-light);
    color: var(--card-location-text) !important;
}

.card-header-server {
    --card-header-accent: var(--card-server-bg);
    --card-header-accent-2: var(--card-server-bg-2);
    --card-header-accent-light: var(--card-server-light);
    color: var(--card-server-text) !important;
}

.card-header-tablet {
    --card-header-accent: var(--card-tablet-bg);
    --card-header-accent-2: var(--card-tablet-bg-2);
    --card-header-accent-light: var(--card-tablet-light);
    color: var(--card-tablet-text) !important;
}

.card-header-access-point {
    --card-header-accent: var(--card-access-point-bg);
    --card-header-accent-2: var(--card-access-point-bg-2);
    --card-header-accent-light: var(--card-access-point-light);
    color: var(--card-access-point-text) !important;
}

.card-header-manager {
    --card-header-accent: var(--card-manager-bg);
    --card-header-accent-2: var(--card-manager-bg-2);
    --card-header-accent-light: var(--card-manager-light);
    color: var(--card-manager-text) !important;
}

.card-header-transaction {
    --card-header-accent: var(--card-transaction-bg);
    --card-header-accent-2: var(--card-transaction-bg-2);
    --card-header-accent-light: var(--card-transaction-light);
    color: var(--card-transaction-text) !important;
}

.card-header-search {
    --card-header-accent: var(--card-search-bg);
    --card-header-accent-2: var(--card-search-bg-2);
    --card-header-accent-light: var(--card-search-light);
    color: var(--card-search-text) !important;
}

.card-header-transaction-authorized {
    --card-header-accent: var(--card-transaction-authorized-bg);
    --card-header-accent-2: var(--card-transaction-authorized-bg-2);
    --card-header-accent-light: var(--card-transaction-authorized-light);
    color: var(--card-transaction-authorized-text) !important;
}

.card-header-transaction-unauthorized {
    --card-header-accent: var(--card-transaction-unauthorized-bg);
    --card-header-accent-2: var(--card-transaction-unauthorized-bg-2);
    --card-header-accent-light: var(--card-transaction-unauthorized-light);
    color: var(--card-transaction-unauthorized-text) !important;
}

.card-header-stats {
    --card-header-accent: var(--card-stats-bg);
    --card-header-accent-2: var(--card-stats-bg-2);
    --card-header-accent-light: var(--card-stats-light);
    color: var(--card-stats-text) !important;
}

.card-header-default {
    --card-header-accent: var(--card-default-bg);
    --card-header-accent-2: var(--card-default-bg-2);
    --card-header-accent-light: var(--card-default-light);
    color: var(--card-default-text) !important;
}

:is(.card-header-client, .card-header-location, .card-header-server, .card-header-tablet, .card-header-access-point, .card-header-manager, .card-header-transaction, .card-header-search, .card-header-transaction-authorized, .card-header-transaction-unauthorized, .card-header-stats, .card-header-default):hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--card-header-accent), transparent 50%), color-mix(in srgb, var(--card-header-accent-2), transparent 60%)) !important;
}

:is(.card-header-client, .card-header-location, .card-header-server, .card-header-tablet, .card-header-access-point, .card-header-manager, .card-header-transaction, .card-header-search, .card-header-transaction-authorized, .card-header-transaction-unauthorized, .card-header-stats, .card-header-default) .oi {
    color: var(--card-header-accent-light, #bfdbfe) !important;
    opacity: 0.85;
}

/* Badge variants */
.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 */
.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 */
.card-header-client,
.card-header-location,
.card-header-server,
.card-header-tablet,
.card-header-access-point,
.card-header-manager,
.card-header-transaction,
.card-header-transaction-authorized,
.card-header-transaction-unauthorized,
.card-header-stats,
.card-header-default {
    transition: background 0.15s ease-in-out, transform 0.15s ease-in-out;
}

/* Card-level glow: cards inherit accent hue when a typed header is present */
.card:has(.card-header-client) {
    --glass-card-glow: color-mix(in srgb, var(--card-client-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-location) {
    --glass-card-glow: color-mix(in srgb, var(--card-location-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-server) {
    --glass-card-glow: color-mix(in srgb, var(--card-server-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-tablet) {
    --glass-card-glow: color-mix(in srgb, var(--card-tablet-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-access-point) {
    --glass-card-glow: color-mix(in srgb, var(--card-access-point-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-manager) {
    --glass-card-glow: color-mix(in srgb, var(--card-manager-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-transaction) {
    --glass-card-glow: color-mix(in srgb, var(--card-transaction-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-search) {
    --glass-card-glow: color-mix(in srgb, var(--card-search-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-transaction-authorized) {
    --glass-card-glow: color-mix(in srgb, var(--card-transaction-authorized-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-transaction-unauthorized) {
    --glass-card-glow: color-mix(in srgb, var(--card-transaction-unauthorized-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-stats) {
    --glass-card-glow: color-mix(in srgb, var(--card-stats-bg) var(--card-glow-strength), transparent);
}

.card:has(.card-header-default) {
    --glass-card-glow: color-mix(in srgb, var(--card-default-bg) var(--card-glow-strength), transparent);
}