/* ==========================================================================
   Kapit override — Customer / client portal
   Loads AFTER assets/default/css/theme.css. Restyles color / type / shape;
   keeps osTicket's layout (the fixed 840px container) intact so inner
   fixed-width blocks don't break. Requires kapit-tokens.css (loaded first).
   ========================================================================== */

/* ------------------------------------------------------------------ Base -- */
body {
  background: var(--sand-1) !important;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
body, input, select, textarea { font-family: var(--font-body); color: var(--ink); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: -.02em; color: var(--ink); }
h1 { color: var(--ink); }

/* Links → teal */
a, .link { color: var(--kapit-teal-700); }
a:hover, .link:hover { border-bottom-color: var(--kapit-teal-500); color: var(--kapit-teal-800); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .button:focus-visible {
  outline: 3px solid var(--kapit-teal-200);
  outline-offset: 2px;
}

/* --------------------------------------------------------- Page container - */
#container {
  background: #fff;
  border: 1px solid var(--sand-3);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin-top: 24px;
  margin-bottom: 40px;
}

/* --------------------------------------------------------------- Header --- */
#header {
  background: var(--sand-0);
  border-bottom: 1px solid var(--sand-3);
}
#header #logo img { max-height: 46px; max-width: 220px; }
#header p a { color: var(--kapit-teal-700); font-weight: 500; }

/* Thin teal accent line at the very top of the frame */
#container::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--kapit-teal-500);
}

/* ----------------------------------------------------------------- Nav ---- */
#nav {
  background: var(--sand-1);
  border-top: 1px solid var(--sand-3);
  border-bottom: 1px solid var(--sand-3);
  box-shadow: none;
}
#nav li a {
  color: var(--ink-soft);
  font-weight: 500;
  border-radius: var(--radius-pill);
}
#nav li a.active {
  background-color: var(--kapit-teal-50);
  color: var(--kapit-teal-800);
  font-weight: 600;
}
#nav li a:hover {
  background-color: var(--kapit-teal-50);
  color: var(--kapit-teal-800);
}

/* --------------------------------------------------------------- Content -- */
#content { color: var(--ink); }

/* --------------------------------------------------------------- Buttons -- */
.button, .button:visited {
  background: var(--ink);
  background-color: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  border-radius: var(--radius-pill);
  box-shadow: none;
  text-shadow: none;
  border-bottom: none;
  padding: 10px 24px;
  transition: background-color var(--dur-1);
}
.button:hover { background-color: var(--kapit-teal-800); color: #fff; }
.button:active { top: 0; box-shadow: none; }

/* Primary (green in stock) → teal */
.green.button, .green.button:visited,
.button.green, input.green {
  background-color: var(--kapit-teal-500) !important;
  color: #fff !important;
}
.green.button:hover { background-color: var(--kapit-teal-600) !important; }

/* Blue → teal too (keep a single brand hue) */
.blue.button, .blue.button:visited { background-color: var(--kapit-teal-500) !important; }
.blue.button:hover { background-color: var(--kapit-teal-600) !important; }

/* -------------------------------------------------------- Forms & fields -- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=url], input[type=tel], select, textarea {
  border: 1.5px solid var(--sand-3);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  padding: 8px 16px;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
textarea { border-radius: var(--radius-2); }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=number]:focus, input[type=search]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--kapit-teal-500);
  box-shadow: 0 0 0 3px var(--kapit-teal-100);
}
input[type=checkbox], input[type=radio] { accent-color: var(--kapit-teal-500); }
.error input, input.error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }

/* -------------------------------------------------- Status / message bars - */
.error_bar {
  background: var(--danger-bg) !important;
  color: var(--danger-tx) !important;
  border: 1px solid var(--danger) !important;
  border-radius: var(--radius-1);
}
.warning_bar {
  background: var(--warning-bg) !important;
  color: var(--warning-tx) !important;
  border: 1px solid var(--warning) !important;
  border-radius: var(--radius-1);
}
.notice_bar {
  background: var(--kapit-teal-50) !important;
  color: var(--kapit-teal-900) !important;
  border: 1px solid var(--kapit-teal-300) !important;
  border-radius: var(--radius-1);
}

/* --------------------------------------------------------------- Tables --- */
table.list thead th, table.list th {
  background: var(--sand-0);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--sand-3);
}
table.list tbody td { border-bottom: 1px solid var(--sand-2); }
table.list tbody tr:hover td { background: var(--sand-0); }

/* ------------------------------------------------------- FAQ / KB cards --- */
.faq-content, #kb .category, .kb-category {
  background: #fff;
  border: 1px solid var(--sand-3);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
}

/* --------------------------------------------------------------- Footer --- */
#footer { color: var(--ink-soft); }
#footer a { color: var(--kapit-teal-700); }