/* ═══════════════════════════════════════════════════════════
   RBAC Role-Based Theming — MedAI Healthcare AI Platform
   4 Roles: Student · Doctor · Specialist · Admin
   ═══════════════════════════════════════════════════════════ */

/* ── Role CSS Custom Properties ── */
[data-role="student"] {
    --role-primary: #A78BFA;
    --role-primary-rgb: 167,139,250;
    --role-secondary: #7C3AED;
    --role-gradient: linear-gradient(135deg, #7C3AED 0%, #A78BFA 50%, #C4B5FD 100%);
    --role-glow: 0 0 30px rgba(167,139,250,0.3), 0 0 60px rgba(124,58,237,0.15);
    --role-bg-subtle: rgba(167,139,250,0.06);
    --role-border: rgba(167,139,250,0.2);
}
[data-role="doctor"] {
    --role-primary: #00D2FF;
    --role-primary-rgb: 0,210,255;
    --role-secondary: #0096C7;
    --role-gradient: linear-gradient(135deg, #0077B6 0%, #00D2FF 50%, #90E0EF 100%);
    --role-glow: 0 0 30px rgba(0,210,255,0.3), 0 0 60px rgba(0,150,199,0.15);
    --role-bg-subtle: rgba(0,210,255,0.06);
    --role-border: rgba(0,210,255,0.2);
}
[data-role="specialist"] {
    --role-primary: #4ADE80;
    --role-primary-rgb: 74,222,128;
    --role-secondary: #16A34A;
    --role-gradient: linear-gradient(135deg, #16A34A 0%, #4ADE80 50%, #86EFAC 100%);
    --role-glow: 0 0 30px rgba(74,222,128,0.3), 0 0 60px rgba(22,163,74,0.15);
    --role-bg-subtle: rgba(74,222,128,0.06);
    --role-border: rgba(74,222,128,0.2);
}
[data-role="admin"] {
    --role-primary: #FFB100;
    --role-primary-rgb: 255,177,0;
    --role-secondary: #E09200;
    --role-gradient: linear-gradient(135deg, #E09200 0%, #FFB100 50%, #FFD166 100%);
    --role-glow: 0 0 30px rgba(255,177,0,0.3), 0 0 60px rgba(224,146,0,0.15);
    --role-bg-subtle: rgba(255,177,0,0.06);
    --role-border: rgba(255,177,0,0.2);
}

/* ── Role Badge Chips ── */
.role-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.3px;
}
.chip-student    { background: rgba(167,139,250,0.15); color: #A78BFA; border: 1px solid rgba(167,139,250,0.25); }
.chip-doctor     { background: rgba(0,210,255,0.15);   color: #00D2FF; border: 1px solid rgba(0,210,255,0.25); }
.chip-specialist { background: rgba(74,222,128,0.15);  color: #4ADE80; border: 1px solid rgba(74,222,128,0.25); }
.chip-admin      { background: rgba(255,177,0,0.15);   color: #FFB100; border: 1px solid rgba(255,177,0,0.25); }

/* ═══════════════════════════════════════
   LOGIN PAGE — Professional Role Cards
   ═══════════════════════════════════════ */
.role-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.role-login-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding: 18px 14px 14px;
    border-radius: 14px;
    background: var(--bg-card, rgba(22,25,42,0.6));
    border: 1.5px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    overflow: hidden;
    text-align: center;
}
.role-login-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.role-login-card:hover::before { opacity: 1; }

.role-login-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--card-accent);
    box-shadow: var(--card-glow);
}

.role-login-card .role-card-icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    font-size: 24px;
    margin-bottom: 10px;
    background: var(--card-icon-bg);
    transition: transform 0.3s ease;
}
.role-login-card:hover .role-card-icon {
    transform: scale(1.12) rotate(-3deg);
}

.role-login-card .role-card-name {
    font-size: 13px; font-weight: 700;
    color: var(--text-primary, #fff);
    margin-bottom: 4px;
}
.role-login-card .role-card-desc {
    font-size: 10.5px;
    color: var(--text-muted, rgba(255,255,255,0.5));
    line-height: 1.4;
    margin-bottom: 8px;
}
.role-login-card .role-card-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 10px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase;
}

/* Per-role card colors */
.role-login-card[data-role="student"] {
    --card-accent: #A78BFA;
    --card-glow: 0 4px 24px rgba(167,139,250,0.25), 0 0 40px rgba(167,139,250,0.1);
    --card-icon-bg: rgba(167,139,250,0.12);
}
.role-login-card[data-role="student"] .role-card-badge {
    background: rgba(167,139,250,0.15); color: #A78BFA;
}

.role-login-card[data-role="doctor"] {
    --card-accent: #00D2FF;
    --card-glow: 0 4px 24px rgba(0,210,255,0.25), 0 0 40px rgba(0,210,255,0.1);
    --card-icon-bg: rgba(0,210,255,0.12);
}
.role-login-card[data-role="doctor"] .role-card-badge {
    background: rgba(0,210,255,0.15); color: #00D2FF;
}

.role-login-card[data-role="specialist"] {
    --card-accent: #4ADE80;
    --card-glow: 0 4px 24px rgba(74,222,128,0.25), 0 0 40px rgba(74,222,128,0.1);
    --card-icon-bg: rgba(74,222,128,0.12);
}
.role-login-card[data-role="specialist"] .role-card-badge {
    background: rgba(74,222,128,0.15); color: #4ADE80;
}

.role-login-card[data-role="admin"] {
    --card-accent: #FFB100;
    --card-glow: 0 4px 24px rgba(255,177,0,0.25), 0 0 40px rgba(255,177,0,0.1);
    --card-icon-bg: rgba(255,177,0,0.12);
}
.role-login-card[data-role="admin"] .role-card-badge {
    background: rgba(255,177,0,0.15); color: #FFB100;
}

/* Active state for role cards */
.role-login-card.active-card {
    border-color: var(--card-accent) !important;
    box-shadow: var(--card-glow) !important;
    background: rgba(var(--role-primary-rgb, 108,99,255), 0.08) !important;
}
.role-login-card.active-card::before { opacity: 1 !important; }

/* ═══════════════════════════════════════
   DYNAMIC SIDEBAR THEMING
   ═══════════════════════════════════════ */

/* Sidebar role indicator stripe */
.sidebar-role-header {
    padding: 16px 14px 12px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px;
}
.sidebar-role-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    background: var(--role-bg-subtle);
    border: 1px solid var(--role-border);
}
.sidebar-role-info {
    flex: 1; min-width: 0;
}
.sidebar-role-name {
    font-size: 12px; font-weight: 700;
    color: var(--role-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-role-badge {
    font-size: 9.5px; font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* Active sidebar nav item uses role color */
.sidebar-nav-item.active {
    background: var(--role-bg-subtle, rgba(108,99,255,0.1)) !important;
    color: var(--role-primary, #6C63FF) !important;
    border-left: 3px solid var(--role-primary, #6C63FF);
}
.sidebar-nav-item.active .sidebar-nav-label {
    color: var(--role-primary, #6C63FF);
    font-weight: 600;
}

/* ═══════════════════════════════════════
   ROLE-BASED DASHBOARD WIDGETS
   ═══════════════════════════════════════ */
.role-dashboard-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
}
.role-dashboard-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    font-size: 26px;
    background: var(--role-gradient);
    box-shadow: var(--role-glow);
}
.role-dashboard-title {
    font-size: 22px; font-weight: 800;
    background: var(--role-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.role-dashboard-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Quick Action Cards */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.quick-action-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-card, rgba(22,25,42,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.quick-action-card:hover {
    transform: translateY(-2px);
    border-color: var(--role-primary);
    box-shadow: 0 4px 20px rgba(var(--role-primary-rgb),0.15);
}
.quick-action-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    background: var(--role-bg-subtle);
    flex-shrink: 0;
}
.quick-action-label {
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
}
.quick-action-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Role stat cards with role gradient border */
.role-stat-card {
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-card, rgba(22,25,42,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.role-stat-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--role-gradient);
    opacity: 0.6;
}
.role-stat-value {
    font-size: 28px; font-weight: 800;
    color: var(--role-primary);
    line-height: 1;
}
.role-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.role-stat-icon {
    position: absolute; top: 14px; right: 14px;
    font-size: 20px; opacity: 0.5;
}

/* ═══════════════════════════════════════
   ROLE TRANSITION ANIMATION
   ═══════════════════════════════════════ */
.role-transition-overlay {
    position: fixed; inset: 0;
    background: var(--role-gradient);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.role-transition-overlay.flash {
    opacity: 0.12;
    pointer-events: all;
}

/* ═══════════════════════════════════════
   REGISTER ROLE SELECTOR — Enhanced
   ═══════════════════════════════════════ */
.auth-role-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.auth-role-btn-new {
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 10px;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.08);
    background: var(--bg-card, rgba(22,25,42,0.5));
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    color: var(--text-primary);
}
.auth-role-btn-new:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}
.auth-role-btn-new.active {
    border-color: var(--selected-color) !important;
    background: rgba(var(--selected-rgb), 0.08) !important;
    box-shadow: 0 0 20px rgba(var(--selected-rgb), 0.15);
}
.auth-role-btn-new .role-btn-icon {
    font-size: 22px; margin-bottom: 6px;
}
.auth-role-btn-new .role-btn-name {
    font-size: 12px; font-weight: 700;
    margin-bottom: 2px;
}
.auth-role-btn-new .role-btn-desc {
    font-size: 9.5px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Selected state per role */
.auth-role-btn-new[data-role="student"] { --selected-color: #A78BFA; --selected-rgb: 167,139,250; }
.auth-role-btn-new[data-role="doctor"]  { --selected-color: #00D2FF; --selected-rgb: 0,210,255; }
.auth-role-btn-new[data-role="specialist"] { --selected-color: #4ADE80; --selected-rgb: 74,222,128; }
.auth-role-btn-new[data-role="admin"]   { --selected-color: #FFB100; --selected-rgb: 255,177,0; }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 600px) {
    .role-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .role-login-card {
        padding: 14px 10px 10px;
    }
    .role-login-card .role-card-icon {
        width: 40px; height: 40px;
        font-size: 20px;
    }
    .role-login-card .role-card-name {
        font-size: 11.5px;
    }
    .role-login-card .role-card-desc {
        font-size: 9.5px;
    }
    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .role-dashboard-title {
        font-size: 18px;
    }
    .auth-role-grid-new {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* Light theme adjustments */
[data-theme="light"] .role-login-card {
    background: rgba(255,255,255,0.8);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .quick-action-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .role-stat-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .auth-role-btn-new {
    background: rgba(255,255,255,0.8);
    border-color: rgba(0,0,0,0.1);
}