/* HPE Design System - Light Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* HPE Brand Colors */
    --hpe-green: #01A982;
    --hpe-green-dark: #017A64;
    --hpe-green-hover: #00C896;
    
    /* HPE Backgrounds - LIGHT THEME */
    --hpe-bg: #F5F5F5;
    --hpe-surface: #FFFFFF;
    --hpe-surface-alt: #F8F8F8;
    
    /* HPE Text Colors - LIGHT THEME */
    --hpe-text-primary: #2D2D2D;
    --hpe-text-secondary: #666666;
    --hpe-text-tertiary: #999999;
    
    /* HPE Status Colors */
    --hpe-status-ok: #01A982;
    --hpe-status-warning: #FF8300;
    --hpe-status-critical: #CC0000;
    --hpe-status-info: #00739D;
    
    /* HPE Borders and Shadows - LIGHT THEME */
    --hpe-border: #DDDDDD;
    --hpe-border-light: #EEEEEE;
    --hpe-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --hpe-shadow-hover: 0 4px 12px rgba(0,0,0,0.12);
}

body {
    background: var(--hpe-bg) !important;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--hpe-text-primary) !important;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* HPE Cards */
.card {
    background: var(--hpe-surface) !important;
    border: 1px solid var(--hpe-border-light) !important;
    border-radius: 8px !important;
    box-shadow: var(--hpe-shadow) !important;
    transition: all 0.2s ease !important;
}

.card:hover {
    box-shadow: var(--hpe-shadow-hover) !important;
}

.card-header {
    background: var(--hpe-surface-alt) !important;
    border-bottom: 1px solid var(--hpe-border-light) !important;
    padding: 16px 24px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--hpe-text-primary) !important;
}

.card-body {
    padding: 24px !important;
}

/* HPE Buttons - Pill Shape */
.btn-primary {
    background: var(--hpe-green) !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 11px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    color: white !important;
}

.btn-primary:hover {
    background: var(--hpe-green-hover) !important;
    box-shadow: 0 2px 8px rgba(1, 169, 130, 0.3) !important;
}

.btn-secondary {
    background: white !important;
    border: 1px solid var(--hpe-border) !important;
    color: var(--hpe-text-primary) !important;
    border-radius: 24px !important;
    padding: 11px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.btn-secondary:hover {
    background: #F8F8F8 !important;
}

/* HPE Forms - Compact Rounded Inputs */
.form-control, .form-select {
    border: 1px solid var(--hpe-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: all 0.15s ease !important;
    background: white !important;
    color: var(--hpe-text-primary) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
    height: auto !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--hpe-green) !important;
    box-shadow: 0 0 0 3px rgba(1, 169, 130, 0.1) !important;
    outline: none !important;
    background: white !important;
}

.form-control::placeholder {
    color: var(--hpe-text-tertiary);
    opacity: 1;
}

/* HPE Form Labels */
.form-label, label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--hpe-text-primary) !important;
    margin-bottom: 6px !important;
    display: block;
}

/* HPE Inputs - ALL types */
input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], input[type="search"], select, textarea {
    background: white !important;
    border: 1px solid var(--hpe-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    color: var(--hpe-text-primary) !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 42px;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
    background: white !important;
    border-color: var(--hpe-green) !important;
    box-shadow: 0 0 0 3px rgba(1, 169, 130, 0.1) !important;
    color: var(--hpe-text-primary) !important;
}

/* HPE Alert Boxes */
.alert {
    border-radius: 6px !important;
    border: 1px solid #E5D4B5 !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    background: #FFF9E6 !important;
    color: var(--hpe-text-primary) !important;
}

.alert-success {
    background: #E8F7F3 !important;
    border-color: rgba(1, 169, 130, 0.3) !important;
}

.alert-warning {
    background: #FFF9E6 !important;
    border-color: #E5D4B5 !important;
}

.alert-danger {
    background: #FFEBEE !important;
    border-color: rgba(204, 0, 0, 0.3) !important;
}

/* HPE Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
    color: var(--hpe-text-primary) !important;
}

h1 { font-size: 28px !important; }
h2 { font-size: 24px !important; }
h3 { font-size: 20px !important; }
h4 { font-size: 18px !important; }
h5 { font-size: 16px !important; }
h6 { font-size: 15px !important; }

/* HPE Links */
a {
    color: var(--hpe-green) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

a:hover {
    color: var(--hpe-green-dark) !important;
}

/* HPE Text Colors */
.text-success { color: var(--hpe-green) !important; }
.text-primary { color: var(--hpe-green) !important; }
.text-warning { color: var(--hpe-status-warning) !important; }
.text-danger { color: var(--hpe-status-critical) !important; }
.text-info { color: var(--hpe-status-info) !important; }
.text-muted, .text-secondary { color: var(--hpe-text-secondary) !important; }
.text-white { color: white !important; }
.text-dark { color: var(--hpe-text-primary) !important; }

/* HPE General Overrides */
.card-title, .card-text, p, span, div, li, strong {
    color: var(--hpe-text-primary);
}

.bg-light, .bg-white {
    background: var(--hpe-surface) !important;
}

small {
    font-size: 12px !important;
    color: var(--hpe-text-secondary) !important;
}

.version-badge {
    background: rgba(1, 169, 130, 0.1) !important;
    color: var(--hpe-green) !important;
    border: 1px solid rgba(1, 169, 130, 0.3) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

footer {
    background: var(--hpe-surface);
    border-top: 1px solid var(--hpe-border-light);
    padding: 24px 0;
}

footer p {
    font-size: 13px;
    color: var(--hpe-text-secondary);
}