/* * KLTA Dashboard Styles v12.04 - High Visibility Logout
 */

.klta-dashboard-wrap { display: flex; flex-direction: column; gap: 30px; text-align: left; }
.dash-section { 
    background: white; border-radius: 20px; padding: 40px; border: 1px solid #e2e8f0; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); position: relative; 
}
.dash-title { margin: 0; font-weight: 900; color: #002b5c; font-size: 32px; letter-spacing: -1px; }

.verify-success-msg { 
    background: #dcfce7; color: #166534; padding: 20px; border-radius: 15px; 
    font-weight: 800; font-size: 14px; text-align: center; border: 1px solid #bbf7d0;
    margin-bottom: 5px; box-shadow: 0 10px 20px rgba(22, 101, 52, 0.1);
}

.profile-header { display: flex; align-items: flex-start; gap: 25px; margin-bottom: 35px; border-bottom: 1px solid #f1f5f9; padding-bottom: 25px; }
.avatar-circle { width: 70px; height: 70px; background: #002b5c; color: white; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 28px; font-weight: 900; flex-shrink: 0; }
.profile-main-meta { display: flex; flex-direction: column; gap: 8px; }

.status-pill { padding: 6px 15px; border-radius: 50px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; width: fit-content; }
.status-clean { background: #dcfce7; color: #166534; }
.status-pending { background: #fee2e2; color: #991b1b; }

/* 🚪 BIG RED LOGOUT BUTTON */
.dash-logout-floating { 
    position: absolute; top: 30px; right: 40px; color: white; 
    background: #dc2626; padding: 10px 20px; border-radius: 10px;
    font-size: 14px; font-weight: 900; text-decoration: none; transition: 0.2s;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2);
}
.dash-logout-floating:hover { background: #b91c1c; transform: translateY(-2px); color: white; }

.profile-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.detail-item label { display: block; font-size: 10px; text-transform: uppercase; color: #64748b; font-weight: 900; margin-bottom: 10px; letter-spacing: 1px; }
.detail-data { margin: 0; font-weight: 700; color: #002b5c; font-size: 18px; margin-bottom: 8px; }

.verified-tag { color: #166534; font-size: 11px; font-weight: 800; background: #f0fdf4; padding: 4px 10px; border-radius: 50px; }
.pending-tag { color: #94a3b8; font-size: 11px; font-weight: 800; }
.verify-trigger-btn { 
    background: #dc2626; color: white; border: none; padding: 8px 18px; 
    border-radius: 8px; font-size: 12px; font-weight: 900; cursor: pointer;
    transition: 0.2s; box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2);
}
.verify-trigger-btn:hover { background: #b91c1c; transform: translateY(-2px); }
.otp-input-field { width: 120px; padding: 10px; border-radius: 8px; border: 2px solid #e2e8f0; font-weight: 700; text-align: center; font-size: 16px; }

.verify-error-msg { font-size: 11px; color: #dc2626; font-weight: 900; margin-top: 10px; }
.resend-link-btn { background: none; border: none; color: #64748b; font-size: 10px; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 0; }

.dash-grid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.dash-empty-state { background: #f8fafc; padding: 30px; border-radius: 20px; border: 2px dashed #e2e8f0; text-align: center; }
.dash-btn { padding: 12px 24px; border-radius: 12px; font-weight: 900; font-size: 13px; cursor: pointer; border: none; transition: 0.3s; text-decoration: none; display: inline-block; }
.small-btn { background: #002b5c; color: white; }
.small-btn.secondary { background: white; color: #002b5c; border: 1px solid #e2e8f0; margin-left: 10px; }

.apply-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-top: 25px; }
.apply-item { background: #f8fafc; padding: 25px; border-radius: 15px; text-decoration: none; color: #002b5c; font-weight: 800; border: 1px solid #e2e8f0; transition: 0.3s; }
.apply-item:hover { background: #002b5c; color: white; transform: translateX(8px); }

@media (max-width: 1100px) {
    .profile-details-grid { grid-template-columns: 1fr; gap: 25px; }
    .dash-grid-row { grid-template-columns: 1fr; }
    .dash-logout-floating { position: static; display: block; width: 100%; text-align: center; margin-bottom: 20px; }
}

/* 📱 MOBILE VIEW OPTIMIZATIONS BREAKPOINT */
@media (max-width: 768px) {
    .dash-section { 
        padding: 25px 20px !important; 
        border-radius: 16px !important; 
    }
    .dash-title { 
        font-size: 26px !important; 
        text-align: center; 
    }
    .profile-header { 
        flex-direction: column !important; 
        align-items: center !important; 
        text-align: center !important; 
        gap: 15px !important; 
    }
    .status-pill { 
        margin: 0 auto !important; 
    }
    .otp-input-field { 
        width: 100% !important; 
        max-width: 100% !important; 
        box-sizing: border-box !important; 
        margin-bottom: 12px !important; 
    }
    .verify-trigger-btn { 
        width: 100% !important; 
        display: block !important; 
        padding: 12px 18px !important; 
    }
    .e-license-card { 
        height: auto !important; 
        max-width: 100% !important; 
        padding: 15px !important; 
    }
    .klta-dash-table th, .klta-dash-table td { 
        font-size: 13px !important; 
        padding: 10px 6px !important; 
    }
}