@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.mg-login-wrapper {
    display: flex; justify-content: center; align-items: center; padding: 45px;
    font-family: 'Inter', sans-serif;
}

.mg-login-glass-box {
    position: relative; width: 100%; width: 420px;
    background: linear-gradient(145deg, #0b1120 0%, #152036 100%) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid #E29A25 !important;
    border-radius: 16px !important;
    padding: 60px 40px 40px 40px !important;
}

/* Simulated Double Border Glow */
.mg-login-glass-box::before {
    content: ''; position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid rgba(210, 176, 108, 0.3); border-radius: 12px; pointer-events: none;
}

.mg-logo-badge span{
    font-size: 38px;
    color: #D29D2B;
    font-weight: 700;
}
.mg-logo-badge {
    position: absolute; top: -45px; left: 50%; transform: translateX(-50%);
    width: 90px; height: 90px;
    background: radial-gradient(circle, #1a2235 0%, #0c1324 100%);
    border: 2px solid #E29A25; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    z-index: 10;
}
.mg-logo-badge img { width: 55px; object-fit: contain; }

.mg-header-text h2 {
    color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-size: 24px !important;
    text-align: center; margin: 0 0 5px 0 !important; font-weight: 600; text-transform: uppercase;
}
.mg-header-text h3 {
    color: #E29A25 !important; font-family: 'Inter', sans-serif !important; font-size: 18px !important;
    text-align: center; margin: 0 0 30px 0 !important; font-weight: 600; text-transform: uppercase;
}

.mg-input-wrapper { margin-bottom: 16px !important; }
.mg-input-wrapper label {
    display: block; color: #e0e6ed !important; font-size: 14px !important; margin-bottom: 8px !important; font-weight: 400;
}
.input-inner { position: relative; }
.input-inner input {
    width: 100% !important; background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #334460 !important; color: #ffffff !important;
    padding: 14px 15px !important; border-radius: 8px !important;
    font-size: 14px !important; transition: 0.3s all ease !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important; box-sizing: border-box !important; height: auto !important;
}
.input-inner input:focus {
    border-color: #FFC85A !important; outline: none !important;
    box-shadow: 0 0 12px rgba(255, 200, 90, 0.2), inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

.mg-form-actions {
    display: flex; justify-content: space-between; margin-bottom: 25px;
}
.mg-link-gold {
    color: #D2B06C !important; font-size: 13px !important; text-decoration: none !important; transition: 0.3s;
}
.mg-link-gold:hover { color: #FFC85A !important; text-decoration: underline !important; }
.mg-link-gold.highlight { font-weight: 500 !important; }

/* Override Theme Button Styles Completely */
#mg-secure-login-form button.mg-submit-btn {
    width: 100% !important; display: block !important; padding: 16px !important;
    background: linear-gradient(180deg, #FFD15C 0%, #D29D2B 100%) !important;
    border: none !important; border-radius: 8px !important;
    color: #000000 !important; font-family: 'Inter', sans-serif !important;
    font-size: 18px !important; font-weight: 600 !important;
    cursor: pointer !important; box-shadow: 0 4px 15px rgba(210, 157, 43, 0.4) !important;
    transition: 0.3s ease !important; text-transform: uppercase !important; line-height: 1 !important;
}
#mg-secure-login-form button.mg-submit-btn:hover {
    background: linear-gradient(180deg, #FFE08A 0%, #E6B53B 100%) !important;
    box-shadow: 0 6px 20px rgba(210, 157, 43, 0.6) !important; transform: translateY(-1px);
}

.mg-divider-line {
    text-align: center; margin: 25px 0 !important; position: relative;
}
.mg-divider-line span {
    background: #0C1324; padding: 0 15px; color: #8899A6; font-size: 12px; position: relative; z-index: 2;
}
.mg-divider-line::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #334460; z-index: 1;
}

/* LinkedIn Button */
#mg-secure-login-form .mg-social-btn.linkedin-btn {
    width: 100% !important; display: flex !important; justify-content: center; align-items: center; gap: 12px;
    padding: 14px !important; background: linear-gradient(180deg, #0077B5 0%, #005E93 100%) !important;
    border: 1px solid #005E93 !important; border-radius: 8px !important;
    color: #ffffff !important; font-size: 15px !important; font-weight: 500 !important;
    text-decoration: none !important; transition: 0.3s ease !important; margin-bottom: 15px !important;
    box-shadow: 0 4px 10px rgba(0, 119, 181, 0.3) !important; box-sizing: border-box;
}
#mg-secure-login-form .mg-social-btn.linkedin-btn:hover { background: #0088cc !important; }

/* 2FA Badge */
#mg-secure-login-form .mg-2fa-status {
    width: 100% !important; display: flex !important; justify-content: center; align-items: center; gap: 10px;
    padding: 14px !important; background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #334460 !important; border-radius: 8px !important;
    color: #e0e6ed !important; font-size: 14px !important; cursor: default;
    box-sizing: border-box; transition: 0.3s;
}
#mg-secure-login-form .mg-2fa-status:hover { border-color: #D2B06C !important; color: #fff !important; }

#mg-login-message { text-align: center; margin-top: 20px; font-size: 14px; font-weight: 500; }
.mg-error { color: #ff5252 !important; text-shadow: 0 0 5px rgba(255,82,82,0.4); }
.mg-success { color: #4caf50 !important; text-shadow: 0 0 5px rgba(76,175,80,0.4); }
.mg-logged-in-msg { text-align: center; color: #D2B06C; padding: 40px; background: rgba(12, 19, 36, 0.8); border: 1px solid #D2B06C; border-radius: 12px;}


/* Password Strength Meter Styles */
.mg-password-meter {
    margin-top: 10px;
}
.meter-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}
.meter-fill {
    height: 100%;
    width: 0%;
    transition: all 0.4s ease;
}
.meter-text {
    font-size: 12px;
    color: #8899A6;
    font-weight: 500;
}

/* Strength Colors */
.strength-weak .meter-fill { width: 33%; background: #ff5252; box-shadow: 0 0 8px #ff5252; }
.strength-weak .meter-text { color: #ff5252; }
.strength-medium .meter-fill { width: 66%; background: #FFC85A; box-shadow: 0 0 8px #FFC85A; }
.strength-medium .meter-text { color: #FFC85A; }
.strength-strong .meter-fill { width: 100%; background: #4caf50; box-shadow: 0 0 8px #4caf50; }
.strength-strong .meter-text { color: #4caf50; }

/* =========================================
   PREMIUM REGISTRATION FORM FIX & RESPONSIVE
   ========================================= */

/* Glass Box Fix for Registration */
#mg-secure-register-form {
    width: 100%;
}

/* Fix Input Fields */
#mg-secure-register-form .mg-input-wrapper label {
    color: #e0e6ed !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-weight: 500 !important;
}

#mg-secure-register-form .input-inner input {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #334460 !important;
    color: #ffffff !important;
    padding: 14px 15px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

#mg-secure-register-form .input-inner input:focus {
    border-color: #FFC85A !important;
    box-shadow: 0 0 12px rgba(255, 200, 90, 0.3), inset 0 2px 4px rgba(0,0,0,0.5) !important;
    outline: none !important;
}

/* Fix The Pink Button - Make it Premium Gold */
#mg-secure-register-form button.mg-submit-btn {
    width: 100% !important;
    display: block !important;
    padding: 16px !important;
    background: linear-gradient(180deg, #FFD15C 0%, #D29D2B 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #010101 !important; /* Deep black text */
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
   
    cursor: pointer !important;
    transition: 0.3s ease !important;
    text-transform: uppercase !important;
    margin-top: 15px !important;
}

#mg-secure-register-form button.mg-submit-btn:hover {
    background: linear-gradient(180deg, #FFE08A 0%, #E6B53B 100%) !important;
    box-shadow: 0 6px 20px rgba(210, 157, 43, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Password Meter Polish */
.mg-password-meter {
    margin-top: 8px !important;
}
.mg-password-meter .meter-text {
    font-size: 12px !important;
    margin-top: 4px !important;
    display: inline-block !important;
}

/* Bottom Links */
#mg-secure-register-form .mg-form-actions a {
    color: #8899A6 !important;
    text-decoration: none !important;
    font-size: 14px !important;
}
#mg-secure-register-form .mg-form-actions a strong {
    color: #FFC85A !important;
    font-weight: bold !important;
    transition: 0.3s !important;
}
#mg-secure-register-form .mg-form-actions a:hover strong {
    color: #fff !important;
    text-decoration: underline !important;
}

/* =========================================
   MOBILE RESPONSIVE DESIGN (All Devices)
   ========================================= */
@media (max-width: 768px) {
    .mg-login-glass-box {
        padding: 50px 25px 30px 25px !important; /* Less padding on tablet */
        margin: 15px !important;
    }
    .mg-header-text h2 {
        font-size: 22px !important;
    }
    .mg-header-text h3 {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .mg-login-glass-box {
        padding: 40px 15px 25px 15px !important; /* Tight padding for phones */
        border-radius: 12px !important;
        margin: 0 !important;
    }
    .mg-login-wrapper {
        padding: 20px 0 0 0 !important;
    }
    .mg-logo-badge span {
        font-size: 32px !important;
    }
    .mg-logo-badge {
        width: 70px !important;
        height: 70px !important;
        top: -35px !important;
    }
    .mg-logo-badge img {
        width: 40px !important;
    }
    #mg-secure-register-form button.mg-submit-btn {
        font-size: 15px !important;
        padding: 14px 23px !important;
    }
}


/* =========================================
   5-STEP KYC FORM: ULTRA-PREMIUM UI & RESPONSIVE
   ========================================= */

.mg-kyc-container { display: flex; justify-content: center; padding: 40px 15px; font-family: 'Inter', sans-serif;}

/* Premium Deep Navy Glass Box */
.mg-kyc-glass-box { 
    width: 100%; max-width: 900px; 
    background: linear-gradient(145deg, #0b1120 0%, #152036 100%) !important; /* Premium Gradient Navy */
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid #2a3b5c !important; 
    border-top: 3px solid #D2B06C !important; 
    border-radius: 12px; padding: 40px; 
    /* box-shadow: 0 15px 50px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05); */
}

/* Progress Bar */
.mg-step-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.step-circle { 
    width: 40px; height: 40px; border-radius: 50%; background: #0C1324; 
    border: 2px solid #334460; color: #8899A6; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 16px; z-index: 2; transition: 0.4s;
}
/* Active Step (Gold Glow) */
.step-circle.active { 
    border-color: #FFC85A !important; 
    background: linear-gradient(180deg, #FFD15C 0%, #D29D2B 100%) !important; 
    color: #000 !important;
}
.step-line { flex-grow: 1; height: 2px; background: #334460; margin: 0 -5px; z-index: 1; transition: 0.4s; }
.step-labels { display: flex; justify-content: space-between; margin-bottom: 40px; font-size: 13px; color: #8899A6; font-weight: 500;}
.step-labels span { width: 40px; text-align: center; }

/* Form Grid System */
.mg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px; }
.mg-form-grid.full-width { grid-template-columns: 1fr; }

/* Step Title Visibility Fix */
.kyc-step-section h4.step-title {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #2a3b5c !important;
    padding-bottom: 12px !important;
    margin-bottom: 25px !important;
}

/* Premium Input Fields overrides */
.kyc-step-section label { color: #aebfd4 !important; font-size: 13px !important; margin-bottom: 6px !important; display: block !important; }
.kyc-step-section input, .kyc-step-section select, .kyc-step-section textarea {
    width: 100% !important; 
    background: rgba(4, 8, 18, 0.6) !important; /* Darker glassy background */
    border: 1px solid #2a3b5c !important; 
    color: #ffffff !important;
    padding: 12px 15px !important; border-radius: 6px !important; font-size: 14px !important;
    transition: all 0.3s ease !important;
}
.kyc-step-section input:focus, .kyc-step-section select:focus, .kyc-step-section textarea:focus { 
    background: rgba(4, 8, 18, 0.8) !important;
    border-color: #D2B06C !important; outline: none !important; 
    box-shadow: 0 0 12px rgba(210, 176, 108, 0.25), inset 0 2px 4px rgba(0,0,0,0.5) !important; 
}

/* Fix Buttons */
.step-buttons { display: flex; justify-content: space-between; margin-top: 30px; border-top: 1px solid #334460; padding-top: 25px;}

#mg-kyc-onboarding-form button.mg-submit-btn {
    background: linear-gradient(180deg, #FFD15C 0%, #D29D2B 100%) !important;
    color: #010101 !important; border: none !important; border-radius: 6px !important;
    padding: 12px 30px !important; font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 600 !important;
    text-transform: uppercase !important; cursor: pointer !important; transition: 0.3s !important;
}
#mg-kyc-onboarding-form button.mg-submit-btn:hover { background: linear-gradient(180deg, #FFE08A 0%, #E6B53B 100%) !important; transform: translateY(-2px); }

/* Previous Button Polish */
#mg-kyc-onboarding-form button.mg-btn-outline {
    background: rgba(255,255,255,0.02) !important; 
    border: 1px solid #4a5d7c !important; 
    color: #aebfd4 !important;
    padding: 12px 25px !important; border-radius: 6px !important; font-size: 15px !important; cursor: pointer !important; transition: 0.3s !important;
}
#mg-kyc-onboarding-form button.mg-btn-outline:hover:not([disabled]) { 
    background: rgba(255,255,255,0.05) !important;
    border-color: #D2B06C !important; color: #FFC85A !important; 
}
#mg-kyc-onboarding-form button.mg-btn-outline[disabled] { opacity: 0.3; cursor: not-allowed !important; }

/* Document Upload Zone (Step 4) */
.mg-file-upload-zone { border: 2px dashed #4a5d7c; border-radius: 8px; padding: 30px; text-align: center; background: rgba(0,0,0,0.2); transition: 0.3s; margin-bottom: 15px; }
.mg-file-upload-zone:hover { border-color: #D2B06C; background: rgba(210, 176, 108, 0.05); }
.mg-file-upload-zone i { font-size: 30px; color: #D2B06C; margin-bottom: 10px; }

/* Declarations (Step 5) */
.mg-checkbox-group { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; }
.mg-checkbox-group input[type="checkbox"] { width: 18px !important; height: 18px !important; margin-top: 3px; accent-color: #D2B06C; }
.mg-checkbox-group label { font-size: 13px !important; color: #aebfd4 !important; line-height: 1.5; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .mg-form-grid { grid-template-columns: 1fr; gap: 15px; }
    .mg-kyc-glass-box { padding: 30px 20px; }
    .step-labels { display: none; }
}


/* =========================================
   USER DASHBOARD: RESPONSIVE HEADER & SIDEBAR
   ========================================= */

.mg-user-dashboard-wrapper { display: flex; flex-direction: column; height: 100vh; background: #050914; font-family: 'Inter', sans-serif; }

/* --- HEADER --- */
.mg-user-topbar { display: flex; justify-content: space-between; align-items: center; background: #070b15; border-bottom: 1px solid #FFDA8F3D; height: 80px; box-sizing: border-box; }
.topbar-left-area { display: flex; align-items: center; padding-left: 20px; }
.topbar-logo { max-height: 40px; object-fit: contain; }

/* Mobile Menu Toggle Button (Hidden on Desktop) */
.mobile-toggle-btn { display: none; background: transparent; border: none; cursor: pointer; margin-right: 15px; padding: 5px; }

.topbar-right-area { display: flex; align-items: center; height: 100%; }
.topbar-action-item { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 25px; border-left: 1px solid #FFDA8F3D; cursor: pointer; transition: 0.3s; }
.topbar-action-item:hover { background: rgba(255, 255, 255, 0.02); }
.action-text { color: #ffffff; font-size: 14px; font-weight: 500; }

.notify-item { position: relative; padding: 0 25px; }
.notify-badge { position: absolute; top: 22px; right: 15px; background: #FFC85A; color: #000; font-size: 10px; font-weight: bold; width: 16px; height: 16px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 2px solid #070b15; }

.user-item { gap: 12px; }
.user-info-text { display: flex; flex-direction: column; margin-right: 10px; }
.u-name { color: #ffffff; font-weight: 500; font-size: 14px; line-height: 1.2; }
.u-company { color: #8899A6; font-size: 11px; }

/* --- DASHBOARD LAYOUT --- */
.mg-user-layout { display: flex; height: calc(100vh - 80px); overflow: hidden; position: relative; }

/* --- SIDEBAR --- */
.mg-user-sidebar { width: 290px; background: #050914; border-right: 1px solid #FFDA8F3D; display: flex; flex-direction: column; overflow-y: auto; transition: transform 0.3s ease; z-index: 100; padding-right: 15px; }

.mg-sidebar-nav { padding: 20px 0; flex-grow: 1; }
.mg-sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.mg-sidebar-nav li a { display: flex; align-items: center; gap: 15px; padding: 10px 25px; color: #e0e6ed; font-size: 14px; font-weight: 400; text-decoration: none; border-left: 4px solid transparent; transition: 0.3s; border-radius: 0 10px 10px 0; }
.mg-sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,0.02); }

.mg-sidebar-nav li{
    margin: 4px 0;
}

/* Exact Active State from Image */
.mg-sidebar-nav li.active-menu a { border-left-color: #FFC85A; color: #FFC85A; font-weight: 500; background: rgba(12, 19, 36, 0.5); }
.mg-sidebar-nav li.active-menu a svg { stroke: #FFC85A; }

.flex-between { justify-content: space-between; }
.nav-badge { background: #FFC85A; color: #000; font-size: 12px; font-weight: bold; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }

/* Support Widget */
.sidebar-support-widget { margin: 20px; padding: 20px; border: 1px solid #FFDA8F3D; border-radius: 8px; text-align: left; }
.support-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.support-title h4 { color: #FFC85A; margin: 0; font-size: 16px; font-family: 'Inter', sans-serif; }
.sidebar-support-widget p { color: #e0e6ed; font-size: 13px; line-height: 1.5; margin-bottom: 20px; }
.btn-contact-support { display: block; text-align: center; border: 1px solid #FFDA8F3D; color: #FFC85A; text-decoration: none; font-size: 13px; font-weight: bold; padding: 10px; border-radius: 4px; transition: 0.3s; }
.btn-contact-support:hover { background: #FFC85A; color: #000; }

/* Main Content (Temp) */
.mg-user-main-content { flex-grow: 1; background: #0b1120; padding: 30px; overflow-y: auto; }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 991px) {
    .topbar-logo-area { min-width: auto; padding-left: 15px; }
    .topbar-logo { max-height: 30px; }
    .mobile-toggle-btn { display: block; }
    
    /* Hide text/names on mobile header to save space */
    .hide-on-mobile { display: none !important; }
    .topbar-action-item { padding: 0 15px; }
    .user-item { padding-right: 15px; }
    
    /* Slide out sidebar off-screen */
    .mg-user-sidebar { position: absolute; height: 100%; transform: translateX(-100%); background: #050914; }
    
    /* Class added by JS to show sidebar */
    .mg-user-sidebar.show-sidebar { transform: translateX(0); box-shadow: 10px 0 30px rgba(0,0,0,0.8); }
}

/* =========================================
   USER DASHBOARD: MAIN CONTENT & CARDS
   ========================================= */

/* 1. Welcome Header Section */
.mg-dash-header-section {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;
}
.dash-welcome-text h1 {
    color: #ffffff; font-family: 'Inter', sans-serif; font-size: 26px; margin: 0 0 5px 0;
}
.dash-welcome-text p {
    color: #8899A6; font-size: 14px; margin: 0;
}

.dash-header-actions { display: flex; align-items: center; gap: 20px; }

.dash-status-box {
    border: 1px solid #D2B06C; border-radius: 6px; padding: 10px 20px;
    display: flex; align-items: center; gap: 20px; background: rgba(210, 176, 108, 0.05);
}
.status-texts { display: flex; flex-direction: column; text-align: left; }
.status-texts span { color: #aebfd4; font-size: 11px; margin-bottom: 3px; }
.status-texts strong { color: #FFC85A; font-family: 'Inter', sans-serif; font-size: 18px; }

.btn-view-verification {
    background: linear-gradient(180deg, #FFD15C 0%, #D29D2B 100%);
    color: #010101; text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 600;
    padding: 14px 25px; border-radius: 6px; display: flex; align-items: center; gap: 8px;
    font-size: 15px; transition: 0.3s;
}
.btn-view-verification:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(210, 176, 108, 0.3); }

/* 2. Action Cards Grid */
.mg-dash-cards-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}

/* Individual Card Styling */
.mg-action-card {
    background: #070b15; border: 1px solid #FFDA8F3D; border-radius: 8px; padding: 25px 20px 20px;
    display: flex; flex-direction: column; justify-content: space-between; transition: 0.3s;
}
.mg-action-card:hover { border-color: #334460; background: #0a101d; }

.card-top { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }

/* The Glowing Icon Ring */
.card-icon-ring {
    width: 45px; height: 45px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
    border: 2px solid; position: relative;
}
.card-icon-ring::before {
    content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 50%; opacity: 0.2; z-index: 0;
}
.card-icon-ring svg { z-index: 1; }

.card-info h4 { margin: 0 0 5px 0; color: #ffffff; font-size: 11px; text-transform: uppercase; }
.card-info h3 { margin: 0; color: #ffffff; font-size: 24px; font-family: 'Inter', sans-serif; font-weight: 500; }

.card-desc { color: #8899A6; font-size: 13px; line-height: 1.4; margin: 0 0 25px 0; min-height: 36px; }

.card-btn {
    display: block; text-align: center; text-decoration: none; padding: 12px;
    border-radius: 6px; font-weight: 600; font-size: 13px; transition: 0.3s;
}

/* --- Card Specific Colors (Blue, Green, Purple, Orange) --- */
/* Card 1: Blue */
.card-blue .card-icon-ring { border-color: #3b82f6; color: #3b82f6; }
.card-blue .card-icon-ring::before { border: 2px solid #3b82f6; border-left-color: transparent; border-bottom-color: transparent; }
.card-blue .card-btn { background: #0f172a; border: 1px solid #1e3a8a; color: #60a5fa; }
.card-blue .card-btn:hover { background: #1e3a8a; color: #fff; }

/* Card 2: Green */
.card-green .card-icon-ring { border-color: #10b981; color: #10b981; }
.card-green .card-icon-ring::before { border: 2px solid #10b981; border-right-color: transparent; border-bottom-color: transparent; }
.card-green .card-btn { background: #0f172a; border: 1px solid #065f46; color: #34d399; }
.card-green .card-btn:hover { background: #065f46; color: #fff; }

/* Card 3: Purple */
.card-purple .card-icon-ring { border-color: #a855f7; color: #a855f7; }
.card-purple .card-icon-ring::before { border: 2px solid #a855f7; border-top-color: transparent; border-left-color: transparent; }
.card-purple .card-btn { background: #0f172a; border: 1px solid #581c87; color: #c084fc; }
.card-purple .card-btn:hover { background: #581c87; color: #fff; }

/* Card 4: Orange */
.card-orange .card-icon-ring { border-color: #f97316; color: #f97316; }
.card-orange .card-icon-ring::before { border: 2px solid #f97316; border-right-color: transparent; border-top-color: transparent; }
.card-orange .card-btn { background: #0f172a; border: 1px solid #9a3412; color: #fb923c; }
.card-orange .card-btn:hover { background: #9a3412; color: #fff; }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1200px) {
    .mg-dash-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .mg-dash-header-section { flex-direction: column; align-items: flex-start; gap: 20px; }
    .dash-header-actions { flex-wrap: wrap; width: 100%; }
    .dash-status-box { flex-grow: 1; justify-content: space-between; }
    .btn-view-verification { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
    .mg-dash-cards-grid { grid-template-columns: 1fr; }
}


/* =========================================
   USER DASHBOARD: BOTTOM PANELS (Updates, Docs, Links)
   ========================================= */

.mg-dash-bottom-panels {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    margin-top: 30px;
}

/* Base Panel Styling */
.mg-dash-panel {
    background: #070b15; 
    border: 1px solid #FFDA8F3D; 
    border-radius: 8px; 
    padding: 25px;
    display: flex; 
    flex-direction: column; 
    transition: 0.3s;
}
.mg-dash-panel:hover {
    border-color: #334460;
}

.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.panel-title { color: #ffffff; font-size: 14px; font-weight: 600; margin: 0 0 20px 0; }
.panel-link-top { color: #3b82f6; font-size: 12px; font-weight: bold; text-decoration: none; transition: 0.3s; }
.panel-link-top:hover { color: #60a5fa; }

/* Panel 1: Recent Updates List */
.update-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
.update-list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.update-list li i { font-size: 18px; margin-top: 3px; }
.update-text p { color: #e0e6ed; font-size: 13px; margin: 0 0 5px 0; }
.update-text span { color: #8899A6; font-size: 11px; }
.panel-link { color: #3b82f6; font-size: 12px; font-weight: bold; text-decoration: none; display: flex; align-items: center; gap: 5px; margin-top: auto; }
.panel-link:hover { color: #60a5fa; }

/* Panel 2: Submitted Documents List */
.document-list { list-style: none; padding: 0; margin: 0; }
.document-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #FFDA8F3D; cursor: pointer; transition: 0.3s; }
.document-list li:last-child { border-bottom: none; }
.document-list li:hover .doc-left span { color: #fff; }
.doc-left { display: flex; align-items: center; gap: 15px; }
.doc-left span { color: #aebfd4; font-size: 13px; transition: 0.3s; }
.doc-right { display: flex; align-items: center; gap: 15px; }
.doc-badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; border: 1px solid; }
.doc-verified { color: #10b981; border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.05); }
.doc-pending { color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.05); }
.arrow { color: #8899A6; font-size: 12px; transition: 0.3s; }
.document-list li:hover .arrow { transform: translateX(3px); color: #FFC85A; }

/* Panel 3: Quick Links List */
.quick-links-list { list-style: none; padding: 0; margin: 0; }
.quick-links-list li { border-bottom: 1px solid #FFDA8F3D; }
.quick-links-list li:last-child { border-bottom: none; }
.quick-links-list li a { display: flex; align-items: center; padding: 15px 0; color: #aebfd4; text-decoration: none; font-size: 14px; transition: 0.3s; }
.quick-links-list li a i:first-child { width: 25px; font-size: 16px; text-align: left; }
.quick-links-list li a .arrow { margin-left: auto; color: #4a5d7c; }
.quick-links-list li a:hover { color: #fff; }
.quick-links-list li a:hover .arrow { color: #FFC85A; transform: translateX(3px); }

/* =========================================
   MOBILE RESPONSIVE QUERIES (Bottom Panels)
   ========================================= */
@media (max-width: 1200px) {
    .mg-dash-bottom-panels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .mg-dash-bottom-panels { grid-template-columns: 1fr; }
}


/* =========================================
   USER DASHBOARD: MY PORTALS SECTION
   ========================================= */

.mg-my-portals-section {
    margin-top: 30px;
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 25px;
}

.portals-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}
.portals-header h3 {
    margin: 0;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}
.portals-header span {
    color: #8899A6;
    font-size: 14px;
}

/* Portals Grid Setup */
.mg-portals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Individual Portal Card */
.portal-card {
    position: relative;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    border: 1px solid #FFDA8F3D;
    transition: all 0.4s ease;
}
.portal-card:hover {
    border-color: #D2B06C;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* Background Image with Zoom on Hover */
.portal-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 1;
}
.portal-card:hover .portal-bg {
    transform: scale(1.1);
}

/* Dark Gradient Overlay (Bottom to Top) */
.portal-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(5,9,20,1) 0%, rgba(5,9,20,0.8) 40%, rgba(5,9,20,0.1) 100%);
    z-index: 2;
}

/* Content over the image */
.portal-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

.portal-icon {
    color: #FFC85A;
    font-size: 32px;
    margin-bottom: 5px;
}

.portal-text {
    flex-grow: 1;
}
.portal-text h4 {
    margin: 0 0 5px 0;
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}
.portal-text p {
    margin: 0;
    color: #e0e6ed;
    font-size: 12px;
    line-height: 1.4;
}

.portal-arrow {
    color: #FFC85A;
    font-size: 16px;
    transition: 0.3s;
    margin-bottom: 5px;
}
.portal-card:hover .portal-arrow {
    transform: translateX(5px);
}


/* =========================================
   MOBILE RESPONSIVE QUERIES (Portals Section)
   ========================================= */
@media (max-width: 1200px) {
    .mg-portals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .portals-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .mg-portals-grid {
        grid-template-columns: 1fr;
    }
    .portal-card {
        height: 180px; /* Slightly shorter on mobile */
    }
}


/* =========================================
   HIDE SIDEBAR SCROLLBAR (Cross-browser)
   ========================================= */

/* Hide scrollbar for Chrome, Safari and Opera */
.mg-user-sidebar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.mg-user-sidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* =========================================
   1. ADMIN DASHBOARD: MAIN WRAPPER & LAYOUT
   ========================================= */
.mg-admin-page-wrapper {
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    background: #050914; 
    font-family: 'Inter', sans-serif;
    margin: -20px; 
}

.mg-admin-layout {
    display: flex; 
    height: calc(100vh - 80px);
    overflow: hidden; 
}

.mg-admin-main { 
    flex-grow: 1; 
    padding: 25px; 
    overflow-y: auto; 
    background: #0b1120; 
}


/* =========================================
   2. TOP HEADER (EXACT CLIENT DESIGN)
   ========================================= */
.mg-admin-topbar {
    display: flex; justify-content: space-between; align-items: center; 
    background: #070b15; border-bottom: 1px solid #FFDA8F3D;
    height: 80px; box-sizing: border-box; width: 100%; padding: 0;
}

/* Left: Mobile Toggle & Logo */
.topbar-logo-area { 
    min-width: 260px; padding: 0 25px; display: flex; align-items: center; 
}
.mobile-toggle-btn { 
    display: none; background: transparent; border: none; cursor: pointer; margin-right: 15px; padding: 5px; 
}
.topbar-logo { max-height: 40px; object-fit: contain; }

/* Middle: Title Area */
.topbar-title-area { 
    flex-grow: 1; padding-left: 25px; display: flex; flex-direction: column; justify-content: center; height: 100%; 
}
.topbar-title-area h2 { margin: 0 0 2px 0; color: #ffffff; font-family: 'Inter', sans-serif; font-size: 22px; text-transform: uppercase; }
.topbar-title-area p { margin: 0; color: #aebfd4; font-size: 13px; font-weight: 400; }

/* Right: Actions Area */
.topbar-actions-area { display: flex; align-items: center; height: 100%; }
.topbar-action-item { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 25px; border-left: 1px solid #FFDA8F3D; cursor: pointer; transition: 0.3s; }
.topbar-action-item:hover { background: rgba(255, 255, 255, 0.02); }

/* Notifications */
.notify-item { padding: 0 25px; display: flex; align-items: center; }
.notify-icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.admin-notify-badge { position: absolute; top: -5px; right: -8px; background: #FFC85A; color: #000; font-size: 10px; font-weight: bold; width: 16px; height: 16px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 2px solid #070b15; }

/* User Profile Align Right */
.user-item { gap: 0; }
.user-info-text { text-align: right; margin-right: 0; margin-left: 10px; }
.u-name { color: #ffffff; font-weight: 500; font-size: 14px; display: block; line-height: 1.2; }
.u-role { color: #8899A6; font-size: 11px; display: block; }


/* =========================================
   3. HEADER DROPDOWN MENUS
   ========================================= */
.has-dropdown { position: relative; }
.mg-header-dropdown { 
    display: none; position: absolute; top: 100%; left: auto; right: 0; 
    background: #0b1120; border: 1px solid #FFDA8F3D; border-top: 3px solid #D2B06C; border-radius: 0 0 8px 8px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.8); list-style: none !important; padding: 10px 0 !important; margin: 0 !important; 
    min-width: 180px; z-index: 999; 
}
.mg-header-dropdown li { margin: 0 !important; padding: 0 !important; }
.mg-header-dropdown li::before { content: none !important; }
.mg-header-dropdown li a { display: block; padding: 10px 20px; color: #e0e6ed; text-decoration: none; font-size: 14px; transition: 0.3s; }
.mg-header-dropdown li a i { margin-right: 10px; width: 15px; text-align: center; }
.mg-header-dropdown li a:hover { background: rgba(210, 176, 108, 0.1); color: #FFC85A; }


/* =========================================
   4. ADMIN SIDEBAR
   ========================================= */
.mg-admin-sidebar { 
    width: 290px; background: #070b15; border-right: 1px solid #FFDA8F3D; display: flex; flex-direction: column;
    overflow-y: auto; transition: transform 0.3s ease; z-index: 100; 
    -ms-overflow-style: none; scrollbar-width: none; 
}
.mg-admin-sidebar::-webkit-scrollbar { display: none; }

.mg-sidebar-nav { padding: 20px 15px 20px 0; flex-grow: 1; }
.mg-sidebar-nav ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.mg-sidebar-nav li { margin: 0 !important; padding: 0 !important; }
.mg-sidebar-nav li::before { content: none !important; }

.mg-sidebar-nav li a { 
    display: flex; align-items: center; gap: 15px; padding: 12px 25px; color: #aebfd4; font-size: 14px; 
    font-weight: 400; text-decoration: none; border-left: 4px solid transparent; transition: 0.3s; 
}
.mg-sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,0.02); }
.mg-sidebar-nav li.active-menu a { border-left-color: #FFC85A; color: #FFC85A; font-weight: 500; background: rgba(210, 176, 108, 0.05); }
.mg-sidebar-nav li.active-menu a svg { stroke: #FFC85A; }

.flex-between { justify-content: space-between; }
.nav-badge { background: #FFC85A; color: #000; font-size: 11px; font-weight: bold; padding: 3px 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }

/* Support Widget */
.sidebar-support-widget { margin: 20px; padding: 20px; border: 1px solid #334460; border-radius: 8px; text-align: left; }
.support-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.support-title h4 { color: #FFC85A; margin: 0; font-size: 15px; font-family: 'Inter', sans-serif; text-transform: uppercase;}
.sidebar-support-widget p { color: #e0e6ed; font-size: 12px; line-height: 1.5; margin-bottom: 20px; }
.btn-contact-support { display: block; text-align: center; border: 1px solid #FFC85A; color: #FFC85A; text-decoration: none; font-size: 12px; font-weight: bold; padding: 10px; border-radius: 4px; transition: 0.3s; }
.btn-contact-support:hover { background: #FFC85A; color: #000; }


/* =========================================
   5. TOP STATS CARDS & QUICK ACTIONS
   ========================================= */
.mg-admin-top-section { display: flex; gap: 20px; margin-bottom: 25px; }

.mg-admin-stats-wrapper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; flex-grow: 1; }
.mg-stat-card { background: #0d1424; border: 1px solid #FFDA8F3D; border-radius: 8px; padding: 15px 20px; display: flex; flex-direction: column; justify-content: space-between; transition: 0.3s;}
.mg-stat-card:hover { border-color: #334460; }
.stat-top { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 10px;}
.stat-icon-wrap { width: 35px; height: 35px; border-radius: 6px; display: flex; justify-content: center; align-items: center; }
.stat-text h4 { margin: 0 0 5px 0; color: #ffffff; font-size: 11px; font-weight: 600; }
.stat-text h2 { margin: 0; font-size: 26px; font-family: 'Inter', sans-serif; font-weight: 500; line-height: 1; }
.stat-bottom { margin-top: 15px; display: flex; justify-content: space-between; align-items: center; }
.stat-bottom p { margin: 0; color: #8899A6; font-size: 12px; }
.stat-bottom a { font-size: 12px; font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: 5px; transition: 0.3s; }
.stat-bottom a:hover { filter: brightness(1.3); }

/* Quick Actions Panel */
.mg-quick-actions-box { width: 250px; min-width: 250px; background: #0d1424; border: 1px solid #FFDA8F3D; border-radius: 8px; padding: 20px; }
.mg-quick-actions-box h4 { margin: 0 0 20px 0; color: #FFC85A; font-size: 12px; font-weight: 600; text-transform: uppercase;}
.mg-quick-actions-box ul { list-style: none; padding: 0; margin: 0; }
.mg-quick-actions-box li { margin-bottom: 12px; }
.mg-quick-actions-box li a { display: flex; align-items: center; gap: 12px; color: #e0e6ed; font-size: 13px; text-decoration: none; transition: 0.3s; }
.mg-quick-actions-box li a:hover { color: #fff; transform: translateX(3px); }


/* =========================================
   6. FILTER BAR
   ========================================= */
.mg-filters-wrapper { display: flex; gap: 15px; margin-bottom: 15px; align-items: flex-end; }
.mg-filter-item { display: flex; flex-direction: column; gap: 6px; }
.mg-filter-item label { color: #8899A6; font-size: 11px; }
.mg-filter-item input, .mg-filter-item select { background: #0d1424; border: 1px solid #FFDA8F3D; color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 12px; outline: none; height: 38px; box-sizing: border-box; }
.mg-filter-item input:focus, .mg-filter-item select:focus { border-color: #D2B06C; }
.search-item { flex-grow: 1; position: relative; justify-content: flex-end; }
.search-item svg { position: absolute; left: 15px; bottom: 11px; }
.search-item input { width: 100%; padding-left: 40px; }
.date-input-wrap { position: relative; }
.date-input-wrap svg { position: absolute; left: 12px; top: 12px; }
.date-input-wrap input { padding-left: 35px; width: 140px; }
.mg-btn-filter { background: transparent; border: 1px solid #D2B06C; color: #D2B06C; height: 38px; padding: 0 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
.mg-btn-filter:hover { background: #D2B06C; color: #000; }


/* =========================================
   7. DYNAMIC DATA TABLE
   ========================================= */
.mg-table-container { background: #0b1120; border: 1px solid #FFDA8F3D; border-radius: 8px; overflow-x: auto; }
.mg-data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.mg-data-table th { background: #070b15; color: #8899A6; font-size: 11px; padding: 15px 20px; border-bottom: 1px solid #FFDA8F3D; text-transform: uppercase; font-weight: 600; }
.mg-data-table td { padding: 15px 20px; border-bottom: 1px solid #FFDA8F3D; vertical-align: middle; }
.mg-data-table tr:hover { background: rgba(255,255,255,0.02); }

.td-title { color: #fff; font-size: 14px; display: block; margin-bottom: 3px; }
.td-sub { color: #8899A6; font-size: 12px; display: block; }
.td-company { display: flex; align-items: center; gap: 15px; }
.company-icon { width: 40px; height: 40px; border-radius: 50%; background: #111a2f; border: 1px solid #FFDA8F3D; display: flex; justify-content: center; align-items: center; }
.company-info strong { color: #fff; font-size: 14px; display: block; }
.company-info span { color: #e0e6ed; font-size: 12px; display: block; }
.td-email { color: #8899A6 !important; font-size: 11px !important; }
.td-type { display: flex; align-items: center; gap: 8px; color: #e0e6ed; font-size: 13px; }
.td-country, .td-risk { color: #e0e6ed; font-size: 13px; display: flex; align-items: center; gap: 8px;}
.risk-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Status Pills */
.status-pill { padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid; display: inline-block; }
.status-review { color: #FFC85A; border-color: rgba(255, 200, 90, 0.3); background: transparent; }
.status-verified { color: #10b981; border-color: rgba(16, 185, 129, 0.3); background: transparent; }
.status-rejected { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); background: transparent; }
.status-pending { color: #3b82f6; border-color: rgba(59, 130, 246, 0.3); background: transparent; }

/* Table Actions */
.td-actions { display: flex; align-items: center; gap: 10px; }
.btn-review { background: #FFC85A; color: #000; border: none; padding: 8px 15px; border-radius: 4px; font-weight: 600; font-size: 12px; cursor: pointer; transition: 0.3s; }
.btn-review:hover { background: #fff; }
.btn-more { background: transparent; border: none; cursor: pointer; display: flex; align-items: center; padding: 5px; }

/* Pagination */
.mg-pagination-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: #070b15; }
.pag-info { color: #8899A6; font-size: 13px; }
.pag-controls { display: flex; gap: 5px; }
.pag-btn { background: #111a2f; border: 1px solid #FFDA8F3D; color: #8899A6; width: 30px; height: 30px; border-radius: 4px; cursor: pointer; transition: 0.3s; display: flex; justify-content: center; align-items: center; }
.pag-btn.active, .pag-btn:hover { background: #D2B06C; color: #000; border-color: #D2B06C; }
.pag-rows { color: #8899A6; font-size: 13px; display: flex; align-items: center; gap: 10px; width: 20%; }
.pag-rows select { background: #111a2f; border: 1px solid #FFDA8F3D; color: #fff; padding: 5px; border-radius: 4px; outline: none; }
.pag-rows span{
    width: 100%;
}


/* =========================================
   BOTTOM LAYOUT: TABLE + RIGHT PANEL GRID
   ========================================= */
.mg-admin-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 50%; /* Table takes left space, Panel takes exactly 420px */
    gap: 20px;
    align-items: start;
}

/* =========================================
   8. RIGHT PANEL (STATIC QUICK VIEW - FIXED)
   ========================================= */

/* Grid to lock the layout widths */
.mg-admin-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 50%; /* Panel is strictly locked to 400px */
    gap: 25px;
    align-items: start;
}

.mg-quick-view-panel {
    width: 100%;
    /* max-width: 400px; */
    background: #070b15;
    border: 1px solid #1a2744;
    border-radius: 8px; 
    padding: 25px;
    box-sizing: border-box;
}

/* Header Action Buttons */
.btn-more-vert { display: none; } /* Hide unused vertical dot button to save space */
.close-quick-view { display: none; } /* Hide close button as it's static now */

/* Company Banner Wrap */
.panel-company-banner { 
    background: #0d1424; 
    border: 1px solid #1a2744; 
    border-radius: 8px; 
    padding: 20px; 
    display: flex; 
    gap: 15px; 
    align-items: flex-start; /* Align top so logo doesn't stretch */
    margin-bottom: 20px; 
}
.pc-logo { 
    width: 50px; 
    height: 50px; 
    min-width: 50px; 
    background: #070b15; 
    border: 1px solid #FFC85A; 
    border-radius: 6px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.pc-logo svg { width: 24px; height: 24px; } /* Smaller logo icon */

.pc-info h2 { font-size: 16px; margin: 0 0 5px 0; word-break: break-word; line-height: 1.2;}
.pc-info p { margin: 0 0 10px 0; font-size: 12px; }

/* 3-Column Meta Grid fixed to 2 columns to prevent crushing */
.pc-meta-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Force 2 columns instead of 3 */
    gap: 10px 15px; 
    border-top: 1px solid #1a2744; 
    padding-top: 15px; 
}
.pc-meta-grid div { display: flex; flex-direction: column; gap: 3px; }
.pc-meta-grid span { font-size: 10px; color: #8899A6; }
.pc-meta-grid strong { font-size: 11px; word-break: break-all;} /* Allow long ID to break */

/* Sub Tabs Scroll Fix */
.panel-sub-tabs { 
    display: flex; 
    gap: 15px;
    border-bottom: 1px solid #1a2744; 
    margin-bottom: 20px; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 5px;
}
.panel-sub-tabs::-webkit-scrollbar { height: 4px; }
.panel-sub-tabs::-webkit-scrollbar-thumb { background: #334460; border-radius: 2px; }
.panel-sub-tabs span { padding: 5px 0; font-size: 11px; flex-shrink: 0;}

/* Overview Grid Fix (Stacking instead of side-by-side) */
.panel-overview-grid { 
    display: flex; /* Changed from grid to flex column */
    flex-direction: column; 
    gap: 15px; 
    margin-bottom: 15px; 
}

/* Summary Card */
.summary-card ul { padding: 0; margin: 0; }
.summary-card li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0; }
.summary-card li span { min-width: 100px; font-size: 11px; }
.summary-card li strong { font-size: 11px; text-align: right; word-break: break-word; }

/* Progress Card Fix */
.prog-flex { 
    display: flex; 
    flex-direction: column; /* Stack circle and list vertically */
    gap: 20px; 
    align-items: center; 
}

/* Circle Progress Fix */
.prog-circle { 
    width: 100px; /* Made smaller */
    height: 100px; 
    position: relative; 
}
.prog-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.prog-circle .circle-bg { fill: none; stroke: #1a2744; stroke-width: 3; }
.prog-circle .circle-fill { fill: none; stroke: #FFC85A; stroke-width: 3; stroke-linecap: round; }
.prog-circle .circle-text { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    display: flex; flex-direction: column; align-items: center; 
}
.prog-circle .circle-text strong { font-size: 20px; }
.prog-circle .circle-text span { font-size: 9px; }

/* Progress List */
.prog-list { width: 100%; }
.prog-list li { padding: 5px 0; }
.p-item-left span { font-size: 11px; }

/* Timeline Text Fix */
.tl-content { 
    grid-template-columns: 1fr; /* Stack timeline items */
    gap: 10px; 
}
.tl-left strong, .tl-right strong { font-size: 12px; }
.tl-left span, .tl-right span { font-size: 10px; }

/* Action Buttons Grid */
.panel-bottom-actions { 
    display: grid; 
    grid-template-columns: 1fr 1fr; /* 2 buttons per row */
    gap: 10px; 
}


/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1400px) {
    .mg-admin-bottom-grid { 
        grid-template-columns: 1fr 50%; /* Panel slightly smaller on laptops */
    }
    .mg-quick-view-panel { max-width: 100%; }
}

@media (max-width: 1200px) {
    /* Stack panel below table on smaller screens */
    .mg-admin-bottom-grid { 
        grid-template-columns: 1fr; 
    } 
    .mg-quick-view-panel { 
        width: 100%; 
        max-width: 600px; /* Allow it to be wider when stacked */
        margin: 0 auto; 
    }
    /* When stacked, put overview side-by-side again */
    .panel-overview-grid { 
        flex-direction: row; 
    }
}

@media (max-width: 768px) {
    .panel-overview-grid { 
        flex-direction: column; 
    }
    .panel-bottom-actions { 
        grid-template-columns: 1fr; /* Stack buttons */
    }
}


/* =========================================
   9. MOBILE RESPONSIVE UNIFIED QUERIES
   ========================================= */
@media (max-width: 1600px) {
    .mg-admin-stats-wrapper { grid-template-columns: repeat(3, 1fr); }
    .mg-admin-top-section { flex-direction: column; }
    .mg-quick-actions-box { width: 100%; min-width: auto; display: flex; flex-direction: column; }
    .mg-quick-actions-box ul { display: flex; gap: 20px; flex-wrap: wrap; }
}

@media (max-width: 1200px) {
    .mg-filters-wrapper { flex-wrap: wrap; }
    .search-item { width: 100%; }
}

@media (max-width: 991px) {
    /* Header Adjustments */
    .mg-admin-topbar { padding: 0 15px; }
    .topbar-logo-area { min-width: auto; padding: 0; border-right: none; }
    .mobile-toggle-btn { display: block; }
    .topbar-logo { max-height: 25px; }
    .topbar-title-area { padding-left: 15px; border-left: none; }
    .topbar-title-area h2 { font-size: 16px; margin: 0; }
    .topbar-title-area p { display: none; }
    .topbar-action-item { padding: 0 15px; border-left: none; }
    .notify-item { padding: 0 10px 0 0; }
    .hide-on-mobile { display: none !important; }
    .mobile-only { display: flex !important; }
    
    /* Layout Adjustments */
    .mg-admin-main { padding: 15px; }
    .mg-admin-stats-wrapper { grid-template-columns: repeat(2, 1fr); }
    
    /* Sidebar Slide-in Logic */
    .mg-admin-sidebar { 
        position: absolute; height: 100%; transform: translateX(-100%); background: #070b15; box-shadow: none;
    }
    .mg-admin-sidebar.show-sidebar { 
        transform: translateX(0); box-shadow: 10px 0 30px rgba(0,0,0,0.8); 
    }
}

@media (max-width: 768px) {
    .mg-quick-view-panel { width: 100%; right: -100%; }
    .qv-actions { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .topbar-title-area { display: none; }
    .mg-admin-stats-wrapper { grid-template-columns: 1fr; }
    .mg-quick-actions-box ul { flex-direction: column; gap: 10px; }
    .mg-filter-item { width: 100%; }
    .mg-filter-item input, .mg-filter-item select { width: 100%; }
}


/* =========================================
   CRITICAL FIX: PREVENT HORIZONTAL SCROLL
   ========================================= */

/* 1. Kill the global horizontal scrollbar */
body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* 2. Fix Flexbox Blowout (Forces container to respect screen width) */
.mg-admin-main {
    min-width: 0 !important; /* CRITICAL: Stops the table from breaking the layout */
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 3. Make ONLY the table scrollable */
.mg-admin-bottom-grid {
    min-width: 0 !important;
    max-width: 100% !important;
}

.mg-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important; /* Table scrolls horizontally */
    -webkit-overflow-scrolling: touch !important; /* Smooth scroll on mobile */
    display: block !important;
}

/* 4. Fix negative margin overflow issue */
.mg-admin-page-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important; /* Removed negative margin */
    padding: 0 !important;
}

/* Elementor Canvas Padding Reset */
.elementor-section.elementor-top-section {
    padding: 0 !important;
}


/* =========================================
   USER DASHBOARD: MY PROFILE TAB
   ========================================= */

/* Tab Logic */
.mg-tab-content { animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Profile Top Header */
.mg-profile-top-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; }
.breadcrumb { color: #8899A6; font-size: 11px; font-weight: 600; letter-spacing: 1px; margin-bottom: 10px; display: block; }
.breadcrumb i { font-size: 8px; margin: 0 5px; }
.profile-title-area h1 { color: #ffffff; font-family: 'Inter', sans-serif; font-size: 28px; margin: 0 0 8px 0; }
.profile-title-area p { color: #e0e6ed; font-size: 13px; line-height: 1.5; margin: 0; }

.btn-edit-profile { background: transparent; border: 1px solid #FFC85A; color: #FFC85A; padding: 10px 20px; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 8px; }
.btn-edit-profile:hover { background: rgba(255, 200, 90, 0.1); }

/* Profile Header Card */
.mg-profile-header-card { background: #070b15; border: 1px solid #FFDA8F3D; border-radius: 8px; padding: 30px; display: flex; justify-content: space-between; align-items: stretch; margin-bottom: 30px; }

/* Left Side */
.profile-card-left { display: flex; gap: 30px; align-items: center; flex-grow: 1; border-right: 1px solid #FFDA8F3D; padding-right: 30px; margin-right: 30px; }
.profile-logo-box { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
.p-logo-circle { width: 90px; height: 90px; border-radius: 50%; border: 2px solid #FFC85A; display: flex; justify-content: center; align-items: center; background: #0b1120; transition: 0.3s; }
.profile-logo-box:hover .p-logo-circle { box-shadow: 0 0 15px rgba(255, 200, 90, 0.3); }
.change-logo-text { color: #8899A6; font-size: 12px; transition: 0.3s; }
.profile-logo-box:hover .change-logo-text { color: #FFC85A; }

.profile-basic-info h2 { color: #ffffff; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 500; margin: 0 0 20px 0; }
.profile-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.p-meta-item span { color: #FFC85A; font-size: 10px; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 5px; }
.p-meta-item p { color: #e0e6ed; font-size: 13px; margin: 0; display: flex; align-items: center; gap: 6px; }
.p-meta-item p i { color: #8899A6; }
.p-status { padding: 4px 10px; border-radius: 4px; border: 1px solid; display: inline-flex !important; font-weight: 500; }

/* Right Side: Completeness Circle */
.profile-card-right { min-width: 300px; display: flex; align-items: center; }
.completeness-box { width: 100%; }
.c-title { color: #FFC85A; font-size: 11px; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 15px; }
.c-flex { display: flex; align-items: center; gap: 20px; }

/* SVG Circle CSS */
.progress-circle { width: 80px; height: 80px; position: relative; }
.progress-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.circle-bg { fill: none; stroke: #FFDA8F3D; stroke-width: 2.5; }
.circle-fill { fill: none; stroke: #FFC85A; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray 1s ease-out; }
.circle-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.circle-text strong { color: #fff; font-size: 18px; font-family: 'Inter', sans-serif; font-weight: 600; line-height: 1; }
.circle-text span { color: #8899A6; font-size: 8px; font-weight: 700; margin-top: 2px; }

.c-message p { color: #e0e6ed; font-size: 12px; line-height: 1.4; margin: 0 0 10px 0; }
.btn-profile-summary { background: transparent; border: 1px solid #FFC85A; color: #FFC85A; padding: 6px 12px; border-radius: 4px; font-size: 10px; font-weight: 700; text-decoration: none; display: inline-block; transition: 0.3s; }
.btn-profile-summary:hover { background: #FFC85A; color: #000; }

/* Responsive */
@media (max-width: 1200px) {
    .mg-profile-header-card { flex-direction: column; }
    .profile-card-left { border-right: none; border-bottom: 1px solid #FFDA8F3D; padding-right: 0; padding-bottom: 30px; margin-right: 0; margin-bottom: 30px; }
}
@media (max-width: 768px) {
    .mg-profile-top-header { flex-direction: column; gap: 15px; }
    .profile-card-left { flex-direction: column; text-align: center; }
    .profile-meta-grid { grid-template-columns: 1fr 1fr; text-align: left; }
    .c-flex { flex-direction: column; text-align: center; }
}

/* =========================================
   USER DASHBOARD: PROFILE INFO GRID (3 Cols)
   ========================================= */

.mg-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Info Card Styling */
.profile-info-card {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
}
.profile-info-card:hover {
    border-color: #334460;
}

/* Card Header */
.p-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}
.p-card-header h3 {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
   
}

/* List Items (Key - Value) */
.p-info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    flex-grow: 1;
}
.p-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* For multi-line addresses */
    padding: 12px 0;
    border-bottom: 1px solid #FFDA8F3D;
}
.p-info-list li:last-child {
    border-bottom: none;
}
.p-info-list li span {
    color: #aebfd4;
    font-size: 13px;
    min-width: 120px;
    margin-right: 15px;
}
.p-info-list li strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    text-align: right;
    line-height: 1.4;
    word-break: break-word;
}

/* Bottom Outline Button */
.btn-profile-outline {
    display: block;
    text-align: center;
    background: transparent;
    border: 1px solid #D2B06C;
    color: #FFC85A;
    padding: 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
   
}
.btn-profile-outline:hover {
    background: #D2B06C;
    color: #000;
}

/* =========================================
   MOBILE RESPONSIVE QUERIES (Profile Grid)
   ========================================= */
@media (max-width: 1200px) {
    .mg-profile-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mg-profile-info-grid {
        grid-template-columns: 1fr;
    }
    .p-info-list li {
        flex-direction: column;
        gap: 5px;
    }
    .p-info-list li strong {
        text-align: left;
    }
}


/* =========================================
   USER DASHBOARD: PREFERENCES & SETTINGS
   ========================================= */

.mg-preferences-section {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 25px;
    overflow: hidden;
}

/* Left Area: Settings Links */
.pref-left-area {
    flex-grow: 1;
    padding: 30px;
}

.pref-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}
.pref-header h3 {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin: 0;
    font-weight: 600;
}

.pref-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.pref-link-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px 10px 0;
    border-right: 1px solid #FFDA8F3D;
    text-decoration: none;
    transition: 0.3s;
    margin-right: 25px;
}
.pref-link-card:hover h4 { color: #FFC85A; }
.pref-link-card:hover i { transform: translateX(3px); color: #FFC85A; }

.pref-text h4 {
    color: #e0e6ed;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 5px 0;
    transition: 0.3s;
}
.pref-text p {
    color: #8899A6;
    font-size: 12px;
    margin: 0;
}
.pref-link-card i {
    color: #8899A6;
    font-size: 12px;
    transition: 0.3s;
}

/* Right Area: Security Action */
.pref-right-area {
    width: 380px;
    min-width: 380px;
    background: rgba(255, 200, 90, 0.03);
    border-left: 1px solid #FFDA8F3D;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.security-icon-ring {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 50%;
    border: 1px solid #FFC85A;
    display: flex;
    justify-content: center;
    align-items: center;
}

.security-text-box h3 {
    color: #FFC85A;
    font-size: 13px;
    margin: 0 0 8px 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
.security-text-box p {
    color: #aebfd4;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.btn-manage-security {
    display: inline-block;
    background: transparent;
    border: 1px solid #FFC85A;
    color: #FFC85A;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
}
.btn-manage-security:hover {
    background: #FFC85A;
    color: #000;
}

/* Dashboard Footer */
.mg-user-footer {
    text-align: center;
    padding: 20px 0 10px 0;
}
.mg-user-footer p {
    color: #8899A6;
    font-size: 13px;
    margin: 0;
}
.mg-user-footer a {
    color: #aebfd4;
    text-decoration: none;
    transition: 0.3s;
}
.mg-user-footer a:hover {
    color: #FFC85A;
}
.mg-user-footer .divider {
    margin: 0 10px;
    color: #334460;
}

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1300px) {
    .mg-preferences-section {
        flex-direction: column;
    }
    .pref-right-area {
        width: 100%;
        border-left: none;
        border-top: 1px solid #FFDA8F3D;
    }
}

@media (max-width: 991px) {
    .pref-links-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pref-link-card {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }
}

@media (max-width: 600px) {
    .pref-right-area {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .mg-user-footer p {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .mg-user-footer .divider {
        display: none;
    }
}


/* =========================================
   USER DASHBOARD: TAB 3 (VERIFICATION STATUS)
   ========================================= */

/* Top Header */
.mg-verification-header {
    display: flex; justify-content: space-between; align-items: stretch; margin-bottom: 30px; gap: 20px;
}
.v-title-area h1 { color: #ffffff; font-family: 'Inter', sans-serif; font-size: 28px; margin: 0 0 8px 0; text-transform: uppercase; }
.v-title-area p { color: #e0e6ed; font-size: 13px; line-height: 1.5; margin: 0; }

.v-overall-status {
    background: #070b15; border: 1px solid #FFDA8F3D; border-radius: 8px; padding: 20px 30px;
    display: flex; align-items: center; gap: 20px; min-width: 350px;
}
.v-status-icon {
    width: 50px; height: 50px; border-radius: 50%; border: 2px solid; display: flex; justify-content: center; align-items: center;
    background: rgba(255,255,255,0.02);
}
.v-status-text span { color: #FFC85A; font-size: 10px; font-weight: 700; display: block; margin-bottom: 5px; }
.v-status-text h3 { margin: 0 0 5px 0; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 600; text-transform: uppercase; }
.v-status-text p { margin: 0; color: #8899A6; font-size: 12px; }

/* The Tracker Card */
.mg-v-tracker-card {
    background: #070b15; border: 1px solid #FFDA8F3D; border-radius: 8px; padding: 50px 30px; position: relative; margin-bottom: 30px;
}

/* Tracker Line */
.v-tracker-line {
    position: absolute; top: 85px; left: 10%; right: 10%; height: 2px; background: #FFDA8F3D; z-index: 1; border-style: dashed; border-width: 1px; border-color: #334460;
}
.v-tracker-line-fill {
    height: 100%; background: #FFC85A; box-shadow: 0 0 10px #FFC85A; transition: width 1s ease-in-out; border-style: solid;
}

/* Tracker Steps Grid */
.v-tracker-steps { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.v-step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; }

.v-icon-ring {
    width: 65px; height: 65px; border-radius: 50%; background: #070b15; border: 2px solid #334460; color: #8899A6;
    display: flex; justify-content: center; align-items: center; margin-bottom: 20px; transition: 0.4s;
}

.v-step h4 { color: #ffffff; font-size: 12px; font-weight: 600; margin: 0 0 10px 0; line-height: 1.4; }
.v-step p { color: #8899A6; font-size: 11px; line-height: 1.4; margin: 0 0 15px 0; min-height: 30px; }

/* Status Badges */
.v-badge { padding: 4px 12px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.v-badge i { margin-right: 4px; font-size: 8px; }
.v-date { display: block; color: #8899A6; font-size: 11px; margin-top: 8px; }

/* States Logic */
/* Completed State */
.v-step.completed .v-icon-ring { border-color: #FFC85A; color: #FFC85A; }
.v-step.completed h4 { color: #FFC85A; }
.v-badge.completed { background: rgba(16, 185, 129, 0.1); color: #10b981; }

/* Current State (Glowing Gold) */
.v-step.current .v-icon-ring { 
    border-color: #FFC85A; color: #FFC85A; 
    box-shadow: 0 0 20px rgba(255, 200, 90, 0.4), inset 0 0 10px rgba(255, 200, 90, 0.2); 
    transform: scale(1.1); 
}
.v-step.current h4 { color: #FFC85A; }
.v-badge.current { background: rgba(255, 200, 90, 0.1); border: 1px solid #FFC85A; color: #FFC85A; }

/* Pending State */
.v-badge.pending { background: #0b1120; border: 1px solid #FFDA8F3D; color: #4a5d7c; }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1200px) {
    .v-tracker-steps { overflow-x: auto; padding-bottom: 20px; justify-content: flex-start; gap: 40px; }
    .v-tracker-line { width: 800px; } /* Force width for scroll */
}

@media (max-width: 991px) {
    .mg-verification-header { flex-direction: column; }
    .v-overall-status { width: 100%; min-width: auto; }
}


/* =========================================
   USER DASHBOARD: VERIFICATION BOTTOM GRID
   ========================================= */

.mg-verification-bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.v-bottom-card {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.v-card-header h3 {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 25px 0;
   
    text-transform: uppercase;
}

/* Column 1: Documents List */
.v-docs-table-header {
    display: flex;
    justify-content: space-between;
    color: #8899A6;
    font-size: 10px;
    font-weight: 700;
   
    border-bottom: 1px solid #FFDA8F3D;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.v-docs-list { list-style: none; padding: 0; margin: 0 0 25px 0; flex-grow: 1; }
.v-docs-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #FFDA8F3D; }
.v-docs-list li:last-child { border-bottom: none; }

.v-doc-left { display: flex; align-items: flex-start; gap: 12px; }
.v-doc-left i { color: #FFC85A; font-size: 16px; margin-top: 2px; }
.v-doc-text strong { color: #ffffff; font-size: 13px; font-weight: 500; display: block; margin-bottom: 3px; }
.v-doc-text span { color: #8899A6; font-size: 11px; display: block; }

.v-doc-right span { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.v-doc-verified { color: #10b981; }
.v-doc-review { color: #FFC85A; }
.v-doc-pending { color: #8899A6; }

/* Column 2: Verification Details */
.v-details-list { list-style: none; padding: 0; margin: 0 0 25px 0; flex-grow: 1; }
.v-details-list li { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #FFDA8F3D; }
.v-details-list li:last-child { border-bottom: none; }
.v-det-left { display: flex; align-items: center; gap: 12px; color: #aebfd4; font-size: 13px; }
.v-details-list strong { color: #ffffff; font-size: 13px; font-weight: 400; text-align: right; }

/* Column 3: What Happens Next */
.v-timeline-list { display: flex; flex-direction: column; gap: 20px; }
.v-tl-item { display: flex; align-items: flex-start; gap: 15px; }
.v-tl-icon { width: 45px; height: 45px; min-width: 45px; border-radius: 50%; border: 1px solid #FFC85A; display: flex; justify-content: center; align-items: center; }
.v-tl-text h4 { margin: 0 0 5px 0; color: #ffffff; font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 500; }
.v-tl-text p { margin: 0; color: #8899A6; font-size: 12px; line-height: 1.5; }

/* Outline Button */
.btn-v-outline {
    display: block; text-align: center; background: transparent; border: 1px solid #D2B06C; color: #FFC85A;
    padding: 12px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: 0.3s;
}
.btn-v-outline:hover { background: #D2B06C; color: #000; }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1300px) {
    .mg-verification-bottom-grid { grid-template-columns: repeat(2, 1fr); }
    .v-bottom-card:last-child { grid-column: span 2; } /* Make 3rd card full width on tablet */
}
@media (max-width: 991px) {
    .mg-verification-bottom-grid { grid-template-columns: 1fr; }
    .v-bottom-card:last-child { grid-column: span 1; }
}


/* =========================================
   USER DASHBOARD: TAB 4 (MY DOCUMENTS)
   ========================================= */

/* Top Header & Button */
.mg-docs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.docs-title-area h1 {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    font-weight: 500;
}
.docs-title-area p {
    color: #e0e6ed;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.btn-upload-new {
    display: flex;
    align-items: center;
    gap: 15px;
    background: transparent;
    border: 1px solid #FFDA8F3D;
    padding: 15px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}
.btn-upload-new:hover {
    background: rgba(255, 200, 90, 0.05);
    border-color: #FFC85A;
}
.btn-upload-new .btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-upload-new .btn-text {
    display: flex;
    flex-direction: column;
}
.btn-upload-new .btn-text strong {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
   
    margin-bottom: 3px;
}
.btn-upload-new .btn-text span {
    color: #aebfd4;
    font-size: 11px;
}

/* Stats Bar */
.mg-docs-stats-bar {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.doc-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.doc-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.02);
}

.doc-stat-text h2 {
    margin: 0 0 2px 0;
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
}
.doc-stat-text p {
    margin: 0;
    color: #aebfd4;
    font-size: 12px;
    line-height: 1.3;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: #FFDA8F3D;
    margin: 0 20px;
}

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1200px) {
    .mg-docs-stats-bar {
        flex-wrap: wrap;
        gap: 20px;
    }
    .doc-stat-item {
        flex: 0 0 45%; /* 2 items per row */
    }
    .stat-divider {
        display: none; /* Hide dividers on wrap */
    }
}

@media (max-width: 768px) {
    .mg-docs-header {
        flex-direction: column;
        gap: 20px;
    }
    .btn-upload-new {
        width: 100%;
        box-sizing: border-box;
    }
    .mg-docs-stats-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .doc-stat-item {
        width: 100%;
    }
}


/* =========================================
   USER DASHBOARD: UPLOADED DOCUMENTS GRID
   ========================================= */

.mg-docs-grid-section {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 30px;
}

/* Header & Sort */
.docs-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #FFDA8F3D;
    padding-bottom: 15px;
}
.docs-section-title {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
   
    text-transform: uppercase;
}
.docs-sort-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.docs-sort-wrap span {
    color: #8899A6;
    font-size: 12px;
}
.docs-sort-select {
    background: transparent;
    border: 1px solid #FFDA8F3D;
    color: #e0e6ed;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}
.docs-sort-select:focus { border-color: #FFC85A; }

/* Grid Setup */
.mg-docs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Individual Document Card */
.mg-doc-card {
    background: #0a101d;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.3s;
}
.mg-doc-card:hover {
    border-color: #334460;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.doc-card-top {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 25px;
}

/* Yellow Circle Icon */
.doc-main-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    border: 1px solid #FFC85A;
    display: flex;
    justify-content: center;
    align-items: center;
}
.doc-main-icon i {
    color: #FFC85A;
    font-size: 20px;
}

/* Document Info Text */
.doc-info-area h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 10px 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}
.doc-meta {
    color: #8899A6;
    font-size: 11px;
    margin: 5px 0 0 0;
}

/* Document Status Badges */
.doc-status-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
   
}
.doc-s-verified { color: #10b981; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); }
.doc-s-review { color: #FFC85A; background: rgba(255, 200, 90, 0.1); border: 1px solid rgba(255, 200, 90, 0.3); }
.doc-s-pending { color: #8899A6; background: rgba(136, 153, 166, 0.1); border: 1px solid rgba(136, 153, 166, 0.3); }

/* Card Bottom Actions */
.doc-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #FFDA8F3D;
    padding-top: 15px;
}

.btn-view-doc {
    background: transparent;
    border: 1px solid #FFC85A;
    color: #FFC85A;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
}
.btn-view-doc:hover {
    background: #FFC85A;
    color: #000;
}

.doc-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
.btn-doc-icon {
    background: transparent;
    border: none;
    color: #e0e6ed;
    cursor: pointer;
    padding: 0;
    transition: 0.3s;
    display: flex;
    align-items: center;
}
.btn-doc-icon:hover {
    color: #FFC85A;
}

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1400px) {
    .mg-docs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .mg-docs-grid { grid-template-columns: 1fr; }
    .docs-grid-header { flex-direction: column; align-items: flex-start; gap: 15px; }
}

/* =========================================
   USER DASHBOARD: UPLOADED DOCUMENTS GRID
   ========================================= */

.mg-docs-grid-section {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 30px;
}

/* Header & Sort */
.docs-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #FFDA8F3D;
    padding-bottom: 15px;
}
.docs-section-title {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
   
    text-transform: uppercase;
}
.docs-sort-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.docs-sort-wrap span {
    color: #8899A6;
    font-size: 12px;
}
.docs-sort-select {
    background: transparent;
    border: 1px solid #FFDA8F3D;
    color: #e0e6ed;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}
.docs-sort-select:focus { border-color: #FFC85A; }

/* Grid Setup */
.mg-docs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Individual Document Card */
.mg-doc-card {
    background: #0a101d;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.3s;
}
.mg-doc-card:hover {
    border-color: #334460;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.doc-card-top {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 25px;
}

/* Yellow Circle Icon */
.doc-main-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    border: 1px solid #FFC85A;
    display: flex;
    justify-content: center;
    align-items: center;
}
.doc-main-icon i {
    color: #FFC85A;
    font-size: 20px;
}

/* Document Info Text */
.doc-info-area h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 10px 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}
.doc-meta {
    color: #8899A6;
    font-size: 11px;
    margin: 5px 0 0 0;
}

/* Document Status Badges */
.doc-status-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
   
}
.doc-s-verified { color: #10b981; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); }
.doc-s-review { color: #FFC85A; background: rgba(255, 200, 90, 0.1); border: 1px solid rgba(255, 200, 90, 0.3); }
.doc-s-pending { color: #8899A6; background: rgba(136, 153, 166, 0.1); border: 1px solid rgba(136, 153, 166, 0.3); }

/* Card Bottom Actions */
.doc-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #FFDA8F3D;
    padding-top: 15px;
}

.btn-view-doc {
    background: transparent;
    border: 1px solid #FFC85A;
    color: #FFC85A;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
}
.btn-view-doc:hover {
    background: #FFC85A;
    color: #000;
}

.doc-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
.btn-doc-icon {
    background: transparent;
    border: none;
    color: #e0e6ed;
    cursor: pointer;
    padding: 0;
    transition: 0.3s;
    display: flex;
    align-items: center;
}
.btn-doc-icon:hover {
    color: #FFC85A;
}

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1400px) {
    .mg-docs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .mg-docs-grid { grid-template-columns: 1fr; }
    .docs-grid-header { flex-direction: column; align-items: flex-start; gap: 15px; }
}


/* =========================================
   USER DASHBOARD: DOCUMENT SECURITY BANNER
   ========================================= */

.mg-doc-security-banner {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 25px;
}

/* Left Side: Security Info */
.doc-sec-left {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1; /* Takes up available space */
}

.doc-sec-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    border: 1px solid #FFC85A;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 200, 90, 0.03);
}

.doc-sec-text h3 {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px 0;
   
}

.doc-sec-text p {
    color: #e0e6ed;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* Divider Line */
.doc-sec-divider {
    width: 1px;
    height: 60px;
    background: #FFDA8F3D;
    margin: 0 40px;
}

/* Right Side: Support CTA */
.doc-sec-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.doc-sec-support-text h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 5px 0;
}

.doc-sec-support-text p {
    color: #8899A6;
    font-size: 13px;
    margin: 0;
}

.btn-go-support {
    display: inline-block;
    background: transparent;
    border: 1px solid #D2B06C;
    color: #FFC85A;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
   
    white-space: nowrap;
}

.btn-go-support:hover {
    background: #D2B06C;
    color: #000;
}

/* =========================================
   MOBILE RESPONSIVE QUERIES (Security Banner)
   ========================================= */
@media (max-width: 1300px) {
    .mg-doc-security-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .doc-sec-divider {
        width: 100%;
        height: 1px;
        margin: 0;
    }
    .doc-sec-right {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .doc-sec-left {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .doc-sec-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .btn-go-support {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .mg-user-main-content{
        padding: 30px 10px !important;
    }
}


/* =========================================
   USER DASHBOARD: TAB 5 (MY APPLICATIONS)
   ========================================= */

/* Top Header & Button */
.mg-apps-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.apps-title-area h1 {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    font-weight: 500;
}
.apps-title-area p {
    color: #e0e6ed;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.btn-new-application {
    display: flex;
    align-items: center;
    gap: 15px;
    background: transparent;
    border: 1px solid #FFDA8F3D;
    padding: 15px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}
.btn-new-application:hover {
    background: rgba(255, 200, 90, 0.05);
    border-color: #FFC85A;
}
.btn-new-application .btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-new-application .btn-text {
    display: flex;
    flex-direction: column;
}
.btn-new-application .btn-text strong {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
   
    margin-bottom: 3px;
    text-transform: uppercase;
}
.btn-new-application .btn-text span {
    color: #aebfd4;
    font-size: 11px;
}

/* Stats Bar */
.mg-apps-stats-bar {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.app-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.app-stat-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.02);
}

.app-stat-text h2 {
    margin: 0 0 2px 0;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
}
.app-stat-text h4 {
    margin: 0 0 2px 0;
    color: #e0e6ed;
    font-size: 13px;
    font-weight: 400;
}
.app-stat-text p {
    margin: 0;
    color: #8899A6;
    font-size: 11px;
}

.app-stat-divider {
    width: 1px;
    height: 40px;
    background: #FFDA8F3D;
    margin: 0 20px;
}

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1400px) {
    .mg-apps-stats-bar {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: flex-start;
    }
    .app-stat-item {
        flex: 0 0 calc(33.33% - 20px); /* 3 items per row on tablet */
    }
    .app-stat-divider {
        display: none; /* Hide dividers on wrap */
    }
}

@media (max-width: 991px) {
    .app-stat-item {
        flex: 0 0 calc(50% - 10px); /* 2 items per row */
    }
}

@media (max-width: 768px) {
    .mg-apps-header {
        flex-direction: column;
        gap: 20px;
    }
    .btn-new-application {
        width: 100%;
        box-sizing: border-box;
    }
    .mg-apps-stats-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .app-stat-item {
        width: 100%;
    }
}


/* =========================================
   USER DASHBOARD: APPLICATIONS TABLE
   ========================================= */

.mg-apps-table-section {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 30px;
}

/* Header & Sort */
.apps-table-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.apps-section-title {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
   
    text-transform: uppercase;
}
.apps-filter-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}
.sort-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sort-box span {
    color: #8899A6;
    font-size: 12px;
}
.apps-sort-select {
    background: transparent;
    border: 1px solid #FFDA8F3D;
    color: #e0e6ed;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}
.apps-sort-select:focus { border-color: #FFC85A; }

.btn-apps-filter {
    background: transparent;
    border: 1px solid #FFDA8F3D;
    color: #e0e6ed;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s;
}
.btn-apps-filter:hover {
    border-color: #e0e6ed;
    color: #fff;
}

/* User Data Table */
.mg-apps-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mg-user-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    white-space: nowrap;
}

.mg-user-data-table th {
    color: #FFC85A;
    font-size: 10px;
    font-weight: 600;
    padding: 15px 10px;
    border-top: 1px solid #FFDA8F3D;
    border-bottom: 1px solid #FFDA8F3D;
    text-transform: uppercase;
   
}

.mg-user-data-table td {
    padding: 20px 10px;
    border-bottom: 1px solid #FFDA8F3D;
    vertical-align: middle;
}
.mg-user-data-table tr:last-child td {
    border-bottom: none;
}

/* Table Text & Layouts */
.td-app-info { display: flex; align-items: center; gap: 15px; }
.app-icon { width: 45px; height: 45px; border-radius: 50%; border: 1px solid #FFC85A; display: flex; justify-content: center; align-items: center; }
.app-icon i { color: #FFC85A; font-size: 18px; }
.app-text strong { color: #ffffff; font-size: 14px; font-weight: 500; display: block; margin-bottom: 4px; }
.app-text span { color: #8899A6; font-size: 11px; display: block; }

.td-type-info strong { color: #e0e6ed; font-size: 13px; font-weight: 400; display: block; margin-bottom: 6px; }
.type-badge { padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 700; }
.t-petroleum { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.t-gold { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.t-agriculture { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.t-logistics { background: rgba(168, 85, 247, 0.1); color: #a855f7; }

.td-date-info strong { color: #e0e6ed; font-size: 13px; font-weight: 400; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.td-date-info strong i { color: #8899A6; }
.td-date-info span { color: #8899A6; font-size: 11px; padding-left: 20px; display: block; }

/* Status Pills */
.status-pill { padding: 5px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; border: 1px solid; display: inline-flex; align-items: center; gap: 6px;}
.status-pill i { font-size: 9px; }
.s-review { color: #FFC85A; border-color: rgba(255, 200, 90, 0.3); background: rgba(255, 200, 90, 0.05); }
.s-approved { color: #10b981; border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.05); }
.s-rejected { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); }
.s-pending { color: #3b82f6; border-color: rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.05); }
.s-draft { color: #aebfd4; border-color: rgba(174, 191, 212, 0.3); background: rgba(174, 191, 212, 0.05); }

/* Table Actions */
.td-actions { display: flex; align-items: center; gap: 15px; }
.btn-app-action { background: transparent; border: 1px solid #FFC85A; color: #FFC85A; padding: 8px 15px; border-radius: 4px; font-size: 11px; font-weight: 700; text-decoration: none; transition: 0.3s; }
.btn-app-action:hover { background: #FFC85A; color: #000; }
.btn-app-more { background: transparent; border: none; cursor: pointer; display: flex; align-items: center; padding: 5px; transition: 0.3s;}
.btn-app-more:hover svg { stroke: #FFC85A; }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 768px) {
    .apps-table-top { flex-direction: column; align-items: flex-start; gap: 15px; }
    .apps-filter-wrap { width: 100%; justify-content: space-between; }
}


/* =========================================
   USER DASHBOARD: APP SUPPORT BANNER
   ========================================= */

.mg-app-support-banner {
    background: #070b15;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 25px;
}

/* Individual Column */
.app-support-col {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1; /* Distribute space evenly */
}

/* Specific CTA Column Layout */
.support-col-cta {
    flex: 1.5; /* Give slightly more space to accommodate the button */
    justify-content: space-between;
}
.support-col-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Icon Rings */
.support-icon-ring {
    width: 65px;
    height: 65px;
    min-width: 65px;
    border-radius: 50%;
    border: 1px solid #FFC85A;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 200, 90, 0.03);
}

/* Text Content */
.support-text h3 {
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
   
}

.support-text p {
    color: #e0e6ed;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* Vertical Dividers */
.support-divider {
    width: 1px;
    background: #FFDA8F3D;
    margin: 0 30px;
}

/* Outline Button */
.btn-go-support {
    display: inline-block;
    background: transparent;
    border: 1px solid #D2B06C;
    color: #FFC85A;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
   
    white-space: nowrap;
}

.btn-go-support:hover {
    background: #D2B06C;
    color: #000;
}


/* =========================================
   MOBILE RESPONSIVE QUERIES (Support Banner)
   ========================================= */
@media (max-width: 1500px) {
    .mg-app-support-banner {
        flex-wrap: wrap;
        gap: 30px;
    }
    .support-divider {
        display: none; /* Hide vertical dividers on smaller screens */
    }
    .app-support-col {
        flex: 0 0 calc(50% - 15px); /* 2 items per row */
    }
    .support-col-cta {
        flex: 0 0 100%; /* Full width for the last item with button */
        border-top: 1px solid #FFDA8F3D;
        padding-top: 30px;
    }
}

@media (max-width: 991px) {
    .app-support-col {
        flex: 0 0 100%; /* 1 item per row */
        flex-direction: column;
        align-items: flex-start;
        border-top: 1px solid #FFDA8F3D;
        padding-top: 30px;
    }
    .app-support-col:first-child {
        border-top: none;
        padding-top: 0;
    }
    .support-col-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}


/* =========================================
   ADMIN DASHBOARD: TAB 2 (APPLICATIONS)
   ========================================= */

/* Tab Logic */
.mg-tab-content { animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Top Header */
.mg-apps-header {
    margin-bottom: 25px;
}
.apps-title-area h1 {
    color: #FFC85A; /* Admin specific gold color for title */
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    margin: 0 0 5px 0;
    text-transform: uppercase;
   
    font-weight: 500;
}
.apps-title-area p {
    color: #aebfd4;
    font-size: 13px;
    margin: 0;
}

/* Stats Bar */
.mg-apps-stats-bar {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 30px;
}

.app-stat-item {
    background: #0d1424;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 20px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    transition: 0.3s;
}
.app-stat-item:hover {
    border-color: #334460;
    background: #0f172a;
}

.app-stat-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 8px;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-stat-text {
    display: flex;
    flex-direction: column;
}
.app-stat-text h4 {
    margin: 0 0 5px 0;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
   
    text-transform: uppercase;
}
.app-stat-text h2 {
    margin: 0 0 5px 0;
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
}
.app-stat-text p {
    margin: 0;
    color: #8899A6;
    font-size: 11px;
}


/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1400px) {
    .mg-apps-stats-bar {
        flex-wrap: wrap;
    }
    .app-stat-item {
        flex: 0 0 calc(33.33% - 10px); /* 3 items per row */
    }
}

@media (max-width: 991px) {
    .app-stat-item {
        flex: 0 0 calc(50% - 7.5px); /* 2 items per row */
    }
}

@media (max-width: 600px) {
    .mg-apps-stats-bar {
        flex-direction: column;
    }
    .app-stat-item {
        width: 100%;
        box-sizing: border-box;
    }
}


/* =========================================
   ADMIN DASHBOARD: APPLICATIONS LIST TABLE
   ========================================= */

/* Top Filter Bar */
.mg-apps-top-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
}

.apps-search-wrap {
    display: flex;
    align-items: center;
    background: #0d1424;
    border: 1px solid #FFDA8F3D;
    border-radius: 6px;
    padding: 5px 15px;
    flex-grow: 1;
    max-width: 600px;
}
.apps-search-wrap input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 8px 15px;
    width: 100%;
    outline: none;
    font-size: 13px;
    margin-left: 10px;
}
.btn-icon-filter {
    background: transparent;
    border: 1px solid #FFDA8F3D;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    margin-left: 5px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icon-filter:hover { border-color: #FFC85A; }

.apps-actions-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-pill-filter {
    background: transparent;
    border: 1px solid #FFDA8F3D;
    color: #aebfd4;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.btn-pill-filter:hover { border-color: #e0e6ed; color: #fff; }

.btn-gold-filled {
    background: linear-gradient(180deg, #FFD15C 0%, #D29D2B 100%);
    color: #010101;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.btn-gold-filled:hover { filter: brightness(1.1); }


/* Table Styling Overrides for this section */
.apps-list-table {
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
}
.apps-list-table .mg-data-table th {
    background: transparent;
    color: #aebfd4;
    font-size: 11px;
    font-weight: 500;
   
}
.apps-list-table .mg-data-table tr {
    cursor: pointer;
}
.apps-list-table .mg-data-table tr:hover {
    background: rgba(255, 200, 90, 0.02);
}
.apps-list-table .mg-data-table tr:hover td {
    border-color: rgba(255, 200, 90, 0.2);
}

/* Specific Cell Styles */
.td-app-id {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
.app-briefcase-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #FFC85A;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 200, 90, 0.05);
}

.td-company-info strong { color: #ffffff; font-size: 13px; font-weight: 500; display: block; margin-bottom: 4px; }
.td-company-info span { color: #8899A6; font-size: 12px; display: block; }

/* Type Pills */
.type-pill { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.type-buyer { color: #FFC85A; background: rgba(255, 200, 90, 0.1); }
.type-seller { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.type-producer { color: #10b981; background: rgba(16, 185, 129, 0.1); }
.type-refinery { color: #FFC85A; background: rgba(255, 200, 90, 0.1); }
.type-logistics { color: #10b981; background: rgba(16, 185, 129, 0.1); }

.td-date-info strong { color: #e0e6ed; font-size: 13px; font-weight: 400; display: block; margin-bottom: 4px; }
.td-date-info span { color: #8899A6; font-size: 12px; display: block; }

.td-status-action { display: flex; justify-content: space-between; align-items: center; }
.action-arrow { color: #8899A6; font-size: 12px; transition: 0.3s; margin-left: 20px; }
.apps-list-table .mg-data-table tr:hover .action-arrow { color: #FFC85A; transform: translateX(3px); }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 991px) {
    .mg-apps-top-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .apps-search-wrap {
        max-width: 100%;
    }
    .apps-actions-wrap {
        justify-content: space-between;
    }
}
@media (max-width: 600px) {
    .apps-actions-wrap {
        flex-wrap: wrap;
    }
    .btn-gold-filled {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   ADMIN DASHBOARD: RIGHT PANEL (NEW DESIGN)
   ========================================= */

/* Top Header */
.panel-top-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.panel-h-left { display: flex; align-items: center; gap: 10px; }
.panel-icon { width: 32px; height: 32px; background: rgba(255, 200, 90, 0.05); border: 1px solid #FFC85A; border-radius: 6px; display: flex; justify-content: center; align-items: center; }
.panel-h-left h3 { margin: 0; color: #FFC85A; font-family: 'Inter', sans-serif; font-size: 14px; }

.panel-h-right { display: flex; align-items: center; gap: 15px; }
.btn-export-pdf { background: transparent; border: 1px solid #FFC85A; color: #FFC85A; padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: 0.3s; }
.btn-export-pdf:hover { background: #FFC85A; color: #000; }
.btn-more-vert { background: transparent; border: none; color: #aebfd4; cursor: pointer; }

/* Company Banner */
.panel-company-banner { background: #070b15; border: 1px solid #FFDA8F3D; border-radius: 8px; padding: 25px; display: flex; gap: 20px; align-items: center; margin-bottom: 25px; }
.pc-logo { width: 70px; height: 70px; min-width: 70px; background: #0b1120; border: 1px solid #FFC85A; border-radius: 8px; display: flex; justify-content: center; align-items: center; }
.pc-info { flex-grow: 1; }
.pc-info h2 { margin: 0 0 5px 0; color: #fff; font-size: 20px; font-weight: 500; font-family: 'Inter', sans-serif; }
.pc-info p { margin: 0 0 15px 0; color: #FFC85A; font-size: 13px; font-weight: 500; }

.pc-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; border-top: 1px solid #FFDA8F3D; padding-top: 15px; }
.pc-meta-grid div { display: flex; flex-direction: column; gap: 5px; }
.pc-meta-grid span { color: #8899A6; font-size: 11px; }
.pc-meta-grid strong { color: #e0e6ed; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.dot { width: 6px; height: 6px; border-radius: 50%; }

/* Sub Tabs */
.panel-sub-tabs { display: flex; border-bottom: 1px solid #FFDA8F3D; margin-bottom: 25px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel-sub-tabs span { padding: 10px 15px; color: #8899A6; font-size: 12px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: 0.3s; white-space: nowrap; }
.panel-sub-tabs span.active { color: #FFC85A; border-bottom-color: #FFC85A; }
.panel-sub-tabs span:hover { color: #e0e6ed; }

/* Grid Cards */
.panel-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.p-card { background: #070b15; border: 1px solid #FFDA8F3D; border-radius: 8px; padding: 20px; }
.p-card h4 { margin: 0 0 20px 0; color: #fff; font-size: 14px; font-weight: 500; }

/* Summary List */
.summary-card ul { list-style: none; padding: 0; margin: 0; }
.summary-card li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #FFDA8F3D; }
.summary-card li:last-child { border-bottom: none; }
.summary-card li span { color: #8899A6; font-size: 12px; }
.summary-card li strong { color: #e0e6ed; font-size: 12px; font-weight: 500; text-align: right; }

/* Progress Card */
.prog-flex { display: flex; gap: 25px; align-items: center; }
.prog-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
.prog-list li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.p-item-left { display: flex; align-items: center; gap: 10px; }
.p-item-left i { font-size: 14px; color: #8899A6; }
.p-item-left span { color: #8899A6; font-size: 12px; }
.badge { padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 600; border: 1px solid; }
.b-green { color: #10b981; border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.1); }
.b-yellow { color: #FFC85A; border-color: rgba(255,200,90,0.3); background: rgba(255,200,90,0.1); }
.b-gray { color: #8899A6; border-color: rgba(136,153,166,0.3); background: rgba(136,153,166,0.1); }

/* Timeline */
.timeline-card { margin-bottom: 25px; }
.timeline-container { position: relative; padding-left: 10px; }
.timeline-container::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 13.5px; width: 1px; background: #FFC85A; opacity: 0.3; }
.tl-item { display: flex; gap: 20px; margin-bottom: 20px; position: relative; z-index: 2; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; background: #FFC85A; border: 3px solid #070b15; box-shadow: 0 0 0 1px #FFC85A; margin-top: 4px; }
.tl-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex-grow: 1; }
.tl-content strong { display: block; color: #e0e6ed; font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.tl-content span { display: block; color: #8899A6; font-size: 11px; }

/* Bottom Action Buttons */
.panel-bottom-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.panel-bottom-actions button { padding: 12px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 5px; transition: 0.3s; }
.btn-cont-review { background: linear-gradient(180deg, #FFD15C 0%, #D29D2B 100%); border: none; color: #000; }
.btn-cont-review:hover { filter: brightness(1.1); }
.btn-req-info { background: transparent; border: 1px solid #FFC85A; color: #FFC85A; }
.btn-req-info:hover { background: rgba(255,200,90,0.1); }
.btn-rej-app { background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; }
.btn-rej-app:hover { background: #ef4444; color: #fff; }
.btn-app-app { background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981; color: #10b981; }
.btn-app-app:hover { background: #10b981; color: #fff; }

/* Responsive Right Panel */
@media (max-width: 1400px) {
    .panel-overview-grid { grid-template-columns: 1fr; }
    .panel-bottom-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .pc-meta-grid { grid-template-columns: 1fr; gap: 10px; }
    .tl-content { grid-template-columns: 1fr; gap: 5px; }
    .panel-bottom-actions { grid-template-columns: 1fr; }
    .prog-flex { flex-direction: column; }
}


/* =========================================
   DYNAMIC PAGINATION FIX
   ========================================= */
.pag-controls a, .pag-controls span {
    background: #111a2f; 
    border: 1px solid #FFDA8F3D; 
    color: #8899A6; 
    width: 30px; 
    height: 30px; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: 0.3s; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-decoration: none;
    font-size: 13px;
}
.pag-controls span.current, .pag-controls a:hover {
    background: #D2B06C; 
    color: #000; 
    border-color: #D2B06C; 
}


/* =========================================
   ADMIN DASHBOARD: TAB 3 (KYC VERIFICATION)
   ========================================= */

/* Main Layout Grid (Left Content + Right Sidebar) */
.mg-kyc-layout-grid {
    display: grid;
    grid-template-columns: 1fr 620px; /* Right sidebar is fixed 380px wide */
    gap: 25px;
    align-items: start;
}

/* --- LEFT CONTENT AREA --- */
.kyc-section-header { margin-bottom: 20px; }
.kyc-section-header h2 { margin: 0 0 5px 0; color: #fff; font-family: 'Inter', sans-serif; font-size: 16px; text-transform: uppercase; }
.kyc-section-header p { margin: 0; color: #8899A6; font-size: 13px; }

/* Company Info Card (Exact match of Image 2) */
.kyc-company-card {
    background: #0d1424;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    gap: 25px;
    align-items: stretch;
    margin-bottom: 30px;
}

.k-card-logo {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border: 1px solid #FFC85A;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 200, 90, 0.05);
}

.k-card-details { flex-grow: 1; }
.k-c-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.k-c-header h3 { margin: 0; color: #ffffff; font-size: 20px; font-family: 'Inter', sans-serif; font-weight: 500; }

.badge-entity {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.k-c-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.k-c-item { display: flex; flex-direction: column; gap: 6px; }
.k-c-item span { color: #8899A6; font-size: 12px; }
.k-c-item strong { color: #e0e6ed; font-size: 13px; font-weight: 400; display: flex; align-items: center; }

.dot-priority { width: 8px; height: 8px; border-radius: 50%; background: #FFC85A; display: inline-block; margin-right: 8px; }

/* --- RIGHT SIDEBAR AREA --- */
.kyc-right-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.kyc-right-sidebar-column-1, .kyc-right-sidebar-column-2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kyc-side-card {
    background: #0d1424;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 20px;
}
.k-side-title { margin: 0 0 20px 0; color: #FFC85A; font-family: 'Inter', sans-serif; font-size: 13px; text-transform: uppercase; }

/* Overall Status Box */
.k-status-wrap { display: flex; gap: 20px; align-items: center; }
.k-status-icon {
    width: 60px; height: 60px; min-width: 60px;
    display: flex; justify-content: center; align-items: center;
}
.k-status-icon svg { filter: drop-shadow(0 0 5px rgba(255,200,90,0.5)); }

.k-status-text { flex-grow: 1; }
.k-status-text h3 { margin: 0 0 5px 0; color: #ffffff; font-family: 'Inter', sans-serif; font-size: 20px; }
.k-status-text p { margin: 0 0 8px 0; color: #e0e6ed; font-size: 12px; }

.k-progress-bar { width: 100%; height: 6px; background: #FFDA8F3D; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.k-progress-fill { height: 100%; background: #FFC85A; box-shadow: 0 0 10px #FFC85A; border-radius: 3px; }
.k-est-date { color: #8899A6; font-size: 10px; }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1300px) {
    .mg-kyc-layout-grid { grid-template-columns: 1fr 300px; } /* Sidebar shrinks slightly */
}
@media (max-width: 1024px) {
    .mg-kyc-layout-grid { grid-template-columns: 1fr; } /* Sidebar drops below content */
    .k-c-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kyc-company-card { flex-direction: column; align-items: center; text-align: center; }
    .k-c-header { flex-direction: column; gap: 10px; }
    .k-c-grid { grid-template-columns: 1fr; text-align: center; }
    .k-c-item strong { justify-content: center; }
}


/* =========================================
   ADMIN DASHBOARD: KYC VERIFICATION PROGRESS
   ========================================= */

.kyc-progress-card {
    background: #0d1424;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}

.k-card-title {
    margin: 0 0 30px 0;
    color: #FFC85A;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
   
    text-transform: uppercase;
}

.k-progress-tracker {
    position: relative;
    padding-bottom: 10px;
}

/* Timeline Background & Fill */
.k-tracker-line {
    position: absolute;
    top: 25px; /* Center of the 50px icon */
    left: 10%;
    right: 10%;
    height: 1px;
    background: #334460;
    z-index: 1;
}
.k-tracker-fill {
    height: 100%;
    background: #FFC85A;
    box-shadow: 0 0 8px #FFC85A;
    transition: width 1s ease-in-out;
}

/* Steps Grid */
.k-tracker-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.k-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
}

/* Icon Rings */
.k-step-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #0d1424;
    border: 2px solid #334460;
    color: #8899A6;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    transition: 0.4s;
    font-size: 16px;
}

.k-step h4 {
    margin: 0 0 5px 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}
.k-step-status {
    font-size: 11px;
    margin-bottom: 3px;
}
.k-step-date {
    color: #8899A6;
    font-size: 10px;
}

/* =========================================
   STATUS LOGIC (Colors & Glows)
   ========================================= */

/* Pending */
.k-step.pending .k-step-status { color: #8899A6; }

/* Completed (Green) */
.k-step.completed .k-step-icon { 
    border-color: #10b981; 
    color: #10b981; 
}
.k-step.completed .k-step-status { color: #FFC85A; /* As per your image, 'Completed' text is gold */ }

/* Current (Glowing Gold) */
.k-step.current .k-step-icon { 
    border-color: #FFC85A; 
    color: #FFC85A; 
    box-shadow: 0 0 15px rgba(255, 200, 90, 0.4), inset 0 0 10px rgba(255, 200, 90, 0.2); 
    transform: scale(1.1); 
}
.k-step.current .k-step-status { color: #FFC85A; font-weight: 600; }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1200px) {
    .k-tracker-steps {
        overflow-x: auto;
        padding-bottom: 15px;
        justify-content: flex-start;
        gap: 30px;
        -webkit-overflow-scrolling: touch;
    }
    .k-tracker-line { width: 700px; } /* Force width to enable scroll */
    .k-step { flex-shrink: 0; }
}


/* =========================================
   ADMIN DASHBOARD: KYC DOCUMENTS TABLE
   ========================================= */

.k-docs-section {
    background: #0d1424;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 25px;
}

/* Table Overrides for this section */
.k-docs-table-wrap {
    border: none;
    border-radius: 0;
    margin-bottom: 20px;
}
.k-docs-table th {
    background: transparent;
    padding: 10px 15px;
}
.k-docs-table td {
    padding: 15px;
}
.k-docs-table tr:last-child td {
    border-bottom: 1px solid #FFDA8F3D; /* Keep border for last row before actions */
}

/* Typography & Layouts */
.k-doc-type { display: flex; align-items: center; gap: 10px; color: #e0e6ed; font-size: 13px; }
.k-file-name { color: #aebfd4; font-size: 13px; }
.k-doc-date { color: #e0e6ed; font-size: 13px; }

.k-verified-by strong { display: block; color: #e0e6ed; font-size: 12px; font-weight: 500; margin-bottom: 2px; }
.k-verified-by span { display: block; color: #8899A6; font-size: 11px; }

/* Action Buttons Grid */
.k-doc-actions { display: flex; gap: 5px; }
.btn-d-action {
    background: #111a2f;
    border: 1px solid #FFDA8F3D;
    color: #aebfd4;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
}
.btn-d-action:hover { background: rgba(255, 200, 90, 0.1); border-color: #FFC85A; color: #FFC85A; }

/* Bottom Action Area */
.k-docs-bottom-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.k-upload-box { display: flex; align-items: center; gap: 15px; }
.btn-upload-dashed {
    background: transparent;
    border: 1px dashed #FFC85A;
    color: #e0e6ed;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.3s;
}
.btn-upload-dashed:hover { background: rgba(255, 200, 90, 0.05); color: #FFC85A; }
.k-upload-box span { color: #8899A6; font-size: 11px; }

.btn-bulk-download {
    background: transparent;
    border: 1px solid #FFC85A;
    color: #FFC85A;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.3s;
}
.btn-bulk-download:hover { background: #FFC85A; color: #000; }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 991px) {
    .k-docs-bottom-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .k-upload-box {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .btn-upload-dashed, .btn-bulk-download {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   ADMIN DASHBOARD: KYC RIGHT SIDEBAR WIDGETS
   ========================================= */

/* Verification Summary */
.k-summary-list { list-style: none; padding: 0; margin: 0 0 20px 0; }
.k-summary-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #FFDA8F3D; }
.k-summary-list li:last-child { border-bottom: none; }
.k-summary-list li span { color: #e0e6ed; font-size: 13px; }
.k-summary-list li strong { color: #ffffff; font-size: 13px; font-weight: 500; }

.btn-side-outline { 
    width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; 
    background: transparent; border: 1px solid #FFC85A; color: #FFC85A; 
    padding: 10px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.3s; 
}
.btn-side-outline:hover { background: #FFC85A; color: #000; }

/* KYC Officer Notes */
.k-notes-box { background: #111a2f; border: 1px solid #FFDA8F3D; border-radius: 6px; padding: 15px; margin-bottom: 15px; }
.k-notes-box p { color: #aebfd4; font-size: 12px; line-height: 1.5; margin: 0 0 10px 0; }
.k-notes-box p:last-child { margin: 0; }
.k-notes-meta { display: flex; justify-content: space-between; color: #8899A6; font-size: 11px; margin-bottom: 20px; }

/* Verification Timeline */
.k-side-timeline { position: relative; padding-left: 10px; }
.k-side-timeline::before { content: ''; position: absolute; top: 10px; bottom: 20px; left: 21px; width: 2px; background: #FFDA8F3D; z-index: 1; }

.k-tl-item { display: flex; gap: 15px; margin-bottom: 25px; position: relative; z-index: 2; }
.k-tl-item:last-child { margin-bottom: 0; }

.k-tl-icon { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: #0d1424; border: 2px solid #334460; display: flex; justify-content: center; align-items: center; margin-top: 2px; transition: 0.3s; }
.k-tl-text h4 { margin: 0 0 3px 0; color: #aebfd4; font-size: 13px; font-weight: 500; }
.k-tl-text span { display: block; color: #8899A6; font-size: 11px; margin-bottom: 3px; }
.k-tl-text p { margin: 0; color: #8899A6; font-size: 11px; }

/* Timeline States */
.k-tl-item.done .k-tl-icon { border-color: #10b981; color: #10b981; }
.k-tl-item.done .k-tl-text h4 { color: #fff; }

.k-tl-item.active .k-tl-icon { border-color: #FFC85A; box-shadow: 0 0 10px rgba(255, 200, 90, 0.4); }
.dot-inner { width: 8px; height: 8px; border-radius: 50%; background: #FFC85A; }
.k-tl-item.active .k-tl-text h4 { color: #FFC85A; font-weight: 600; }

.k-tl-item.pending .k-tl-icon { border-color: #334460; }

/* Quick Actions */
.k-quick-links { list-style: none; padding: 0; margin: 0; }
.k-quick-links li { margin-bottom: 15px; }
.k-quick-links li:last-child { margin-bottom: 0; }
.k-quick-links li a { display: flex; align-items: center; color: #e0e6ed; font-size: 13px; text-decoration: none; transition: 0.3s; }
.k-quick-links li a svg { margin-right: 12px; }
.k-quick-links li a i { margin-left: auto; color: #4a5d7c; font-size: 11px; transition: 0.3s; }
.k-quick-links li a:hover { color: #fff; }
.k-quick-links li a:hover i { color: #FFC85A; transform: translateX(3px); }

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
/* Sidebar drop logic is already handled in previous CSS */

/* =========================================
   ADMIN DASHBOARD: KYC VERIFICATION FIX
   ========================================= */

/* Main Layout Grid Fix (Forces Sidebar to Right) */
.mg-kyc-layout-grid {
    display: grid;
    grid-template-columns: 60% 40%; /* Sidebar on right */
    gap: 25px;
    align-items: start;
}

/* Timeline specific fix */
.k-side-timeline { position: relative; padding-left: 10px; }
.k-side-timeline::before { content: ''; position: absolute; top: 10px; bottom: 20px; left: 21px; width: 1px; background: #FFDA8F3D; z-index: 1; }

.k-tl-item { display: flex; gap: 15px; margin-bottom: 25px; position: relative; z-index: 2; }
.k-tl-icon { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: #070b15; border: 2px solid #334460; display: flex; justify-content: center; align-items: center; font-size: 10px; }

.k-tl-item.done .k-tl-icon { border-color: #10b981; color: #10b981; }
.k-tl-item.active .k-tl-icon { border-color: #FFC85A; box-shadow: 0 0 10px rgba(255, 200, 90, 0.4); }
.dot-inner { width: 8px; height: 8px; border-radius: 50%; background: #FFC85A; }

/* Responsive */
@media (max-width: 1200px) {
    .mg-kyc-layout-grid { grid-template-columns: 1fr; } /* Stack on small screens */
}/* Bottom Action Bar */
.kyc-bottom-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0d1424;
    border: 1px solid #FFDA8F3D;
    border-radius: 8px;
    padding: 20px 25px;
}
.btn-action-outline { background: transparent; border: 1px solid #FFC85A; color: #FFC85A; padding: 12px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
.btn-action-outline:hover { background: rgba(255,200,90,0.1); }
.right-btns { display: flex; gap: 15px; }
.btn-action-reject { background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 12px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
.btn-action-reject:hover { background: #ef4444; color: #fff; }
.btn-action-approve { background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981; color: #10b981; padding: 12px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
.btn-action-approve:hover { background: #10b981; color: #fff; }

@media (max-width: 991px) {
    .kyc-bottom-actions-bar { flex-direction: column; gap: 15px; align-items: stretch; }
    .right-btns { flex-direction: column; }
    .btn-action-outline, .btn-action-reject, .btn-action-approve { justify-content: center; }
}


/* =========================================
   ADMIN DASHBOARD: DOCUMENTS LIST TABLE
   ========================================= */

.docs-bulk-actions {
    display: flex;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #FFDA8F3D;
}
.btn-bulk-outline {
    background: transparent;
    border: 1px solid #334460;
    color: #e0e6ed;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.3s;
}
.btn-bulk-outline:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* Status Badges Specific */
.doc-status-badge.doc-s-verified { color: #10b981; background: transparent; border: 1px solid rgba(16, 185, 129, 0.3); font-size: 10px; padding: 2px 6px; }
.doc-status-badge.doc-s-review { color: #FFC85A; background: transparent; border: 1px solid rgba(255, 200, 90, 0.3); font-size: 10px; padding: 2px 6px;}
.doc-status-badge.doc-s-pending { color: #3b82f6; background: transparent; border: 1px solid rgba(59, 130, 246, 0.3); font-size: 10px; padding: 2px 6px;}
.doc-status-badge.doc-s-expired { color: #ef4444; background: transparent; border: 1px solid rgba(239, 68, 68, 0.3); font-size: 10px; padding: 2px 6px;}

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 991px) {
    .docs-bulk-actions { flex-wrap: wrap; justify-content: space-between; }
    .btn-bulk-outline { width: calc(50% - 10px); justify-content: center; margin-left: 0 !important; }
}
@media (max-width: 600px) {
    .btn-bulk-outline { width: 100%; }
}


/* =========================================
   MOBILE RESPONSIVE FIXES (KYC VERIFICATION TAB)
   ========================================= */

@media (max-width: 991px) {
    /* Make the 3-column company info grid into 2 columns on tablets */
    .k-c-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .mg-kyc-layout-grid{
        display: block !important;
        flex-direction: column !important; /* Stack content and sidebar vertically */
    }

    .kyc-right-sidebar{
        display: block !important;
        flex-direction: column !important; /* Stack sidebar columns vertically */
    }

    .kyc-left-content{
        margin-bottom: 30px !important; /* Add spacing below left content */
    }

    /* 1. Fix Company Card Overflow */
    .kyc-company-card {
        flex-direction: column !important; /* Stack logo and details vertically */
        align-items: flex-start !important;
        padding: 20px !important;
    }
    
    .k-card-logo {
        margin-bottom: 15px;
    }
    
    /* Make the company info grid 1 column on phones */
    .k-c-grid { 
        grid-template-columns: 1fr !important; 
        gap: 12px;
    }
    
    .k-c-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 15px;
    }
    
    /* 2. Fix Progress Tracker Overflow */
    .kyc-progress-card {
        padding: 20px 15px !important; /* Reduce padding to fit screen */
    }
    
    .k-tracker-steps {
        overflow-x: auto !important; /* Allow horizontal scrolling */
        padding-bottom: 15px !important;
        justify-content: flex-start !important;
        gap: 30px !important;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on mobile */
    }
    
    /* Force the background line to be wide enough so the steps don't break */
    .k-tracker-line { 
        width: 600px !important; 
    } 
    
    /* Prevent individual steps from shrinking and breaking text */
    .k-step { 
        flex-shrink: 0 !important; 
        width: 100px !important;
    }
}


/* =========================================
   CRITICAL LAYOUT FIX (SIDEBAR & GRID)
   ========================================= */

/* 1. Force Left Sidebar to never shrink */
.mg-admin-sidebar { 
    width: 290px !important; 
    min-width: 290px !important; 
    flex-shrink: 0 !important; /* Prevents sidebar from being crushed */
    background: #070b15; 
    border-right: 1px solid #1a2744; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    transition: transform 0.3s ease; 
    z-index: 100; 
}


/* On smaller screens, stack them instead of crushing */
@media (max-width: 1300px) {
    .mg-kyc-layout-grid { grid-template-columns: 1fr 300px !important; }
}
@media (max-width: 1100px) {
    .mg-kyc-layout-grid { grid-template-columns: 1fr !important; }
}

.b-red { color: #ef4444 !important; border-color: rgba(239, 68, 68, 0.3) !important; background: rgba(239, 68, 68, 0.1) !important; }

.btn-download-cert:hover { background: #059669 !important; }



/* =========================================
   ADMIN DASHBOARD: PLATFORM OVERVIEW (EXACT MATCH)
   ========================================= */

.mg-overview-wrapper { display: flex; flex-direction: column; gap: 20px; font-family: 'Inter', sans-serif; }

.ov-section { border: 1px solid#FFDA8F3D; border-radius: 8px; padding: 25px; background: #070b15; }
.ov-sec-title { color: #FFC85A; font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 1px; margin: 0 0 25px 0; font-weight: 500;}
.text-center { text-align: center; }

/* 1. Top Modules */
.ov-modules-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 15px; }
.ov-mod-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 5px; text-align: center; transition: 0.3s; border: 1px solid #334460; border-radius: 8px; background: #0b1120; }
.ov-mod-card svg { margin-bottom: 12px; filter: drop-shadow(0 0 8px currentColor); }
.ov-mod-card h4 { color: #fff; font-size: 12px; margin: 0 0 8px 0; font-weight: 600; text-transform: uppercase; font-family: 'Inter', sans-serif; letter-spacing: 0.5px;}
.ov-mod-card span { color: #FFC85A; font-size: 10px; font-weight: 500;}

/* Middle Grid */
.ov-middle-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 20px; }

/* 2. Platform Map */
.ov-platform-map { position: relative; }
.map-container { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 20px 10px; }
.map-connect-line { position: absolute; top: 50%; left: 15%; right: 15%; height: 1px; background: rgba(255,200,90,0.3); z-index: 1; }

.map-left, .map-right { display: flex; flex-direction: column; gap: 40px; width: 38%; z-index: 2; }
.map-box { border: 1px solid #1a2744; border-radius: 8px; padding: 15px; display: flex; align-items: center; gap: 15px; background: #0b1120; }
.map-icon { width: 45px; height: 45px; border-radius: 8px; border: 1px solid; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.03);}
.mb-blue .map-icon { color: #3b82f6; border-color: rgba(59,130,246,0.3); }
.mb-purple .map-icon { color: #a855f7; border-color: rgba(168,85,247,0.3); }
.mb-green .map-icon { color: #10b981; border-color: rgba(16,185,129,0.3); }
.mb-blue2 .map-icon { color: #0ea5e9; border-color: rgba(14,165,233,0.3); }

.m-text h4 { color: #fff; font-size: 12px; margin: 0 0 5px 0; font-weight: 600;}
.m-text p { color: #8899A6; font-size: 10px; margin: 0; font-weight: 500; letter-spacing: 0.5px;}

.map-center { text-align: center; position: relative; z-index: 2; background: #070b15; padding: 0 15px;}
.center-shield { display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 15px; }
.center-shield svg { filter: drop-shadow(0 0 20px rgba(255,200,90,0.4)); }
.center-shield h2 { position: absolute; color: #FFC85A; font-family: 'Inter', sans-serif; font-size: 32px; margin: 0; font-weight: 600; }
.map-center h5 { color: #FFC85A; font-family: 'Inter', sans-serif; font-size: 14px; margin: 0; font-weight: 500; letter-spacing: 0.5px; }

/* 3. Access Framework */
.access-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.access-list li { border: 1px solid #1a2744; border-radius: 8px; padding: 15px 20px; display: flex; align-items: center; background: #0b1120; }
.a-icon { width: 30px; display: flex; justify-content: flex-start; }
.a-text { flex-grow: 1; padding: 0 15px; border-left: 1px solid #1a2744; margin-left: 10px; }
.a-text span { color: #8899A6; font-size: 10px; display: block; margin-bottom: 3px; font-weight: 500; }
.a-text h4 { color: #FFC85A; font-size: 14px; margin: 0; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.5px; }
.access-footer { text-align: center; color: #8899A6; font-size: 11px; margin-top: 25px; font-weight: 500;}

/* Bottom Grid */
.ov-bottom-grid { display: grid; grid-template-columns: 2.2fr 1.8fr 1fr; gap: 20px; }

/* 4. Lifecycle */
.lifecycle-steps { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
.l-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; }
.l-icon { width: 50px; height: 50px; border-radius: 50%; border: 1px solid; display: flex; justify-content: center; align-items: center; background: #0b1120; }
.l-step span { color: #fff; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* 5. Operations Control */
.ops-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; text-align: center; padding: 15px 0;}
.ops-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.o-icon { width: 45px; height: 45px; border-radius: 8px; border: 1px solid; display: flex; justify-content: center; align-items: center; }
.ops-item span { color: #e0e6ed; font-size: 10px; font-weight: 500; line-height: 1.3;}

/* 6. Governance */
.gov-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.gov-list li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #1a2744; padding-bottom: 15px; }
.gov-list li:last-child { border-bottom: none; padding-bottom: 0; }
.gov-list li span { color: #8899A6; font-size: 11px; flex-grow: 1; font-weight: 500; }
.gov-list li strong { color: #e0e6ed; font-size: 11px; font-weight: 600; text-align: right;}

/* Footer */
.ov-footer { color: #FFC85A; font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: 2px; margin-top: 10px; }
.ov-footer .dot { display: inline-block; width: 4px; height: 4px; background: #FFC85A; border-radius: 50%; vertical-align: middle; margin: 0 10px; }

/* =========================================
   MOBILE RESPONSIVE QUERIES (PLATFORM OVERVIEW)
   ========================================= */

/* For Small Laptops and Large Tablets */
@media (max-width: 1400px) {
    /* Break top modules into 4 columns */
    .ov-modules-grid { grid-template-columns: repeat(4, 1fr); }
    
    /* Stack the Map and Access Framework */
    .ov-middle-grid { grid-template-columns: 1fr; }
    
    /* Stack Lifecycle, Operations, Governance */
    .ov-bottom-grid { grid-template-columns: 1fr; }
    
    /* Center the map container elements */
    .map-container { flex-wrap: wrap; justify-content: center; gap: 30px; }
    .map-container::before { display: none; } /* Hide the connecting line on smaller screens */
    .map-left, .map-right { width: 45%; }
    .map-center { width: 100%; order: -1; margin-bottom: 20px; } /* Move MG Shield to top */
}

/* For Standard Tablets */
@media (max-width: 991px) {
    /* Operations Grid breaks from 6 to 3 columns */
    .ops-grid { grid-template-columns: repeat(3, 1fr); }
    
    /* Lifecycle arrows hide and items wrap */
    .lifecycle-steps { flex-wrap: wrap; justify-content: center; gap: 15px; }
    .l-arrow { display: none; } /* Hide arrows as it wraps */
    .l-step { width: 25%; } /* Make steps a bit larger */
}

/* For Mobile Phones */
@media (max-width: 768px) {
    /* Break top modules into 2 columns */
    .ov-modules-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    
    /* Map layout stacks completely */
    .map-left, .map-right { width: 100%; gap: 15px; }
    
    /* Operations Grid breaks from 3 to 2 columns */
    .ops-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    
    /* Lifecycle breaks to 2 columns */
    .l-step { width: 45%; margin-bottom: 10px; }
    
    /* Adjust text sizes for mobile readability */
    .ov-sec-title { font-size: 13px; margin-bottom: 15px; }
    .m-text h4 { font-size: 12px; }
    .access-list li { flex-direction: column; text-align: center; gap: 10px; }
    .gov-list li { flex-direction: column; align-items: flex-start; gap: 5px; }
    .gov-list li strong { text-align: left; }
}

/* For Very Small Phones (e.g. iPhone SE) */
@media (max-width: 480px) {
    /* Operations Grid breaks to 1 column */
    .ops-grid { grid-template-columns: 1fr; }
    
    /* Top Modules break to 1 column */
    .ov-modules-grid { grid-template-columns: 1fr; }
    
    /* Lifecycle breaks to 1 column */
    .l-step { width: 100%; }
}



/* =========================================
   ADMIN DASHBOARD: VERIFICATION CONTROL CENTER
   ========================================= */

/* 1. Top Command Cards */
.vcc-cmd-grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.vcc-cmd-card { border: 1px solid #1a2744; border-radius: 6px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #070b15; transition: 0.3s; }
.vcc-cmd-card:hover { border-color: #334460; transform: translateY(-2px); }
.cmd-highlight { background: rgba(59, 130, 246, 0.1); border-color: #3b82f6; flex-direction: row; gap: 15px; text-align: left; }
.vcc-cmd-card svg { margin-bottom: 10px; filter: drop-shadow(0 0 5px currentColor); }
.cmd-highlight svg { margin-bottom: 0; width: 45px; height: 45px; }
.vcc-cmd-card h4 { color: #fff; font-size: 11px; margin: 0 0 5px 0; font-weight: 600; text-transform: uppercase; font-family: 'Inter', sans-serif; letter-spacing: 0.5px;}
.vcc-cmd-card span, .vcc-cmd-text p { color: #FFC85A; font-size: 9px; margin: 0;}

/* Middle Grid */
.vcc-middle-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 20px; margin-bottom: 20px; }

/* 2. Verification Pipeline */
.vcc-pipeline { padding: 30px 20px; }
.pipeline-container { display: flex; justify-content: space-between; position: relative; margin-top: 10px; }
.pipe-line-bg { position: absolute; top: 35px; left: 5%; right: 5%; height: 1px; background: rgba(255,200,90,0.5); z-index: 1; }
.pipe-step { display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 2; width: 15%; position: relative;}
.pipe-step::after { content: '→'; position: absolute; top: 25px; right: -25px; color: #FFC85A; font-size: 20px; font-weight: bold; }
.pipe-step:last-child::after { content: none; }
.p-icon-wrap { width: 70px; height: 70px; border-radius: 50%; border: 2px solid; display: flex; justify-content: center; align-items: center; background: #070b15; margin-bottom: 15px; box-shadow: 0 0 15px currentColor inset; }
.p-text h2 { color: #fff; font-family: 'Inter', sans-serif; font-size: 22px; margin: 0 0 5px 0; }
.p-text h4 { color: #e0e6ed; font-size: 11px; margin: 0 0 10px 0; font-weight: 500; height: 26px;}
.p-badge { padding: 4px 10px; border-radius: 4px; border: 1px solid; font-size: 9px; font-weight: 700; display: inline-block; letter-spacing: 0.5px;}

/* Specific Pipeline Colors */
.c-blue { color: #3b82f6; border-color: #3b82f6; } .b-blue { color: #3b82f6; border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.1); }
.c-blue2 { color: #0ea5e9; border-color: #0ea5e9; } .b-blue2 { color: #0ea5e9; border-color: rgba(14,165,233,0.3); background: rgba(14,165,233,0.1); }
.c-green { color: #10b981; border-color: #10b981; } .b-green { color: #10b981; border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.1); }
.c-purple { color: #a855f7; border-color: #a855f7; } .b-purple { color: #a855f7; border-color: rgba(168,85,247,0.3); background: rgba(168,85,247,0.1); }
.c-yellow { color: #f59e0b; border-color: #f59e0b; } .b-yellow { color: #f59e0b; border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.1); }

.pipeline-footer { text-align: center; color: #FFC85A; font-size: 11px; margin-top: 30px; letter-spacing: 1px;}

/* 3. Decisions List */
.vcc-dec-list { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; flex-direction: column; gap: 10px; }
.vcc-dec-list li { border: 1px solid #1a2744; border-radius: 6px; padding: 12px 15px; display: flex; align-items: center; background: #070b15; gap: 15px; }
.d-text h4 { color: #e0e6ed; font-size: 12px; margin: 0 0 3px 0; font-weight: 500; letter-spacing: 0.5px;}
.d-text span { color: #8899A6; font-size: 10px; }
.d-actions { display: flex; gap: 10px; }
.btn-d-outline { flex: 1; background: transparent; border: 1px solid #FFC85A; color: #FFC85A; padding: 10px; border-radius: 4px; font-size: 10px; font-weight: 700; display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; transition: 0.3s; }
.btn-d-outline:hover { background: #FFC85A; color: #000; }

/* Bottom Grid */
.vcc-bottom-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 20px; }

/* 4. Module Status */
.mod-status-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.mod-status-list li { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 600; }
.ms-left { display: flex; align-items: center; gap: 10px; width: 160px; color: #e0e6ed;}
.ms-left i { font-size: 14px; width: 20px; text-align: center; }
.ms-bar { flex-grow: 1; height: 6px; background: #1a2744; border-radius: 3px; margin: 0 15px; overflow: hidden; }
.ms-fill { height: 100%; border-radius: 3px; box-shadow: 0 0 8px currentColor; }
.ms-right { width: 100px; text-align: right; }

/* 5. Workbench */
.wb-top-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.wb-card { border: 1px solid #1a2744; border-radius: 6px; padding: 15px 5px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #070b15; }
.wb-card svg { margin-bottom: 8px; }
.wb-card span { color: #e0e6ed; font-size: 9px; font-weight: 600; }

.wb-table { width: 100%; border-collapse: collapse; font-size: 10px; text-align: left; }
.wb-table th { color: #FFC85A; border-bottom: 1px solid #334460; padding-bottom: 10px; }
.wb-table td { color: #aebfd4; padding: 10px 0; border-bottom: 1px solid #1a2744; }

/* 6. Integrity & Actions */
.vcc-right-col { display: flex; flex-direction: column; gap: 20px; }
.di-list { list-style: none; padding: 0; margin: 0 0 15px 0; display: flex; flex-direction: column; gap: 10px; }
.di-list li { display: flex; align-items: center; gap: 12px; font-size: 11px; padding-bottom: 10px; border-bottom: 1px solid #1a2744; }
.di-list li:last-child { border-bottom: none; }
.di-list span { color: #e0e6ed; flex-grow: 1; }
.di-list strong { color: #8899A6; font-weight: normal; text-align: right;}

.ra-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ra-list li { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.ra-list span { color: #aebfd4; flex-grow: 1; }
.ra-list strong { color: #8899A6; font-weight: normal; }


/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1500px) {
    .vcc-cmd-grid { grid-template-columns: repeat(3, 1fr); }
    .cmd-highlight { grid-column: span 3; justify-content: center; }
    .vcc-middle-grid { grid-template-columns: 1fr; }
    .vcc-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
    .pipeline-container { flex-wrap: wrap; justify-content: center; gap: 30px; }
    .pipe-step::after { display: none; } /* Hide arrows on wrap */
    .pipe-step { width: 30%; }
    .pipe-line-bg { display: none; }
}

@media (max-width: 600px) {
    .vcc-cmd-grid { grid-template-columns: 1fr 1fr; }
    .cmd-highlight { grid-column: span 2; }
    .pipe-step { width: 45%; }
    .d-actions { flex-direction: column; }
    .wb-top-cards { grid-template-columns: 1fr 1fr; }
    .ms-left { width: auto; }
    .ms-right { display: none; } /* Hide text to save space, rely on bar */
}


/* =========================================
   ADMIN DASHBOARD: USER & COMPANY MANAGEMENT (PIXEL PERFECT FIX)
   ========================================= */

/* Middle Grid split */
.uc-middle-grid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; margin-bottom: 20px; align-items: start; }
.uc-left-col { display: flex; flex-direction: column; gap: 20px; }
.uc-right-col { display: flex; flex-direction: column; gap: 20px; }

.uc-left-col{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}


/* Filter Bar inside Table */
.uc-filter-bar { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; }
.uc-search { flex-grow: 1; position: relative; }
.uc-search svg { position: absolute; left: 12px; top: 10px; width: 14px; color: #8899A6; }
.uc-search input { width: 100%; background: #070b15; border: 1px solid #1a2744; color: #fff; padding: 8px 10px 8px 35px; border-radius: 6px; font-size: 11px; outline: none;}
.uc-search input:focus { border-color: #FFC85A; }
.uc-select { background: #070b15; border: 1px solid #1a2744; color: #aebfd4; padding: 8px 15px; border-radius: 6px; font-size: 11px; outline: none; }

/* Add Company Button */
.btn-uc-add { background: linear-gradient(180deg, #FFD15C 0%, #D29D2B 100%); color: #000; border: none; padding: 9px 20px; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 6px; }
.btn-uc-add:hover { filter: brightness(1.1); }

/* Company Table Fixes */
.uc-table { width: 100%; border-collapse: collapse; }
.uc-table th { background: transparent; color: #8899A6; font-size: 10px; padding: 12px 10px; border-bottom: 1px solid #1a2744; text-transform: uppercase; font-weight: 600; text-align: left; }
.uc-table td { padding: 12px 10px; border-bottom: 1px solid #1a2744; font-size: 11px; vertical-align: middle; }
.uc-table tr:last-child td { border-bottom: none; }
.uc-table tr:hover { background: rgba(255,255,255,0.02); }

/* Badges Exact Match */
.c-badge { padding: 4px 10px; border-radius: 4px; font-size: 9px; font-weight: 700; border: 1px solid; display: inline-block; letter-spacing: 0.5px; text-transform: uppercase; }
.c-badge-green { color: #10b981; border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.05); }
.c-badge-yellow { color: #FFC85A; border-color: rgba(255,200,90,0.3); background: rgba(255,200,90,0.05); }
.c-badge-purple { color: #a855f7; border-color: rgba(168,85,247,0.3); background: rgba(168,85,247,0.05); }
.c-badge-blue { color: #3b82f6; border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.05); }

/* Bottom Split (User Mgt + Matrix) */
.uc-bottom-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Lists Polish */
.uc-list, .uc-matrix-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.uc-list li, .uc-matrix-list li { border: 1px solid #1a2744; border-radius: 6px; padding: 12px 15px; display: flex; align-items: center; background: #0b1120; }
.uc-i-blue { color: #3b82f6; width: 25px; display: flex; justify-content: flex-start; }
.uc-i-green { color: #10b981; width: 25px; display: flex; justify-content: flex-start; }
.uc-i-purple { color: #a855f7; width: 25px; display: flex; justify-content: flex-start; }
.uc-i-yellow { color: #FFC85A; width: 25px; display: flex; justify-content: flex-start; }
.uc-i-gray { color: #8899A6; width: 25px; display: flex; justify-content: flex-start; }

.uc-t1 { color: #e0e6ed; font-size: 11px; flex-grow: 1; font-weight: 500; }
.uc-t2 { color: #8899A6; font-size: 10px; width: 120px; }

.mat-t { flex-grow: 1; }
.mat-t h4 { margin: 0 0 3px 0; color: #e0e6ed; font-size: 11px; font-weight: 600; }
.mat-t span { color: #8899A6; font-size: 9px; display: block; }

/* Action Buttons below lists */
.uc-actions-row { display: flex; gap: 12px; margin-top: 20px; }
.uc-actions-row button { flex: 1; padding: 10px; font-size: 10px; justify-content: center; }

/* Selected Company Control */
.sel-c-top { display: flex; gap: 15px; align-items: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #1a2744; }
.sel-c-logo { width: 60px; height: 60px; border-radius: 8px; border: 1px solid #3b82f6; display: flex; justify-content: center; align-items: center; background: rgba(59,130,246,0.1); color:#3b82f6; }
.sel-c-info h2 { margin: 0 0 5px 0; color: #fff; font-size: 20px; font-family: 'Inter', sans-serif; font-weight: 600; }
.sel-c-info span { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 5px;}

.sel-c-list { list-style: none; padding: 0; margin: 0 0 25px 0; }
.sel-c-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #1a2744; }
.sel-c-list li:last-child { border-bottom: none; }
.sel-c-list li i { width: 25px; font-size: 12px; }
.sel-c-list li span { color: #e0e6ed; font-size: 11px; flex-grow: 1; font-weight: 500;}
.sel-c-list li strong { color: #8899A6; font-size: 11px; font-weight: normal; text-align: right; }

/* Module Access Control */
.mod-access-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
.mod-a-card { border: 1px solid #1a2744; border-radius: 6px; padding: 15px 5px; background: #0b1120; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.mod-a-card i { font-size: 18px; margin-bottom: 10px; }
.mod-a-card h4 { margin: 0 0 6px 0; color: #e0e6ed; font-size: 9px; font-weight: 600; }
.mod-a-card span { font-size: 8px; font-weight: 700; letter-spacing: 0.5px;}

/* =========================================
   MOBILE RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 1400px) {
    .uc-middle-grid { grid-template-columns: 1fr; }
    .uc-right-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .mod-access-grid { grid-template-columns: repeat(4, 1fr); }
}
/* =========================================
   MOBILE RESPONSIVE QUERIES (FIXED FOR SMALL SCREENS)
   ========================================= */

@media (max-width: 991px) {
    .uc-bottom-split { grid-template-columns: 1fr; }
    .uc-right-col { grid-template-columns: 1fr; }
    
    /* Make Filter Bar Stack on Mobile */
    .uc-filter-bar { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 10px; 
    }
    .uc-search { width: 100%; }
    .uc-search input { width: 100%; padding: 12px 10px 12px 35px; /* Larger tap target */ }
    .uc-select, .btn-uc-add { width: 100%; padding: 12px; justify-content: center; }
}

@media (max-width: 768px) {
    /* Top Command Cards - 2 Columns on Phone */
    .vcc-cmd-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px; 
    }
    
    /* Fix Table Overflow on Mobile (Allows horizontal scrolling) */
    .ov-section {
        padding: 15px; /* Reduce padding to give more space to content */
    }
    .ov-section table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    }
    
    /* Selected Company Card Adjustments */
    .sel-c-top { flex-direction: column; text-align: center; }
    .sel-c-list li { align-items: flex-start; gap: 5px; text-align: left; }
    .sel-c-list li strong { text-align: left; margin-left: 30px; }
    
    /* Matrix and Module Grid Adjustments */
    .mod-access-grid { grid-template-columns: repeat(2, 1fr); }
    .mat-t { display: flex; flex-direction: column; }
    .mat-t h4 { margin-bottom: 5px; }
}

@media (max-width: 480px) {
    /* Very small screens - Make Command Cards 1 Column */
    .vcc-cmd-grid { grid-template-columns: 1fr !important; }
    .uc-actions-row { flex-direction: column; }
    .uc-actions-row button { width: 100%; }
}

/* =========================================
   CRITICAL: OVERFLOW FIX FOR THE WHOLE PAGE
   ========================================= */
body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.mg-admin-main {
    min-width: 0 !important; 
    max-width: 100% !important;
    overflow-x: hidden !important;
}


/* =========================================
   ADMIN DASHBOARD: KYC / AML MANAGEMENT
   ========================================= */

/* AML specific button highlight */
.btn-highlight { border-color: #FFC85A !important; color: #FFC85A !important; }

/* Screening Matrix */
.aml-matrix-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.aml-matrix-list li { display: flex; align-items: center; border-bottom: 1px solid #1a2744; padding-bottom: 10px; }
.aml-matrix-list li:last-child { border-bottom: none; padding-bottom: 0; }
.aml-matrix-list li i:first-child { width: 30px; font-size: 16px; text-align: center;}
.am-t1 { color: #e0e6ed; font-size: 11px; flex-grow: 1; letter-spacing: 0.5px; }
.am-t2 { font-size: 10px; margin-right: 15px; }

/* UBO Graph Container */
.ubo-graph-container { position: relative; width: 100%; height: 200px; }
.ubo-lines { position: absolute; top: 0; left: 0; z-index: 1; }
.ubo-node { position: absolute; display: flex; align-items: center; gap: 10px; z-index: 2; }
.ubo-node i { font-size: 30px; background: #0b1120; border-radius: 50%; padding: 2px; }
.un-text { display: flex; flex-direction: column; gap: 4px; }
.un-text span { color: #e0e6ed; font-size: 9px; font-weight: 600; letter-spacing: 0.5px; }

/* Positioning Nodes */
.un-tl { top: 10%; left: 0; }
.un-bl { bottom: 10%; left: 0; }
.un-tr { top: 10%; right: 0; flex-direction: row-reverse; }
.un-br { bottom: 10%; right: 0; flex-direction: row-reverse; }

.un-center { top: 50%; left: 50%; transform: translate(-50%, -50%); flex-direction: column; }
.un-center i { font-size: 45px; color: #3b82f6; filter: drop-shadow(0 0 10px rgba(59,130,246,0.5)); border: 1px dashed #3b82f6; padding: 15px; }

/* Risk Classification Gauge & Factors */
.risk-class-grid { display: flex; flex-direction: column; gap: 20px; }

.risk-gauge-area { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 10px; }
.half-donut { width: 180px; height: 90px; position: relative; overflow: hidden; border-radius: 90px 90px 0 0; }
.hd-segment { position: absolute; top: 0; left: 0; width: 180px; height: 180px; border-radius: 50%; border: 25px solid transparent; box-sizing: border-box; }

/* Rotating segments to create the 4 color zones */
.hd-green { border-color: #10b981; clip-path: polygon(0 50%, 50% 50%, 50% 0, 0 0); transform: rotate(0deg); }
.hd-yellow { border-color: #FFC85A; clip-path: polygon(50% 50%, 100% 50%, 100% 0, 50% 0); transform: rotate(-45deg); }
.hd-orange { border-color: #f97316; clip-path: polygon(50% 50%, 100% 50%, 100% 0, 50% 0); transform: rotate(0deg); }
.hd-red { border-color: #ef4444; clip-path: polygon(50% 50%, 100% 50%, 100% 0, 50% 0); transform: rotate(45deg); }

/* The Needle */
.hd-needle { position: absolute; bottom: -2px; left: 50%; width: 4px; height: 75px; background: #fff; transform-origin: bottom center; z-index: 10; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.hd-needle::after { content: ''; position: absolute; bottom: -6px; left: -4px; width: 12px; height: 12px; background: #fff; border-radius: 50%; }

.hd-center { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; padding-bottom: 10px; z-index: 11; }
.hd-center span { color: #FFC85A; font-size: 11px; font-weight: 700; font-family: 'Oswald', sans-serif; letter-spacing: 0.5px; }

.hd-labels { display: flex; justify-content: space-between; width: 200px; margin-top: 10px; font-size: 10px; font-weight: 600; letter-spacing: 1px; }

.risk-factors-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.risk-factors-list li { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1a2744; padding-bottom: 8px; }
.risk-factors-list li:last-child { border-bottom: none; }
.risk-factors-list li i { width: 25px; color: #FFC85A; font-size: 12px; text-align: center; }
.risk-factors-list li span { color: #e0e6ed; font-size: 10px; flex-grow: 1; letter-spacing: 0.5px; }

/* Responsive specific to KYC/AML Tab */
@media (max-width: 768px) {
    .ubo-graph-container { height: 350px; }
    .un-tl { top: 0; left: 0; }
    .un-tr { top: 0; right: 0; }
    .un-bl { bottom: 0; left: 0; }
    .un-br { bottom: 0; right: 0; }
}

/* =========================================
   MOBILE RESPONSIVE QUERIES (KYC / AML MANAGEMENT TAB)
   ========================================= */

@media (max-width: 1500px) {
    /* Break middle grid to stack Right Panel below the Table */
    .uc-middle-grid { grid-template-columns: 1fr; }
    
    /* Make Right Panel elements side-by-side when stacked horizontally */
    .uc-right-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    
    /* UBO Graph Adjustments for wider layout */
    .ubo-graph-container { height: 250px; }
}

@media (max-width: 1200px) {
    /* Stack Right Panel elements 2 in a row */
    .uc-right-col { grid-template-columns: repeat(2, 1fr); }
    
    /* Prevent table from breaking the layout */
    .wb-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 991px) {
    /* Break Top Overview Cards into 3 columns */
    .vcc-cmd-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 15px; }
    
    /* Bottom Left Split (Screening Matrix & UBO) stacks vertically */
    .uc-bottom-split { grid-template-columns: 1fr; }
    
    /* UBO Graph Adjustments for Tablet */
    .ubo-graph-container { height: 350px; }
    .un-tl { top: 5%; left: 5%; }
    .un-bl { bottom: 5%; left: 5%; }
    .un-tr { top: 5%; right: 5%; }
    .un-br { bottom: 5%; right: 5%; }
    .ubo-lines line { display: none; } /* Hide diagonal lines on tablet/mobile as nodes shift */
}

@media (max-width: 768px) {
    /* Stack Right Panel elements 1 in a row (Full width) */
    .uc-right-col { grid-template-columns: 1fr; }
    
    /* Break Top Overview Cards into 2 columns */
    .vcc-cmd-grid { grid-template-columns: repeat(2, 1fr) !important; }
    
    /* Pipeline Steps Wrap */
    .pipeline-container { flex-wrap: wrap; justify-content: center; gap: 20px; }
    .pipe-step { width: 30%; }
    .pipe-step::after { display: none; } /* Hide arrows */
    .pipe-line-bg { display: none; } /* Hide background line */
}

@media (max-width: 480px) {
    /* Top Overview Cards 1 column for very small phones */
    .vcc-cmd-grid { grid-template-columns: 1fr !important; }
    
    /* Pipeline Steps 2 columns */
    .pipe-step { width: 45%; }
    
    /* UBO Graph - Stack nodes vertically */
    .ubo-graph-container { height: auto; display: flex; flex-direction: column; gap: 20px; padding: 20px 0; }
    .ubo-node { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; justify-content: flex-start; }
    .un-tr, .un-br { flex-direction: row; }
    .un-center { order: -1; margin-bottom: 20px; } /* Shield on top */
    .un-text { align-items: flex-start !important; }
}

/* =========================================
   CRITICAL OVERFLOW FIX
   ========================================= */
/* Ensure the page wrapper never exceeds 100vw and triggers a horizontal scrollbar */
body, html { overflow-x: hidden !important; max-width: 100vw !important; }
.mg-admin-page-wrapper, .mg-admin-layout, .mg-admin-main { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
.ov-section { max-width: 100%; box-sizing: border-box; }


/* =========================================
   ADMIN DASHBOARD: DOCUMENT & COMPLIANCE OVERSIGHT
   ========================================= */

/* Document Oversight Directory Table Adjustments */
.mg-doc-row-click { cursor: pointer; transition: 0.3s; }
.mg-doc-row-click:hover { background: rgba(255, 200, 90, 0.05); }

/* Document Control Overview Header Cards */
#tab-doc-oversight .vcc-cmd-card { padding: 15px; }

/* Document Verification Workflow Pipeline */
/* Overriding specific colors for this tab's pipeline as per image */
#tab-doc-oversight .pipe-step .c-blue { border-color: #3b82f6; color: #3b82f6; box-shadow: 0 0 15px rgba(59,130,246,0.3) inset; }
#tab-doc-oversight .pipe-step .b-blue { color: #3b82f6; border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.1); }

#tab-doc-oversight .pipe-step .c-green { border-color: #10b981; color: #10b981; box-shadow: 0 0 15px rgba(16,185,129,0.3) inset; }
#tab-doc-oversight .pipe-step .b-green { color: #10b981; border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.1); }

#tab-doc-oversight .pipe-step .c-purple { border-color: #a855f7; color: #a855f7; box-shadow: 0 0 15px rgba(168,85,247,0.3) inset; }
#tab-doc-oversight .pipe-step .b-purple { color: #a855f7; border-color: rgba(168,85,247,0.3); background: rgba(168,85,247,0.1); }

#tab-doc-oversight .pipe-step .c-yellow { border-color: #f59e0b; color: #f59e0b; box-shadow: 0 0 15px rgba(245,158,11,0.3) inset; }
#tab-doc-oversight .pipe-step .b-yellow { color: #f59e0b; border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.1); }

/* Document Integrity Control Lists */
#tab-doc-oversight .di-list li { padding: 15px 0; border-bottom: 1px solid #1a2744; }
#tab-doc-oversight .di-list li:last-child { border-bottom: none; }
#tab-doc-oversight .di-list span { color: #e0e6ed; font-size: 11px; flex-grow: 1; margin-left: 10px; }
#tab-doc-oversight .di-list strong { font-size: 11px; font-weight: 400; text-align: right; }

/* Integrity Actions Bottom Buttons */
.di-list + .btn-d-outline { width: 100%; justify-content: center; margin-top: 15px; padding: 12px; font-size: 11px; }

/* Mobile Fixes for this specific tab */
@media (max-width: 991px) {
    #tab-doc-oversight .vcc-cmd-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
    #tab-doc-oversight .vcc-cmd-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* =========================================
   ADMIN DASHBOARD: DEAL ROOMS OVERSIGHT
   ========================================= */

/* Verified Party Authorization */
.dr-party-grid { display: flex; justify-content: space-between; align-items: center; padding: 20px 10px; border-bottom: 1px solid #1a2744; }
.dr-party-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.dr-p-icon { width: 45px; height: 45px; border-radius: 8px; border: 1px solid; display: flex; justify-content: center; align-items: center; font-size: 20px; background: rgba(59,130,246,0.1); }
.dr-p-text { color: #fff; font-size: 10px; font-weight: 600; line-height: 1.3; }

.dr-mg-control { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dr-mg-control svg { filter: drop-shadow(0 0 8px rgba(255,200,90,0.5)); }

.dr-party-footer { display: flex; justify-content: space-between; padding-top: 15px; }
.dr-party-footer div { display: flex; align-items: center; gap: 10px; }
.dr-party-footer div i { font-size: 16px; }
.dr-party-footer div span { color: #8899A6; font-size: 9px; line-height: 1.3; }

/* Secure Document Exchange */
.dr-doc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; text-align: center; padding: 15px 0; }
.dr-doc-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dr-d-icon { width: 35px; height: 35px; border-radius: 6px; border: 1px solid; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.02); }
.dr-doc-item h4 { margin: 0; color: #fff; font-size: 11px; font-weight: 600; font-family: 'Oswald', sans-serif; }
.dr-doc-item span { font-size: 9px; font-weight: 500; }


/* =========================================
   ADMIN DASHBOARD: CERTIFICATE & ACCREDITATION
   ========================================= */

/* Scope Control Graphic */
.cert-scope-graph { position: relative; width: 100%; height: 200px; }
.scope-lines { position: absolute; top: 0; left: 0; z-index: 1; }
.scope-node { position: absolute; display: flex; align-items: center; z-index: 2; }
.sn-box { display: flex; align-items: center; gap: 10px; border: 1px solid #1a2744; background: #070b15; padding: 8px 12px; border-radius: 6px; }
.sn-box i { font-size: 20px; }
.sn-text { display: flex; flex-direction: column; }
.sn-text span { color: #8899A6; font-size: 8px; font-weight: 700; letter-spacing: 0.5px; }
.sn-text strong { color: #e0e6ed; font-size: 10px; font-weight: 400; }

.sn-tl { top: 15%; left: 0; }
.sn-bl { bottom: 15%; left: 0; }
.sn-tr { top: 15%; right: 0; flex-direction: row-reverse; }
.sn-br { bottom: 15%; right: 0; flex-direction: row-reverse; }

.sn-center { top: 50%; left: 50%; transform: translate(-50%, -50%); flex-direction: column; }
.sn-center i { font-size: 40px; color: #FFC85A; filter: drop-shadow(0 0 10px rgba(255,200,90,0.5)); border: 1px dashed #FFC85A; border-radius: 50%; padding: 15px; background: #070b15;}

/* =========================================
   STATUS & VALIDITY CONTROL (GAUGE FIX)
   ========================================= */
.cert-validity-grid { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 30px; 
}
.cert-valid-list { 
    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; border-right: 1px solid #1a2744; padding-right: 20px;
}
.cert-valid-list li { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #1a2744; padding-bottom: 12px; }
.cert-valid-list li:last-child { border-bottom: none; padding-bottom: 0; }
.cert-valid-list li i { font-size: 16px; width: 20px; text-align: center; }
.cert-valid-list li span { font-size: 12px; font-weight: 600; width: 100px; text-transform: uppercase; letter-spacing: 0.5px;}
.cert-valid-list li strong { color: #8899A6; font-size: 11px; font-weight: 400; }

/* The Exact 3rd Image Gauge */
.valid-gauge-area { 
    width: 200px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.cert-gauge {
    position: relative;
    width: 160px;
    height: 80px; /* Half circle */
    overflow: hidden;
}
.cg-segment {
    position: absolute;
    top: 0; left: 0;
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 20px solid;
    box-sizing: border-box;
}
/* 4 colors matching the 3rd image */
.cg-green { border-color: #10b981 transparent transparent transparent; transform: rotate(-45deg); }
.cg-blue { border-color: #3b82f6 transparent transparent transparent; transform: rotate(0deg); }
.cg-yellow { border-color: #f59e0b transparent transparent transparent; transform: rotate(45deg); }
.cg-purple { border-color: #a855f7 transparent transparent transparent; transform: rotate(90deg); }

/* Center Shield & Text */
.cg-center-shield {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.cg-center-shield i { font-size: 30px; color: #FFC85A; filter: drop-shadow(0 0 5px rgba(255,200,90,0.5)); }
.cg-center-shield span { color: #FFC85A; font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1px; font-weight: 500;}

/* Mobile Fix */
@media (max-width: 768px) {
    .cert-validity-grid { flex-direction: column; gap: 40px; }
    .cert-valid-list { border-right: none; border-bottom: 1px solid #1a2744; padding-right: 0; padding-bottom: 30px;}
    .cert-gauge { width: 140px; height: 70px; }
    .cg-segment { width: 140px; height: 140px; border-width: 15px; }
}


/* =========================================
   MOBILE RESPONSIVE FIXES (RIGHT PANEL)
   ========================================= */

@media (max-width: 768px) {
    .uc-middle-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================
   IDENTITY RESOLUTION MATRIX (FIX)
   ========================================= */
.cert-scope-graph { position: relative; width: 100%; height: 150px; margin-top: 20px;}
.scope-lines { position: absolute; top: 0; left: 0; z-index: 1; }
.scope-node { position: absolute; display: flex; align-items: center; z-index: 2; }
.sn-box { display: flex; align-items: center; gap: 10px; border: 1px solid; background: #070b15; padding: 10px 15px; border-radius: 6px; }
.sn-text { display: flex; flex-direction: column; gap: 3px; }
.sn-text span { color: #e0e6ed; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;}
.sn-text strong { font-size: 11px; font-weight: 500; }

.sn-tl { top: 15%; left: 0; }
.sn-bl { bottom: 15%; left: 0; }
.sn-tr { top: 15%; right: 0; flex-direction: row-reverse; }
.sn-br { bottom: 15%; right: 0; flex-direction: row-reverse; }

.sn-center { top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; }
/* Using the exact user-headset icon from your image */
.sn-center i { font-size: 35px; color: #FFC85A; border: 1px dashed #FFC85A; border-radius: 50%; padding: 15px; background: #070b15; box-shadow: 0 0 15px rgba(255,200,90,0.3); }

@media (max-width: 768px) {
    .cert-scope-graph { height: 250px; }
}