/* =========================================================
   GID-IT — Header / Nav polish for osTicket (fast & local)
   - Никаких внешних шрифтов/градиентов
   - Можно самохостить Inter (необязательно)
   ========================================================= */

/* (опц.) локальный Inter — положите /assets/fonts/Inter-Variable.woff2 */
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight:100 900;
  font-display:swap;
}
html,body{
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
}

/* ----- Шапка ----- */
.gidit-header{ padding:6px 0; }
#logo img{ height:46px !important } /* резкое лого */

/* Блок авторизации справа */
.gidit-header .gidit-auth p{
  margin:2px 0;
  font-size:13px;
  color:#475569;
}
.gidit-header .gidit-auth a{ color:#0f172a; }
.gidit-header .gidit-auth a:hover{ text-decoration:underline }

/* ----- Навигация (табы) ----- */
.gidit-nav{
  border:0 !important;
  background:transparent !important;
  padding:0 4px;
}
.gidit-nav li a{
  border:0 !important;
  background:transparent !important;
  color:#64748b !important;
  padding:8px 12px !important;
  border-radius:10px !important;
  font-weight:600;
}
.gidit-nav li a:hover,
.gidit-nav li.active a{
  color:#0f172a !important;
  background:rgba(37,160,219,.10) !important;
}

/* ===== Reset: убираем серую «рамку» / градиент темы у навигации ===== */
ul#nav,
ul#nav.flush-left{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
ul#nav li,
ul#nav li a,
ul#nav li a:link,
ul#nav li a:visited,
ul#nav li a:hover,
ul#nav li a.active,
ul#nav li.active a,
ul#nav li a span{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
}
/* Иногда тема рисует линию <hr> под меню — прячем */
#content > hr,
#nav hr{ display:none !important; border:0 !important; }
/* Если где-то есть нижняя линия у #header */
#header{ border-bottom:0 !important; }



/* ===== Design pack v1 — общая полировка без внешних ресурсов ===== */
:root{
  --brand:#25a0db;
  --accent:#7cc957;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f6f7fb;
  --card:#ffffff;
}

/* Контейнер и «карточка» контента */
#container{ max-width:1080px; margin:0 auto; }
#content{
  background:var(--card);
  border-radius:16px;
  box-shadow:0 12px 32px rgba(15,23,42,.08);
  padding:24px;
}

/* Типографика */
h1{ font-weight:800; letter-spacing:-.02em; margin:0 0 12px 0; }
p { color:var(--muted); }

/* Кнопки (основная и зелёная) */
.button, .btn{
  border:0 !important;
  border-radius:12px !important;
  padding:12px 18px !important;
  font-weight:700 !important;
  line-height:1 !important;
  transition:transform .04s ease, filter .2s ease, box-shadow .2s ease;
}
.button:active, .btn:active{ transform:translateY(1px) }
.button.blue, .btn-primary{
  background:var(--brand) !important; color:#fff !important;
  box-shadow:0 8px 18px rgba(37,160,219,.25);
}
.green.button, .btn-secondary{
  background:var(--accent) !important; color:#0b2b10 !important;
  box-shadow:0 8px 18px rgba(124,201,87,.22);
}
.button.blue:hover, .btn-primary:hover,
.green.button:hover, .btn-secondary:hover{ filter:brightness(1.05) }

/* Формы — поля и фокус */
input[type=text],input[type=email],input[type=password],textarea,select{
  border:1px solid rgba(15,23,42,.15);
  border-radius:12px; padding:10px 12px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,160,219,.2);
}

/* Таблицы (если попадутся) */
table.list{ border:0; box-shadow:0 4px 16px rgba(15,23,42,.06); border-radius:12px; overflow:hidden }
table.list th{ background:rgba(15,23,42,.05); color:var(--ink) }
table.list td,table.list th{ padding:10px 12px }

/* Скрыть старые маленькие иконки в табах */
#nav li img{ display:none !important }

/* Дарк-режим (авто) */
@media (prefers-color-scheme: dark){
  :root{ --ink:#e5e7eb; --muted:#94a3b8; --bg:#0b1220; --card:#101826; }
  body{ background:var(--bg); color:var(--ink) }
  #content{ box-shadow:0 12px 32px rgba(0,0,0,.35) }
  table.list th{ background:rgba(255,255,255,.04) }
}

.gidit-cta-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0 4px;
}
.gidit-cta{
  background:linear-gradient(0deg, rgba(37,160,219,.08), rgba(37,160,219,.08));
  border:1px solid rgba(37,160,219,.25);
  border-radius:12px; padding:12px 14px; font-size:14px; color:#0f172a;
}
.gidit-cta code{ background:rgba(15,23,42,.08); padding:0 6px; border-radius:6px }
@media (prefers-color-scheme: dark){
  .gidit-cta{ background:linear-gradient(0deg, rgba(37,160,219,.12), rgba(37,160,219,.12)); border-color:rgba(37,160,219,.35); color:#e5e7eb }
  .gidit-cta code{ background:rgba(255,255,255,.08) }
}
@media (max-width:820px){ .gidit-cta-grid{ grid-template-columns:1fr } }

/* ===== UX штрихи ===== */

/* 1) Видимый фокус (доступность) */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37,160,219,.20);
}

/* 2) Картинки и таблицы не «выползают» за контент */
img { max-width: 100%; height: auto; }
table { width: 100%; max-width: 100%; }

/* 3) Чуть компактнее на узких экранах */
@media (max-width: 1000px){
  #container { max-width: 92vw; }
  .gidit-cta-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px){
  #content { padding: 16px; }
  h1 { font-size: 26px; }
  #logo img { height: 38px !important; }
  .gidit-cta-grid { grid-template-columns: 1fr; }
  .button, .btn { width: 100%; text-align: center; }
}

/* 4) Уважение к предпочтению «меньше анимаций» */
@media (prefers-reduced-motion: reduce){
  .button, .btn { transition: none; }
}

/* === FIX: подсветка активного пункта меню === */
ul#nav.gidit-nav li a.active,
ul#nav.gidit-nav li.active a {
  background: rgba(37,160,219,.12) !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(37,160,219,.15);
  font-weight: 700;
}


/* ===== Mobile fix: главная не должна сжиматься на телефонах ===== */
@media (max-width: 820px){
  /* контейнер по ширине экрана */
  #container{ max-width:100vw; padding:0 12px; }

  /* контент — комфортные отступы */
  #content{ padding:16px; }

  /* любые «плавающие» блоки складываем в поток */
  .pull-right, .flush-right,
  .pull-left,  .flush-left,
  .right, .left,
  .sidebar, .callout-right,
  .action-buttons, .action-button, .action-btns,
  #intro .buttons {
    float:none !important;
    width:100% !important;
    margin:8px 0 !important;
    clear:both !important;
  }

  /* сами большие кнопки — на всю ширину и по одной в строке */
  .button, .btn{
    width:100% !important;
    display:block !important;
    text-align:center !important;
    margin:8px 0 !important;
  }

  /* навигация — компактная, с горизонтальной прокруткой при нехватке места */
  #nav{
    display:flex; gap:8px;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  #nav li{ display:inline-block; white-space:nowrap; }
}

/* под совсем узкие экраны делаем заголовок поменьше */
@media (max-width: 480px){
  h1{ font-size:24px; line-height:1.2; }
}


/* ===== Mobile hard-fix (stack everything, no overlaps) ===== */
@media (max-width: 820px){
  /* ширина контейнера и комфортные отступы */
  #container{ max-width:100vw; padding:0 12px; }
  #content{ padding:16px; overflow:hidden; } /* обрезаем «длинные» тени */

  /* НИ ОДНОГО float/absolute у правой колонки и соседних блоков */
  #content .pull-right,
  #content .flush-right,
  #content .right,
  #content .left,
  #content .sidebar,
  #content .callout-right,
  #content .callout,
  #content .feature,
  #content .aside {
    float:none !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin:12px 0 !important;
    clear:both !important;
  }

  /* Кнопки — стопкой, на всю ширину */
  #content .action-buttons,
  #content .btn-block,
  #content #intro .buttons {
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    width:100% !important;
  }
  #content .action-buttons .button,
  #content .action-buttons .btn,
  #content .btn-block .button,
  #content .btn-block .btn,
  #content #intro .buttons .button,
  #content #intro .buttons .btn {
    width:100% !important;
    margin:0 !important;
    text-align:center !important;
  }

  /* Навигация — прокручиваемая, не перекрывается */
  #nav{
    display:flex; gap:8px;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    position:relative; z-index:1;
  }
  #nav li{ display:inline-block; white-space:nowrap; }

  /* Заголовок не должен прилипать к верху */
  #content h1{ margin-top:8px; }
}

/* Совсем узкие экраны */
@media (max-width: 480px){
  h1{ font-size:24px; line-height:1.2; }
  #logo img{ height:36px !important; }
}

/* ===== Fluid type + переносы слов / длинных строк ===== */

/* Заголовок — плавный размер, аккуратные переносы */
h1{
  font-size: clamp(26px, 3.2vw + 1rem, 36px);
  line-height: 1.2;
  text-wrap: balance;     /* балансировка строк в заголовках */
  -webkit-hyphens: auto;  /* переносы */
  -ms-hyphens: auto;
  hyphens: auto;
}

/* Текст, списки, ячейки таблиц, ссылки — можно переносить и рвать длинные URL */
#content p,
#content li,
#content td,
#content th,
#content a,
#content span {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;              /* переносы по словарю (работает при корректном lang="ru") */
  overflow-wrap: anywhere;    /* безопасно ломать длинные строки/URL */
  word-break: break-word;     /* запасной вариант для старых браузеров */
}

/* Не ломать форматирование кода / pre (если встретится) */
#content pre,
#content code,
#content samp,
#content kbd {
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
  white-space: pre-wrap;      /* пусть переносится только по пробелам */
}

/* ===== Глобальные переносы текста на всех страницах клиента ===== */

/* Основные контейнеры с текстом */
#content,
#page,
#content .thread-body,
#content .thread-entry,
#content .message,
#content .response,
#content .post,
#content .kb,
#content .article,
#content .description,
#content .note,
#content .msg {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;               /* переносы по словарю (исп. lang="ru") */
  overflow-wrap: anywhere;     /* длинные слова/URL не ломают вёрстку */
  word-break: break-word;
}

/* В таблицах разрешаем перенос строк (часто в списках заявок) */
table.list th,
table.list td {
  white-space: normal !important;
  -webkit-hyphens: auto; hyphens: auto;
  overflow-wrap: anywhere; word-break: break-word;
}
table.list td a { overflow-wrap: anywhere; word-break: break-word; }

/* Не трогаем форматирование кода/логов */
#content pre,
#content code,
#content kbd,
#content samp {
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
  white-space: pre-wrap;
}


/* ===== Mobile text-wrap hard fix ===== */
@media (max-width: 820px){
  /* не вылезать за пределы карточки */
  #content, #content * { box-sizing: border-box; max-width: 100% !important; }

  /* в текстовых узлах запрещаем nowrap и разрешаем переносы */
  #content h1, #content h2, #content h3,
  #content p, #content li, #content span, #content a,
  #content .lead, #content .intro, #content .description,
  #content .message, #content .response, #content .post {
    white-space: normal !important;
    overflow-wrap: anywhere !important;   /* длинные слова/URL ломаем безопасно */
    word-break: break-word !important;
    -webkit-hyphens: auto; hyphens: auto;
  }

  /* не трогаем форматирование кода/логов */
  #content pre, #content code, #content kbd, #content samp {
    white-space: pre-wrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
  }

  /* любые «лендинговые» обёртки — строго 100% ширины */
  #content #landing, #content .landing,
  #content #intro,    #content .intro {
    width: 100% !important;
    margin-right: 0 !important;
  }
}