/*
 * modern.css
 *
 * This file is part of osTicket.
 *
 * Copyright (c) 2006-2013 osTicket
 * http://www.osticket.com
 *
 * Released under the GNU General Public License WITHOUT ANY WARRANTY.
 * See LICENSE.TXT for details.
 *
 * @version    $Id$
 * @author     Peter Rotich <peter@osticket.com>
 *
 */

:root {
    --header-height: 80px;
    --banner-height: 200px;
    --page-width: 1200px;
    --page-bg: #f9f9f9;
    --text-color: #333;
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --border-color: #dee2e6;
    --header-bg: #fff;
    --banner-bg: #007bff;
    --banner-text-color: #fff;
    --footer-bg: #343a40;
    --footer-text-color: #fff;
    --link-color: #007bff;
    --link-hover-color: #0056b3;
    --button-bg: #007bff;
    --button-text-color: #fff;
    --button-hover-bg: #0056b3;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--page-bg);
    margin: 0;
}

/* Make body a column flex container so footer can stick to bottom */
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#container {
    flex: 1 0 auto;
}

#container {
    width: 100%;
    margin: 0 auto;
}

#header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}

/* Keep header contents on a single row and prevent wrapping */
#header { flex-wrap: nowrap; }

#main-nav { flex-wrap: nowrap; }

#main-nav ul { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.9rem; }
#main-nav li { white-space: nowrap; }

/* Ensure logo doesn't force wrapping */
#logo { margin-right: 1rem; display: inline-flex; align-items: center; }

#header .logo {
    display: flex;
    align-items: center;
}

#header .logo img {
    height: 50px;
    margin-right: 1rem;
}

#nav {
    display: flex;
    align-items: center;
}

#nav ul.flush-left,
#nav ul.flush-right {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Modern nav appearance */
#main-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#nav-toggle {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-color);
    padding: 0.25rem 0.5rem;
}

#main-nav ul.flush-left { display:flex; gap:1rem; }
#main-nav ul.flush-right { display:flex; gap:0.75rem; margin-left:auto; }

/* Ensure no bullets or default padding on nav lists */
#main-nav ul {
    display: flex;
    align-items: center; /* Vertically center all <li> items */
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-nav li {
    display: flex;
    align-items: center; /* Keep content inside <li> centered */
}

/* 2. Unified Height and Alignment for all Links */
#main-nav a {
    display: inline-flex; /* Use flex to align text or flags inside the anchor */
    align-items: center;
    justify-content: center;
    height: 34px;        /* Set a fixed height for everything */
    padding: 0 0.75rem;  /* Consistent side padding */
    text-decoration: none;
    color: var(--text-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

#main-nav a:hover {
    background: rgba(0,0,0,0.05);
}

#main-nav a.active {
    background: rgba(0,123,255,0.1);
    color: var(--primary-color);
    font-weight: 600;
}

/* Keep language flag links unstyled so sprites render correctly */
#main-nav li.lang a {
    padding: 0;
    background-color: transparent; /* Only targets color, leaves image alone */
    box-shadow: none;
    border-radius: 0;
}
#main-nav li.lang a.flag {
    display: inline-block;
    width: 16px;
    height: 11px;
}

/* (nav truncation rule removed) */

/* (icon navbar removed) */

/* Guest user CTA (top-right) */
.guest-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.1rem 0.25rem;
    white-space: nowrap;
}
.guest-cta .guest-label {
    font-size: 0.95rem;
    color: var(--secondary-color);
    font-weight: 600;
    margin-right: 0.4rem;
}
.guest-cta .signin-link {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.15rem 0.45rem;
    font-size: 0.85rem;
    border-radius: 6px;
    border: 1px solid rgba(0,123,255,0.14);
    background: rgba(0,123,255,0.035);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.guest-cta .signin-link:hover { background: rgba(0,123,255,0.07); }

#nav ul li {
    margin-left: 1.5rem;
}

#nav ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
}

#nav ul li a:hover {
    color: var(--link-hover-color);
}

#banner {
    background-color: var(--banner-bg);
    color: var(--banner-text-color);
    height: var(--banner-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#banner h1 {
    font-size: 2.5rem;
    margin: 0;
}

/* Header logo and nav tweaks to match template structure */
#header #logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

#header #logo img {
    height: 56px;
    display: block;
}

#nav ul.flush-left { gap: 1rem; }
#nav ul.flush-right { margin-left: auto; gap: 1rem; }

#content {
    width: var(--page-width);
    max-width: 100%;
    margin: 2rem auto;
    padding: 0 2rem;
}

/* Landing page layout: main content + sidebar */
#landing_page {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
    max-width: var(--page-width);
    margin: 1.5rem auto;
    padding: 0 1rem;
}

/* Open ticket form styles (keep templates intact but restyle table layout) */
#ticketForm table {
    width: 100%;
    max-width: 900px;
    border-collapse: separate;
    margin: 0 auto;
}

/* Login / Access Link styles */
.login-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
    max-width: 920px;
    margin: 0 auto 1.5rem auto;
    padding: 0 1rem;
}
.login-box {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 8px;
}
.login-aside {
    padding: 0.5rem 0.75rem;
    color: #444;
}
.login-aside .signin-link { display:inline-block; margin-top:0.35rem; color:var(--primary-color); font-weight:700; }
.login-error { color: #b94a48; margin-bottom: .5rem; min-height:1.2em; }
.login-container .field { margin-bottom: 0.75rem; }
.login-container .field label { display:block; font-weight:600; margin-bottom:.25rem; }
.login-container .field input { width:100%; padding:0.6rem 0.75rem; border-radius:6px; border:1px solid var(--border-color); }

/* Button primary helper (for buttons and .button.primary class) */
.button.primary, button.button.primary, .btn-primary {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-weight: 700;
}
.link.muted { color: var(--secondary-color); margin-left:0.75rem; }

@media (max-width: 720px) {
    .login-container { grid-template-columns: 1fr; }
    .login-aside { order: 2; text-align: center; }
}

/* New auth card styles (compact, centered) */
.auth-container { display:flex; justify-content:center; }
.auth-card { width:100%; max-width:480px; background:#fff; border-radius:10px; padding:1.25rem; box-shadow: 0 8px 30px rgba(20,30,50,0.06); border: 1px solid rgba(11,33,66,0.04); }
.auth-aside { width:100%; max-width:320px; padding:1rem; border-radius:10px; background:transparent; }
.auth-title { margin:0 0 0.5rem 0; font-size:1.1rem; }
.auth-actions { display:flex; gap:0.6rem; align-items:center; margin-top:0.75rem; }
.button.outline { background:transparent; color:var(--primary-color); border:1px solid rgba(0,123,255,0.12); box-shadow:none; padding:0.5rem 0.8rem; border-radius:8px; }

@media (max-width: 760px) {
    .auth-card { max-width: 100%; padding: 1rem; }
    .auth-actions { flex-direction: column; align-items: stretch; }
    .button.primary, .button.outline { width: 100%; }
}

/* Rich text / WYSIWYG editor outlines (Redactor) */
.richtext, .redactor-box, .redactor-editor {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
}

.redactor-box { padding: 0.25rem; }
.redactor-toolbar { margin-bottom: 0.5rem; }
.redactor-editor { min-height: 140px; padding: 0.6rem; }

/* Focus state so editors are obvious when content present or focused */
.redactor-box.focused, .richtext:focus, .redactor-editor:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.08);
    border-color: rgba(0,123,255,0.35);
}

/* If redactor injects an iframe, ensure its body has transparent background and inherits fonts */
.redactor-editor iframe { width: 100%; min-height: 120px; border: none; background: transparent; }
.redactor-editor iframe body { background: transparent; font-family: inherit; }

/* Error highlighting for inputs when server-side validation reports errors */
.field-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 4px rgba(220,53,69,0.07) !important;
}
.field-error:focus {
    box-shadow: 0 0 0 6px rgba(220,53,69,0.10) !important;
}

#ticketForm td { vertical-align: top; padding: 0.5rem 0; }

#ticketForm label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm input[type="tel"],
#ticketForm select,
#ticketForm textarea,
#ticketForm .richtext {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    font-size: 0.95rem;
}

#ticketForm textarea { min-height: 140px; }

.form-header h3 { margin: 0 0 0.25rem 0; font-size: 1.1rem; }
.form-header div { color: #666; margin-top: 0.25rem; }

/* CAPTCHA */
.captchaRow .captcha img { max-width: 120px; height: auto; display: inline-block; }
.captchaRow input[type="text"] { max-width: 160px; }

/* Buttons */
.buttons input[type="submit"], .buttons input[type="reset"], .buttons input[type="button"] {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0.6rem 1rem;
    margin: 0 0.4rem;
    border-radius: 8px;
    color: var(--button-text-color);
    font-weight: 700;
    cursor: pointer;
}

/* Primary submit button styling */
.buttons input[type="submit"] {
    background: var(--primary-color);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,123,255,0.18);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.buttons input[type="submit"]:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,123,255,0.22); background-color: #0069d9; }
.buttons input[type="submit"]:focus { outline: none; box-shadow: 0 0 0 4px rgba(0,123,255,0.10); }

/* Secondary controls */
.buttons input[type="reset"] { background: #6c757d; color: #fff; padding: 0.6rem 0.95rem; box-shadow: none; }
.buttons input[type="button"] { background: transparent; color: var(--secondary-color); border: 1px solid rgba(0,0,0,0.06); box-shadow: none; padding: 0.55rem 0.9rem; }

/* Center buttons on mobile and stack if narrow */
.buttons { text-align: center; }
@media (max-width: 480px) {
    .buttons input { display: block; width: 100%; margin: 0.5rem 0; }
}

/* Make table rows stack on small screens (no template changes) */
@media (max-width: 720px) {
    #ticketForm table, #ticketForm tbody, #ticketForm tr, #ticketForm td { display: block; width: 100%; }
    #ticketForm td { padding: 0.5rem 0; }
}

.main-content { order: 0; }
.sidebar { order: 1; }

.sidebar {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 6px;
}

.front-page-button { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1rem; }
.front-page-button .button { display:block; width:100%; text-align:center; }

/* Generic button styles */
.button {
    display: block; /* full width by default when used in layouts like sidebars */
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--button-bg);
    color: var(--button-text-color);
    border: 1px solid rgba(0,0,0,0.05);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(11, 33, 66, 0.06);
    transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button.green { background: #28a745; color: #fff; }
.button.blue { background: #007bff; color: #fff; }

/* Keep search form buttons inline */
.search-form .button { display: inline-block; width: auto; border-radius: 0 6px 6px 0; }


#landing_page .main-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.search-form {
    display: flex;
    margin-bottom: 2rem;
}

.search-form .search {
    flex-grow: 1;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 5px 0 0 5px;
    font-size: 1rem;
}

.search-form .button {
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--button-bg);
    background-color: var(--button-bg);
    color: var(--button-text-color);
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.search-form .button:hover {
    background-color: var(--button-hover-bg);
}

#footer {
    background-color: var(--footer-bg);
    color: var(--footer-text-color);
    padding: 0.75rem 1rem; /* reduced vertical padding */
    text-align: center;
    font-size: 0.95rem;
}

#footer a {
    color: var(--link-color);
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

/* Overlay & loading modal: hidden by default; JS can toggle via inline styles or classes */
#overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
}

#loading {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: var(--text-color);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 9999;
    min-width: 260px;
    text-align: center;
}

/* When JS wants to show the loading UI it can add the `loading-visible` class on body */
body.loading-visible #overlay,
body.loading-visible #loading {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    #header {
        flex-direction: column;
        height: auto;
        padding: 1rem;
    }

    #nav {
        margin-top: 1rem;
    }

    #nav ul.flush-left,
    #nav ul.flush-right {
        flex-direction: column;
        align-items: center;
    }

    #nav ul li {
        margin: 0.5rem 0;
    }

    #banner h1 {
        font-size: 2rem;
    }

    #content {
        width: 100%;
        padding: 1rem;
    }

    /* Mobile nav: show toggle button and collapse nav by default */
    #nav-toggle { display: inline-block; margin-left: 0.25rem; }
    #main-nav { display: none; width: 100%; }
    #main-nav.open { display: block; }
    #main-nav ul.flush-left, #main-nav ul.flush-right { display:block; }
    #main-nav ul.flush-left li, #main-nav ul.flush-right li { margin: 0.5rem 0; }
    #main-nav a { display:block; padding: .75rem 1rem; }
    /* Mobile: center guest CTA */
    .guest-cta { align-items: center; }


    /* Stack landing page on small screens */
    #landing_page {
        grid-template-columns: 1fr;
        padding: 0 0.75rem;
    }
    .sidebar { order: 2; }
    .main-content { order: 1; }
}