/*
 * «Аналитика звонков» — компоненты пакета hi-tech/call-analytics внутри панели.
 *
 * Разметка пакета рассчитана на его собственный макет, где стили заданы на
 * body, table, button и т. п. В панели этого макета нет, а Tailwind сбрасывает
 * кнопки, поля и заголовки. Поэтому здесь классы пакета, но только внутри
 * обёртки .ca-embed и в цветах темы Filament — светлой и тёмной.
 *
 * Элементы с wire:loading (оверлей анализа) Livewire прячет правилом со
 * специфичностью двух атрибутов. display для оверлея задан через :where(),
 * чтобы не перебить это правило и не показать оверлей навсегда.
 */

.ca-embed {
    --ca-surface: var(--color-white, #fff);
    --ca-page: var(--gray-50, #fafafa);
    --ca-text: var(--gray-950, #09090b);
    --ca-muted: var(--gray-500, #71717a);
    --ca-ring: color-mix(in oklab, var(--gray-950, #09090b) 10%, transparent);
    --ca-ring-soft: color-mix(in oklab, var(--gray-950, #09090b) 5%, transparent);
    --ca-head: var(--gray-50, #fafafa);
    --ca-hover: color-mix(in oklab, var(--gray-500, #71717a) 6%, transparent);
    --ca-control: var(--color-white, #fff);
    --ca-accent: var(--primary-600, #1c8437);
    --ca-accent-hover: var(--primary-500, #22a044);
    --ca-link: var(--primary-600, #1c8437);
    --ca-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

    color: var(--ca-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

:is(.dark) .ca-embed {
    --ca-surface: var(--gray-900, #18181b);
    --ca-page: var(--gray-950, #09090b);
    --ca-text: var(--color-white, #fff);
    --ca-muted: var(--gray-400, #a1a1aa);
    --ca-ring: color-mix(in oklab, var(--color-white, #fff) 10%, transparent);
    --ca-ring-soft: color-mix(in oklab, var(--color-white, #fff) 10%, transparent);
    --ca-head: color-mix(in oklab, var(--color-white, #fff) 5%, transparent);
    --ca-hover: color-mix(in oklab, var(--color-white, #fff) 5%, transparent);
    --ca-control: color-mix(in oklab, var(--color-white, #fff) 5%, transparent);
    --ca-accent: var(--primary-600, #1c8437);
    --ca-accent-hover: var(--primary-500, #22a044);
    --ca-link: var(--primary-400, #4ade80);

    /* Родные контролы — выпадающие списки, календарь, плеер — тоже тёмные. */
    color-scheme: dark;
}

/* Заголовки пакета дублируют шапку страницы Filament. */
.ca-embed .appbar-title,
.ca-embed > div > h1 {
    display: none;
}

.ca-embed a {
    color: var(--ca-link);
    font-weight: 500;
}

.ca-embed a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ca-embed p {
    margin: 0.5rem 0;
}

.ca-embed .muted {
    color: var(--ca-muted);
    font-size: 0.8125rem;
}

.ca-embed small {
    font-size: 0.8125rem;
    font-weight: 400;
}

.ca-embed pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    line-height: 1.6;
}

/* Красный текст ошибок пакет задаёт в атрибуте style — в тёмной теме он нечитаем. */
:is(.dark) .ca-embed [style*="#991b1b"] {
    color: var(--danger-400, #f87171) !important;
}

/* ---------- Кнопки ---------- */

.ca-embed button,
.ca-embed .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--ca-accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    box-shadow: var(--ca-shadow);
    cursor: pointer;
    transition: background-color 75ms;
}

.ca-embed button:hover:not(:disabled),
.ca-embed .btn:hover:not(:disabled) {
    background: var(--ca-accent-hover);
}

.ca-embed button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ca-embed .btn-secondary,
.ca-embed .btn-icon,
.ca-embed .page-btn {
    background: var(--ca-surface);
    color: var(--ca-text);
    box-shadow: var(--ca-shadow), 0 0 0 1px var(--ca-ring);
}

.ca-embed .btn-secondary:hover:not(:disabled),
.ca-embed .btn-icon:hover:not(:disabled),
.ca-embed .page-btn:hover:not(:disabled) {
    background: var(--ca-hover);
}

.ca-embed .btn-icon {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.25rem;
}

/* ---------- Поля ---------- */

.ca-embed input:not([type="checkbox"]),
.ca-embed select,
.ca-embed textarea {
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--ca-control);
    color: var(--ca-text);
    font-size: 0.875rem;
    line-height: 1.5rem;
    box-shadow: var(--ca-shadow), 0 0 0 1px var(--ca-ring);
}

.ca-embed input:not([type="checkbox"]):focus,
.ca-embed select:focus,
.ca-embed textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ca-accent);
}

.ca-embed textarea {
    display: block;
}

.ca-embed label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ca-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ---------- Верхняя панель и фильтры ---------- */

/* Прилипает под шапкой Filament (высота 4rem), а не под краем окна. */
.ca-embed .sticky-top {
    position: sticky;
    top: calc(var(--spacing, 0.25rem) * 16);
    z-index: 20;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    background: var(--ca-page);
    border-bottom: 1px solid var(--ca-ring-soft);
}

.ca-embed .appbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ca-embed .appbar-company {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
}

.ca-embed .appbar-company select {
    min-width: 12rem;
}

.ca-embed .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.625rem;
    padding-bottom: 0.75rem;
}

.ca-embed .filters > div {
    display: flex;
    flex-direction: column;
}

.ca-embed .filters input,
.ca-embed .filters select {
    max-width: 10rem;
}

/* ---------- Показатели ---------- */

.ca-embed .stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ca-embed .stat {
    min-width: 8rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow), 0 0 0 1px var(--ca-ring-soft);
}

.ca-embed .stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
}

.ca-embed .stat-label {
    display: block;
    margin-top: 0.125rem;
    color: var(--ca-muted);
    font-size: 0.75rem;
}

/* ---------- Таблица ---------- */

.ca-embed table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow), 0 0 0 1px var(--ca-ring-soft);
}

.ca-embed th,
.ca-embed td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--ca-ring-soft);
    text-align: start;
    vertical-align: middle;
}

.ca-embed th {
    background: var(--ca-head);
    color: var(--ca-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.ca-embed tbody tr:last-child td {
    border-bottom: 0;
}

.ca-embed tbody tr:hover td {
    background: var(--ca-hover);
}

.ca-embed audio {
    vertical-align: middle;
}

/* ---------- Статусы ---------- */

.ca-embed .badge {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--gray-50, #fafafa);
    color: var(--gray-600, #52525b);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-600, #52525b) 10%, transparent);
}

.ca-embed .badge.analyzed {
    background: var(--success-50, #f0fdf4);
    color: var(--success-700, #15803d);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success-600, #16a34a) 10%, transparent);
}

.ca-embed .badge.failed {
    background: var(--danger-50, #fef2f2);
    color: var(--danger-700, #b91c1c);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-600, #dc2626) 10%, transparent);
}

.ca-embed .badge.transcribing,
.ca-embed .badge.analyzing {
    background: var(--warning-50, #fffbeb);
    color: var(--warning-700, #b45309);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-600, #d97706) 10%, transparent);
}

:is(.dark) .ca-embed .badge {
    background: color-mix(in oklab, var(--gray-400, #a1a1aa) 10%, transparent);
    color: var(--gray-300, #d4d4d8);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-400, #a1a1aa) 20%, transparent);
}

:is(.dark) .ca-embed .badge.analyzed {
    background: color-mix(in oklab, var(--success-400, #4ade80) 10%, transparent);
    color: var(--success-400, #4ade80);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success-400, #4ade80) 30%, transparent);
}

:is(.dark) .ca-embed .badge.failed {
    background: color-mix(in oklab, var(--danger-400, #f87171) 10%, transparent);
    color: var(--danger-400, #f87171);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-400, #f87171) 30%, transparent);
}

:is(.dark) .ca-embed .badge.transcribing,
:is(.dark) .ca-embed .badge.analyzing {
    background: color-mix(in oklab, var(--warning-400, #fbbf24) 10%, transparent);
    color: var(--warning-400, #fbbf24);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-400, #fbbf24) 30%, transparent);
}

/* ---------- Карточки (страница звонка, итог проверки импорта) ---------- */

.ca-embed .card {
    margin-bottom: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow), 0 0 0 1px var(--ca-ring-soft);
}

.ca-embed .card h1 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    word-break: break-all;
}

.ca-embed .card h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

/* ---------- Постраничный вывод ---------- */

.ca-embed .pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ca-embed .page-info {
    color: var(--ca-muted);
    font-size: 0.8125rem;
}

/* ---------- Окна: настройки компании, импорт, «идёт анализ» ---------- */

.ca-embed .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    background: color-mix(in oklab, var(--gray-950, #09090b) 50%, transparent);
}

:is(.dark) .ca-embed .modal-overlay {
    background: color-mix(in oklab, var(--gray-950, #09090b) 75%, transparent);
}

.ca-embed :where(.modal-overlay) {
    display: flex;
}

.ca-embed .modal {
    width: 100%;
    max-width: 45rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: var(--ca-surface);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1), 0 0 0 1px var(--ca-ring-soft);
}

.ca-embed .modal h2 {
    position: sticky;
    top: -1.5rem;
    z-index: 1;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0;
    background: var(--ca-surface);
    font-size: 1.125rem;
    font-weight: 600;
}

.ca-embed .modal-actions {
    position: sticky;
    bottom: -1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 1rem;
    padding: 0.75rem 0 0.25rem;
    background: var(--ca-surface);
    border-top: 1px solid var(--ca-ring-soft);
}

.ca-embed .op-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 220px;
    overflow-y: auto;
    padding: 1px;
}

.ca-embed .op-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ca-embed .switch-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.ca-embed .switch {
    position: relative;
    display: inline-block;
    flex: none;
    width: 46px;
    height: 26px;
    margin: 0;
}

.ca-embed .switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

.ca-embed .slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--gray-300, #d4d4d8);
    cursor: pointer;
    transition: 0.2s;
}

:is(.dark) .ca-embed .slider {
    background: var(--gray-700, #3f3f46);
}

.ca-embed .slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
    transition: 0.2s;
}

.ca-embed .switch input:checked + .slider {
    background: var(--ca-accent);
}

.ca-embed .switch input:checked + .slider::before {
    transform: translateX(20px);
}

/* ---------- Индикаторы загрузки ---------- */

.ca-embed .loading-box {
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem;
    color: var(--ca-muted);
}

.ca-embed .spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid color-mix(in oklab, currentColor 20%, transparent);
    border-top-color: var(--ca-accent);
    border-radius: 50%;
    vertical-align: -2px;
    animation: ca-spin 0.7s linear infinite;
}

.ca-embed .spinner.on-accent {
    border-color: rgb(255 255 255 / 0.5);
    border-top-color: #fff;
}

.ca-embed .top-loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--ca-accent), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: ca-slide 1s linear infinite;
}

@keyframes ca-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ca-slide {
    0% {
        background-position: -40% 0;
    }

    100% {
        background-position: 140% 0;
    }
}