:root { 
    --primary: #1a73e8; 
    --bg: #f8f9fa; 
    --border: #dee2e6; 
}

/* Changed body to grid layout to dynamically distribute screen space */
body { 
    font-family: 'Segoe UI', Arial, sans-serif; 
    margin: 0; 
    height: 100vh; 
    display: grid;
    grid-template-rows: auto auto 1fr; /* Row 1: Header, Row 2: Controls, Row 3: Remaining Space for Map */
    overflow: hidden; 
    background: var(--bg); 
}

/* Brand Title Bar */
header { 
    background: white; 
    border-bottom: 1px solid var(--border); 
    padding: 5px 15px; 
    z-index: 1000; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}

.header-main { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 5px; 
}

/* Unified Navigation Control Panel Container */
.navigation-control-panel { 
    background: white; 
    border-bottom: 1px solid var(--border); 
    display: flex; 
    flex-direction: column; 
    z-index: 999; 
    position: relative;
}

/* ROW 1: Vibhag Horizontal Track + Right Corner Coordinator Badge */
.vibhag-row-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px 4px 15px;
    border-bottom: 1px dashed #e2e8f0;
    gap: 20px;
}

.vibhag-navbar { 
    display: flex; 
    gap: 8px; 
    overflow-x: auto; 
    white-space: nowrap; 
    flex: 1; 
}

.vibhag-navbar::-webkit-scrollbar { 
    height: 4px; 
}

.vibhag-btn { 
    background: #f1f3f4; 
    border: 1px solid transparent; 
    padding: 6px 14px; 
    border-radius: 20px; 
    font-size: 13px; 
    font-weight: 600; 
    color: #5f6368; 
    cursor: pointer; 
    transition: all 0.15s ease; 
}

.vibhag-btn:hover { 
    background: #e8eaed; 
    color: #202124; 
}

.vibhag-btn.active { 
    background: #e8f0fe; 
    color: var(--primary); 
    border-color: #c2d7ff; 
}

/* Dynamic Coordinator Badge Box */
.coordinator-badge-container {
    background: #f8f9fa;
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #3c4043;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ROW 2: Abhyasika multi-row line wrapping track layout */
.abhyasika-navbar-row {
    background: #fafafa;
    padding: 8px 15px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap; /* Wraps items smoothly if they exceed horizontal bounds */
    white-space: normal;
}

.abhy-btn { 
    background: white; 
    border: 1px solid #dcdcdc; 
    padding: 5px 12px; 
    border-radius: 4px; 
    font-size: 12px; 
    font-weight: 500; 
    color: #4a5568; 
    cursor: pointer; 
    transition: all 0.15s ease; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
}

.abhy-btn:hover { 
    background: #f1f3f4; 
    border-color: #cbd5e1; 
}

.abhy-btn.active { 
    background: var(--primary); 
    color: white; 
    border-color: var(--primary); 
    font-weight: 600; 
}

.sn-indicator { 
    background: #edf2f7; 
    color: #4a5568; 
    font-size: 10px; 
    font-weight: bold; 
    padding: 1px 5px; 
    border-radius: 3px; 
}

.abhy-btn.active .sn-indicator { 
    background: rgba(255,255,255,0.25); 
    color: white; 
}

/* Main Container Frame filling up remaining grid layout space */
.main-container { 
    position: relative; 
    width: 100%;
    height: 100%;
}

/* Map takes up absolute bounds inside main-container */
#map { 
    width: 100%;
    height: 100%; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Floating Bottom Profile Info Stripe Drawer Panel */
.info-strip { 
    display: none; 
    position: absolute; 
    bottom: 16px; 
    left: 16px; 
    right: 16px; 
    background: white; 
    border: 1px solid var(--border); 
    padding: 14px 18px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    z-index: 1000; 
}

.info-content { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 20px; 
}

.action-link-btn { 
    text-decoration: none; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 8px 16px; 
    border-radius: 4px; 
    transition: background 0.2s; 
    display: inline-block; 
    text-align: center; 
}

.lnk-auth { 
    background: #f1f3f4; 
    color: #333; 
    border: 1px solid #dcdcdc; 
}

.lnk-auth:hover { 
    background: #e4e6e7; 
}

.lnk-nav { 
    background: var(--primary); 
    color: white; 
}

.lnk-nav:hover { 
    background: #1557b0; 
}

.custom-marker-label { 
    background: var(--primary); 
    color: white; 
    border: none; 
    font-weight: bold; 
    font-size: 11px; 
    padding: 2px 6px; 
    border-radius: 4px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
}