:root{--bg:#f4f7fb;--surface:#fff;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--black:#0a0a0a;--green:#16a34a;--green-dark:#166534;--red:#dc2626;--red-dark:#991b1b;--amber:#f59e0b;--amber-dark:#92400e;--shadow:0 18px 50px rgba(15,23,42,.08);--radius-xl:26px;--max:1180px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top right,#eef6ff 0,#f4f7fb 28%,#f4f7fb 100%);color:var(--text);line-height:1.5}a{text-decoration:none;color:inherit}.container{width:min(var(--max),calc(100% - 32px));margin:0 auto}.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:rgba(255,255,255,.88);border-bottom:1px solid rgba(226,232,240,.85)}.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px}.brand{display:flex;align-items:center;gap:14px}.logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#15803d 0,#22c55e 100%);display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px;box-shadow:var(--shadow)}.brand-title{font-weight:800}.brand-sub{font-size:12px;color:var(--muted);font-weight:700}.nav-links{display:flex;align-items:center;gap:26px;color:#334155;font-weight:600}

.nav-links a{transition:.18s ease; font-size: .9rem; font-weight: 600;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:14px;border:1px solid transparent;font-weight:800;transition:.18s ease;cursor:pointer;box-shadow:0 10px 22px rgba(15,23,42,.08)}

.btn:hover{transform:translateY(-1px);}.btn-primary{background:var(--black);color:#fff}.btn-secondary{background:#fff;border-color:var(--line)}.btn-green{background:linear-gradient(135deg,#15803d,#22c55e);color:#fff}.btn-red{background:linear-gradient(135deg,#b91c1c,#ef4444);color:#fff}.btn-ghost{background:transparent;border-color:var(--line)}.hero{padding:72px 0 42px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}.kicker{display:inline-flex;padding:8px 12px;border-radius:999px;background:#ecfdf5;color:#166534;font-size:14px;font-weight:800}h1,h2,h3,h4,p{margin:0}h1{font-size:64px;line-height:1.02;letter-spacing:-.05em}h2{font-size:38px;letter-spacing:-.04em}h3{font-size:24px;letter-spacing:-.03em}.lead{margin-top:18px;color:var(--muted);font-size:20px;max-width:670px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}.panel,.card{background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.95);border-radius:var(--radius-xl);box-shadow:var(--shadow)}.search-strip{display:flex;align-items:center;gap:12px;padding:16px;margin-top:28px}.input,.textarea{width:100%;padding:17px 18px;border-radius:16px;border:1px solid var(--line);background:#fff;color:var(--text);font:inherit;outline:none}.phone-shell{border-radius:34px;background:linear-gradient(180deg,#111827,#0f172a);padding:16px;box-shadow:0 40px 90px rgba(15,23,42,.25)}.phone-screen{background:#f8fafc;border-radius:24px;overflow:hidden;min-height:680px;border:1px solid rgba(255,255,255,.15)}.screen-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:#fff;border-bottom:1px solid var(--line);font-weight:800}.result-banner{padding:22px 24px;color:#fff;font-size:28px;font-weight:900}.result-banner.green{background:linear-gradient(135deg,#15803d,#22c55e)}.result-banner.red{background:linear-gradient(135deg,#b91c1c,#ef4444)}.result-banner.gray{background:linear-gradient(135deg,#334155,#64748b)}.profile-box{padding:22px}.profile-grid{display:grid;grid-template-columns:120px 1fr;gap:18px}.avatar{width:120px;height:120px;border-radius:22px;background:linear-gradient(135deg,#cbd5e1,#94a3b8)}.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.field{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px; display: flex; gap: 20px; align-items: center;}
.field label{display:block;font-size:1rem;font-weight:600;}
.muted{color:var(--muted)}
.badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:900}
.badge.green{background:#ecfdf5;color:var(--green-dark)}.badge.red{background:#fef2f2;color:var(--red-dark)}.badge.amber{background:#fffbeb;color:var(--amber-dark)}.qr{width:150px;height:150px;border-radius:14px;background:linear-gradient(90deg,#000 10px,transparent 10px) 0 0/30px 30px,linear-gradient(#000 10px,transparent 10px) 0 0/30px 30px,#fff;border:10px solid #fff;box-shadow:var(--shadow)}
.section{padding:50px 0 20px}
.section-head{margin-bottom:22px}
.grid-2,.grid-3,.grid-4{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4, 1fr)}
.grid-5.verified {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px;
    padding: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.feature-card, .stat-card, .metric-card{padding:24px;}

.o-card{
    padding:24px;
}

.nav-links a.active{
    color: var(--green);
}

.icon{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#eff6ff,#f8fafc);display:grid;place-items:center;font-weight:900;margin-bottom:16px;border:1px solid var(--line)}.stat-num{font-size:42px;font-weight:900}.cta-band{padding:30px;background:linear-gradient(135deg,#fff,#f8fafc)}.page-hero{padding:48px 0 18px}
.section-head .sub-hero{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sub-hero hr{
    width: 100px;
    border-top: 5px solid var(--green);
    border-radius: 10px;
    margin: 10px 0;
}

.verified{
background-color: #f4fff9;
}

.vendor-card{
    padding:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.vendor-card h4{
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.vendor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

img{width:48px;height:48px;}

.icon i{font-size:28px;color:var(--green)}

/* Tablet Version: 2 items per row */
@media (max-width: 1024px) {
    .grid-5.verified {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Mobile Version: 1 item per row */
@media (max-width: 600px) {
    .grid-5.verified {
        grid-template-columns: 1fr;
    }
    
    .vendor-card {
        padding: 20px;
    }
}

.page-title{font-size:24px}
.page-title2{font-size:18px; font-weight:700; color:var(--green)}
.page-lead{font-size:18px;color:var(--muted);margin-top:10px;max-width:760px}.result-card{overflow:hidden}.result-body{padding:22px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:700px}.table th,.table td{padding:16px;border-bottom:1px solid var(--line);text-align:left}.table th{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--muted)}.card-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.metric-label{font-size:12px;font-weight:800;text-transform:uppercase;}
.metric-label.total{color:var(--green-dark)}
.metric-label.verified{color:var(--green)}
.metric-label.denied{color:var(--red)}
.metric-label.pending{color:var(--amber)}
.metric-label.suspended{color:var(--red-dark)}
.metric-label.expiring{color:var(--amber-dark)}
.metric-value{font-size:34px;font-weight:900;margin-top:6px}
.metric-value-status{font-size:34px;font-weight:900;margin-top:6px;color:var(--green)}
.stack{display:grid;gap:14px}.footer{padding:32px 0 58px;color:var(--muted);font-size:14px}
.pill-nav{display:flex;gap:10px;flex-wrap:wrap}
.kbd{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:800}

.reveal{opacity:1;transform:none}
.reveal .hero-header{display: flex; align-items: center; justify-content: space-between;}
.mobile-only{display:inline-flex}

.breadcrumb{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:14px;border:1px solid transparent;font-weight:600;transition:.18s ease;}

.breadcrumb .active{
    color: var(--green);
}

.breadcrumb .dashboard:hover{
    color: var(--green);
}   

@media (max-width:1000px){
    .hero-grid,.grid-4,.grid-3,.grid-2,.profile-grid,.meta-grid{grid-template-columns:1fr}h1{font-size:46px}

.page-title{font-size:18px}
.lead{font-size:18px}}

/* Base Navbar Styles */

/* Mobile Toggle Styling */
.menu-toggle {
    display: none; /* Hidden on Desktop */
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #1c314a; /* Navy color from your UI */
    transition: 0.3s ease;
}

/* --- Mobile Breakpoint --- */
@media (max-width: 992px) {
    .menu-toggle {
        display: flex; /* Show on Mobile */
    }

    .nav-links {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #f4fff9;
        padding: 30px;
        border-bottom: 2px solid var(--green-checked, #2a7a4c);
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }

    /* Class to show the menu via JS */
    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        width: 100%;
    }

    .nav-links a:last-child {
        border-bottom: none;
    }
    
    /* Hamburger Animation to 'X' */
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Desktop Defaults (fallback if not in your main CSS) */
@media (min-width: 993px) {
    .nav-links {
        display: flex;
        gap: 20px;
        align-items: center;
    }
}

hr{
    border: none;
    border-top: 10px solid var(--green);
    border-radius: 10px;
    margin: 15px 0;
}

/* Main Layout Grid Setup: 30% / 70% */
.dashboard-container {
    display: grid;
    gap: 30px;
    grid-template-columns: 30% 70%;
}

/* Common Card Styling */
.card {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    overflow: hidden;
}

.feature-card p{
    color: var(--muted);
}

.feature-card:hover{
    background-color: var(--green-dark);
    color: white !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.feature-card:hover p{ 
    color: white !important;
}

.stat-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* --- Left Side (30% Width) --- */
.sidebar {
    background-color: transparent; /* Card provides the white background */
}

.sidebar-card {
    padding: 25px;
    height: 100%; /* Fill space in grid cell */
    display: flex;
    flex-direction: column;
}

/* Profile Header with Photo and Info */
.profile-header {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}


.basic-info h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy-text);
}

.basic-info p.role {
    color: var(--grey-text);
    font-size: 0.85rem;
}

/* Status Checkmarks styling */
.profile-list {
    flex-grow: 1; /* Pushes button to the bottom */
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.profile-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--grey-text);
}

/* Green icon coloring based on use in image */
.success-green {
    color: var(--green);
    font-size: 1.1rem;
}

/* Full Width Button */
.btn-green-full {
    width: 100%;
    padding: 12px;
    background-color: var(--success-green);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: background-color var(--transition-speed);
}

.btn-green-full:hover {
    background-color: #1f5e39;
}


.form-card {
    padding: 30px;
    height: 100%; /* Fill grid cell */
}

.main-content h3 {
    color: var(--navy-text);
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.form-instructions {
    color: var(--grey-text);
    font-size: 0.9rem;
    margin-bottom: 25px;
}

/* Form Element Styling */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy-text);
    margin-bottom: 6px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--navy-text);
    background-color: white;
}

/* Horizontal spacing for row elements */
.form-row.two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Standard button styling */
.btn-green {
    padding: 12px 24px;
    background-color: #1f5e39;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
}

.btn-green:hover {
    background-color: var(--green-dark);
}

.btn-red {
    padding: 12px 24px;
    background-color: var(--red);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
}

.btn-red:hover {
    background-color: var(--red-dark);
}


/* --- RESPONSIVENESS: Mobile and Tablet Breakpoint --- */
@media (max-width: 900px) {
    .dashboard-container {
        grid-template-columns: 100%; /* Stack elements vertically */
        grid-template-rows: auto auto;
    }

    .sidebar, .main-content {
        padding: 15px;
    }
    
    .sidebar-card, .form-card {
        padding: 20px;
        height: auto; /* Allow content to dictate height */
    }

    .photo-wrapper {
        width: 70px;
        height: 70px;
    }
    
    .form-row.two-col {
        grid-template-columns: 100%; /* Stack elements within rows */
        gap: 0;
    }
}

.dashboard-wrapper {
    /* display: flex; */
    width: 100%;
    max-width: 1000px;
    /* gap: 20px; */
}

/* 40% / 60% Column Setup */
.badge-column { width: 100%; }

/* Left Card Styling */
.verified-card {
    overflow: hidden;
    text-align: center;
}

.verified-header {
    background: var(--green);
    color: white;
    padding: 20px;
}

.verified-header h1 {
    font-size: 1.8rem;
    letter-spacing: 2px;
}

.qr-container {
    padding: 30px;
    display: flex;
    justify-content: center;
}

.badge-footer {
    border-top: 1px solid var(--border-color);
    padding: 15px;
}

.id-number { font-size: 0.9rem; margin-bottom: 10px; }
.brand-tag { color: var(--green); font-weight: bold; font-size: 0.8rem; }

/* Right Card Styling */
.profile-details-card {
    height: auto;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.avatar-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border-color);
}

.avatar-container img { width: 100%; height: 100%; object-fit: cover; }

.header-text h2 { font-size: 1.5rem; }
.header-text p { color: #666; font-size: 0.9rem; }
.sub-text { color: #999 !important; }

/* Status Rows */
.status-item { margin-bottom: 20px; }
.status-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.status-label i { color: var(--green-verified); }

.progress-bar {
    height: 8px;
    background: var(--green);
    border-radius: 4px;
    width: 60%;
}

.verified-footer-note {
    text-align: center;
    color: var(--green-verified);
    font-weight: bold;
    margin: 20px 0;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
}



/* --- RESPONSIVENESS --- */
@media (max-width: 768px) {
    .dashboard-wrapper {
        flex-direction: column;
    }
    .badge-column {
        width: 100%;
    }
    .progress-bar { width: 100%; }
}

/* STYLE 2 */
.nav-dashboard {
    display: flex;
    align-items: center;
    gap: 15px;
}


.btn-signout {
    text-decoration: none;
    color: var(--green-dark);
    background-color: transparent;
    border: 2px solid var(--green-dark);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.btn-account {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background-color: #166534;
    font-size: 1rem;
    white-space: nowrap;
}

/* Profile Image */
.profile-container {
    position: relative;
}

.profile-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #2a7a4c;
    overflow: hidden;
    cursor: pointer;
}

.profile-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dropdown Card */
.profile-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    width: 260px;
    background: white;
    color: #333;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: none; /* Controlled by hover or JS */
    z-index: 1000;
    padding: 15px;
}

.profile-container:hover .profile-dropdown {
    display: block;
}

/* Internal Dropdown Styling */
.vendor-name { margin: 0; font-size: 0.95rem; }
.vendor-email { color: #777; font-size: 0.8rem; margin: 2px 0 10px; }
.status-badge { font-size: 0.8rem; font-weight: 600; }
.status-badge.verified { color: #2a7a4c; }

/* --- RESPONSIVE BREAKPOINTS --- */

@media (max-width: 600px) {
    .btn-signout {
        color: var(--green-dark);
        background-color: transparent;
        border: 2px solid var(--green-dark);
        padding: 5px 10px;
        font-size: 0.75rem;

    }

    .profile-circle {
        width: 35px;
        height: 35px;
    }

    /* Adjust dropdown to not hit screen edge */
    .profile-dropdown {
        width: 220px;
        right: -10px; /* Slight offset for thumb reach */
    }

    .vendor-name {
        font-size: 0.85rem;
    }
}

/* For very small screens, hide the signout text and just show an icon */
@media (max-width: 400px) {
    .btn-signout {
        color: var(--green-dark);
        background-color: transparent;
        border: 2px solid var(--green-dark);
    }
}

.page-title span {
    color: var(--green);
    font-weight: 500;
}

.dashboard-widget {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Upper Section with stats and photo */
.top-section {
    padding: 24px;
    position: relative;
}

.welcome-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.welcome-text h2 {
    font-weight: 400;
    font-size: 1.2rem;
}

.welcome-text h2 strong {
    font-weight: 700;
}

.profile-photo {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* List Items Styling */
.stats-list {
    list-style: none;
}

.stats-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #eef0f2;
    font-size: 0.95rem;
}

.stats-list li:last-child {
    border-bottom: none;
}

.label {
    color: #555;
}

.value {
    font-weight: 700;
    color: #222;
}

/* Status Icon Styling */
.status-verify {
    color: #2a7a4c;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Star Ratings */
.star-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #e2b13c; /* Gold color */
}

.rating-num {
    color: #555;
    font-weight: 400;
    margin-left: 4px;
}

/* Renew Now Button Container */
.button-section {
    padding: 0 24px 24px 24px;
}

.renew-btn {
    background-color: #2a7a4c;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px; /* Rounded button like the image */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.renew-btn:hover {
    background-color: #1f5d38;
}

.admin-btn {
    background-color: transparent;
    color: var(--black);
    border: 2px solid var(--amber-dark);
    padding: 12px 30px;
    border-radius: 25px; 
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.admin-btn:hover {
    background-color: var(--amber-dark);
    color: white;
}

/* Footer Icons Section */
.footer-section {
    display: flex;
    border-top: 1px solid #eef0f2;
    background-color: #fafbfc;
}

.footer-item {
    flex: 1;
    text-align: center;
    padding: 20px 10px;
    border-right: 1px solid #eef0f2;
    color: #2a7a4c;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.footer-item:last-child {
    border-right: none;
}

.footer-item:hover {
    background-color: #f1fef1;
}

.footer-item i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

.footer-item span {
    font-size: 0.8rem;
    font-weight: 600;
    display: block;
}

/* Responsiveness: Adjust layout on mobile */
@media (max-width: 480px) {
    .top-section::after {
        top: 55px;
    }
    
    .dashboard-widget {
        border-radius: 0;
    }

    .welcome-row {
        flex-direction: column-reverse; /* Put photo first, text below on narrow screens */
        align-items: center;
        gap: 15px;
        text-align: center;
    }
    
    .stats-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .footer-section {
        flex-wrap: wrap; /* Stack footer links if it gets too tight */
    }
    
    .footer-item {
        flex: 1 1 50%; /* Two items per row on very narrow screens */
        border-bottom: 1px solid #eef0f2;
    }
    
    .footer-item:nth-child(even) {
        border-right: none;
    }
}

/* Main Widget Container */
.card-container {
    width: 100%;
    max-width: 480px; /* Limits maximum width on desktop for visual consistency */
}

/* Main Card Body */
.profile-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    overflow: hidden;
    padding: 20px;
}

/* Accent top border */
.profile-top {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 15px;
}


.photo-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #eee;
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-text h2 {
    color: var(--navy-text);
    font-size: 1.2rem;
    font-weight: 700;
}

.info-text p.role {
    color: #555;
    font-size: 0.85rem;
    font-weight: 600;
}

.info-text p.sub-role {
    color: var(--grey-text);
    font-size: 0.8rem;
}

/* Responsiveness: Adjust layout on mobile */
@media (max-width: 480px) {
    .top-section {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .stats-list {
        gap: 8px;
    }

    .icon-label-group {
        width: 100%;
    }
    
    .placeholder-bar {
        width: 100%; /* Fill space on small screens */
    }

    .status-verify {
        align-self: flex-start;
        font-size: 0.75rem;
    }
    
    .button-container {
        flex-direction: column; /* Stack buttons vertically on narrow screens */
        gap: 10px;
    }
}

/* ADMIN DASHBOARD */
/* Main Layout Setup */
.admin-dashboard-wrapper {
    width: 100%;
    min-height: 100vh;
}

/* --- Main Header --- */
.main-header {
    background-color: white;
    color: var(--navy-text);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.logo {
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--navy-text);
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon {
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--grey-text);
}

.btn-dashboard {
    text-decoration: none;
    background-color: transparent;
    color: var(--navy-text);
    padding: 8px 20px;
    border: 1px solid var(--navy-text);
    border-radius: 20px;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.3s;
}

.btn-dashboard:hover {
    background-color: var(--navy-text);
    color: white;
}

/* --- Dynamic Stats Bar --- */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 30px 0;
}



.stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    color: white;
}

/* Specific colors for stat cards */
.purple-icon { background-color: var(--purple-stat); }
.amber-icon { background-color: var(--amber-pending); }
.green-icon { background-color: var(--green-status); }
.red-icon { background-color: var(--red-denied); }

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--grey-text);
}

/* --- Dashboard Grid Setup --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 68% 30%;
    gap: 2%;
}

/* Common Card Styling */


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    background-color: white;
    padding: 20px;
}

.card-header h3 {
    font-size: 1.2rem;
    color: var(--navy-text);
    font-weight: 700;
}

/* --- Application Filters (Tabs) --- */
.status-filters {
    display: flex;
    gap: 30px;
    font-size: 0.85rem;
}

.filter-tab {
    cursor: pointer;
    color: var(--grey-text);
    padding-bottom: 4px;
    transition: all 0.2s;
}
.filter-tab.total{
    color: var(--green-dark);
    font-weight: 500;
}
.filter-tab.verified{
    color: var(--green);
    font-weight: 500;
}
.filter-tab.pending{
    color: var(--amber);
    font-weight: 500;
}
.filter-tab.denied{
    color: var(--red);
    font-weight: 500;
}

.filter-tab.active{
    background:var(--line);
    display: flex;
    align-items: center;
    font-weight: 600;
    padding: 0 15px;
    border-radius: 8px;
}

/* --- Application List and Items --- */
.application-list {
    padding: 15px;
}

.application-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f3f5;
}

.application-item:last-child {
    border-bottom: none;
}

.vendor-block {
    display: flex;
    align-items: center;
    gap: 15px;
}

.vendor-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--green);
}

.vendor-details h4 {
    font-size: 0.95rem;
    color: var(--navy-text);
}

.vendor-details p.type {
    font-size: 0.8rem;
    color: var(--grey-text);
}

/* Functional status label colors */
.status-label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
}

.status-label.status-pending { color: var(--amber); }
.status-label.status-verified { color: var(--green); }
.status-label.status-denied { color: var(--red); }

.status-verified {
    background-color: var(--green); /* Green */
    color: var(--surface);
}

.status-pending {
    background-color: var(--amber); /* Amber */
    color: var(--surface);
}

.status-denied {
    background-color: var(--red); /* Red */
    color: var(--surface);
}

/* Standard buttons like in image */
.btn-dashboard-item {
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s;
}

/* --- System Management Section --- */
.system-management-card {
    margin-top: 30px;
}

.management-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
}

.btn-management {
    text-decoration: none;
    flex: 1 1 200px;
    border: 1px solid var(--green);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
}

.btn-management:hover {
    border-color: var(--green-dark);
    background-color: #f1fcf1;
}

.btn-icon {
    font-size: 1.2rem;
    color: var(--green-status);
}

.btn-label {
    font-size: 0.9rem;
    color: var(--navy-text);
    font-weight: 600;
}

/* --- Recent Activity Section --- */
.activity-feed {
    padding: 20px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
}

.activity-item:last-child {
    margin-bottom: 0;
}

/* Add timeline line *between* items */
.activity-item::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 4px;
    width: 2px;
    height: calc(100% + 5px);
    background-color: var(--border-color);
}

.activity-item:last-child::after {
    display: none;
}

/* Status dots for activities */
.activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 3px;
    z-index: 2;
}

.blue-dot { background-color: #2196F3; }

.activity-text {
    display: flex;
    flex-direction: column;
}

.activity-text.unread .vendor-name, .activity-text.unread .activity-action {
    color: var(--text);
    font-weight: bold;
}


.activity-action {
    font-size: 0.85rem;
    color: var(--navy-text);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--grey-text);
}

/* --- RESPONSIVENESS: Mobile and Tablet Breakpoint --- */
@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 100%; /* Stack elements vertically */
        grid-template-rows: auto auto;
    }

    .system-management-card {
        margin-top: 0;
    }
}

/* VENDOR LOGIN PAGE */

.login-page{
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    text-align: center;
}

/* Header Styling */
.login-header h1 {
    font-size: 1.5rem;
    color: var(--navy-primary);
    margin: 10px 0 5px;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.brand-icon {
    font-size: 2.5rem;
    color: var(--green-accent);
}

/* Form Elements */
.input-group {
    text-align: left;
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--navy-primary);
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
}

.input-wrapper input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
}

.input-wrapper input:focus {
    border-color: var(--green-accent);
}

/* Options & Buttons */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-bottom: 25px;
}

.remember-me {
    color: var(--text-muted);
    cursor: pointer;
}

.forgot-password {
    color: var(--green-accent);
    text-decoration: none;
    font-weight: 600;
}

.btn-login {
    width: 100%;
    padding: 14px;
    background-color: var(--green);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-login:hover {
    background-color: var(--green-dark);
}

.login-footer {
    margin-top: 25px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.login-footer a {
    color: var(--green-accent);
    text-decoration: none;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 480px) {
    .login-card {
        padding: 30px 20px;
    }
}

/* ADMIN LOGIN PAGE */

.admin-login-page{
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.admin-login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.admin-login-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    text-align: center;
}

/* Header Styling */
.admin-login-header h1 {
    font-size: 1.5rem;
    color: var(--navy-primary);
    margin: 10px 0 5px;
}

.admin-login-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.admin-btn-login {
    width: 100%;
    padding: 14px;
    background-color: var(--red-dark);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

/* POPUP MODALS */
/* Modal Overlay */
/* Color Variables (Ensuring these match your existing theme) */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
    padding: 15px; /* Added padding for mobile breathing room */
}

.modal-card {
    background: white;
    width: 100%;
    max-width: 850px;
    max-height: 90vh; /* Prevent card from exceeding screen height */
    border-radius: 20px;
    position: relative;
    overflow-y: auto; /* Allow scrolling inside the card on small screens */
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(0,0,0,0.2); /* Darken background for visibility */
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: white;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header-hero {
    background: var(--text);
    color: white;
    padding: 40px 20px;
    text-align: center;
}

/* --- Responsive Grid System --- */
.modal-body {
    display: grid;
    grid-template-columns: 1fr; /* Single column for mobile */
    gap: 20px;
    padding: 20px;
}

/* Tablet and Desktop View */
@media (min-width: 768px) {
    .modal-body {
        grid-template-columns: 1fr 1.5fr; /* Two columns for larger screens */
        padding: 30px;
        gap: 30px;
    }
}

.avatar-large img {
    width: 100%;
    height: 250px; /* Reduced height for mobile */
    object-fit: cover;
    border-radius: 15px;
}

@media (min-width: 768px) {
    .avatar-large img {
        height: 350px; /* Full height for desktop */
    }
}

.card-row {
    display: flex;
    flex-wrap: wrap; /* Allow badge/button to wrap on very small screens */
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.meta-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column for ID/Date on mobile */
    gap: 15px;
    margin: 20px 0;
}

@media (min-width: 480px) {
    .meta-grid {
        grid-template-columns: 1fr 1fr; /* Side by side on larger phones/tablets */
    }
}


@media (min-width: 600px) {
    .hero-actions {
        grid-template-columns: repeat(2, 1fr); /* 4 in a row for desktop */
    }
}

/* Common Button Styling */
.hero-actions button, .dashboard-button {
    width: 100%;
    padding: 12px 10px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    text-align: center;
}

.hero-actions button:active {
    transform: scale(0.98);
}

/* Style Overrides for Buttons */
.dashboard-button { background-color: var(--green-dark); color: white; width: auto; }
.verify { background-color: var(--green); color: white; }
.reject { background-color: transparent; color: var(--red-dark); border: 2px solid var(--red-dark) !important; }
.suspend { background-color: var(--amber-dark); color: white; }
.delete { background-color: var(--red); color: white; }
.cancel { background-color: var(--muted); color: white; }
.account-delete {margin-top: 10px; display: block; color: var(--red); }

.full-width { grid-column: 1 / -1; }


/* SECOND POPUP MODAL */
/* Center the form within the modal body */
.modal-body2 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the content horizontally */
    padding: 40px;
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Maintains two groups per row */
    gap: 25px; /* Spacing between inputs */
    width: 100%;
    max-width: 700px; /* Limits width to keep it centered and readable */
}

/* Ensure input groups and inputs take full width of their grid cell */
.input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy); /* Match dashboard header */
    margin-bottom: 8px;
}

.input-group input {
    width: 100%; /* Full width of the column */
    padding: 14px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    background: #fcfcfc;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: var(--green-dark);
    background: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    outline: none;
}

/* Action buttons alignment */
.hero-actions.full-width {
    grid-column: 1 / -1; /* Spans across both columns */
    display: flex;
    justify-content: center; /* Centers the buttons */
    gap: 15px;
    margin-top: 30px;
    width: 100%;
    max-width: 700px;
}

/* Mobile Responsiveness: stack on small screens */
@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr; /* Stacks to single column */
    }
}

.hero-actions {
    display: flex;          /* Places items side-by-side */
    flex-direction: row;    /* Ensures horizontal alignment */
    gap: 15px;              /* Spacing between buttons */
    align-items: center;    /* Vertical centering */
    justify-content: flex-start; /* Aligns to the left; use 'center' if desired */
    flex-wrap: nowrap;      /* Prevents the container from wrapping to a second line */
}

.btn {
    white-space: nowrap;    /* CRITICAL: Prevents text inside the button from breaking */
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: 0.3s ease;
}


/* Mobile Tweak: If the screen is too small, allow horizontal scroll 
   instead of breaking the layout */
@media (max-width: 480px) {
    .hero-actions {
        overflow-x: auto;
        padding-bottom: 10px; /* Space for scrollbar if it appears */
    }
}

/* Image (Right) */
.hero-image-block {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 15px solid var(--surface);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-radius: 24px;
     width: 100%;
    height: 80vh;
}

.hero-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.1); /* Adds depth */
}

/* APPLY NOW */

.apply-card {
    padding: 40px 0;
}

/* Header Styling */
.form-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    gap: 15px;
}

.form-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy-primary);
    white-space: nowrap;
}

.rule {
    flex: 1;
    border: none;
    border-top: 3px solid var(--green);
}

/* Form Layout */
.form-row { margin-bottom: 30px; width: 100%; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.grid-list { 
    display: grid; 
    grid-template-columns: 38% 60%; 
    gap: 2%; 
}

/* Desktop view matching two items per row */
@media (max-width: 600px) {
    .grid-2 { grid-template-columns: 1fr; gap: 20px; }

    .grid-list { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 20px; 
}
}

/* Input Fields & Select */
input[type="text"],
input[type="tel"],
input[type="email"]{
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    color: #333;
    transition: all 0.3s ease;
    background-color: #fcfcfc;
}

input:focus {
    border-color: var(--green);
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 122, 76, 0.1);
    outline: none;
}

input::placeholder { color: var(--muted); }


/* Submit Button */
.form-action { text-align: center; margin-top: 30px; }

.btn-submit {
    background-color: var(--green); /* Matching dynamic color scheme */
    color: white;
    padding: 14px 40px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    font-family: 'Inter', sans-serif;
}

.btn-submit:hover { background-color: var(--green-dark); }

/* Responsive adjustments for mobile phone */
@media (max-width: 480px) {
    .apply-card { padding: 30px 20px; }
    .btn-submit { width: 100%; }
}

/* FOOTER */
.main-footer {
    background-color: var(--green-dark);
    color: white;
    padding: 60px 0 0;
}

.footer-container {
    margin: 0 auto;
    padding: 20px 0 40px 0;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* Four column layout */
    gap: 40px;
}

.footer-column h3 {
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: white;
    position: relative;
}

/* Green underline accent */
.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 30px;
    height: 2px;
    background-color: var(--green);
}

.footer-column p {
    color: var(--surface);
    line-height: 1.6;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;     /* Ensures no extra browser-default spacing */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: var(--surface);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    color: white;
    background: rgba(255, 255, 255, 0.112);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.social-links a:hover {
    background: var(--green);
}

/* Copyright Bottom Bar */
.footer-bottom {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 25px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    font-size: 0.85rem;
    color: #888;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .social-links {
        justify-content: center;
    }
}