:root {
    --tvk-font-en:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --tvk-font-ta:'Noto Sans Tamil','Latha',system-ui,sans-serif;

    /* font sizes */
    --tvk-text-xs:.75rem;
    --tvk-text-sm:.875rem;
    --tvk-text-md:.9375rem;
    --tvk-text-base:1rem;
    --tvk-text-lg:1.125rem;
    --tvk-text-xl:1.25rem;
    --tvk-text-2xl:1.5rem;

    /* line heights */
    --tvk-line-tight:1.2;
    --tvk-line-normal:1.5;

    /* brand colors */
    --brand-red:#D32F2F;
    --brand-gold:#F9A825;
    --brand-red-hover:#B71C1C;
    --brand-gold-hover:#F57F17;

    /* neutrals */
    --ink:#111827;
    --muted:#6B7280;
    --bg:#FAFAFA;
    --card:#FFFFFF;
    --border:#E5E7EB;
    --gray-50:#FAFAFA;
    --gray-100:#F3F4F6;
    --gray-200:#E5E7EB;
    --gray-300:#D1D5DB;

    /* radius / shadow */
    --radius:18px;
    --shadow:0 10px 30px rgba(0,0,0,.08);

    /* spacing scale */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;

    /* misc */
    --transition:.25s ease;
    --nav-height:60px;
    --tabs-height:52px;
    --top-nav-height: 90px;
    --bottom-nav-height: 90px;
    --toolbar-height: auto;
}

html,body {height:100%;margin:0;padding:0;}
body {font-family:var(--tvk-font-ta),var(--tvk-font-en);font-size:var(--tvk-text-base);line-height:var(--tvk-line-normal);background:#f5f7fb;color:var(--ink);width:100%;display:flex;flex-direction:column;}
.ta-text {font-family:var(--tvk-font-ta),var(--tvk-font-en);}

/* Headings */
h1,.h1 {font-size:var(--tvk-text-2xl);font-weight:600;line-height:var(--tvk-line-tight);margin-bottom:.75rem;}
h2,.h2 {font-size:var(--tvk-text-xl);font-weight:600;line-height:var(--tvk-line-tight);margin-bottom:.5rem;}
h3,.h3 {font-size:var(--tvk-text-lg);font-weight:500;line-height:var(--tvk-line-tight);margin-bottom:.5rem;}
.tvk-label {font-size:var(--tvk-text-sm);font-weight:500;}
.tvk-muted {font-size:var(--tvk-text-sm);color:var(--muted);}

/* Card */
.tvk-card {border-radius:.75rem;border:1px solid var(--gray-200);background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.04);}
.tvk-card-header {padding:.9rem 1.25rem;border-bottom:1px solid var(--gray-200);}
.tvk-card-body {padding:1.25rem;}

/* Layout */
#tvk-spa-content {width:100%;min-height:100dvh;display:flex;flex-direction:column;}
.page {width:100%;max-width:480px;margin:0 auto;padding:0 1px;}
.wrap {width:100%;flex:1;display:flex;flex-direction:column;align-items:stretch;padding-bottom:24px;}

/* Hero */
.hero {position:relative;width:100%;max-width:480px;aspect-ratio:3/2;overflow:hidden;background:#eee;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);box-shadow:var(--shadow);}
.hero img {width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;animation:fadeIn .6s ease;}
.hero::after {content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15) 20%,rgba(0,0,0,.45) 100%);}
.badge {position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(211,47,47,.85),rgba(249,168,37,.85));color:#fff;padding:8px 12px;border-radius:999px;font-weight:600;font-size:12px;box-shadow:var(--shadow);backdrop-filter:blur(6px);}
.badge .dot {width:8px;height:8px;border-radius:999px;background:#fff;}
.hero:hover .badge {transform:translateY(-2px);}
@keyframes fadeIn {from{opacity:.2;scale:1.05;}to{opacity:1;scale:1;}}

/* Login Card */
.card-panel {width:100%;max-width:480px;margin-top:2px;background:var(--card);border-radius:calc(var(--radius) + 6px);padding:18px;box-shadow:var(--shadow);}
.card-title {font-size:1.25rem;font-weight:700;color:var(--ink);margin:0 0 6px;}
.card-subtitle {font-size:var(--tvk-text-md);color:var(--muted);margin:0 0 14px;line-height:1.4;}

/* Form */
.form-row {display:flex;gap:5px;align-items:center;}
.country {flex:0 0 96px;}
.country select {width:100%;height:43px;border:1px solid var(--muted);border-radius:12px;padding:0 10px;font-weight:600;background:#fff;outline:none;}
.input {flex:1;}
.input input {width:100%;height:43px;border:1px solid var(--muted);border-radius:12px;padding:0 14px;font-size:16px;outline:none;transition:border .2s;}
.input input:focus {border-color:var(--brand-red);}
.helper {font-size:var(--tvk-text-sm);color:var(--muted);margin-top:8px;}

/* Buttons */
.actions {margin-top:14px;display:grid;gap:10px;}
.btn {height:42px;border:none;border-radius:14px;font-weight:700;font-size:16px;cursor:pointer;box-shadow:var(--shadow);transition:transform .05s ease;}
.btn.primary {background:linear-gradient(135deg,var(--brand-red),var(--brand-gold));color:#fff;}
.btn.ghost {background:#fff;border:1px solid var(--gray-200);}
.btn:active {transform:translateY(1px);}

/* OTP */
.otp-group {display:flex;gap:10px;justify-content:center;margin-top:12px;}
.otp-input {width:42px;height:48px;text-align:center;font-size:20px;border:1px solid var(--gray-200);border-radius:12px;outline:none;transition:border .2s;}
.otp-input:focus {border-color:var(--brand-red);}
.tos a {color:var(--brand-red);text-decoration:none;}

/* Footer */
.foot {margin:var(--space-2) 0 var(--space-5);text-align:center;color:var(--muted);font-size:var(--tvk-text-sm);line-height:1.4;}

/* Toast */
#toast {position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(17,24,39,.92);color:#fff;padding:12px 18px;border-radius:14px;font-size:var(--tvk-text-sm);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:9999;max-width:calc(100% - 40px);text-align:center;}
#toast.show {opacity:1;transform:translateX(-50%) translateY(-4px);}

/* Top bar BLO info */
.blowrapper {text-align:right;display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:10px;}
.blo-line {font-size:15px;line-height:1.1;color:#fff;display:flex;justify-content:flex-end;align-items:center;gap:2px;}
.blo-line .lbl {font-weight:600;opacity:0.95;}
.blo-line .val {font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Bottom nav */
.bottom-nav-wrapper {display:flex;justify-content:center;position:fixed;bottom:0;left:0;right:0;width:100%;padding:0;background-color:#fff;z-index:999;}
.bottom-nav {display:flex;justify-content:space-around;align-items:center;width:100%;padding:2px 0!important;border-top:1px solid #666!important;box-sizing:border-box;}
.bottom-nav a {flex:1;text-align:center;padding:2px 0!important;}
.bottom-nav .nav-link {color:black!important;font-size:14px;text-align:center;line-height:0.9;}
.bottom-nav .nav-link i {font-size:24px;display:block;margin-bottom:-4px!important;line-height:1;}
.bottom-nav .nav-link.active {color:red!important;}
.bottom-nav .nav-link:hover {color:#000;}

/* Offcanvas sidebar */
#offcanvasSidebar {width:300px;}
.sidebar-header {display:flex;align-items:center;padding:15px;border-bottom:1px solid #ddd;justify-content:start;}
.sidebar-header img {width:50px;height:50px;border-radius:50%;margin-right:10px;}
.sidebar-header h5 {margin-bottom:0;}
.sidebar-list {list-style:none;padding-left:0;}
.sidebar-list li {padding:10px 15px;border-bottom:1px solid #ddd;}
.sidebar-list li a {text-decoration:none;color:black;display:flex;align-items:center;}
.sidebar-list li a i {margin-right:10px;}
.sidebar-list li a .chevron-right {margin-left:auto;}
.sidebar-list li a:hover {background-color:#f8f9fa;}
.contact-section {padding:15px;font-size:14px;}
.contact-section p {margin-bottom:5px;}
.contact-section b {display:block;margin-top:10px;}

/* Loading overlay */
#loadingOverlay {position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.8);z-index:9999;display:flex;justify-content:center;align-items:center;}

/* Responsive centering on desktop */
@media (min-width:768px) {#tvk-spa-content{max-width:480px;margin:0 auto;}}
@media (min-width:768px) {.navbar-center-wrapper{max-width:480px;margin:0 auto;}.bottom-nav-wrapper{max-width:480px;margin:0 auto;}}
@media (max-width:480px) {.blowrapper{width:170px;padding:5px 6px;}.blo-line{font-size:14px;}.blo-line .val{max-width:100px;}}

/* Tabs */
.tvk-tabs-wrapper {position:sticky;top:65px;z-index:1030;background:#fff;border-top:1px;border-bottom:1px solid #dee2e6;}
.tvk-tabs {display:flex;gap:8px;padding:2px 12px;overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
.tvk-tabs .nav-link {flex:0 0 auto;display:inline-flex;align-items:center;padding:8px 10px;border-radius:8px;white-space:nowrap;}
.tvk-tabs .nav-link.active {background:#0d6efd;color:#fff;box-shadow:0 2px 6px rgba(13,110,253,.12);}
.tvk-tabs::-webkit-scrollbar {display:none;}

/* Search bar under tabs */
.tvk-search-wrapper {position:sticky;top:calc(var(--nav-height) + 48px);z-index:1029;background:#fff;padding:.2rem;border-bottom:1px solid #eee;display:flex;gap:.5rem;align-items:center;}
.tvk-search-wrapper .input-group {flex:1 1 auto;max-width:calc(100% - 56px);}
.tvk-search-wrapper .dropdown {flex:0 0 auto;}

/* Dropdown theming + stacking */
.dropdown-menu {background:#f8f9fa!important;border:1px solid #dee2e6;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);}
.dropdown-item {border-bottom:1px solid #e9ecef;}
.dropdown-item:last-child {border-bottom:none;}
.dropdown-item:hover {background:#e2e6ea;border-radius:8px;}
.dropdown .dropdown-menu {z-index:2000!important;}

/* Navbar + offcanvas stacking */
.navbar-center-wrapper,.navbar {overflow:visible;z-index:1055;}
.offcanvas {z-index:3000!important;}

/* Voter card */
.voter-card {position:relative;margin:8px;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);overflow:hidden;transition:transform .1s ease,box-shadow .2s ease;box-sizing:border-box;max-width:calc(100% - 16px);}
.voter-card:hover {transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.voter-accent {position:absolute;top:0;left:0;width:5px;height:100%;border-radius:5px 0 0 5px;}
.voter-card.member .voter-accent {background:linear-gradient(180deg,#4ade80,#16a34a);}
.voter-card.voter .voter-accent {background:linear-gradient(180deg,#fca5a5,#ef4444);}
.voter-body {padding:6px 7px 5px 10px;display:flex;align-items:center;gap:12px;}

/* Photo */
.voter-photo {flex:0 0 80px;width:80px;height:90px;position:relative;overflow:visible;}
.voter-img {width:100%;height:100%;object-fit:cover;border-radius:10px;border:2px solid #ddd;display:block;}
.mobile-diagonal-badge {position:absolute;top:6px;left:-22px;background:#D32F2F;color:#fff;font-size:10px;font-weight:600;padding:2px 25px;transform:rotate(-45deg);z-index:20;line-height:12px;pointer-events:none;border-radius:2px;}
.sir-diagonal-badge {position:absolute;bottom:6px;right:-10px;background:#2E7D32;color:#fff;font-size:10px;font-weight:600;padding:2px 8px;transform:rotate(-90deg);transform-origin:center;z-index:20;line-height:12px;pointer-events:none;border-radius:2px;}

/* Info */
.voter-info {flex:1 1 auto;min-width:0;line-height:1.1;}
.voter-header {display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
.voter-name {font-weight:600;font-size:15px;color:#111;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.voter-card .badge-pill {font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;text-transform:uppercase;flex:0 0 auto;white-space:nowrap;}
.voter-card.member .badge-pill {background:#16a34a;color:#fff;height:19px;line-height:19px;display:inline-block;padding:0 10px;border-radius:12px;}
.voter-card.voter .badge-pill {background:#dc2626;color:#fff;height:19px;line-height:19px;display:inline-block;padding:0 10px;border-radius:12px;}

/* Subtext / meta */
.voter-subtext {display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#6b7280;margin-bottom:4px;}
.voter-subtext .left {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.voter-subtext .right {font-weight:600;background:linear-gradient(135deg,#f97316,#ea580c);padding:2px 8px;border-radius:8px;font-size:12px;color:#fff;}
.voter-meta {font-size:12.5px;color:#6b7280;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:2px;}

/* Door badge */
.door-badge {display:inline-flex;align-items:center;height:19px;line-height:19px;gap:4px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border-radius:999px;padding:2px 8px;font-weight:600;font-size:11.5px;box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.05);}
.door-badge i {font-size:13px;color:#000!important;}

/* Street badge */
.street-badge {font-weight:600;background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;padding:2px 8px;border-radius:8px;font-size:12px;white-space:nowrap;}

/* Badge Dropdown */
.badge-dropdown { position: absolute; min-width: 160px; background: #fff9e6; border: 1px solid #ddd; box-shadow: 0 6px 18px rgba(0,0,0,0.08); border-radius: 6px; z-index: 99999; padding: 6px 0; font-size: 14px; }
.badge-dropdown .dropdown-item { display: block; padding: 8px 12px; font-weight: 700; color: #333; cursor: pointer; }
.badge-dropdown .dropdown-item:hover { background: #f5f5f5; }

/* Offcanvas Content Area */
.voter-sheet.offcanvas-bottom{height:auto;max-height:92vh;border-top-left-radius:16px;border-top-right-radius:16px}
.voter-sheet .offcanvas-body{padding:0}
@media(max-width:991px){.voter-sheet.offcanvas-bottom{width:100vw;left:0;right:0;border-radius:16px 16px 0 0}}
#voterSheetContent .voter-detail{padding:12px 16px;display:flex;gap:12px;align-items:flex-start}
#voterSheetContent .voter-avatar{width:72px;height:72px;border-radius:12px;object-fit:cover;background:#f3f4f6}
#voterSheetContent .voter-info h5{margin:0;font-size:16px;font-weight:700}
#voterSheetContent .voter-info .muted{color:#6b7280;font-size:13px;margin-top:6px}
#voterSheetContent .voter-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.voter-action-btn{border-radius:12px;padding:8px 12px;font-weight:600}

/*Offcanvas Headere */
#voterSheetTitle { font-size: 16px; font-weight: 700; color: #111827; }
.voter-sheet-header { width: 100%; padding: 10px 14px; border-top-left-radius: 16px; border-top-right-radius: 16px; background: linear-gradient(135deg, #FFC107, #D32F2F); color: #fff; text-align: center; position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
.voter-sheet-header h6 { font-size: 15.5px; font-weight: 700; margin: 4px 0; color: #fff; }
.voter-sheet-header .btn-close { position: absolute; right: 12px; top: 5px; filter: brightness(0) invert(1); opacity: 0.9; width: 26px; height: 26px; }
.voter-sheet-header .btn-close:active { transform: scale(0.90); }
@media (max-width: 480px) { .voter-sheet-header { padding: 10px 12px; } .voter-sheet-header h6 { font-size: 15px; } .voter-sheet-header .btn-close { right: 10px; top: 10px; width: 24px; height: 24px; } }

#otpInputs .otp-box { width: 42px; height: 42px; font-size: 18px; padding: .25rem; }
@media (max-width:420px) { #otpInputs .otp-box { width: 36px; height: 36px; font-size: 16px; } }
.otp-input-lg { height: 45px; font-size: 14px; }
.otp-btn-lg { height: 45px; white-space: nowrap; font-size: 14px; }
.otp-box { width: 45px; height: 45px; font-size: 20px; text-align: center; border: 1px solid #ccc; border-radius: 6px; }
.flex-gap { gap: .5rem !important; }

.card-minimal {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.card-header-minimal {
    background: linear-gradient(90deg, #e5e5e5 0%, #bfbfbf 100%);
    font-weight: 600;
    font-size: 1.00rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-minimal.dropdown-open {
    overflow: visible !important;
}

.header-title {
    flex: 1;
    text-align: center;
}

.dropdown-toggle.no-caret::after { display: none; }

.form-select { min-height: 44px; }
.form-select { border-radius: 10px; }
.select-row { gap: .75rem; margin-bottom: .6rem; }

.tvk-map-spa {
    height: calc(100vh - var(--top-nav-height) - var(--bottom-nav-height));
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-height: 300px;
}

/* map grows to fill available space, toolbar sits below */
.tvk-map-inner {
    flex: 1 1 auto;
    position: relative;
    min-height: 200px;
    /* ensure the leaflet map can occupy the area */
}

/* toolbar uses two stacked rows */
.tvk-map-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    box-shadow: 0 -1px 6px rgba(0,0,0,0.08);
    font-size: 14px;
}

.toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Row 1: left part (coords) and right part (single-line address) */
.toolbar-row--address {
    justify-content: space-between;
}

.address-left {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: 12px;
}

.address-right {
    flex: 1 1 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #555;
    font-size: 13px;
}

.tvk-toast {
    position: fixed;
    right: 16px;
    bottom: calc(var(--bottom-nav-height) + 16px); /* above bottom nav */
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    z-index: 9999;
}

.voter-accent.event-past {
    background-color: #dc3545; /* red */
}

.voter-accent.event-ongoing {
    background-color: #fd7e14; /* orange */
}

.voter-accent.event-future {
    background-color: #198754; /* green */
}

/* Date tile inside voter-photo */
.event-date-tile {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1.1;
}

.event-month {
    font-size: 0.75rem;
    text-transform: uppercase;
}

.event-day {
    font-size: 1.4rem;
}