/* ==========================================================
   HostingPro - Support Tickets List (UX style)
   File: hp-supporttickets.css
   Escopo TOTAL: #hpSupportTickets
   ========================================================== */

#hpSupportTickets,
#hpSupportTickets * { box-sizing: border-box; }

#hpSupportTickets {
  padding: 0;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
}

/* ===== Botão Novo Ticket (mobile) ===== */
#hpSupportTickets .hp-st-mobile-action {
  display: none;
}

@media (max-width: 860px) {
  #hpSupportTickets .hp-st-mobile-action {
    display: flex;
    justify-content: flex-end;
    padding: 0 4px 12px;
  }
  #hpSupportTickets .hp-st-new-ticket-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--brand, #6b3cc9);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(107, 60, 201, .25);
    transition: transform .15s, box-shadow .15s;
  }
  #hpSupportTickets .hp-st-new-ticket-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(107, 60, 201, .35);
  }
}

/* Base */
#hpSupportTickets a { text-decoration: none; }
#hpSupportTickets button,
#hpSupportTickets input,
#hpSupportTickets select {
  font-family: inherit;
}

#hpSupportTickets .hp-st-main {
  padding: 24px;
}

/* Header */
#hpSupportTickets .hp-st-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
  box-shadow: 0 6px 22px rgba(0,0,0,.04);
}

#hpSupportTickets .hp-st-header-inner {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#hpSupportTickets .hp-st-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

#hpSupportTickets .hp-st-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: #6b7280;
  font-weight: 700;
}

#hpSupportTickets .hp-st-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Buttons */
#hpSupportTickets .hp-st-iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all .2s ease;
}

#hpSupportTickets .hp-st-iconbtn:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.06);
}

#hpSupportTickets .hp-st-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
}

#hpSupportTickets .hp-st-primarybtn {
  border: 0;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  white-space: nowrap;
}

#hpSupportTickets .hp-st-primarybtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
}

#hpSupportTickets .hp-st-full { width: 100%; justify-content: center; }

#hpSupportTickets .hp-st-sortbtn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
#hpSupportTickets .hp-st-sortbtn:hover {
  border-color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.06);
}

/* Gradients (mesmo padrão do domínio) */
#hpSupportTickets .hp-g-blue  { background: linear-gradient(135deg,#4facfe 0%,#00f2fe 100%); }
#hpSupportTickets .hp-g-green { background: linear-gradient(135deg,#43e97b 0%,#38f9d7 100%); }
#hpSupportTickets .hp-g-orange{ background: linear-gradient(135deg,#fa709a 0%,#fee140 100%); }
#hpSupportTickets .hp-g-red   { background: linear-gradient(135deg,#f093fb 0%,#f5576c 100%); }
#hpSupportTickets .hp-g-purple{ background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); }

/* Muted */
#hpSupportTickets .hp-st-muted { color: #6b7280; font-weight: 700; }

/* Cards */
#hpSupportTickets .hp-st-card {
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

#hpSupportTickets .hp-st-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

#hpSupportTickets .hp-st-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 16px 0;
  opacity: .9;
}

/* Stats */
#hpSupportTickets .hp-st-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 18px;
}

#hpSupportTickets .hp-st-stat {
  border-radius: 18px;
  padding: 18px;
  color: #fff;
  box-shadow: 0 14px 35px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

#hpSupportTickets .hp-st-stat:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0,0,0,.14);
}

#hpSupportTickets .hp-st-stat::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  transition: all .6s ease;
}
#hpSupportTickets .hp-st-stat:hover::before {
  top: -30%;
  right: -30%;
}

#hpSupportTickets .hp-st-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

#hpSupportTickets .hp-st-stat-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

#hpSupportTickets .hp-st-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

#hpSupportTickets .hp-st-stat-big {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}

#hpSupportTickets .hp-st-stat-label {
  margin-top: 6px;
  font-weight: 700;
  opacity: .95;
}

#hpSupportTickets .hp-st-stat-hint {
  margin-top: 10px;
  font-size: 12px;
  opacity: .92;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Grid (filtros + lista) */
#hpSupportTickets .hp-st-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  align-items: start;
  margin: 10px 0 18px;
}

#hpSupportTickets .hp-st-filters .hp-st-card { padding: 16px; }
#hpSupportTickets .hp-st-filter-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
  font-size: 13px;
}

#hpSupportTickets .hp-st-filter-block { margin-top: 6px; }

#hpSupportTickets .hp-st-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  user-select: none;
}

#hpSupportTickets .hp-st-check-input {
  width: 16px;
  height: 16px;
  accent-color: #667eea;
}

#hpSupportTickets .hp-st-check-text {
  font-size: 13px;
  font-weight: 800;
  color: #374151;
}

#hpSupportTickets .hp-st-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

#hpSupportTickets .hp-c-yellow { background: #fef9c3; color: #854d0e; }
#hpSupportTickets .hp-c-blue   { background: #dbeafe; color: #1e40af; }
#hpSupportTickets .hp-c-green  { background: #dcfce7; color: #166534; }
#hpSupportTickets .hp-c-gray   { background: #f3f4f6; color: #374151; }

#hpSupportTickets .hp-st-dotcolor {
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
#hpSupportTickets .hp-d-red { background: #ef4444; }
#hpSupportTickets .hp-d-orange { background: #f59e0b; }
#hpSupportTickets .hp-d-green { background: #22c55e; }

#hpSupportTickets .hp-st-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  font-weight: 800;
  color: #374151;
  outline: none;
  background: #fff;
}
#hpSupportTickets .hp-st-select:focus { border-color: #667eea; }

/* Quick links */
#hpSupportTickets .hp-st-quick-title {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

#hpSupportTickets .hp-st-quickbtn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid #eef2f7;
  color: #374151;
  font-weight: 800;
  transition: all .18s ease;
}

#hpSupportTickets .hp-st-quickbtn i { color: #667eea; margin-right: 8px; }
#hpSupportTickets .hp-st-quickbtn:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}

/* List head */
#hpSupportTickets .hp-st-list .hp-st-card { padding: 16px; }

#hpSupportTickets .hp-st-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
  margin-bottom: 14px;
}

#hpSupportTickets .hp-st-list-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#hpSupportTickets .hp-st-searchwrap {
  position: relative;
}

#hpSupportTickets .hp-st-searchico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
}

#hpSupportTickets .hp-st-search {
  width: 320px;
  padding: 11px 12px 11px 36px;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  font-weight: 800;
  outline: none;
}
#hpSupportTickets .hp-st-search:focus { border-color: #667eea; }

/* Ticket rows */
#hpSupportTickets .hp-st-tickets { display: grid; gap: 12px; }

#hpSupportTickets .hp-st-row {
  border: 2px solid #f3f4f6;
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: all .2s ease;
  background: #fff;
}

#hpSupportTickets .hp-st-row:hover {
  border-color: #e5e7eb;
  box-shadow: 0 18px 36px rgba(0,0,0,.06);
  background: linear-gradient(90deg, rgba(102,126,234,0.05) 0%, transparent 100%);
  transform: translateY(-2px);
}

#hpSupportTickets .hp-st-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#hpSupportTickets .hp-st-row-left {
  display: flex;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

#hpSupportTickets .hp-st-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

#hpSupportTickets .hp-st-row-main { min-width: 0; }

#hpSupportTickets .hp-st-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

#hpSupportTickets .hp-st-num {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

#hpSupportTickets .hp-st-meta-lite {
  font-size: 12px;
  font-weight: 800;
  color: #6b7280;
}

#hpSupportTickets .hp-st-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
  display: inline-block;
}

#hpSupportTickets .hp-st-subject {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 2px 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hpSupportTickets .hp-st-mini {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #6b7280;
  font-weight: 800;
}
#hpSupportTickets .hp-st-mini i { margin-right: 6px; color: #6b7280; }

#hpSupportTickets .hp-st-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* Status pills */
#hpSupportTickets .hp-st-status {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
}

#hpSupportTickets .hp-s-yellow { background: #fef3c7; color: #92400e; border-color: #fde68a; }
#hpSupportTickets .hp-s-blue   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
#hpSupportTickets .hp-s-green  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
#hpSupportTickets .hp-s-gray   { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }

/* Agent stub */
#hpSupportTickets .hp-st-agent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #6b7280;
}

#hpSupportTickets .hp-st-agent-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
}

/* Bottom row */
#hpSupportTickets .hp-st-row-bottom {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#hpSupportTickets .hp-st-upd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 800;
}

#hpSupportTickets .hp-st-upd-val { color: #374151; font-weight: 700; }

#hpSupportTickets .hp-st-link {
  color: #667eea;
  font-weight: 700;
  font-size: 13px;
  transition: color .18s ease;
}
#hpSupportTickets .hp-st-link:hover { color: #764ba2; }

/* Footer pagination (visual) */
#hpSupportTickets .hp-st-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#hpSupportTickets .hp-st-pagebtn {
  border: 2px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all .18s ease;
}

#hpSupportTickets .hp-st-pagebtn:hover {
  border-color: #667eea;
  color: #667eea;
}

#hpSupportTickets .hp-st-pagebtn.is-active {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#hpSupportTickets .hp-st-pagebtn.is-disabled {
  opacity: .55;
  pointer-events: none;
}

/* Empty state */
#hpSupportTickets .hp-st-empty {
  border: 2px dashed #e5e7eb;
  border-radius: 16px;
  padding: 26px;
  text-align: center;
  color: #6b7280;
}

#hpSupportTickets .hp-st-empty-ico {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #667eea;
  box-shadow: 0 12px 24px rgba(0,0,0,.06);
}

#hpSupportTickets .hp-st-empty-title {
  font-weight: 700;
  color: #111827;
  margin-top: 6px;
}

#hpSupportTickets .hp-st-empty-sub {
  margin-top: 6px;
  font-weight: 700;
}

/* Knowledge Base */
#hpSupportTickets .hp-st-kb { margin-top: 18px; }

#hpSupportTickets .hp-st-kb-card { padding: 18px; }

#hpSupportTickets .hp-st-kb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#hpSupportTickets .hp-st-kb-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

#hpSupportTickets .hp-st-kb-link {
  color: #667eea;
  font-weight: 700;
  font-size: 13px;
}
#hpSupportTickets .hp-st-kb-link:hover { color: #764ba2; }

#hpSupportTickets .hp-st-kb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#hpSupportTickets .hp-st-kb-box {
  border: 2px solid #f3f4f6;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  transition: all .2s ease;
  color: inherit;
}

#hpSupportTickets .hp-st-kb-box:hover {
  border-color: #667eea;
  box-shadow: 0 18px 34px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

#hpSupportTickets .hp-st-kb-ico {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  margin-bottom: 12px;
}

#hpSupportTickets .hp-st-kb-box-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

#hpSupportTickets .hp-st-kb-box-sub {
  color: #6b7280;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}

#hpSupportTickets .hp-st-kb-box-meta {
  font-size: 12px;
  color: #6b7280;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#hpSupportTickets .hp-st-kb-pop-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

#hpSupportTickets .hp-st-kb-pop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#hpSupportTickets .hp-st-kb-popitem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid #eef2f7;
  color: #374151;
  font-weight: 800;
  transition: all .18s ease;
}

#hpSupportTickets .hp-st-kb-popitem i { color: #667eea; margin-top: 2px; }
#hpSupportTickets .hp-st-kb-popitem:hover { background: #f3f4f6; transform: translateY(-1px); }

/* Bottom section (team + hours) */
#hpSupportTickets .hp-st-bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

#hpSupportTickets .hp-st-btitle {
  margin: 2px 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

#hpSupportTickets .hp-st-team { display: grid; gap: 12px; }

#hpSupportTickets .hp-st-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border-left: 4px solid #667eea;
  background: linear-gradient(90deg, rgba(219,234,254,.55) 0%, transparent 100%);
}

#hpSupportTickets .hp-p-green { border-left-color: #22c55e; background: linear-gradient(90deg, rgba(220,252,231,.70) 0%, transparent 100%); }
#hpSupportTickets .hp-p-purple { border-left-color: #a855f7; background: linear-gradient(90deg, rgba(243,232,255,.70) 0%, transparent 100%); }

#hpSupportTickets .hp-st-person-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #e5e7eb;
  border: 4px solid #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  flex-shrink: 0;
}

#hpSupportTickets .hp-st-person-main { flex: 1; min-width: 0; }

#hpSupportTickets .hp-st-person-name {
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

#hpSupportTickets .hp-st-person-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#hpSupportTickets .hp-st-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

#hpSupportTickets .hp-b-green { background: #dcfce7; color: #166534; }
#hpSupportTickets .hp-b-gray  { background: #f3f4f6; color: #374151; }

#hpSupportTickets .hp-st-person-rate {
  text-align: right;
  min-width: 160px;
}

#hpSupportTickets .hp-st-stars {
  display: inline-flex;
  gap: 4px;
  color: #f59e0b;
  font-size: 12px;
  margin-bottom: 6px;
}
#hpSupportTickets .hp-st-star-off { color: #d1d5db; }

/* Hours */
#hpSupportTickets .hp-st-hours { display: grid; gap: 12px; }

#hpSupportTickets .hp-st-hour {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(219,234,254,.55) 0%, transparent 100%);
}

#hpSupportTickets .hp-h-green { background: linear-gradient(90deg, rgba(220,252,231,.70) 0%, transparent 100%); }
#hpSupportTickets .hp-h-orange { background: linear-gradient(90deg, rgba(255,237,213,.70) 0%, transparent 100%); }

#hpSupportTickets .hp-st-hour-ico {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  flex-shrink: 0;
}

#hpSupportTickets .hp-st-hour-main { flex: 1; min-width: 0; }

#hpSupportTickets .hp-st-hour-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

#hpSupportTickets .hp-st-live {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.20);
}

/* Premium */
#hpSupportTickets .hp-st-premium {
  margin-top: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #e9d5ff;
  background: linear-gradient(90deg, rgba(243,232,255,.85) 0%, rgba(253,242,248,.75) 100%);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

#hpSupportTickets .hp-st-premium i {
  color: #7c3aed;
  font-size: 18px;
  margin-top: 2px;
}

#hpSupportTickets .hp-st-premium-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

#hpSupportTickets .hp-st-premium-text {
  color: #6b7280;
  font-weight: 700;
  font-size: 13px;
}

/* Satisfaction */
#hpSupportTickets .hp-st-sat { margin-top: 16px; }

#hpSupportTickets .hp-st-sat-card { padding: 18px; }

#hpSupportTickets .hp-st-sat-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#hpSupportTickets .hp-st-sat-box {
  border-radius: 18px;
  padding: 16px;
  border: 2px solid transparent;
  text-align: center;
}

#hpSupportTickets .hp-st-sat-ico {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

#hpSupportTickets .hp-st-sat-big {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 6px;
}

#hpSupportTickets .hp-st-sat-lbl {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
}

#hpSupportTickets .hp-sat-green { background: linear-gradient(135deg, rgba(220,252,231,.75) 0%, rgba(187,247,208,.75) 100%); border-color: #bbf7d0; }
#hpSupportTickets .hp-sat-green .hp-st-sat-ico { background: #22c55e; }
#hpSupportTickets .hp-sat-green .hp-st-sat-big { color: #16a34a; }

#hpSupportTickets .hp-sat-blue { background: linear-gradient(135deg, rgba(219,234,254,.75) 0%, rgba(191,219,254,.75) 100%); border-color: #bfdbfe; }
#hpSupportTickets .hp-sat-blue .hp-st-sat-ico { background: #3b82f6; }
#hpSupportTickets .hp-sat-blue .hp-st-sat-big { color: #2563eb; }

#hpSupportTickets .hp-sat-orange { background: linear-gradient(135deg, rgba(255,237,213,.80) 0%, rgba(254,215,170,.75) 100%); border-color: #fed7aa; }
#hpSupportTickets .hp-sat-orange .hp-st-sat-ico { background: #f59e0b; }
#hpSupportTickets .hp-sat-orange .hp-st-sat-big { color: #ea580c; }

#hpSupportTickets .hp-sat-purple { background: linear-gradient(135deg, rgba(243,232,255,.80) 0%, rgba(233,213,255,.75) 100%); border-color: #e9d5ff; }
#hpSupportTickets .hp-sat-purple .hp-st-sat-ico { background: #a855f7; }
#hpSupportTickets .hp-sat-purple .hp-st-sat-big { color: #7c3aed; }

/* Responsive */
@media (max-width: 1200px) {
  #hpSupportTickets .hp-st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hpSupportTickets .hp-st-sat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hpSupportTickets .hp-st-kb-grid { grid-template-columns: 1fr; }
  #hpSupportTickets .hp-st-kb-pop-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  #hpSupportTickets .hp-st-grid { grid-template-columns: 1fr; }
  #hpSupportTickets .hp-st-bottom { grid-template-columns: 1fr; }
  #hpSupportTickets .hp-st-search { width: 100%; min-width: 220px; }
  #hpSupportTickets .hp-st-list-head { flex-direction: column; align-items: stretch; }
  #hpSupportTickets .hp-st-list-actions { justify-content: space-between; }
}

@media (max-width: 860px) {
  #hpSupportTickets .hp-st-main { padding: 12px; }
  #hpSupportTickets .hp-st-header-inner { padding: 14px 16px; }
  #hpSupportTickets .hp-st-head-right { width: 100%; justify-content: flex-end; }
  #hpSupportTickets .hp-st-footer { flex-direction: column; align-items: stretch; }
  #hpSupportTickets .hp-st-footer-right { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  #hpSupportTickets .hp-st-search { width: 100%; min-width: 0; }

  /* Fix filter toolbar wrapping on mobile */
  #hpSupportTickets .hp-st-list-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  #hpSupportTickets .hp-st-searchwrap {
    flex: 1 1 auto;
    min-width: 0;
  }
  #hpSupportTickets .hp-st-filterbtn {
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 13px;
  }
  #hpSupportTickets .hp-st-sortbtn {
    flex-shrink: 0;
  }

  /* Prevent horizontal overflow */
  #hpSupportTickets,
  #hpSupportTickets .hp-st-card,
  #hpSupportTickets .hp-st-list,
  #hpSupportTickets .hp-st-row{
    max-width:100%;
    overflow-x:hidden;
    word-break:break-word;
  }

  /* Stack row content vertically */
  #hpSupportTickets .hp-st-row-top{
    flex-direction:column;
    gap:8px;
  }
  #hpSupportTickets .hp-st-meta{
    flex-wrap:wrap;
    gap:6px;
  }
  #hpSupportTickets .hp-st-row{
    padding:12px;
  }

  /* Stats cards 2x2 */
  #hpSupportTickets .hp-st-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  /* Allow ticket subject to wrap on mobile */
  #hpSupportTickets .hp-st-subject{
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    font-size:15px;
    line-height:1.35;
  }
}

/* =========================
   Combo de Filtros (dropdown)
   ========================= */

.hp-st-filters-combo {
  position: relative;
}

.hp-st-filterbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.hp-st-filterbtn:hover {
  background: #f9fafb;
}

.hp-st-filterbox {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 280px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  padding: 14px;
  display: none;
  z-index: 50;
}

.hp-st-filterbox.is-open {
  display: block;
}

.hp-st-filterbox-title {
  font-weight: 800;
  margin-bottom: 8px;
}

.hp-st-filterbox-section {
  margin-bottom: 12px;
}

.hp-st-filterbox .hp-st-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.hp-st-filterbox .hp-st-full {
  margin-top: 10px;
}

/* =========================================================
   Tickets com o mesmo "comprimento" (largura) da Base de Conhecimento
   ========================================================= */

/* garante que o bloco da lista use a largura toda */
.hp-st-grid-single,
.hp-st-grid-single .hp-st-list,
.hp-st-grid-single .hp-st-card {
  width: 100%;
  max-width: 100%;
}

/* se o grid estiver com 2 colunas em algum breakpoint, força 1 coluna */
.hp-st-grid {
  grid-template-columns: 1fr !important;
}

/* evita qualquer limitação herdada */
.hp-st-list {
  min-width: 0;
}

/* ==================================
   TYPO TUNING (Support Tickets)
   - alivia o “tudo bold” mantendo títulos/badges fortes
================================== */

#hpSupportTickets{
  font-weight: 400;
}

/* subtítulos e textos auxiliares */
#hpSupportTickets .hp-st-sub,
#hpSupportTickets .hp-st-muted,
#hpSupportTickets .hp-st-meta-lite,
#hpSupportTickets .hp-st-mini,
#hpSupportTickets .hp-st-agent,
#hpSupportTickets .hp-st-upd,
#hpSupportTickets .hp-st-kb-box-sub,
#hpSupportTickets .hp-st-premium-text,
#hpSupportTickets .hp-st-empty-sub{
  font-weight: 500;
}

/* filtros/labels: médio, não “gritando” */
#hpSupportTickets .hp-st-check-text,
#hpSupportTickets .hp-st-select{
  font-weight: 600;
}

/* campo de busca */
#hpSupportTickets .hp-st-search{
  font-weight: 600;
}

/* mantém os “valores” importantes em destaque */
#hpSupportTickets .hp-st-upd-val{
  font-weight: 800;
}

/* mantém títulos, assunto, status, botões e contadores como estão (900) */

/* =========================
   FIX: WebView Capacitor (iOS app)
   - Botão "Abrir Ticket" sem estilo
   - Botão "Filtros" com texto vertical
   ========================= */

/* Garante que o botão Abrir Ticket tenha estilo sempre */
#hpSupportTickets .hp-st-new-ticket-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  background: #6b3cc9 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(107, 60, 201, .25) !important;
  white-space: nowrap !important;
}

/* Toolbar: search não pode esmagar os outros botões */
#hpSupportTickets .hp-st-list-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
#hpSupportTickets .hp-st-searchwrap {
  flex: 1 1 0% !important;
  min-width: 100px !important;
  max-width: calc(100% - 120px) !important;
}

/* Sort e Filtros: nunca encolher */
#hpSupportTickets .hp-st-sortbtn {
  flex: 0 0 auto !important;
}
#hpSupportTickets .hp-st-filters-combo {
  flex: 0 0 auto !important;
}
#hpSupportTickets .hp-st-filterbtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 10px 14px !important;
}
#hpSupportTickets .hp-st-filterbtn span {
  white-space: nowrap !important;
  display: inline !important;
}