/* ==========================================================
   HostingPro - Novo Ticket (EXCLUSIVO)
   Arquivo: hp-newssssticket.css
   Prefixo: hpnt-
   ========================================================== */

.hpnt-page{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400; /* base normal */
  color:#111827;
}

/* FIX: não forçar tudo a herdar peso (isso atrapalha componentes do WHMCS/editor).
   Mantemos só box-sizing aqui. */
.hpnt-page *{
  box-sizing: border-box;
}

/* Normaliza bold apenas quando realmente usado */
.hpnt-page b,
.hpnt-page strong{
  font-weight: 700;
}

/* ==========================================================
   KPIs
   ========================================================== */

.hpnt-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:18px;
  margin: 18px 0 22px;
}
@media (max-width: 1200px){
  .hpnt-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .hpnt-kpis{ grid-template-columns: 1fr; }
}

.hpnt-kpi{
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.hpnt-kpi__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.hpnt-kpi__icon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.hpnt-kpi__icon i{ font-size:22px; }

/* NÚMERO grande (mockup forte, mas não “estourado”) */
.hpnt-kpi__value{
  font-size:34px;
  font-weight:800; /* era 900 */
  color:#111827;
  line-height:1.05;
}

/* texto do KPI no mockup é mais leve */
.hpnt-kpi__label{
  margin-top:4px;
  font-size:13px;
  font-weight:600; /* era 800 */
  color:#374151;
}
.hpnt-kpi__meta{
  margin-top:10px;
  font-size:12px;
  font-weight:600; /* era 800 */
  display:flex;
  align-items:center;
  gap:8px;
}
.hpnt-meta--green{ color:#16a34a; }
.hpnt-meta--blue{ color:#2563eb; }
.hpnt-meta--orange{ color:#ea580c; }
.hpnt-meta--pink{ color:#e11d48; }

/* ==========================================================
   Layout
   ========================================================== */

.hpnt-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 1200px){
  .hpnt-grid{ grid-template-columns:1fr; }
}

.hpnt-card{
  background:#fff;
  border-radius:18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.hpnt-card--form{ padding:22px; }
.hpnt-card--side{ padding:18px; }
.hpnt-card--channels{
  padding:18px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  color:#fff;
}

.hpnt-card__head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:16px;
}
.hpnt-headicon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex:0 0 auto;
}
.hpnt-headicon i{ font-size:22px; }

/* título forte mas mais “clean” que 900 */
.hpnt-title{
  margin:0;
  font-size:22px;
  font-weight:800; /* era 900 */
  color:#111827;
}

/* subtítulo bem mais leve no mockup */
.hpnt-subtitle{
  margin:4px 0 0;
  font-size:13px;
  font-weight:500; /* era 700 */
  color:#6b7280;
}

.hpnt-form{ margin-top:8px; }

.hpnt-row{ margin-top:14px; }
.hpnt-row--2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 680px){
  .hpnt-row--2{ grid-template-columns: 1fr; }
}

.hpnt-field{ width:100%; }

/* label no mockup é 600~700, não 900 */
.hpnt-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700; /* era 900 */
  color:#111827;
  margin-bottom:8px;
}
.hpnt-label i{ color:#3b82f6; }

/* ==========================================================
   Inputs
   ========================================================== */

.hpnt-input,
.hpnt-select,
.hpnt-textarea{
  width:100%;
  border:2px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  font-weight:400;
  color:#111827;
  background:#fff;
  transition:.15s ease;
  box-sizing:border-box;
}

/* FIX: se seu tema/Bootstrap aplicar weight forte via .form-control */
.hpnt-page .form-control{
  font-weight: 400 !important;
}

.hpnt-input:focus,
.hpnt-select:focus,
.hpnt-textarea:focus{
  outline:none;
  border-color: rgba(59,130,246,.60);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}
.hpnt-input--disabled{
  background:#f3f4f6;
  color:#6b7280;
}
.hpnt-textarea{
  min-height: 220px;
  resize: vertical;
}

.hpnt-hint{
  margin-top:8px;
  font-size:11px;
  font-weight:500; /* era 700 */
  color:#6b7280;
}

.hpnt-hidden-select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ==========================================================
   Markdown Editor (WHMCS)
   ========================================================== */

.hpnt-page .md-editor,
.hpnt-page .markdown-editor.md-editor{
  border:2px solid #e5e7eb !important;
  border-radius:12px !important;
  background:#fff !important;
  overflow: visible !important;
}

/* Toolbar */
.hpnt-page .md-editor > .md-header{
  display:block !important;
  background:#fff !important;
  border-bottom:1px solid #e5e7eb !important;
  padding:8px !important;
  overflow: visible !important;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}

.hpnt-page .md-editor > .md-header .btn-toolbar{
  display:flex !important;
  flex-wrap:wrap;
  gap:6px;
}

/* Botões */
.hpnt-page .md-editor > .md-header .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:36px;
  height:34px;
  padding:0 10px;
  border-radius:10px !important;
  border:1px solid #e5e7eb !important;
  background:#fff !important;
  color:#111827 !important;
  font-weight:600 !important; /* era 700 */
}
.hpnt-page .md-editor > .md-header .btn:hover{
  background:#f3f4f6 !important;
}

/* Área de texto */
.hpnt-page .md-editor .md-input{
  border:0 !important;
  outline:none !important;
  padding:14px !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.55;
  color:#111827 !important;
}

/* Footer */
.hpnt-page .md-editor > .md-footer{
  display:block !important;
  background:#fff !important;
  border-top:1px solid #e5e7eb !important;
  padding:8px 12px !important;
  color:#6b7280 !important;
  font-size:12px !important;
  font-weight:500 !important; /* era 600 */
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}

.hpnt-page .md-editor .dropdown-menu{
  z-index: 9999 !important;
}

/* ==========================================================
   Prioridade
   ========================================================== */

.hpnt-priority{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 900px){
  .hpnt-priority{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .hpnt-priority{ grid-template-columns: 1fr; }
}

.hpnt-pri{
  border:2px solid #e5e7eb;
  background:#fff;
  border-radius:14px;
  padding:14px 12px;
  cursor:pointer;
  transition:.15s ease;
  text-align:center;
}
.hpnt-pri:hover{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.hpnt-pri--active{
  border-color:#2563eb;
  background:#eff6ff;
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
}
.hpnt-pri__dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  margin-bottom:8px;
}
.hpnt-pri--low .hpnt-pri__dot{ background:#22c55e; }
.hpnt-pri--med .hpnt-pri__dot{ background:#3b82f6; }
.hpnt-pri--high .hpnt-pri__dot{ background:#f97316; }
.hpnt-pri--urgent .hpnt-pri__dot{ background:#ef4444; }

/* textos da prioridade no mockup são “firmes” mas não 900 */
.hpnt-pri__t{
  display:block;
  font-size:13px;
  font-weight:700; /* era 900 */
  color:#111827;
}
.hpnt-pri__s{
  display:block;
  font-size:12px;
  font-weight:500; /* era 800 */
  color:#6b7280;
  margin-top:2px;
}

/* ==========================================================
   Attachments
   ========================================================== */

.hpnt-attach{ margin-top:6px; }

.hpnt-file{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

.hpnt-page #fileUploadsContainer{
  position: relative;
  z-index: 1;
  margin-top: 10px;
}
.hpnt-page #fileUploadsContainer input[type="file"]{
  display:block !important;
  opacity:1 !important;
  position: static !important;
  pointer-events:auto !important;
  width:100% !important;
  margin-top:10px;
  border:2px solid #e5e7eb !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  background:#fff !important;
}

.hpnt-drop{
  position: relative;
  z-index: 2;
  border:2px dashed #cbd5e1;
  border-radius:16px;
  padding:22px;
  text-align:center;
  background:#fafafa;
  cursor:pointer;
  transition:.15s ease;
}
.hpnt-drop:hover{
  border-color: rgba(59,130,246,.55);
  background:#f8fafc;
}
.hpnt-drop__icon{
  font-size:34px;
  color:#9ca3af;
  margin-bottom:10px;
}
.hpnt-drop__t{
  font-size:14px;
  font-weight:700; /* era 900 */
  color:#111827;
}
.hpnt-drop__s{
  margin-top:8px;
  font-size:12px;
  font-weight:500; /* era 800 */
  color:#6b7280;
}
.hpnt-attach__actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}

/* ==========================================================
   Actions / Buttons
   ========================================================== */

.hpnt-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:18px;
  flex-wrap:wrap;
}

.hpnt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:10px 14px;
  font-weight:700; /* era 900 */
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:.15s ease;
  white-space:nowrap;
}
.hpnt-btn i{ font-size:14px; }

.hpnt-btn--primary{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
}
.hpnt-btn--primary:hover{ box-shadow: 0 16px 30px rgba(0,0,0,.14); }

.hpnt-btn--ghost{
  background:#fff;
  border-color:#e5e7eb;
  color:#374151;
}
.hpnt-btn--ghost:hover{ background:#f9fafb; }

.hpnt-btn--soft{
  background:#f3f4f6;
  color:#374151;
}
.hpnt-btn--soft:hover{ background:#e5e7eb; }

.hpnt-btn--full{ width:100%; }

.hpnt-side{ display:flex; flex-direction:column; gap:16px; }

.hpnt-sidehead{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
.hpnt-sideicon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex:0 0 auto;
}
.hpnt-sidetitle{
  margin:0;
  font-size:14px;
  font-weight:800; /* era 900 */
  color:#111827;
}

.hpnt-infobox{ display:flex; flex-direction:column; gap:12px; }
.hpnt-infoitem{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.hpnt-infoic{
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.hpnt-ic--green{ background:#dcfce7; color:#166534; }
.hpnt-ic--blue{ background:#dbeafe; color:#1d4ed8; }
.hpnt-ic--orange{ background:#ffedd5; color:#9a3412; }

/* títulos das infos menos “pesados” */
.hpnt-infot{ font-size:13px; font-weight:700; color:#111827; }
.hpnt-infos{ font-size:12px; font-weight:500; color:#6b7280; margin-top:2px; }

.hpnt-faq{ display:flex; flex-direction:column; gap:10px; }
.hpnt-faqitem{
  display:block;
  padding:12px 12px;
  border:2px solid #eef2f7;
  border-radius:14px;
  text-decoration:none;
  background:#fff;
  transition:.15s ease;
}
.hpnt-faqitem:hover{
  border-color: rgba(102,126,234,.45);
  background:#faf5ff;
}

/* FAQ no mockup é 700/500 */
.hpnt-faqt{ font-size:13px; font-weight:700; color:#111827; }
.hpnt-faqs{ font-size:12px; font-weight:500; color:#6b7280; margin-top:2px; }

.hpnt-ch-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800; /* era 900 */
  font-size:16px;
  margin-bottom:14px;
}
.hpnt-ch-list{ display:flex; flex-direction:column; gap:10px; }
.hpnt-ch-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:14px;
  background: rgba(255,255,255,.18);
}
.hpnt-ch-ic{
  width:38px;
  height:38px;
  border-radius:12px;
  background: rgba(255,255,255,.20);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hpnt-ch-t{ font-weight:700; }
.hpnt-ch-s{ font-weight:500; opacity:.9; font-size:12px; }

.hpnt-recent-empty{
  font-size:13px;
  font-weight:600; /* era 800 */
  color:#6b7280;
  padding:12px;
  border:2px dashed #e5e7eb;
  border-radius:14px;
  text-align:center;
}

/* Pills */
.hpnt-pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700; /* era 900 */
}
.hpnt-pill--green{ background:#dcfce7; color:#166534; }
.hpnt-pill--blue{ background:#dbeafe; color:#1d4ed8; }
.hpnt-pill--orange{ background:#ffedd5; color:#9a3412; }
.hpnt-pill--pink{ background:#ffe4e6; color:#9f1239; }

/* Gradients */
.hpnt-grad--bg{ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.hpnt-grad--blue{ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.hpnt-grad--green{ background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.hpnt-grad--orange{ background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.hpnt-grad--pink{ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }

/* Hover lift */
.hpnt-hoverlift{ transition:.18s ease; }
.hpnt-hoverlift:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0,0,0,.16);
}

/* Simple animations */
@keyframes hpntFadeIn{ from{opacity:0} to{opacity:1} }
.hpnt-anim-fade{ animation: hpntFadeIn .55s ease-out both; }

/* Muted helper */
.hpnt-muted{ margin-top:10px; }

/* Avoid any default container squeeze if your theme does it */
.hpnt-page .container,
.hpnt-page .container-fluid{
  width:auto;
}

/* ==========================================================
   FIX: Bootstrap Markdown (Glyphicons) -> Font Awesome
   ========================================================== */

/* cria pseudo e garante FA */
.hpnt-page .glyphicon::before{
  display:inline-block;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  content: "" !important;
}

/* mapeamentos */
.hpnt-page .glyphicon-bold::before          { content:"\f032" !important; }
.hpnt-page .glyphicon-italic::before        { content:"\f033" !important; }
.hpnt-page .glyphicon-header::before        { content:"\f1dc" !important; }
.hpnt-page .glyphicon-link::before          { content:"\f0c1" !important; }
.hpnt-page .glyphicon-picture::before       { content:"\f03e" !important; }
.hpnt-page .glyphicon-list::before          { content:"\f03a" !important; }
.hpnt-page .glyphicon-list-alt::before      { content:"\f022" !important; }
.hpnt-page .glyphicon-indent-left::before   { content:"\f03b" !important; }
.hpnt-page .glyphicon-indent-right::before  { content:"\f03c" !important; }
.hpnt-page .glyphicon-quote::before         { content:"\f10d" !important; }
.hpnt-page .glyphicon-code::before          { content:"\f121" !important; }

.hpnt-page .glyphicon-eye-open::before      { content:"\f06e" !important; }
.hpnt-page .glyphicon-eye-close::before     { content:"\f070" !important; }
.hpnt-page .glyphicon-question-sign::before { content:"\f059" !important; }
.hpnt-page .glyphicon-remove::before        { content:"\f00d" !important; }
.hpnt-page .glyphicon-ok::before            { content:"\f00c" !important; }
.hpnt-page .glyphicon-fullscreen::before    { content:"\f065" !important; }

/* extras que você citou */
.hpnt-page .glyphicon-th-list::before  { content:"\f0cb" !important; } /* fa-list-ol */
.hpnt-page .glyphicon-console::before  { content:"\f121" !important; } /* fa-code */
.hpnt-page .glyphicon-comment::before  { content:"\f10d" !important; } /* fa-quote-left */

/* garante que o span não tente usar uma fonte antiga */
.hpnt-page .glyphicon{
  font-family: inherit !important;
  font-size: 14px;
  line-height: 1;
}
.hpnt-page .markdown-editor-toolbar .btn{
  min-width: 36px;
}