/* VIVO Tracker Frontend CSS v3.1 — Modern Dashboard UI */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
    --vp:#7cb518;--vpd:#4a8800;--vpa:#c5e355;
    --vl:#f0f9db;--vb:#d5eaa0;--vb2:#e6f5c0;
    --vt:#1a2a00;--vm:#6a8a40;--vs:#8aaa58;
    --bg:#f4fae8;--bgw:#fff;
    --sh:0 4px 24px rgba(90,140,10,.12);
    --sh2:0 8px 40px rgba(90,140,10,.18);
    --r:16px;--r2:10px;--r3:8px;
}

/* ===== BASE RESET — isolates plugin from WordPress theme ===== */
#vivo-app{
    all:initial;display:block;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    font-size:15px;line-height:1.6;color:var(--vt);background:var(--bg);
}
#vivo-app *,#vivo-app *::before,#vivo-app *::after{box-sizing:border-box;}
#vivo-app a{text-decoration:none;color:inherit;}
#vivo-app svg{display:inline-block;flex-shrink:0;vertical-align:middle;}

/* ===== HEADER ===== */
.vt-header{
    background:linear-gradient(135deg,#3d7000 0%,#6aaa00 45%,#8dc800 100%);
    padding:12px 24px;display:flex;align-items:center;
    justify-content:space-between;flex-wrap:wrap;gap:10px;
    box-shadow:0 3px 20px rgba(60,110,0,.28);
    position:sticky;top:0;z-index:100;
}
.vt-header-left{display:flex;align-items:center;gap:0;}
.vt-header-logo{
    font-size:19px;font-weight:900;color:#fff;letter-spacing:-.4px;
    display:flex;align-items:center;gap:8px;
}
.vt-header-logo svg{width:22px;height:22px;color:#c5e355;}
.vt-header-logo span{color:#d4f060;opacity:.95;}
.vt-header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vt-user-chip{display:flex;align-items:center;gap:9px;}
.vt-user-avatar{
    width:34px;height:34px;background:rgba(255,255,255,.22);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:800;color:#fff;border:2px solid rgba(255,255,255,.4);
    flex-shrink:0;
}
.vt-user-info{display:flex;flex-direction:column;line-height:1.2;}
.vt-user-name{font-size:13px;font-weight:700;color:#fff;}
.vt-user-role{font-size:11px;color:rgba(255,255,255,.72);text-transform:capitalize;}
.vt-logout-btn{
    display:flex;align-items:center;gap:6px;
    background:rgba(255,255,255,.14);color:#fff;
    border:1.5px solid rgba(255,255,255,.32);
    padding:7px 14px;border-radius:20px;
    font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;
}
.vt-logout-btn svg{width:14px;height:14px;}
.vt-logout-btn:hover{background:rgba(220,40,40,.28);border-color:rgba(220,40,40,.5);}

/* ===== BODY ===== */
.vt-body{padding:22px 20px 48px;max-width:1360px;margin:0 auto;}

/* ===== WELCOME BANNER ===== */
.vt-welcome-banner{
    background:linear-gradient(135deg,#4a8800 0%,#7cb518 100%);
    border-radius:var(--r);padding:20px 24px;margin-bottom:18px;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 4px 20px rgba(74,136,0,.3);color:#fff;
}
.vt-welcome-title{font-size:17px;font-weight:800;margin-bottom:3px;}
.vt-welcome-sub{font-size:13px;opacity:.82;}
.vt-welcome-icon{font-size:36px;line-height:1;opacity:.75;}

/* ===== OUTSTANDING BALANCE CARD ===== */
.vt-outstanding-card{
    background:linear-gradient(135deg,#163d00 0%,#2a6b00 40%,#3d8a00 70%,#5aaa00 100%);
    color:#fff;border-radius:var(--r);
    padding:20px 24px;margin:0 20px 16px;
    display:flex;align-items:center;gap:18px;
    box-shadow:0 8px 32px rgba(20,70,0,.35);
    border:1.5px solid rgba(180,255,80,.18);
    position:relative;overflow:hidden;
}
.vt-outstanding-card::before{
    content:'';position:absolute;top:-30px;right:-30px;
    width:130px;height:130px;border-radius:50%;
    background:rgba(255,255,255,.06);pointer-events:none;
}
.vt-outstanding-card::after{
    content:'₹';position:absolute;right:80px;top:50%;
    transform:translateY(-50%);font-size:88px;font-weight:900;
    color:rgba(255,255,255,.06);line-height:1;pointer-events:none;
    letter-spacing:-4px;
}
.vt-out-icon{
    width:56px;height:56px;min-width:56px;border-radius:50%;
    background:rgba(255,255,255,.15);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    border:1.5px solid rgba(255,255,255,.25);
    box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.vt-out-icon svg{color:#d4f060;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));}
.vt-out-body{flex:1;min-width:0;}
.vt-out-label{font-size:11px;font-weight:700;letter-spacing:.1em;opacity:.75;text-transform:uppercase;margin-bottom:5px;}
.vt-out-amount{font-size:30px;font-weight:900;letter-spacing:-.8px;color:#d4f060;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.2);}
.vt-out-note{font-size:11px;opacity:.65;margin-top:5px;font-style:italic;}
.vt-out-badge{
    display:flex;align-items:center;gap:5px;
    background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
    border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;
    letter-spacing:.04em;white-space:nowrap;flex-shrink:0;
    backdrop-filter:blur(4px);
}

/* ===== FILTER CARD ===== */
.vt-filter-card{
    background:#fff;border:1.5px solid var(--vb2);border-radius:var(--r);
    padding:18px 20px;margin-bottom:18px;box-shadow:var(--sh);
}
.vt-filter-grid{
    display:grid;grid-template-columns:1fr 1fr auto;
    align-items:end;gap:14px;margin-bottom:12px;
}
.vt-filter-item{display:flex;flex-direction:column;gap:6px;}
.vt-filter-actions{display:flex;gap:8px;align-items:center;}
.vt-filter-label{
    display:flex;align-items:center;gap:6px;
    font-size:11.5px;font-weight:700;color:var(--vs);
    text-transform:uppercase;letter-spacing:.6px;
}
.vt-select{
    padding:10px 14px;border:1.5px solid var(--vb);border-radius:var(--r2);
    font-size:14px;background:#fafffe;color:var(--vt);
    cursor:pointer;outline:none;width:100%;transition:border-color .18s;
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236a8a40'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;
}
.vt-select:focus{border-color:var(--vp);box-shadow:0 0 0 3px rgba(124,181,24,.14);}
.vt-search-input{
    padding:10px 14px;border:1.5px solid var(--vb);border-radius:var(--r2);
    font-size:14px;background:#fafffe;color:var(--vt);
    outline:none;width:100%;transition:border-color .18s;
}
.vt-search-input::placeholder{color:#aac870;}
.vt-search-input:focus{border-color:var(--vp);box-shadow:0 0 0 3px rgba(124,181,24,.14);}
.vt-load-btn{
    display:flex;align-items:center;gap:7px;padding:10px 18px;
    background:var(--vp);color:#fff;border:none;border-radius:var(--r2);
    font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;
    box-shadow:0 3px 12px rgba(124,181,24,.28);white-space:nowrap;
}
.vt-load-btn svg{width:14px;height:14px;}
.vt-load-btn:hover{background:var(--vpd);transform:translateY(-1px);}
.vt-export-btn{
    display:flex;align-items:center;gap:7px;padding:10px 16px;
    background:transparent;color:var(--vp);border:2px solid var(--vp);
    border-radius:var(--r2);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.vt-export-btn svg{width:14px;height:14px;}
.vt-export-btn:hover{background:var(--vl);}
.vt-result-info{font-size:13px;color:var(--vm);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.vt-result-badge{
    display:inline-block;background:linear-gradient(135deg,var(--vpd),var(--vp));
    color:#fff;padding:3px 12px;border-radius:20px;font-weight:700;font-size:12px;
}

/* ===== TABLE CARD ===== */
.vt-table-card{
    background:#fff;border:1.5px solid var(--vb2);border-radius:var(--r);
    box-shadow:var(--sh);overflow:hidden;
}

/* ===== LOADING STATE ===== */
.vt-loading-state{
    padding:64px 20px;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:18px;
}
.vt-loader-dots{display:flex;align-items:center;gap:8px;}
.vt-loader-dots span{
    width:12px;height:12px;border-radius:50%;background:var(--vp);
    animation:vtPulse 1.2s ease-in-out infinite;
}
.vt-loader-dots span:nth-child(2){animation-delay:.2s;opacity:.7;}
.vt-loader-dots span:nth-child(3){animation-delay:.4s;opacity:.4;}
@keyframes vtPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.vt-loading-state p{font-size:14px;color:var(--vm);}

/* ===== EMPTY STATE ===== */
.vt-empty-state{padding:60px 20px;text-align:center;}
.vt-empty-icon-wrap{
    width:88px;height:88px;background:var(--vl);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 22px;color:var(--vp);
    box-shadow:0 0 0 8px var(--vb2);
}
.vt-empty-state h3{font-size:18px;font-weight:700;color:var(--vt);margin-bottom:8px;}
.vt-empty-state p{font-size:14px;color:var(--vm);max-width:320px;margin:0 auto;}

/* ===== TABLE ===== */
.vt-table-scroll{overflow-x:auto;}
.vt-table{width:100%;border-collapse:collapse;font-size:14px;}
.vt-table thead th{
    background:linear-gradient(135deg,#3d7000,#6aaa00);
    color:#fff;padding:13px 18px;text-align:left;
    font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
    position:sticky;top:0;white-space:nowrap;
}
.vt-th-num{text-align:right!important;}
.vt-table tbody td{
    padding:12px 18px;border-bottom:1px solid #eef8d5;vertical-align:middle;
}
.vt-table tbody tr:last-child td{border-bottom:none;}
.vt-table tbody tr:hover td{background:#f7ffe8;}
.vt-table tbody tr:nth-child(even) td{background:#fafff3;}
.vt-table tbody tr:nth-child(even):hover td{background:#f2ffdf;}

/* Cells */
.vt-sl{color:var(--vm);font-size:12px;font-weight:600;}
.vt-sku-cell{display:flex;align-items:center;gap:9px;}
.vt-sku-dot{
    width:8px;height:8px;background:linear-gradient(135deg,var(--vp),var(--vpa));
    border-radius:50%;flex-shrink:0;
}
.vt-sku-name{font-weight:600;color:var(--vt);}
.vt-dp-val{font-weight:700;color:var(--vpd);}
.vt-count-pill{
    display:inline-block;
    background:linear-gradient(135deg,var(--vpd),var(--vp));
    color:#fff;padding:3px 14px;border-radius:20px;font-weight:800;font-size:12.5px;
}
.vt-val{font-weight:700;color:#275500;}
.vt-na{color:#b0c890;font-style:italic;}

/* Footer row */
.vt-tfoot-row td{
    background:linear-gradient(90deg,#edfac8,#f4fde4);
    border-top:2px solid var(--vb);padding:13px 18px;font-size:13px;
}
.vt-tfoot-label{font-weight:700;color:var(--vm);text-align:right;text-transform:uppercase;letter-spacing:.5px;}
#vt-grand-count{font-size:17px;font-weight:900;color:var(--vpd);text-align:right;}
#vt-grand-val{font-size:16px;font-weight:900;color:#275500;text-align:right;}

/* ===== PAGE FOOTER ===== */
.vt-page-footer{
    text-align:center;padding:20px;font-size:12px;color:var(--vm);
    border-top:1px solid var(--vb2);margin-top:8px;
}

/* ===== SPINNER (shared) ===== */
.vt-spin{
    display:inline-block;width:18px;height:18px;
    border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
    border-radius:50%;animation:vtSpin .7s linear infinite;
}
@keyframes vtSpin{to{transform:rotate(360deg)}}

/* ===== ANIMATION ===== */
@keyframes vtFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes vtSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===== LOGIN PAGE (external CSS complements inline CSS in login.php) ===== */
.vt-login-wrap{
    display:flex;min-height:100vh;align-items:stretch;
    background:linear-gradient(135deg,#f0f9db 0%,#fff 40%,#eef8d2 100%);
}
.vt-login-deco{
    flex:0 0 42%;background:linear-gradient(160deg,#6aaa00 0%,#3d7000 100%);
    position:relative;overflow:hidden;padding:48px 36px;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
}
@media(max-width:820px){.vt-login-deco{display:none;}}
.vt-deco-circles span{position:absolute;border-radius:50%;background:rgba(255,255,255,.08);}
.vt-deco-circles span:nth-child(1){width:340px;height:340px;top:-80px;right:-80px;}
.vt-deco-circles span:nth-child(2){width:220px;height:220px;bottom:-60px;left:-50px;}
.vt-deco-circles span:nth-child(3){width:130px;height:130px;top:50%;left:22%;transform:translateY(-50%);}
.vt-deco-logo{position:relative;z-index:2;text-align:center;color:#fff;}
.vt-deco-icon{font-size:58px;display:block;margin-bottom:14px;}
.vt-deco-title{font-size:36px;font-weight:900;letter-spacing:-1.5px;margin:0 0 8px;}
.vt-deco-sub{font-size:14px;opacity:.85;margin:0;}
.vt-deco-features{
    list-style:none;margin:32px 0 0;padding:0;position:relative;z-index:2;
    text-align:left;width:100%;
}
.vt-deco-features li{
    display:flex;align-items:center;gap:10px;
    font-size:13.5px;color:#fff;padding:9px 0;opacity:.92;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.vt-deco-features li:last-child{border:0;}
.vt-deco-dot{width:8px;height:8px;border-radius:50%;background:#c5e355;flex-shrink:0;}
.vt-login-form-panel{
    flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;
}
.vt-login-box{width:100%;max-width:400px;}
.vt-form-header{text-align:center;margin-bottom:30px;}
.vt-form-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;}
.vt-form-logo-icon{
    width:46px;height:46px;background:linear-gradient(135deg,#7cb518,#3d7000);
    border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;
    box-shadow:0 4px 18px rgba(74,136,0,.38);
}
.vt-form-logo-text{font-size:26px;font-weight:900;color:#1a3a00;letter-spacing:-1px;}
.vt-form-logo-text span{color:#7cb518;}
.vt-form-tagline{font-size:13px;color:var(--vs);margin:0;}
.vt-login-alert{
    padding:11px 16px;border-radius:10px;font-size:13.5px;font-weight:500;
    margin-bottom:16px;display:flex;align-items:center;gap:8px;
    animation:vtSlideIn .22s;
}
.vt-alert-err,.vt-alert-error{background:#fff0f0;color:#c62828;border:1.5px solid #ffb3b3;}
.vt-alert-ok{background:#f0fff4;color:#1a6a30;border:1.5px solid #86efac;}
.vt-field{margin-bottom:18px;}
.vt-lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.5px;color:#3a5a00;text-transform:uppercase;margin-bottom:7px;}
.vt-field-wrap{position:relative;display:flex;align-items:center;}
.vt-field-icon{position:absolute;left:13px;width:18px;height:18px;color:var(--vp);pointer-events:none;}
.vt-inp{
    display:block!important;width:100%!important;
    padding:13px 16px 13px 44px!important;
    border:2px solid #d5eaa0!important;border-radius:12px!important;
    font-size:14.5px!important;background:#f9ffe8!important;color:#1a2a00!important;
    outline:none!important;transition:border-color .2s,box-shadow .2s!important;
    -webkit-appearance:none!important;appearance:none!important;
}
.vt-inp:focus{border-color:#7cb518!important;background:#fff!important;box-shadow:0 0 0 4px rgba(124,181,24,.12)!important;}
.vt-inp::placeholder{color:#9ab870!important;}
.vt-eye{
    position:absolute!important;right:12px;background:none!important;border:none!important;
    cursor:pointer!important;padding:4px!important;color:var(--vp)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:30px!important;height:30px!important;border-radius:6px!important;
    transition:background .15s!important;
}
.vt-eye:hover{background:rgba(124,181,24,.12)!important;}
.vt-eye svg{width:17px!important;height:17px!important;}
.vt-submit{
    display:flex!important;align-items:center!important;justify-content:center!important;
    gap:10px!important;width:100%!important;padding:14px 20px!important;margin-top:8px!important;
    background:linear-gradient(135deg,#6aaa00 0%,#4a8800 100%)!important;
    color:#fff!important;border:none!important;border-radius:12px!important;
    font-size:15px!important;font-weight:700!important;cursor:pointer!important;
    box-shadow:0 4px 20px rgba(74,136,0,.38)!important;
    transition:transform .2s,box-shadow .2s!important;
}
.vt-submit:hover{transform:translateY(-2px)!important;box-shadow:0 8px 30px rgba(74,136,0,.48)!important;}
.vt-submit:disabled{opacity:.65!important;cursor:not-allowed!important;transform:none!important;}
.vt-submit svg{width:18px!important;height:18px!important;}
.vt-spin-btn{
    width:17px!important;height:17px!important;
    border:2.5px solid rgba(255,255,255,.35)!important;border-top-color:#fff!important;
    border-radius:50%!important;display:inline-block!important;
    animation:vtSpin .7s linear infinite!important;
}
.vt-info-bar{
    margin-top:20px;padding:13px 16px;
    background:linear-gradient(135deg,#f0f9db,#e6f5c0);
    border:1.5px solid #cde67a;border-radius:12px;
    font-size:13px;color:#4a6a10;
    display:flex;gap:10px;align-items:flex-start;
}
.vt-info-bar svg{flex-shrink:0;margin-top:1px;color:var(--vp);}
.vt-info-bar strong{color:#2a4a00;}
.vt-form-footer{text-align:center;margin-top:24px;font-size:12px;color:var(--vs);}

/* ===== ADMIN PANEL ===== */
.vta-badge{
    display:inline-block;font-size:10px;font-weight:700;
    background:rgba(255,255,255,.22);color:#fff;
    padding:2px 8px;border-radius:20px;margin-left:10px;letter-spacing:.6px;
    text-transform:uppercase;border:1px solid rgba(255,255,255,.32);vertical-align:middle;
}
.vta-tab-bar{
    background:#fff;border-bottom:2px solid var(--vb2);
    display:flex;gap:0;overflow-x:auto;padding:0 16px;
    position:sticky;top:56px;z-index:90;
    scrollbar-width:none;
}
.vta-tab-bar::-webkit-scrollbar{display:none;}
.vta-tab{
    display:flex;align-items:center;gap:7px;padding:14px 20px;
    background:none;border:none;border-bottom:3px solid transparent;
    font-size:13px;font-weight:600;color:var(--vm);cursor:pointer;
    white-space:nowrap;transition:all .18s;margin-bottom:-2px;
}
.vta-tab svg{width:15px;height:15px;}
.vta-tab:hover{color:var(--vp);background:var(--vl);}
.vta-tab.active{color:var(--vpd);border-bottom-color:var(--vpd);}
.vta-body{padding:20px 20px 48px;max-width:1360px;margin:0 auto;}
/* Pane: always visible (opacity:1 + transform:none), subtle entrance via transition.
   We do NOT use animation: for panes because some themes / accessibility settings
   disable animations (e.g. prefers-reduced-motion: reduce), which can leave the
   pane stuck at the from-keyframe value of opacity:0 and make it appear blank. */
.vta-pane{
    opacity:1;
    transform:none;
    transition:opacity .22s ease, transform .22s ease;
    display:block; /* ensure block even if theme overrides display */
}
.vta-hidden{display:none!important;}

/* Stats */
.vta-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:20px;}
.vta-stat{
    background:#fff;border:1.5px solid var(--vb2);border-radius:var(--r);
    padding:20px 18px;text-align:center;box-shadow:var(--sh);
    transition:transform .18s,box-shadow .18s;
}
.vta-stat:hover{transform:translateY(-3px);box-shadow:var(--sh2);}
.vta-stat-icon{font-size:26px;margin-bottom:8px;}
.vta-stat-val{font-size:24px;font-weight:900;color:var(--vt);line-height:1.2;}
.vta-stat-lbl{font-size:11px;color:var(--vm);margin-top:6px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.vta-stat-green{color:var(--vpd)!important;}
.vta-stat-date{font-size:15px!important;}

/* Card */
.vta-card{background:#fff;border:1.5px solid var(--vb2);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh);margin-bottom:18px;}
.vta-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.vta-card-title{font-size:15px;font-weight:800;color:var(--vt);margin:0 0 16px;}
.vta-card-head .vta-card-title{margin-bottom:0;}

/* Column mapping */
.vta-col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:8px;margin-bottom:16px;}
.vta-col-badge{background:var(--vl);border:1px solid var(--vb2);border-radius:8px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--vm);}
.vta-col-key{background:#e0f2c0;color:var(--vpd);border-color:var(--vp);}
.vta-col-filter{background:#fff7cd;color:#8a6500;border-color:#d4a800;}
.vta-notes{margin:0;padding-left:18px;color:var(--vm);font-size:13px;line-height:2.2;}
.vta-notes strong{color:var(--vt);}
.vta-notes code{background:var(--vl);padding:1px 6px;border-radius:4px;font-size:12px;color:var(--vpd);}

/* Drop zone */
.vta-drop-zone{
    border:2.5px dashed var(--vb);border-radius:var(--r);padding:52px 20px;
    text-align:center;cursor:pointer;transition:all .2s;background:#f7fff0;margin-bottom:14px;
}
.vta-drop-zone:hover,.vta-drop-zone.vta-dragover{border-color:var(--vp);background:var(--vl);}
.vta-drop-zone p{color:var(--vm);font-size:14px;margin-bottom:6px;}
.vta-drop-sub{font-size:12px;color:var(--vs);margin:8px 0;}
.vta-file-preview{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--vl);border-radius:10px;margin-top:12px;}
.vta-progress-track{background:var(--vb2);border-radius:999px;height:8px;overflow:hidden;}
.vta-progress-fill{background:linear-gradient(90deg,var(--vpd),var(--vpa));height:100%;width:0%;transition:width .35s;}

/* Buttons */
.vta-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r3);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .18s;line-height:1;}
.vta-btn:disabled{opacity:.6;cursor:not-allowed;}
.vta-btn svg{width:14px;height:14px;flex-shrink:0;}
.vta-btn-primary{background:var(--vp);color:#fff;box-shadow:0 2px 12px rgba(124,181,24,.3);}
.vta-btn-primary:hover{background:var(--vpd);}
.vta-btn-outline{background:transparent;color:var(--vp);border:2px solid var(--vp);}
.vta-btn-outline:hover{background:var(--vl);}
.vta-btn-ghost{background:transparent;color:var(--vm);border:1.5px solid var(--vb);}
.vta-btn-ghost:hover{background:var(--vl);}
.vta-btn-danger{background:#fee2e2;color:#c62828;border:1px solid #fca5a5;}
.vta-btn-danger:hover{background:#fca5a5;}
.vta-btn-sm{padding:5px 12px;font-size:12px;}
.vta-toggle-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--vp);color:#fff;border:none;border-radius:var(--r3);font-size:13px;font-weight:600;cursor:pointer;}
.vta-toggle-btn:hover{background:var(--vpd);}
.vta-toggle-btn svg{width:14px;height:14px;}

/* Admin alert */
.vta-alert{padding:11px 14px;border-radius:8px;font-size:13px;font-weight:500;animation:vtSlideIn .22s;}
.vta-alert-ok{background:#f0fff4;color:#1a6a30;border:1px solid #86efac;}
.vta-alert-error{background:#fef2f2;color:#c62828;border:1px solid #fca5a5;}

/* Admin inputs */
.vta-input{padding:9px 12px;border:1.5px solid var(--vb);border-radius:var(--r3);font-size:13px;background:#fafffe;color:var(--vt);outline:none;width:100%;transition:border-color .18s;}
.vta-input:focus{border-color:var(--vp);box-shadow:0 0 0 3px rgba(124,181,24,.12);}
.vta-select{padding:9px 12px;border:1.5px solid var(--vb);border-radius:var(--r3);font-size:13px;background:#fafffe;color:var(--vt);outline:none;width:100%;cursor:pointer;transition:border-color .18s;-webkit-appearance:none;appearance:none;}
.vta-select:focus{border-color:var(--vp);}
.vta-add-form{padding:16px 0 4px;border-top:1px solid var(--vb2);margin-top:12px;}
.vta-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.vta-form-field{display:flex;flex-direction:column;gap:5px;}
.vta-form-label{font-size:12px;font-weight:700;color:var(--vm);text-transform:uppercase;letter-spacing:.4px;}

/* Roles */
.vta-role-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.vta-role-admin{background:linear-gradient(135deg,var(--vpd),var(--vpa));color:#fff;}
.vta-role-user{background:var(--vl);color:var(--vm);border:1px solid var(--vb);}

/* Modal */
.vta-overlay{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
.vta-modal{background:#fff;border-radius:18px;padding:28px;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.22);animation:vtFadeUp .22s;}
.vta-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.vta-modal-head h3{font-size:17px;font-weight:800;color:var(--vt);}
.vta-modal-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--vm);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;}
.vta-modal-close:hover{background:var(--vl);}
.vta-dp-edit{display:flex;align-items:center;justify-content:flex-end;}
.vta-dp-form{display:flex;align-items:center;gap:6px;}
.vta-dp-input{width:100px;padding:5px 8px;font-size:13px;}
.vta-table-scroll{overflow-x:auto;}

/* ===== FRONTEND TAB BAR ===== */
.vt-front-tabbar{display:flex;gap:6px;margin-bottom:6px;background:#f0f4f0;border-radius:14px;padding:5px;border:1px solid var(--vb);}
.vt-front-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border-radius:10px;border:none;background:transparent;font-size:13px;font-weight:700;color:var(--vm);cursor:pointer;transition:all .18s;}
.vt-front-tab:hover{background:#fff;color:var(--vt);}
.vt-front-tab.active{background:linear-gradient(135deg,var(--vpd),var(--vpa));color:#fff;box-shadow:0 4px 12px rgba(33,90,33,.22);}
.vt-ftab-pane{width:100%;}

/* ===== GAP AMOUNT (inside outstanding card) ===== */
.vt-gap-row{width:100%;padding-top:10px;}
.vt-gap-divider{height:1px;background:rgba(255,255,255,.18);margin-bottom:8px;}
.vt-gap-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.vt-gap-label{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.3px;text-transform:uppercase;}
.vt-gap-formula{font-weight:400;font-size:10.5px;opacity:.8;}
.vt-gap-value{font-size:15px;font-weight:800;white-space:nowrap;}

/* ===== OUTSTANDING RECORDS TAB (Tab 2) ===== */
.vt-out-rec-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 14px;border-bottom:1px solid var(--vb);}
.vt-out-rec-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:var(--vt);}

/* Grand Total row (below outstanding records table) */
.vt-out-grand-row{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:linear-gradient(135deg,#e8f5e9,#f1f8e9);border-top:2px solid var(--vpd);margin:0;border-radius:0 0 4px 4px;}
.vt-out-grand-label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--vt);}
.vt-out-grand-val{font-size:18px;font-weight:900;color:var(--vpd);}

/* Gap Summary row (below Grand Total) */
.vt-gap-summary-row{display:flex;align-items:center;justify-content:space-between;padding:11px 24px;background:#fff3e0;border-top:1px dashed #e65100;margin:0;border-radius:0 0 14px 14px;}
.vt-gap-summary-label{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#bf360c;}
.vt-gap-summary-val{font-size:15px;font-weight:900;}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
    .vt-filter-grid{grid-template-columns:1fr 1fr;}
    .vt-filter-actions{grid-column:1/-1;}
}
@media(max-width:600px){
    .vt-header{padding:10px 14px;}
    .vt-header-logo{font-size:16px;}
    .vt-body{padding:14px 12px 36px;}
    .vt-filter-grid{grid-template-columns:1fr;}
    .vt-filter-actions{flex-wrap:wrap;}
    .vt-welcome-banner{padding:16px;}
    .vt-welcome-icon{display:none;}
    .vt-user-info{display:none;}
    .vt-table thead th,.vt-table tbody td,.vt-tfoot-row td{padding:10px 12px;}
    .vt-login-form-panel{padding:28px 16px;}
    .vt-front-tabbar{flex-direction:column;}
    .vt-out-grand-row,.vt-gap-summary-row{padding:12px 14px;}
}