@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
.vrd-dashboard,.vrd-login-wrap,.vrd-whatsapp-form-wrap{--bg:#03050d;--panel:rgba(7,14,35,.74);--card:rgba(8,18,42,.68);--border:rgba(103,178,255,.24);--blue:#21a8ff;--purple:#8c5cff;--text:#d7e6ff;--muted:rgba(215,230,255,.68);font-family:Inter,system-ui,sans-serif;color:var(--text)}
.vrd-dashboard *,.vrd-login-wrap *,.vrd-whatsapp-form-wrap *{box-sizing:border-box}.vrd-dashboard{min-height:100vh;background:radial-gradient(circle at 10% 0%,rgba(33,168,255,.16),transparent 30%),radial-gradient(circle at 90% 10%,rgba(140,92,255,.18),transparent 34%),linear-gradient(rgba(80,130,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(80,130,255,.035) 1px,transparent 1px),var(--bg);background-size:auto,auto,82px 82px,82px 82px,auto;display:grid;grid-template-columns:280px minmax(0,1fr)}
.vrd-sidebar{position:sticky;top:0;height:100vh;padding:22px;border-right:1px solid var(--border);background:linear-gradient(180deg,rgba(9,18,43,.9),rgba(5,10,24,.75));backdrop-filter:blur(24px)}.vrd-logo{padding:18px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(135deg,rgba(33,168,255,.10),rgba(140,92,255,.10)),rgba(5,13,32,.50);display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;margin-bottom:18px}.vrd-logo span{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--purple))}.vrd-logo strong{display:block;color:#fff}.vrd-logo small{display:block;color:var(--muted);font-size:11px}.vrd-nav{display:grid;gap:8px}.vrd-nav a,.vrd-logout{min-height:44px;padding:0 14px;display:flex;align-items:center;gap:10px;border-radius:14px;color:var(--text);text-decoration:none;border:1px solid transparent;transition:.25s}.vrd-nav a i{width:9px;height:9px;border-radius:50%;background:rgba(103,178,255,.36)}.vrd-nav a.active,.vrd-nav a:hover,.vrd-logout:hover{color:#fff;border-color:var(--border);background:linear-gradient(135deg,rgba(33,168,255,.12),rgba(140,92,255,.12))}.vrd-logout{margin-top:18px;border-color:rgba(255,255,255,.08)}
.vrd-main{padding:28px;min-width:0}.vrd-topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}.vrd-kicker,.vrd-badge{display:inline-flex;color:#8bd8ff;font-size:12px;font-weight:850;letter-spacing:.17em;text-transform:uppercase}.vrd-topbar h1{margin:5px 0 0;color:#fff;font-size:34px;line-height:1.08;letter-spacing:-.04em}.vrd-notification-pill,.vrd-btn,.vrd-mini-btn,.vrd-lock a{min-height:40px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(33,168,255,.16),rgba(140,92,255,.16)),rgba(5,13,32,.46);color:#fff;text-decoration:none;font-weight:800}.vrd-notification-pill strong{margin-left:8px;min-width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--purple))}
.vrd-panel,.vrd-stat,.vrd-login-card,.vrd-whatsapp-form-card,.vrd-lock{border:1px solid var(--border);border-radius:24px;background:radial-gradient(circle at 0 0,rgba(33,168,255,.10),transparent 36%),radial-gradient(circle at 100% 100%,rgba(140,92,255,.12),transparent 40%),var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.28);backdrop-filter:blur(24px) saturate(155%)}.vrd-panel{padding:22px;margin-bottom:22px}.vrd-panel h2{margin:0 0 18px;color:#fff;font-size:24px;letter-spacing:-.03em}.vrd-panel h3{margin:22px 0 12px;color:#fff}.vrd-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.vrd-card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:22px}.vrd-stat{padding:18px}.vrd-stat span{display:block;color:var(--muted);font-size:12px;font-weight:750}.vrd-stat strong{display:block;color:#fff;font-size:26px;font-weight:900;margin-top:8px}.vrd-two-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:22px}
.vrd-table-wrap{width:100%;overflow:auto;border-radius:18px;border:1px solid rgba(103,178,255,.12)}.vrd-table{width:100%;border-collapse:collapse;min-width:760px}.vrd-table th,.vrd-table td{padding:14px 12px;text-align:left;border-bottom:1px solid rgba(103,178,255,.10)}.vrd-table th{color:#fff;background:rgba(5,13,32,.42);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.vrd-table td{color:var(--text)}.vrd-table small{display:block;color:var(--muted);margin-top:4px}.vrd-status,.vrd-source{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:850;border:1px solid rgba(103,178,255,.20);background:rgba(33,168,255,.08);color:#9eeeff}.vrd-status-overdue,.vrd-status-cancelled{background:rgba(255,83,99,.12);color:#ffd4da;border-color:rgba(255,83,99,.34)}.vrd-status-returned{background:rgba(46,255,170,.10);color:#baffdf;border-color:rgba(46,255,170,.24)}
.vrd-filters,.vrd-update-form,.vrd-whatsapp-booking-form,.vrd-login-card form{display:grid;gap:14px}.vrd-filters{grid-template-columns:1fr 170px 170px auto;margin-bottom:16px}.vrd-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.vrd-update-form label,.vrd-whatsapp-booking-form label,.vrd-login-card label{display:grid;gap:7px;color:#fff;font-size:13px;font-weight:750}.vrd-update-form input,.vrd-update-form select,.vrd-update-form textarea,.vrd-filters input,.vrd-filters select,.vrd-whatsapp-booking-form input,.vrd-whatsapp-booking-form select,.vrd-whatsapp-booking-form textarea,.vrd-login-card input{width:100%;min-height:44px;padding:11px 13px;border-radius:13px;border:1px solid rgba(103,178,255,.20);background:rgba(2,5,13,.58);color:var(--text);outline:none}.vrd-update-form textarea,.vrd-whatsapp-booking-form textarea{min-height:105px}.vrd-update-form button,.vrd-filters button,.vrd-whatsapp-booking-form button,.vrd-login-card button{min-height:46px;padding:0 18px;border:0;border-radius:15px;cursor:pointer;color:#fff;font-weight:850;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 16px 36px rgba(82,102,255,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.vrd-profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.vrd-profile-card{padding:18px;border:1px solid rgba(103,178,255,.18);border-radius:18px;background:rgba(5,13,32,.38);text-decoration:none;color:#fff}.vrd-profile-card span{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--purple));margin-bottom:12px;font-weight:900}.vrd-profile-card strong{display:block;color:#fff}.vrd-profile-card small{display:block;color:var(--muted);margin-top:5px}.vrd-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.vrd-detail-grid div{padding:14px;border-radius:16px;background:rgba(5,13,32,.36);border:1px solid rgba(103,178,255,.12)}.vrd-detail-grid span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.vrd-detail-grid strong{display:block;color:#fff;margin-top:5px;word-break:break-word}.vrd-doc-link{display:inline-flex;margin-top:8px;color:#8bd8ff}
.vrd-notifications{display:grid;gap:10px}.vrd-note{display:grid;grid-template-columns:12px 1fr;gap:12px;padding:14px;border-radius:16px;text-decoration:none;border:1px solid rgba(103,178,255,.14);background:rgba(5,13,32,.34)}.vrd-note span{width:9px;height:9px;border-radius:50%;background:#2effaa;box-shadow:0 0 12px rgba(46,255,170,.75);margin-top:5px}.vrd-note strong{color:#fff}.vrd-note small{grid-column:2;color:var(--muted)}.vrd-note.is-read{opacity:.55}.vrd-calendar-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.vrd-calendar-list a{padding:14px;border-radius:16px;border:1px solid rgba(103,178,255,.16);background:rgba(5,13,32,.34);text-decoration:none;color:#fff}.vrd-calendar-list strong,.vrd-calendar-list span,.vrd-calendar-list small{display:block}.vrd-calendar-list span{color:#8bd8ff;margin-top:6px}.vrd-calendar-list small{color:var(--muted);margin-top:5px}
.vrd-login-wrap,.vrd-whatsapp-form-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:42px 16px;background:radial-gradient(circle at 18% 10%,rgba(33,168,255,.16),transparent 32%),radial-gradient(circle at 86% 12%,rgba(140,92,255,.20),transparent 34%),#03050d}.vrd-login-card,.vrd-whatsapp-form-card,.vrd-lock{width:min(100%,560px);padding:30px}.vrd-whatsapp-form-card{width:min(100%,760px)}.vrd-login-card h2,.vrd-whatsapp-form-card h2,.vrd-lock h3{margin:10px 0;color:#fff;font-size:32px;letter-spacing:-.04em}.vrd-login-card p,.vrd-whatsapp-form-card p,.vrd-lock p{color:var(--muted);line-height:1.65}.vrd-alert{padding:12px 14px;border-radius:14px;margin-bottom:14px;background:rgba(255,83,99,.14);border:1px solid rgba(255,83,99,.32);color:#ffd4da}.vrd-form-response{color:#8bd8ff}
@media(max-width:1180px){.vrd-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.vrd-profile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.vrd-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:960px){.vrd-dashboard{grid-template-columns:1fr}.vrd-sidebar{position:relative;height:auto}.vrd-main{padding:18px}.vrd-two-col{grid-template-columns:1fr}.vrd-filters{grid-template-columns:1fr 1fr}.vrd-calendar-list{grid-template-columns:1fr 1fr}}@media(max-width:767px){.vrd-topbar{display:block}.vrd-topbar h1{font-size:26px}.vrd-card-grid,.vrd-profile-grid,.vrd-detail-grid,.vrd-calendar-list{grid-template-columns:1fr}.vrd-form-grid,.vrd-filters{grid-template-columns:1fr}.vrd-panel,.vrd-login-card,.vrd-whatsapp-form-card{padding:18px;border-radius:20px}.vrd-main{padding:14px}.vrd-table{min-width:680px}.vrd-login-card h2,.vrd-whatsapp-form-card h2{font-size:26px}}


/* v1.0.2 UI polish */
html:has(.vrd-login-wrap), body:has(.vrd-login-wrap){
    min-height:100% !important;
    background:#03050d !important;
}
.vrd-login-wrap{
    min-height:100vh !important;
    width:100% !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(33,168,255,.18), transparent 32%),
        radial-gradient(circle at 84% 18%, rgba(140,92,255,.22), transparent 36%),
        linear-gradient(rgba(80,130,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80,130,255,.035) 1px, transparent 1px),
        #03050d !important;
    background-size:auto,auto,82px 82px,82px 82px,auto !important;
}
.vrd-login-card::before{
    content:"";
    display:block;
    width:260px;
    max-width:78%;
    height:88px;
    margin:0 auto 18px;
    background:url('vivid-logo.webp') center/contain no-repeat;
    filter:drop-shadow(0 12px 24px rgba(33,168,255,.18));
}
.vrd-logo{
    grid-template-columns:1fr !important;
    text-align:left !important;
}
.vrd-logo span{
    display:none !important;
}
.vrd-logo::before{
    content:"";
    display:block;
    width:180px;
    height:58px;
    background:url('vivid-logo.webp') left center/contain no-repeat;
    margin-bottom:8px;
}
.vrd-table-wrap{
    border:0 !important;
    border-radius:22px !important;
    background:rgba(5,13,32,.28) !important;
    padding:10px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.vrd-table{
    border-collapse:separate !important;
    border-spacing:0 10px !important;
    min-width:760px !important;
}
.vrd-table thead th{
    border:0 !important;
    background:linear-gradient(135deg, rgba(33,168,255,.10), rgba(140,92,255,.08)), rgba(5,13,32,.62) !important;
    color:rgba(255,255,255,.84) !important;
    padding:14px 16px !important;
}
.vrd-table thead th:first-child{border-radius:16px 0 0 16px !important;}
.vrd-table thead th:last-child{border-radius:0 16px 16px 0 !important;}
.vrd-table tbody tr{
    background:linear-gradient(135deg, rgba(7,18,42,.72), rgba(12,11,42,.62)) !important;
    box-shadow:0 12px 24px rgba(0,0,0,.12) !important;
}
.vrd-table tbody td{
    border:0 !important;
    border-top:1px solid rgba(103,178,255,.12) !important;
    border-bottom:1px solid rgba(103,178,255,.12) !important;
    padding:18px 16px !important;
}
.vrd-table tbody td:first-child{
    border-left:1px solid rgba(103,178,255,.12) !important;
    border-radius:16px 0 0 16px !important;
}
.vrd-table tbody td:last-child{
    border-right:1px solid rgba(103,178,255,.12) !important;
    border-radius:0 16px 16px 0 !important;
}
.vrd-table tbody tr:hover{
    background:linear-gradient(135deg, rgba(12,32,68,.86), rgba(26,18,66,.72)) !important;
}
.vrd-mini-btn{
    min-height:36px !important;
    border-radius:12px !important;
    padding:0 14px !important;
}
.vrd-status,.vrd-source{
    border-radius:999px !important;
    padding:7px 10px !important;
    background:linear-gradient(135deg, rgba(33,168,255,.14), rgba(140,92,255,.08)) !important;
}
.vrd-whatsapp-form-wrap{
    min-height:100vh !important;
}
@media(max-width:767px){
    .vrd-table-wrap{
        padding:6px !important;
    }
    .vrd-table{
        min-width:620px !important;
        border-spacing:0 8px !important;
    }
    .vrd-table tbody td{
        padding:14px 12px !important;
    }
    .vrd-login-card::before{
        width:210px;
        height:70px;
    }
}


/* v1.0.3 Dashboard table border cleanup */
.vrd-panel .vrd-table-wrap,
.vrd-table-wrap{
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:0 !important;
    overflow-x:auto !important;
}
.vrd-table{
    border-collapse:separate !important;
    border-spacing:0 12px !important;
    border:none !important;
    outline:none !important;
    width:100% !important;
}
.vrd-table,
.vrd-table thead,
.vrd-table tbody,
.vrd-table tr,
.vrd-table th,
.vrd-table td{
    border-left:0 !important;
    border-top:0 !important;
    outline:0 !important;
}
.vrd-table thead tr{
    box-shadow:none !important;
}
.vrd-table thead th{
    border:none !important;
    background:linear-gradient(135deg, rgba(33,168,255,.10), rgba(140,92,255,.08)), rgba(5,13,32,.68) !important;
}
.vrd-table thead th:first-child{
    border-radius:18px 0 0 18px !important;
}
.vrd-table thead th:last-child{
    border-radius:0 18px 18px 0 !important;
}
.vrd-table tbody tr{
    background:transparent !important;
    box-shadow:none !important;
}
.vrd-table tbody td{
    border:none !important;
    background:linear-gradient(135deg, rgba(7,18,42,.76), rgba(12,11,42,.66)) !important;
    border-top:1px solid rgba(103,178,255,.13) !important;
    border-bottom:1px solid rgba(103,178,255,.13) !important;
}
.vrd-table tbody td:first-child{
    border-left:1px solid rgba(103,178,255,.13) !important;
    border-radius:18px 0 0 18px !important;
}
.vrd-table tbody td:last-child{
    border-right:1px solid rgba(103,178,255,.13) !important;
    border-radius:0 18px 18px 0 !important;
}
.vrd-table tbody tr:hover td{
    background:linear-gradient(135deg, rgba(12,32,68,.90), rgba(26,18,66,.78)) !important;
}
.vrd-panel{
    overflow:hidden !important;
}
@media(max-width:767px){
    .vrd-table{
        border-spacing:0 10px !important;
        min-width:620px !important;
    }
}
/* End v1.0.3 */


/* v1.0.4 Notification read / unread UI */
.vrd-panel-subtitle{
    margin:6px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}
.vrd-inline-form{
    margin:0;
}
.vrd-note-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 18px;
}
.vrd-note-tabs a{
    min-height:38px;
    padding:0 13px;
    border-radius:999px;
    border:1px solid rgba(103,178,255,.18);
    background:rgba(5,13,32,.34);
    color:var(--text);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    font-size:13px;
}
.vrd-note-tabs a.active{
    color:#fff;
    border-color:rgba(103,178,255,.36);
    background:linear-gradient(135deg,rgba(33,168,255,.18),rgba(140,92,255,.14)),rgba(5,13,32,.48);
}
.vrd-note-tabs strong{
    min-width:23px;
    height:23px;
    padding:0 7px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    color:#fff;
    font-size:11px;
}
.vrd-notifications{
    display:grid;
    gap:12px;
}
.vrd-note{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:14px;
    border-radius:18px;
    border:1px solid rgba(103,178,255,.16);
    background:rgba(5,13,32,.34);
    transition:.25s ease;
}
.vrd-note.is-new{
    border-color:rgba(80,205,255,.34);
    background:
        radial-gradient(circle at 0% 0%,rgba(33,168,255,.14),transparent 36%),
        linear-gradient(135deg,rgba(7,18,42,.76),rgba(12,11,42,.66));
    box-shadow:0 14px 34px rgba(33,168,255,.08);
}
.vrd-note.is-read{
    opacity:.62;
    border-color:rgba(103,178,255,.08);
    background:rgba(5,13,32,.22);
}
.vrd-note-main{
    display:grid;
    grid-template-columns:12px 1fr;
    gap:12px;
    text-decoration:none;
    min-width:0;
}
.vrd-note-main span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#2effaa;
    box-shadow:0 0 12px rgba(46,255,170,.75);
    margin-top:5px;
}
.vrd-note.is-read .vrd-note-main span{
    background:rgba(215,230,255,.34);
    box-shadow:none;
}
.vrd-note-main strong{
    color:#fff;
    line-height:1.45;
}
.vrd-note-main small{
    grid-column:2;
    color:var(--muted);
}
.vrd-note-action{
    margin:0;
}
.vrd-note-action button{
    min-height:36px;
    padding:0 13px;
    border:1px solid rgba(103,178,255,.26);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(33,168,255,.15),rgba(140,92,255,.12)),rgba(5,13,32,.55);
    color:#fff;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.vrd-note-action button:hover{
    border-color:rgba(103,178,255,.48);
    transform:translateY(-1px);
}
.vrd-read-badge{
    min-height:31px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(215,230,255,.12);
    color:rgba(215,230,255,.56);
    display:inline-flex;
    align-items:center;
    font-style:normal;
    font-size:12px;
    font-weight:800;
}
.vrd-empty-note{
    padding:18px;
    border-radius:16px;
    border:1px solid rgba(103,178,255,.12);
    background:rgba(5,13,32,.28);
    color:var(--muted);
}
@media(max-width:767px){
    .vrd-note{
        grid-template-columns:1fr;
    }
    .vrd-note-action button,
    .vrd-read-badge{
        width:100%;
        justify-content:center;
    }
}
/* End v1.0.4 */


/* v1.0.5 Notification action fix styles */
.vrd-success-msg{
    margin:0 0 16px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(46,255,170,.22);
    background:rgba(46,255,170,.08);
    color:#baffdf;
    font-weight:750;
}
.vrd-mark-all-link{
    white-space:nowrap;
}
.vrd-note-mark-read{
    min-height:36px;
    padding:0 13px;
    border:1px solid rgba(103,178,255,.28);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(33,168,255,.16),rgba(140,92,255,.12)),rgba(5,13,32,.58);
    color:#fff !important;
    text-decoration:none !important;
    font-weight:850;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    transition:.25s ease;
}
.vrd-note-mark-read:hover{
    border-color:rgba(103,178,255,.52);
    transform:translateY(-1px);
}
.vrd-note.is-new{
    opacity:1 !important;
}
.vrd-note.is-read{
    opacity:.58 !important;
}
.vrd-note.is-read .vrd-note-main strong{
    color:rgba(215,230,255,.70) !important;
}
.vrd-note.is-read .vrd-note-main small{
    color:rgba(215,230,255,.46) !important;
}
@media(max-width:767px){
    .vrd-panel-head{
        align-items:flex-start;
    }
    .vrd-mark-all-link,
    .vrd-note-mark-read{
        width:100%;
    }
}
/* End v1.0.5 */
