:root {

    --primary: #002472;

    --secondary: #020c56;

    --gold: #d4a574;

    --gold-light: #f0d5b0;

    --white: #ffffff;

    --light: #f8f9fa;

    --text: #333333;

    --text-muted: #666666;

    --shadow: 0 4px 20px rgba(0,0,0,0.1);

    --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);

    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);

}



* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body { font-family:'Poppins',sans-serif; color:var(--text); background:var(--light); overflow-x:hidden; }



/* ── Top Bar ── */

.top-bar { background:var(--secondary); color:var(--white); padding:0.55rem 2rem; font-size:0.82rem; }

.top-bar-inner { display:flex; justify-content:space-between; align-items:center; max-width:1400px; margin:0 auto; flex-wrap:wrap; gap:0.5rem; }

.top-bar-left { display:flex; gap:1.5rem; flex-wrap:wrap; }

.top-bar-info { display:flex; align-items:center; gap:0.5rem; }

.top-bar-info i { color:var(--gold); }

.top-bar-right { display:flex; gap:1.5rem; flex-wrap:wrap; }

.top-bar-right a, .email-link { color:var(--white); text-decoration:none; transition:color 0.3s; }

.top-bar-right a:hover { color:var(--gold); }



/* ── Header ── */

.header { background:var(--white); border-bottom:3px solid var(--gold); padding:0.9rem 2rem; }

.header-inner { display:flex; align-items:center; gap:1.5rem; max-width:1400px; margin:0 auto; flex-wrap:wrap; }

.header-logo img { height:80px; width:auto; }

.header-text    { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

.header-text h1 { 

    font-family: 'Cooper Black','Georgia',serif; 

    font-size: clamp(1.08rem,1.9vw,1.45rem); 

    color: var(--blue); 

    font-weight: 900; 

    margin-bottom: 2px; 

    line-height: 1.2; 

    white-space: nowrap; 

    overflow: hidden; 

    text-overflow: ellipsis;  

    letter-spacing: 0.08em;

}

.header-subtitle { 

    font-size: clamp(.68rem,.9vw,.78rem); 

    color: var(--blue);        /* ← changed from --accent-copper to --blue */

    font-weight: 600; 

    margin-bottom: 1px; 

    font-style: italic; 

    line-height: 1.3;  

    letter-spacing: 0.05em;

}



.header-info { 

    font-size: clamp(.62rem,.8vw,.72rem); 

    color: var(--blue);        /* ← changed from --accent-copper to --blue */

    line-height: 1.3; 

    font-weight: 600;  

    letter-spacing: 0.05em;

}



.header-text .sub { font-size:0.78rem; color:var(--text-muted); margin-top:3px; }



/* ── Navbar ── */

.navbar { background:var(--primary); overflow-x:auto; -webkit-overflow-scrolling:touch; }

.nav-inner { display:flex; justify-content:center; list-style:none; max-width:1400px; margin:0 auto; min-width:max-content; }

.nav-inner li a {

    display:flex; align-items:center; gap:0.5rem;

    padding:0.9rem 1.35rem; color:var(--white); text-decoration:none;

    font-size:0.87rem; font-weight:500;

    border-right:1px solid rgba(255,255,255,0.1);

    transition:background 0.3s, color 0.3s;

    white-space:nowrap;

}

.nav-inner li a:hover, .nav-inner li a.active { background:var(--secondary); color:var(--gold); }



/* ── Page Hero ── */

.page-hero {

    background:linear-gradient(135deg, rgba(2,12,86,0.93) 0%, rgba(0,36,114,0.87) 100%),

                url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&h=500&fit=crop') center/cover;

    padding:4.5rem 2rem 3.5rem; text-align:center; color:var(--white);

}

.breadcrumb { font-size:0.83rem; color:var(--gold-light); margin-bottom:0.8rem; }

.breadcrumb a { color:var(--gold); text-decoration:none; }

.page-hero h2 { font-family:'Poppins',serif; font-size:2.8rem; font-weight:800; margin-bottom:0.6rem; }

.batch-tag {

    display:inline-block; background:var(--gold); color:var(--secondary);

    padding:0.4rem 1.5rem; border-radius:50px; font-size:0.85rem;

    font-weight:700; letter-spacing:1px; margin-bottom:0.8rem;

}

.page-hero p { font-size:0.97rem; color:rgba(255,255,255,0.8); }



/* ── Stats Bar ── */

.stats-bar { background:var(--primary); padding:1.2rem 2rem; }

.stats-bar-inner { display:flex; justify-content:center; gap:5rem; max-width:1400px; margin:0 auto; flex-wrap:wrap; }

.stat-item { text-align:center; color:var(--white); }

.stat-item .num { font-size:2rem; font-weight:800; color:var(--gold); line-height:1; }

.stat-item .lbl { font-size:0.73rem; text-transform:uppercase; letter-spacing:1.5px; margin-top:3px; opacity:0.8; }



/* ── Main ── */

.main { max-width:1300px; margin:0 auto; padding:3rem 2rem 4rem; }



/* ── Controls ── */

.controls { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.2rem; margin-bottom:2rem; }

.back-btn {

    display:flex; align-items:center; gap:0.5rem;

    padding:0.7rem 1.5rem; background:var(--primary); color:var(--white);

    border-radius:50px; text-decoration:none; font-size:0.86rem; font-weight:600;

    transition:var(--transition);

}

.back-btn:hover { background:var(--secondary); transform:translateX(-3px); }

.search-wrap { position:relative; flex:1; max-width:350px; }

.search-wrap input {

    padding:0.7rem 1rem 0.7rem 2.7rem; border:2px solid #e0e0e0;

    border-radius:50px; font-family:'Poppins',sans-serif; font-size:0.87rem;

    width:100%; outline:none; transition:border 0.3s;

}

.search-wrap input:focus { border-color:var(--gold); }

.search-wrap i { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:0.85rem; }



/* ── Table Card ── */

.table-card { background:var(--white); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }

.table-top {

    background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

    padding:1.5rem 2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;

}

.table-top h3 { color:var(--white); font-size:1.15rem; font-weight:600; display:flex; align-items:center; gap:0.7rem; }

.table-top h3 i { color:var(--gold); }

.count-badge { background:var(--gold); color:var(--secondary); padding:0.3rem 1rem; border-radius:50px; font-size:0.8rem; font-weight:700; }



/* ── Table ── */

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

table { width:100%; border-collapse:collapse; min-width:500px; }

thead tr { background:var(--light); }

thead th {

    padding:1rem 1.5rem; text-align:left; font-size:0.8rem; font-weight:700;

    text-transform:uppercase; letter-spacing:1px; color:var(--primary);

    border-bottom:2px solid var(--gold); white-space:nowrap;

}

thead th:first-child { width:80px; text-align:center; }

tbody tr { border-bottom:1px solid #f0f0f0; transition:background 0.2s; }

tbody tr:hover { background:#fffbf5; }

tbody tr:last-child { border-bottom:none; }

td { padding:0.95rem 1.5rem; font-size:0.9rem; vertical-align:middle; }

td:first-child { text-align:center; font-weight:700; color:var(--text-muted); font-size:0.85rem; }



/* ── Student Name & Avatar ── */

.student-name-cell { font-weight:600; color:var(--text); }

.avatar {

    width:36px; height:36px; border-radius:50%;

    background:linear-gradient(135deg, var(--primary), var(--secondary));

    color:var(--white); display:inline-flex; align-items:center; justify-content:center;

    font-size:0.75rem; font-weight:700; margin-right:0.8rem; flex-shrink:0;

}

.name-wrap { display:flex; align-items:center; }



/* ── Company Badge ── */

.company-badge {

    display:inline-flex; align-items:center; gap:0.5rem;

    padding:0.35rem 1rem; border-radius:50px; font-size:0.8rem; font-weight:600; border:1.5px solid;

}

.comp-blue   { background:#e8f0ff; color:#1a3a8f; border-color:#b3c8ff; }

.comp-green  { background:#e8fff2; color:#1a7a4a; border-color:#a0e8c0; }

.comp-orange { background:#fff5e8; color:#9a5200; border-color:#ffd0a0; }

.comp-purple { background:#f5e8ff; color:#6a1a8f; border-color:#d0a0e8; }

.comp-teal   { background:#e8f8ff; color:#1a6a7a; border-color:#a0d8e8; }

.comp-red    { background:#fff0f0; color:#8f1a1a; border-color:#f0b0b0; }

.comp-gold   { background:#fffbe8; color:#7a6000; border-color:#e8d080; }



/* ── No Results ── */

.no-results { text-align:center; padding:4rem 2rem; color:var(--text-muted); }

.no-results i { font-size:3rem; color:#ddd; margin-bottom:1rem; display:block; }



/* ── Pagination ── */

.pagination {

    display:flex; justify-content:center; align-items:center;

    gap:0.5rem; padding:1.5rem 2rem; border-top:1px solid #f0f0f0; flex-wrap:wrap;

}

.page-btn {

    width:36px; height:36px; border:2px solid #e0e0e0; background:var(--white);

    border-radius:8px; font-family:'Poppins',sans-serif; font-size:0.85rem; font-weight:600;

    cursor:pointer; transition:var(--transition); color:var(--text);

    display:flex; align-items:center; justify-content:center;

}

.page-btn:hover { border-color:var(--gold); color:var(--primary); }

.page-btn.active { background:var(--primary); color:var(--white); border-color:var(--primary); }

.page-btn:disabled { opacity:0.4; cursor:not-allowed; }

.page-info { font-size:0.83rem; color:var(--text-muted); padding:0 0.5rem; }



/* ── Footer ── */

.footer { background:var(--secondary); color:var(--white); padding:3rem 2rem 1.2rem; }

.footer-inner { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2.5rem; max-width:1400px; margin:0 auto 2rem; }

.footer-title { color:var(--gold); font-size:1.05rem; font-weight:600; margin-bottom:1rem; }

.footer-links { list-style:none; }

.footer-links li { margin-bottom:0.55rem; }

.footer-links a { color:#ccc; text-decoration:none; font-size:0.86rem; transition:color 0.3s,padding 0.3s; display:inline-block; }

.footer-links a:hover { color:var(--gold); padding-left:6px; }

.footer-contact { list-style:none; }

.footer-contact li { display:flex; gap:0.8rem; color:#ccc; font-size:0.85rem; margin-bottom:0.7rem; align-items:flex-start; }

.footer-contact li i { color:var(--gold); margin-top:3px; flex-shrink:0; }

.social-links { display:flex; gap:0.7rem; margin-top:1.2rem; }

.social-links a {

    width:36px; height:36px; background:rgba(255,255,255,0.1);

    border-radius:50%; display:flex; align-items:center; justify-content:center;

    color:var(--white); text-decoration:none; transition:var(--transition); font-size:0.85rem;

}

.social-links a:hover { background:var(--gold); transform:translateY(-3px); }

.footer-bottom { text-align:center; border-top:1px solid rgba(255,255,255,0.1); padding-top:1.2rem; color:#aaa; font-size:0.8rem; max-width:1400px; margin:0 auto; }

.footer-bottom a { color:var(--gold); text-decoration:none; }



/* ── Scroll To Top ── */

.scroll-top {

    position:fixed; bottom:25px; right:25px; width:46px; height:46px;

    background:var(--primary); color:var(--white); border:none; border-radius:50%;

    font-size:1.2rem; cursor:pointer; display:none; box-shadow:var(--shadow);

    transition:var(--transition); z-index:999; align-items:center; justify-content:center;

}

.scroll-top:hover { background:var(--gold); transform:translateY(-3px); }

.scroll-top.show { display:flex; }





/* ══════════════════════════════════════════

   RESPONSIVE BREAKPOINTS

══════════════════════════════════════════ */



/* ── Large Tablets / Small Desktops (≤1024px) ── */

@media (max-width:1024px) {

    .page-hero { padding:3.5rem 1.5rem 3rem; }

    .page-hero h2 { font-size:2.4rem; }

    .stats-bar-inner { gap:3rem; }

    .main { padding:2.5rem 1.5rem 3rem; }

    .nav-inner li a { padding:0.85rem 1.1rem; font-size:0.83rem; }

}



/* ── Tablets (≤768px) ── */

@media (max-width:768px) {

    /* Hide top bar on small screens */

    .top-bar { display:none; }



    /* Header */

    .header { padding:0.8rem 1.2rem; }

    .header-inner { gap:1rem; }

    .header-logo img { height:60px; }

    .header-text h1 { font-size:1.2rem; }

    .header-text .sub { font-size:0.72rem; }



    /* Navbar — scrollable pill strip */

    .navbar { padding:0; }

    .nav-inner { justify-content:flex-start; padding:0 0.5rem; }

    .nav-inner li a { padding:0.75rem 1rem; font-size:0.8rem; }



    /* Hero */

    .page-hero { padding:3rem 1.2rem 2.5rem; }

    .page-hero h2 { font-size:2rem; }

    .batch-tag { font-size:0.78rem; padding:0.35rem 1.1rem; }

    .page-hero p { font-size:0.88rem; }



    /* Stats */

    .stats-bar { padding:1rem 1.2rem; }

    .stats-bar-inner { gap:1.8rem; }

    .stat-item .num { font-size:1.6rem; }

    .stat-item .lbl { font-size:0.68rem; letter-spacing:1px; }



    /* Main */

    .main { padding:1.8rem 1rem 3rem; }



    /* Controls */

    .controls { flex-direction:column; align-items:stretch; gap:0.9rem; }

    .back-btn { align-self:flex-start; }

    .search-wrap { max-width:100%; }



    /* Table card */

    .table-top { padding:1.1rem 1.2rem; flex-direction:column; align-items:flex-start; }

    .table-top h3 { font-size:1rem; }

    thead th { padding:0.85rem 1rem; font-size:0.72rem; }

    td { padding:0.8rem 1rem; font-size:0.85rem; }

    .avatar { width:30px; height:30px; font-size:0.7rem; margin-right:0.55rem; }



    /* Pagination */

    .pagination { padding:1.2rem 1rem; gap:0.4rem; }

    .page-btn { width:32px; height:32px; font-size:0.78rem; }

    .page-info { display:none; } /* hide verbose text on mobile */



    /* Footer */

    .footer { padding:2rem 1.2rem 1rem; }

    .footer-inner { grid-template-columns:1fr 1fr; gap:1.8rem; }

}



/* ── Mobile (≤480px) ── */

@media (max-width:480px) {

    /* Header — stack logo + text */

    .header-inner { flex-direction:row; align-items:center; }

    .header-logo img { height:50px; }

    .header-text h1 { font-size:1.05rem; line-height:1.2; }

    .header-text .sub { display:none; } /* too cramped */



    /* Hero */

    .page-hero { padding:2.5rem 1rem 2rem; }

    .page-hero h2 { font-size:1.6rem; }



    /* Stats — 2-column grid on very small screens */

    .stats-bar-inner { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 2rem; justify-items:center; }



    /* Company badge — shrink a bit */

    .company-badge { padding:0.25rem 0.7rem; font-size:0.74rem; }



    /* Table: hide S.No column on tiny screens */

    thead th:first-child,

    td:first-child { display:none; }



    /* Footer: single column */

    .footer-inner { grid-template-columns:1fr; gap:1.5rem; }



    /* Scroll-top: smaller */

    .scroll-top { width:40px; height:40px; bottom:16px; right:16px; font-size:1rem; }

}



/* ── Extra Small (≤360px) ── */

@media (max-width:360px) {

    .header-text h1 { font-size:0.9rem; }

    .page-hero h2 { font-size:1.35rem; }

    .nav-inner li a { padding:0.65rem 0.8rem; font-size:0.75rem; }

    td, thead th { padding:0.7rem 0.75rem; }

    .name-wrap { flex-direction:column; align-items:flex-start; gap:0.3rem; }

    .avatar { margin-right:0; }

}



/* ── Touch / Hover Optimisations ── */

@media (hover:none) {

    /* Remove hover-only transforms that feel odd on touch */

    .back-btn:hover { transform:none; }

    .social-links a:hover { transform:none; }

    .scroll-top:hover { transform:none; }

}



/* ── Print ── */

@media print {

    .top-bar, .navbar, .scroll-top, .controls, .pagination { display:none; }

    .page-hero { padding:1.5rem; print-color-adjust:exact; }

    .main { padding:1rem 0; }

    .table-card { box-shadow:none; border:1px solid #ddd; border-radius:0; }

    tbody tr:hover { background:none; }

}