/*!
 * Estrutural TI — tema responsivo do portal do cliente (osTicket 1.18.x)
 * Carregado depois de osticket.css e theme.css. Não altera o núcleo do osTicket:
 * apenas sobrescreve o visual. Paleta e tipografia iguais a estruturalti.com.br.
 */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

:root{
  --e-ground:#F4F8FB; --e-surface:#FFFFFF; --e-sunk:#E9F1F7; --e-ink:#0A1B2E; --e-ink-2:#4A5D71; --e-line:#D8E3ED;
  --e-brand:#00CCFF; --e-accent:#0081AF; --e-accent-2:#006C93; --e-panel:#0B2545; --e-panel-2:#13335C; --e-panel-dim:#A3BDD9;
  --e-ok:#1E8E5A; --e-warn:#B26B00; --e-err:#C2413A;
  --e-display:"Lexend","Segoe UI",system-ui,sans-serif;
  --e-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --e-gutter:clamp(16px,4vw,48px);
  --e-radius:12px;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%}
body{background:var(--e-ground)!important;color:var(--e-ink);font-family:var(--e-body)!important;font-size:16px;line-height:1.55;margin:0}
body *{box-sizing:border-box}
a{color:var(--e-accent)}
a:hover{color:var(--e-accent-2)}
h1,h2,h3,h4{font-family:var(--e-display);color:var(--e-ink);letter-spacing:-.01em;line-height:1.25}
h1{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin:0 0 .5em}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--e-line);margin:18px 0}

/* ---------- estrutura em tela cheia ---------- */
#container{width:auto!important;max-width:none!important;margin:0!important;box-shadow:none!important;background:transparent!important;min-height:100vh;display:flex;flex-direction:column}
#header{height:auto!important;padding:0 var(--e-gutter)!important;background:var(--e-surface);border-bottom:1px solid var(--e-line);display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;min-height:68px}
#header .pull-right{float:none!important;order:2;margin-left:auto}
#header p{width:auto!important;padding:0!important;margin:0;font-size:.95rem;color:var(--e-ink-2)}
#header p + p:empty{display:none}
#header p a{font-weight:600;text-decoration:none}
#logo{height:auto!important;float:none!important;display:flex;align-items:center;text-decoration:none;order:1;padding:10px 0}
#logo .valign-helper{display:none}
#header #logo img{max-height:44px;max-width:min(260px,60vw)}

/* marca (substitui o logo.php no header customizado) */
.e-brand{display:flex;align-items:center;gap:10px;color:var(--e-ink);text-decoration:none}
.e-brand svg{height:30px;width:auto;color:var(--e-brand);flex:none}
.e-brand b{font-family:var(--e-display);font-weight:700;font-size:1.15rem;letter-spacing:.03em;white-space:nowrap}
.e-brand b span{color:var(--e-accent)}
.e-brand small{display:block;font-family:var(--e-body);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink-2);margin-top:3px}
.e-site-link{font-size:.9rem;font-weight:600;text-decoration:none;color:var(--e-ink-2);border:1px solid var(--e-line);border-radius:8px;padding:6px 12px;white-space:nowrap}
.e-site-link:hover{border-color:var(--e-accent);color:var(--e-accent)}

/* navegação */
#nav{margin:0!important;padding:0 var(--e-gutter)!important;height:auto!important;background:var(--e-panel)!important;border:0!important;box-shadow:none!important;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
#nav::-webkit-scrollbar{display:none}
#nav li{display:block!important}
#nav li a{display:flex!important;align-items:center;gap:8px;height:auto!important;line-height:1.2!important;margin:0!important;padding:14px 16px!important;border-radius:0!important;background:none!important;color:var(--e-panel-dim)!important;font-weight:600;font-size:.97rem;text-decoration:none;border-bottom:3px solid transparent}
#nav li a:hover{color:#fff!important}
#nav li a.active{color:#fff!important;border-bottom-color:var(--e-brand)}
#nav li a::before{font-family:FontAwesome;font-weight:normal;font-size:1rem;opacity:.9}
#nav li a.home::before{content:"\f015"}
#nav li a.kb::before{content:"\f02d"}
#nav li a.new::before{content:"\f067"}
#nav li a.status::before{content:"\f002"}
#nav li a.tickets::before{content:"\f0f6"}
body > #container > hr{display:none}

#content{flex:1;width:100%;margin:0!important;padding:clamp(20px,3vw,40px) var(--e-gutter)!important;min-height:0!important}
#content > h1:first-child,#content > h1{margin-top:0}

/* rodapé */
#footer{padding:24px var(--e-gutter);border-top:1px solid var(--e-line);background:var(--e-surface);color:var(--e-ink-2);font-size:.88rem;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;text-align:left}
#footer p{margin:0!important}
#footer a{color:var(--e-ink-2)}
#footer #poweredBy{display:inline!important;width:auto!important;height:auto!important;text-indent:0!important;background:none!important;margin:0!important;font-size:.8rem;opacity:.8}

/* avisos */
#msg_error,#msg_notice,#msg_warning,#msg_info,.error_bar,.warning_bar,.notice_bar,.warning-banner{border-radius:10px!important;padding:12px 16px 12px 44px!important;margin:0 0 20px!important;font-size:.95rem;border:1px solid transparent!important;background-position:14px 50%!important}
#msg_error,.error_bar{background-color:#FCECEB!important;border-color:#F1C4C1!important;color:#8E2A24!important}
#msg_notice,.notice_bar,#msg_info{background-color:#E7F6EF!important;border-color:#BCE3CF!important;color:#155D3C!important}
#msg_warning,.warning_bar,.warning-banner{background-color:#FFF5E5!important;border-color:#F2D6A8!important;color:#7A4A00!important}
.error_bar,.warning_bar,.notice_bar{margin:0!important;border-radius:0!important}

/* botões */
.button,input[type=submit],input[type=reset],input[type=button],button,.btn,.action-button{font-family:var(--e-body)!important;font-weight:600!important;font-size:.98rem!important;border-radius:10px!important;padding:11px 20px!important;border:1px solid var(--e-line)!important;background:var(--e-surface)!important;color:var(--e-ink)!important;box-shadow:none!important;text-shadow:none!important;cursor:pointer;height:auto!important;line-height:1.2!important;background-image:none!important}
.button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover,button:hover,.btn:hover,.action-button:hover{border-color:var(--e-accent)!important;color:var(--e-accent)!important}
.blue.button,.green.button,input[type=submit],button[type=submit]{background:var(--e-accent)!important;border-color:var(--e-accent)!important;color:#fff!important}
.green.button{background:var(--e-panel)!important;border-color:var(--e-panel)!important}
.blue.button:hover,.green.button:hover,input[type=submit]:hover,button[type=submit]:hover{filter:brightness(1.08);color:#fff!important}
.front-page-button .button{text-align:center;padding:16px 20px!important;font-size:1.05rem!important}

/* campos */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],input[type=date],input:not([type]),select,textarea{font-family:var(--e-body)!important;font-size:16px!important;padding:10px 12px!important;border:1px solid var(--e-line)!important;border-radius:9px!important;background:var(--e-surface)!important;color:var(--e-ink)!important;max-width:100%;box-shadow:none!important;height:auto!important;line-height:1.3}
input:focus,select:focus,textarea:focus{outline:2px solid var(--e-accent)!important;outline-offset:0;border-color:transparent!important}
label{font-weight:600}
.required,span.error,font.error,.error{color:var(--e-err)}

/* ---------- página inicial ---------- */
#landing_page{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
#landing_page > .clear{display:none}
#landing_page > div:last-child:empty{display:none}
#landing_page .main-content{width:auto!important;float:none!important;min-width:0;grid-column:1;grid-row:1}
#landing_page .sidebar{float:none!important;width:auto!important;display:flex;flex-direction:column;gap:16px;grid-column:2;grid-row:1}
#landing_page > div:not(.sidebar):not(.main-content){grid-column:1/-1}
#landing_page .sidebar .content{background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius);padding:18px}
#landing_page .sidebar .content:empty{display:none}
.front-page-button,.front-page-button.flush-right{display:flex;flex-direction:column;gap:12px;background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius);padding:18px!important;margin:0!important;width:auto!important}
.front-page-button .button{width:100%}
.front-page-button p{margin:0!important}
.search-form{margin:0 0 24px}
.search-form form{display:flex;gap:10px;flex-wrap:wrap}
.search-form input.search{flex:1 1 220px;width:auto!important;min-width:0}
.main-content .thread-body{background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius);padding:clamp(18px,3vw,32px)}
.main-content .thread-body h1{font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem)}
@media (max-width:860px){
  #landing_page{grid-template-columns:1fr}
  #landing_page .main-content{grid-column:1;grid-row:2}
  #landing_page .sidebar{grid-column:1;grid-row:1}
  .front-page-button{flex-direction:row!important;flex-wrap:wrap}
  .front-page-button p{flex:1 1 200px}
}

/* ---------- abrir chamado / formulários ---------- */
#ticketForm,#clientLogin,form#profile,form#register,#reply{max-width:none}
#ticketForm > table,#ticketForm table,form table.padded,#clientLogin table{width:100%!important;border-collapse:collapse}
#ticketForm > table td,#ticketForm table td{width:auto!important;display:block;padding:6px 0!important}
#ticketForm > table td + td{padding-left:0!important}
#ticketForm tbody{display:block;background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius);padding:8px clamp(16px,3vw,28px) 18px;margin-bottom:18px}
#ticketForm tbody tr{display:block}
#ticketForm tbody:empty{display:none}
@media (min-width:980px){
  #ticketForm tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));column-gap:28px}
  #ticketForm tbody tr:has(.form-header),#ticketForm tbody tr:has(textarea),#ticketForm tbody tr:has(.redactor-box),#ticketForm tbody tr:has(.filedrop),#ticketForm tbody tr:has(.captcha),#ticketForm tbody tr:has(select#topicId){grid-column:1/-1}
}
#ticketForm td hr{display:none}
#ticketForm .form-header{margin:10px 0 4px!important}
#ticketForm .form-header h3,#ticketForm .form-header b{font-family:var(--e-display);font-size:1.1rem;font-weight:600}
#ticketForm label{display:block;margin-bottom:4px}
#ticketForm input[type=text],#ticketForm input[type=email],#ticketForm input[type=tel],#ticketForm input:not([type]),#ticketForm select,#ticketForm textarea{width:100%!important;max-width:100%!important;margin-top:4px}
#ticketForm input[id$="-ext"],#ticketForm input[name$="-ext"]{width:110px!important;display:inline-block}
#ticketForm td em{display:block;color:var(--e-ink-2)!important;font-size:.9rem}
#ticketForm .captchaRow,#ticketForm div.captchaRow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#ticketForm .captcha,#ticketForm td .captcha{border-radius:8px;border:1px solid var(--e-line)}
#ticketForm > p.buttons,#ticketForm p.buttons,form p.buttons,.buttons{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0!important;text-align:left!important}
.redactor-box,.redactor-editor,.redactor-layer{border-radius:10px!important;border-color:var(--e-line)!important;max-width:100%!important;width:100%!important}
.redactor-toolbar{border-radius:10px 10px 0 0!important;box-shadow:none!important;border-bottom:1px solid var(--e-line)!important;overflow-x:auto;white-space:nowrap}
.filedrop{border-radius:10px!important;border:2px dashed var(--e-line)!important;background:var(--e-ground)!important}
.filedrop .dropzone{padding:18px!important}
.select2-container{max-width:100%!important;width:100%!important}
.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{border-radius:9px!important;border-color:var(--e-line)!important;min-height:42px}

/* ---------- login / cadastro ---------- */
#clientLogin{display:block!important;background:var(--e-surface)!important;border:1px solid var(--e-line)!important;border-radius:var(--e-radius);padding:clamp(18px,3vw,28px)!important;box-shadow:none!important;width:auto!important;max-width:980px}
#clientLogin > div{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
#clientLogin > div > div{display:block!important;padding:0!important;box-shadow:none!important;border:0!important;background:none!important;width:auto!important;float:none!important;margin:0!important}
#clientLogin .login-box{display:flex!important;flex-direction:column;gap:12px}
#clientLogin .login-box input[type=text],#clientLogin .login-box input[type=password]{width:100%!important}
@media (max-width:760px){#clientLogin > div{grid-template-columns:1fr}#clientLogin > div > div + div{border-top:1px solid var(--e-line)!important;padding-top:18px!important}}
#content pre{white-space:pre-wrap!important;font-family:inherit!important}
form table.padded td,table.padded td{padding:6px 8px}
@media (max-width:640px){
  form table.padded,form table.padded tbody,form table.padded tr,form table.padded td{display:block;width:100%!important}
  form table.padded input,form table.padded select{width:100%!important}
}

/* ---------- lista de chamados ---------- */
#ticketSearchForm{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
#ticketTable{width:100%!important;border-collapse:separate!important;border-spacing:0;background:var(--e-surface);border:1px solid var(--e-line)!important;border-radius:var(--e-radius);overflow:hidden}
#ticketTable caption{text-align:left;padding:12px 0;font-weight:600}
#ticketTable th{background:var(--e-sunk)!important;color:var(--e-ink-2);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:12px 14px!important;border:0!important;background-image:none!important}
#ticketTable td{padding:12px 14px!important;border:0!important;border-top:1px solid var(--e-line)!important;background:none!important}
#ticketTable tr:hover td{background:var(--e-ground)!important}
@media (max-width:720px){
  #ticketTable,#ticketTable tbody,#ticketTable tr,#ticketTable td{display:block;width:100%!important}
  #ticketTable thead{display:none}
  #ticketTable tr{border-top:1px solid var(--e-line);padding:10px 0}
  #ticketTable td{border:0!important;padding:4px 16px!important}
}

/* ---------- visualizar chamado ---------- */
#ticketInfo{width:100%!important}
#ticketInfo > tbody > tr > td{display:block;width:100%!important}
table.infoTable{width:100%!important;background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius);padding:8px;margin-bottom:16px}
table.infoTable th{text-align:left;color:var(--e-ink-2);font-weight:600;width:180px;padding:8px 12px;vertical-align:top}
table.infoTable td{padding:8px 12px}
@media (min-width:900px){
  #ticketInfo > tbody > tr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width:560px){
  table.infoTable,table.infoTable tbody,table.infoTable tr,table.infoTable th,table.infoTable td{display:block;width:100%!important}
  table.infoTable th{padding-bottom:0}
}
#ticketThread,.thread-body,.thread-entry{max-width:100%}
.thread-entry{border-radius:var(--e-radius)!important;overflow:hidden}
.thread-entry .header{background:var(--e-sunk)!important;border:0!important;padding:10px 14px!important}
.thread-entry.message .header{background:#E3F4FB!important}
.thread-entry.response .header{background:#EAF0FA!important}
.thread-body{padding:14px!important;overflow-x:auto}
.thread-body img{max-width:100%!important;height:auto!important}
.thread-entry .avatar{display:none}
.thread-entry{margin-left:0!important;margin-right:0!important}

/* ---------- base de conhecimento ---------- */
#kb-search,.searchbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}
#kb-search div{float:none!important;margin:0!important}
#kb-search #query,#kb-search #cid,#kb-search #topic-id{width:auto!important;flex:1 1 200px}
#kb{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0!important;margin:0!important}
#kb > li{list-style:none;background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius);padding:18px!important;margin:0!important;width:auto!important;float:none!important}
#kb > li > i{display:none}
#kb > li h4{margin:0 0 6px}
#kb > li > div,#kb > li > h4,#kb > li > p{margin-left:0!important;padding-left:0!important}
.row{display:flex;flex-wrap:wrap;gap:24px;margin:0!important}
.row > .span8{flex:1 1 520px;width:auto!important;float:none!important;min-width:0;margin:0!important}
.row > .span4{flex:1 1 260px;width:auto!important;float:none!important;min-width:0;margin:0!important}
.sidebar .content,.span4 .sidebar{background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius);padding:18px}
.faq-content{background:var(--e-surface);border:1px solid var(--e-line);border-radius:var(--e-radius);padding:clamp(18px,3vw,32px)}
#breadcrumbs{font-size:.92rem;color:var(--e-ink-2);margin-bottom:12px}

/* ---------- diálogos jQuery UI / overlays ---------- */
.dialog,.ui-dialog{max-width:calc(100vw - 24px)!important;border-radius:14px!important}
#loading{border-radius:14px!important;max-width:calc(100vw - 32px)}
table{max-width:100%}
.clear{clear:both}

@media print{#nav,#footer,.e-site-link{display:none!important}}
@media (max-width:520px){.front-page-button p{flex:1 1 100%}}
/* ajustes: legenda da lista de chamados no celular e caixa de resposta */
@media (max-width:720px){#ticketTable caption{display:block;width:100%;padding:12px 16px}}
#reply{background:var(--e-surface)!important;border:1px solid var(--e-line)!important;border-radius:var(--e-radius);padding:clamp(16px,3vw,24px)!important;margin-top:20px}
#reply h2{border:0!important;margin-top:0}
#reply textarea,#reply .redactor-box{width:100%!important}
#ticketInfo h1 small{display:inline;font-size:.6em;color:var(--e-ink-2)}

/* =====================================================================
   MENU LATERAL (body.e-sidebar) — recolhível no desktop, sanduíche no celular
   ===================================================================== */
:root{--e-side:272px;--e-top:68px}
body.e-sidebar.e-nav-collapsed{--e-side:72px}
.e-nav-toggle{display:none}
#e-nav-overlay{display:none}
body.e-sidebar .e-nav-toggle{order:0;display:inline-flex!important;flex-direction:column;justify-content:center;gap:4px;width:42px!important;height:42px!important;line-height:0!important;padding:0 11px!important;border:1px solid var(--e-line)!important;border-radius:10px!important;background:var(--e-surface)!important;cursor:pointer;flex:none}
body.e-sidebar .e-nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--e-ink);transition:transform .2s,opacity .2s}
body.e-sidebar .e-nav-toggle:hover span{background:var(--e-accent)}
body.e-sidebar #header{padding-left:calc(var(--e-side) + var(--e-gutter))!important;min-height:var(--e-top);justify-content:flex-start;transition:padding-left .2s ease}
body.e-sidebar #header #logo{box-sizing:border-box;position:fixed;top:0;left:0;width:var(--e-side);height:var(--e-top)!important;padding:0 18px!important;background:var(--e-panel);z-index:302;overflow:hidden;border-bottom:1px solid #1F4675;transition:width .2s ease}
body.e-sidebar #header #logo .e-brand{color:#fff}
body.e-sidebar #header #logo .e-brand b span{color:var(--e-brand)}
body.e-sidebar #header #logo .e-brand small{color:var(--e-panel-dim)}
body.e-sidebar #nav{box-sizing:border-box;position:fixed!important;top:var(--e-top);left:0;bottom:0;width:var(--e-side);flex-direction:column;gap:2px;padding:14px 10px!important;overflow-y:auto;overflow-x:hidden;z-index:300;transition:width .2s ease,transform .25s ease}
body.e-sidebar #nav li a{border-radius:10px!important;border-bottom:0!important;padding:12px!important;gap:12px!important;white-space:normal;line-height:1.3!important}
body.e-sidebar #nav li a:hover{background:rgba(255,255,255,.06)!important}
body.e-sidebar #nav li a.active{background:var(--e-panel-2)!important;box-shadow:inset 3px 0 0 var(--e-brand)}
body.e-sidebar #nav li a::before{width:24px;text-align:center;font-size:17px;flex:none}
body.e-sidebar #content,body.e-sidebar #footer,body.e-sidebar .error_bar,body.e-sidebar .warning_bar,body.e-sidebar .notice_bar{margin-left:var(--e-side)!important;width:auto;transition:margin-left .2s ease}
body.e-sidebar.e-nav-collapsed #header #logo{padding:0!important;justify-content:center}
body.e-sidebar.e-nav-collapsed #header #logo .e-brand > span{display:none}
body.e-sidebar.e-nav-collapsed #nav li a{font-size:0!important;justify-content:center;gap:0!important;padding:12px 0!important}
body.e-sidebar.e-nav-collapsed #nav li a::before{font-size:19px}
@media (max-width:900px){
  :root{--e-side:0px}
  body.e-sidebar.e-nav-collapsed{--e-side:0px}
  body.e-sidebar #header{padding-left:var(--e-gutter)!important;gap:10px 14px}
  body.e-sidebar #header #logo{position:static;width:auto;height:auto!important;background:none;border:0;padding:8px 0!important}
  body.e-sidebar #header #logo .e-brand{color:var(--e-ink)}
  body.e-sidebar #header #logo .e-brand b span{color:var(--e-accent)}
  body.e-sidebar #header #logo .e-brand small{color:var(--e-ink-2)}
  body.e-sidebar.e-nav-collapsed #header #logo .e-brand > span{display:block}
  body.e-sidebar #nav{top:0;width:min(300px,86vw);transform:translateX(-105%);padding:18px 12px!important;z-index:1001}
  body.e-sidebar.e-nav-open #nav{transform:none;box-shadow:12px 0 40px -12px rgba(0,0,0,.5)}
  body.e-sidebar.e-nav-collapsed #nav li a{font-size:.97rem!important;justify-content:flex-start;gap:12px!important;padding:12px!important}
  body.e-sidebar #e-nav-overlay{position:fixed;inset:0;background:rgba(5,15,30,.45);z-index:1000}
  body.e-sidebar.e-nav-open #e-nav-overlay{display:block}
  body.e-sidebar.e-nav-open{overflow:hidden}
  body.e-sidebar.e-nav-open .e-nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.e-sidebar.e-nav-open .e-nav-toggle span:nth-child(2){opacity:0}
  body.e-sidebar.e-nav-open .e-nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media (prefers-reduced-motion: reduce){body.e-sidebar #nav,body.e-sidebar #header,body.e-sidebar #content{transition:none!important}}
#landing_page .sidebar{margin:0!important}
.front-page-button p{width:100%}
.front-page-button .button{box-sizing:border-box;width:100%!important;max-width:none!important;display:block!important}
body.e-sidebar #nav li a{text-align:left!important}