/* ============================================================
   ICMR-NIHR · Shared Design System
   Used by: about-director.php, our-team.php
   One token set, one set of components → smaller payload,
   consistent look across every people-facing page.
   ============================================================ */

:root{
    /* Brand */
    --primary: #003679;
    --primary-deep: #001f49;
    --primary-light: #2f5d9e;
    --teal: #0e8c82;
    --accent-gold: #a9802f;
    --accent-gold-deep: #7a5a18;
    --accent-gold-soft: #f5ecd8;

    /* Text */
    --ink: #15171a;
    --ink-soft: #3a3f46;
    --muted: #69727d;
    --muted-soft: #98a1ab;

    /* Surfaces */
    --surface: #ffffff;
    --surface-soft: #f6f7f9;
    --bg: #f5f8fc;
    --hairline: #e4e7ec;

    /* Status */
    --success: #1c7a40;
    --success-bg: #e3f5e9;
    --warning: #92650c;
    --warning-bg: #fbf0d9;
    --info: #15748f;
    --info-bg: #e3f3f7;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(15,17,20,.05), 0 3px 10px rgba(15,17,20,.05);
    --shadow-md: 0 6px 20px rgba(15,17,20,.08), 0 1px 3px rgba(15,17,20,.05);
    --shadow-lg: 0 22px 48px -16px rgba(0,31,73,.35);

    /* Shape */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 18px;

    /* Type */
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
    --font-hi: 'Noto Sans Devanagari', 'Inter', sans-serif;
}

/* ─── Bilingual text (English / Hindi shown together, or toggled) ─── */
.lang-hi{ font-family: var(--font-hi); }
.lang-sep{ color: var(--muted-soft); margin: 0 4px; }
html[data-lang="en"] .lang-hi, html[data-lang="en"] .lang-sep{ display:none; }
html[data-lang="hi"] .lang-en, html[data-lang="hi"] .lang-sep{ display:none; }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader-active{
    display:flex !important; position:fixed; inset:0; z-index:9999;
    background:#fff; align-items:center; justify-content:center;
}
#preloader-active.hidden{ display:none !important; }

/* ============================================================
   PAGE HERO  (director hero + team hero share this)
   ============================================================ */
.page-hero{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 55%, var(--teal) 130%);
    padding: 20px;
    color: #fff;
}
.page-hero::before{
    content:'';
    position:absolute; inset:0;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 14px);
    pointer-events:none;
}
.page-hero::after{
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(circle at 85% 20%, rgba(255,215,0,.12), transparent 55%);
    pointer-events:none;
}
.hero-inner{
    position:relative; z-index:1;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap;
}
.hero-left{ display:flex; align-items:center; gap:16px; min-width:0; }
.hero-icon{
    flex-shrink:0; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
    width:50px; height:50px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:21px; color:#ffd700;
}
.hero-text h1{
    font-family: var(--font-display); font-weight:700; margin:0; letter-spacing:.1px;
    font-size: clamp(19px, 3vw, 25px);
}
.hero-text small{ opacity:.82; font-size:12.5px; letter-spacing:.2px; }

.btn-back{
    color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
    padding:9px 20px; border-radius:50px; text-decoration:none;
    display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500;
    white-space:nowrap; transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-back:hover{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.45); color:#fff; transform:translateY(-1px); }

/* Centered hero variant (team page) */
.page-hero.center .hero-inner{ flex-direction:column; text-align:center; }
.page-hero.center h1{ display:flex; flex-wrap:wrap; gap:0 12px; justify-content:center; align-items:baseline; }

/* Language switch pill */
.lang-switch{
    display:inline-flex; gap:4px; background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:4px; margin-top:14px;
}
.lang-switch button{
    border:none; background:transparent; color:#fff; font-size:12.5px; font-weight:600;
    padding:6px 14px; border-radius:999px; cursor:pointer; font-family:var(--font-display);
    transition: background .2s ease;
}
.lang-switch button[aria-pressed="true"]{ background:#fff; color:var(--primary); }

/* ============================================================
   JUMP NAV (team page)
   ============================================================ */
.jump-nav{
    position:sticky; top:0; z-index:40;
    background:rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px);
    border-bottom:1px solid var(--hairline);
}
.jump-nav-inner{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:14px 12px; }
.jump-nav a{
    font-family: var(--font-display); font-size:13px; font-weight:600;
    color:var(--primary); background:#fff; border:1px solid var(--hairline);
    padding:8px 16px; border-radius:999px; text-decoration:none;
    transition: all .2s ease; white-space:nowrap;
}
.jump-nav a .count{ margin-left:6px; color:var(--muted); font-weight:500; }
.jump-nav a:hover, .jump-nav a:focus-visible{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-1px); }
.jump-nav a:hover .count{ color:rgba(255,255,255,.8); }

@media (max-width:480px){
    .jump-nav-inner{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
}

/* ============================================================
   SECTION HEADERS & GRID (team page)
   ============================================================ */
.people-section{ max-width:1200px; margin:0 auto; padding: 34px 20px 6px; scroll-margin-top:88px; }

.section-header{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    margin-bottom:22px; flex-wrap:wrap;
}
.section-title{
    font-family: var(--font-display); font-size:24px; font-weight:700;
    color:var(--primary); border-left:5px solid var(--accent-gold); padding-left:14px; margin:0;
    display:flex; align-items:center; gap:10px;
}
.section-title i{ color:var(--accent-gold); font-size:.85em; }
.section-sub{ color:var(--muted); font-size:13.5px; margin:0; }

.people-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap:22px;
}

/* ─── Person card ─── */
.person-card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: 24px 18px 20px;
    text-align:center;
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease;
    display:flex; flex-direction:column; align-items:center;
}
.person-card::before{
    content:''; position:absolute; inset:0 0 auto 0; height:3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 55%, var(--accent-gold) 100%);
}
.person-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }

.person-photo{
    width:160px; height:180px; border-radius:5px;
    border:2px solid #003679; box-shadow:0 0 0 3px var(--hairline);
    overflow:hidden; margin-bottom:14px; flex:none; background:#eef2f7;
}
.person-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.person-card.is-director{ padding-top:30px; }
.person-card.is-director .person-photo{ width:160px; height:180px;}

.person-name{ font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--primary); margin-bottom:4px; line-height:1.4; }
.person-badge{
    display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--teal); background:rgba(14,140,130,.1); padding:3px 12px; border-radius:999px; margin-bottom:12px;
}
.person-card.is-director .person-badge{ color:var(--accent-gold-deep); background:var(--accent-gold-soft); }

.person-meta{ font-size:13px; color:var(--muted); line-height:1.7; width:100%; }
.person-meta .row{ display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:3px; word-break:break-word; flex-wrap:wrap; }
.person-meta .row i{ color:var(--primary); width:14px; text-align:center; flex:none; }
.person-meta a{ color:inherit; text-decoration:none; }
.person-meta a:hover{ color:var(--primary); text-decoration:underline; }

.view-profile-btn{
    position:absolute; top:12px; right:12px;
    display:inline-flex; align-items:center; gap:6px;
    background:var(--primary); color:#fff !important;
    padding:6px 13px; border-radius:999px; font-size:11.5px; font-weight:600;
    text-decoration:none; box-shadow:0 4px 10px rgba(0,54,121,.25);
    transition: all .2s ease; border:none; cursor:pointer;
}
.view-profile-btn:hover{ background:var(--primary-deep); transform:translateY(-2px); color:#fff !important; }

.empty-state{
    text-align:center; color:var(--muted); background:#fff; border:1px dashed var(--hairline);
    border-radius:var(--radius); padding:32px 20px; font-size:14px; grid-column: 1 / -1;
}

/* Search box */
.people-search{ max-width:320px; margin:0 0 20px auto; position:relative; }
.people-search input{
    width:100%; padding:10px 14px 10px 38px; border-radius:999px;
    border:1px solid var(--hairline); font-size:14px; font-family:var(--font-body);
    outline:none; transition: box-shadow .2s ease, border-color .2s ease;
}
.people-search input:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,140,130,.15); }
.people-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }

/* Fade-up reveal, capped so long lists don't all wait on the last delay */
.person-card{ opacity:0; transform:translateY(12px); animation: cardIn .5s ease forwards; }
.person-card:nth-of-type(n+9){ animation-delay:.16s; }
.person-card:nth-of-type(-n+8){ animation-delay: calc(.03s * var(--i, 1)); }
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   PROFILE LAYOUT (director / scientist page)
   ============================================================ */
.profile-layout{
    max-width:1400px; margin:0 auto;
    padding: clamp(18px, 3vw, 32px) 20px 60px;
    display:grid; grid-template-columns: minmax(280px, 340px) 1fr;
    gap: clamp(18px, 3vw, 30px); align-items:start;
}
@media (max-width:992px){ .profile-layout{ grid-template-columns:1fr; padding:18px 15px 50px; } }

.profile-sidebar {
    align-self: start;
}

@media (max-width:992px){ 
    .profile-sidebar{ 
        position:static; 
        align-self: auto;
    } 
}

.sidebar-card{
    position:relative; background:var(--surface); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md); overflow:hidden; border:1px solid var(--hairline);
    animation: riseIn .5s cubic-bezier(.16,.84,.44,1) both;
}
.sidebar-card::before, .card-modern::before{
    content:''; position:absolute; inset:0 0 auto 0; height:3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 55%, var(--accent-gold) 100%); z-index:1;
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

.profile-header{
    position:relative; background:linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%);
    padding: clamp(26px, 4vw, 32px) 22px 26px; text-align:center; color:#fff;
}
.profile-avatar-wrapper{ position:relative; margin:0 auto 16px; width:160px; height:180px; }
.profile-avatar{ width:100%; height:100%; border-radius:5%; border:3px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.22); display:block; }
.profile-avatar-badge{
    position:absolute; bottom:-4px; right:-4px; background:#ffd700; width:32px; height:32px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.profile-avatar-badge i{ color:var(--primary); font-size:14px; }

.profile-name{ font-family:var(--font-display); font-size:clamp(19px,2.4vw,23px); font-weight:700; margin-bottom:2px; letter-spacing:.1px; }
.profile-name-hi{ font-size:15px; opacity:.88; margin-bottom:6px; }
.profile-designation{ font-size:13.5px; opacity:.95; }
.profile-designation small{ display:block; font-size:12.5px; opacity:.78; margin-top:2px; }
.profile-actions{ margin-top:18px; }

.btn-cv{
    display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--primary);
    padding:9px 20px; border-radius:50px; font-size:13px; font-weight:600; text-decoration:none;
    transition: background .25s ease, transform .2s ease, box-shadow .25s ease; box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.btn-cv:hover{ background:var(--accent-gold-soft); color:var(--accent-gold-deep); transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.22); }

.sidebar-body{ padding:22px 22px 26px; }
.sidebar-section{ margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--hairline); }
.sidebar-section:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }

.section-label{
    display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700;
    color:var(--primary); margin-bottom:14px; text-transform:uppercase; letter-spacing:.6px;
}
.section-label .icon{
    display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex-shrink:0;
    background: var(--accent-gold-soft); border-radius:50%; font-size:13px; color:var(--primary);
}
.section-label .label-text{ display:flex; flex-direction:column; line-height:1.3; }
.section-label .label-text small{ font-weight:400; font-size:11px; color:var(--muted); text-transform:none; letter-spacing:0; }

.info-item{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:14px; border-bottom:1px dashed var(--hairline); }
.info-item:last-child{ border-bottom:0; }
.info-item .label{ color:var(--muted); font-weight:500; font-size:12.5px; }
.info-item .label small{ display:block; font-weight:400; font-size:11px; color:var(--muted-soft); }
.info-item .value{ text-align:right; font-weight:500; font-size:13px; color:var(--ink); max-width:58%; word-break:break-word; }
.info-item .value a{ color:var(--primary); text-decoration:none; }
.info-item .value a:hover{ text-decoration:underline; }

.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tag{ background:var(--surface-soft); color:var(--primary); padding:5px 14px; border-radius:50px; font-size:12px; font-weight:500; border:1px solid rgba(0,54,121,.1); }

.academic-link{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px dashed var(--hairline); }
.academic-link:last-child{ border-bottom:0; }
.academic-link .icon{ font-size:19px; width:26px; text-align:center; flex-shrink:0; }
.academic-link .content{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.academic-link .content a{ color:var(--primary); font-weight:600; font-size:13px; text-decoration:none; }
.academic-link .content a:hover{ text-decoration:underline; }
.academic-link .sub{ font-size:11px; color:var(--muted); }

.impact-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.impact-stat{ background:var(--surface-soft); border-radius:var(--radius); padding:14px 10px; text-align:center; border:1px solid var(--hairline); }
.impact-stat .number{ font-family:var(--font-display); font-size:25px; font-weight:700; color:var(--primary); line-height:1.2; }
.impact-stat .label{ font-size:11px; color:var(--muted); font-weight:500; }
.impact-stat .label small{ display:block; font-weight:400; font-size:10px; }

.social-links{ display:flex; flex-wrap:wrap; gap:8px; }
.social-link{
    display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:var(--surface-soft);
    border-radius:50px; font-size:12px; font-weight:500; color:var(--ink); text-decoration:none;
    border:1px solid var(--hairline); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.social-link:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ============================================================
   MAIN CONTENT CARDS
   ============================================================ */
.profile-main{ display:flex; flex-direction:column; gap:clamp(20px,3vw,26px); }

.card-modern{
    position:relative; background:var(--surface); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); border:1px solid var(--hairline); overflow:hidden;
    transition: box-shadow .25s ease;
    animation: riseIn .6s cubic-bezier(.16,.84,.44,1) both;
    margin-bottom: 3%;
}
.card-modern:hover{ box-shadow:var(--shadow-md); }

.card-header{ display:flex; align-items:center; gap:12px; padding:17px 24px; background:var(--surface-soft); border-bottom:1px solid var(--hairline); }
.card-header .icon{
    display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0;
    background:var(--primary); color:#fff; border-radius:50%; font-size:16px;
}
.card-header .title{ font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); display:flex; flex-direction:column; line-height:1.3; }
.card-header .title small{ font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--muted); }

.project-stats-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:12px; padding:18px 22px; background:var(--surface-soft); border-bottom:1px solid var(--hairline); }
.stat-item{ text-align:center; padding:6px 4px; }
.stat-item .number{ font-family:var(--font-display); font-size:21px; font-weight:700; color:var(--primary); display:block; }
.stat-item .label{ font-size:11px; color:var(--muted); font-weight:500; }
.stat-item .label small{ display:block; font-weight:400; font-size:9px; color:var(--muted-soft); }

/* Tables */
.table-grid{ padding:4px 0; overflow-x:auto; }
.table-grid table{ width:100%; border-collapse:collapse; font-size:14px; }
.table-grid table thead th{
    background:var(--surface-soft); color:var(--ink); font-weight:700; font-size:11.5px;
    text-transform:uppercase; letter-spacing:.5px; padding:11px 14px; text-align:left;
    border-bottom:2px solid var(--primary); white-space:nowrap;
}
.table-grid table tbody td{ padding:11px 14px; border-bottom:1px solid var(--hairline); vertical-align:middle; line-height:1.5; font-size:13px; color:var(--ink-soft); }
.table-grid table tbody tr:last-child td{ border-bottom:0; }
.table-grid table tbody tr:hover{ background:var(--surface-soft); }
.table-grid table tbody td strong{ color:var(--ink); }

/* Badges */
.badge-status, .badge-type, .badge-role{ display:inline-block; padding:3px 12px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge-status.ongoing{ background:var(--success-bg); color:var(--success); }
.badge-status.completed{ background:#e7eefc; color:#1d4f91; }
.badge-status.upcoming{ background:var(--warning-bg); color:var(--warning); }
.badge-type.intramural{ background:#eef2f8; color:#1d3a63; }
.badge-type.extramural{ background:#faeaf0; color:#8a2856; }
.badge-type.icmr{ background:#e8f5ec; color:#1f6b3a; }
.badge-type.nhrp{ background:#fdf0e3; color:#95540b; }
.badge-type.other{ background:#f1eaf7; color:#5b3680; }
.badge-role.pi{ background:#e6edfb; color:#1d3f91; }
.badge-role.co_pi, .badge-role.co-pi{ background:#f1eaf7; color:#5b3680; }
.badge-award{ background:var(--accent-gold-soft); color:var(--accent-gold-deep); }
.badge-year{ background:var(--surface-soft); color:var(--muted); }

.link-icon{ color:var(--primary); text-decoration:none; font-size:13px; display:inline-flex; align-items:center; gap:4px; font-weight:500; }
.link-icon:hover{ text-decoration:underline; }
.text-muted-small{ color:var(--muted); font-size:12px; }
.current-badge{ display:inline-block; background:var(--success); color:#fff; padding:2px 10px; border-radius:999px; font-size:10px; font-weight:600; margin-left:6px; text-transform:uppercase; }

/* Tabs (project tabs + profile tabs share this) */
.tabs-bar{ display:flex; flex-wrap:wrap; gap:4px; padding:16px 22px 0; border-bottom:1px solid var(--hairline); }
.tabs-bar.plain{ padding:0; margin-bottom:20px; }
.tab-btn{
    position:relative; display:flex; align-items:center; gap:8px; padding:10px 18px; border:0;
    background:transparent; color:var(--muted); font-weight:500; font-size:14px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor:pointer; transition: color .2s ease, background .2s ease;
}
.tab-btn:hover{ background:var(--surface-soft); color:var(--ink); }
.tab-btn.active{ color:var(--primary); font-weight:600; }
.tab-btn.active::after{ content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--accent-gold); }
.tab-btn .count{ background:var(--surface-soft); padding:0 8px; border-radius:999px; font-size:11px; font-weight:600; color:var(--muted); }
.tab-btn.active .count{ background:var(--accent-gold-soft); color:var(--accent-gold-deep); }
.tab-btn .tab-label-small{ display:none; font-weight:400; font-size:11px; color:var(--muted); }

.tab-pane{ display:none; padding:18px 22px 22px; }
.tab-pane.active{ display:block; }
.tab-empty{ text-align:center; color:var(--muted); padding:34px 10px; font-size:14px; }
.tab-empty i{ display:block; font-size:32px; margin-bottom:8px; opacity:.35; }

/* Director's message */
.director-message{
    background: linear-gradient(135deg, #fff8e1, #fff3cd); border:2px solid var(--accent-gold);
    border-radius: var(--radius); padding: 28px; position:relative;
}
.director-message::before{ content:'\201C'; font-size:56px; color:var(--accent-gold); position:absolute; top:6px; left:14px; font-family:Georgia,serif; opacity:.3; }
.director-message .message-text, .director-message .message-text-hi{ font-size:16px; line-height:1.8; color:var(--ink); padding-left:28px; }
.director-message .message-text-hi{ font-family:var(--font-hi); margin-top:15px; border-top:1px dashed rgba(169,128,47,.3); padding-top:15px; }
.director-message .message-meta{ margin-top:18px; padding-top:14px; border-top:1px solid var(--hairline); font-size:12.5px; color:var(--muted); text-align:right; }
.director-message-empty{ text-align:center; padding:38px 20px; color:var(--muted); }
.director-message-empty i{ font-size:44px; color:var(--accent-gold); margin-bottom:14px; display:block; }

/* ============================================================
   RESPONSIVE (consolidated — mobile-first overrides only)
   ============================================================ */
@media (max-width:768px){
    .people-grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
    .person-photo{ width:88px; height:88px; }
    .section-title{ font-size:20px; }
    .card-header{ padding:14px 18px; }
    .card-header .title{ font-size:15px; }
    .tabs-bar{ padding:12px 16px 0; gap:2px; }
    .tab-btn{ font-size:12.5px; padding:9px 13px; }
    .tab-btn .tab-label-small{ display:inline; }
    .tab-pane{ padding:14px 16px 18px; }
    .impact-stats{ grid-template-columns:1fr; }
    .project-stats-summary{ grid-template-columns:repeat(3,1fr); gap:8px; padding:14px 16px; }
    .stat-item .number{ font-size:17px; }
    .sidebar-body{ padding:18px; }
    .people-search{ margin:0 auto 16px; }
}

@media (max-width:640px){
    .table-grid table, .table-grid thead, .table-grid tbody, .table-grid th, .table-grid td, .table-grid tr{ display:block; width:100%; }
    .table-grid thead{ display:none; }
    .table-grid tbody tr{ border:1px solid var(--hairline); border-radius:var(--radius); padding:4px 14px; margin-bottom:12px; background:var(--surface); }
    .table-grid tbody tr:last-child{ margin-bottom:0; }
    .table-grid tbody tr:hover{ background:var(--surface); }
    .table-grid tbody td{ display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:right; padding:9px 0; border-bottom:1px dashed var(--hairline); }
    .table-grid tbody tr td:last-child{ border-bottom:0; }
    .table-grid tbody td::before{ content:attr(data-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); text-align:left; flex-shrink:0; }
    .table-grid tbody td.col-num{ display:none; }
}

@media (max-width:480px){
    .people-grid{ grid-template-columns:1fr; }
    .hero-text small{ display:block; margin-top:1px; }
    .btn-back span{ display:none; }
    .btn-back{ padding:9px 14px; }
    .project-stats-summary{ grid-template-columns:repeat(2,1fr); }
    .profile-name{ font-size:18px; }
    .tab-btn .tab-label{ display:none; }
    .tab-btn{ padding:8px 10px; }
}

@media (max-width:360px){
    .profile-avatar-wrapper{ width:96px; height:96px; }
    .sidebar-body, .profile-header{ padding-left:14px; padding-right:14px; }
}

@media print{
    .jump-nav, .view-profile-btn, .people-search, .lang-switch, .btn-back{ display:none !important; }
    .person-card, .card-modern{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
    .lang-hi, .lang-sep, .lang-en{ display:inline !important; }
}

      
  .table-pagination{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:6px;
            flex-wrap:wrap;
            padding:16px 22px 20px;
            border-top:1px solid var(--border-color, #e4e7ec);
        }
        .table-pagination .page-info{
            width:100%;
            text-align:center;
            font-size:12px;
            color:var(--text-muted,#69727d);
            margin-bottom:6px;
        }
        .page-btn{
            min-width:32px;
            height:32px;
            padding:0 8px;
            border:1px solid var(--border-color,#e4e7ec);
            background:#fff;
            color:var(--text-dark,#15171a);
            border-radius:8px;
            font-size:13px;
            font-weight:600;
            cursor:pointer;
            transition:.2s ease;
            display:inline-flex;
            align-items:center;
            justify-content:center;
        }
        .page-btn:hover:not(:disabled){ background:var(--primary,#003679); border-color:var(--primary,#003679); color:#fff; }
        .page-btn.active{ background:var(--primary,#003679); border-color:var(--primary,#003679); color:#fff; }
        .page-btn:disabled{ opacity:.4; cursor:not-allowed; }
        .page-btn.dots{ border:none; background:transparent; cursor:default; }
        .page-btn.dots:hover{ background:transparent; color:var(--text-dark,#15171a); }

        .project-tabs {
            display: flex;
        }