@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --navy-900:#0F172A;--navy-800:#1E293B;--navy-700:#334155;--navy-600:#475569;
  --navy-400:#94A3B8;--navy-200:#CBD5E1;--navy-100:#E2E8F0;--navy-50:#F8FAFC;
  --indigo-600:#4F46E5;--indigo-500:#6366F1;--indigo-400:#818CF8;--indigo-50:#EEF2FF;
  --font-display:'Plus Jakarta Sans',sans-serif;--font-body:'DM Sans',sans-serif;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--transition:150ms cubic-bezier(.4,0,.2,1);
}

/* Body e fundo */
body {
  font-family: var(--font-body) !important;
  background: var(--navy-50) !important;
  background-image: none !important;
  color: var(--navy-900) !important;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--font-display) !important; color: var(--navy-900) !important; }

/* Container — remove width fixo */
#container {
  width: 100% !important;
  max-width: 1100px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* Header */
#header {
  background-color: var(--navy-900) !important;
  background-image: none !important;
  height: auto !important;
  min-height: 64px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
}

#logo {
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 14px 0 !important;
}

#header #logo img {
  max-height: 38px !important;
  max-width: 240px !important;
  filter: brightness(0) invert(1);
}

.valign-helper { display: none !important; }

#header .pull-right { display: flex; align-items: center; }
#header .pull-right a {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--indigo-600) !important;
  padding: 8px 18px !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  transition: background var(--transition) !important;
}
#header .pull-right a:hover { background: var(--indigo-500) !important; }

/* Nav */
#nav {
  background: var(--navy-800) !important;
  background-image: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--navy-700) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 24px !important;
  display: flex !important;
}

#nav li { display: inline !important; margin: 0 !important; padding: 0 !important; }

#nav li a {
  display: inline-block !important;
  height: auto !important;
  line-height: normal !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--navy-400) !important;
  padding: 12px 14px 12px 14px !important;
  margin-left: 0 !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 2px solid transparent !important;
  text-decoration: none !important;
  transition: all var(--transition) !important;
}

/* Remove os ícones do nav */
#nav li a.home,
#nav li a.kb,
#nav li a.new,
#nav li a.status,
#nav li a.tickets {
  background-image: none !important;
  padding-left: 14px !important;
}

#nav li a:hover {
  color: #fff !important;
  background-color: transparent !important;
  border-bottom-color: var(--indigo-400) !important;
}

#nav li a.active {
  color: #fff !important;
  background-color: transparent !important;
  border-bottom-color: var(--indigo-500) !important;
  font-weight: 600 !important;
}

/* Links gerais */
a { color: var(--indigo-600) !important; text-decoration: none !important; }
a:hover { color: var(--indigo-500) !important; }
a.link { display: inline !important; }

/* Content */
#content { padding: 40px 24px !important; }

/* Landing page */
#landing_page { display: flex !important; gap: 32px !important; align-items: flex-start !important; }

#landing_page .content,
#landing_page .main-content {
  flex: 1 !important;
  background: #fff !important;
  border: 1px solid var(--navy-100) !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.08) !important;
}

#landing_page .thread-body { font-size: 15px !important; color: var(--navy-600) !important; line-height: 1.7 !important; }

#landing_page .sidebar { width: 210px !important; flex-shrink: 0 !important; float: none !important; }

.front-page-button { display: flex !important; flex-direction: column !important; gap: 12px !important; }

/* Botão Open a New Ticket */
.blue.button,
.blue.button:visited,
a.blue.button,
a.blue.button:visited {
  background-color: var(--indigo-600) !important;
  background: var(--indigo-600) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  padding: 14px 20px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.3) !important;
  text-shadow: none !important;
  border-bottom: none !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
  transition: all var(--transition) !important;
}
.blue.button:hover, a.blue.button:hover {
  background-color: var(--indigo-500) !important;
  background: var(--indigo-500) !important;
  color: #fff !important;
}

/* Botão Check Ticket Status */
.green.button,
.green.button:visited,
a.green.button,
a.green.button:visited {
  background-color: #fff !important;
  background: #fff !important;
  color: var(--navy-700) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--navy-200) !important;
  border-bottom: 1.5px solid var(--navy-200) !important;
  padding: 13px 20px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
  transition: all var(--transition) !important;
}
.green.button:hover, a.green.button:hover {
  background-color: var(--navy-50) !important;
  background: var(--navy-50) !important;
  border-color: var(--indigo-400) !important;
  color: var(--indigo-600) !important;
}

/* Formulários */
label { font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--navy-700) !important; }
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="search"],select,textarea {
  border: 1.5px solid var(--navy-200) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  color: var(--navy-900) !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  padding: 10px 14px !important;
  outline: none;
  transition: all var(--transition) !important;
  box-shadow: none !important;
}
input:focus,select:focus,textarea:focus { border-color: var(--indigo-500) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important; }
textarea { min-height: 130px; resize: vertical; }
input[type="submit"],button[type="submit"] {
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 14px !important;
  background: var(--indigo-600) !important; color: #fff !important; border: none !important;
  border-radius: var(--radius-md) !important; padding: 11px 24px !important; cursor: pointer;
}
input[type="submit"]:hover,button[type="submit"]:hover { background: var(--indigo-500) !important; }

/* Tabelas */
table.tickets,table.list { width:100%!important;background:#fff!important;border:1px solid var(--navy-100)!important;border-radius:var(--radius-lg)!important;overflow:hidden!important;box-shadow:0 1px 3px rgba(15,23,42,.08)!important;border-collapse:collapse!important; }
table.tickets thead th,table.list thead th { font-family:var(--font-display)!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.8px!important;color:var(--navy-600)!important;background:var(--navy-50)!important;padding:12px 16px!important;border-bottom:2px solid var(--navy-100)!important; }
table.tickets tbody tr:hover,table.list tbody tr:hover { background:var(--indigo-50)!important; }
table.tickets tbody td,table.list tbody td { padding:13px 16px!important;font-size:14px!important;color:var(--navy-800)!important;border-bottom:1px solid var(--navy-50)!important; }

/* Footer */
#footer { background:var(--navy-900)!important;background-image:none!important;padding:28px 24px!important;margin-top:60px!important;text-align:center!important;color:var(--navy-600)!important;font-size:13px!important; }
#poweredBy,#footer a { color:var(--navy-600)!important;font-size:12px!important; }
#footer a:hover { color:var(--indigo-400)!important; }

/* Scrollbar */
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--navy-50)}::-webkit-scrollbar-thumb{background:var(--navy-200);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--navy-400)}