/* ==========================================================================
   chipps-theme.css — hellochipps design layer for the support portal.

   Direct manual port of the hellochipps Less design system
   (g:\domains\auslogics\git_chipps\assets\chipps\less\) to plain CSS.
   Loaded LAST in client_chipps/header.inc.php so it overrides the legacy
   theme.css / site.css base (font, body, typography) and provides the new
   .chipps-* components. Bootstrap (CSS+JS) is removed; this file ships a
   light transitional grid so non-migrated pages keep their layout until
   TASK-002…004.

   Source of values: concept/design-concept.md + the reference Less files.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Step 1 — Design tokens (port of _tokens.less)
   -------------------------------------------------------------------------- */
:root {
    /* фон и нейтрали */
    --bg-900: #1A1A1F;
    --bg-800: #202024;
    --bg-700: #2B2B30;
    --bg-card: #1F2A3A;
    --line-700: #2B2B30;
    --line-soft: #5C5C5C;

    /* surfaces for app screens */
    --surface-app-bg: #282828;
    --surface-app-elevated: #303030;
    --surface-app-border: #414141;

    /* текст */
    --text-0: #FFFFFF;
    --text-100: #ECECEF;
    --text-300: #9393A1;
    --text-500: #51515D;

    /* акцент-градиент */
    --grad-normal: linear-gradient(101deg, #60CDFF 0%, #24E9FF 100%);
    --grad-hover: linear-gradient(101deg, #7DD6FF 0%, #57EEFF 100%);
    --grad-pressed: linear-gradient(101deg, #60CDFF 0%, #24D2E5 100%);
    --accent-blue-deep: #3F7CEF;
    --accent-cyan: #60CDFF;
    --accent-cyan-hover: #7DD6FF;
    --accent-glow: rgba(96, 205, 255, 0.45);
    --text-link: #60CDFF;
    --text-on-accent: #1A1A1A;
    --accent-cyan-rgb: 96, 205, 255;
    --accent-blue-deep-rgb: 63, 124, 239;

    /* семантика */
    --state-green: #2ED47A;
    --state-red: #EE511F;
    --state-orange: #FF8B4A;
    --state-info: #60CDFF;

    /* blueprint */
    --bp-line: rgba(255, 255, 255, 0.05);
    --bp-line-strong: rgba(63, 124, 239, 0.18);
    --bp-frame: rgba(126, 170, 255, 0.35);

    /* контейнеры */
    --container-desktop: 1200px;
    --container-narrow: 760px;
    --container-gutter: 20px;

    /* отступы */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 64px;
    --space-2xl: 136px;

    /* радиусы */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 50px;

    /* тени */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-cta: 0 8px 28px rgba(96, 205, 255, 0.45);

    /* прочие константы */
    --motion-base: 160ms ease;
    --navbar-height: 72px;

    /* шрифты */
    --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Step 1 — Base elements (port of _base.less)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg-900);
    color: var(--text-100);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-0);
    margin: 0 0 var(--space-md);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(36px, 5vw, 44px);
    line-height: 52px;
}

h2 {
    font-size: 36px;
    line-height: 44px;
}

h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

h4 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

p {
    margin: 0 0 var(--space-md);
    font-size: 16px;
    line-height: 26px;
    color: var(--text-100);
}

a {
    color: var(--accent-cyan);
    text-decoration: none;
    transition: color var(--motion-base);
}

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

::selection {
    background: rgba(var(--accent-blue-deep-rgb), 0.35);
    color: var(--text-0);
}

mark {
    background: rgba(var(--accent-blue-deep-rgb), 0.35);
    color: var(--text-0);
    padding: 0 4px;
    border-radius: 2px;
}

kbd {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-0);
    background: var(--bg-700);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 2px 6px;
}

blockquote {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--bp-frame);
    color: var(--text-300);
}

/* типографические утил-классы (шкала §2 _base.less) */
.chipps-text-hero { font-size: clamp(36px, 5vw, 44px); line-height: 52px; font-weight: 700; color: var(--text-0); letter-spacing: -0.01em; }
.chipps-text-h2 { font-size: 36px; line-height: 44px; font-weight: 700; color: var(--text-0); }
.chipps-text-h2-sub { font-size: 30px; line-height: 40px; font-weight: 700; color: var(--text-0); }
.chipps-text-h3 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-0); }
.chipps-text-h4 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-0); }
.chipps-text-lead { font-size: 18px; line-height: 26px; font-weight: 400; color: var(--text-100); }
.chipps-text-body { font-size: 16px; line-height: 26px; font-weight: 400; color: var(--text-100); }
.chipps-text-small { font-size: 14px; line-height: 20px; color: var(--text-300); }
.chipps-text-mono { font-family: var(--font-mono); font-size: 14px; }
.chipps-nowrap { white-space: nowrap; }
.chipps-text-gradient {
    background: var(--grad-normal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --------------------------------------------------------------------------
   Step 2 — Transitional grid (TODO: удалить после TASK-004)
   Заменяет снятую Bootstrap-сетку, чтобы немигрированные страницы
   (login/open/tickets/view) и любой container/row/col не схлопывались.
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-desktop);
    margin: 0 auto;
    padding: 0 var(--container-gutter);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.row > [class*="col-"] {
    padding: 0 10px;
}

.col-xs-1,  .col-sm-1,  .col-md-1,  .col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.col-xs-2,  .col-sm-2,  .col-md-2,  .col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-xs-3,  .col-sm-3,  .col-md-3,  .col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
.col-xs-4,  .col-sm-4,  .col-md-4,  .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-xs-5,  .col-sm-5,  .col-md-5,  .col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-xs-6,  .col-sm-6,  .col-md-6,  .col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
.col-xs-7,  .col-sm-7,  .col-md-7,  .col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-xs-8,  .col-sm-8,  .col-md-8,  .col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-xs-9,  .col-sm-9,  .col-md-9,  .col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { flex: 0 0 100%;     max-width: 100%; }

.col-md-offset-0, .col-sm-offset-0, .col-xs-offset-0 { margin-left: 0; }
.col-xs-offset-2 { margin-left: 16.6667%; }

@media (max-width: 767px) {
    /* стекинг колонок на узких экранах */
    .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .col-xs-offset-2 { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Step 3 — Buttons (port of components/_button.less)
   -------------------------------------------------------------------------- */
.chipps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 20px 24px;
    min-width: 245px;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-0);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--motion-base), box-shadow var(--motion-base), opacity var(--motion-base);
    user-select: none;
}

.chipps-btn:hover {
    color: var(--text-0);
}

.chipps-btn:disabled,
.chipps-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chipps-btn--primary {
    background: var(--grad-normal);
    box-shadow: var(--shadow-cta);
    color: var(--text-on-accent);
}

.chipps-btn--primary:hover:not(:disabled):not(.is-disabled) {
    background: var(--grad-hover);
    color: var(--text-on-accent);
}

.chipps-btn--primary:active:not(:disabled):not(.is-disabled) {
    background: var(--grad-pressed);
}

.chipps-btn--ghost {
    background: transparent;
    border: 1.5px solid var(--bp-frame);
    box-shadow: none;
}

.chipps-btn--ghost:hover:not(:disabled):not(.is-disabled) {
    background: rgba(var(--accent-blue-deep-rgb), 0.12);
}

.chipps-btn--sm {
    padding: 10px 18px;
    min-width: 0;
    font-size: 14px;
    border-radius: var(--radius-md);
}

.chipps-btn--lg {
    padding: 22px 40px;
    font-size: 18px;
}

/* --------------------------------------------------------------------------
   Step 3 — Forms (port of components/_form.less)
   -------------------------------------------------------------------------- */
.chipps-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.chipps-form-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-100);
}

.chipps-form-input,
.chipps-form-textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 26px;
    color: var(--text-0);
    background: var(--bg-800);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    outline: none;
    transition: border-color var(--motion-base), box-shadow var(--motion-base);
}

.chipps-form-input::placeholder,
.chipps-form-textarea::placeholder {
    color: var(--text-300);
}

.chipps-form-input:focus,
.chipps-form-textarea:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb), 0.15);
}

.chipps-form-textarea {
    min-height: 140px;
    resize: vertical;
}

.chipps-form-label-note {
    font-weight: 400;
    color: var(--text-300);
}

.chipps-form-hint {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-300);
}

.chipps-form-file {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    color: var(--text-100);
}

.chipps-form-file::file-selector-button {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-0);
    background: var(--bg-800);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    margin-right: 12px;
    cursor: pointer;
    transition: border-color var(--motion-base), color var(--motion-base);
}

.chipps-form-file:hover::file-selector-button {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.chipps-form-field--error .chipps-form-file::file-selector-button {
    border-color: var(--state-red);
}

.chipps-form-field--error .chipps-form-input,
.chipps-form-field--error .chipps-form-textarea {
    border-color: var(--state-red);
}

.chipps-form-field--error .chipps-form-input:focus,
.chipps-form-field--error .chipps-form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(238, 81, 31, 0.15);
}

.chipps-form-message {
    display: block;
    margin-bottom: var(--space-md);
    padding: 12px 16px;
    font-size: 14px;
    line-height: 20px;
}

.chipps-form-message--error { color: var(--state-red); }
.chipps-form-message--ok    { color: var(--state-green); }
.chipps-form-message--info  { color: var(--state-info); }

/* --------------------------------------------------------------------------
   Step 4 — Navbar (port of components/_navbar.less)
   -------------------------------------------------------------------------- */
.chipps-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--navbar-height);
    background: rgba(16, 16, 20, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--motion-base);
}

.chipps-navbar.is-scrolled {
    border-bottom-color: var(--line-700);
}

/* Промежуточный .container между навбаром (height:72px) и __inner не имеет своей
   высоты, из-за чего height:100% у __inner упирался в auto и контент прижимался
   вверх. Прокидываем высоту по цепочке, чтобы __inner центрировал лого/меню. */
.chipps-navbar > .container {
    height: 100%;
}

.chipps-navbar__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.chipps-navbar__brand {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 20px;
    color: var(--text-0);
    letter-spacing: -0.01em;
}

.chipps-navbar__brand:hover {
    color: var(--text-0);
}

.chipps-navbar__brand img {
    display: block;
    height: 26px;
    width: auto;
}

.chipps-navbar__menu {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* .chipps-navbar__menu — это <nav>, реальный список внутри это <ul>: сбрасываем
   браузерные дефолты (маркер-точка, левый отступ, вертикальный margin), иначе пункты
   уходят вверх и получают буллет. Мобильный column-вариант — в @media ниже. */
.chipps-navbar__menu ul {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.chipps-navbar__menu li {
    list-style: none;
}

.chipps-navbar__link {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-100);
}

.chipps-navbar__link:hover {
    color: var(--accent-cyan);
}

.chipps-navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.chipps-navbar__burger {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.chipps-navbar__burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text-100);
    position: relative;
}

.chipps-navbar__burger span::before,
.chipps-navbar__burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text-100);
}

.chipps-navbar__burger span::before { top: -6px; }
.chipps-navbar__burger span::after { top: 6px; }

/* Бургер < 1200px: меню скрыто, бургер виден; .is-open раскрывает панель.
   Тоггл класса .is-open — index.js (burger click). */
@media (max-width: 1199px) {
    .chipps-navbar__burger {
        display: inline-flex;
    }

    .chipps-navbar__menu {
        display: none;
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-sm) var(--container-gutter);
        background: rgba(16, 16, 20, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line-700);
    }

    .chipps-navbar__menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    #header-menu.chipps-navbar__menu.is-open {
        display: flex;
    }

    .chipps-navbar__menu .chipps-navbar__link {
        display: block;
        padding: var(--space-xs) 0;
    }
}

/* --------------------------------------------------------------------------
   Step 4 — Footer (port of components/_footer.less)
   -------------------------------------------------------------------------- */
.chipps-footer {
    background: var(--bg-900);
    border-top: 1px solid var(--line-700);
    padding: 64px 0 48px;
    color: var(--text-300);
}

.chipps-footer__columns {
    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    justify-content: space-between;
}

.chipps-footer__brand img {
    display: block;
    height: 48px;
    width: auto;
}

.chipps-footer__column-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-100);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-md);
}

.chipps-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chipps-footer__links li {
    margin-bottom: var(--space-sm);
}

.chipps-footer__links li:last-child {
    margin-bottom: 0;
}

.chipps-footer__links a {
    font-size: 16px;
    color: var(--text-300);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.chipps-footer__links a:hover {
    color: var(--accent-cyan);
}

.chipps-footer__bottom {
    border-top: 1px solid var(--line-700);
    padding-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-size: 14px;
    color: var(--text-300);
}

.chipps-footer__bottom-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}

.chipps-footer__bottom-row ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.chipps-footer__bottom-row a {
    color: var(--text-300);
}

.chipps-footer__bottom-row a:hover {
    color: var(--accent-cyan);
}

.chipps-footer__copyright {
    margin: 0;
    font-size: 14px;
    color: var(--text-300);
}

.chipps-footer__trademark {
    font-size: 14px;
    color: var(--text-300);
    margin: 0;
}

@media (max-width: 767px) {
    .chipps-footer__columns {
        gap: var(--space-lg);
    }
    .chipps-footer__bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* --------------------------------------------------------------------------
   Step 4 — Flash messages restyle (.alert.alert-*) on tokens, not Bootstrap.
   HTML-классы .alert.alert-* НЕ переименовываем (на них завязан JS-dismiss и
   разметка ядра). Bootstrap.css снят — внешний вид задаём нашими токенами.
   Карта семантики: danger→red, warning→orange, info→info, success→green.
   -------------------------------------------------------------------------- */
.alert {
    position: relative;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    border: 1px solid var(--line-700);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--bg-800);
    color: var(--text-100);
    font-size: 14px;
    line-height: 20px;
}

.alert.alert-dismissible {
    padding-right: 40px;
}

.alert a {
    color: var(--accent-cyan);
}

.alert.alert-danger,
.alert.alert-error {
    border-left-color: var(--state-red);
    color: var(--text-100);
}

.alert.alert-warning {
    border-left-color: var(--state-orange);
}

.alert.alert-info {
    border-left-color: var(--state-info);
}

.alert.alert-success {
    border-left-color: var(--state-green);
}

/* Крестик-закрытие. После снятия bootstrap.css он должен остаться видимым и
   кликабельным (dismiss-хендлер — index.js). */
.alert .close,
.alert [data-dismiss="alert"] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-300);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    transition: color var(--motion-base);
}

.alert .close:hover,
.alert [data-dismiss="alert"]:hover {
    color: var(--text-0);
}

.alert .close span {
    display: block;
}

/* --------------------------------------------------------------------------
   Step 5 — osTicket form integration (TASK-002a)
   Тематизация классов ядра osTicket: landing, раскладка open, поля, captcha,
   кнопки. Перебиваем светлые значения из site.css без !important.
   -------------------------------------------------------------------------- */

/* --- 5.1 Grid: недостающий col-md-offset-1 (landing index.php) --- */
.col-md-offset-1 {
    margin-left: 8.33333%;
}

@media (max-width: 767px) {
    .col-md-offset-1 {
        margin-left: 0;
    }
}

/* --- 5.2 Landing типографика --- */
#landing_page .main-content h1 {
    margin-bottom: var(--space-md);
}

#landing_page .main-content p {
    font-size: 18px;
    line-height: 26px;
    color: var(--text-100);
    margin-bottom: var(--space-md);
}

.requred-p {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-300);
    margin-bottom: var(--space-sm);
}

/* --- 5.3 open: раскладка и контейнеры --- */
.page-top {
    background: transparent;
}

.form-wrapper {
    background: transparent;
    border: 1px solid var(--line-700);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

/* contacts-col2 адаптивный padding: на мобайле убираем горизонтальный отступ */
@media (max-width: 767px) {
    .contacts-col2 {
        padding: 0 var(--space-sm);
    }
}

/* --- 5.3b open/contacts: текст белым (перебить #000/#444 из site.css) --- */
.contacts-title {
    color: var(--text-0);
}

.contacts-text-color-description {
    color: var(--text-100);
}

/* --- 5.4 open: поля ядра --- */

/* Базовый стиль полей: перебить светлое bg:#f5f5f5/border:#ccc из site.css */
.c-input,
.field-text input,
.c-textarea {
    background: var(--bg-800);
    border: 1px solid var(--line-soft);
    color: var(--text-100);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    height: auto; /* перебить фиксированные 33px из site.css:1008 — высота от padding/line-height */
    outline: none;
    transition: border-color var(--motion-base), box-shadow var(--motion-base);
    width: 100%;
    box-sizing: border-box;
}

.c-input::placeholder,
.field-text input::placeholder,
.c-textarea::placeholder {
    color: var(--text-300);
}

/* Focus: перебить #ffffff/#4477aa из site.css (site.css:1037 ставит белый фон на :focus) */
.c-input:focus,
.field-text input:focus,
.c-textarea:focus {
    background: var(--bg-900);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb), 0.15);
}

/* Заполненное поле (JS вешает .filled — index.js:191,198): перебить site.css:1020 background:white.
   Фон = var(--bg-900) (как у фокуса/формы/лейбла .lb_label) — чтобы плавающий лейбл не выделялся
   тёмным пятном на более светлом поле. */
.c-input.filled,
.field-text input.filled {
    background: var(--bg-900);
}

/* Плавающий лейбл label_better (.lb_label): перебить светлый фон/серый bold из site.css:1143 —
   фон под цвет формы, текст — циан-акцент, без жирного начертания */
.lb_label {
    background-color: var(--bg-900);
    color: var(--accent-cyan);
    font-weight: 400;
}

/* Автозаполнение Chrome (-webkit-autofill): перебить белый фон/чёрный текст из site.css:1022,1052
   (там !important) — фон под тему, текст светлый. !important здесь обязателен: и браузер, и site.css
   ставят свои значения через !important, иначе тёмный фон не применится. */
.c-input:-webkit-autofill,
.c-input:-webkit-autofill:hover,
.field-text input:-webkit-autofill,
.field-text input:-webkit-autofill:hover {
    -webkit-box-shadow: inset 0 0 0 1000px var(--bg-900) !important;
    -webkit-text-fill-color: var(--text-100) !important;
    caret-color: var(--text-100);
}

.c-input:-webkit-autofill:focus,
.field-text input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px var(--bg-900) !important;
    -webkit-text-fill-color: var(--text-100) !important;
}

/* Воздух между соседними полями-обёртками .form-group */
.form-group + .form-group {
    margin-top: 17px;
}

/* Auto-detect (ядровая кнопка action-button из staff/templates/timezone.tmpl.php — ядро не правим):
   ghost-вид как Cancel на open.php, компактный размер. Скоуп .page-registration и .page-profile. */
.page-registration .action-button.btn-default,
.page-profile .action-button.btn-default {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--text-0);
    border: 1.5px solid var(--bp-frame);
    border-radius: var(--radius-md);
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--motion-base), border-color var(--motion-base);
}

.page-registration .action-button.btn-default:hover,
.page-profile .action-button.btn-default:hover {
    background: rgba(var(--accent-blue-deep-rgb), 0.12);
    border-color: var(--accent-cyan);
}

/* --- 5.6 auth: узкий контейнер для страниц аутентификации (login/register/pwreset) ---
   Снимает Bootstrap-сетку (.container/.row/.col-*) с нашей разметки и даёт центрированный
   узкий контейнер 760px с брендовым ритмом отступов (AC2/AC4).
   Прим.: поля auth-форм используют c-input/.error-input (osTicket-native — см.
   «Архитектурное решение» TASK-003, AC3-ветка 2). .chipps-form-input/.chipps-form-field--error
   сюда НЕ применяются по ограничению ядрового $cf->render() на register. Ядровая кнопка
   Auto-detect темизируется отдельным правилом .page-registration .action-button.btn-default выше. */
.chipps-auth {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: var(--space-xl) var(--container-gutter);
}

.chipps-auth .page-top {
    margin-bottom: var(--space-md);
}

/* Лоадер "Please Wait!" (#loading/#overlay из css/osticket.css) — тёмная тема.
   Спиннер: анимированный SVG (циан --accent-cyan) вместо FhHRx-Spinner.gif (osticket.css:19).
   SMIL <animateTransform> анимируется даже когда SVG используется как background-image
   (CSS @keyframes внутри background-SVG не работают — поэтому именно SMIL). */
#loading {
    background-color: var(--bg-800);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Ccircle%20cx='20'%20cy='20'%20r='16'%20fill='none'%20stroke='%2360CDFF'%20stroke-opacity='0.2'%20stroke-width='4'/%3E%3Cpath%20d='M20%204%20a16%2016%200%200%201%2016%2016'%20fill='none'%20stroke='%2360CDFF'%20stroke-width='4'%20stroke-linecap='round'%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20from='0%2020%2020'%20to='360%2020%2020'%20dur='0.8s'%20repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 32px 32px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    color: var(--text-100);
    box-shadow: var(--shadow-card);
}

#loading h4 {
    color: var(--accent-cyan);
}

#loading p {
    color: var(--text-300);
}

/* Ошибки: перебить #ffecec из site.css — фон оставляем тёмным, только красная рамка */
.c-input.has-error,
.c-textarea.has-error {
    border-color: var(--state-red);
    background: var(--bg-800);
}

.c-input.has-error:focus,
.c-textarea.has-error:focus {
    box-shadow: 0 0 0 3px rgba(238, 81, 31, 0.15);
}

/* Inline error message */
.error-input {
    color: var(--state-red);
    font-size: 13px;
    line-height: 18px;
    margin-top: 4px;
}

/* Подсказки */
.field-hint,
.field-hint-inner {
    color: var(--text-300);
    font-size: 13px;
    line-height: 18px;
}

/* Звёздочка обязательного поля — видима на тёмном фоне */
.g-row.surely:before {
    color: var(--state-red);
}

/* Read-only (залогинен): приглушённый фон/текст, не интерактивен */
.c-input.c-noeditable {
    background: var(--bg-700);
    color: var(--text-300);
    border-color: var(--line-700);
    cursor: default;
    user-select: text;
}

.c-input.c-noeditable:focus {
    border-color: var(--line-700);
    box-shadow: none;
}

/* --- 5.5 open: captcha --- */
.captchaRow {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.captchaRow .required {
    color: var(--text-100);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    width: 100%;
}

.captchaRow .captcha {
    display: flex;
    align-items: center;
}

.captchaRow .captcha img {
    display: block;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-700);
}

#captcha {
    background: var(--bg-800);
    border: 1px solid var(--line-soft);
    color: var(--text-100);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 26px;
    outline: none;
    transition: border-color var(--motion-base), box-shadow var(--motion-base);
}

#captcha:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb), 0.15);
}

.captchaRow .error {
    color: var(--state-red);
    font-size: 13px;
    line-height: 18px;
}

/* --- 5.6 Сброс нативного вида input-кнопок (chipps-btn на <input>) --- */
/* Без этого WebKit добавляет системный вид, ломая padding/background */
input.chipps-btn {
    -webkit-appearance: none;
    appearance: none;
}

/* --- 5.7 tickets list + ticket view --- */
/* Брендирование двух последних Bootstrap-страниц портала (список тикетов и
   просмотр тикета с перепиской). Снимаем container/row/col, panel-*, table-*,
   btn-group; ядро-эмитируемое (поля c-*, select2, пагинация, сообщения по id)
   оставляем и темизируем каскадом. Значения — только токены :root. */

/* Каркас-контейнер (замена container>row>col) */
.chipps-container {
    max-width: var(--container-desktop);
    margin: 0 auto;
    padding: 0 var(--container-gutter);
}
.chipps-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}
@media (max-width: 1199px) {
    .chipps-cards-grid { grid-template-columns: 1fr; }
}
/* flex-утилиты вместо снятых row/col */
.chipps-filter-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;   /* контролы в один ряд по центру (поле/кнопка одной высоты) */
}

/* tickets.php: компактная панель фильтра — контролы под габарит .chipps-status-switch__item
   (поле/кнопка по умолчанию крупные: .chipps-btn 20/24px min-width:245px, .c-input 14/16px width:100%;
   нативный select «All subjects» был не стилизован). Скоуп — только .chipps-filter-row (есть лишь на tickets). */
.chipps-filter-row .c-select,
.chipps-filter-row .c-input,
.chipps-filter-row .chipps-btn {
    height: 38px;
    min-width: 0;
    margin: 0;           /* снять legacy margin-bottom:4px (site.css:1011) — иначе поле уезжает вверх в ряду */
    padding: 8px 14px;
    font-size: 14px;
    line-height: 20px;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}
/* нативный select — тёмная тема + кастомная стрелка с отступом от края (нативная липла к границе) */
.chipps-filter-row .c-select {
    background-color: var(--bg-800);
    color: var(--text-100);
    border: 1px solid var(--line-soft);
    cursor: pointer;
    transition: border-color var(--motion-base), color var(--motion-base);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239393A1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.chipps-filter-row .c-select:hover,
.chipps-filter-row .c-select:focus {
    border-color: var(--accent-cyan);
    outline: none;
}
/* поле номера тикета — компактное, не на всю ширину */
.chipps-filter-row .c-input {
    width: auto;
    min-width: 200px;
}
/* кнопка Search — компактная (снять min-width:245px и тяжёлый CTA-glow, оставить акцент-заливку) */
.chipps-filter-row .chipps-btn {
    font-weight: 500;
    box-shadow: none;
}
.chipps-actions {
    display: flex;
    gap: var(--space-xs);
    justify-content: flex-end;
}

/* Карточка .chipps-card (замена всех panel panel-*) */
.chipps-card {
    background: var(--bg-card);
    border: 1px solid var(--line-700);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-md);
    overflow: hidden;
}
.chipps-card__header {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--line-700);
}
.chipps-card__title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--text-0);
}
.chipps-card__body {
    padding: var(--space-md);
    color: var(--text-100);
}
/* варианты переписки: различие типов записей акцентом (design-concept) */
.chipps-card--message  { border-left: 3px solid var(--accent-cyan); }   /* реплика клиента */
.chipps-card--response { border-left: 3px solid var(--state-green); }   /* ответ агента */
.chipps-card--info     { border-left: 3px solid var(--state-info); }    /* guest sign-in */

/* Таблица .chipps-table (замена table table-striped / th-sm / nowrap-header) */
.chipps-table { width: 100%; border-collapse: collapse; }
.chipps-table th {
    text-align: left;
    padding: var(--space-sm);
    color: var(--text-300);
    font-weight: 500;
    border-bottom: 1px solid var(--line-700);
    white-space: nowrap;
}
.chipps-table td {
    padding: var(--space-sm);
    color: var(--text-100);
    border-bottom: 1px solid var(--line-700);
}
.chipps-table tbody tr:nth-child(odd)  { background: var(--bg-900); }
.chipps-table tbody tr:nth-child(even) { background: var(--bg-800); }
.chipps-table a { color: var(--accent-cyan); }
.chipps-table th a { color: var(--text-300); text-decoration: none; }    /* ссылки сортировки */
.chipps-table th.sort-by-this a { color: var(--accent-cyan); }           /* активная колонка (перебить site.css:1569 #0a0) */
.chipps-table .truncate {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* key-value таблицы метаданных просмотра (внутри .chipps-card) */
.chipps-table--kv td:first-child { color: var(--text-300); width: 40%; }
.chipps-table--kv tbody tr { background: transparent; }

/* Переключатель статуса (замена btn-group + btn btn-default state) */
.chipps-status-switch { display: inline-flex; gap: var(--space-xs); }
.chipps-status-switch__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-100);
    background: transparent;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color var(--motion-base), color var(--motion-base);
}
.chipps-status-switch__item:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}
.chipps-status-switch__item.is-active {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(var(--accent-cyan-rgb), .10);
}
.chipps-status-switch__item.is-disabled { opacity: .45; pointer-events: none; }

/* Пагинация (ядро-вывод, только CSS по .pagination-wrapper) */
.pagination-wrapper {
    text-align: center;
    color: var(--text-300);
    margin-top: var(--space-md);
}
.pagination-wrapper a { color: var(--accent-cyan); text-decoration: none; padding: 0 6px; }
.pagination-wrapper b { color: var(--text-100); padding: 0 6px; }   /* [N] и числа */

/* Сообщения по id + баннер переоткрытия + пустые состояния */
#msg_error, #msg_notice, #msg_warning, .warning-banner {
    display: block;
    margin-bottom: var(--space-md);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border-left: 3px solid;
    font-size: 14px;
    line-height: 20px;
}
#msg_error  { color: var(--state-red);   border-color: var(--state-red);   background: rgba(238, 81, 31, .08); }
#msg_notice { color: var(--state-green); border-color: var(--state-green); background: rgba(46, 212, 122, .08); }
#msg_warning,
.warning-banner { color: var(--state-orange); border-color: var(--state-orange); background: rgba(255, 139, 74, .08); }
/* .nothing скоупнут под секцию (перебить site.css:1724, специфичность 0,2,0) */
.tickets-table-section .nothing {
    color: var(--text-300);
    font-size: 18px;
    padding: var(--space-md) 0;
    text-align: center;
}
.chipps-table td.nothing-cell { border-bottom: none; padding: 0; }   /* сброс ячейки под пустым состоянием */

/* Перебить светлые легаси-фоны секций + thread-аватар */
.ticket-threads-section { background: transparent; }   /* перебить site.css:1604 #fafafa */
.thread-avatar .avatar-wrapper .avatar {
    background: var(--bg-700);
    border-color: var(--line-700);
}   /* перебить site.css:1671 */
.sub-head { color: var(--text-300); }
/* приглушённый текст системных событий ленты (читаемость на тёмном) */
.thread-event { color: var(--text-300); }
/* подпись ошибки message над формой ответа */
.text-error { color: var(--state-red); }

/* --- 5.8 form-pages: profile / accesslink / edit --- */
/* Разделитель внутри тёмной карточки формы */
.form-wrapper hr { border: none; border-top: 1px solid var(--line-700); margin: var(--space-md) 0; }
/* Ручные label на странице профиля (на auth-страницах ручных label не было) */
.page-profile .form-group label { display: inline-block; margin-bottom: var(--space-xs);
    color: var(--text-100); font-size: 14px; font-weight: 500; }

/* --- 5.9 KB / FAQ: двухколоночный self-service --- */

/* Каркас (замена row > span8 / span4) */
.chipps-kb-layout { display: flex; gap: var(--space-lg); align-items: flex-start; }
.chipps-kb-main   { flex: 1 1 0; min-width: 0; }          /* min-width:0 — длинный контент/таблицы не распирают колонку */
.chipps-kb-aside  { flex: 0 0 280px; }
@media (max-width: 1199px) {                               /* брейкпоинт desktop из design-concept */
    .chipps-kb-layout { flex-direction: column; }
    .chipps-kb-aside  { flex-basis: auto; width: 100%; }
}

/* Сайдбар: нейтрализовать легаси width/margin (theme.css:953-957) + тёмные блоки */
.chipps-kb-aside .sidebar { width: auto; margin: 0; }     /* перебить width:215px + margin-left:20px */
.chipps-kb-aside .content {
    background: var(--bg-800);
    border: 1px solid var(--line-700);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.chipps-kb-aside .header { color: var(--text-300); font-weight: 600; margin-bottom: var(--space-xs); }
.chipps-kb-aside section + section { margin-top: var(--space-md); }
.chipps-kb-aside a { color: var(--accent-cyan); }
.chipps-kb-aside a:hover { color: var(--accent-cyan-hover); }

/* Нативное поле поиска .search (не виджет) — тёмное, на всю ширину сайдбара */
.chipps-kb-aside .search {
    width: 100%; box-sizing: border-box;
    background: var(--bg-800);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    color: var(--text-100);
    padding: 10px 14px;
}
.chipps-kb-aside .search:focus { border-color: var(--accent-cyan); outline: none; }

/* Категории #kb (перебить theme.css:477+) */
.page-kb #kb { margin: 0; padding: 0; }
.page-kb #kb > li { list-style: none; padding: var(--space-md) 0; border-bottom: 1px solid var(--line-700); }
.page-kb #kb h4 a { color: var(--text-0); font-size: 20px; }
.page-kb #kb a, .page-kb .popular-faq a { color: var(--accent-cyan); }
.page-kb .faded { color: var(--text-300); }               /* перебить theme.css:153 #666 */

/* Списки FAQ #faq ol (перебить светлые границы/иконку/hover theme.css:447-472) */
.page-kb #faq ol { border-top: 1px solid var(--line-700); margin-left: 0; padding-left: 0; }
.page-kb #faq ol li { list-style: none; border-bottom: 1px solid var(--line-700); }
.page-kb #faq ol li a { color: var(--accent-cyan); background-image: none; padding: var(--space-sm) 0; display: block; }
.page-kb #faq ol li a:hover { background: rgba(var(--accent-cyan-rgb), 0.08); }   /* перебить #e9f5ff */

/* Статья: заголовок, хлебные крошки */
.page-kb .article-title { color: var(--text-0); font-weight: 600; }
.page-kb #breadcrumbs { color: var(--text-300); }
.page-kb #breadcrumbs a { color: var(--accent-cyan); }

/* Тело ответа FAQ
   bg/color/line-height — БЕЗ !important: .page-kb .thread-body (специфичность 0,2,0) бьёт
   .thread-body из thread.css (0,1,0), где у этих свойств НЕТ !important → выигрываем
   специфичностью независимо от порядка загрузки.
   font-size — С !important: thread.css:30 держит font-size:14px !important.
   Ссылки — С !important: thread.css:116 .thread-body a:not(.button){color:#428bca!important}. */
.page-kb .thread-body {
    background: transparent;
    color: var(--text-100);
    line-height: 26px;
    font-size: 16px !important;
}
.page-kb .thread-body a:not(.button) { color: var(--accent-cyan) !important; }
.page-kb .thread-body a:not(.button):hover { color: var(--accent-cyan-hover) !important; }
.page-kb .thread-body img { max-width: 100%; height: auto; }   /* большие картинки — в колонку */