/* ===== Variables charte graphique CeasyRM ===== */
:root {
    --bg-primary:     #F7F8FA;
    --bg-secondary:   #EEF2F6;
    --card:           #FFFFFF;
    --text-primary:   #111827;
    --text-secondary: #667085;
    --action:         #2563EB;
    --action-hover:   #1D4ED8;
    --accent:         #0F766E;
    --warning:        #D97706;
    --success:        #16A34A;
    --success-hover:  #15803D;
    --error:          #DC2626;

    --font-family:    Inter, system-ui, sans-serif;
    --fs-page:        24px;
    --fs-section:     20px;
    --fs-block:       18px;
    --fs-text:        16px;
    --fs-small:       14px;

    --space-compact:  12px;
    --space-base:     16px;
    --space-large:    24px;

    --radius-input:   10px;
    --radius-card:    12px;
    --shadow-card:    0 6px 18px rgba(15, 23, 42, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary:     #0F1115;
        --bg-secondary:   #171A21;
        --card:           #1E2430;
        --text-primary:   #F9FAFB;
        --text-secondary: #A1A9B8;
        --action:         #60A5FA;
        --action-hover:   #3B82F6;
        --accent:         #2DD4BF;
        --warning:        #F59E0B;
        --success:        #4ADE80;
        --success-hover:  #22C55E;
        --error:          #F87171;
    }
}

html[data-theme="dark"] {
    --bg-primary:     #0F1115;
    --bg-secondary:   #171A21;
    --card:           #1E2430;
    --text-primary:   #F9FAFB;
    --text-secondary: #A1A9B8;
    --action:         #60A5FA;
    --action-hover:   #3B82F6;
    --accent:         #2DD4BF;
    --warning:        #F59E0B;
    --success:        #4ADE80;
    --success-hover:  #22C55E;
    --error:          #F87171;
}

html[data-theme="light"] {
    --bg-primary:     #F7F8FA;
    --bg-secondary:   #EEF2F6;
    --card:           #FFFFFF;
    --text-primary:   #111827;
    --text-secondary: #667085;
    --action:         #2563EB;
    --action-hover:   #1D4ED8;
    --accent:         #0F766E;
    --warning:        #D97706;
    --success:        #16A34A;
    --success-hover:  #15803D;
    --error:          #DC2626;
}

/* ===== Base ===== */
html {
    font-size: var(--fs-text);
    font-family: var(--font-family);
    position: relative;
    min-height: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--fs-text);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    margin-bottom: 60px;
}

/* ===== Typographie ===== */
h1 { font-size: var(--fs-page); font-weight: 700; }
h2 { font-size: var(--fs-section); font-weight: 700; }
h3 { font-size: var(--fs-block); font-weight: 600; }

.text-muted {
    color: var(--text-secondary) !important;
    font-size: var(--fs-small);
}

/* ===== Boutons ===== */
.btn {
    border-radius: var(--radius-input);
    font-family: var(--font-family);
}

.btn-primary {
    background-color: var(--action);
    border-color: var(--action);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--action-hover);
    border-color: var(--action-hover);
    color: #fff;
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
}

.btn-success:hover {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
}

.btn-danger {
    background-color: var(--error);
    border-color: var(--error);
    color: #fff;
}

/* ===== Cartes ===== */
.card {
    background-color: var(--card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: none;
    color: var(--text-primary);
}

.card-header {
    background-color: var(--card);
    border-bottom: 1px solid var(--bg-secondary);
    border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0 !important;
}

.dashboard-card {
    border-left: 4px solid var(--action);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    background-color: var(--card);
    transition: transform 0.2s;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

/* ===== Formulaires ===== */
.form-control, .form-select {
    border-radius: var(--radius-input);
    background-color: var(--card);
    color: var(--text-primary);
    border-color: var(--bg-secondary);
    font-family: var(--font-family);
}

.form-control:focus, .form-select:focus {
    background-color: var(--card);
    color: var(--text-primary);
    border-color: var(--action);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

.form-label {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* ===== Couleurs utilitaires ===== */
.bg-primary   { background-color: var(--action) !important; }
.text-accent  { color: var(--accent); }
.text-warning { color: var(--warning); }
.text-success-custom { color: var(--success); }
.text-error   { color: var(--error); }

.badge-accent   { background-color: var(--accent);  color: #fff; border-radius: 6px; }
.badge-warning  { background-color: var(--warning); color: #fff; border-radius: 6px; }

/* ===== Navbar ===== */
.navbar-brand {
    font-size: 1.3rem;
}

/* ===== Focus ===== */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--action);
}

/* ===== Placeholders ===== */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--text-secondary);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}