/* ============================================================
   auth.css — Volcimet Auth Module Styles
   ============================================================ */

/* ---- auth/dashboard.html ---- */
.auth-dashboard-page .card.border-left-primary { border-left: 4px solid #004085; }
.auth-dashboard-page .card.border-left-success  { border-left: 4px solid #155724; }
.auth-dashboard-page .card.border-left-warning  { border-left: 4px solid #856404; }
.auth-dashboard-page .card.border-left-danger   { border-left: 4px solid #721c24; }

/* ============================================================
   auth/users.html — scoped under .users-page
   ============================================================ */

/* ---- Avatars ---- */
.up-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.up-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #153e75 0%, #1d74d8 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.up-avatar-sm {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
}

.up-avatar-placeholder-sm {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #153e75 0%, #1d74d8 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.82rem;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---- Role badges ---- */
.up-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    line-height: 1.5;
}

.up-role-badge.up-role-admin                { background: #dc3545; }
.up-role-badge.up-role-chef_exploitation    { background: #fd7e14; }
.up-role-badge.up-role-agent_exploitation   { background: #ffc107; color: #212529; }
.up-role-badge.up-role-chauffeur            { background: #0dcaf0; color: #212529; }
.up-role-badge.up-role-comptable            { background: #198754; }
.up-role-badge.up-role-commercial           { background: #0d6efd; }
.up-role-badge.up-role-charge_communication { background: #20c997; color: #212529; }

/* fallback for unknown roles */
.up-role-badge:not([class*="up-role-"]):not(.up-role-admin):not(.up-role-chef_exploitation):not(.up-role-agent_exploitation):not(.up-role-chauffeur):not(.up-role-comptable):not(.up-role-commercial):not(.up-role-charge_communication) {
    background: #6c757d;
}

/* ---- Grid view cards ---- */
.users-page .up-user-card {
    border: 1px solid var(--admin-border, #dbe3ef);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    /* override style.css .card:hover to keep our own transition */
}

.users-page .up-user-card:hover {
    box-shadow: 0 8px 28px rgba(21, 62, 117, 0.14);
    transform: translateY(-4px);
}

/* ---- Table view ---- */
.users-page .up-table th {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-muted, #6b778c);
    white-space: nowrap;
    background: var(--admin-surface-soft, #f8fafc);
}

.users-page .up-table td {
    vertical-align: middle;
    font-size: 0.88rem;
}

/* ---- Roles legend ---- */
.up-roles-legend .up-role-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--admin-border, #dbe3ef);
    background: var(--admin-surface, #fff);
}

.up-roles-legend .up-role-row-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 2px;
}

.up-roles-legend .up-role-row-desc {
    font-size: 0.78rem;
    color: var(--admin-muted, #6b778c);
    margin: 0;
}

/* ---- Mobile overrides ---- */
@media (max-width: 767px) {
    .users-page .up-user-card:hover {
        transform: none; /* skip lift on touch devices */
    }
}