/*
 * KSIT theme for the customer portal (Respond + KS Ticket rollout, Phase 3).
 * Same world as the staff shell (scp/css/ksit-theme.css): cool grey ground, white panels, KSIT
 * navy for actions and current state. Built for customers on phones: fluid widths instead of
 * osTicket's fixed 840px box, 44px controls, 16px inputs (no zoom-on-focus on iOS), and the
 * ticket table as one card per ticket. Restyles the stock markup only; remove the <link> in
 * include/client/header.inc.php to roll it back.
 */

:root {
    --ksit-navy: #164b7e;
    --ksit-navy-deep: #0f375f;
    --ksit-navy-tint: #e8eff7;
    --ksit-ink: #1b2633;
    --ksit-ink-2: #46566a;
    --ksit-muted: #5f6f82;
    --ksit-line: #dbe2eb;
    --ksit-ground: #f4f6fa;
    --ksit-panel: #ffffff;
    --ksit-radius: 12px;
    --ksit-shadow: 0 1px 2px rgba(15, 40, 70, 0.06), 0 6px 18px -8px rgba(15, 40, 70, 0.12);
}

body {
    background: var(--ksit-ground);
    color: var(--ksit-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
::selection { background: #cfdff0; }
a { color: var(--ksit-navy); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--ksit-navy);
    outline-offset: 2px;
}

/* ---- Frame ----------------------------------------------------------- */

#container {
    width: auto;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 16px;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}
#header {
    height: auto;
    padding: 14px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}
#header #logo { order: 0; float: none; height: auto; min-height: 44px; display: flex; align-items: center; }
#header #logo .valign-helper { display: none; }
#header #logo img { max-height: 56px; max-width: 260px; }
#header .pull-right { order: 1; float: none; }
#header p {
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--ksit-ink-2);
}
#header p a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ksit-line);
    border-radius: 10px;
    background: var(--ksit-panel);
    color: var(--ksit-navy);
    font-weight: 600;
}
#header p a:hover { background: var(--ksit-navy-tint); text-decoration: none; }
#header p a.flag { min-height: 0; padding: 0; border: 0; background-color: transparent; }
#header p .sep { display: none; }
#header p .ksit-who { margin-right: 4px; color: var(--ksit-ink-2); }

#nav {
    height: auto;
    margin: 0 0 14px;
    padding: 6px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    background: var(--ksit-panel);
    border: 0;
    border-radius: var(--ksit-radius);
    box-shadow: var(--ksit-shadow);
}
#nav li { display: block; flex: none; }
#nav li a {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 0 16px 0 40px;
    border-radius: 9px;
    background-position: 14px 50%;
    color: var(--ksit-ink-2);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}
#nav li a:hover { background-color: var(--ksit-navy-tint); color: var(--ksit-navy-deep); text-decoration: none; }
#nav li a.active { background-color: var(--ksit-navy-tint); color: var(--ksit-navy-deep); font-weight: 700; }

.front-page-button a.button {
    display: flex !important;   /* the template sets display:block inline */
    max-width: none;
    min-height: 52px;
    padding: 0 18px;
    font-size: 16px;
}
#content {
    margin: 0;
    padding: 20px 22px 26px;
    background: var(--ksit-panel);
    border-radius: var(--ksit-radius);
    box-shadow: var(--ksit-shadow);
}
#footer {
    padding: 18px 0 24px;
    color: var(--ksit-muted);
    font-size: 13px;
}
/* KSIT branding only (rollout item 6): the "powered by osTicket" link is hidden */
#footer #poweredBy { display: none; }

/* ---- Controls -------------------------------------------------------- */

input[type=submit], input[type=button], input[type=reset], button, .button, a.button {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
input[type=submit], .button.blue, a.blue.button {
    background: var(--ksit-navy);
    border: 1px solid var(--ksit-navy);
    color: #fff;
    box-shadow: none;
    text-shadow: none;
}
input[type=submit]:hover, .button.blue:hover { background: var(--ksit-navy-deep); }
/* osticket.css paints every input in these forms white ("#clientLogin div input"), which left
   Sign In, Send Email and Email Access Link as white text on white */
#clientLogin input[type=submit], #ticketForm input[type=submit],
#clientLogin div input[type=submit], #ticketForm div input[type=submit] {
    background: var(--ksit-navy);
    border: 1px solid var(--ksit-navy);
    color: #fff;
}
#clientLogin div input[type=submit]:hover, #ticketForm div input[type=submit]:hover { background: var(--ksit-navy-deep); }
.button.green, a.green.button {
    background: var(--ksit-panel);
    border: 1px solid var(--ksit-navy);
    color: var(--ksit-navy);
    box-shadow: none;
    text-shadow: none;
}
.button.green:hover { background: var(--ksit-navy-tint); }
input[type=reset], input[type=button] {
    background: var(--ksit-panel);
    border: 1px solid var(--ksit-line);
    color: var(--ksit-ink);
}
a.button, .button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea {
    min-height: 44px;
    padding: 8px 12px;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ksit-line);
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
}
textarea { min-height: 120px; }

/* Ticket list: full width; one card per ticket on phones (see data-label in include/client/tickets.inc.php) */
#ticketTable { width: 100%; }
#ticketTable td a, #ticketTable th a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Phones ---------------------------------------------------------- */

@media (max-width: 760px) {
    #container { padding: 0 12px; }
    #header { padding: 10px 0; }
    #header #logo img { max-height: 44px; max-width: 200px; }
    #header .pull-right { width: 100%; }
    #header p { justify-content: flex-start; }
    #content { padding: 16px 14px 20px; }

    /* osTicket's fixed-width blocks become fluid */
    #content table, #content form, .main-content, .sidebar, #landing_page #check_status, #clientLogin,
    #ticketForm > table td, .search-form .search, .thread-event .description, #kb-search #query,
    #kb-search #cid, #kb-search #topic-id, #clientLogin div textarea {
        width: auto !important;
        max-width: 100%;
        float: none;
        box-sizing: border-box;
    }
    #reply textarea, #ticketForm textarea { width: 100% !important; }
    #content table[width], #content td[width], #content th[width] { width: auto !important; }
    #content input[type=text], #content input[type=email], #content input[type=password],
    #content input[type=tel], #content select, #content textarea { width: 100%; }
    .sidebar .front-page-button { width: 100%; }

    /* Side-by-side layouts stack: label/value tables (profile, ticket info) and the
       two-column "check status" page */
    #content table:not(#ticketTable), #content table:not(#ticketTable) > tbody,
    #content table:not(#ticketTable) > tbody > tr, #content table:not(#ticketTable) > tbody > tr > td,
    #content table:not(#ticketTable) > tbody > tr > th,
    #content div[style*="display:table"], #content div[style*="display: table"] {
        display: block !important;
        width: auto !important;
    }
    #content table:not(#ticketTable) > tbody > tr > th { text-align: left; padding-bottom: 0; }
    #clientLogin .login-box, #clientLogin .instructions {
        display: block;
        width: auto;
        padding: 0;
        margin: 0 0 12px;
        border: 0;
    }

    #ticketTable, #ticketTable tbody, #ticketTable tr, #ticketTable td { display: block; width: auto !important; }
    #ticketTable thead { display: none; }
    #ticketTable caption { display: block; text-align: left; padding: 0 0 8px; }
    #ticketTable tr {
        margin: 0 0 10px;
        padding: 6px 14px;
        border: 1px solid var(--ksit-line);
        border-radius: 10px;
        background: var(--ksit-panel);
    }
    #ticketTable td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 4px 0;
        border: 0;
        text-align: right;
    }
    #ticketTable td::before {
        content: attr(data-label);
        flex: none;
        color: var(--ksit-muted);
        font-size: 13px;
        text-align: left;
    }
    #ticketTable td .truncate, #ticketTable td div[style] { max-width: none !important; max-height: none !important; white-space: normal; }
}