/* Abratel — full-width customer-portal skin. Uses osTicket's existing
   --accent (blue #2563eb) for consistency with the rest of the theme. */

:root {
  --abr-bg: #f4f7fb;
  --abr-bg-2: #eef2f9;
  --abr-surface: #ffffff;
  --abr-border: #e4e7ec;
  --abr-border-focus: #93c5fd;
  --abr-input-border: #bfdbfe;
  --abr-text: #0f172a;
  --abr-text-soft: #475467;
  --abr-text-muted: #667085;
  --abr-brand: #2563eb;
  --abr-brand-hover: #1d4ed8;
  --abr-brand-soft: rgba(37, 99, 235, 0.08);
  --abr-brand-glow: rgba(37, 99, 235, 0.18);
  --abr-danger: #D92D20;
  --abr-radius: 14px;
  --abr-radius-sm: 8px;
  --abr-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --abr-shadow: 0 8px 24px -10px rgba(16, 24, 40, 0.18);
  --abr-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.04), 0 4px 12px -6px rgba(16, 24, 40, 0.08);
  --abr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Page chrome — soft graphical bg so cards "pop" */
body {
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(37, 99, 235, 0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(14, 165, 233, 0.06), transparent 55%),
    var(--abr-bg) !important;
  background-attachment: fixed;
  color: var(--abr-text);
  font-family: var(--abr-font) !important;
  -webkit-font-smoothing: antialiased;
}

/* FULL WIDTH container — no max-width, just sensible side padding */
#container {
  background: transparent !important;
  box-shadow: none !important;
  max-width: none !important;
  width: 100% !important;
  padding: 28px clamp(16px, 4vw, 56px) 64px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Header strip — sticky with subtle blur over the soft bg */
#header {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--abr-border) !important;
  box-shadow: var(--abr-shadow-sm) !important;
  padding: 14px clamp(16px, 4vw, 56px) !important;
  position: sticky; top: 0; z-index: 50;
}
#header #logo img { max-height: 44px; }
#header .pull-right p { margin: 0; color: var(--abr-text-soft); font-size: 0.9rem; }
#header a { color: var(--abr-brand); }
#header a:hover { color: var(--abr-brand-hover); }

/* Page title (above the form) */
#main-content > h1,
#content > h1,
#content > h2,
h1.pull-left {
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  color: var(--abr-text) !important;
  margin: 8px 0 6px !important;
  letter-spacing: -0.025em;
}
#main-content > h1 + div,
#content > h1 + div,
#content > h2 + div {
  color: var(--abr-text-soft);
  margin-bottom: 28px;
  line-height: 1.55;
  max-width: 780px;
}

/* Hide legacy <hr> separators */
#ticketForm hr { display: none !important; }
#ticketForm td[style] { padding: 0 !important; }
#ticketForm tr > td { padding-top: 48px !important; }
#ticketForm tr:first-child > td { padding-top: 0 !important; }

/* Table → block layout, cards stack vertically and span full container */
#ticketForm > table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; }
#ticketForm > table,
#ticketForm > table > tbody,
#ticketForm > table > tbody > tr,
#ticketForm > table > tbody > tr > td {
  display: block !important;
  width: 100% !important;
  border: none !important;
}

#ticketForm > table > tbody {
  background: var(--abr-surface);
  border: 1px solid var(--abr-border);
  border-radius: var(--abr-radius);
  padding: clamp(24px, 2.8vw, 40px) clamp(24px, 2.8vw, 40px) clamp(18px, 2vw, 28px);
  margin: 0 0 6px;
  box-shadow: var(--abr-shadow-card);
  transition: box-shadow .15s, border-color .15s;
}
#ticketForm > table > tbody:hover { box-shadow: var(--abr-shadow); border-color: #d6dee8; }
#ticketForm > table > tbody:first-of-type { margin-top: 0; }

/* Section header */
#ticketForm .form-header {
  margin: 0 0 28px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--abr-border);
  position: relative;
}
#ticketForm .form-header::before {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px;
  background: var(--abr-brand); border-radius: 2px;
}
#ticketForm .form-header h3,
#ticketForm .form-header b {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--abr-text);
  margin: 0;
  letter-spacing: -0.015em;
}
#ticketForm .form-header > div:last-child p,
#ticketForm .form-header > div:last-child {
  font-size: 0.9rem;
  color: var(--abr-text-soft);
  margin: 6px 0 0 !important;
  line-height: 1.55;
  max-width: 780px;
}

/* Labels */
#ticketForm label {
  display: block;
  font-weight: 500;
  color: var(--abr-text);
  font-size: 0.9rem;
}
#ticketForm label .required { font-weight: 500; }
#ticketForm label .error { color: var(--abr-danger); margin-left: 2px; font-weight: 600; }
#ticketForm label br { display: none; }

/* Inputs — full-width within the card, blue-tinted border for visibility */
#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm input[type="tel"],
#ticketForm input[type="url"],
#ticketForm input[type="number"],
#ticketForm input[type="password"],
#ticketForm input[type="date"],
#ticketForm select,
#ticketForm textarea {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 11px 14px;
  border: 1.5px solid var(--abr-input-border);
  border-radius: var(--abr-radius-sm);
  background: #ffffff;
  color: var(--abr-text);
  transition: border-color .15s, box-shadow .15s, background .15s;
  margin-top: 12px;
  height: auto !important;
}
#ticketForm textarea { min-height: 110px; resize: vertical; }

#ticketForm input:hover,
#ticketForm select:hover,
#ticketForm textarea:hover { border-color: #93c5fd; }

#ticketForm input:focus,
#ticketForm select:focus,
#ticketForm textarea:focus {
  outline: none;
  border-color: var(--abr-brand);
  box-shadow: 0 0 0 4px var(--abr-brand-glow);
  background: #fbfdff;
}

/* Inline ramal / extensão */
#ticketForm input[size="5"],
#ticketForm input[name*="-ext"] {
  display: inline-block !important;
  width: 100px !important;
  margin-left: 10px;
  margin-top: 0;
  vertical-align: middle;
}

/* Select arrow */
#ticketForm select {
  background-image: linear-gradient(45deg, transparent 50%, var(--abr-text-soft) 50%), linear-gradient(135deg, var(--abr-text-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Buttons — blue submit, neutral secondary */
#ticketForm input[type="submit"],
#ticketForm input[type="reset"],
#ticketForm input[type="button"] {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--abr-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s, box-shadow .15s;
  min-width: 150px;
  letter-spacing: 0.01em;
}
#ticketForm input[type="submit"] {
  background: var(--abr-brand);
  color: #ffffff;
  border-color: var(--abr-brand);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18), 0 0 0 0 var(--abr-brand-glow);
}
#ticketForm input[type="submit"]:hover {
  background: var(--abr-brand-hover);
  border-color: var(--abr-brand-hover);
  box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35);
}
#ticketForm input[type="submit"]:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18); }
#ticketForm input[type="submit"]:focus { outline: none; box-shadow: 0 0 0 4px var(--abr-brand-glow); }

#ticketForm input[type="reset"],
#ticketForm input[type="button"] {
  background: #ffffff !important;
  color: var(--abr-text) !important;
  border-color: var(--abr-input-border) !important;
}
#ticketForm input[type="reset"]:hover,
#ticketForm input[type="button"]:hover {
  background: var(--abr-brand-soft) !important;
  border-color: var(--abr-brand) !important;
  color: var(--abr-brand-hover) !important;
}

/* Button row — last tbody */
#ticketForm > table > tbody:last-of-type {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px 0 0 !important;
  margin-top: 4px !important;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#ticketForm > table > tbody:last-of-type:hover {
  border: none !important; box-shadow: none !important;
}
#ticketForm > table > tbody:last-of-type tr,
#ticketForm > table > tbody:last-of-type td { display: contents !important; padding: 0 !important; }

/* Redactor */
#ticketForm .redactor-box {
  width: 100% !important;
  max-width: 100% !important;
  border: 1.5px solid var(--abr-input-border) !important;
  border-radius: var(--abr-radius-sm) !important;
  overflow: hidden;
  margin-top: 8px;
  transition: border-color .15s, box-shadow .15s;
}
#ticketForm .redactor-box:focus-within {
  border-color: var(--abr-brand) !important;
  box-shadow: 0 0 0 4px var(--abr-brand-glow);
}
#ticketForm .redactor-toolbar {
  border-bottom: 1px solid var(--abr-border) !important;
  background: #f7faff !important;
}
#ticketForm .redactor-editor { min-height: 160px; padding: 14px !important; line-height: 1.55; font-family: var(--abr-font) !important; font-size: 0.95rem; }

/* Filedrop */
#ticketForm .filedrop {
  border: 1.5px dashed var(--abr-input-border);
  border-radius: var(--abr-radius-sm);
  padding: 22px;
  background: #f7faff;
  margin-top: 12px;
  text-align: center;
  color: var(--abr-text-soft);
  transition: border-color .15s, background .15s, color .15s;
}
#ticketForm .filedrop:hover {
  border-color: var(--abr-brand);
  background: var(--abr-brand-soft);
  color: var(--abr-brand-hover);
}

/* Captcha */
#ticketForm img[alt*="captcha" i],
#ticketForm img[src*="captcha" i] {
  margin-top: 8px;
  border: 1.5px solid var(--abr-input-border);
  border-radius: var(--abr-radius-sm);
}

/* Topic selector */
#ticketForm select#topicId { max-width: 520px !important; }

/* Page tabs / breadcrumb (if any) */
.page-tabs { background: transparent !important; padding: 0 !important; margin-bottom: 14px; }
.page-tabs li.active a {
  border-bottom-color: var(--abr-brand) !important;
  color: var(--abr-brand) !important;
}

/* Footer */
#footer {
  color: var(--abr-text-muted);
  font-size: 0.85rem;
  padding: 24px clamp(16px, 4vw, 56px);
}
#footer a { color: var(--abr-brand); }
#footer a:hover { color: var(--abr-brand-hover); }

/* Mobile */
@media (max-width: 720px) {
  #container { padding: 16px 12px 40px !important; }
  #header { padding: 12px 12px !important; }
  #ticketForm > table > tbody { padding: 20px; border-radius: var(--abr-radius-sm); }
  #ticketForm input[type="submit"],
  #ticketForm input[type="reset"],
  #ticketForm input[type="button"] { width: 100%; min-width: 0; }
  #ticketForm > table > tbody:last-of-type { flex-direction: column-reverse; }
  #main-content > h1, #content > h1, #content > h2, h1.pull-left { font-size: 1.5rem !important; }
}

/* Larger screens — bring breathing room without limiting card width */
@media (min-width: 1600px) {
  #container { padding: 32px clamp(40px, 6vw, 96px) 72px !important; }
}

/* ── FORCE FULL WIDTH ───────────────────────────────────────────────────────
   The theme adds padding to both #container and #content, leaving 52-92px of
   gutter on each side. Strip it down to the bare minimum so the form
   actually touches the screen edges. */
html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; overflow-x: hidden; }
#container { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; }
#content {
  padding: 14px clamp(10px, 1vw, 24px) 56px !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#header {
  padding: 14px clamp(10px, 1vw, 24px) !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
#footer {
  padding: 16px clamp(10px, 1vw, 24px) !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
#ticketForm,
#ticketForm > table { width: 100% !important; max-width: none !important; }
#ticketForm > table { table-layout: auto; }
/* Cards take the full width too — already block-level, but make explicit */
#ticketForm > table > tbody { width: 100% !important; max-width: none !important; box-sizing: border-box; }


/* Categoria is a single-row card → shrink its bottom padding + margin so it
   visually attaches to the next section (Comercial - Cadastro). */
#ticketForm > table > tbody:nth-of-type(2) {
  padding-bottom: 14px !important;
  padding-top: clamp(18px, 2vw, 26px) !important;
  margin-bottom: 4px !important;
}
#ticketForm > table > tbody:nth-of-type(2) .form-header {
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
}
#ticketForm > table > tbody:nth-of-type(2) tr > td { padding-top: 0 !important; }
/* The next card (Comercial - Cadastro) — slimmer top padding too */
#ticketForm > table > tbody:nth-of-type(3) {
  padding-top: clamp(20px, 2.2vw, 28px) !important;
}


/* view.php (Verificar Status do Chamado) — generic .btn submit was rendering
   white-on-white because base scp btn classes don't load on the client side.
   Force a visible style consistent with the rest of the public theme. */
.login-box input[type=submit].btn,
.login-box input[type=button].btn,
.access-link input[type=submit].btn,
input.btn[type=submit],
input.btn[type=button] {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  padding: 9px 22px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  transition: filter .12s !important;
}
input.btn[type=submit]:hover,
input.btn[type=button]:hover {
  filter: brightness(1.05) !important;
}