/*
 * CompTech brand theme for Zammad 7.0.1 (legacy UI: login, password reset, customer portal, agent desktop).
 * Served from https://support.comptech.sa/brand/comptech-theme.css and linked into every page by the
 * zammad-nginx container (sub_filter). Light theme only: Zammad's own dark theme is left untouched.
 * Tokens come from the CompTech design system (brand-blue #1777BC, brand-sky #29AAE1, ink #0E2233).
 * After a Zammad upgrade, re-check this file against the new application CSS.
 */

/* ---------- Fonts (self-hosted IBM Plex) ---------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/brand/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/brand/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/brand/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/brand/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2'); }

body,
.tooltip,
.popover,
input,
textarea,
select,
button {
  font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Colour tokens (light theme only) ---------- */
:root[data-theme="light"] {
  /* text */
  --header-primary: #0e2233;
  --header-secondary: #6b8499;
  --text-normal: #0e2233;
  --text-muted: #4a5f72;
  --text-muted-alt: #6b8499;
  --text-link: #1777bc;
  --text-nav: #1777bc;
  --text-button-secondary: #4a5f72;

  /* actions: CompTech Blue is the one primary colour */
  --button-primary-background: #1777bc;
  --button-primary-background-active: #13629c;
  --highlight: #1777bc;
  --border-highlight: #1777bc;
  --shadow-highlight: #e3f4fb;
  --backdrop-clue-start: rgba(23, 119, 188, 0.1);
  --backdrop-clue-end: rgba(23, 119, 188, 0.9);

  /* surfaces */
  --background-primary: #f6fafd;
  --background-primary-alt: #eef4f9;
  --background-secondary: #ffffff;
  --background-secondary-hover: #f0f6fb;
  --background-highlight: #e3f4fb;
  --background-article-meta: #fbfdfe;
  --background-article-customer: #e3f4fb;
  --background-article-customer-meta: #f0f8fc;
  --border: #d5e3ef;
  --border-alt: #d5e3ef;
  --border-article-customer: #c6e2f2;
  --border-article-customer-selected: #9fcfea;
  --tag-text: #0e2233;
  --tag-background: #e3f4fb;
  --elevation-low: 0 1px 2px rgba(14, 34, 51, 0.08);
  --elevation-high: 0 8px 24px rgba(14, 34, 51, 0.12);

  /* navigation sidebar: deep CompTech navy instead of charcoal */
  --background-tertiary: #0e2233;
  --background-quaternary: #0a1a28;
  --background-active: #1777bc;
  --menu-text: #9db3c6;
  --menu-icon: #6b8499;
  --menu-switch-background: #06111b;
  --menu-background-primary-hover: rgba(255, 255, 255, 0.06);

  /* login, password reset and other full-screen pages: light brand ground */
  --fullscreen-background: #f6fafd;
  --fullscreen-text: #4a5f72;
  --fullscreen-text-link: #1777bc;
  --fullscreen-text-muted: #6b8499;
  --fullscreen-drop-shadow: 0 8px 24px rgba(14, 34, 51, 0.12);
}

/* ---------- Logo in the navigation sidebar ---------- */
.search .logo {
  width: 30px;
  height: 36px;
  background: url('/brand/comptech-mark.svg') center / contain no-repeat;
}
.search .logo > svg,
.search .logo > .icon {
  visibility: hidden;
}

/* ---------- Shape: softened corners from the wordmark ---------- */
.btn {
  border-radius: 8px;
}
.form-control,
.hero-unit input[type='text'],
.hero-unit input[type='password'],
.hero-unit input[type='email'],
.textBubble {
  border-radius: 8px;
}

/* ---------- One primary colour: green "Create" buttons become CompTech Blue ---------- */
:root[data-theme="light"] .btn--success {
  background: #1777bc;
}
:root[data-theme="light"] .btn--success:active,
:root[data-theme="light"] .btn--success:hover {
  background: #13629c;
}
:root[data-theme="light"] .btn--success.btn--secondary {
  background: var(--background-secondary);
  color: #1777bc;
}

/* ---------- Login and password reset ---------- */
:root[data-theme="light"] .fullscreen {
  border-top: 4px solid #1777bc;
  border-image: linear-gradient(90deg, #1777bc 0 60%, #29aae1 60% 100%) 1;
}
:root[data-theme="light"] .hero-unit {
  border-radius: 12px;
  border-color: #d5e3ef;
}
.hero-unit .company-logo {
  content: url('/brand/comptech-logo.svg');
  width: 240px;
  max-width: 100%;
  height: auto;
  margin: 8px auto 20px;
}
:root[data-theme="light"] .fullscreen-body > p,
:root[data-theme="light"] .login .js-footer {
  color: #4a5f72;
}
:root[data-theme="light"] .login .js-footer a,
:root[data-theme="light"] .fullscreen-body a:not(.btn) {
  color: #1777bc;
}

/* ---------- "New ticket" plus in the sidebar: CompTech Sky on navy (6:1) instead of Zammad green ---------- */
:root[data-theme="light"] .user-menu-icon.icon-plus {
  fill: #29aae1;
}

/* ---------- Customer New Ticket: Affected page URL (2026-10-15) ----------
   Zammad adds an "open link" button beside URL fields and drops the input's end border for it.
   On the create form there is nothing to open yet, so hide the button and restore a normal input. */
.box--newTicket .form-group[data-attribute-name="affected_url"] .controls-button {
  display: none;
}
.box--newTicket .form-group[data-attribute-name="affected_url"] input.form-control {
  border-width: 1px;
  border-radius: 3px;
}
.box--newTicket .form-group[data-attribute-name="affected_url"] .help-block {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Loading splash: CompTech mark instead of the Zammad logo (2026-10-15) ----------
   app/views/init/index.html.erb draws the #icon-logo sprite while the app boots; swap it like the sidebar logo. */
.splash .icon-logo {
  width: 30px;
  height: 36px;
  background: url("/brand/comptech-mark.svg") center / contain no-repeat;
}
.splash .icon-logo > use {
  display: none;
}