/* Zencube light-theme override for Zammad.
 *
 * Zammad's stock "light" theme intentionally keeps several chrome
 * surfaces dark (login fullscreen background, left navigation sidebar)
 * — they resolve to --background-quaternary / --background-tertiary
 * which are dark colors even in the light theme.
 *
 * Override those variables when data-theme=light is set so the entire UI
 * (login + sidebar + main content) renders consistently light.
 */

html[data-theme='light'] {
  /* Login / fullscreen pages */
  --fullscreen-background: hsl(0, 0%, 100%);
  --fullscreen-text: hsl(60, 1%, 34%);
  --fullscreen-text-muted: hsl(213, 3%, 64%);
  --fullscreen-text-link: hsl(203, 65%, 45%);
  --fullscreen-drop-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.08),
                            0 6px 20px 0 rgba(0, 0, 0, 0.06);

  /* Left navigation sidebar */
  --menu-background-primary: hsl(210, 17%, 96%);
  --menu-background-primary-hover: hsla(210, 17%, 70%, 0.18);
  --menu-border: 1px solid hsl(210, 14%, 89%);
  --background-tertiary: hsl(210, 17%, 96%);
  --background-quaternary: hsl(210, 17%, 92%);
  --nav-icon: hsl(213, 3%, 45%);
  --text-nav: hsl(203, 65%, 45%);
}

/* Login card contrast on a white page */
html[data-theme='light'] .login {
  background: white !important;
  color: hsl(60, 1%, 34%);
}
html[data-theme='light'] .login a,
html[data-theme='light'] .fullscreen a {
  color: hsl(203, 65%, 45%);
}
html[data-theme='light'] .login .form {
  border: 1px solid hsl(210, 14%, 89%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Make text inside the sidebar readable on the new light surface */
html[data-theme='light'] .navigation,
html[data-theme='light'] .navigation .menu a,
html[data-theme='light'] .navigation .menu .name {
  color: hsl(60, 1%, 28%);
}
html[data-theme='light'] .navigation .menu .icon {
  fill: hsl(213, 3%, 40%);
}

/* Active sidebar item: Zencube blue background, white text + icons.
 * Zammad uses .is-active (not .active) on sidebar entries; the rule
 * targets that, plus its descendants so nested name/icon elements
 * inherit white. */
html[data-theme='light'] .navigation .is-active,
html[data-theme='light'] .navigation .menu .is-active,
html[data-theme='light'] .navigation li.is-active {
  background: hsl(210, 56%, 31%) !important;
  color: white !important;
  border-color: hsl(210, 56%, 23%) !important;
  box-shadow: 1px 0 hsl(210, 56%, 23%) !important;
}
html[data-theme='light'] .navigation .is-active,
html[data-theme='light'] .navigation .is-active a,
html[data-theme='light'] .navigation .is-active .name,
html[data-theme='light'] .navigation .is-active span,
html[data-theme='light'] .navigation .is-active div {
  color: white !important;
}
html[data-theme='light'] .navigation .is-active .icon,
html[data-theme='light'] .navigation .is-active svg {
  fill: white !important;
}

/* ============================================================
 * Zencube brand color (#23517F).
 * Light-touch rebrand: buttons, links, active nav, focus rings.
 * ============================================================ */

html[data-theme='light'] {
  --highlight: hsl(210, 56%, 31%);
  --interactive-primary: hsl(210, 56%, 31%);
  --button-primary-background: hsl(210, 56%, 31%);
  --button-primary-background-active: hsl(210, 56%, 23%);
  --text-link: hsl(210, 56%, 31%);
  --background-active: hsl(210, 56%, 31%);
  --background-highlight: hsl(210, 56%, 95%);
}

/* Primary buttons (Sign in, Save, etc.) */
html[data-theme='light'] .btn--primary,
html[data-theme='light'] button.btn--primary,
html[data-theme='light'] .signup .btn--primary {
  background: hsl(210, 56%, 31%) !important;
  border-color: hsl(210, 56%, 31%) !important;
  color: white !important;
}
html[data-theme='light'] .btn--primary:hover,
html[data-theme='light'] button.btn--primary:hover {
  background: hsl(210, 56%, 23%) !important;
  border-color: hsl(210, 56%, 23%) !important;
}

/* Links + active navigation use the deeper brand tone */
html[data-theme='light'] a:not(.btn):not(.button),
html[data-theme='light'] .text-link {
  color: hsl(210, 56%, 31%);
}
html[data-theme='light'] .navigation .menu .active {
  background: hsl(210, 56%, 31%) !important;
}

/* Form focus ring */
html[data-theme='light'] input:focus,
html[data-theme='light'] textarea:focus,
html[data-theme='light'] select:focus,
html[data-theme='light'] .form-control:focus {
  border-color: hsl(210, 56%, 31%) !important;
  box-shadow: 0 0 0 3px hsla(210, 56%, 31%, 0.15) !important;
}

/* Recolor every green (#38ad69) "create / positive / success" surface to
 * Zencube blue. Covers buttons, dropdown items, plus-icon fills, loading
 * spinners, alerts, avatars, etc. */
html[data-theme='light'] .btn--success,
html[data-theme='light'] .btn--positive,
html[data-theme='light'] .btn--create {
  background: hsl(210, 56%, 31%) !important;
  color: white !important;
  border-color: hsl(210, 56%, 31%) !important;
}
html[data-theme='light'] .btn--success:hover,
html[data-theme='light'] .btn--success:active,
html[data-theme='light'] .btn--positive:hover,
html[data-theme='light'] .btn--positive:active,
html[data-theme='light'] .btn--create:hover,
html[data-theme='light'] .btn--create:active {
  background: hsl(210, 56%, 23%) !important;
  border-color: hsl(210, 56%, 23%) !important;
  color: white !important;
}
html[data-theme='light'] .btn--success.btn--secondary,
html[data-theme='light'] .btn--positive.btn--secondary,
html[data-theme='light'] .btn--create.btn--secondary {
  background: var(--background-secondary) !important;
  color: hsl(210, 56%, 31%) !important;
}
html[data-theme='light'] .btn--text.btn--positive {
  color: hsl(210, 56%, 31%) !important;
}

/* Create links + dropdown create items */
html[data-theme='light'] a.create,
html[data-theme='light'] .create {
  color: hsl(210, 56%, 31%) !important;
}
html[data-theme='light'] .dropdown-menu > li.create:hover,
html[data-theme='light'] .dropdown-menu > li.create.is-active {
  background: hsl(210, 56%, 31%) !important;
  color: white !important;
}

/* Plus icons */
html[data-theme='light'] .icon-plus,
html[data-theme='light'] .icon-plus-small,
html[data-theme='light'] .user-menu-icon.icon-plus {
  fill: hsl(210, 56%, 31%) !important;
}
html[data-theme='light'] .user-menu > li.add.is-active .user-menu-icon.icon-plus,
html[data-theme='light'] .user-menu li.add:hover .user-menu-icon.icon-plus,
html[data-theme='light'] .user-menu li.add.is-hovered .user-menu-icon.icon-plus {
  fill: white !important;
}

/* Bottom-bar "+" quick-create button hover/active background — was green */
html[data-theme='light'] .user-menu li.add:hover .list-button::before,
html[data-theme='light'] .user-menu li.add.is-active .list-button::before,
html[data-theme='light'] .user-menu li.add.is-hovered .list-button::before {
  background: hsl(210, 56%, 31%) !important;
}

/* The dropdown that appears when "+" is clicked (New Ticket / New User /
 * etc.) was green; recolor to Zencube blue. */
html[data-theme='light'] .user-menu li.add .dropdown-menu {
  background-color: hsl(210, 56%, 31%) !important;
}
html[data-theme='light'] .user-menu li.add .dropdown-menu .divider {
  background: hsl(210, 56%, 40%) !important;
}
html[data-theme='light'] .user-menu li.add .dropdown-menu li > a {
  color: white !important;
}
html[data-theme='light'] .user-menu li.add .dropdown-menu li > a:hover {
  background: hsl(210, 56%, 23%) !important;
}

/* Loading spinner + new-avatar / new-recipient indicators */
html[data-theme='light'] .loading.icon,
html[data-theme='light'] .avatar--new,
html[data-theme='light'] .recipientList--new {
  background: hsl(210, 56%, 31%) !important;
}

/* Success alerts */
html[data-theme='light'] .alert--success {
  background: hsl(210, 56%, 31%) !important;
  color: white !important;
}

/* Tab sidebar count badges (the small green numbers) */
html[data-theme='light'] .tabsSidebar-tab-count--success,
html[data-theme='light'] .tabsSidebar-tab.active .tabsSidebar-tab-count--success {
  background: hsl(210, 56%, 31%) !important;
}
html[data-theme='light'] .tabsSidebar-tab-count--success::after,
html[data-theme='light'] .tabsSidebar-tab.active .tabsSidebar-tab-count--success::after {
  border-right-color: hsl(210, 56%, 31%) !important;
}

/* Dashboard / stat widget that uses green for the primary number */
html[data-theme='light'] .frequency.stat-widget .primary {
  color: hsl(210, 56%, 31%) !important;
  background: hsl(210, 56%, 31%) !important;
}

/* Generic dropdown-menu hover (admin menus etc.) - blue bg + white text */
html[data-theme='light'] .dropdown-menu > li:hover,
html[data-theme='light'] .dropdown-menu > li.is-active {
  background: hsl(210, 56%, 31%) !important;
  color: white !important;
}
html[data-theme='light'] .dropdown-menu > li:hover a,
html[data-theme='light'] .dropdown-menu > li:hover span,
html[data-theme='light'] .dropdown-menu > li.is-active a,
html[data-theme='light'] .dropdown-menu > li.is-active span {
  color: white !important;
}

/* ============================================================
 * Hide the "Powered by Zammad" attribution.
 *
 * Legal basis (see LICENSING.md in this repo):
 *  - AGPL-3.0 Section 5(d) requires "Appropriate Legal Notices"
 *    (copyright notice + warranty disclaimer), NOT marketing
 *    attribution. "Powered by Zammad" is not an Appropriate Legal
 *    Notice as defined in Section 0 of the AGPL.
 *  - Zammad's public Terms (zammad.com/en/company/terms) cover
 *    only their hosted SaaS, not self-hosted deployments.
 *  - AGPL Section 13 only requires offering source code to network
 *    users — which we do via the .zencube-source-link element
 *    injected by the layout template.
 *
 * Trademark law does not compel third parties to advertise the
 * brand owner; removal is not trademark use.
 * ============================================================ */
.poweredBy {
  display: none !important;
}

/* "Sign in with Zencube" OIDC button.
 *
 * Zammad's stock .auth-provider button uses background:#454545 (grey)
 * and shows a generic openid-connect "d→" icon. For first-party SSO
 * we want Zencube brand color + no generic OIDC icon. */
html[data-theme='light'] .auth-provider,
html[data-theme='light'] .auth-provider--openid_connect {
  background: hsl(210, 56%, 31%) !important;
  color: white !important;
  border-color: hsl(210, 56%, 23%) !important;
}
html[data-theme='light'] .auth-provider:hover,
html[data-theme='light'] .auth-provider--openid_connect:hover {
  background: hsl(210, 56%, 23%) !important;
}
/* Hide the generic openid-connect icon so the button is just clean text. */
html[data-theme='light'] .auth-provider--openid_connect .icon-openid-connect-button,
html[data-theme='light'] .auth-provider svg.icon-openid-connect-button {
  display: none !important;
}

/* Source-link element injected by application.html.erb to satisfy
 * AGPL Section 13 (offer source to network users). */
.zencube-source-link {
  position: fixed;
  bottom: 8px;
  right: 12px;
  z-index: 9999;
  font-size: 11px;
  opacity: 0.5;
  color: hsl(60, 1%, 34%);
  text-decoration: none;
  pointer-events: auto;
}
.zencube-source-link:hover {
  opacity: 1;
  text-decoration: underline;
}