/* ============================================================
   Cre8work Helpdesk client theme - v3
   Loaded AFTER assets/default/css/theme.css via include/client/header.inc.php
   Server path: /var/www/html/osticket/assets/custom/css/cre8work.css
   v3: rebuilt against the actual stock geometry (theme.css pins
   #nav to height:20px and reserves 32px link padding for sprite
   icons; v2 fought that and collapsed the bar).
   ============================================================ */

:root {
    --c8-red: #A71C23;
    --c8-red-dark: #8C171D;
    --c8-red-tint: #F7E9EA;
    --c8-charcoal: #231F20;
    --c8-ink: #212529;
    --c8-grey: #54595F;
    --c8-line: #e0e0e0;
    --c8-bg: #ffffff;
    --c8-bg-soft: #f7f7f8;
    --c8-radius: 2px;
    --c8-font: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---------- Base ---------- */
body {
    font-family: var(--c8-font);
    color: var(--c8-ink);
    background: var(--c8-bg);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .subject { color: var(--c8-charcoal); font-family: var(--c8-font); font-weight: 700; }
#landing_page h1 { font-size: 25px; }
a, .link { color: var(--c8-red); }
a:hover, .link:hover { color: var(--c8-red-dark); }

/* ---------- Header (stock: fixed 71px, logo valign) ---------- */
#header {
    height: 71px;                 /* keep stock height so nothing below shifts */
    padding: 0 20px;
    background: var(--c8-bg);
}
#header #logo img { max-height: 56px; }
#header p { color: var(--c8-grey); }
#header .pull-right a { color: var(--c8-red); font-weight: 500; }

/* ---------- Nav (stock: height 20px bar, 20px inline-block pill links,
     32px left padding reserved for sprite icons, gradient bg image) ---------- */
#nav {
    /* keep stock height/padding model, restyle surfaces only */
    background: var(--c8-charcoal);          /* replaces nav_bg.png gradient */
    border-top: 0;
    box-shadow: none;
    height: 40px;                            /* taller bar, single known value */
    padding: 0 10px;
    margin: 0 20px 22px;
}
#nav li a,
#nav li a.home, #nav li a.kb, #nav li a.new,
#nav li a.status, #nav li a.tickets {
    background: none !important;             /* kill sprite icons AND pill backgrounds */
    height: 40px;                            /* match bar height exactly */
    line-height: 40px;                       /* vertical centering, no padding tricks */
    padding: 0 16px;                         /* icon gutter removed */
    margin-left: 0;
    border-radius: 0;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}
#nav li a:hover { background: rgba(255,255,255,.14) !important; color: #fff; }
#nav li a.active,
#nav li a.active:hover { background: var(--c8-red) !important; color: #fff; }

/* ---------- Buttons (generic) ---------- */
.button, .button:visited,
input[type="submit"],
#clientLogin input[type=submit],
#kb-search #searchSubmit {
    background: var(--c8-red);
    color: #fff;
    border: 1px solid var(--c8-red);
    border-radius: var(--c8-radius);
    font-family: var(--c8-font);
    font-weight: 500;
    text-shadow: none;
    box-shadow: none;
    padding: 9px 17px;
    transition: background-color .15s ease-out, border-color .15s ease-out;
    cursor: pointer;
}
.button:hover, .button:active,
input[type="submit"]:hover {
    background: var(--c8-red-dark);
    border-color: var(--c8-red-dark);
    color: #fff;
}

/* ---------- Landing sidebar: clean card, two clear actions ---------- */
#landing_page .sidebar {
    background: var(--c8-bg-soft);
    border: 1px solid var(--c8-line);
    border-radius: var(--c8-radius);
    padding: 18px;
}
.front-page-button {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
}
.front-page-button .button {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    padding: 14px 12px;
    line-height: 1.3;
}
/* Primary action: Open a New Ticket (stock class: blue) */
.front-page-button .blue.button, .front-page-button .blue.button:visited {
    background: var(--c8-red);
    border: 1px solid var(--c8-red);
    color: #fff;
}
.front-page-button .blue.button:hover { background: var(--c8-red-dark); border-color: var(--c8-red-dark); }
/* Secondary action: Check Ticket Status (stock class: green) */
.front-page-button .green.button, .front-page-button .green.button:visited {
    background: #fff;
    border: 2px solid var(--c8-charcoal);
    color: var(--c8-charcoal);
}
.front-page-button .green.button:hover { background: var(--c8-charcoal); color: #fff; }

/* ---------- Landing content: hide the duplicate embedded logo ---------- */
#landing_page .thread-body img { display: none; }

/* ---------- Forms ---------- */
input, textarea, select {
    font-family: var(--c8-font);
    border: 1px solid var(--c8-line);
    border-radius: var(--c8-radius);
    padding: 8px 10px;
    font-size: 14px;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--c8-red);
    outline-offset: 0;
    border-color: var(--c8-red);
}
label { color: var(--c8-charcoal); font-weight: 500; }
label.required, span.required { color: var(--c8-red); }
.error { color: var(--c8-red); }
.error input, #clientLogin div.error input { border-color: var(--c8-red); }

/* ---------- Notices ---------- */
#msg_notice { border-left: 4px solid #2e7d32; }
#msg_error, .error-banner { border-left: 4px solid var(--c8-red); }

/* ---------- Ticket tables ---------- */
#ticketTable th { background: var(--c8-charcoal); color: #fff; font-weight: 500; }
#ticketTable tr:nth-child(even) td { background: var(--c8-bg-soft); }
#ticketTable td { border-color: var(--c8-line); }

/* ---------- Footer: quiet single line, no vendor credit ---------- */
#footer {
    border-top: 1px solid var(--c8-line);
    color: var(--c8-grey);
    padding: 14px 0;
    margin: 28px 20px 10px;
    font-size: 12px;
}
#footer p, #footer a { color: var(--c8-grey); }
#poweredBy { display: none !important; }

/* ---------- Fluid layout: replace the fixed 840px card ---------- */
body { background: #f3f3f4; }
#container {
    width: auto !important;
    max-width: 1180px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
@media screen and (min-width: 881px) {
    #content { padding: 24px 12px; }
}

/* Stock green buttons (KB search etc) -> brand */
.green.button, .green.button:visited {
    background: var(--c8-red);
    border: 1px solid var(--c8-red);
    color: #fff;
    text-shadow: none;
}
.green.button:hover { background: var(--c8-red-dark); border-color: var(--c8-red-dark); }

/* ---------- Logged-in home (hero, quick actions) ---------- */
#c8-client-hero { padding: 26px 8px 6px; }
#c8-client-hero h1 { font-size: 28px; margin: 0 0 6px; }
.c8-kb-search { display: flex; gap: 10px; max-width: 560px; margin-top: 16px; }
.c8-kb-search input[type=text] { flex: 1; padding: 12px 14px; font-size: 15px; }
.c8-kb-search .c8-btn { padding: 11px 24px; border-width: 1px; cursor: pointer; font-family: var(--c8-font); }

#c8-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 20px 8px 8px;
}
.c8-quick-card {
    display: block;
    border: 1px solid var(--c8-line);
    border-radius: var(--c8-radius);
    background: var(--c8-bg-soft);
    padding: 18px;
    color: var(--c8-ink) !important;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}
.c8-quick-card:hover { border-color: var(--c8-red); background: #fff; }
.c8-quick-card svg { width: 28px; height: 28px; color: var(--c8-red); margin-bottom: 10px; }
.c8-quick-card h3 { font-size: 15px; margin: 0 0 5px; color: var(--c8-charcoal); }
.c8-quick-card p { font-size: 13px; color: var(--c8-grey); margin: 0; line-height: 1.5; }
.c8-quick-primary { background: var(--c8-red); border-color: var(--c8-red); }
.c8-quick-primary svg, .c8-quick-primary h3, .c8-quick-primary p { color: #fff; }
.c8-quick-primary:hover { background: var(--c8-red-dark); border-color: var(--c8-red-dark); }
.c8-badge {
    display: inline-block;
    background: var(--c8-red);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    margin-left: 6px;
    vertical-align: 2px;
}
@media screen and (max-width: 880px) {
    #c8-quick { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
    #c8-quick { grid-template-columns: 1fr; }
    .c8-kb-search { flex-direction: column; }
}

/* ---------- Guest landing (hero, features, steps) ---------- */
.c8-guest { padding-top: 8px; }
#c8-hero { padding: 34px 8px 30px; }
.c8-hero-text { max-width: 660px; }
.c8-hero-kicker {
    color: var(--c8-red);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
#c8-hero h1 {
    font-size: 34px;
    line-height: 1.18;
    margin: 0 0 14px;
    color: var(--c8-charcoal);
}
.c8-hero-sub {
    font-size: 16px;
    color: var(--c8-grey);
    line-height: 1.6;
    margin: 0 0 24px;
}
.c8-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.c8-btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: var(--c8-radius);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
.c8-btn-primary { background: var(--c8-red); border: 2px solid var(--c8-red); color: #fff !important; }
.c8-btn-primary:hover { background: var(--c8-red-dark); border-color: var(--c8-red-dark); color: #fff !important; }
.c8-btn-outline { background: #fff; border: 2px solid var(--c8-charcoal); color: var(--c8-charcoal) !important; }
.c8-btn-outline:hover { background: var(--c8-charcoal); color: #fff !important; }
.c8-hero-signin { margin-top: 18px; color: var(--c8-grey); font-size: 14px; }
.c8-hero-signin a { font-weight: 500; }

#c8-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 8px;
    border-top: 1px solid var(--c8-line);
    padding-top: 26px;
}
.c8-feature svg { width: 30px; height: 30px; color: var(--c8-red); margin-bottom: 10px; }
.c8-feature h3 { font-size: 15px; margin: 0 0 6px; color: var(--c8-charcoal); }
.c8-feature p { font-size: 13px; color: var(--c8-grey); line-height: 1.55; margin: 0; }

#c8-steps { padding: 30px 8px 6px; }
#c8-steps h2 { font-size: 20px; margin-bottom: 18px; }
.c8-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.c8-step { background: var(--c8-bg-soft); border: 1px solid var(--c8-line); border-radius: var(--c8-radius); padding: 18px; }
.c8-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--c8-red); color: #fff; font-weight: 700; font-size: 15px;
    margin-bottom: 10px;
}
.c8-step h4 { margin: 0 0 6px; font-size: 15px; color: var(--c8-charcoal); }
.c8-step p { margin: 0; font-size: 13px; color: var(--c8-grey); line-height: 1.55; }

.c8-policy { padding: 22px 8px 4px; color: var(--c8-grey); font-size: 12px; }

@media screen and (max-width: 880px) {
    #c8-features { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
    #c8-hero h1 { font-size: 26px; }
    #c8-features { grid-template-columns: 1fr; }
    .c8-steps-row { grid-template-columns: 1fr; }
    .c8-btn { display: block; width: 100%; box-sizing: border-box; }
    .c8-hero-actions { display: block; }
    .c8-hero-actions .c8-btn + .c8-btn { margin-top: 10px; }
}

/* ---------- News section (custom module) ---------- */
#c8-news { margin-top: 32px; }
#c8-news h1 { font-size: 20px; margin-bottom: 12px; }
.c8-news-row { display: flex; gap: 16px; flex-wrap: wrap; }
.c8-news-card {
    flex: 1 1 220px;
    border: 1px solid var(--c8-line);
    border-radius: var(--c8-radius);
    background: var(--c8-bg-soft);
    padding: 14px 16px;
}
.c8-news-card h3 { margin: 6px 0; font-size: 15px; line-height: 1.35; }
.c8-news-card p { font-size: 13px; color: var(--c8-grey); margin: 0; }
.c8-news-date { color: var(--c8-grey); font-size: 12px; }
.c8-news-all { font-weight: 500; }
#c8-news-page h1 { margin-bottom: 4px; }
.c8-news-item { border-bottom: 1px solid var(--c8-line); padding: 16px 0; }
.c8-news-item h3 { margin: 0 0 4px; font-size: 16px; }
.c8-news-teaser { color: var(--c8-grey); margin: 6px 0 0; }
.c8-news-body { margin-top: 16px; max-width: 780px; }
.c8-news-body img { max-width: 100%; height: auto; }
.c8-news-back { margin-bottom: 10px; }
.c8-news-back a { color: var(--c8-grey); }

/* ---------- Responsive ---------- */
@media screen and (max-width: 880px) {
    /* stock #container is a fixed 840px card; let it fill small screens */
    #container { width: auto !important; box-shadow: none; }
    .main-content { width: auto !important; float: none; }
}
@media screen and (max-width: 768px) {
    #header { height: auto; padding: 10px 20px; text-align: center; }
    #header #logo img { max-height: 42px; }
    #header p, #header .pull-right { width: auto !important; float: none; }
    #nav { height: auto; white-space: normal; }
    #nav li a, #nav li a.home, #nav li a.kb, #nav li a.new,
    #nav li a.status, #nav li a.tickets {
        padding: 0 10px; font-size: 13px;
        height: 36px; line-height: 36px;
    }
    #landing_page .sidebar { float: none !important; width: auto; margin-bottom: 16px; }
    #content { overflow-x: auto; }
    #ticketForm > table, #ticketTable { min-width: 560px; }
    input, textarea, select { font-size: 16px; } /* prevents iOS zoom-on-focus */
}
@media screen and (max-width: 480px) {
    body { font-size: 15px; }
    .button, input[type="submit"] { display: block; width: 100%; text-align: center; box-sizing: border-box; }
}

/* ===== Customer group reporting suite (reports.php) - v7 ===== */
#c8-reports-portal{max-width:1180px;margin:0 auto;padding:8px 0 40px;font-family:Roboto,Arial,sans-serif;color:#231F20}
#c8-reports-portal h1{margin:2px 0 6px;font-size:28px}
#c8-reports-portal h2{margin:0 0 6px;font-size:20px;display:flex;align-items:center;gap:10px}
#c8-reports-portal h3{margin:14px 0 6px;font-size:15px;color:#54595F;text-transform:uppercase;letter-spacing:.4px}
.c8-rep-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:3px solid #A71C23;padding-bottom:12px;margin-bottom:14px}
.c8-rep-sub,.c8-rep-muted{color:#6b7076;font-size:13px}
.c8-rep-filter{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;background:#f7f7f8;border:1px solid #e3e5e8;border-radius:6px;padding:12px 14px;margin-bottom:16px}
.c8-rep-filter label{display:flex;flex-direction:column;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#54595F;gap:4px}
.c8-rep-filter select,.c8-rep-filter input{font:inherit;font-size:14px;padding:6px 8px;border:1px solid #cfd2d6;border-radius:4px;background:#fff;color:#231F20;min-width:170px}
.c8-rep-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.c8-rep-kpi{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e5e8;border-top:3px solid #A71C23;border-radius:6px;padding:10px 12px;text-decoration:none;color:#231F20}
.c8-rep-kpi:hover{border-color:#A71C23;text-decoration:none}
.c8-rep-kpi-n{font-size:26px;font-weight:700;line-height:1.1}
.c8-rep-kpi-l{font-size:12px;font-weight:500;margin-top:4px}
.c8-rep-kpi-s{font-size:11px;color:#6b7076}
.c8-rep-nav{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 18px;position:sticky;top:0;background:#fff;padding:6px 0;z-index:2;border-bottom:1px solid #e3e5e8}
.c8-rep-nav a{font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:6px 10px;border-radius:4px;color:#54595F;text-decoration:none;border:1px solid transparent}
.c8-rep-nav a:hover{border-color:#A71C23;color:#A71C23}
.c8-rep-section{margin:0 0 28px;padding-top:6px}
.c8-rep-count{display:inline-block;min-width:22px;text-align:center;background:#231F20;color:#fff;border-radius:11px;font-size:12px;padding:2px 8px}
.c8-rep-tablewrap{overflow-x:auto;border:1px solid #e3e5e8;border-radius:6px}
.c8-rep-table{width:100%;border-collapse:collapse;font-size:13px}
.c8-rep-table th{background:#231F20;color:#fff;text-align:left;padding:8px 10px;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.c8-rep-table td{padding:7px 10px;border-top:1px solid #eceef0;vertical-align:top}
.c8-rep-table tbody tr:nth-child(even) td{background:#fafafa}
.c8-rep-table tr.c8-rep-overdue td:first-child{box-shadow:inset 3px 0 0 #A71C23}
.c8-rep-doc{display:inline-block;background:#A71C23;color:#fff!important;font-size:11px;padding:3px 9px;border-radius:3px;text-decoration:none;white-space:nowrap}
.c8-rep-doc:hover{background:#8e161c}
.c8-rep-empty{color:#6b7076;font-style:italic;padding:8px 2px}
.c8-rep-note{background:#fff7e6;border:1px solid #f1d9a5;color:#6a4b00;border-radius:6px;padding:8px 12px;font-size:13px}
.c8-rep-warnbadge{background:#fff7e6;color:#6a4b00;border:1px solid #f1d9a5}
.c8-rep-open{background:#A71C23;color:#fff}
.c8-rep-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c8-rep-foot{margin-top:24px;padding-top:12px;border-top:1px solid #e3e5e8;color:#6b7076;font-size:12px}
.c8-rep-actions .c8-btn{white-space:nowrap}
@media (max-width:760px){.c8-rep-cols{grid-template-columns:1fr}.c8-rep-filter select,.c8-rep-filter input{min-width:130px}}
/* report type switcher + dual export buttons (v8) */
.c8-rep-types{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.c8-rep-types a{padding:7px 13px;border:1px solid #cfd2d6;border-radius:4px;color:#231F20;text-decoration:none;font-size:13px}
.c8-rep-types a:hover{border-color:#A71C23;color:#A71C23;text-decoration:none}
.c8-rep-types a.active{background:#A71C23;border-color:#A71C23;color:#fff}
.c8-rep-actions{display:flex;gap:8px;flex-wrap:wrap}