/* =========================================================
   SiteMaster.css
   Premium Header and Footer for NIEPA ERP Complaints Portal
   Updated: Footer size reduced + NIEPA map card adjusted
   ========================================================= */

/* ---------- Global Reset ---------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Segoe UI", "Nirmala UI", Arial, sans-serif;
    background: #edf3fa;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    body,
    body * {
        font-family: "Segoe UI", "Nirmala UI", Arial, sans-serif;
    }

/* =========================================================
   HEADER
   ========================================================= */

.erp-main-header {
    position: relative;
    z-index: 50;
    color: #ffffff;
    overflow: hidden;
    background: radial-gradient(circle at 8% 14%, rgba(34, 211, 238, 0.24), transparent 31%), radial-gradient(circle at 88% 20%, rgba(251, 191, 36, 0.14), transparent 30%), radial-gradient(circle at 40% 110%, rgba(219, 39, 119, 0.18), transparent 34%), linear-gradient(135deg, #07111f 0%, #10213d 42%, #0b3d66 72%, #114f7a 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28);
}

    .erp-main-header::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(115deg, rgba(255, 255, 255, 0.11), transparent 36%), linear-gradient(270deg, rgba(255, 255, 255, 0.05), transparent 48%);
    }

    .erp-main-header::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        right: -130px;
        top: -170px;
        border-radius: 50%;
        background: rgba(34, 211, 238, 0.18);
        filter: blur(28px);
        pointer-events: none;
    }

/* Thin top strip */
.erp-top-strip {
    position: relative;
    z-index: 1;
    min-height: 34px;
    padding: 7px 36px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #e0f2fe;
    background: rgba(3, 7, 18, 0.42);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

    .erp-top-strip i {
        color: #fbbf24;
        margin-right: 7px;
    }

.erp-strip-left,
.erp-strip-right {
    display: flex;
    align-items: center;
}

/* =========================================================
   VERIFIED EMAIL BOX + SIGN OUT BUTTON
   ========================================================= */

.header-email-box {
    position: absolute;
    top: 14px;
    right: 30px;
    z-index: 10;
    min-height: 44px;
    padding: 8px 10px 8px 16px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 26px rgba(0, 0, 0, 0.12);
    transition: all 0.22s ease;
}

    .header-email-box:hover {
        color: #ffffff;
        background: linear-gradient(135deg, #0b5ea8, #22d3ee);
        border-color: rgba(255, 255, 255, 0.28);
        transform: translateY(-3px);
        box-shadow: 0 18px 32px rgba(34, 211, 238, 0.22);
    }

.header-email-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #ffffff;
    background: transparent;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: .2px;
}

    .header-email-text i {
        color: #22d3ee;
        font-size: 14px;
    }

    .header-email-text span,
    .header-email-text label {
        color: #ffffff;
        font-weight: 700;
    }

/* Sign out button beside verified email - same design as menu button */
.header-email-box a.header-signout-btn,
.header-email-box a.header-signout-btn:link,
.header-email-box a.header-signout-btn:visited,
.header-signout-btn {
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 999px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 22px rgba(0, 0, 0, 0.12);
    transition: all 0.22s ease;
    white-space: nowrap;
}

    .header-email-box a.header-signout-btn i,
    .header-signout-btn i {
        font-size: 13px;
        color: #22d3ee !important;
    }

    .header-email-box a.header-signout-btn:hover,
    .header-email-box a.header-signout-btn:focus,
    .header-email-box a.header-signout-btn:active,
    .header-signout-btn:hover,
    .header-signout-btn:focus,
    .header-signout-btn:active {
        color: #ffffff !important;
        text-decoration: none !important;
        background: linear-gradient(135deg, #0b5ea8, #22d3ee);
        border-color: rgba(255, 255, 255, 0.28);
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(34, 211, 238, 0.22);
    }

        .header-email-box a.header-signout-btn:hover i,
        .header-email-box a.header-signout-btn:focus i,
        .header-signout-btn:hover i,
        .header-signout-btn:focus i {
            color: #ffffff !important;
        }

/* Header main row */
.erp-header-inner {
    position: relative;
    z-index: 1;
    min-height: 156px;
    padding: 26px 36px;
    display: grid;
    grid-template-columns: minmax(540px, 1fr) auto;
    align-items: center;
    gap: 28px;
}

/* Logo + title group */
.erp-brand-area {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* NIEPA Logo Card */
.erp-logo-card {
    width: 150px;
    height: 150px;
    min-width: 104px;
    border-radius: 24px;
    background: linear-gradient(145deg, #ffffff, #f4f8ff);
    display: grid;
    place-items: center;
    padding: 11px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.62);
}

    .erp-logo-card img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* Institute title just right of logo */
.erp-title-box {
    min-width: 0;
}

.erp-institute-name {
    position: relative;
    padding-left: 18px;
}

    .erp-institute-name::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 5px;
        width: 5px;
        border-radius: 999px;
        background: linear-gradient(180deg, #fbbf24, #22d3ee);
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.42);
    }

    .erp-institute-name h1 {
        margin: 0;
        color: #ffffff;
        font-size: 30px;
        line-height: 1.12;
        font-weight: 800;
        letter-spacing: -0.45px;
        text-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
    }

    .erp-institute-name h2 {
        margin: 6px 0 0;
        color: #fde68a;
        font-size: 22px;
        line-height: 1.18;
        font-weight: 700;
        letter-spacing: 0.1px;
        text-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }

.erp-portal-title {
    margin-top: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

    .erp-portal-title span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 15px;
        border-radius: 999px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.13);
        border: 1px solid rgba(255, 255, 255, 0.20);
        font-size: 15px;
        font-weight: 700;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }

        .erp-portal-title span i {
            color: #22d3ee;
        }

    .erp-portal-title p {
        margin: 0;
        color: #dbeafe;
        font-size: 13.5px;
        font-weight: 600;
    }

/* Navigation pills */
.erp-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 36px;
}

/* Navigation item */
.erp-nav-link {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 26px rgba(0, 0, 0, 0.12);
    transition: all 0.22s ease;
}

    .erp-nav-link i {
        font-size: 14px;
    }

    .erp-nav-link:hover,
    .erp-nav-link:focus {
        color: #ffffff;
        background: linear-gradient(135deg, #0b5ea8, #22d3ee);
        border-color: rgba(255, 255, 255, 0.28);
        transform: translateY(-3px);
        box-shadow: 0 18px 32px rgba(34, 211, 238, 0.22);
    }

/* =========================================================
   MAIN CONTENT
   ========================================================= */

.erp-content-wrap {
    width: 100%;
    max-width: 100%;
    min-height: 55vh;
    padding: 0;
    background: #edf3fa;
}

    .erp-content-wrap > .app-shell,
    .erp-content-wrap > .complaint-list-shell,
    .erp-content-wrap > .new-shell,
    .erp-content-wrap > .rp-page,
    .erp-content-wrap > .neo-tech-page {
        margin: 0;
    }

/* =========================================================
   FOOTER - REDUCED SIZE
   ========================================================= */

.erp-footer {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    padding: 34px 44px 14px;
    border-top: 4px solid #22d3ee;
    background: radial-gradient(circle at 8% 8%, rgba(219, 39, 119, 0.20), transparent 30%), radial-gradient(circle at 72% 15%, rgba(6, 182, 212, 0.16), transparent 32%), radial-gradient(circle at 94% 100%, rgba(251, 191, 36, 0.10), transparent 28%), linear-gradient(135deg, #07111f 0%, #06283d 48%, #16436a 100%);
}

    .erp-footer::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.065), transparent 42%), linear-gradient(270deg, rgba(255, 255, 255, 0.035), transparent 38%);
        pointer-events: none;
    }

/* Footer three-column layout */
.erp-footer-container {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 1fr;
    gap: 22px;
    max-width: 100%;
}

/* Glass cards - reduced height */
.erp-footer-card {
    border-radius: 24px;
    padding: 22px 26px;
    min-height: 210px;
    background: rgba(255, 255, 255, 0.085);
    border: 1px solid rgba(255, 255, 255, 0.17);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Footer badge */
.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 15px;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fde68a;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
}

/* About card heading */
.footer-about-card h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
}

.footer-institute-text {
    margin-top: 10px;
    padding: 11px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

    .footer-institute-text strong {
        display: block;
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
    }

    .footer-institute-text span {
        display: block;
        margin-top: 4px;
        color: #fde68a;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
    }

/* About text */
.footer-about-text {
    margin: 12px 0 18px;
    color: #dbeafe;
    font-size: 13px;
    line-height: 1.6;
    max-width: 680px;
    font-weight: 500;
}

/* Footer page links as pills */
.footer-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

    .footer-pills a {
        color: #ffffff;
        text-decoration: none;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.15);
        transition: all 0.2s ease;
    }

        .footer-pills a:hover {
            color: #ffffff;
            background: linear-gradient(135deg, #0b5ea8, #22d3ee);
            transform: translateY(-2px);
        }

/* Footer section heading */
.footer-section-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

    .footer-section-heading span {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: linear-gradient(135deg, #0b5ea8, #22d3ee);
        color: #ffffff;
        box-shadow: 0 10px 22px rgba(34, 211, 238, 0.24);
    }

    .footer-section-heading h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
    }

/* Old Contact rows - kept for future reference if contact card is restored */
.footer-contact-row {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    margin-bottom: 18px;
    align-items: flex-start;
}

.footer-contact-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.footer-contact-row strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.footer-contact-row p {
    margin: 0;
    color: #dbeafe;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
}

/* NIEPA Map Card */
.footer-contact-card {
    overflow: hidden;
}

    .footer-contact-card .ratio {
        border-radius: 18px !important;
        overflow: hidden;
        min-height: 178px;
        max-height: 210px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    }

    .footer-contact-card iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        filter: saturate(1.05) contrast(1.02);
    }

/* Logo panel - reduced */
.footer-logo-panel {
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

    .footer-logo-panel img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100px;
        object-fit: contain;
        object-position: center;
        display: block;
    }

.footer-logo-card h4 {
    margin: 20px 0 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Social links */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-social a {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        color: #ffffff;
        text-decoration: none;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.17);
        transition: all 0.2s ease;
    }

        .footer-social a:hover {
            color: #ffffff;
            background: linear-gradient(135deg, #0b5ea8, #22d3ee);
            transform: translateY(-3px);
            box-shadow: 0 14px 24px rgba(34, 211, 238, 0.20);
        }

/* Bottom copyright strip - reduced */
.erp-footer-bottom {
    position: relative;
    margin-top: 20px;
    min-height: 46px;
    padding: 13px 22px;
    border-radius: 20px;
    background: rgba(3, 7, 18, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: #e5e7eb;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1320px) {
    .erp-header-inner {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .erp-nav {
        justify-content: flex-start;
        margin-top: 36px;
    }

    .header-email-box {
        top: 14px;
        right: 30px;
    }
}

@media (max-width: 1200px) {
    .erp-footer-container {
        grid-template-columns: 1fr;
    }

    .erp-footer-card {
        min-height: auto;
    }

    .footer-contact-card .ratio {
        min-height: 240px;
        max-height: 280px;
    }
}

@media (max-width: 768px) {
    .erp-top-strip {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 18px;
    }

    .header-email-box {
        position: relative;
        top: auto;
        right: auto;
        margin: 12px 0 0;
        width: 100%;
        white-space: normal;
        justify-content: space-between;
        flex-wrap: wrap;
        border-radius: 22px;
    }

    .header-email-text {
        white-space: normal;
        font-size: 12.5px;
    }

    .header-signout-btn,
    .header-email-box a.header-signout-btn {
        flex: 1;
        min-width: 120px;
    }

    .erp-header-inner {
        min-height: auto;
        padding: 22px 18px;
    }

    .erp-brand-area {
        align-items: flex-start;
        gap: 14px;
    }

    .erp-logo-card {
        width: 78px;
        height: 78px;
        min-width: 78px;
        border-radius: 18px;
    }

    .erp-institute-name {
        padding-left: 14px;
    }

        .erp-institute-name h1 {
            font-size: 20px;
            line-height: 1.18;
        }

        .erp-institute-name h2 {
            font-size: 16px;
        }

    .erp-portal-title {
        align-items: flex-start;
        flex-direction: column;
    }

        .erp-portal-title span {
            font-size: 13px;
            padding: 8px 12px;
        }

        .erp-portal-title p {
            font-size: 12.5px;
        }

    .erp-nav {
        width: 100%;
    }

    .erp-nav-link {
        width: 100%;
        justify-content: center;
    }

    .erp-footer {
        padding: 28px 16px 14px;
    }

    .erp-footer-card {
        padding: 20px;
        border-radius: 22px;
    }

    .footer-about-card h2 {
        font-size: 22px;
    }

    .footer-contact-card .ratio {
        min-height: 220px;
        max-height: 250px;
    }

    .erp-footer-bottom {
        gap: 10px;
        flex-direction: column;
        padding: 13px 16px;
    }
}

@media (max-width: 480px) {
    .erp-brand-area {
        flex-direction: column;
    }

    .erp-logo-card {
        width: 86px;
        height: 86px;
    }

    .erp-institute-name {
        padding-left: 0;
    }

        .erp-institute-name::before {
            display: none;
        }

    .footer-contact-card .ratio {
        min-height: 190px;
        max-height: 220px;
    }

    .footer-logo-panel {
        min-height: 104px;
    }

        .footer-logo-panel img {
            max-height: 72px;
        }
}