/* ============================================================
 * components.css — общие UI-классы Karakurt поверх Tailwind CDN.
 *
 * Подключён в _Layout.cshtml ПОСЛЕ Tailwind. Tailwind utility-классы
 * продолжают использоваться — компонентные классы абстрагируют только
 * повторяющиеся паттерны (кнопки, toast'ы, sticky-first-col).
 *
 * См. docs/ui-buttons.md — конвенция кнопок и migration policy.
 * ============================================================ */


/* ─── Кнопки ───────────────────────────────────────────────── */
/* Tailwind CDN не поддерживает @apply, поэтому все стили — сырые
 * декларации с цветами Tailwind palette (rgb-equivalents).
 * Если когда-нибудь перейдём на PostCSS-build, можно сократить.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;  /* text-sm */
    font-weight: 500;
    line-height: 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;  /* text-xs */
    gap: 0.375rem;
}

/* Primary — основное действие (indigo-600) */
.btn-primary {
    background-color: rgb(79 70 229);
    color: white;
}
.btn-primary:hover:not(:disabled) {
    background-color: rgb(67 56 202);
}

/* Secondary — вторичное (gray border) */
.btn-secondary {
    background-color: white;
    color: rgb(55 65 81);   /* gray-700 */
    border-color: rgb(209 213 219);  /* gray-300 */
}
.btn-secondary:hover:not(:disabled) {
    background-color: rgb(249 250 251);  /* gray-50 */
}

/* Danger — деструктивное действие, primary-CTA */
.btn-danger {
    background-color: rgb(220 38 38);  /* red-600 */
    color: white;
}
.btn-danger:hover:not(:disabled) {
    background-color: rgb(185 28 28);  /* red-700 */
}

/* Danger outline — деструктивное, второстепенное */
.btn-danger-outline {
    background-color: white;
    color: rgb(220 38 38);
    border-color: rgb(252 165 165);  /* red-300 */
}
.btn-danger-outline:hover:not(:disabled) {
    background-color: rgb(254 242 242);  /* red-50 */
}

/* Success — позитивное действие, primary-CTA */
.btn-success {
    background-color: rgb(22 163 74);  /* green-600 */
    color: white;
}
.btn-success:hover:not(:disabled) {
    background-color: rgb(21 128 61);  /* green-700 */
}

/* Success outline — позитивное, второстепенное */
.btn-success-outline {
    background-color: white;
    color: rgb(22 163 74);
    border-color: rgb(134 239 172);  /* green-300 */
}
.btn-success-outline:hover:not(:disabled) {
    background-color: rgb(240 253 244);  /* green-50 */
}

/* Text — текстовая кнопка-ссылка, без border/fill */
.btn-text {
    background: transparent;
    color: rgb(79 70 229);
    border-color: transparent;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.btn-text:hover:not(:disabled) {
    text-decoration: underline;
}


/* ─── Toasts ───────────────────────────────────────────────── */
/* Контейнер ставится в _Layout (id=kk-toasts), toasts добавляются
 * через wwwroot/js/toasts.js (window.kkToast).
 */

#kk-toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;  /* контейнер прозрачный для кликов */
}
#kk-toasts > .kk-toast {
    pointer-events: auto;
    min-width: 260px;
    max-width: 420px;
    border: 1px solid;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    animation: kk-toast-in 0.2s ease-out;
}
@keyframes kk-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.kk-toast-success { background: rgb(240 253 244); border-color: rgb(187 247 208); color: rgb(22 101 52); }
.kk-toast-error   { background: rgb(254 242 242); border-color: rgb(254 202 202); color: rgb(153 27 27); }
.kk-toast-warning { background: rgb(254 252 232); border-color: rgb(254 240 138); color: rgb(133 77 14); }
.kk-toast-info    { background: rgb(239 246 255); border-color: rgb(191 219 254); color: rgb(30 64 175); }
.kk-toast button {
    background: none;
    border: none;
    cursor: pointer;
    color: currentColor;
    opacity: 0.5;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}
.kk-toast button:hover { opacity: 1; }
.kk-toast > span {
    flex: 1;
    white-space: pre-line;  /* многострочные warning'и (homoglyph) сохраняют переносы */
    word-break: break-word;
}
/* Action-кнопка ([Отменить]) внутри toast'а — чуть жирнее обычной ✕,
   чтобы привлекать внимание во время countdown'а. */
.kk-toast button.kk-toast-action {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 1;
    margin-left: 0.5rem;
}
.kk-toast button.kk-toast-action:hover { background: white; }
.kk-toast button.kk-toast-action:disabled { opacity: 0.5; cursor: not-allowed; }


/* ─── Sticky-first-col для таблиц на мобиле ──────────────────── */
/* Применять <table data-sticky-first> на таблицах с >4 колонок.
 * На <md экранах первая колонка липнет к левому краю при скролле,
 * с тенью справа чтобы был визуальный break.
 */

@media (max-width: 767px) {
    table[data-sticky-first] th:first-child,
    table[data-sticky-first] td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
        box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
    }
    table[data-sticky-first] tbody tr:nth-child(even) td:first-child {
        background: rgb(249 250 251);  /* gray-50, чтобы zebra-striping не ломался */
    }
}


/* ─── Required-mark ──────────────────────────────────────────── */
/* <span class="kk-required" aria-hidden="true">*</span> рядом с label */

.kk-required {
    color: rgb(220 38 38);
    margin-left: 0.125rem;
    font-weight: 600;
}


/* ─── Submit-spinner ─────────────────────────────────────────── */
/* Используется form-feedback.js — JS добавляет .kk-spinner внутрь
 * кнопки на submit. Tailwind animate-spin доступен из CDN, но локально
 * описанная анимация не зависит от Tailwind.
 */

.kk-spinner {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: kk-spin 0.7s linear infinite;
}
@keyframes kk-spin {
    to { transform: rotate(360deg); }
}


/* ─── Custom checkboxes ─────────────────────────────────────────
 * Native checkbox в Chrome/Firefox/Edge выглядит инородно (особенно
 * на карточках с indigo-палитрой). Стилизуем все [data-bulk-checkbox]
 * и [data-bulk-select-all] под акцентный indigo-стиль с галочкой-SVG
 * через background-image. Tailwind CDN не имеет forms-плагина — этот CSS
 * заменяет его минимально для bulk-инфры.
 */

input[type="checkbox"][data-bulk-checkbox],
input[type="checkbox"][data-bulk-select-all] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1.5px solid rgb(209 213 219);   /* gray-300 */
    border-radius: 5px;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
    position: relative;
    vertical-align: middle;
}
input[type="checkbox"][data-bulk-checkbox]:hover,
input[type="checkbox"][data-bulk-select-all]:hover {
    border-color: rgb(99 102 241);          /* indigo-500 */
}
input[type="checkbox"][data-bulk-checkbox]:focus-visible,
input[type="checkbox"][data-bulk-select-all]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
    border-color: rgb(99 102 241);
}
input[type="checkbox"][data-bulk-checkbox]:checked,
input[type="checkbox"][data-bulk-select-all]:checked {
    background-color: rgb(79 70 229);       /* indigo-600 */
    border-color: rgb(79 70 229);
    /* Inline SVG-галочка, белая, 12x12, центрирована. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5,8.5 6.5,11.5 12.5,5'/></svg>");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}
input[type="checkbox"][data-bulk-select-all]:indeterminate {
    background-color: rgb(79 70 229);
    border-color: rgb(79 70 229);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'><line x1='4' y1='8' x2='12' y2='8'/></svg>");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}
input[type="checkbox"][data-bulk-checkbox]:disabled,
input[type="checkbox"][data-bulk-select-all]:disabled {
    background-color: rgb(243 244 246);     /* gray-100 */
    border-color: rgb(229 231 235);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────────────
   Sticky table headers (используется на /Compare/Index, потенциально
   и на других страницах с длинными таблицами).

   Контракт:
     <div class="kk-sticky-table-wrap">         ← обёртка (горизонтальный скролл)
         <table>
             <thead class="kk-sticky-thead">    ← thead остаётся вверху страницы
                 <tr>
                     <th class="bg-gray-50">    ← КАЖДАЯ ячейка должна иметь свой
                                                  background, иначе при скролле под
                                                  ней просвечивает контент. (Tailwind
                                                  bg-* на самом thead не помогает —
                                                  thead'ы у некоторых браузеров не
                                                  рендерят background при sticky.)
   Тонкость:
     `overflow-x: auto` на обёртке, по CSS-спеку, делает overflow-y тоже не-visible
     (форсится в auto). Это ломает sticky — он начинает работать относительно
     обёртки, а у неё нет высоты → не залипает. Поэтому НЕ используем overflow-x-auto
     здесь; для горизонтального скролла полагаемся на нативный overflow страницы
     (на узких экранах горизонтальный скролл всей страницы — приемлемо для compare).
   ───────────────────────────────────────────────────────────────────────── */
.kk-sticky-table-wrap {
    /* НЕ ставить overflow:auto — иначе sticky thead перестанет работать. */
    width: 100%;
}

.kk-sticky-thead {
    position: sticky;
    top: 0;
    z-index: 10;
    /* Лёгкая нижняя граница чтобы при залипании визуально отделять от tbody. */
    box-shadow: 0 1px 0 rgb(229 231 235);  /* gray-200 */
}