/* ============================
   Client Area - Custom Styles
   ============================ */

/* ============================
   Hiérarchie visuelle - Fond de page
   ============================ */
body {
    background-color: var(--bg-page);
}

/* Classes utilitaires de fond */
.bg-1 {
    background-color: var(--bg-card-primary);
}

.bg-2 {
    background-color: var(--bg-card-secondary);
}

.bg-3 {
    background-color: var(--bg-card-tertiary);
}

/* ============================
   Cartes avec hiérarchie
   ============================ */
.card-level-1 {
    background-color: var(--bg-card-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.card-level-1:hover {
    box-shadow: var(--shadow-medium);
}

.card-level-2 {
    background-color: var(--bg-card-secondary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-subtle);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.card-level-2:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

.card-level-3 {
    background-color: var(--bg-card-tertiary);
    border: 1px solid var(--border-medium);
    box-shadow: none;
}



/* ============================
   Alertes avec relief
   ============================ */
.alert {
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-light);
}

/* ============================
   Filter utilities
   ============================ */
.filter-white {
    filter: brightness(0) invert(1);
}

/* ============================
   Social buttons
   ============================ */
.btn-social {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================
   Footer links
   ============================ */
.footer-links a {
    transition: color 0.2s ease-in-out;
}

.footer-links a:hover {
    color: var(--color-primary) !important;
}

/* ============================
   Document badges
   ============================ */
.badge-document {
    font-size: 0.85rem;
    background-color: var(--bg-card-primary) !important;
    border-color: var(--border-medium) !important;
}

.badge-document-action {
    font-size: 0.85rem;
    cursor: pointer;
    background-color: var(--bg-card-primary) !important;
    border-color: var(--border-medium) !important;
    transition: all 0.15s ease-in-out;
}

.badge-document-action:hover {
    background-color: var(--bg-card-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    box-shadow: var(--shadow-subtle);
}

.badge-document-action.border-end-0:hover {
    border-right: 1px solid var(--color-primary) !important;
}

/* ============================
   Status badges (subtle colors)
   ============================ */
.badge-status-pending {
    background-color: var(--badge-pending-bg);
    color: var(--badge-pending-color);
    border: 1px solid var(--badge-pending-border);
}

.badge-status-processing {
    background-color: var(--badge-processing-bg);
    color: var(--badge-processing-color);
    border: 1px solid var(--badge-processing-border);
}

.badge-status-success {
    background-color: var(--badge-success-bg);
    color: var(--badge-success-color);
    border: 1px solid var(--badge-success-border);
}

.badge-status-danger {
    background-color: var(--badge-danger-bg);
    color: var(--badge-danger-color);
    border: 1px solid var(--badge-danger-border);
}

.badge-status-warning {
    background-color: var(--badge-warning-bg);
    color: var(--badge-warning-color);
    border: 1px solid var(--badge-warning-border);
}

.badge-status-primary {
    background-color: var(--badge-primary-bg);
    color: var(--badge-primary-color);
    border: 1px solid var(--badge-primary-border);
}