/* TSD Labs theme for Zammad (support.tsdlabs.io). Tokens copied from website/public/assets/css/site.css.
   Injected after Zammad's own CSS (nginx-tsd-theme.conf), so equal-specificity rules here win.
   Covers: sign-in and password pages, the desktop app as customers see it, the mobile app, the knowledge base.
   After a Zammad upgrade, re-run the screenshot check (README) — class names can change. */

@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --tsd-bg: #f6f6f3;
  --tsd-surface: #ffffff;
  --tsd-ink: #0e1116;
  --tsd-ink-2: #3b414a;
  --tsd-muted: #4a515b;
  --tsd-subtle: #6a717b;
  --tsd-rule: #e2e2dc;
  --tsd-rule-strong: #d9d9d2;
  --tsd-accent: #e2ec5a;
  --tsd-accent-hover: #d4df3c;
  --tsd-teal: #0b6b74;
  --tsd-teal-hover: #08484e;
  --tsd-dark: #0e1116;
  --tsd-dark-2: #161b22;
  --tsd-dark-rule: #262c35;
  --tsd-dark-text: #e7eaee;
  --tsd-dark-muted: #a8b0ba;
  --tsd-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tsd-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --tsd-radius: 16px;
  --tsd-radius-sm: 10px;
}

/* ---------- Type (everywhere) ---------- */
/* Every app sets its own font on inner elements (Zammad uses Fira Sans), so apply Geist everywhere except code. */
body, body *:not(code):not(pre):not(kbd):not(samp):not(svg):not(use):not(i):not([class*="icon"]) { font-family: var(--tsd-sans) !important; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--tsd-accent); color: var(--tsd-ink); }

/* ---------- Desktop app base. Scoped to its own containers so the mobile app (dark) is untouched. ---------- */
body:has(#navigation) { background: var(--tsd-bg); }
.content, .sidebar { color: var(--tsd-ink-2); }
.content a, .sidebar a, .fullscreen .hero-unit a { color: var(--tsd-teal); }
.content a:hover, .sidebar a:hover { color: var(--tsd-teal-hover); }
.content :focus-visible, .sidebar :focus-visible, .fullscreen :focus-visible { outline: 3px solid var(--tsd-teal) !important; outline-offset: 2px; }
.content h1, .content h2, .fullscreen h1, .fullscreen h2 { color: var(--tsd-ink); font-weight: 600; letter-spacing: -0.02em; }
.fileUpload, .attachmentPlaceholder-inputHolder { color: var(--tsd-teal) !important; }
.dropArea { border-color: var(--tsd-teal) !important; }

/* Labels: the site's mono eyebrow style. */
.formGroup-label label, .horizontal-filter-label {
  font: 500 12px/1.4 var(--tsd-mono) !important; letter-spacing: 0.02em; color: var(--tsd-subtle) !important; text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn { border-radius: 999px !important; font-weight: 500; box-shadow: none !important; transition: background-color .15s, border-color .15s; }
.btn--primary, .btn--primary:focus { background: var(--tsd-ink) !important; color: #fff !important; border-color: var(--tsd-ink) !important; }
.btn--primary:hover { background: var(--tsd-dark-rule) !important; }
.btn--success, .btn--success:focus { background: var(--tsd-accent) !important; color: var(--tsd-ink) !important; border-color: var(--tsd-accent) !important; font-weight: 600; }
.btn--success:hover { background: var(--tsd-accent-hover) !important; }
.btn--text, .btn--text.btn--secondary { color: var(--tsd-subtle) !important; }
.btn--text:hover { color: var(--tsd-teal) !important; }
.btn--action, .btn--default { background: var(--tsd-surface) !important; border: 1px solid var(--tsd-rule-strong) !important; color: var(--tsd-ink) !important; }
.btn--action:hover, .btn--default:hover { border-color: var(--tsd-ink) !important; }

/* ---------- Form controls ---------- */
.form-control, .controls select {
  background: var(--tsd-surface) !important; border: 1px solid var(--tsd-rule-strong) !important; border-radius: var(--tsd-radius-sm) !important;
  color: var(--tsd-ink) !important; box-shadow: none !important;
}
.form-control:focus, .form-control.focus {
  border-color: var(--tsd-teal) !important; box-shadow: 0 0 0 3px rgba(11, 107, 116, .15) !important;
}
.checkbox-replacement .icon-checkbox-checked, .radio-replacement .icon-radio-checked { fill: var(--tsd-teal) !important; }

/* ---------- Sign-in, password reset, sign-up pages ---------- */
.fullscreen, .login.fullscreen { background: var(--tsd-dark) !important; color: var(--tsd-dark-muted) !important; }
.fullscreen-body > p:first-child { color: var(--tsd-dark-muted) !important; font: 500 12px/1.4 var(--tsd-mono); text-transform: uppercase; letter-spacing: .04em; }
.fullscreen .hero-unit {
  border-radius: var(--tsd-radius) !important; border: 1px solid var(--tsd-dark-rule); box-shadow: none !important;
  /* The logo art has a black field, so it sits on a dark band across the top of the card, like the site header. */
  background: linear-gradient(var(--tsd-dark) 0 120px, var(--tsd-surface) 120px) !important;
  padding-top: 28px !important; overflow: hidden;
}
.fullscreen .hero-unit .company-logo { height: 63px !important; width: auto !important; margin: 0 auto 56px !important; }
.fullscreen .hero-unit h1, .fullscreen .hero-unit h2 { color: var(--tsd-ink); }
.fullscreen .btn--primary { background: var(--tsd-accent) !important; border-color: var(--tsd-accent) !important; color: var(--tsd-ink) !important; font-weight: 600; min-height: 46px; }
.fullscreen .btn--primary:hover { background: var(--tsd-accent-hover) !important; }
.fullscreen .js-footer, .fullscreen .js-footer p { color: var(--tsd-dark-muted) !important; }
.fullscreen .js-footer a { color: var(--tsd-accent) !important; }
.fullscreen .poweredBy, .fullscreen .poweredBy a, .fullscreen .poweredBy svg { color: #3a414b !important; fill: #3a414b !important; opacity: .8; }

/* ---------- Desktop app shell ---------- */
.navigation, .navigation .search, .user-menu > li { background: var(--tsd-dark) !important; }
.navigation .tasks { background: var(--tsd-dark-2) !important; }
#global-search { background: var(--tsd-dark-2) !important; border: 1px solid var(--tsd-dark-rule) !important; border-radius: 999px !important; color: var(--tsd-dark-text) !important; }
.navigation .menu-item { color: var(--tsd-dark-muted) !important; }
.navigation .menu-item:hover, .navigation .menu-item.is-active { color: #fff !important; background: var(--tsd-dark-2) !important; }
.navigation .menu-item.is-active { box-shadow: inset 3px 0 0 var(--tsd-accent); }
.navigation .menu-item svg, .navigation .menu-item .icon { fill: currentColor !important; }
.user-menu .list-button, .user-menu .list-button svg { color: var(--tsd-accent) !important; fill: var(--tsd-accent) !important; }
/* Zammad's bird in the corner becomes the TSD icon. */
.navigation .logo { background: url("img/tsd-icon-512.png") center / 34px 34px no-repeat; border-radius: 8px; }
.navigation .logo svg { visibility: hidden; }

.content, .main { background: var(--tsd-bg) !important; }
.box, .box--newTicket { border-radius: var(--tsd-radius) !important; }
.overview-navigator .item.active, .sidebar .item.active, .overview-navigator a.active { background: var(--tsd-ink) !important; color: #fff !important; }
.box { border: 1px solid var(--tsd-rule) !important; box-shadow: none !important; background: var(--tsd-surface) !important; }
.formset-inset { background: var(--tsd-bg) !important; border-block: 1px solid var(--tsd-rule) !important; }
.page-header h1 { font-size: 28px; letter-spacing: -0.03em; }

/* Right-hand sidebar */
.sidebar { background: var(--tsd-surface) !important; border-left: 1px solid var(--tsd-rule); }
.sidebar-header-headline { color: var(--tsd-ink) !important; font-weight: 600; letter-spacing: -0.01em; }
.tabsSidebar-tab.active { background: var(--tsd-bg) !important; }
.tabsSidebar-tab svg { fill: var(--tsd-ink-2); }

/* Tables (ticket lists) */
.table th { font: 500 12px/1.4 var(--tsd-mono) !important; text-transform: uppercase; color: var(--tsd-subtle) !important; }
.table td, .table th { border-color: var(--tsd-rule) !important; }
.table tr:hover td { background: var(--tsd-bg) !important; }

/* Ticket conversation */
.ticket-article-item.customer .textBubble { background: var(--tsd-surface) !important; border: 1px solid var(--tsd-rule) !important; }
.ticket-article-item.agent .textBubble { background: #eef4f4 !important; border: 1px solid #d5e5e6 !important; }
.textBubble-content { color: var(--tsd-ink-2) !important; }
.ticket-title-update { font-weight: 600; letter-spacing: -0.02em; color: var(--tsd-ink) !important; }
.avatar--unique { background-color: var(--tsd-teal) !important; }

/* ---------- Mobile app (/mobile: Tailwind; colors are CSS variables) ---------- */
/* Kept dark, like the site's header and dark sections, with the site's accent instead of Zammad's yellow. */
:root {
  --color-black: #0e1116;          /* page background */
  --color-gray-600: #13171d;
  --color-gray-500: #161b22;       /* cards, inputs */
  --color-gray-400: #262c35;       /* borders, pressed */
  --color-gray-300: #3a414b;
  --color-gray-light: #161b22cc;   /* bottom bar */
  --color-yellow: #e2ec5a;         /* primary buttons, avatar */
  --color-blue: #3aafb9;           /* links and active tabs: the logo's teal */
  --color-pink: #0b6b74;           /* menu icon tiles */
}

/* Customer form: Group and State are hidden for customers (core workflow in configure.sh); drop the empty band. */
.formset-inset:not(:has(.form-group:not(.is-hidden))) { display: none !important; }

/* Ticket view and open-ticket tabs */
.ticketZoom, .ticketZoom-header, .ticket-article, .article-new, .ticketZoom-controls { background-color: var(--tsd-bg) !important; }
.ticketZoom-controls { border-top: 1px solid var(--tsd-rule) !important; }
.navigation .tasks .task.is-active, .navigation .tasks .task.is-active:hover { background: var(--tsd-accent) !important; color: var(--tsd-ink) !important; }
.navigation .tasks .task { color: var(--tsd-dark-muted); }
.table th, .table thead { background: var(--tsd-bg) !important; }

/* ---------- Knowledge base (/help) ---------- */
header.header { padding-top: 20px; }
header.header .logo img { height: 30px; width: auto; }
.main--knowledgebase, body:has(header.header) { background: var(--tsd-bg); }
body:has(header.header) .section-inner { border-radius: var(--tsd-radius) !important; box-shadow: none !important; border: 1px solid var(--tsd-rule) !important; }
body:has(header.header) .section-inner:hover { border-color: var(--tsd-ink) !important; }
body:has(header.header) h1 { color: var(--tsd-ink); font-weight: 600; letter-spacing: -0.03em; }
body:has(header.header) .footer { background: var(--tsd-surface); border-top: 1px solid var(--tsd-rule); }