/*
 * GREEN SOCIETY PUBLIC SCHOOL — SUPPORT DESK
 * Premium visual layer for osTicket 1.18
 * Keeps osTicket core/vendor CSS intact; styles only GSPS presentation.
 */

:root {
    --gsps-forest: #12452d;
    --gsps-forest-deep: #0b3020;
    --gsps-green: #197447;
    --gsps-green-bright: #238653;
    --gsps-mint: #eaf4ed;
    --gsps-gold: #d5a64a;
    --gsps-ink: #1d3025;
    --gsps-muted: #68786e;
    --gsps-line: #dfe9e2;
    --gsps-surface: #ffffff;
    --gsps-page: #f3f7f4;
    --gsps-radius: 12px;
    --gsps-shadow: 0 10px 30px rgba(18, 69, 45, .07);
}

/* Global page foundation */
html, body {
    background: var(--gsps-page) !important;
    color: var(--gsps-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
body { min-height: 100vh; }
#container, body #container {
    width: min(100% - 48px, 1440px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}
#content {
    padding-top: 30px !important;
    padding-bottom: 48px !important;
}
#content, #content * { box-sizing: border-box; }

/* Slim institutional contact bar */
.esewa-top-strip {
    background: var(--gsps-forest-deep) !important;
    color: #d8e8de !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
    padding: 8px 0 !important;
    font-size: 12px;
}
.esewa-top-inner {
    width: min(100% - 48px, 1440px) !important;
    max-width: 1440px !important;
    padding: 0 !important;
    min-height: 25px;
}
.esewa-contact-center { gap: 18px !important; }
.esewa-contact-center a {
    color: #d8e8de !important;
    font-size: 12px !important;
    font-weight: 500;
    transition: color .2s ease;
}
.esewa-contact-center a:hover { color: #fff !important; }
.esewa-contact-center .svg-icon { color: var(--gsps-gold) !important; }
.esewa-social-group {
    border-left-color: rgba(255,255,255,.2) !important;
    padding-left: 14px !important;
}
.esewa-social-btn {
    width: 27px !important;
    height: 27px !important;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50% !important;
    background: rgba(255,255,255,.08) !important;
}
.esewa-social-btn:hover {
    background: var(--gsps-gold) !important;
    border-color: var(--gsps-gold);
}
.esewa-social-btn:hover .svg-icon { color: var(--gsps-forest-deep) !important; }
.esewa-auth-user {
    background: rgba(255,255,255,.11) !important;
    color: #fff !important;
}

/* Main navigation — clean white surface with green identity */
.esewa-navbar {
    position: relative !important;
    top: auto !important;
    z-index: 1000;
    padding: 15px 0 !important;
    background: rgba(255,255,255,.98) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gsps-line) !important;
    box-shadow: 0 5px 22px rgba(18,69,45,.055) !important;
}
.esewa-navbar-inner {
    width: min(100% - 48px, 1440px) !important;
    max-width: 1440px !important;
    padding: 0 !important;
    gap: 26px;
}
.esewa-brand { gap: 13px !important; min-width: 0; }
.esewa-brand img {
    height: 46px !important;
    max-width: 72px;
    object-fit: contain;
}
.esewa-brand-divider {
    height: 34px !important;
    background: #d9e5dc !important;
}
.esewa-brand-tagline {
    color: var(--gsps-forest) !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    letter-spacing: -.35px !important;
}
.esewa-right-cluster { gap: 24px !important; }
.esewa-nav-links { gap: 20px !important; }
.esewa-nav-links > li > a {
    position: relative;
    padding: 12px 0 !important;
    color: #405448 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    transition: color .2s ease !important;
}
.esewa-nav-links > li > a::after {
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gsps-gold);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.esewa-nav-links > li:hover > a::after,
.esewa-nav-links > li > a.active::after { transform: scaleX(1); }
.esewa-nav-links > li:hover > a,
.esewa-nav-links > li > a.active { color: var(--gsps-green) !important; }
.dropdown-chevron { color: #8a9a90; }
.esewa-dropdown-menu {
    min-width: 225px;
    margin-top: 7px !important;
    padding: 7px !important;
    border: 1px solid var(--gsps-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(15,49,31,.14) !important;
}
.esewa-dropdown-menu a {
    padding: 10px 13px !important;
    border-radius: 7px;
    color: #405448 !important;
    font-size: 13px !important;
}
.esewa-dropdown-menu a:hover {
    padding-left: 16px !important;
    background: var(--gsps-mint) !important;
    color: var(--gsps-forest) !important;
}
.esewa-buttons-group { gap: 10px !important; }
.esewa-btn-outline, .esewa-btn-solid {
    min-height: 40px;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: .25px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.esewa-btn-outline {
    border: 1px solid #c8d9cd !important;
    background: #fff !important;
    color: var(--gsps-forest) !important;
}
.esewa-btn-outline:hover {
    background: var(--gsps-mint) !important;
    border-color: #a9c8b2 !important;
    transform: translateY(-1px);
}
.esewa-btn-solid {
    border: 1px solid var(--gsps-green) !important;
    background: var(--gsps-green) !important;
    color: #fff !important;
    box-shadow: 0 5px 12px rgba(25,116,71,.17) !important;
}
.esewa-btn-solid:hover {
    border-color: var(--gsps-forest) !important;
    background: var(--gsps-forest) !important;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(18,69,45,.2) !important;
}
.gsps-mobile-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid #d6e4da;
    border-radius: 9px;
    background: var(--gsps-mint);
    color: var(--gsps-forest);
}

/* Main osTicket content surfaces */
#content .form_table,
#content .ticket_info,
#content .user-info,
#content .section-break,
#content .notice,
#content .warning,
#content .error {
    border-radius: var(--gsps-radius);
}
#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="tel"],
#content input[type="number"],
#content select,
#content textarea {
    max-width: 100%;
    border: 1px solid #d6e3da !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--gsps-ink) !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}
#content input:focus,
#content select:focus,
#content textarea:focus {
    outline: 0 !important;
    border-color: var(--gsps-green) !important;
    box-shadow: 0 0 0 3px rgba(25,116,71,.11) !important;
}
#content input[type="submit"],
#content button[type="submit"],
#content .button,
#content input.button {
    border: 1px solid var(--gsps-green) !important;
    border-radius: 8px !important;
    background: var(--gsps-green) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(25,116,71,.14);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
#content input[type="submit"]:hover,
#content button[type="submit"]:hover,
#content .button:hover,
#content input.button:hover {
    background: var(--gsps-forest) !important;
    border-color: var(--gsps-forest) !important;
    transform: translateY(-1px);
}
#content a { color: var(--gsps-green); }
#content a:hover { color: var(--gsps-forest-deep); }
#content table {
    border-color: var(--gsps-line);
}
#content th {
    color: var(--gsps-forest);
    font-weight: 700;
}
#content tr:hover td { background-color: #f7fbf8; }

/* Alerts — restrained and consistent */
.gsps-alert-backdrop { background: rgba(8,31,19,.48) !important; }
.gsps-alert-popup {
    border: 1px solid var(--gsps-line) !important;
    border-top: 4px solid var(--gsps-gold) !important;
    border-radius: 16px !important;
    box-shadow: 0 28px 80px rgba(5,25,14,.25) !important;
}
.gsps-alert-icon {
    border-color: #d7e8dc !important;
    background: var(--gsps-mint) !important;
    color: var(--gsps-green) !important;
}
.gsps-alert-close {
    border-color: var(--gsps-green) !important;
    border-radius: 8px !important;
    background: var(--gsps-green) !important;
}
.gsps-alert-close:hover { background: var(--gsps-forest) !important; }

/* Full-width institutional footer */
#gsps-client-footer,
#gsps-client-footer.gsps-client-footer {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    clear: both;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 52px -50vw 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 4px solid var(--gsps-gold) !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #0b3020 0%, #12452d 58%, #175538 100%) !important;
    color: #e2eee6 !important;
    box-shadow: 0 -8px 28px rgba(18,69,45,.06) !important;
    overflow: hidden;
    box-sizing: border-box !important;
}
#gsps-client-footer *,
#gsps-client-footer *::before,
#gsps-client-footer *::after { box-sizing: border-box; }
#gsps-client-footer .gsps-footer-main,
#gsps-client-footer .gsps-footer-bottom { width: 100% !important; max-width: none !important; }
#gsps-client-footer .gsps-footer-inner,
#gsps-client-footer .gsps-footer-bottom-inner {
    width: min(100% - 64px, 1440px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}
#gsps-client-footer .gsps-footer-inner {
    padding: 52px 0 42px !important;
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 38px;
}
#gsps-client-footer .gsps-footer-col h3 {
    margin: 0 0 18px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    letter-spacing: .35px;
}
#gsps-client-footer .gsps-footer-col h3 svg { fill: var(--gsps-gold) !important; }
#gsps-client-footer p {
    color: #c2d6c9 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}
#gsps-client-footer p svg { fill: #a9d9b8 !important; }
#gsps-client-footer a {
    color: #edf7f0 !important;
    transition: color .18s ease;
}
#gsps-client-footer a:hover { color: #f0c96e !important; }
#gsps-client-footer .gsps-footer-link {
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.08) !important;
}
#gsps-client-footer .gsps-footer-link:hover {
    border-color: var(--gsps-gold) !important;
    background: var(--gsps-gold) !important;
    color: var(--gsps-forest-deep) !important;
}
#gsps-client-footer .gsps-social-btn {
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.08) !important;
}
#gsps-client-footer .gsps-social-btn:hover {
    border-color: var(--gsps-gold) !important;
    background: var(--gsps-gold) !important;
}
#gsps-client-footer .gsps-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(3,22,12,.28) !important;
}
#gsps-client-footer .gsps-footer-bottom-inner {
    min-height: 64px;
    padding: 17px 0 !important;
}
#gsps-client-footer .gsps-footer-bottom p { color: #a9c6b3 !important; font-size: 12px !important; }
#gsps-client-footer .gsps-footer-credit a { color: #f0c96e !important; }
#footer, #footer:not(#gsps-client-footer) { display: none !important; }

/* Responsive navigation and content */
@media (max-width: 1120px) {
    .esewa-navbar-inner { flex-wrap: wrap; }
    .esewa-right-cluster { gap: 14px !important; }
    .esewa-nav-links { gap: 13px !important; }
    .esewa-nav-links > li > a { font-size: 12px !important; }
}
@media (max-width: 900px) {
    .esewa-navbar-inner { justify-content: space-between; }
    .gsps-mobile-toggle { display: inline-flex !important; align-items: center; justify-content: center; margin-left: auto; }
    .esewa-right-cluster {
        display: none !important;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px !important;
        padding: 14px 0 3px;
    }
    .esewa-right-cluster.is-open { display: flex !important; }
    .esewa-nav-links {
        display: flex !important;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0 !important;
    }
    .esewa-nav-links > li { border-top: 1px solid #edf2ee; }
    .esewa-nav-links > li > a {
        display: flex !important;
        justify-content: space-between;
        padding: 12px 5px !important;
        font-size: 14px !important;
    }
    .esewa-nav-links > li > a::after { display: none; }
    .esewa-dropdown-menu {
        position: static !important;
        display: none;
        min-width: 0;
        margin: 0 !important;
        padding: 0 0 8px 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    .esewa-nav-links > li:hover .esewa-dropdown-menu,
    .esewa-nav-links > li:focus-within .esewa-dropdown-menu { display: block; }
    .esewa-dropdown-menu::before { display: none !important; }
    .esewa-buttons-group { padding-top: 12px; border-top: 1px solid #edf2ee; }
    .esewa-btn-outline { display: inline-flex !important; }
    .esewa-btn-solid { flex: 1; }
    #gsps-client-footer .gsps-footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 640px) {
    #container, body #container { width: calc(100% - 28px) !important; }
    .esewa-top-inner, .esewa-navbar-inner { width: calc(100% - 28px) !important; }
    .esewa-top-strip { padding: 8px 0 !important; }
    .esewa-contact-center { gap: 7px 12px !important; }
    .esewa-contact-center a { font-size: 11px !important; }
    .esewa-social-group { padding-left: 9px !important; gap: 6px !important; }
    .esewa-brand { gap: 9px !important; }
    .esewa-brand img { height: 39px !important; max-width: 58px; }
    .esewa-brand-divider { height: 27px !important; }
    .esewa-brand-tagline { font-size: 14px !important; }
    .esewa-buttons-group { flex-wrap: wrap; }
    .esewa-btn-outline, .esewa-btn-solid { flex: 1; padding: 0 9px !important; font-size: 10px !important; }
    #content { padding-top: 20px !important; padding-bottom: 32px !important; }
    #gsps-client-footer { margin-top: 34px !important; }
    #gsps-client-footer .gsps-footer-inner {
        width: calc(100% - 36px) !important;
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 34px 0 28px !important;
    }
    #gsps-client-footer .gsps-footer-bottom-inner {
        width: calc(100% - 36px) !important;
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding: 16px 0 !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}