/* Tema da área do cliente, alinhado ao visual de www.favoritec.com.br */
:root{
  --navy:#031b3d;
  --navy-2:#062a5c;
  --blue:#063fc5;
  --blue-2:#0b5cf0;
  --cyan:#27a7ff;
  --text:#10203a;
  --muted:#617087;
  --line:#dbe3ed;
  --soft:#f5f8fc;
  --white:#fff;
  --ok:#1a9c5c;
  --warn:#c07a08;
  --bad:#c0392b;
  --shadow:0 18px 55px rgba(2,24,57,.14);
  --radius:14px;
  /* superfícies e barras: derivadas do White Label (includes/branding.php)
     pra que o tema escolhido pelo admin realmente valha nesta área */
  --surface:#fff;
  --input-bg:#fff;
  --input-border:#cbd6e3;
  --on-accent:#fff;
  --row-hover:#eef4ff;
  --topbar-bg:#02142f;
  --topbar-text:#fff;
  --header-bg:rgba(255,255,255,.97);
  --nav-text:#111c2d;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--soft);line-height:1.6}
a{text-decoration:none;color:var(--blue)}
img{display:block;max-width:100%}
.container{width:min(1180px,calc(100% - 40px));margin:auto;padding:28px 0}
.container.narrow{max-width:640px}

.topbar{background:var(--topbar-bg);color:var(--topbar-text);font-size:.84rem}
.topbar .wrap{width:min(1180px,calc(100% - 40px));margin:auto;min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar a{color:var(--topbar-text)}

.header{background:var(--header-bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{width:min(1180px,calc(100% - 40px));margin:auto;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.nav .logo img{width:auto;max-width:180px;max-height:44px;height:auto}
.nav-links{display:flex;align-items:center;gap:22px;font-weight:700;font-size:.9rem}
.nav-links a{position:relative;padding:26px 0;color:var(--nav-text)}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:20px;height:2px;background:var(--blue);transition:.2s}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-side{display:flex;align-items:center;gap:16px;font-size:.86rem;color:var(--muted)}
.nav-side a{color:var(--muted);font-weight:700}
.nav-side a:hover{color:var(--blue)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--text);padding:8px 11px;}

.page-title{margin:0 0 4px;font-size:1.6rem;color:var(--text)}
.page-sub{color:var(--muted);margin:0 0 22px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:8px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:.2s ease;font-size:.86rem}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:var(--on-accent);box-shadow:0 10px 22px rgba(6,63,197,.22)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-outline{border-color:var(--blue);color:var(--blue);background:var(--surface)}
.btn-outline:hover{background:var(--blue);color:var(--on-accent)}
.btn-small{padding:7px 12px;font-size:.8rem}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 7px 22px rgba(5,35,74,.05)}
.card + .card{margin-top:16px}
.card h2{margin:0 0 14px;font-size:1.05rem;color:var(--text)}
.card.full{grid-column:1/-1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:800px){.grid-2{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;font-size:.9rem}
th{color:var(--muted);font-weight:700;background:var(--row-hover)}
tr:last-child td{border-bottom:none}
tr.row:hover{background:var(--row-hover);cursor:pointer}
a.row-link{color:var(--text);font-weight:700}
.empty{color:var(--muted);padding:40px;text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:800}
.badge.online,.badge.on,.badge.av-ok{background:rgba(26,156,92,.16);color:var(--ok)}
.badge.offline,.badge.off,.badge.av-bad{background:rgba(192,57,43,.16);color:var(--bad)}
.badge.status-novo{background:rgba(192,57,43,.16);color:var(--bad)}
.badge.status-aguardando_tecnico{background:rgba(192,122,8,.18);color:var(--warn)}
.badge.status-aguardando_cliente{background:rgba(99,132,255,.18);color:var(--blue)}
.badge.status-finalizado,.badge.status-encerrado_mesclagem{background:rgba(26,156,92,.16);color:var(--ok)}
.badge[class*="status-custom_"]{background:rgba(128,128,128,.18);color:var(--muted)}
.badge.priority-baixa{background:rgba(128,128,128,.18);color:var(--muted)}
.badge.priority-media{background:rgba(192,122,8,.18);color:var(--warn)}
.badge.priority-alta{background:rgba(192,57,43,.16);color:var(--bad)}

dl{display:grid;grid-template-columns:140px 1fr;row-gap:8px;font-size:.9rem;margin:0}
dt{color:var(--muted)}

.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-weight:700;font-size:.85rem}
.tabs a.active,.tabs a:hover{background:var(--blue);color:var(--on-accent);border-color:var(--blue)}

form{display:grid;gap:14px}
label{display:block;font-weight:800;font-size:.86rem;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=tel],textarea,select{
  width:100%;padding:11px 13px;border:1px solid var(--input-border);border-radius:8px;font:inherit;background:var(--input-bg);color:var(--text)
}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(6,63,197,.11);border-color:var(--blue)}
textarea{min-height:110px;resize:vertical}
/* botão de envio sem classe (login, trocar senha) herdava o visual nativo
   cinza do navegador — agora segue a cor de destaque do White Label */
form button[type=submit]:not([class]){
  padding:11px 18px;border:none;border-radius:8px;cursor:pointer;font:inherit;font-weight:800;font-size:.86rem;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));color:var(--on-accent)
}
form button[type=submit]:not([class]):hover{filter:brightness(1.07)}
.form-row{display:flex;gap:14px;flex-wrap:wrap}
.form-row > *{flex:1;min-width:160px}

.form-page{min-height:100vh;display:grid;place-items:center;background:var(--soft)}
.form-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:34px;width:100%;max-width:380px;box-shadow:var(--shadow)}
.form-box .logo{text-align:center;margin-bottom:18px}
.form-box .logo img{width:180px;margin:auto}
.form-box h1{margin:0 0 4px;font-size:1.3rem;text-align:center}
.form-box p.sub{color:var(--muted);font-size:.86rem;margin:0 0 18px;text-align:center}
.form-box button{width:100%}
.form-box .links{margin-top:16px;font-size:.86rem;text-align:center}
.form-box .links a{display:block;margin-top:6px}

.alert{padding:10px 13px;border-radius:8px;font-size:.86rem;margin-bottom:14px}
.alert.error{background:rgba(192,57,43,.14);color:var(--bad);border:1px solid rgba(192,57,43,.35)}
.alert.success{background:rgba(26,156,92,.14);color:var(--ok);border:1px solid rgba(26,156,92,.35)}
/* aviso neutro: segue a cor do White Label em vez de um azul fixo */
.alert.info{background:rgba(127,127,127,.10);color:var(--text);border:1px solid rgba(127,127,127,.28)}
.alert.info{background:color-mix(in srgb, var(--blue) 10%, transparent);border-color:color-mix(in srgb, var(--blue) 30%, transparent)}

/* Thread de mensagens do chamado */
.thread{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.msg{max-width:75%;padding:12px 15px;border-radius:14px;font-size:.9rem}
.msg .meta{font-size:.76rem;color:var(--muted);margin-bottom:4px;font-weight:700}
.msg.client{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:3px}
.msg.admin{align-self:flex-end;background:var(--blue);color:var(--on-accent);border-bottom-right-radius:3px}
.msg.admin .meta{color:inherit;opacity:.8}
.msg p{margin:0;white-space:pre-wrap}
.msg-body{word-break:break-word}
.msg-body img{max-width:100%;height:auto;border-radius:6px;margin-top:6px;display:block}
.msg-body p{margin:0 0 6px}
.msg-body p:last-child{margin-bottom:0}

/* Base de conhecimento: lista de artigos e corpo do artigo */
.kb-list{display:grid;gap:12px}
.kb-item{display:block;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);box-shadow:0 7px 22px rgba(5,35,74,.05)}
.kb-item:hover{border-color:var(--blue)}
.kb-item strong{display:block;font-size:1rem;margin-bottom:4px}
.kb-item-sub{display:block;color:var(--muted);font-size:.88rem;line-height:1.5}
.kb-item-meta{display:block;color:var(--muted);font-size:.78rem;margin-top:8px}
.kb-body{line-height:1.75}
.kb-body h1,.kb-body h2,.kb-body h3{margin:22px 0 8px;line-height:1.3}
.kb-body h1{font-size:1.3rem}.kb-body h2{font-size:1.1rem}.kb-body h3{font-size:1rem}
.kb-body p{margin:0 0 12px}
.kb-body ul,.kb-body ol{margin:0 0 12px;padding-left:22px}
.kb-body li{margin-bottom:4px}
.kb-body img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line);margin:8px 0;display:block}
.kb-body pre,.kb-body code{background:var(--input-bg);border-radius:6px}
.kb-body pre{padding:12px;overflow-x:auto}
.kb-body code{padding:1px 6px;font-size:.85rem}
.kb-body a{text-decoration:underline}
.kb-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.kb-tag{padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:.76rem}
.kb-tag:hover{border-color:var(--blue);color:var(--blue)}

/* Editor de texto rico (resposta do chamado) */
.rich-editor{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.rich-editor-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px;background:var(--row-hover);border-bottom:1px solid var(--line)}
.rich-editor-btn{padding:6px 10px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font-size:.82rem;font-weight:700}
.rich-editor-btn:hover{border-color:var(--blue);color:var(--blue)}
.rich-editor-select{padding:5px 8px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:.82rem}
.rich-editor-color{width:32px;height:30px;padding:2px;border-radius:6px;border:1px solid var(--line);background:transparent;cursor:pointer}
.rich-editor-area{min-height:120px;max-height:400px;overflow-y:auto;padding:12px;font-size:.9rem;color:var(--text);outline:none}
.rich-editor-area img{max-width:100%;height:auto}
.rich-editor-uploading{color:var(--muted);font-style:italic}

/* Estatísticas: barras simples em CSS */
.stat-total{font-size:2.2rem;font-weight:800;color:var(--blue)}
.stat-bars{display:grid;gap:12px;margin-top:10px}
.stat-bar-row{display:grid;grid-template-columns:140px 1fr 40px;gap:10px;align-items:center;font-size:.86rem}
.stat-bar-track{background:var(--row-hover);border-radius:999px;height:12px;overflow:hidden}
.stat-bar-fill{background:linear-gradient(90deg,var(--blue),var(--cyan));height:100%;border-radius:999px}

.footer-app{color:var(--muted);font-size:.82rem;text-align:center;padding:24px 0}

/* Tabelas largas ficam com scroll horizontal próprio em vez de estourar a página */
.container{overflow-x:auto}
.container.narrow{overflow-x:visible}
.table-wrap{overflow-x:auto}

/* Barra de ferramentas das listagens (busca + exportar) */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.search-box{display:flex;align-items:center;gap:6px;margin:0;flex:1;min-width:220px}
.search-box input[type=search]{flex:1;min-width:160px;padding:10px 12px;border:1px solid var(--input-border);border-radius:8px;font:inherit;background:var(--input-bg);color:var(--text)}
.hint{color:var(--muted);font-size:.8rem;margin:8px 0 0;line-height:1.5}

/* Colunas ordenáveis */
th.sortable{padding:0}
th.sortable a{display:block;padding:11px 13px;color:var(--muted);text-decoration:none;font-weight:700;white-space:nowrap}
th.sortable a:hover{color:var(--blue);background:var(--soft)}
th.sortable a:hover{background:color-mix(in srgb, var(--blue) 8%, transparent)}

/* Anexos do chamado */
.attachment-list{display:flex;flex-direction:column;gap:8px}
.attachment{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text);font-size:.88rem}
.attachment:hover{border-color:var(--blue);color:var(--blue)}
.attachment-name{word-break:break-all}
.attachment-size{color:var(--muted);font-size:.76rem;white-space:nowrap}

/* Campo de anexos com colar/arrastar */
.file-attach{border:1px dashed var(--input-border);border-radius:10px;padding:14px;background:var(--row-hover)}
.file-attach.dragging{border-color:var(--blue);background:var(--row-hover)}
.file-attach-hint{margin:0;color:var(--muted);font-size:.82rem;line-height:1.6}
.file-attach-link{color:var(--blue);cursor:pointer;text-decoration:underline;display:inline;font-weight:700;margin:0}
.file-attach-input{margin-top:10px;font-size:.82rem}
.file-attach-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.file-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;background:var(--row-hover);color:var(--text);font-size:.76rem}
.file-chip-remove{background:none;border:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0}
.file-attach-warning{margin:8px 0 0;color:var(--warn);font-size:.76rem}

@media(max-width:900px){
  .grid-2{grid-template-columns:1fr}
}

@media(max-width:760px){
  .nav{min-height:60px;gap:10px}
  .nav .logo img{max-width:140px;max-height:38px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;order:2}
  .nav-side{order:3;gap:10px;margin-left:auto}
  .nav-links{display:none;flex-basis:100%;order:4;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
  .nav.nav-open .nav-links{display:flex}
  .nav-links a{padding:12px 4px}
  .nav-links a::after{display:none}
  .nav-links a:hover,.nav-links a.active{background:var(--row-hover);border-radius:8px}

  .container{width:calc(100% - 28px);padding:18px 0}
  .card{padding:16px}
  dl{grid-template-columns:110px 1fr}
  .msg{max-width:88%}
  .stat-bar-row{grid-template-columns:100px 1fr 36px;font-size:.8rem}

  /* listagens: o campo de busca pega a linha inteira e os botões descem */
  .toolbar{gap:8px}
  .search-box{min-width:100%;flex-wrap:wrap}
  .search-box input[type=search]{min-width:100%}
  .page-title{font-size:1.35rem}
  .tabs{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .tabs a{white-space:nowrap;padding:7px 13px;font-size:.8rem}
  th,td{padding:9px 10px;font-size:.84rem}
  .form-row{gap:10px}
  .form-row > *{min-width:100%}
}

@media(max-width:480px){
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:2px;padding:6px 0}
  .nav-side{font-size:.8rem;gap:8px}
  dl{grid-template-columns:1fr}
  dl dt{margin-top:6px}
  .form-box{padding:24px 20px}
  .container{width:calc(100% - 20px)}
  .card{padding:14px}
  .page-title{font-size:1.2rem}
  .msg{max-width:94%}
  .stat-bar-row{grid-template-columns:84px 1fr 30px;font-size:.76rem}
  .stat-total{font-size:1.8rem}
  .btn{padding:10px 14px}
  /* botões de ação viram bloco pra dar área de toque decente */
  .toolbar .btn,.page-sub .btn{width:100%;justify-content:center}
  .attachment{flex-direction:column;align-items:flex-start;gap:4px}
}