/* HP Solutions - Design System | Brown/Black/Gold Theme | Auto-generiert */
:root {
    --hp-brown: #5D4037; --hp-brown-dark: #3E2723; --hp-brown-light: #795548;
    --hp-black: #1A1A1A; --hp-black-soft: #2D2D2D;
    --hp-gold: #C9A84C; --hp-gold-dark: #A68A3E; --hp-gold-light: #D4BC6A;
    --hp-primary: #2c7a7b; --hp-secondary: #285E61;
    --hp-gray-50: #FAFAF5; --hp-gray-100: #F5F5F0; --hp-gray-200: #E8E5DE;
    --hp-gray-300: #D4CFC5; --hp-gray-400: #A8A296; --hp-gray-500: #78726A;
    --hp-shadow-sm: 0 1px 3px rgba(26,26,26,0.08);
    --hp-shadow: 0 2px 8px rgba(26,26,26,0.12);
    --hp-shadow-lg: 0 4px 16px rgba(26,26,26,0.16);
    --hp-radius: 0.5rem; --hp-radius-lg: 0.75rem;
}
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background-color: var(--hp-gray-100); color: var(--hp-black); }
.hp-navbar { background: linear-gradient(135deg, var(--hp-brown-dark), var(--hp-brown)); box-shadow: var(--hp-shadow); }
.hp-navbar .navbar-brand { color: var(--hp-gold) !important; font-weight: 600; }
.hp-navbar .nav-link { color: rgba(255,255,255,0.85) !important; }
.hp-navbar .nav-link:hover { color: var(--hp-gold-light) !important; }
.hp-card { background: #fff; border-radius: var(--hp-radius-lg); box-shadow: var(--hp-shadow-sm); border: 1px solid var(--hp-gray-200); overflow: hidden; }
.hp-card-header { background: linear-gradient(135deg, var(--hp-gray-50), #fff); padding: 1rem 1.25rem; border-bottom: 2px solid var(--hp-gold); }
.hp-card-header h5 { margin: 0; color: var(--hp-brown-dark); font-weight: 600; }
.hp-card-body { padding: 1.25rem; }
.btn-hp-primary { background: linear-gradient(135deg, var(--hp-brown), var(--hp-brown-dark)); color: #fff; border: none; border-radius: var(--hp-radius); padding: 0.5rem 1.25rem; font-weight: 500; transition: all 0.2s; }
.btn-hp-primary:hover { background: linear-gradient(135deg, var(--hp-brown-dark), var(--hp-black-soft)); color: var(--hp-gold-light); box-shadow: var(--hp-shadow); transform: translateY(-1px); }
.btn-hp-gold { background: linear-gradient(135deg, var(--hp-gold), var(--hp-gold-dark)); color: var(--hp-black); border: none; border-radius: var(--hp-radius); padding: 0.5rem 1.25rem; font-weight: 600; transition: all 0.2s; }
.btn-hp-gold:hover { background: linear-gradient(135deg, var(--hp-gold-dark), #8B7332); color: #fff; box-shadow: var(--hp-shadow); }
.btn-hp-outline { background: transparent; color: var(--hp-brown); border: 1px solid var(--hp-brown); border-radius: var(--hp-radius); padding: 0.4rem 1rem; transition: all 0.2s; }
.btn-hp-outline:hover { background: var(--hp-brown); color: #fff; }
.hp-table { border-color: var(--hp-gray-200); }
.hp-table thead { background: var(--hp-gray-50); }
.hp-table thead th { color: var(--hp-brown-dark); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--hp-gold); padding: 0.75rem 1rem; }
.hp-table tbody td { padding: 0.65rem 1rem; vertical-align: middle; }
.hp-table tbody tr:hover { background-color: var(--hp-gray-50); }
.badge-hp-gold { background: var(--hp-gold); color: var(--hp-black); font-weight: 500; }
.badge-hp-brown { background: var(--hp-brown); color: #fff; font-weight: 500; }
.form-control:focus, .form-select:focus { border-color: var(--hp-gold); box-shadow: 0 0 0 0.2rem rgba(201,168,76,0.25); }
.text-hp-brown { color: var(--hp-brown) !important; }
.text-hp-gold { color: var(--hp-gold) !important; }
.bg-hp-brown { background-color: var(--hp-brown) !important; }
.bg-hp-gold { background-color: var(--hp-gold) !important; }
.table-responsive-hp { overflow-x: auto; -webkit-overflow-scrolling: touch; }