/* =========================================
   XCORT SERVICEDESK - FINAL UI
   ========================================= */

/* ===== BASE ===== */
body {
    margin: 0 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    background: #f5f7fb !important;
    color: #1f2937 !important;
}

/* =========================================
   NAVBAR (GLASS EFFECT)
   ========================================= */

.Header__navbar,
#navBar {
    background: rgba(5, 28, 44, 0.85) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    border: none !important;
}

/* Fix sticky header line */
.Header__navbar *,
#navBar *,
#navBarContainer * {
    border-top: none !important;
    background-image: none !important;
}

#navBarContainer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 68px !important;
}

/* Logo */
.Header__logo img {
    max-height: 38px !important;
}

/* Company Name */
.Header__name {
    font-size: 17px !important;
    color: #ffffff !important;
    margin-left: 10px !important;
    font-weight: 500 !important;
}

/* Menu */
.Header__menuList li,
.Header__menuList a {
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px !important;
}

.Header__menuList li:hover,
.Header__menuList a:hover {
    color: #ffffff !important;
}

/* =========================================
   HERO BANNER
   ========================================= */

#headerContent,
.Header__searchSection {
    background:
        linear-gradient(rgba(5, 28, 44, 0.65), rgba(11, 53, 80, 0.65)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=1600") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    height: 180px !important;
    min-height: 180px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Title override */
.Header__searchTitle {
    visibility: hidden !important;
    position: relative !important;
}

.Header__searchTitle::after {
    content: "Xcort - ServiceDesk";
    visibility: visible !important;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* Hide description */
.Header__description {
    display: none !important;
}

/* =========================================
   REMOVE SEARCH
   ========================================= */

.Header__searchSection form,
.Header__searchSection input,
.Header__searchSection button,
#headerContent form,
#headerContent input,
#headerContent button,
.CommonSearch__searchBox,
.CommonSearch__searchField,
.CommonSearch__searchIcon,
.SearchContainer,
.SearchContainer__searchBox,
.SearchContainer__searchField,
.SearchContainer__searchIcon,
input[type="search"] {
    display: none !important;
}

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

.Common__homePageContainer,
.KbCategory__container,
.ContentList__container,
.TicketList__container {
    width: 92% !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
}

.KbCategory__box,
.CommonCard__commonCard {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 22px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05) !important;
}

/* =========================================
   FOOTER (PERFECT CENTER FIX)
   ========================================= */

.Footer__footerCopyrigt {
    background: linear-gradient(135deg, #051c2c, #0b3550) !important;
    height: 50px !important;
    position: relative !important;
}

/* Hide Zoho default */
.Footer__footerCopyrigt span,
.Footer__footerCopyrigt a {
    display: none !important;
}

/* Absolute perfect centering */
.Footer__footerCopyrigt::after {
    content: "Powered by Xcort Micro Systems";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .Header__searchTitle::after {
        font-size: 22px !important;
    }

    #headerContent,
    .Header__searchSection {
        height: 150px !important;
    }

    .Footer__footerCopyrigt {
        height: 44px !important;
    }
}