/* =====================================================================
   HTA Group Support — client portal theme  (hta-theme.css)
   Built on osTicket v1.18.4 stock client markup.
   Loaded after css/hta-tokens.css from include/client/header.inc.php so it
   wins cleanly. All values reference var(--hui-*) tokens — to restyle,
   edit css/hta-tokens.css, not this file.

   Two-tier button language (shared with the staff panel):
     - app controls (.button / submits)  -> flat, --hui-radius (6px)
     - landing hero CTAs (.hta-btn)       -> expressive, marketing-only
   ===================================================================== */

/* ---------- Background: branded gradient site-wide ---------- */
html{ background:var(--hui-navy) !important; }
body{ background:transparent !important; color:var(--hui-ink); font-family:var(--hui-font-stack) !important; }
/* Brand gradient as a fixed, GPU-composited layer behind everything. Avoids the
   whole-page repaint/shimmer that a scrolling (or fixed-attachment) background
   can cause on hover-triggered redraws. */
body::before{ content:''; position:fixed; inset:0; z-index:-1; background:var(--hui-gradient); pointer-events:none; }

/* ---------- Shell ---------- */
#container{ width:auto !important; max-width:1080px !important; margin:0 auto !important; background:transparent !important; box-shadow:none !important; }

/* ---------- Header ---------- */
#header{ height:auto !important; padding:20px 26px 6px !important; background:transparent !important; box-shadow:none !important; position:relative; }
#header .pull-right{ padding-top:14px !important; }
#header .pull-right p{ width:auto !important; }
#header .pull-right, #header .pull-right a, #header .pull-right p{ color:#fff !important; }
#header .pull-right a{ text-decoration:none; border:0 !important; }
#header .pull-right a:hover{ text-decoration:underline; }
/* Sign In shown as a pill button */
#header .pull-right a[href*="login.php"]{ display:inline-block; background:rgba(0,0,0,.28); border:1.5px solid rgba(255,255,255,.5) !important; padding:8px 18px; border-radius:var(--hui-radius-pill); font-weight:var(--hui-fw-primary); }
#header .pull-right a[href*="login.php"]:hover{ background:rgba(0,0,0,.42); text-decoration:none; }
/* Take the top-right account line OUT of flow. It is a floated block with a
   fractional height (~46.2px); entering :hover anywhere triggers a layout
   recalc that re-rounds that fraction by 1px, and the nav's float-clear then
   pushes the whole page up/down 1px. Absolutely positioning it removes it from
   the flow entirely, so its height can never move anything below it. Desktop
   only — touch devices have no hover, so mobile keeps the stock stacked header. */
@media (min-width:768px){
  #header{ position:relative !important; }
  #header .pull-right{ position:absolute !important; top:0 !important; right:0 !important; }
}
#logo{ height:auto !important; display:inline-flex !important; align-items:center; gap:11px; text-decoration:none; border:0 !important; }
#header #logo img{ max-height:42px !important; border-radius:7px; background:#fff; }
#logo .hta-wordmark{ color:#fff; font-weight:800; font-size:18px; letter-spacing:.2px; }

/* ---------- Nav (pills on the gradient) ---------- */
#nav{ margin:6px 26px 0 !important; padding:0 !important; height:auto !important; background:none !important; border:0 !important; box-shadow:none !important; }
#nav li a{ display:inline-block; height:auto !important; line-height:normal !important; padding:9px 16px !important; margin:0 8px 6px 0 !important; border-radius:var(--hui-radius-pill) !important; background:rgba(255,255,255,.12) !important; color:#fff !important; border:1px solid rgba(255,255,255,.38) !important; font-weight:var(--hui-fw-neutral); }
#nav li a.active, #nav li a:hover{ background:#fff !important; color:var(--hui-red) !important; border-color:#fff !important; }

/* ---------- Content: white card by default (forms / KB / tickets) ---------- */
#content{ background:var(--hui-surface) !important; color:var(--hui-ink) !important; margin:14px 26px 0 !important; padding:30px 34px !important; min-height:0 !important; border-radius:var(--hui-radius-card) !important; box-shadow:var(--hui-card-shadow-lg) !important; }
#content h1{ color:var(--hui-ink) !important; font-weight:800; }
/* Landing: dissolve the card into a hero (needs :has — modern browsers) */
/* landing: no card, and hero aligned to the header line (435) via left padding 0 */
#content:has(.hta-landing){ background:transparent !important; box-shadow:none !important; padding:6px 26px 40px 0 !important; }

/* ---------- App controls: buttons (flat, tokenized — matches staff) ---------- */
.button, .button:visited, input[type=submit], button.button,
.green.button, .green.button:visited, .blue.button, .blue.button:visited{
  background:var(--hui-red) !important; background-color:var(--hui-red) !important; color:var(--hui-on-red) !important;
  border:1px solid var(--hui-red) !important; border-radius:var(--hui-radius) !important;
  box-shadow:none !important; text-shadow:none !important; font-weight:var(--hui-fw-primary) !important; padding:9px 18px !important; cursor:pointer;
}
.button:hover, input[type=submit]:hover,
.green.button:hover, .blue.button:hover{ background-color:var(--hui-red-dark) !important; border-color:var(--hui-red-dark) !important; color:var(--hui-on-red) !important; }
/* Reset (and .grey/Cancel) are SECONDARY — neutral, so each form has one red primary.
   input[type=reset] (0,1,1) outranks .button (0,1,0), so this wins even when Reset
   also carries class="button". */
input[type=reset], input[type=button]:not(.primary), .button.grey, .button.gray, a.grey.button,
a.cancel, button.cancel{
  background:var(--hui-surface) !important; background-color:var(--hui-surface) !important; color:var(--hui-ink) !important;
  border:1px solid var(--hui-line) !important; border-radius:var(--hui-radius) !important;
  box-shadow:none !important; text-shadow:none !important; font-weight:var(--hui-fw-neutral) !important; padding:9px 18px !important; cursor:pointer;
}
input[type=reset]:hover, input[type=button]:not(.primary):hover, .button.grey:hover,
a.cancel:hover, button.cancel:hover{
  border-color:var(--hui-red) !important; color:var(--hui-red) !important; background-color:var(--hui-surface) !important;
}

/* ---------- App controls: form inputs (crisp, tokenized — matches staff) ---------- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], input[type=search], input[type=date], input[type=time],
textarea, select{
  font-family:inherit !important; font-size:var(--hui-font-size) !important; color:var(--hui-ink) !important;
  background-color:var(--hui-surface) !important; border:1px solid var(--hui-line) !important; border-radius:var(--hui-radius) !important;
  padding:var(--hui-pad-input) !important; box-shadow:none !important; outline:none !important;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus,
input[type=tel]:focus, input[type=url]:focus, input[type=search]:focus, input[type=date]:focus,
textarea:focus, select:focus{ border-color:var(--hui-red) !important; box-shadow:var(--hui-focus-ring) !important; }
input:disabled, textarea:disabled, select:disabled{ background-color:var(--hui-surface-disabled) !important; color:var(--hui-ink-muted) !important; }
.error input, input.error, div.error input{ border-color:var(--hui-error) !important; box-shadow:var(--hui-error-focus) !important; }
input[type=checkbox], input[type=radio]{ accent-color:var(--hui-red) !important; }

/* ---------- Data tables ---------- */
#ticketTable thead th, table.list thead th, .list > thead th{
  background:var(--hui-surface-2) !important; color:var(--hui-ink-soft) !important; text-transform:uppercase; font-size:12px; letter-spacing:.4px; font-weight:var(--hui-fw-primary) !important;
}
#ticketTable tbody tr:hover, table.list tbody tr:hover{ background:var(--hui-red-tint) !important; }

/* ---------- Footer (legible on gradient) ---------- */
#footer{ color:rgba(255,255,255,.82) !important; padding:22px 26px 40px !important; }
#footer p, #footer a{ color:rgba(255,255,255,.82) !important; }
#footer a:hover{ color:#fff !important; }
#footer #poweredBy{ opacity:.8; }

/* =====================================================================
   LANDING HERO  (markup emitted by index.php as .hta-landing)
   ===================================================================== */
.hta-landing{ color:#fff; }
.hta-hero{ max-width:660px; padding:8px 0 4px; }
.hta-eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:1.4px; color:#fff; background:rgba(255,255,255,.16); padding:6px 13px; border-radius:var(--hui-radius-pill); }
#content .hta-hero h1{ color:#fff !important; font-size:42px !important; line-height:1.1 !important; letter-spacing:-.6px !important; margin:16px 0 14px !important; font-weight:800; }
.hta-hero p{ color:var(--hui-on-dark); font-size:17px; line-height:1.6; margin:0 0 26px; }
.hta-cta{ display:flex; gap:12px; flex-wrap:wrap; }
/* border-box + integer line-height => deterministic integer height. A fractional
   height (content-box + 1.5px border + fractional line-height) re-rounds on any
   hover relayout and shifts everything below by 1px. Keep hover to paint-only
   props (background, box-shadow, color) so it can never reflow. */
.hta-cta a.hta-btn{ display:inline-flex; align-items:center; gap:7px; box-sizing:border-box !important; border:none; border-radius:11px; padding:14px 22px; line-height:20px; font-size:15px; font-weight:800; text-decoration:none; transition:background-color .15s ease, box-shadow .15s ease, color .15s ease !important; }
.hta-cta a.hta-btn-primary{ background:var(--hui-red) !important; color:#fff !important; box-shadow:0 10px 24px rgba(176,38,38,.35) !important; }
.hta-cta a.hta-btn-primary:hover{ background:var(--hui-red-dark) !important; color:#fff !important; }
.hta-cta a.hta-btn-ghost{ background:rgba(255,255,255,.12) !important; color:#fff !important; border:none !important; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55) !important; }
.hta-cta a.hta-btn-ghost:hover{ background:rgba(255,255,255,.22) !important; color:#fff !important; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85) !important; }

.hta-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:34px 0 0; }
#content .hta-cards a.hta-card{ display:block !important; background:var(--hui-surface) !important; color:var(--hui-ink) !important; border:none !important; border-top:3px solid var(--hui-red) !important; border-radius:var(--hui-radius-card) !important; padding:22px !important; text-decoration:none !important; box-shadow:var(--hui-card-shadow) !important; transition:transform .18s, box-shadow .18s; }
#content .hta-cards a.hta-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(15,20,32,.28) !important; }
.hta-card .ic{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--hui-red-wash); color:var(--hui-red); font-size:20px; margin-bottom:12px; }
.hta-card h3{ margin:0 0 6px; font-size:17px; color:var(--hui-ink); font-weight:800; }
.hta-card p{ margin:0 0 12px; color:var(--hui-ink-soft); font-size:14px; line-height:1.55; }
.hta-card .go{ color:var(--hui-red); font-weight:800; font-size:14px; }

.hta-info{ display:flex; gap:18px; flex-wrap:wrap; margin:26px 0 0; }
.hta-info > div{ flex:1; min-width:240px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:18px 20px; font-size:14.5px; color:var(--hui-on-dark); line-height:1.6; }
.hta-info b{ display:block; color:#fff; font-size:12px; letter-spacing:.6px; text-transform:uppercase; margin-bottom:6px; }

/* Featured KB block on landing (stock markup) */
.hta-landing + div .featured-category, #landing_page .featured-category{ color:#fff; }

/* ---------- Forms readability on the white card ---------- */
.main-content{ width:auto !important; }
#clientLogin{ background:var(--hui-surface-3) !important; border:1px solid var(--hui-line-soft) !important; box-shadow:none !important; border-radius:12px !important; }
.login-box{ box-shadow:none !important; border-right:1px solid var(--hui-line-soft); }
.thread-body{ background:transparent !important; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  #content{ margin:12px 14px 0 !important; padding:22px 20px !important; }
  #header{ padding:16px 16px 4px !important; }
  #nav{ margin:6px 16px 0 !important; }
  .hta-cards{ grid-template-columns:1fr; }
  #content .hta-hero h1{ font-size:32px !important; }
  #ticketForm td textarea, #clientLogin td textarea, #ticketForm div textarea, #clientLogin div textarea{ width:100% !important; }
}

/* =====================================================================
   LANDING two-tone: gradient hero BAND over a white page (matches mock)
   Cards straddle the band edge; info panels + footer sit on white.
   ===================================================================== */
html:has(.hta-landing){ background:#fff !important; }
/* Paint the hero band on its OWN GPU-composited layer instead of the scrolling
   html root. A root-painted gradient gets fully repainted whenever a translucent
   element above it (Sign In, the hero CTAs) changes on hover, which renders as a
   subpixel vertical jitter of the whole page. Isolating it here stops that. */
body:has(.hta-landing)::before{
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  bottom:auto !important; height:600px !important;
  background:var(--hui-gradient) !important; transform:translateZ(0); will-change:transform;
}
body:has(.hta-landing) .hta-info > div{ background:var(--hui-surface-3) !important; border:1px solid #e6e9ef !important; color:var(--hui-ink) !important; }
body:has(.hta-landing) .hta-info b{ color:var(--hui-ink) !important; }
body:has(.hta-landing) #footer, body:has(.hta-landing) #footer p, body:has(.hta-landing) #footer a{ color:var(--hui-ink-soft) !important; }
body:has(.hta-landing) #footer a:hover{ color:var(--hui-red) !important; }
#nav li a.kb{ display:none !important; }
@media (max-width:860px){ html:has(.hta-landing){ background-size:100% 520px !important; } }

/* =====================================================================
   EXTENDED COMPONENT COVERAGE  (pass 2) — client portal
   Mirrors the staff extended coverage: the alternate .btn button, tabs,
   dialogs, tooltips, status labels, message bars, and link accent.
   ===================================================================== */

/* --- Alternate button class (.btn) used by search/utility controls --- */
.btn{ background:var(--hui-red) !important; background-image:none !important; color:var(--hui-on-red) !important;
  border:1px solid var(--hui-red) !important; border-radius:var(--hui-radius) !important;
  box-shadow:none !important; text-shadow:none !important; font-weight:var(--hui-fw-primary) !important; padding:8px 16px !important; }
.btn:hover{ background-color:var(--hui-red-dark) !important; }
.btn_sm{ background:var(--hui-red) !important; background-image:none !important; border:1px solid var(--hui-red) !important; color:#fff !important; border-radius:var(--hui-radius) !important; }

/* --- Tabs --- */
ul.tabs li.active{ border-top-color:var(--hui-red) !important; }
ul.tabs li.active a{ color:var(--hui-red) !important; }

/* --- Status labels / pills --- */
.label{ border-radius:var(--hui-radius) !important; text-shadow:none !important; }

/* --- Tooltips --- */
.tip_content{ border:1px solid var(--hui-line) !important; border-radius:var(--hui-radius) !important; box-shadow:var(--hui-card-shadow) !important; }
.tip_content .links a{ color:var(--hui-red) !important; }

/* --- Dialogs / popups (e.g. advanced search) --- */
.dialog{ border:1px solid var(--hui-line) !important; border-radius:var(--hui-radius-card) !important; box-shadow:var(--hui-card-shadow-lg) !important; }
.dialog h3{ color:var(--hui-ink) !important; }
.dialog a{ color:var(--hui-red) !important; }
.dialog a.close{ color:var(--hui-ink-soft) !important; }
.dialog input[type=text], .dialog input[type=email], .dialog input[type=password],
.dialog input[type=search], .dialog textarea, .dialog select{
  border:1px solid var(--hui-line) !important; border-radius:var(--hui-radius) !important; padding:var(--hui-pad-input) !important;
  box-shadow:none !important; color:var(--hui-ink) !important; background:var(--hui-surface) !important;
}
.dialog input:focus, .dialog textarea:focus, .dialog select:focus{ border-color:var(--hui-red) !important; box-shadow:var(--hui-focus-ring) !important; outline:none !important; }
.dialog .button.red, .dialog .button.primary, .dialog input[type=submit], .dialog button[type=submit]{
  background:var(--hui-red) !important; color:var(--hui-on-red) !important; border:1px solid var(--hui-red) !important;
  border-radius:var(--hui-radius) !important; box-shadow:none !important; background-image:none !important; font-weight:var(--hui-fw-primary) !important;
}
.dialog .button:not(.red):not(.primary), .dialog input[type=reset]{
  background:var(--hui-surface) !important; color:var(--hui-ink) !important; border:1px solid var(--hui-line) !important;
  border-radius:var(--hui-radius) !important; box-shadow:none !important; background-image:none !important;
}

/* --- Message bars: consistent rounded --- */
#msg_error, #msg_notice, #msg_warning, .error-banner, .warning-banner, .notice-banner, .info-banner{ border-radius:var(--hui-radius) !important; }

/* --- Content link hover uses the brand accent (buttons unaffected) --- */
#content a:not(.hta-btn):not(.button):not(.hta-card):hover{ color:var(--hui-red) !important; }

/* =====================================================================
   AZURE-ONLY PORTAL LOGIN  (enhanced)
   The client portal authenticates via Azure SSO only. Hide the local
   username/password form (the left "login-box" column) and turn the SSO
   sign-in into a branded, centred primary button (brand red + Microsoft
   logo), with a subtitle and an understated agent link under a divider.
   This is a visual hide — the local form still exists server-side; to
   disable it outright, edit the login template or osTicket auth settings.
   ===================================================================== */

/* --- Hide the local login column; tidy the panel into a centred card --- */
#content #clientLogin .login-box{ display:none !important; }
#content #clientLogin{ max-width:420px !important; margin:20px auto 0 !important; }
#content #clientLogin > div{ display:block !important; text-align:center !important; padding:26px 16px 30px !important; }
#content #clientLogin > div > div{ display:block !important; width:auto !important; }
#content #clientLogin .external-auth{ display:block !important; border-left:0 !important; max-width:330px; margin:0 auto !important; }

/* --- Login-only copy: drop the "register for an account" line, add a
       subtitle, and centre the heading + bottom hint (scoped via :has). --- */
#content:has(#clientLogin) h1{ text-align:center !important; margin-bottom:4px !important; }
#content:has(#clientLogin) h1 + p{ display:none !important; }
#content:has(#clientLogin) h1::after{
  content:"Use your HTA Microsoft account to continue."; display:block;
  font-size:14px; font-weight:400; color:var(--hui-ink-soft); margin-top:8px;
}
#content:has(#clientLogin) > p:last-of-type{ text-align:center !important; }

/* Hide the redundant top-right "Sign In" button on the login page itself. */
#container:has(#clientLogin) #header .pull-right.flush-right{ display:none !important; }

/* --- Azure button -> branded red primary with the Microsoft logo --- */
#content #clientLogin .external-sign-in{ display:block !important; width:100% !important; max-width:330px; margin:0 auto !important; text-decoration:none !important; }
#content #clientLogin .external-auth-box{
  display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important;
  background:var(--hui-red) !important; background-image:none !important; color:#fff !important;
  border:0 !important; border-radius:var(--hui-radius) !important; padding:14px 20px !important;
  box-shadow:0 8px 20px rgba(176,38,38,.26) !important; transition:all .15s ease !important;
  min-height:0 !important; white-space:nowrap !important;
}
#content #clientLogin .external-sign-in:hover .external-auth-box{
  background:var(--hui-red-dark) !important; box-shadow:0 12px 26px rgba(176,38,38,.34) !important; transform:translateY(-1px) !important;
}
#content #clientLogin .external-auth-name{ color:#fff !important; font-weight:700 !important; font-size:15px !important; white-space:nowrap !important; }
#content #clientLogin .external-auth-icon{
  width:24px !important; height:24px !important; flex:0 0 auto !important; display:inline-flex !important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Crect x='1' y='1' width='10' height='10' fill='%23f25022'/%3E%3Crect x='12' y='1' width='10' height='10' fill='%237fba00'/%3E%3Crect x='1' y='12' width='10' height='10' fill='%2300a4ef'/%3E%3Crect x='12' y='12' width='10' height='10' fill='%23ffb900'/%3E%3C/svg%3E") center/16px no-repeat !important;
  border-radius:4px !important;
}
#content #clientLogin .external-auth-icon i{ display:none !important; }

/* --- Agent link -> understated, under a divider --- */
#content #clientLogin .external-auth + div{
  max-width:330px; margin:18px auto 0 !important; padding-top:16px !important;
  border-top:1px solid var(--hui-line-soft) !important; font-size:13px !important; color:var(--hui-ink-soft) !important;
}
#content #clientLogin .external-auth + div b{ color:var(--hui-ink-soft) !important; font-weight:600 !important; }
#content #clientLogin .external-auth + div a{ color:var(--hui-red) !important; font-weight:700 !important; text-decoration:none !important; }
#content #clientLogin .external-auth + div a:hover{ text-decoration:underline !important; }

/* =====================================================================
   LANDING HEADER ALIGNMENT
   The header logo + nav pills sit at container +26 (=435) on EVERY page.
   Rather than shift the header on the landing (which made its position
   page-dependent and caused a visible jump when navigating landing -> an
   internal page), we align the landing hero to that same 435 line by
   zeroing the landing #content left padding (see the .hta-landing #content
   rule near the top). Header stays put across all pages -> no jump.
   ===================================================================== */

/* =====================================================================
   SIGNED-IN STATE
   1. Account chip: when logged in, the header account links become a clear
      pill with a person icon so the signed-in state is obvious on every page.
      Scoped to logged-in via :has(logout link); logged-out keeps the Sign In
      pill (rule above).
   2. Login toast: a one-time "Signed in as <name>" confirmation shown right
      after login (injected by include/client/header.inc.php on referrer).
   ===================================================================== */
#header .pull-right p:has(a[href*="logout.php"]){
  display:inline-flex !important; align-items:center; gap:9px;
  background:rgba(0,0,0,.32) !important; border:1px solid rgba(255,255,255,.30) !important;
  border-radius:var(--hui-radius-pill) !important; padding:8px 16px !important; font-weight:var(--hui-fw-neutral);
}
#header .pull-right p:has(a[href*="logout.php"])::before{
  content:''; width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:inline-block;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23161d2b'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") center/14px no-repeat;
}

.hta-login-toast{
  position:fixed; top:18px; left:50%; transform:translate(-50%,-16px); z-index:99999;
  background:var(--hui-surface); color:var(--hui-ink); border:1px solid var(--hui-line); border-left:4px solid #1f9d55;
  border-radius:var(--hui-radius); box-shadow:var(--hui-card-shadow-lg); padding:13px 20px; font-size:14px;
  font-weight:var(--hui-fw-neutral); display:flex; align-items:center; gap:11px; opacity:0;
  transition:transform .35s ease, opacity .35s ease; pointer-events:none;
}
.hta-login-toast.show{ transform:translate(-50%,0); opacity:1; }
.hta-login-toast .ic{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:#1f9d55; color:#fff; font-size:13px; font-weight:800; flex:0 0 auto; }