/*
 * MPSEGC Portal — Custom Styles
 * Extends Bootstrap 5 with government portal patterns
 */

/* ── CSS Variables ──────────────────────────────────────────────────────────── */
:root {
    --brand:        #0b5ed7;
    --brand-dark:   #0949a6;
    --brand-light:  #e8f0fe;
    --text:         #1b1f23;
    --bg:           #ffffff;
    --muted-bg:     #f5f7fa;
    --focus-color:  #ffbf47;
    --border:       #dee2e6;
    --success:      #198754;
    --warning:      #ffc107;
    --footer-bg:    #0a0f1c;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Container Width Overrides for Widescreen ─────────────────────────────── */
@media (min-width: 1200px) {
    .container {
        max-width: 95% !important;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 92% !important;
    }
}
@media (min-width: 1600px) {
    .container {
        max-width: 88% !important;
    }
}

body {
    font-family: Inter, 'Noto Sans Devanagari', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

/* Font size classes */
body.fs-sm { font-size: 15px; }
body.fs-md { font-size: 16px; }
body.fs-lg { font-size: 18px; }
body.fs-xl { font-size: 20px; }

/* ── Skip link (accessibility) ──────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    background: var(--focus-color);
    color: #000;
    z-index: 9999;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-decoration: none;
}

/* ── Focus visible ──────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── High contrast mode ─────────────────────────────────────────────────────── */
body.contrast {
    --bg:           #000000;
    --text:         #ffffff;
    --muted-bg:     #111111;
    --brand:        #ffd500;
    --brand-dark:   #e0b800;
    background: var(--bg);
    color: var(--text);
}
body.contrast .card       { background: #111; color: #fff; border-color: #333; }
body.contrast .navbar     { background: #111 !important; }
body.contrast .form-control, body.contrast .form-select {
    background: #111; color: #fff; border-color: #555;
}
body.contrast .nav-pills .nav-link.active { background: var(--brand); color: #000; }
body.contrast a { color: var(--brand); }

/* ── Utility bar ────────────────────────────────────────────────────────────── */
.utility-bar {
    background: var(--muted-bg);
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.site-header { background: #fff; }

.primary-nav .navbar-nav .nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.65rem 0.8rem;
    transition: background 0.15s;
    border-radius: 0.25rem;
}
.primary-nav .navbar-nav .nav-link:hover,
.primary-nav .navbar-nav .nav-link.active {
    background: rgba(255,255,255,0.15);
}

/* ── Hero carousel ──────────────────────────────────────────────────────────── */
.home-carousel {
    position: relative;
    height: 380px;
    border-radius: 0.75rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}
@media (min-width: 992px) { .home-carousel { height: 420px; } }

/* ── Homepage Leadership Sidebar ────────────────────────────────────────────── */
.home-leadership-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 460px;
}
@media (min-width: 992px) {
    .home-leadership-container {
        height: 510px;
    }
}
.home-leadership-card {
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    padding: 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    min-height: 0;
    text-decoration: none !important;
}
.home-leadership-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 94, 215, 0.08);
    border-color: var(--brand);
}
.home-leadership-card img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--brand);
    margin-bottom: 0.35rem;
    transition: transform 0.2s;
}
.home-leadership-card:hover img {
    transform: scale(1.05);
}
.home-leadership-card .name {
    font-size: 0.78rem;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 0.1rem;
    line-height: 1.25;
}
.home-leadership-card .desig {
    font-size: 0.68rem;
    color: var(--brand);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0;
}
.home-leadership-card .org {
    font-size: 0.62rem;
    color: #6c757d;
    line-height: 1.1;
    margin-top: 0.1rem;
}

.home-carousel .swiper-slide img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.home-carousel .carousel-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; color: #fff; text-align: center; padding: 2rem;
}

/* ── Latest docs widget ─────────────────────────────────────────────────────── */
.docs-widget .nav-pills .nav-link {
    font-size: 0.82rem;
    padding: 0.25rem 0.65rem;
    color: #495057;
    border: 1px solid transparent;
}
.docs-widget .nav-pills .nav-link.active {
    background: var(--brand);
    color: #fff;
}
.docs-widget .doc-list {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.docs-widget .doc-item {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    line-height: 1.4;
}
.docs-widget .doc-item:last-child { border-bottom: none; }
.docs-widget .doc-item a { color: var(--text); text-decoration: none; }
.docs-widget .doc-item a:hover { color: var(--brand); text-decoration: underline; }
.badge-new {
    font-size: 0.6rem;
    font-weight: 700;
    background: #dc3545;
    color: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    vertical-align: middle;
}

/* ── E-Gov card ─────────────────────────────────────────────────────────────── */
.egov-card {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    background: #fff;
    height: 100%;
}
.egov-card:hover {
    box-shadow: 0 4px 16px rgba(11, 94, 215, 0.15);
    transform: translateY(-2px);
    border-color: var(--brand);
    color: inherit;
}
.egov-card .icon-wrap {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: var(--brand-light);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--brand);
    font-size: 1.15rem;
}
.egov-card .card-title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin-bottom: 0; }
.egov-card .card-text  { font-size: 0.85rem; color: #6c757d; margin-top: 0.2rem; }

/* ── VB-GRAM G Stat Card ────────────────────────────────────────────────────────── */
.vbgramg-stat-card {
    border-left: 4px solid var(--brand);
    background: #f8fbff;
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.8rem 1rem;
}
.vbgramg-stat-card .val {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--brand);
}
.vbgramg-stat-card .lbl {
    font-size: 0.72rem;
    color: #6c757d;
    margin-top: 0.1rem;
}

/* ── Resources ticker ───────────────────────────────────────────────────────── */
.resources-ticker-wrap {
    height: 360px;
    overflow: hidden;
    position: relative;
}
.resources-ticker-wrap::before,
.resources-ticker-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 40px;
    z-index: 2;
    pointer-events: none;
}
.resources-ticker-wrap::before { top: 0;    background: linear-gradient(#fff, transparent); }
.resources-ticker-wrap::after  { bottom: 0; background: linear-gradient(transparent, #fff); }

.ticker-scroller { display: flex; flex-direction: column; gap: 0.75rem; }
.ticker-scroller:hover { animation-play-state: paused; }

.ticker-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 52px;
}
.ticker-logo-card:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 8px rgba(11,94,215,0.1);
}
.ticker-logo-card img {
    max-height: 40px;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.2s;
}
.ticker-logo-card:hover img {
    transform: scale(1.04);
}

/* ── Document listing ───────────────────────────────────────────────────────── */
.doc-row {
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
}
.doc-row:last-child { border-bottom: none; }
.doc-category-pill {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: var(--brand-light);
    color: var(--brand);
    font-weight: 600;
}

/* ── RTI table ──────────────────────────────────────────────────────────────── */
.rti-table th { background: var(--brand); color: #fff; }

/* ── Cookie banner ──────────────────────────────────────────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    background: #1a1a2e;
    color: #fff;
    z-index: 9998;
    border-top: 3px solid var(--brand);
}

/* ── Visitor badge ──────────────────────────────────────────────────────────── */
.visitor-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.1);
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
}

/* ── Site footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--footer-bg); color: #c9d1d9; }
.footer-links { line-height: 1.65; }
.footer-links a { color: #8eb8f7; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { background: rgba(0,0,0,0.3); }
.footer-bottom a { color: rgba(255,255,255,0.5); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.breadcrumb { font-size: 0.85rem; }

/* ── Section headings ───────────────────────────────────────────────────────── */
.section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand);
    border-bottom: 2px solid var(--brand);
    padding-bottom: 0.35rem;
    display: inline-block;
    margin-bottom: 1rem;
}

/* ── Admin panel ────────────────────────────────────────────────────────────── */
.admin-sidebar {
    min-height: 100vh;
    background: #1e2a3a;
    color: #e2e8f0;
    width: 240px;
    flex-shrink: 0;
}
.admin-sidebar a { color: #94a3b8; text-decoration: none; font-size: 0.875rem; }
.admin-sidebar a:hover, .admin-sidebar a.active { color: #fff; background: rgba(255,255,255,0.08); }
.admin-sidebar .nav-link { padding: 0.55rem 1.25rem; border-radius: 0.25rem; display: flex; align-items: center; gap: 0.6rem; }
.admin-sidebar .nav-section { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; padding: 1rem 1.25rem 0.4rem; }
.admin-content { flex: 1; min-width: 0; background: #f8fafc; min-height: 100vh; }

/* ── Status badges ──────────────────────────────────────────────────────────── */
.status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-draft     { background: #e2e8f0; color: #475569; }
.status-pending   { background: #fef3c7; color: #92400e; }
.status-published { background: #d1fae5; color: #065f46; }
.status-rejected  { background: #fee2e2; color: #991b1b; }
.status-withdrawn { background: #f3f4f6; color: #6b7280; }

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.pagination .page-link { color: var(--brand); }
.pagination .page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
}

/* ── Section hero banner ────────────────────────────────────────────────────── */
.page-banner {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    padding: 2.5rem 0;
}

/* ── Gallery grid ───────────────────────────────────────────────────────────── */
.gallery-item { border-radius: 0.5rem; overflow: hidden; aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.gallery-item:hover img { transform: scale(1.04); }

/* ── Responsive tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .home-carousel { height: 220px; }
    .resources-ticker-wrap { height: 200px; }
    .admin-sidebar { width: 100%; min-height: auto; }
}

/* ── Print ──────────────────────────────────────────────────────────────────── */
@media print {
    .site-header, .site-footer, .cookie-banner, .skip-link { display: none !important; }
    body { font-size: 12pt; }
    .container { max-width: 100% !important; }
}

/* ── Dignitary cards ─────────────────────────────────────────────────────────── */
.dignitary-card { transition: transform .2s, box-shadow .2s; }
.dignitary-card:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }
.dignitary-card img { border: 3px solid var(--bs-primary); object-fit: cover; }