/*
 * WispTicket – WISP STORE client portal, inner pages.
 * Source of truth: docs/design/bozza-portale.src.html (approved draft).
 * Loaded after osTicket's CSS and wisp-base.css: uses the base tokens, buttons, controls, cards and chips;
 * here only page-specific layout for open, ticket view, ticket list, login/access link, registration,
 * profile, password reset and ticket edit pages.
 * Template overlays used: include/client/open.inc.php, include/client/view.inc.php (see theme/OVERLAY-pages.txt).
 */

/* ---------- shared: page titles, generic notices, errors ---------- */
body.wisp #content > h1{font-size:1.7rem;margin:6px 0 6px}
body.wisp #content > h1 + p{color:var(--muted);margin:0 0 20px;max-width:760px}
body.wisp #content hr{border:0;border-top:1px solid var(--line);margin:18px 0}
body.wisp #msg_info{position:relative;display:block;background:var(--blue-soft);border:1px solid #cfe3f7;color:var(--text);
  border-radius:var(--r-sm);padding:12px 16px 12px 50px;margin:0 0 18px;font-size:.92rem;line-height:1.5}
body.wisp #msg_info > i{position:absolute;left:16px;top:13px;margin:0;float:none;color:var(--blue-deep);font-size:1.4rem}
body.wisp #msg_info a{text-decoration:none!important;font-weight:600}
body.wisp .warning-banner{height:auto;line-height:1.45;margin:12px 0 0;padding:10px 14px;border-radius:var(--r-sm);
  background:#fff8e0;background-image:none;border:1px solid #f2df92;color:var(--amber-text);font-size:.88rem}
body.wisp #content .error,body.wisp #content font.error{color:var(--red);font-size:.82rem}
body.wisp #content div.error{margin-top:4px}
body.wisp #content .required{font-weight:600}
body.wisp #content em{color:var(--muted)}
body.wisp #content table{max-width:100%}
.wisp-lead{color:var(--muted);margin:0 0 20px}

/* draft action bar: right-aligned buttons over a hairline */
body.wisp .wisp-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-end;
  border-top:1px solid var(--line);padding-top:18px;margin:18px 0 0;text-align:right}
body.wisp .wisp-actions .wisp-hint{margin:0 auto 0 0;font-size:.85rem}

/* generic two-column osTicket form tables (registration, profile, ticket edit, help-topic forms) */
body.wisp #content form > table,body.wisp #content form > table > tbody{width:100%}
body.wisp #content table.padded td,body.wisp #content form[action="tickets.php"] > table td{padding:6px 12px 6px 0;vertical-align:middle}
body.wisp #content form > table .form-header,body.wisp #content form > table td > div > h3{margin:0}
body.wisp #content form > table h3{font-size:1.02rem;margin:8px 0 4px}
body.wisp #content form > table td > div > hr,body.wisp #content form > table td > hr{margin:14px 0 10px}

/* forms that are plain osTicket tables become a white panel */
body.wisp #content form[action="account.php"],body.wisp #content form[action="profile.php"],
body.wisp #content form[action="tickets.php"][method="post"]:not(#reply){background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:26px;margin-top:8px}
body.wisp #content form[action="account.php"] > hr,body.wisp #content form[action="profile.php"] > hr,
body.wisp #content form[action="tickets.php"] > hr{display:none}
body.wisp #content form[action="account.php"] > p:last-of-type,body.wisp #content form[action="profile.php"] > p:last-of-type,
body.wisp #content form[action="tickets.php"][method="post"]:not(#reply) > p:last-of-type{display:flex;flex-wrap:wrap;gap:12px;
  justify-content:flex-end;border-top:1px solid var(--line);padding-top:18px;margin:18px 0 0;text-align:right!important}
body.wisp #content form[action="account.php"] input[type=text],body.wisp #content form[action="account.php"] input[type=email],
body.wisp #content form[action="account.php"] input[type=password],body.wisp #content form[action="account.php"] select,
body.wisp #content form[action="profile.php"] input[type=text],body.wisp #content form[action="profile.php"] input[type=email],
body.wisp #content form[action="profile.php"] input[type=password],body.wisp #content form[action="profile.php"] select,
body.wisp #content form[action="tickets.php"] > table input[type=text],body.wisp #content form[action="tickets.php"] > table select{width:100%;max-width:420px}

/* ---------- open a ticket (open.inc.php overlay) ---------- */
.wisp-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
body.wisp .wisp-open h1{font-size:1.7rem;margin:6px 0 4px}
.wisp-side .wisp-card{margin-bottom:14px}
.wisp-side ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:.88rem}
.wisp-side li{margin-bottom:6px}

/* osTicket renders the forms as a table: turn rows into stacked blocks */
body.wisp #ticketForm > table{display:block;width:100%!important;table-layout:auto}
body.wisp #ticketForm > table > tbody{display:block}
body.wisp #ticketForm > table > tbody > tr{display:block}
body.wisp #ticketForm > table > tbody > tr > td{display:block;width:auto!important;padding:0 0 14px!important}
body.wisp #ticketForm > table > tbody > tr > td[colspan]:empty,
body.wisp #ticketForm > table > tbody > tr:last-child > td[colspan="2"]:not(:has(*)){display:none}
/* first block (contact data for guests): two columns like the draft "I Suoi dati" */
body.wisp #ticketForm > table > tbody:first-child{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
body.wisp #ticketForm > table > tbody:first-child > tr:first-child{grid-column:1/-1}
body.wisp #ticketForm > table > tbody:first-child > tr:has(textarea){grid-column:1/-1}
/* section headers = draft legends */
body.wisp #ticketForm td > hr{display:none}
body.wisp #ticketForm .form-header{margin:6px 0 4px!important}
body.wisp #ticketForm .form-header h3,body.wisp #ticketForm .form-header > b{display:block;font:700 .98rem var(--display);margin:0}
body.wisp #ticketForm .form-header > div{color:var(--muted);font-size:.86rem;margin-top:2px}
body.wisp #ticketForm .form-header > div:empty{display:none}
body.wisp #ticketForm tbody + tbody > tr:first-child > td{border-top:1px solid var(--line);padding-top:18px!important}
/* labels and controls */
body.wisp #ticketForm label{display:block;font-size:.86rem;font-weight:400}
body.wisp #ticketForm label > span:first-child{display:block;font-weight:600;margin-bottom:5px}
body.wisp #ticketForm label > br{display:none}
body.wisp #ticketForm label em{display:block!important;font-size:.8rem;margin:-2px 0 5px}
body.wisp #ticketForm input[type=text],body.wisp #ticketForm input[type=email],body.wisp #ticketForm input[type=tel],
body.wisp #ticketForm input[type=number],body.wisp #ticketForm input[type=password],body.wisp #ticketForm input[type=date],
body.wisp #ticketForm select,body.wisp #ticketForm textarea{width:100%;max-width:100%}
body.wisp #ticketForm input[type=tel]{width:calc(100% - 118px)}
body.wisp #ticketForm input[name$="-ext"]{width:70px!important;margin-left:4px}
body.wisp #content input[type=text][name$="-ext"]{width:70px!important;max-width:70px}
body.wisp #ticketForm textarea{min-height:150px}
body.wisp #ticketForm #topicId{display:block;max-width:520px}
body.wisp #ticketForm #topicId + .error{display:inline-block;margin-top:4px}
body.wisp #ticketForm input[type=checkbox],body.wisp #ticketForm input[type=radio]{width:auto;margin-right:6px}
/* captcha */
body.wisp #ticketForm .captchaRow td{display:block;padding:0 0 10px!important}
body.wisp #ticketForm .captchaRow td + td{border-top:0!important}
body.wisp #ticketForm .captchaRow td:first-child{font-size:.86rem;padding-bottom:5px!important}
body.wisp #ticketForm .captchaRow .captcha{float:none;display:inline-block;vertical-align:middle;margin:0 10px 6px 0;
  border-radius:6px;overflow:hidden;width:auto;height:auto;background:none}
body.wisp #ticketForm .captchaRow .captcha img{float:none;display:block}
body.wisp #ticketForm #captcha{width:120px;vertical-align:middle;margin-bottom:6px}
body.wisp #ticketForm .captchaRow em{display:block;font-size:.8rem}
body.wisp #ticketForm > hr{display:none}
body.wisp #ticketForm .wisp-actions{margin-top:4px}

/* ---------- attachments drop zone (open, reply) ---------- */
body.wisp .filedrop{margin-top:10px}
body.wisp .filedrop .dropzone{border:1.5px dashed var(--line-solid);border-radius:var(--r-sm);padding:18px;text-align:center;
  color:var(--muted);font-size:.88rem;background:var(--surface)}
body.wisp .filedrop .dropzone i{color:var(--blue-deep);margin-right:4px}
body.wisp .filedrop .dropzone a{color:var(--blue-deep);font-weight:600}
body.wisp .filedrop .files:not(:empty){border:1px solid var(--line-solid);border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:#fff;padding:6px}
body.wisp .filedrop .files:not(:empty) + .dropzone{border-radius:0 0 var(--r-sm) var(--r-sm)}
body.wisp .filedrop .files .file{border-radius:8px;font-size:.85rem}

/* ---------- rich-text editor (Redactor) ---------- */
body.wisp .redactor-box{border:1px solid var(--line-solid);border-radius:var(--r-sm);background:#fff;overflow:hidden;max-width:100%}
body.wisp .redactor-box.redactor-focus,body.wisp .redactor-box:focus-within{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:1px}
body.wisp .redactor-toolbar-wrapper,body.wisp .redactor-toolbar{background:var(--surface);border-bottom:1px solid var(--line-solid);box-shadow:none}
body.wisp .redactor-toolbar a{color:var(--text);border-radius:6px}
body.wisp .redactor-toolbar a:hover{background:var(--blue-soft);color:var(--blue-deep)}
body.wisp .redactor-in,body.wisp .redactor-styles{font:15px/1.55 var(--body);color:var(--text);padding:12px 14px}
body.wisp .redactor-box textarea{border:0;border-radius:0}

/* ---------- ticket view (view.inc.php overlay) ---------- */
.wisp-tk-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-bottom:18px}
.wisp-tk-title{min-width:0;flex:1 1 420px}
.wisp-tk-no{font:500 .95rem var(--mono);color:var(--muted)}
body.wisp #ticketInfo h1{font-size:1.5rem;margin:4px 0 0;padding:0;border:0;overflow-wrap:anywhere}
.wisp-tk-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.wisp .wisp-tk-actions .action-button{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 12px;
  font:600 .82rem var(--body);line-height:1.3;color:var(--text)!important;background:#fff;background-image:none;
  border:1px solid var(--line-solid);border-radius:var(--r-sm);text-decoration:none}
body.wisp .wisp-tk-actions .action-button:hover{border-color:var(--blue);color:var(--blue-deep)!important}
body.wisp .wisp-tk-actions .action-button i{float:none;color:inherit}
body.wisp .wisp-chip.wisp-chip--{background:#eef1f4;color:var(--muted)}

.wisp-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:18px}
.wisp-meta > div{padding:12px 16px;border-right:1px solid var(--line);font-size:.86rem;min-width:0;overflow-wrap:anywhere}
.wisp-meta > div:last-child{border-right:0}
.wisp-meta span{display:block;color:var(--muted);font-size:.76rem;font-family:var(--mono)}
.wisp-meta small{display:block;color:var(--muted);font-size:.8rem}

/* custom data (order number and other ticket fields) */
body.wisp table.custom-data{width:100%;margin:0 0 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  border-collapse:separate;overflow:hidden}
body.wisp table.custom-data td,body.wisp table.custom-data th{padding:9px 16px;font-size:.88rem;border-top:1px solid var(--line);
  overflow-wrap:anywhere}
body.wisp table.custom-data tr:first-child td{border-top:0}
body.wisp table.custom-data .headline{font:700 .98rem var(--display);background:#fff;border-bottom:0}
body.wisp table.custom-data th{width:30%;background:var(--surface);color:var(--muted);font-weight:400}

/* thread: full width of the content column (Valerio, feedback on production: narrow bubbles made quoted shop
   e-mails unreadable). Customer and staff are told apart by colour and left border, not by width/side. */
body.wisp #ticketThread{border:0;display:flex;flex-direction:column;gap:14px;margin-bottom:6px}
body.wisp #ticketThread::before{display:none}
body.wisp #ticketThread > div{display:flex;flex-direction:column;gap:14px}
body.wisp .thread-entry{margin:0;width:100%;max-width:100%;align-self:stretch;background:#fff;border:1px solid var(--line);
  border-left:4px solid #c5ced9;border-radius:var(--r);padding:16px 20px;min-width:0;box-sizing:border-box}
body.wisp .thread-entry.response{background:var(--blue-soft);border-color:#cfe3f7;border-left-color:var(--blue-deep)}
body.wisp .thread-entry.avatar,body.wisp .thread-entry.response.avatar{margin:0}
body.wisp .thread-entry > .avatar{display:none}
body.wisp .thread-entry::before,body.wisp .thread-entry::after{display:none}
body.wisp .thread-entry .header{display:block;padding:0;margin-bottom:10px;border:0;border-radius:0;background:none!important;
  font-size:.82rem;color:var(--muted)}
body.wisp .thread-entry .header::before,body.wisp .thread-entry .header::after{display:none}
body.wisp .thread-entry .header > .pull-right{float:right;margin-left:12px}
body.wisp .thread-entry .header b{color:var(--text)}
body.wisp .thread-entry .header .title{display:none}

/* message body: osTicket's .thread-body holds the sanitised HTML of the entry (redactor or e-mail HTML). Shop fonts
   everywhere: inline font-families of quoted e-mails are neutralised (!important beats inline styles), monospace
   kept for pre/code. */
body.wisp .thread-entry .thread-body{border:0;padding:0;overflow-wrap:anywhere;background:transparent;
  font:15px/1.6 var(--body);color:var(--text);min-width:0}
body.wisp .thread-entry .thread-body > div{background:transparent}
body.wisp .thread-entry .thread-body *:not([class*="icon-"]){font-family:inherit!important}
body.wisp .thread-entry .thread-body :is(pre,code,kbd,samp,tt):not([class*="icon-"]),
body.wisp .thread-entry .thread-body :is(pre,code,kbd,samp,tt) *:not([class*="icon-"]){font-family:var(--mono)!important}
body.wisp .thread-entry .thread-body :is(p,ul,ol,dl){margin:0 0 10px}
body.wisp .thread-entry .thread-body :is(ul,ol){padding-left:22px}
body.wisp .thread-entry .thread-body :is(h1,h2,h3,h4,h5,h6){font-weight:600!important;line-height:1.3!important;
  letter-spacing:0;color:inherit;margin:14px 0 6px;padding:0;border:0}
body.wisp .thread-entry .thread-body h1{font-size:1.3rem!important}
body.wisp .thread-entry .thread-body h2{font-size:1.15rem!important}
body.wisp .thread-entry .thread-body h3{font-size:1.05rem!important}
body.wisp .thread-entry .thread-body :is(h4,h5,h6){font-size:.95rem!important}
body.wisp .thread-entry .thread-body a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px}
body.wisp .thread-entry .thread-body a:hover{color:var(--blue-darker)}
body.wisp .thread-entry .thread-body pre{white-space:pre-wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;margin:0 0 10px;font-size:.85rem;line-height:1.5;max-width:100%;overflow-x:auto}
body.wisp .thread-entry .thread-body code{font-size:.88em}
body.wisp .thread-entry .thread-body hr{border:0;border-top:1px solid var(--line);margin:14px 0}
/* images of quoted e-mails: never wider than the message (width/height attributes become inline styles) */
body.wisp .thread-entry .thread-body img{max-width:100%!important;height:auto!important}
/* product thumbnails in auto-width cells would collapse to a few px (percentage max-width): keep a minimum,
   except 1px spacer images */
body.wisp .thread-entry .thread-body :is(td,th) img:not([style*="width:1px"]):not([width="1"]){min-width:40px}
/* tables of quoted e-mails: fixed widths (width="600" -> style width:600px) released, cells shrink; an outer table
   still wider than the message scrolls inside itself, never the page */
body.wisp .thread-entry .thread-body table{width:auto!important;max-width:100%;min-width:0;height:auto!important}
body.wisp .thread-entry .thread-body table:not(table table){display:block;overflow-x:auto;margin:0 0 10px}
body.wisp .thread-entry .thread-body :is(td,th){width:auto!important;min-width:0;height:auto!important;overflow-wrap:break-word}
/* words in cells stay whole (prices, quantities); long URLs break anywhere instead of widening the table */
body.wisp .thread-entry .thread-body a{word-break:break-all}
/* "Messaggio originale" quotes (Gmail/Outlook/Apple Mail blockquote, inline margins and borders included) */
body.wisp .thread-entry .thread-body blockquote{margin:10px 0!important;padding:2px 0 2px 14px!important;
  border:0!important;border-left:3px solid #c5ced9!important;color:#3d4b5c}
body.wisp .thread-entry.response .thread-body blockquote{border-left-color:#a9c9ea!important}
body.wisp .thread-entry .thread-body :is(.gmail_attr,.gmail_quote > div:first-child){color:var(--muted);font-size:.86rem}
body.wisp .thread-body .attachments{position:static;margin:10px 0 0;padding:0;background:none;border:0;display:flex;flex-wrap:wrap;gap:8px}
body.wisp .thread-body .attachment-info{display:inline-flex;gap:8px;align-items:center;width:auto;max-width:100%;margin:0;
  border:1px solid var(--line-solid);background:#fff;border-radius:8px;padding:6px 10px;font-size:.82rem}
body.wisp .thread-body .attachment-info a{color:var(--text);max-width:260px}
body.wisp .thread-body .attachment-info .filesize{margin:0;color:var(--muted)}
body.wisp .thread-event{margin:0;padding:2px 0;align-self:center;font-size:.8rem;color:var(--muted);text-align:center;max-width:100%}
body.wisp .thread-event .type-icon{background:none;border:0;padding:0 4px;font-size:.9rem}
body.wisp .thread-event .type-icon::after{display:none}
body.wisp .thread-event .description{width:auto;margin:0;padding:0;display:inline}
body.wisp .thread-event img.avatar{display:none}
/* WISP: initials avatars (wispshop plugin, source "wisp.initials"): shown in the bubble next to the author;
   image avatars stay hidden (rule above). Inline styles of .wisp-avatar carry colour and shape. */
body.wisp .thread-entry > .avatar:has(> .wisp-avatar){display:block;float:left;width:auto;height:auto;margin:-3px 10px 0 0}
body.wisp .thread-entry .wisp-avatar{width:30px!important;height:30px!important;min-width:30px!important;
  font-size:.78rem!important;margin:0!important}
body.wisp .thread-event .wisp-avatar{display:none!important}
body.wisp #ticketThread + .clear{padding:0!important}

/* reply form = draft panel */
body.wisp #reply{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px}
body.wisp #reply h2{font-size:1.15rem;margin:0 0 4px;padding:0;border:0}
body.wisp #reply > div > p{margin:0 0 10px;font-size:.88rem}
body.wisp #reply textarea{width:100%!important;min-height:120px}
body.wisp #reply .warning-banner{margin-top:14px}
body.wisp #reply .wisp-actions{margin-top:18px}

/* ---------- ticket list (tickets.inc.php) ---------- */
body.wisp .search.well{margin:0 0 20px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
body.wisp #ticketSearchForm{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
body.wisp #ticketSearchForm input[name=keywords]{flex:1 1 220px;min-width:0;width:auto}
body.wisp #ticketSearchForm .pull-right{float:none;margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:.86rem;color:var(--muted);min-width:0}
body.wisp #ticketSearchForm .pull-right select{max-width:100%;min-width:0}
body.wisp .search.well > div[style] {margin-top:12px!important;font-size:.86rem}
body.wisp .search.well > div[style] a{color:var(--muted)!important}
body.wisp #content > h1:has(.states){display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin:6px 0 14px!important}
body.wisp #content > h1 > a{color:var(--text);text-decoration:none}
body.wisp #content > h1 i.refresh{color:var(--blue-deep);font-size:.9rem}
body.wisp .states{float:none}
body.wisp .states small{font:600 .85rem var(--body);display:flex;align-items:center;gap:8px}
body.wisp .states small > span{display:none}
body.wisp .states i{display:none}
body.wisp .states a.state{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--line-solid);
  background:#fff;color:var(--text);text-decoration:none}
body.wisp .states a.state.active{background:var(--blue-soft);border-color:#cfe3f7;color:var(--blue-deep);font-weight:600}
body.wisp #ticketTable{width:100%!important;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  border-collapse:separate;border-spacing:0}
body.wisp #ticketTable th:first-child{border-top-left-radius:var(--r)}
body.wisp #ticketTable th:last-child{border-top-right-radius:var(--r)}
body.wisp #ticketTable caption{caption-side:top;text-align:left;background:none;border:0;padding:0 0 8px;
  font:500 .8rem var(--mono);color:var(--muted)}
body.wisp #ticketTable th{height:auto;line-height:1.3;background:var(--surface);border:0;border-bottom:1px solid var(--line);
  padding:11px 14px;width:auto;white-space:nowrap}
body.wisp #ticketTable th a{color:var(--muted);font:500 .76rem var(--mono);text-decoration:none}
body.wisp #ticketTable th a i{opacity:.5}
body.wisp #ticketTable td{border:0;border-bottom:1px solid var(--line);padding:12px 14px;font-size:.9rem;vertical-align:middle}
body.wisp #ticketTable tbody tr:last-child td{border-bottom:0}
body.wisp #ticketTable tbody tr:hover td{background:#fafcfe}
body.wisp #ticketTable tr.alt td{background:none}
body.wisp #ticketTable a.Icon{padding-left:0;background:none;font-family:var(--mono);font-weight:500;color:var(--blue-deep)}
body.wisp #ticketTable .link{cursor:pointer;color:var(--text);max-width:420px!important;max-height:none!important}
body.wisp #ticketTable .link:hover{color:var(--blue-deep)}
body.wisp #ticketTable + div{margin-top:14px;font-size:.88rem;color:var(--muted)}
body.wisp #ticketTable + div a,body.wisp #ticketTable + div b{display:inline-block;min-width:30px;padding:4px 8px;margin:0 2px;
  border-radius:8px;text-align:center;text-decoration:none}
body.wisp #ticketTable + div a{border:1px solid var(--line-solid);background:#fff}
body.wisp #ticketTable + div b{background:var(--blue-deep);color:#fff}

/* ---------- sign in, guest access link, password reset (#clientLogin) ---------- */
body.wisp #clientLogin{margin:8px 0 18px;padding:26px;background:#fff;background-image:none;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:none;max-width:860px}
body.wisp #clientLogin > div[style*="table-row"]{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
body.wisp #clientLogin > div[style*="width:50%"]{display:block!important;width:auto!important;max-width:420px}
body.wisp #clientLogin .login-box{display:block;width:auto;padding:0;box-shadow:none}
body.wisp #clientLogin .login-box > div,body.wisp #clientLogin > div > div{margin-bottom:12px}
body.wisp #clientLogin label{display:block;font-weight:600;font-size:.86rem}
body.wisp #clientLogin input[type=text],body.wisp #clientLogin input[type=email],body.wisp #clientLogin input[type=password]{
  display:block;width:100%;margin:5px 0 0;border-radius:var(--r-sm);padding:10px 12px}
body.wisp #clientLogin #ticketno{font-family:var(--mono)}
body.wisp #clientLogin p{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
body.wisp #clientLogin input[type=submit]{padding:11px 18px;border-radius:var(--r-sm)}
body.wisp #clientLogin strong{font-size:.86rem;color:var(--red)}
body.wisp #clientLogin strong:empty{display:none}
body.wisp #clientLogin .instructions,body.wisp #clientLogin > div > div[style*="table-cell"]{display:block!important;padding:0 0 0 28px!important;
  border-left:1px solid var(--line);font-size:.92rem;color:var(--muted);line-height:1.6}
body.wisp #clientLogin .instructions a,body.wisp #clientLogin > div > div[style*="table-cell"] a{font-weight:600}
body.wisp #clientLogin .external-auth{margin-bottom:10px}
body.wisp #clientLogin + br{display:none}
body.wisp #clientLogin ~ p{font-size:.9rem;color:var(--muted)}

/* ---------- registration / confirmation / profile ---------- */
body.wisp #content form > table tr:first-child td > hr,body.wisp #content form > table tr:first-child td > div > hr{display:none}
body.wisp #content .select2-container .select2-selection--single{height:42px;border:1px solid var(--line-solid);border-radius:var(--r-sm)}
body.wisp #content .select2-container .select2-selection--single .select2-selection__rendered{line-height:40px;padding-left:12px;color:var(--text)}
body.wisp #content .select2-container .select2-selection--single .select2-selection__arrow{height:40px}
body.wisp #content .select2-container{min-width:0!important;max-width:100%}
body.wisp #content table.padded{width:100%!important}
body.wisp #content table.padded td[width]{width:200px;color:var(--text);font-size:.88rem}
body.wisp #content .select2-container{max-width:100%}
body.wisp #content > p > em{color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .wisp-layout{grid-template-columns:1fr}
  .wisp-meta{grid-template-columns:1fr 1fr}
  .wisp-meta > div:nth-child(2){border-right:0}
  .wisp-meta > div{border-bottom:1px solid var(--line)}
  .wisp-meta > div:nth-last-child(-n+2){border-bottom:0}
  body.wisp #clientLogin > div[style*="table-row"]{grid-template-columns:1fr}
  body.wisp #clientLogin .instructions,body.wisp #clientLogin > div > div[style*="table-cell"]{padding:18px 0 0!important;
    border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  body.wisp #ticketForm > table > tbody:first-child{grid-template-columns:1fr}
  body.wisp .wisp-panel,body.wisp #reply,body.wisp #clientLogin,body.wisp #content form[action="account.php"],
  body.wisp #content form[action="profile.php"],body.wisp #content form[action="tickets.php"][method="post"]:not(#reply){padding:18px}
  body.wisp .wisp-open h1,body.wisp #content > h1{font-size:1.4rem}
  body.wisp #ticketInfo h1{font-size:1.25rem}
  .wisp-meta{grid-template-columns:1fr}
  .wisp-meta > div{border-right:0;border-bottom:1px solid var(--line)}
  .wisp-meta > div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .wisp-meta > div:last-child{border-bottom:0}
  body.wisp .thread-entry{padding:14px}
  body.wisp .thread-entry .thread-body{font-size:.94rem}
  body.wisp .thread-entry .thread-body :is(td,th){padding-left:5px!important;padding-right:5px!important}
  body.wisp .thread-entry .thread-body blockquote{padding-left:10px!important}
  body.wisp .thread-entry .thread-body :is(td,th) img:not([style*="width:1px"]):not([width="1"]){min-width:24px}
  body.wisp .wisp-actions{justify-content:stretch}
  body.wisp .wisp-actions .wisp-hint{flex-basis:100%;order:9;text-align:center}
  body.wisp .wisp-actions .wisp-btn{flex:1 1 auto;justify-content:center}
  body.wisp .wisp-actions input[type=submit]{flex-basis:100%;order:-1}
  body.wisp table.custom-data th{width:40%}
  body.wisp #ticketSearchForm .pull-right{margin-left:0;width:100%}
  body.wisp #ticketSearchForm .pull-right select{flex:1 1 auto}
  /* ticket list: stacked cards */
  body.wisp #ticketTable,body.wisp #ticketTable tbody{display:block}
  body.wisp #ticketTable caption{display:block;padding:12px 14px 4px;border-bottom:1px solid var(--line)}
  body.wisp #ticketTable thead{display:none}
  body.wisp #ticketTable tr{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  body.wisp #ticketTable tbody tr:last-child{border-bottom:0}
  body.wisp #ticketTable td{display:block;padding:0;border:0;min-width:0}
  body.wisp #ticketTable td:nth-child(2){text-align:right;color:var(--muted);font-size:.82rem}
  body.wisp #ticketTable td:nth-child(3){order:5;font-size:.8rem;color:var(--muted)}
  body.wisp #ticketTable td:nth-child(4){grid-column:1/-1;order:4}
  body.wisp #ticketTable td:nth-child(5){order:6;text-align:right;font-size:.8rem;color:var(--muted)}
  body.wisp #ticketTable td[colspan]{grid-column:1/-1}
  body.wisp #ticketTable .link{max-width:100%!important;white-space:normal}
  /* registration/profile/edit tables: label above field */
  body.wisp #content form > table,body.wisp #content form > table > tbody,body.wisp #content form > table tr,
  body.wisp #content form > table td{display:block;width:auto!important}
  body.wisp #content form > table td{padding:4px 0!important;height:auto!important}
  body.wisp #content form > table input[type=text],body.wisp #content form > table input[type=email],
  body.wisp #content form > table input[type=password],body.wisp #content form > table input[type=tel],
  body.wisp #content form > table select,body.wisp #content form > table textarea{width:100%;max-width:100%}
}
@media print{
  body.wisp .wisp-side,body.wisp #reply,body.wisp .wisp-tk-actions .action-button{display:none}
}

/* osTicket's js/osticket.js paints the submit text red once a form changes ("unsaved changes" hint):
   unreadable on the blue primary button, keep it white */
body.wisp #content input[type=submit][style*="color"]{color:#fff!important}

/* ticket view: osTicket prints the outcome message twice (header and above the reply form);
   keep only the one near the reply form */
body.wisp #content > :is(#msg_error,#msg_notice,#msg_warning):has(~ #ticketInfo){display:none}

/* password reset: the banner holds instructions as well as errors, keep it neutral */
body.wisp form#clientLogin[action="pwreset.php"] strong{color:var(--text);font-weight:600;font-size:.92rem}

/* ---------- WISP RMA: banner in the ticket view and RMA page (wispshop plugin, plugins/wispshop/rma/) ---------- */
#wisp-ticket-extras{margin:0 0 18px}
.wisp-rma-banner{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,#fff3e3,#fff);border:1px solid #f3cf9d;border-radius:var(--r);padding:16px 18px}
.wisp-rma-banner > div{flex:1 1 320px;min-width:0}
.wisp-rma-banner b{font:700 1rem var(--display);color:var(--text)}
.wisp-rma-banner p{margin:2px 0 0;font-size:.9rem;color:var(--muted)}
.wisp-rma-banner--done{background:linear-gradient(90deg,#e6f7ee,#fff);border-color:#b9e6cd}
.wisp-rma-head{margin-bottom:6px}
.wisp-rma-back{display:block;width:fit-content;font-size:.85rem;text-decoration:none;margin-bottom:10px}
body.wisp .wisp-rma h1{font-size:1.7rem;margin:6px 0 4px}
body.wisp .wisp-rma h2{display:flex;align-items:center;gap:10px;font:700 1.12rem var(--display);margin:28px 0 12px;
  padding:0;border:0}
body.wisp .wisp-rma h2 > span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:#fff;font:600 .8rem var(--mono)}
.wisp-rma-errors{margin:0 0 6px}
.wisp-rma-terms__box{max-height:420px;overflow:auto;border:1px solid var(--line-solid);border-radius:var(--r-sm);
  background:var(--surface);padding:6px 18px 14px;font-size:.9rem}
.wisp-rma-terms__box:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.wisp .wisp-rma-terms__box h3{font:700 .98rem var(--display);margin:14px 0 6px}
.wisp-rma-terms__box p{margin:0 0 8px}
.wisp-rma-terms__box ul{margin:0 0 8px;padding-left:20px}
.wisp-rma-terms__box li{margin-bottom:4px}
.wisp-rma-terms__box ol{margin:0 0 8px;padding-left:22px}
.wisp-rma-terms__box .wisp-rma-plain{list-style:none;padding-left:0}
.wisp-rma-pending{color:#a52a2a;font-style:italic}
.wisp-rma-version{font:500 .76rem var(--mono);color:var(--muted);margin:8px 0 14px}
.wisp-rma-accept{display:flex;gap:10px;align-items:flex-start;background:var(--blue-soft);border:1px solid #cfe3f7;
  border-radius:var(--r-sm);padding:14px 16px;font-weight:600;cursor:pointer}
body.wisp .wisp-rma-accept input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto}
.wisp-rma-accept--error{border-color:var(--red);background:#fdecec}
.wisp-rma-lock{margin:18px 0 0;padding:10px 14px;border-radius:var(--r-sm);background:#fff8e0;border:1px solid #f2df92;
  color:var(--amber-text);font-size:.88rem}
.wisp-rma-locked h2,.wisp-rma-locked .wisp-field,.wisp-rma-locked .wisp-rma-item,.wisp-rma-locked .wisp-hint,
.wisp-rma-locked #rma-add{opacity:.5}
.wisp-rma-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.wisp-rma-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wisp-rma-grid--addr{grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,.8fr)}
body.wisp .wisp-rma .wisp-field input:not([type=radio]):not([type=checkbox]),body.wisp .wisp-rma .wisp-field textarea{width:100%}
body.wisp .wisp-rma-radio input{margin:0}
body.wisp .wisp-rma button:disabled{opacity:.55;cursor:not-allowed}
body.wisp .wisp-rma .wisp-field textarea{min-height:84px}
.wisp-rma-label{display:block;font-weight:600;font-size:.86rem;margin-bottom:5px}
.wisp-rma-type [role=radiogroup]{display:flex;gap:10px;flex-wrap:wrap}
.wisp-rma-radio{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line-solid);border-radius:var(--r-sm);
  padding:9px 14px;cursor:pointer;background:#fff}
.wisp-rma-radio:has(input:checked){border-color:var(--blue-deep);background:var(--blue-soft)}
.wisp-rma-item{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px 2px;margin-bottom:12px;background:#fff}
.wisp-rma-item__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.92rem}
body.wisp .wisp-rma-remove{font:600 .82rem var(--body);background:none;border:0;color:var(--red);cursor:pointer;padding:4px 0}
body.wisp .wisp-rma-remove[hidden]{display:none}
body.wisp .wisp-rma [aria-invalid=true]{border-color:var(--red)}
.wisp-rma-number{display:flex;flex-direction:column;gap:2px;border:2px solid var(--ink);background:var(--surface);
  border-radius:var(--r);padding:16px 20px;margin:18px 0}
.wisp-rma-number span{font:600 .78rem var(--mono);color:var(--hot);letter-spacing:.08em}
.wisp-rma-number b{font:700 2.4rem/1.1 var(--mono);color:var(--ink)}
.wisp-rma-number small{color:var(--muted);font-size:.86rem}
.wisp-rma-download{display:flex;flex-wrap:wrap;gap:10px}
.wisp-rma-steps{margin:8px 0 0;padding-left:20px;font-size:.9rem}
.wisp-rma-steps li{margin-bottom:6px}
.wisp-side .wisp-rma-steps{color:var(--muted);font-size:.88rem}
.wisp-rma-summary{list-style:none;margin:0;padding:0}
.wisp-rma-summary li{border-top:1px solid var(--line);padding:10px 0;font-size:.9rem;overflow-wrap:anywhere}
.wisp-rma-summary li span{color:var(--muted)}
@media (max-width:640px){
  .wisp-rma-grid,.wisp-rma-grid--2,.wisp-rma-grid--addr{grid-template-columns:1fr}
  .wisp-rma-banner .wisp-btn{flex:1 1 auto;justify-content:center}
  .wisp-rma-terms__box{max-height:340px;padding:4px 14px 12px}
  .wisp-rma-number b{font-size:1.9rem}
  .wisp-rma-download .wisp-btn{flex:1 1 auto;justify-content:center}
}
/* ---------- /WISP RMA ---------- */