/* ===========================================================================
   Cube — osTicket client theme
   Brings tickets.cube.com.mk in line with cube.com.mk.

   Load AFTER /assets/default/css/theme.css. See README.md in this folder.
   Only the customer-facing pages are affected; the staff panel (/scp) is not.
   =========================================================================== */

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

:root {
  --cube-navy: #0c0f24;
  --cube-ink: #0f172a;
  --cube-body: #475569;
  --cube-muted: #64748b;
  --cube-line: #e2e8f0;
  --cube-page: #f8fafc;
  --cube-sky: #0369a1;        /* white text on this passes AA at 5.93:1 */
  --cube-sky-hover: #0284c7;
  --cube-sky-light: #38bdf8;
  --cube-radius: 12px;
}

/* ----------------------------------------------------------------- page ---- */

body {
  background: var(--cube-page) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  color: var(--cube-ink) !important;
  -webkit-font-smoothing: antialiased;
}

#container {
  background: #ffffff !important;
  border: 1px solid var(--cube-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  max-width: 1100px !important;
  margin: 32px auto !important;
  overflow: hidden;
}

/* --------------------------------------------------------------- header ---- */

#header {
  background: var(--cube-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 18px 28px !important;
  height: auto !important;
  overflow: hidden;
}

/* Swap the logo here rather than through the admin panel: osTicket only
   accepts raster uploads, and this keeps the vector sharp on every screen.
   Expects cube-logo.svg to sit in /assets/default/images/. */
#header img[src*='logo'],
#header #logo img {
  width: 0 !important;
  height: 44px !important;
  padding-left: 190px !important;
  background: url('../images/cube-logo.svg') no-repeat left center !important;
  background-size: contain !important;
}

#header img {
  max-height: 44px !important;
  width: auto;
}

/* "Sign in" / "Log out" link, top right */
#header a,
#header #links a {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

#header a:hover {
  color: #ffffff !important;
}

/* The links in the top right read as controls rather than as stray text.

   Outlined, not filled: a solid button here would outrank "Open a New
   Ticket", which is the main task on the page.

   Two selectors because the markup is not what this file first assumed. It
   targeted #links, which osTicket 1.14 does not use on the client header —
   the block is div.pull-right holding a <p>. The rule was written, shipped
   and matched nothing, which is why these arrived looking like plain text. */
#header .pull-right p a,
#header #links a {
  display: inline-block !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  margin-left: 8px !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#header .pull-right p a:hover,
#header #links a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ------------------------------------------------------------------ nav ---- */

#nav,
ul#nav {
  background: var(--cube-navy) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0 20px !important;
  margin: 0 !important;
  height: auto !important;
}

#nav li,
ul#nav li {
  border: 0 !important;
  background: none !important;
}

#nav li a,
ul#nav li a {
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: #cbd5e1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 14px 16px !important;
  margin: 0 4px !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#nav li a:hover,
ul#nav li a:hover {
  color: #ffffff !important;
}

#nav li a.active,
#nav li.active a,
ul#nav li a.active {
  color: var(--cube-sky-light) !important;
  border-bottom-color: var(--cube-sky) !important;
  font-weight: 600 !important;
}

/* osTicket puts icons in the tabs — keep them, just calm them down */
#nav li a img {
  opacity: 0.65;
  margin-right: 6px;
}

/* -------------------------------------------------------------- content ---- */

#content {
  padding: 32px 28px !important;
  background: transparent !important;
}

#content h1,
h1.page-title {
  font-family: 'Mulish', 'Inter', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--cube-ink) !important;
  letter-spacing: -0.01em;
  margin: 0 0 8px !important;
}

#content h2 {
  font-family: 'Mulish', 'Inter', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--cube-ink) !important;
}

#content p,
#content li,
#content td {
  color: var(--cube-body) !important;
  line-height: 1.7 !important;
  font-size: 14px !important;
}

/* buttons carry their own colour; an id-based selector here would beat it */
#content a:not(.button) {
  color: var(--cube-sky) !important;
}

/* --------------------------------------------------------------- buttons --- */

a.button,
a.blue.button,
a.green.button,
input[type='submit'],
input[type='button'],
button.button {
  display: inline-block !important;
  background: var(--cube-sky) !important;
  background-image: none !important;
  border: 1px solid var(--cube-sky) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  padding: 11px 22px !important;
  box-shadow: 0 6px 16px rgba(3, 105, 161, 0.22) !important;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}

a.button:hover,
a.blue.button:hover,
a.green.button:hover,
input[type='submit']:hover,
button.button:hover {
  background: var(--cube-sky-hover) !important;
  border-color: var(--cube-sky-hover) !important;
  transform: translateY(-1px);
}

a.button:active,
input[type='submit']:active {
  transform: translateY(0);
}

/* the second action on the landing page reads as secondary, not a second primary */
a.green.button {
  background: transparent !important;
  border: 1px solid var(--cube-line) !important;
  color: var(--cube-ink) !important;
  box-shadow: none !important;
}

a.green.button:hover {
  background: var(--cube-page) !important;
  border-color: #cbd5e1 !important;
  color: var(--cube-ink) !important;
}

/* ----------------------------------------------------------------- forms --- */

#content input[type='text'],
#content input[type='email'],
#content input[type='password'],
#content input[type='tel'],
#content select,
#content textarea,
.redactor-editor {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--cube-ink) !important;
  background: #ffffff !important;
  border: 1px solid var(--cube-line) !important;
  border-radius: var(--cube-radius) !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#content input[type='text']:focus,
#content input[type='email']:focus,
#content input[type='tel']:focus,
#content select:focus,
#content textarea:focus,
.redactor-editor:focus {
  border-color: var(--cube-sky-light) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18) !important;
  outline: none !important;
}

table.form_table td,
table.form_table th {
  border-color: var(--cube-line) !important;
  padding: 10px 8px !important;
}

td.required,
span.error,
.error {
  color: #dc2626 !important;
}

/* the little red asterisk osTicket adds to required labels */
font[color='red'],
.required em {
  color: #dc2626 !important;
}

/* ---------------------------------------------------------------- footer --- */

#footer {
  background: transparent !important;
  border-top: 1px solid var(--cube-line) !important;
  color: var(--cube-muted) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  padding: 18px 28px !important;
  text-align: center;
}

#footer a {
  color: var(--cube-muted) !important;
  text-decoration: none !important;
}

#footer a:hover {
  color: var(--cube-ink) !important;
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 780px) {
  #container {
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  #header,
  #content,
  #footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #nav {
    padding: 0 8px !important;
  }

  #nav li a,
  ul#nav li a {
    padding: 12px 10px !important;
    font-size: 13px !important;
  }

  a.button,
  a.blue.button,
  a.green.button,
  input[type='submit'] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }
}