/* ============================================================
   Sphere XDR — тема клиентского портала osTicket
   Дизайн-токены взяты с сайта sphere-xdr (index.html / dark.html)
   ============================================================ */

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

:root{
  /* ---- Brand tokens (light) ---- */
  --sx-bg-page:#FFFFFF;
  --sx-bg-surface:#F1F5F9;
  --sx-bg-card:#FFFFFF;
  --sx-bg-elevated:#F1F5F9;
  --sx-text-primary:#0A1628;
  --sx-text-secondary:#475569;
  --sx-text-disabled:#94A3B8;
  --sx-border:#E2E8F0;

  --sx-accent:#00C9A7;
  --sx-accent-hover:#00E5B8;
  --sx-accent-active:#009B84;
  --sx-success:#14b869;
  --sx-warning:#f59e0b;
  --sx-danger:#ef4444;

  --sx-radius-sm:8px;
  --sx-radius-md:12px;
  --sx-radius-lg:16px;

  --sx-font-heading:'Manrope',sans-serif;
  --sx-font-body:'Inter',system-ui,sans-serif;
  --sx-font-mono:'JetBrains Mono','Consolas',monospace;

  --sx-shadow-card:0 16px 32px rgba(10,22,40,0.08);
}

/* Тёмная тема — активируется добавлением [data-theme="dark"] на <html>
   (см. sphere-xdr-theme-toggle.js) */
html[data-theme="dark"]{
  --sx-bg-page:#0A1628;
  --sx-bg-surface:#111d33;
  --sx-bg-card:#111d33;
  --sx-bg-elevated:#162240;
  --sx-text-primary:#f1f5f9;
  --sx-text-secondary:#94a3b8;
  --sx-text-disabled:#475569;
  --sx-border:#1e3260;
  --sx-shadow-card:0 16px 32px rgba(0,0,0,0.35);
}

/* ============================================================
   ВНИМАНИЕ: селекторы ниже написаны под стандартную client-side
   разметку osTicket (default theme, assets/default). Если у вас
   установлена другая/кастомная тема-основа (например Bootstrap-
   тема), часть селекторов может не совпасть 1:1 — их нужно будет
   свериться с реальным HTML (через DevTools) и поправить точечно.
   Структура CSS-переменных при этом останется рабочей.
   ============================================================ */

body{
  background:var(--sx-bg-page) !important;
  color:var(--sx-text-primary) !important;
  font-family:var(--sx-font-body) !important;
  line-height:1.6;
  transition:background .25s ease, color .25s ease;
}

a{ color:var(--sx-accent); }
a:hover{ color:var(--sx-accent-hover); }

h1,h2,h3,h4,h5,h6{
  font-family:var(--sx-font-heading) !important;
  color:var(--sx-text-primary);
}

/* ---- Header / логотип ---- */
#header, .client-header, div#header{
  background:var(--sx-bg-page) !important;
  border-bottom:1px solid var(--sx-border) !important;
  padding:18px 32px;
}
#header img, .client-header img{
  max-height:34px;
}

/* ---- Навигация ---- */
#nav, ul#nav, nav#nav{
  background:transparent !important;
  border-bottom:1px solid var(--sx-border);
}
#nav ul li a, #nav a{
  font-family:var(--sx-font-body);
  font-weight:500;
  color:var(--sx-text-secondary) !important;
  transition:color .2s ease;
}
#nav ul li a:hover, #nav a:hover,
#nav ul li.active a, #nav li.active a{
  color:var(--sx-text-primary) !important;
}
#nav ul li.active, #nav li.active{
  border-bottom:2px solid var(--sx-accent);
}

/* ---- Контентные карточки / контейнеры ---- */
#content, .container, .client-content{
  background:var(--sx-bg-page);
}
.panel, .box, fieldset, .form-section, div.thread-entry{
  background:var(--sx-bg-card) !important;
  border:1px solid var(--sx-border) !important;
  border-radius:var(--sx-radius-md) !important;
  box-shadow:var(--sx-shadow-card);
}
fieldset legend, .panel-heading, h2.section-title{
  font-family:var(--sx-font-heading);
  color:var(--sx-text-primary);
}

/* ---- Таблицы (список тикетов и т.п.) ---- */
table.list, table.list-cont{
  border-radius:var(--sx-radius-md);
  overflow:hidden;
  border:1px solid var(--sx-border);
}
table.list th{
  background:var(--sx-bg-surface) !important;
  color:var(--sx-text-secondary) !important;
  font-family:var(--sx-font-body);
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--sx-border) !important;
}
table.list td{
  border-bottom:1px solid var(--sx-border) !important;
  color:var(--sx-text-primary);
}
table.list tr:hover td{
  background:var(--sx-bg-surface);
}

/* ---- Кнопки ---- */
.btn, .button, input[type="submit"], button[type="submit"]{
  font-family:var(--sx-font-body) !important;
  font-weight:600 !important;
  border-radius:var(--sx-radius-sm) !important;
  border:1px solid transparent !important;
  padding:10px 22px !important;
  transition:all .2s ease !important;
  cursor:pointer;
}
.btn.green, .btn-primary, input[type="submit"], button[type="submit"]{
  background:var(--sx-accent) !important;
  color:#04160f !important;
}
.btn.green:hover, .btn-primary:hover, input[type="submit"]:hover{
  background:var(--sx-accent-hover) !important;
  transform:translateY(-1px);
}
.btn.grey, .btn-secondary, .btn-ghost{
  background:transparent !important;
  border-color:var(--sx-border) !important;
  color:var(--sx-text-primary) !important;
}
.btn.grey:hover, .btn-ghost:hover{
  border-color:var(--sx-accent) !important;
  color:var(--sx-accent-active) !important;
}

/* ---- Поля форм ---- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], textarea, select{
  font-family:var(--sx-font-body) !important;
  background:var(--sx-bg-card) !important;
  color:var(--sx-text-primary) !important;
  border:1px solid var(--sx-border) !important;
  border-radius:var(--sx-radius-sm) !important;
  padding:10px 14px !important;
  transition:border-color .2s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none !important;
  border-color:var(--sx-accent) !important;
  box-shadow:0 0 0 3px rgba(0,201,167,0.15) !important;
}

/* ---- Статусы / бейджи ---- */
.Open, .badge-open{ color:var(--sx-success) !important; }
.Closed, .badge-closed{ color:var(--sx-text-disabled) !important; }
.error, .msg.error{
  background:rgba(239,68,68,0.08) !important;
  border:1px solid rgba(239,68,68,0.3) !important;
  color:var(--sx-danger) !important;
  border-radius:var(--sx-radius-sm);
}
.msg.success{
  background:rgba(20,184,105,0.08) !important;
  border:1px solid rgba(20,184,105,0.3) !important;
  color:var(--sx-success) !important;
  border-radius:var(--sx-radius-sm);
}

/* ---- Футер ---- */
#footer, .client-footer{
  color:var(--sx-text-disabled) !important;
  border-top:1px solid var(--sx-border);
  font-size:13px;
}

/* ---- Переключатель темы (опционально, см. JS-файл) ---- */
.sx-theme-toggle{
  position:relative;width:44px;height:24px;border-radius:999px;
  background:var(--sx-bg-surface);border:1.5px solid var(--sx-text-disabled);
  cursor:pointer;display:inline-flex;align-items:center;padding:2px;
}
.sx-theme-toggle .knob{
  width:18px;height:18px;border-radius:50%;background:var(--sx-accent);
  transition:transform .25s ease;
}
html[data-theme="dark"] .sx-theme-toggle .knob{ transform:translateX(20px); }