/* =========================================================
   IT Assistent — osTicket kundeportal-tema (v3, lys udgave)
   Matcher www.it-assistent.dk 1:1 — hvid baggrund, sort tekst,
   orange accent, mørkt terminal-kort som signatur-element.
   Verificeret live på support.it-assistent.dk
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:       #15161A;  /* sort tekst */
  --gray:      #6B6D76;  /* grå brødtekst */
  --line:      #E4E4E1;  /* lyse streger/kant */
  --card:      #F7F7F7;  /* let baggrund til bokse */
  --orange:    #F5821F;
  --orange-hv: #FF9A44;
}

/* ---------- base ---------- */
body{
  background:#FFFFFF !important;
  color:var(--ink) !important;
  font-family:'Inter',Helvetica,Arial,sans-serif !important;
}
a{ color:var(--orange); }
a:hover{ color:var(--orange-hv); }
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif !important;
  color:var(--ink) !important;
  letter-spacing:-0.01em;
}

/* ---------- shell ---------- */
#container{ background:#fff !important; }

/* ---------- header + logo ---------- */
#header{
  background:#fff !important;
  border-bottom:1px solid var(--line) !important;
  padding-bottom:6px;
}
#header .pull-right, #header .pull-right a{ color:var(--ink) !important; }
#header .pull-right a:hover{ color:var(--orange) !important; }
/* logo.php has a white background baked in, so it sits naturally on white — no plate needed */

/* ---------- tab nav ---------- */
ul#nav{
  background:#fff !important;
  border-bottom:1px solid var(--line) !important;
}
ul#nav li a{
  background:none !important;
  color:var(--gray) !important;
  border:none !important;
  box-shadow:none !important;
}
ul#nav li a.active, ul#nav li a:hover{
  color:var(--ink) !important;
  border-bottom:2px solid var(--orange) !important;
}

/* ---------- content area ---------- */
#content{ background:#fff !important; color:var(--ink) !important; }
#content h1{ font-size:26px; margin-bottom:6px; }
#content p{ color:var(--gray) !important; }

/* ---------- cards: login box, ticket form, any wrapping <form> ---------- */
.login-box, #content form, form#clientLogin{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  color:var(--ink) !important;
}

/* ---------- form fields ---------- */
input.nowarn, input[type="text"], input[type="email"], input[type="password"],
textarea, select{
  background:#fff !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:4px !important;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--orange) !important;
  outline:none;
  box-shadow:0 0 0 3px rgba(245,130,31,0.18) !important;
}
label{ color:var(--gray) !important; }
::placeholder{ color:#B7B8BF !important; }

/* ---------- buttons ---------- */
input.btn, input[type="submit"], button.btn, a.btn{
  background:var(--orange) !important;
  border:1px solid var(--orange) !important;
  color:var(--ink) !important;
  font-weight:600 !important;
  border-radius:4px !important;
}
input.btn:hover, input[type="submit"]:hover, button.btn:hover, a.btn:hover{
  background:var(--orange-hv) !important;
  border-color:var(--orange-hv) !important;
}
/* secondary buttons: Nulstil / Annullér / Auto registrering — not type=submit,
   so they don't get the orange treatment above */
input[type="reset"], input[type="button"], button.action-button{
  background:#fff !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:4px !important;
  font-weight:600 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
input[type="reset"]:hover, input[type="button"]:hover, button.action-button:hover{
  border-color:var(--orange) !important;
  color:var(--orange) !important;
}
/* "Udskriv" / "Rediger" on the ticket page are <a class="action-button">, not <button> */
a.action-button{
  background:#fff !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:4px !important;
  font-weight:600 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
a.action-button:hover{ border-color:var(--orange) !important; color:var(--orange) !important; }

/* message header in the ticket thread defaults to osTicket's blue — tint it orange instead */
.thread-entry .header{ background:rgba(245,130,31,0.12) !important; }

/* ---------- tables (ticket lists / status / thread) — conservative fallback,
   check these once logged into a real ticket and tell me if anything looks off ---------- */
table.list, table.list-h, dl.list, .thread-body{
  background:transparent !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}
table.list th, table.list-h th, .list-h{
  background:var(--card) !important;
  color:var(--gray) !important;
  border-color:var(--line) !important;
}
table.list td, table.list-h td{ border-color:var(--line) !important; }

.msg, .confirm, .notice{ background:var(--card) !important; border-color:var(--orange) !important; color:var(--ink) !important; }
.error{ background:var(--card) !important; border-color:#D64545 !important; color:var(--ink) !important; }

/* ---------- footer ---------- */
#footer{
  background:#fff !important;
  color:var(--gray) !important;
  border-top:1px solid var(--line) !important;
}
#footer a{ color:var(--gray) !important; }

/* =========================================================
   Terminal-strip — signatur-element lånt fra forsiden.
   Holdes bevidst mørk (som på forsiden) for at skabe kontrast
   mod den hvide side. Indsættes af custom-client.js
   ========================================================= */
.ita-term{
  background:var(--ink);
  border-radius:8px;
  padding:14px 18px;
  margin:0 0 20px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:#9AA3B5;
}
.ita-term .ita-title{
  color:#6B6D76;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.ita-term .ita-line{ margin:2px 0; }
.ita-term .ok{ color:var(--orange); font-weight:600; }
.ita-term .pending{ color:#FFCD3C; font-weight:600; }