/*
 * TechDriven skin for Zammad 7.1.x desktop and legacy views.
 *
 * Served after Zammad's compiled styles by the outer OpenResty proxy. The
 * modern UI is themed primarily through Zammad's Tailwind v4 variables; the
 * small selector layer below handles the public login shell and legacy UI.
 * Keep semantic state colours separate from TechDriven brand chrome.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/__td-brand/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --td-green-100: #bff7d9;
  --td-green-200: #87e1b2;
  --td-green-300: #52cc90;
  --td-green-400: #1fb677;
  --td-green-500: #05915a;
  --td-green-600: #006d3f;
  --td-green-700: #044a29;

  --td-paper: #fefefe;
  --td-neutral-50: #f2f1f6;
  --td-neutral-100: #e4e4e9;
  --td-neutral-200: #cecdd3;
  --td-neutral-300: #a4a3ab;
  --td-neutral-400: #7a7981;
  --td-neutral-500: #525159;
  --td-neutral-600: #35343b;
  --td-neutral-700: #242329;
  --td-neutral-800: #1e1d22;
  --td-ink: #111016;

  --td-success-hi: #7bb676;
  --td-success-lo: #3e713b;
  --td-warning-hi: #e9b452;
  --td-warning-lo: #9a6500;
  --td-danger-hi: #f2716a;
  --td-danger-lo: #b63132;
  --td-info-hi: #73b1e6;
  --td-info-lo: #286cab;

  /* Zammad 7 Tailwind theme variables: light surfaces. */
  --color-blue-100: var(--td-green-100);
  --color-blue-200: #e7f7ef;
  --color-blue-300: var(--td-green-200);
  --color-blue-350: var(--td-green-100);
  --color-blue-400: var(--td-green-300);
  --color-blue-500: var(--td-green-300);
  --color-blue-550: var(--td-green-300);
  --color-blue-600: var(--td-green-400);
  --color-blue-700: var(--td-green-500);
  --color-blue-800: var(--td-green-600);
  --color-blue-850: var(--td-green-700);
  --color-blue-875: var(--td-green-700);
  --color-blue-900: var(--td-green-700);
  --color-blue-950: #022f1a;

  --color-neutral-50: var(--td-paper);
  --color-neutral-100: var(--td-neutral-100);
  --color-neutral-200: var(--td-neutral-200);
  --color-neutral-300: var(--td-neutral-200);
  --color-neutral-400: var(--td-neutral-300);
  --color-neutral-500: var(--td-neutral-400);
  --color-neutral-700: var(--td-neutral-300);
  --color-neutral-800: var(--td-neutral-500);
  --color-neutral-950: var(--td-ink);

  --color-gray-100: var(--td-neutral-500);
  --color-gray-200: var(--td-neutral-500);
  --color-gray-300: var(--td-neutral-600);
  --color-gray-400: var(--td-neutral-700);
  --color-gray-500: var(--td-neutral-800);
  --color-gray-600: var(--td-neutral-700);
  --color-gray-700: var(--td-neutral-700);
  --color-gray-800: var(--td-neutral-800);
  --color-gray-900: var(--td-ink);

  --color-stone-200: var(--td-neutral-500);
  --color-stone-400: var(--td-neutral-400);
  --color-stone-500: var(--td-neutral-500);
  --color-stone-700: var(--td-neutral-600);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  accent-color: var(--td-green-600);
}

::selection {
  color: var(--td-ink);
  background: var(--td-green-200);
}

/* Replace Zammad's classic bootstrap mark before the public app mounts. */
.splash {
  flex-direction: column;
  gap: 1rem;
  color: var(--td-neutral-300);
  background:
    radial-gradient(circle at 50% 36%, rgb(31 182 119 / 12%), transparent 24rem),
    var(--td-ink);
}

.splash::before {
  width: min(14rem, 72vw);
  aspect-ratio: 5124 / 1014.8;
  background: url("/__td-brand/td-wordmark-dark.svg") center / contain no-repeat;
  content: "";
}

.splash .icon-logo {
  display: none;
}

/*
 * Zammad's /mobile client is a distinct Vue application. It deliberately
 * stays dark but does not set [data-theme="dark"], so scope its tokens to the
 * route's manifest instead of changing semantic yellow throughout Zammad.
 */
html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) {
  --background-primary: var(--td-ink);
  --color-black: var(--td-ink);
  --color-blue: var(--td-green-400);
  --color-blue-dark: var(--td-green-700);
  --color-blue-highlight: rgb(31 182 119 / 16%);
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) body {
  font-family: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #loading-app {
  background:
    radial-gradient(circle at 50% 45%, rgb(31 182 119 / 12%), transparent 22rem),
    var(--td-ink);
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #loading-app .loading-animation {
  display: none;
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #loading-app .loading-main::before {
  display: block;
  width: min(14rem, 72vw);
  aspect-ratio: 5124 / 1014.8;
  background: url("/__td-brand/td-wordmark-dark.svg") center / contain no-repeat;
  content: "";
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #loading-app .loading-failed {
  margin-top: 1rem;
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #app[data-loaded="true"] > .h-full.min-w-full.bg-black {
  background:
    radial-gradient(circle at 50% 10%, rgb(31 182 119 / 12%), transparent 28rem),
    var(--td-ink);
  font-family: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #app[data-loaded="true"] img[src*="/api/v1/system_assets/product_logo/"] {
  content: url("/__td-brand/td-wordmark-dark.svg");
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #signin .form-group {
  background: var(--td-neutral-800);
  box-shadow: inset 0 0 0 1px var(--td-neutral-700);
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #signin .form-group:focus-within {
  box-shadow: inset 0 0 0 1px var(--td-green-400), 0 0 0 2px rgb(31 182 119 / 22%);
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #signin a.text-yellow {
  color: var(--td-green-300);
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #signin button[type="submit"] {
  color: var(--td-ink);
  background: var(--td-green-400);
  font-weight: 700;
}

html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #signin button[type="submit"]:hover,
html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #signin button[type="submit"]:focus {
  color: var(--td-ink);
  background: var(--td-green-300);
}

/*
 * No outline on the sign-in inputs themselves: they are borderless and fill
 * their rounded overflow-hidden .form-group, which clips an input outline
 * into stray vertical bars. The .form-group:focus-within ring is the
 * focus indicator for those fields.
 */
html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #signin button[type="submit"]:focus-visible,
html:has(link[rel="manifest"][href="/mobile/manifest.webmanifest"]) #signin a:focus-visible {
  outline: 2px solid var(--td-green-400);
  outline-offset: 3px;
}

/* Public login, password reset, signup, and post-auth screens. */
.min-h-screen.bg-neutral-950 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgb(31 182 119 / 12%), transparent 36rem),
    var(--td-ink);
}

.min-h-screen.bg-neutral-950::before {
  position: fixed;
  z-index: -1;
  right: -9rem;
  bottom: -11rem;
  width: min(48rem, 78vw);
  aspect-ratio: 1;
  background: url("/__td-brand/td-orbit-pattern.svg") center / contain no-repeat;
  content: "";
  opacity: 0.12;
  pointer-events: none;
  transform: rotate(14deg);
}

.min-h-screen.bg-neutral-950 main.rounded-3xl {
  border: 1px solid var(--td-neutral-100);
  border-radius: 1.25rem;
  background: rgb(254 254 254 / 98%);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 30%);
}

.min-h-screen.bg-neutral-950 main.rounded-3xl > h1 {
  color: var(--td-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Product logo URL is stable even when Zammad's generated asset timestamp changes. */
img[src*="/api/v1/system_assets/product_logo/"] {
  width: min(14rem, 72vw);
  height: auto;
  content: url("/__td-brand/td-wordmark-light.svg");
}

#login button[type="submit"],
form#login button[type="submit"] {
  color: var(--td-paper);
  background: var(--td-green-600);
  font-weight: 700;
}

#login button[type="submit"]:hover,
form#login button[type="submit"]:hover {
  background: var(--td-green-700);
  outline-color: var(--td-green-600);
}

#login button[type="submit"]:focus-visible,
form#login button[type="submit"]:focus-visible {
  outline: 2px solid var(--td-green-600);
  outline-offset: 3px;
}

/* Modern desktop chrome inherits these through Zammad's utility classes. */
a,
.u-link {
  text-underline-offset: 0.18em;
}

/* Legacy public login, signup, and password-reset shells. */
:is(.login, .signup, .reset_password) {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 8%, rgb(31 182 119 / 14%), transparent 34rem),
    var(--td-ink);
}

:is(.login, .signup, .reset_password)::before {
  position: fixed;
  z-index: -1;
  right: -9rem;
  bottom: -11rem;
  width: min(48rem, 78vw);
  aspect-ratio: 1;
  background: url("/__td-brand/td-orbit-pattern.svg") center / contain no-repeat;
  content: "";
  opacity: 0.12;
  pointer-events: none;
  transform: rotate(14deg);
}

:is(.login, .signup, .reset_password) .hero-unit {
  color: var(--td-neutral-200);
  background: rgb(30 29 34 / 97%);
  border-color: var(--td-neutral-600);
  border-radius: 20px;
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 30%);
}

.login img[src*="/api/v1/system_assets/product_logo/"] {
  width: min(216px, 72vw);
  max-width: none;
  max-height: none;
  height: auto;
  content: url("/__td-brand/td-wordmark-dark.svg");
}

:is(.login, .signup, .reset_password) .hero-unit a {
  color: var(--td-green-300);
}

:is(.login, .signup, .reset_password) .form-control:focus {
  border-color: var(--td-green-400);
  box-shadow: 0 0 0 2px rgb(31 182 119 / 28%);
}

.login form#login .btn--primary {
  color: var(--td-ink);
  background: var(--td-green-400);
  border-color: var(--td-green-400);
}

:is(.signup, .reset_password) form .btn--primary {
  color: var(--td-ink);
  background: var(--td-green-400);
  border-color: var(--td-green-400);
}

.login form#login .btn--primary:hover,
.login form#login .btn--primary:focus {
  color: var(--td-ink);
  background: var(--td-green-300);
  border-color: var(--td-green-300);
}

:is(.signup, .reset_password) form .btn--primary:hover,
:is(.signup, .reset_password) form .btn--primary:focus {
  color: var(--td-ink);
  background: var(--td-green-300);
  border-color: var(--td-green-300);
}

:is(.login, .signup, .reset_password) a:focus-visible,
:is(.login, .signup, .reset_password) button:focus-visible,
:is(.login, .signup, .reset_password) input:focus-visible {
  outline: 2px solid var(--td-green-400);
  outline-offset: 3px;
}

.btn--primary {
  color: var(--td-paper);
  background: var(--td-green-600);
  border-color: var(--td-green-600);
}

.btn--primary:hover,
.btn--primary:focus {
  background: var(--td-green-700);
  border-color: var(--td-green-700);
}

#navigation {
  background: var(--td-ink);
}

#navigation .menu-item.is-active,
#navigation .menu-item:hover {
  background: var(--td-neutral-800);
}

/* Status is semantic, never brand chrome. */
.ticket-state-open,
.state-open {
  color: var(--td-success-lo);
}

.ticket-state-pending,
.state-pending {
  color: var(--td-warning-lo);
}

.ticket-state-escalated,
.state-escalated {
  color: var(--td-danger-lo);
}

[data-theme="dark"] {
  --color-blue-600: var(--td-green-400);
  --color-blue-700: var(--td-green-400);
  --color-blue-800: var(--td-green-400);
  --color-blue-850: var(--td-green-300);
  --color-blue-900: var(--td-green-700);
  --color-neutral-500: var(--td-neutral-200);
}

[data-theme="dark"] img[src*="/api/v1/system_assets/product_logo/"] {
  content: url("/__td-brand/td-wordmark-dark.svg");
}

[data-theme="dark"] .min-h-screen.bg-neutral-950 main.rounded-3xl {
  color: var(--td-neutral-200);
  background: rgb(30 29 34 / 98%);
  border-color: var(--td-neutral-600);
}

[data-theme="dark"] .min-h-screen.bg-neutral-950 main.rounded-3xl > h1 {
  color: var(--td-paper);
}

[data-theme="dark"] .ticket-state-open,
[data-theme="dark"] .state-open {
  color: var(--td-success-hi);
}

[data-theme="dark"] .ticket-state-pending,
[data-theme="dark"] .state-pending {
  color: var(--td-warning-hi);
}

[data-theme="dark"] .ticket-state-escalated,
[data-theme="dark"] .state-escalated {
  color: var(--td-danger-hi);
}

@media (max-width: 40rem) {
  .min-h-screen.bg-neutral-950 {
    padding: 1rem;
  }

  .min-h-screen.bg-neutral-950 main.rounded-3xl {
    border-radius: 1rem;
  }

  .min-h-screen.bg-neutral-950::before {
    right: -10rem;
    bottom: -7rem;
    width: 34rem;
  }

  :is(.login, .signup, .reset_password)::before {
    right: -12rem;
    bottom: -8rem;
    width: 36rem;
  }

  :is(.login, .signup, .reset_password) .hero-unit {
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .min-h-screen.bg-neutral-950 {
    background: var(--td-paper);
  }

  .min-h-screen.bg-neutral-950::before {
    display: none;
  }
}