/**
 * Страница «Подписка на устройстве» раздела «Календарь»: пояснение над
 * таблицей, окно создания подписки и окно инструкции по подключению.
 *
 * Отдельный файл, а не утилиты Tailwind: панель отдаёт собственную сборку
 * Filament, и классов вроде grid-cols-2 в ней нет. Цвета берём переменными
 * темы Filament 4 — там --gray-200 и подобные уже готовые цвета (oklch), а не
 * RGB-тройки, поэтому прозрачность делаем через color-mix(). У каждой
 * переменной есть запасное значение: переименуют тему — страница останется
 * читаемой, а не превратится в белые пятна.
 */

.calendar-feed {
    --cf-border: var(--gray-200, #e5e7eb);
    --cf-surface: var(--gray-50, #f9fafb);
    --cf-text: var(--gray-900, #111827);
    --cf-text-muted: var(--gray-500, #6b7280);
    --cf-accent: var(--primary-600, #1c8437);
    --cf-warning: var(--warning-600, #d97706);
    --cf-danger: var(--danger-600, #dc2626);

    color: var(--cf-text);
}

:is(.dark) .calendar-feed {
    --cf-border: var(--gray-700, #374151);
    --cf-surface: var(--gray-800, #1f2937);
    --cf-text: var(--gray-100, #f3f4f6);
    --cf-text-muted: var(--gray-400, #9ca3af);
    --cf-accent: var(--primary-500, #22a34a);
    --cf-warning: var(--warning-500, #f59e0b);
    --cf-danger: var(--danger-500, #ef4444);
}

/* ── Пояснение над таблицей ──────────────────────────────────────────────── */

/* Три мысли, ради которых блок и написан: подписка живая, обновляется не
   мгновенно, ссылка равносильна паролю. Сплошным текстом их читают по
   диагонали и упускают третью — поэтому карточки, а не абзацы. */
.calendar-feed__intro {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .calendar-feed__intro {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.calendar-feed__card {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--cf-border);
    border-radius: 0.75rem;
    background: var(--cf-surface);
}

.calendar-feed__card-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: color-mix(in oklab, var(--cf-accent) 12%, transparent);
    color: var(--cf-accent);
}

/* Иконки Filament приезжают со своими .fi-icon.fi-size-md (0,2,0) — размер и
   цвет там заданы на самом svg, наследование от родителя не сработает.
   Поэтому у своих правил специфичность поднята классом блока. */
.calendar-feed .calendar-feed__card-icon svg {
    width: 1.125rem;
    height: 1.125rem;
    color: inherit;
}

.calendar-feed__card--warning .calendar-feed__card-icon {
    background: color-mix(in oklab, var(--cf-warning) 14%, transparent);
    color: var(--cf-warning);
}

.calendar-feed__card--danger {
    border-color: color-mix(in oklab, var(--cf-danger) 35%, var(--cf-border));
}

.calendar-feed__card--danger .calendar-feed__card-icon {
    background: color-mix(in oklab, var(--cf-danger) 12%, transparent);
    color: var(--cf-danger);
}

.calendar-feed__card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.25rem;
    color: var(--cf-text);
}

.calendar-feed__card-text {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--cf-text-muted);
}

.calendar-feed__card-text strong {
    font-weight: 600;
    color: var(--cf-text);
}

.calendar-feed__card-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    padding: 0.0625rem 0.25rem;
    border-radius: 0.25rem;
    background: color-mix(in oklab, var(--cf-text) 8%, transparent);
}

/* ── Окно инструкции ─────────────────────────────────────────────────────── */

/* Окно Filament выносится в конец body, поэтому вложенным селектором со
   страницы его не достать — окно помечено своим классом через
   extraModalWindowAttributes (id вида fi-{id компонента}-action-0 непригоден). */
.calendar-feed-help {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Ссылка — первое, что ищут в этом окне: она наверху и копируется одной
   кнопкой, а не выделением мышью посреди инструкции. */
.calendar-feed-help__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1px solid var(--cf-border);
    border-radius: 0.625rem;
    background: var(--cf-surface);
}

.calendar-feed-help__link-url {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    word-break: break-all;
    color: var(--cf-text);
}

.calendar-feed-help__copy {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--cf-border);
    border-radius: 0.5rem;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cf-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.calendar-feed-help__copy:hover {
    color: var(--cf-accent);
    border-color: color-mix(in oklab, var(--cf-accent) 45%, var(--cf-border));
}

.calendar-feed .calendar-feed-help__copy svg {
    width: 0.875rem;
    height: 0.875rem;
    color: inherit;
}

.calendar-feed-help__copy[data-copied='1'] {
    color: var(--cf-accent);
    border-color: color-mix(in oklab, var(--cf-accent) 45%, var(--cf-border));
}

/* Галочка вместо скрепки после копирования. Через x-show нельзя: до подъёма
   Alpine обе иконки успевают показаться разом. */
.calendar-feed-help__copy-idle,
.calendar-feed-help__copy-done {
    display: inline-flex;
    align-items: center;
}

.calendar-feed-help__copy-done,
.calendar-feed-help__copy[data-copied='1'] .calendar-feed-help__copy-idle {
    display: none;
}

.calendar-feed-help__copy[data-copied='1'] .calendar-feed-help__copy-done {
    display: inline-flex;
}

/* Устройства идут карточками: человек ищет глазами своё, а не читает всё
   подряд. Заголовок с иконкой — точка входа, дальше нумерованные шаги. */
.calendar-feed-help__platforms {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .calendar-feed-help__platforms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.calendar-feed-help__platform {
    padding: 0.875rem 1rem;
    border: 1px solid var(--cf-border);
    border-radius: 0.75rem;
}

.calendar-feed-help__platform-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cf-text);
}

.calendar-feed .calendar-feed-help__platform-head svg {
    width: 1rem;
    height: 1rem;
    color: var(--cf-text-muted);
}

.calendar-feed-help__steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cf-step;
}

.calendar-feed-help__steps li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--cf-text-muted);
}

/* Маркеров у списков в сборке Filament нет — рисуем номера сами. */
.calendar-feed-help__steps li::before {
    counter-increment: cf-step;
    content: counter(cf-step);
    position: absolute;
    left: 0;
    top: 0.0625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--cf-text) 8%, transparent);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cf-text);
}

.calendar-feed-help__steps em {
    font-style: normal;
    font-weight: 500;
    color: var(--cf-text);
}

/* Без break-all: длинных адресов в шагах больше нет, а на обычном тексте
   правило рвало слова посреди («подписаться ч / ерез webcal»). */
.calendar-feed-help__steps a {
    color: var(--cf-accent);
    text-decoration: underline;
}

.calendar-feed-help__note {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--cf-border);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--cf-text-muted);
}

/* Подпись сразу под кнопкой подписки: отбивать её линией не за что, она
   поясняет саму кнопку, а не завершает карточку. */
.calendar-feed-help__note--tight {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: 0;
}

/* Кнопка webcal:// — единственное действие карточки про iPhone. Ссылкой в
   тексте её пролистывали и открывали обычный https-адрес, а Safari по нему
   скачивает разовый файл вместо подписки. */
.calendar-feed-help__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--cf-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.calendar-feed-help__cta:hover {
    background: color-mix(in oklab, var(--cf-accent) 85%, #000);
}

.calendar-feed .calendar-feed-help__cta svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: currentColor;
}

/* Предупреждение внутри карточки: тише общего красного блока внизу окна —
   это не запрет, а объяснение частой осечки. */
.calendar-feed-help__caution {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid color-mix(in oklab, var(--cf-warning) 35%, var(--cf-border));
    border-radius: 0.5rem;
    background: color-mix(in oklab, var(--cf-warning) 8%, transparent);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--cf-text-muted);
}

.calendar-feed .calendar-feed-help__caution svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--cf-warning);
}

.calendar-feed-help__caution strong {
    font-weight: 600;
    color: var(--cf-text);
}

.calendar-feed-help__caution code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    padding: 0.0625rem 0.1875rem;
    border-radius: 0.25rem;
    background: color-mix(in oklab, var(--cf-text) 8%, transparent);
}

.calendar-feed-help__subhead {
    margin: 0.75rem 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cf-text-muted);
}

.calendar-feed-help__warning {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid color-mix(in oklab, var(--cf-danger) 35%, var(--cf-border));
    border-radius: 0.625rem;
    background: color-mix(in oklab, var(--cf-danger) 7%, transparent);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--cf-text-muted);
}

.calendar-feed .calendar-feed-help__warning svg {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--cf-danger);
}

.calendar-feed-help__warning strong {
    font-weight: 600;
    color: var(--cf-text);
}

/* ── Окно создания подписки ──────────────────────────────────────────────── */

/* Кнопка здесь единственная — отмена убрана, крестик в углу остаётся.
   Растянутая на всю ширину, она однозначно показывает, чем заканчивается
   заполнение формы (тот же приём, что у окна создания события). */
.calendar-feed-modal .fi-modal-footer,
.calendar-feed-modal .fi-modal-footer-actions {
    display: block;
    width: 100%;
}

.calendar-feed-modal .fi-modal-footer-actions .fi-btn,
.calendar-feed-modal .fi-modal-footer-actions .fi-ac-btn-action {
    width: 100%;
    justify-content: center;
}