/* ======================================================
UNIFIED DESIGN SYSTEM (UPDATED COLOR PALETTE)
Primary: #1A237E
Secondary: #FF7043
Tertiary: #64B5F6
Neutral: #77767D
====================================================== */

:root {
/* BRAND COLORS */
--primary: #1A237E;
--secondary: #FF7043;
--tertiary: #64B5F6;
--neutral: #77767D;

/* SURFACES */
--surface: #f6f7fb;
--surface-low: #eef1f6;
--surface-lowest: #ffffff;

/* TEXT */
--text-primary: #1e2430;
--text-muted: var(--neutral);

/* EFFECTS */
--shadow-soft: 0 10px 25px rgba(26, 35, 126, 0.08);
--radius: 14px;
}

/* ===== GLOBAL BACKGROUND ===== */
html,
body,
.layout-page,
.content-wrapper,
.container-p-y {
background: linear-gradient(180deg, #ffffff 0%, rgba(26, 35, 126, 0.04) 100%) !important;
color: var(--text-primary);
}

/* ===== REMOVE HARD BORDERS ===== */
body .layout-wrapper * {
border: none !important;
}

/* ===== CARDS SYSTEM ===== */
.card,
.banner-card,
.filters-card,
.chart-card,
.custom-card,
.modal-content {
background: var(--surface-lowest) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-soft) !important;
padding: 20px;
position: relative;
}

/* subtle accent line */
.card::before,
.banner-card::before,
.filters-card::before,
.chart-card::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 20%;
bottom: 20%;
width: 4px;
border-radius: 4px;
background: linear-gradient(180deg, var(--secondary), rgba(255,112,67,0.3));
}

/* ===== KPI CARDS ===== */
.kpi-card {
background: linear-gradient(180deg, rgba(100,181,246,0.12), rgba(255,112,67,0.06)) !important;
}

/* ===== HEADER ===== */
.page-header {
position: relative;
width: 100%;
min-height: 170px;
padding: 26px 30px;
margin-bottom: 20px;
border-radius: 18px;

background: linear-gradient(
135deg,
rgba(26,35,126,0.95),
rgba(100,181,246,0.85)
) !important;

color: #fff !important;
}

.page-header h1 {
font-weight: 800;
color: #fff !important;
}

.page-header .badge {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
}

/* ===== BUTTONS ===== */
.btn-primary,
.btn-success,
#btn-apply-filters {
background: linear-gradient(135deg, var(--primary), #283593) !important;
color: #fff !important;
border-radius: 10px !important;
font-weight: 600;
}

.btn-primary:hover {
background: linear-gradient(135deg, #151c5c, #1A237E) !important;
}

/* Secondary button */
.btn-outline-secondary,
#btn-reset-filters {
background: rgba(255,112,67,0.1) !important;
color: var(--secondary) !important;
border-radius: 10px !important;
}

/* ===== INPUTS ===== */
input,
select,
textarea,
.form-control,
.form-select {
background: var(--surface-low) !important;
border-radius: 10px !important;
color: var(--text-primary) !important;
}

input:focus,
select:focus,
textarea:focus {
background: #fff !important;
outline: 2px solid rgba(26,35,126,0.2);
}

/* ===== FILTER CARD ===== */
.filters-card {
background: linear-gradient(
180deg,
rgba(255,255,255,0.95),
rgba(100,181,246,0.08)
) !important;
}

/* ===== TABLE ===== */
.table thead th {
background: rgba(26,35,126,0.08) !important;
color: var(--primary) !important;
font-weight: 700;
}

.table tbody tr {
background: #fff !important;
}

.table tbody tr:hover td {
background: rgba(100,181,246,0.08) !important;
}

/* ===== BADGES ===== */
.badge {
background: rgba(26,35,126,0.08);
color: var(--primary);
font-weight: 600;
}

/* ===== LEGENDS ===== */
.legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
}

.legend-swatch {
width: 12px;
height: 12px;
border-radius: 3px;
}

/* ===== GOUVERNORAT LIST ===== */
.gouv-item {
background: #fff;
border-radius: 8px;
padding: 8px;
}

.gouv-bar-inner {
background: linear-gradient(90deg, var(--secondary), var(--tertiary));
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.page-header {
min-height: 140px;
padding: 20px;
}
}