/*
 * WispTicket – WISP STORE client portal, base layer.
 * Source of truth: docs/design/bozza-portale.src.html (approved draft).
 * Loaded after osTicket's own stylesheets (include/client/header.inc.php).
 * Scope: tokens, fonts, typography, top bar, header/nav, buttons, base form controls,
 * cards, chips, notices, footer, home page, responsive rules.
 * Inner pages (open/view/tickets/login…) are styled in wisp-pages.css.
 * All theme classes are prefixed with `wisp-`.
 */

/* ---------- fonts (self-hosted, SIL OFL: ../fonts/OFL.txt) ---------- */
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(../fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
/* IBM Plex Mono 500 dropped (-15 KB): "font: 500 … var(--mono)" renders with the 400 face (CSS font matching) */

/* ---------- design tokens (copied from the draft :root) ---------- */
:root{
  --ink:#0b1524;--ink-2:#101e33;--ink-3:#16263f;--surface:#f4f7fa;--card:#fff;
  --blue:#0e8ce8;--blue-deep:#0a66b5;--blue-darker:#08528f;--blue-soft:#e8f2fc;
  --signal:#2fe08c;--signal-text:#0f7a49;--amber:#efce34;--amber-text:#8a5a00;
  --orange:#e07a12;--hot:#b85c00;--red:#d14343;--text:#1b2838;--muted:#5b6b7e;
  --line:rgba(11,21,36,.1);--line-solid:#e1e5ea;--topbar-text:#9fb4cc;
  --r:14px;--r-sm:10px;--maxw:1240px;
  --display:"Space Grotesk",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

/* ---------- page shell: neutralise osTicket's fixed 840px box ---------- */
html{overflow-x:hidden}
body.wisp{margin:0;background:var(--surface);color:var(--text);font:15px/1.55 var(--body);overflow-x:hidden;
  min-height:100vh;display:flex;flex-direction:column}
body.wisp *,body.wisp *::before,body.wisp *::after{box-sizing:border-box}
body.wisp #container{flex:1 0 auto;width:auto;max-width:none;margin:0;background:transparent;box-shadow:none;
  display:flex;flex-direction:column}
body.wisp #content{flex:1 0 auto;width:100%;max-width:var(--maxw);margin:0 auto;padding:36px 16px 56px;min-height:0}
body.wisp #content.wisp-content--full{max-width:none;padding:0}
body.wisp img{max-width:100%}

/* typography */
body.wisp,body.wisp input,body.wisp select,body.wisp textarea,body.wisp button{font-family:var(--body);color:var(--text)}
body.wisp h1,body.wisp h2,body.wisp h3{font-family:var(--display);font-weight:700;color:var(--text);letter-spacing:-.005em;line-height:1.2}
body.wisp h1{font-size:1.7rem;margin:6px 0 10px}
body.wisp h2{font-size:1.3rem;margin:4px 0 8px}
body.wisp h3{font-size:1.08rem;margin:8px 0 6px}
body.wisp a{color:var(--blue-deep)}
body.wisp a:hover{color:var(--blue-darker);border-bottom:0;margin-bottom:1px}
body.wisp code,body.wisp .wisp-mono{font-family:var(--mono)}

.wisp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.wisp-tag{font:500 .78rem var(--mono);color:var(--blue-deep);letter-spacing:.02em}
.wisp-tag--dark{color:var(--signal)}
.wisp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 3px rgba(47,224,140,.2);margin-right:7px;vertical-align:1px}
.wisp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- osTicket system bars and page messages (emitted by header.inc.php) ---------- */
body.wisp .error_bar,body.wisp .warning_bar,body.wisp .notice_bar{font-size:.88rem;padding:8px 16px;text-align:center;border:0}
body.wisp .error_bar{background:#fdecec;color:#8f1f1f}
body.wisp .warning_bar{background:#fff8e0;color:var(--amber-text)}
body.wisp .notice_bar{background:var(--blue-soft);color:var(--blue-darker)}
body.wisp #msg_error,body.wisp #msg_notice,body.wisp #msg_warning{height:auto;line-height:1.45;margin:0 0 18px;
  padding:12px 16px;border-radius:var(--r-sm);font-size:.92rem;background-image:none;border:1px solid}
body.wisp #msg_error{background:#fdecec;border-color:#f3c0c0;color:#8f1f1f}
body.wisp #msg_notice{background:#e6f7ee;border-color:#b5e6cc;color:var(--signal-text)}
body.wisp #msg_warning{background:#fff8e0;border-color:#f2df92;color:var(--amber-text)}
.wisp-msgs{max-width:var(--maxw);margin:0 auto;padding:18px 16px 0}
.wisp-msgs:empty{display:none}
.wisp-msgs #msg_error,.wisp-msgs #msg_notice,.wisp-msgs #msg_warning{margin-bottom:0}

/* ---------- top bar ---------- */
.wisp-topbar{background:var(--ink);color:var(--topbar-text);font-size:.78rem;height:34px;line-height:34px;white-space:nowrap;overflow:hidden}
.wisp-topbar .wisp-wrap{display:flex;justify-content:space-between;gap:18px}
.wisp-topbar ul{display:flex;gap:26px;margin:0;padding:0;list-style:none;overflow:hidden}
.wisp-topbar li{margin:0}
.wisp-topbar__right{display:flex;align-items:center;gap:14px;flex-shrink:0}
body.wisp .wisp-topbar a{color:#fff;text-decoration:none}
body.wisp .wisp-topbar a:hover{color:var(--signal)}
.wisp-langs{display:flex;align-items:center;gap:6px}
body.wisp .wisp-langs a.flag{display:inline-block;margin:0;opacity:.75;vertical-align:middle}
body.wisp .wisp-langs a.flag:hover{opacity:1}

/* ---------- header + portal navigation ---------- */
.wisp-header{background:#fff;border-bottom:1px solid var(--line)}
.wisp-header__row{display:flex;align-items:center;gap:24px;min-height:68px}
body.wisp .wisp-logo{display:block;flex-shrink:0;margin:0}
body.wisp .wisp-logo:hover{border:0}
.wisp-logo img{height:42px;width:auto;display:block}
.wisp-logo-sub{font:500 .78rem var(--mono);color:var(--muted);border-left:1px solid var(--line-solid);padding-left:14px;margin-left:-8px;white-space:nowrap}
.wisp-nav{margin-left:auto;display:flex;gap:4px;align-items:center}
body.wisp .wisp-nav a{font:600 .82rem var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--text);
  text-decoration:none;padding:10px 12px;border-radius:var(--r-sm);white-space:nowrap;margin:0}
body.wisp .wisp-nav a:hover{background:var(--blue-soft);color:var(--text)}
body.wisp .wisp-nav a.wisp-on{color:var(--blue-deep);background:var(--blue-soft)}
.wisp-nav__user{font-size:.8rem;color:var(--muted);padding:0 6px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.wisp .wisp-header__cta{margin-left:8px;padding:9px 14px;white-space:nowrap;flex-shrink:0}
.wisp-nav + .wisp-header__cta{margin-left:4px}

/* ---------- buttons ---------- */
body.wisp .wisp-btn{display:inline-flex;align-items:center;gap:8px;font:600 .92rem var(--body);border-radius:var(--r-sm);
  padding:11px 18px;border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.3;margin:0;
  text-transform:none;letter-spacing:0;transition:background-color .15s,border-color .15s}
body.wisp .wisp-btn:hover{border-bottom-width:1px}
body.wisp .wisp-btn--primary,body.wisp a.wisp-btn--primary{background:var(--blue-deep);color:#fff}
body.wisp .wisp-btn--primary:hover{background:var(--blue-darker);color:#fff}
body.wisp .wisp-btn--hot{background:var(--hot);color:#fff}
body.wisp .wisp-btn--hot:hover{background:#9a4d00;color:#fff}
body.wisp .wisp-btn--ghost{background:#fff;color:var(--text);border-color:var(--line-solid)}
body.wisp .wisp-btn--ghost:hover{border-color:var(--blue);color:var(--text)}
body.wisp .wisp-btn--dark{background:var(--ink);color:#fff}
body.wisp .wisp-btn--dark:hover{background:var(--ink-3);color:#fff}
body.wisp .wisp-btn--block{width:100%;justify-content:center}
body.wisp .wisp-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* osTicket's own submit/reset/button inputs, so inner pages are on-brand by default */
body.wisp input[type=submit],body.wisp input[type=button],body.wisp input[type=reset],body.wisp button.button,body.wisp a.button{
  font:600 .92rem var(--body);border-radius:var(--r-sm);padding:10px 18px;border:1px solid var(--line-solid);
  background:#fff;color:var(--text);cursor:pointer;line-height:1.3;height:auto;text-shadow:none;box-shadow:none;max-width:none}
body.wisp input[type=submit]{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
body.wisp input[type=submit]:hover{background:var(--blue-darker);border-color:var(--blue-darker)}
body.wisp input[type=button]:hover,body.wisp input[type=reset]:hover,body.wisp button.button:hover,body.wisp a.button:hover{border-color:var(--blue);color:var(--text)}

/* ---------- base form controls ---------- */
/* upstream theme.css styles `#ticketForm div input` / `#clientLogin div input` with ID specificity:
   restore the base look there (inner-page specifics stay in wisp-pages.css) */
body.wisp #ticketForm div input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]),
body.wisp #clientLogin div input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]),
body.wisp #ticketForm div textarea,body.wisp #clientLogin div textarea{border:1px solid var(--line-solid);background:#fff}
body.wisp #ticketForm div input[type=submit],body.wisp #clientLogin div input[type=submit]{
  background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
body.wisp #ticketForm div input[type=submit]:hover,body.wisp #clientLogin div input[type=submit]:hover{
  background:var(--blue-darker);border-color:var(--blue-darker)}
body.wisp #ticketForm div input[type=button],body.wisp #ticketForm div input[type=reset]{background:#fff;color:var(--text)}
body.wisp input[type=text],body.wisp input[type=email],body.wisp input[type=password],body.wisp input[type=tel],
body.wisp input[type=number],body.wisp input[type=url],body.wisp input[type=search],body.wisp input[type=date],
body.wisp input:not([type]),body.wisp select,body.wisp textarea{
  font:inherit;font-size:.95rem;color:var(--text);background:#fff;border:1px solid var(--line-solid);
  border-radius:var(--r-sm);padding:10px 12px;max-width:100%;line-height:1.35;box-shadow:none}
body.wisp select{padding:9px 10px}
body.wisp textarea{min-height:120px;resize:vertical}
body.wisp input:focus,body.wisp select:focus,body.wisp textarea:focus,body.wisp button:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
body.wisp input[type=checkbox],body.wisp input[type=radio]{accent-color:var(--blue-deep);width:auto}
body.wisp ::placeholder{color:#8a97a6;opacity:1}
body.wisp label{font-size:.9rem}
body.wisp fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}
body.wisp legend{font:700 .98rem var(--display);margin-bottom:10px;padding:0}
.wisp-field{margin-bottom:14px}
.wisp-field label{display:block;font-weight:600;font-size:.86rem;margin-bottom:5px}
.wisp-field label small{font-weight:400;color:var(--muted)}
.wisp-field input,.wisp-field select,.wisp-field textarea{width:100%}
.wisp-hint{font-size:.8rem;color:var(--muted);margin-top:5px}

/* ---------- cards, chips, notices, panels ---------- */
.wisp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.wisp-card h3{font:700 1.08rem var(--display);margin:8px 0 6px}
.wisp-card p{margin:0;color:var(--muted);font-size:.92rem}
body.wisp .wisp-card__more{display:inline-block;margin-top:12px;font-weight:600;font-size:.9rem;text-decoration:none}
.wisp-ico{width:40px;height:40px;border-radius:10px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue-deep)}
.wisp-ico svg{width:22px;height:22px}
.wisp-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.wisp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.wisp-chip{display:inline-flex;align-items:center;gap:6px;font:600 .78rem var(--body);border-radius:999px;padding:5px 11px;
  background:var(--blue-soft);color:var(--blue-deep);white-space:nowrap}
.wisp-chip--open{background:#e6f7ee;color:var(--signal-text)}
.wisp-chip--rma{background:#fff1e0;color:var(--hot)}
.wisp-chip--closed{background:#eef1f4;color:var(--muted)}
.wisp-chip--alert{background:#fdecec;color:#a52a2a}

.wisp-notice{display:flex;gap:14px;align-items:flex-start;background:#fff8e0;border:1px solid #f2df92;border-radius:var(--r);
  padding:16px 18px;margin-top:16px;font-size:.92rem}
.wisp-notice b{color:var(--amber-text)}
.wisp-notice__ico{flex-shrink:0;color:var(--amber-text);line-height:1.4}
.wisp-notice--info{background:var(--blue-soft);border-color:#cfe3f7}
.wisp-notice--info b{color:var(--blue-darker)}

/* ---------- home page ---------- */
.wisp-hero{background:radial-gradient(1200px 400px at 85% -10%,rgba(14,140,232,.28),transparent 60%),linear-gradient(180deg,var(--ink),var(--ink-2));color:#fff}
.wisp-hero .wisp-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;padding-top:48px;padding-bottom:52px;align-items:center}
body.wisp .wisp-hero h1{font:700 2.5rem/1.1 var(--display);margin:10px 0 14px;letter-spacing:-.01em;color:#fff}
.wisp-hero p{color:#c9d6e6;max-width:560px;margin:0 0 24px}
.wisp-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
body.wisp .wisp-hero .wisp-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
body.wisp .wisp-hero .wisp-btn--ghost:hover{border-color:#fff;color:#fff}

.wisp-lookup{background:var(--ink-3);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:22px;min-width:0}
body.wisp .wisp-lookup h2{font:700 1.15rem var(--display);margin:6px 0 4px;color:#fff}
.wisp-lookup p{font-size:.88rem;color:var(--topbar-text);margin:0 0 14px}
body.wisp .wisp-lookup label{display:block;font-size:.8rem;color:#c9d6e6;margin:10px 0 4px}
body.wisp .wisp-lookup input[type=email],body.wisp .wisp-lookup input[type=text]{width:100%;background:var(--ink);
  border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:var(--r-sm);padding:10px 12px;font:inherit}
body.wisp .wisp-lookup input::placeholder{color:#6f8299}
body.wisp .wisp-lookup input.wisp-mono{font-family:var(--mono)}
body.wisp .wisp-lookup input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
body.wisp .wisp-lookup .wisp-btn{width:100%;justify-content:center;margin-top:14px}

.wisp-home-main{padding:36px 0 56px}
.wisp-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wisp-strip > div{padding:18px 20px;border-right:1px solid var(--line);min-width:0}
.wisp-strip > div:last-child{border-right:0}
.wisp-strip b{display:block;font:700 1rem var(--display);overflow-wrap:anywhere}
.wisp-strip span{font-size:.86rem;color:var(--muted)}
body.wisp .wisp-strip a{color:inherit;text-decoration:none}
body.wisp .wisp-strip a:hover{color:var(--blue-deep)}
.wisp-section-h{display:flex;align-items:end;justify-content:space-between;margin:40px 0 14px}
body.wisp .wisp-section-h h2{font:700 1.4rem var(--display);margin:4px 0 0}
.wisp-kb-search{margin-top:16px;display:flex;gap:10px}
body.wisp .wisp-kb-search input[type=text]{flex:1;min-width:0}

/* ---------- footer ---------- */
.wisp-footer{background:var(--ink);color:var(--topbar-text);font-size:.86rem;padding:32px 0;flex-shrink:0}
.wisp-footer .wisp-wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.wisp-footer b{color:#fff;font-family:var(--display)}
body.wisp .wisp-footer a{color:#fff;text-decoration:none}
body.wisp .wisp-footer a:hover{color:var(--signal)}
.wisp-footer__legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:16px;margin-top:8px;font-size:.78rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .wisp-hero .wisp-wrap{grid-template-columns:1fr;gap:28px;padding-top:36px;padding-bottom:40px}
  .wisp-grid3{grid-template-columns:1fr}
  .wisp-strip{grid-template-columns:1fr 1fr}
  .wisp-strip > div:nth-child(2){border-right:0}
  .wisp-strip > div{border-bottom:1px solid var(--line)}
  .wisp-strip > div:nth-last-child(-n+2){border-bottom:0}
  .wisp-logo-sub{display:none}
  .wisp-topbar ul{display:none}
  .wisp-topbar .wisp-wrap{justify-content:flex-end}
  .wisp-logo img{height:32px}
  /* the draft hides text links on mobile; the real portal keeps them on a second row */
  .wisp-header__row{flex-wrap:wrap;gap:0 12px;min-height:0;padding-top:12px}
  .wisp-header__cta{order:2;margin-left:auto}
  body.wisp .wisp-header__cta{font-size:.8rem;padding:8px 10px}
  .wisp-nav{order:3;width:100%;margin:10px 0 0;padding:6px 0;border-top:1px solid var(--line);flex-wrap:wrap;gap:2px}
  body.wisp .wisp-nav a{font-size:.72rem;padding:7px 8px;letter-spacing:.03em}
  .wisp-nav__user{display:none}
  .wisp-footer .wisp-wrap{grid-template-columns:1fr}
  body.wisp .wisp-hero h1{font-size:1.9rem}
  .wisp-section-h{margin-top:32px}
}
@media (max-width:480px){
  body.wisp #content{padding:24px 16px 40px}
  body.wisp #content.wisp-content--full{padding:0}
  .wisp-strip{grid-template-columns:1fr}
  .wisp-strip > div{border-right:0}
  .wisp-strip > div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .wisp-strip > div:last-child{border-bottom:0}
  .wisp-hero__ctas .wisp-btn{flex:1 1 auto;justify-content:center}
  .wisp-notice{padding:14px}
}
@media print{
  .wisp-topbar,.wisp-header,.wisp-footer{display:none}
}

/* ---------- open.php: label of the message editor (include/client/templates/dynamic-form.tmpl.php) ---------- */
body.wisp #ticketForm .wisp-thread-label{font-size:.86rem}
body.wisp #ticketForm .wisp-thread-label > span{display:block;font-weight:600;margin-bottom:5px}

/* ---------- 404.html (static page, loads only this stylesheet) ---------- */
.wisp-404{max-width:720px;margin:24px auto}
.wisp-404 .wisp-lead{margin-bottom:22px}
.wisp-404__actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}

/* ---------- the hidden attribute wins over the theme's display rules (e.g. .wisp-btn{display:inline-flex}) ---------- */
body.wisp [hidden]{display:none!important}