/* Lineup Club — точечные стили поверх Tailwind. */

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

html { color-scheme: dark; }

body { padding-bottom: env(safe-area-inset-bottom); }

input, select, textarea, button { font: inherit; }

/* Минимальная высота для всех тач-таргетов = 44px. */
.btn,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="search"],
select,
textarea {
    min-height: 44px;
}

/* !important нужен, чтобы перебить Tailwind preflight (padding:0 на input/select/textarea),
   который cdn.tailwindcss.com инжектит в <style> уже ПОСЛЕ нашего <link rel="stylesheet">. */
input, select, textarea {
    background-color: #1E293B;
    border: 1px solid #334155;
    color: #F8FAFC;
    border-radius: 12px;
    padding: 12px 18px !important;   /* достаточный воздух слева/справа */
    display: block;
    width: 100%;
    min-width: 0;                    /* нужно во flex/grid контейнерах */
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    padding-left: 18px !important;
}
textarea { padding: 14px 18px !important; }
select { padding: 12px 44px 12px 18px !important; }  /* справа — под стрелку */

/* Безопасность от autofill: оставляем темный фон и светлый текст */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #F8FAFC;
    -webkit-box-shadow: 0 0 0 1000px #1E293B inset;
    caret-color: #F8FAFC;
    transition: background-color 100000s ease-in-out 0s;
}

/* Date/time picker: содержимое — поверх всей ширины, индикатор виден на тёмном фоне */
input[type="date"],
input[type="time"] {
    color-scheme: dark;            /* родной picker и стрелки рисуются в тёмной палитре */
    text-align: left;
    font-variant-numeric: tabular-nums;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
    flex: 1;                       /* распирает значение на всю ширину поля */
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(.9);  /* тёмная иконка → светлая */
    opacity: .8;
    cursor: pointer;
    margin-left: 4px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
input:focus, select:focus, textarea:focus {
    border-color: #A855F7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
}
input::placeholder { color: #64748B; }

select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #94A3B8 50%),
        linear-gradient(135deg, #94A3B8 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 13px) calc(50% - 2px);
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 12px;
    font-weight: 600;
    transition: background-color .15s ease, opacity .15s ease, transform .05s ease;
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background-color: #A855F7; color: white; }
.btn-primary:hover { background-color: #9333EA; }

.btn-ok { background-color: #22C55E; color: #052E16; }
.btn-ok:hover { background-color: #16A34A; color: white; }

.btn-ghost { background-color: #1E293B; color: #F1F5F9; border-color: #334155; }
.btn-ghost:hover { background-color: #334155; }

.btn-danger { background-color: transparent; color: #FCA5A5; border-color: #7F1D1D; }
.btn-danger:hover { background-color: #7F1D1D; color: white; }

.card {
    background-color: #1E293B;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 18px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.chip-dj   { background: rgba(168, 85, 247, .18); color: #E9D5FF; }
.chip-show { background: rgba(245, 158, 11, .18); color: #FCD34D; }
.chip-note { background: rgba(34, 197, 94, .14); color: #BBF7D0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip-bell { padding: 2px 6px; background: rgba(34, 197, 94, .14); color: #BBF7D0; }
.chip-bell svg { width: 14px; height: 14px; }
.chip-warn { background: rgba(234, 179, 8, .18); color: #FEF3C7; }

.conflict-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(234, 179, 8, .08);
    border: 1px solid rgba(234, 179, 8, .35);
    color: #FEF3C7;
    font-size: 13px;
}

.btn-sm  { padding: 0 12px; font-size: 13px; min-height: 36px; border-radius: 10px; }
.btn-icon { padding: 0 10px; }

.slot-row {
    display: grid;
    grid-template-columns: 64px 1fr 1fr;
    gap: 8px;
    align-items: stretch;
}
/* Когда фильтр оставляет только DJ или только Show — колонка одна. */
.slot-row.one-col { grid-template-columns: 64px 1fr; }

/* Сама подсвечиваемая ячейка-источник переноса. */
.slot-cell.moving {
    outline: 2px solid #A855F7;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, .35);
}
/* Пустая ячейка-цель в move-режиме. */
.slot-cell.move-target {
    border-style: solid;
    border-color: #A855F7;
    background: rgba(168, 85, 247, .08);
    animation: moveTargetPulse 1.4s ease-in-out infinite;
}
@keyframes moveTargetPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247, .35); }
    50%     { box-shadow: 0 0 0 6px rgba(168,85,247, 0); }
}

/* Баннер режима перемещения. */
.move-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(168, 85, 247, .14);
    border: 1px solid rgba(168, 85, 247, .55);
    color: #F1F5F9;
    font-size: 14px;
}
.move-banner .label { flex: 1; min-width: 0; }
.move-banner .cancel {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(168,85,247,.6);
    color: #E9D5FF;
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Календарь-кнопка справа от даты. */
.date-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.date-row .date-display {
    flex: 1;
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 12px;
    color: #F8FAFC;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    min-height: 44px;
    user-select: none;
}
.date-row .date-display:hover { border-color: #A855F7; }
.date-row .date-btn {
    flex: 0 0 auto;
    width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0F172A;
    border: 1px solid #334155;
    border-radius: 12px;
    color: #F1F5F9;
    cursor: pointer;
}
.date-row .date-btn:hover { border-color: #A855F7; color: #A855F7; }

/* Кастомный date-picker (полная локализация под язык UI; iOS Safari иначе берёт
   локаль из настроек устройства и игнорирует <html lang>). */
.dp-backdrop {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(2, 6, 23, .7);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
}
.dp-panel {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 18px;
    padding: 18px 16px 14px;
    width: 100%;
    max-width: 360px;
    color: #F1F5F9;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.dp-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 14px;
}
.dp-title {
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    flex: 1; text-align: center;
}
.dp-nav {
    background: transparent; border: none; color: #E9D5FF; cursor: pointer;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
}
.dp-nav:hover { background: rgba(168,85,247,.18); }

.dp-weekdays, .dp-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.dp-weekdays {
    margin-bottom: 6px;
}
.dp-wd {
    text-align: center;
    font-size: 11px;
    color: #94A3B8;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 0;
}
.dp-cell {
    appearance: none; background: transparent; border: 1px solid transparent;
    color: #F1F5F9;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.dp-cell.empty { cursor: default; }
.dp-cell:not(.empty):hover { background: rgba(168,85,247,.18); border-color: rgba(168,85,247,.45); }
.dp-cell.today { color: #A855F7; font-weight: 700; }
.dp-cell.selected {
    background: #A855F7; color: white; border-color: #A855F7;
}
.dp-cell.selected.today { color: white; }
.dp-cell.weekend { color: #94A3B8; }
.dp-cell.selected.weekend { color: white; }

.dp-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px; gap: 8px;
}
.dp-foot .btn { padding: 8px 14px; min-height: 36px; }

.slot-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background-color: #0F172A;
    border: 1px dashed #334155;
    min-height: 60px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.slot-cell:hover { border-color: #A855F7; }
.slot-cell.filled-dj   { background: rgba(168, 85, 247, .12); border: 1px solid rgba(168, 85, 247, .55); }
.slot-cell.filled-show { background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .55); }
.slot-cell.empty .placeholder { color: #64748B; font-size: 13px; }
.slot-cell .name { font-weight: 600; }
.slot-cell .meta { font-size: 12px; color: #94A3B8; }

.toast {
    pointer-events: auto;
    padding: 10px 16px;
    border-radius: 999px;
    background: #1E293B;
    border: 1px solid #334155;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    max-width: calc(100vw - 24px);
}
.toast.err { border-color: #7F1D1D; color: #FCA5A5; }
.toast.ok  { border-color: #14532D; color: #BBF7D0; }

.sheet-backdrop {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(2, 6, 23, .75);
    display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
    width: 100%;
    max-width: 560px;
    background: #0F172A;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid #334155;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    max-height: 90dvh;
    overflow-y: auto;
}
@media (min-width: 640px) {
    .sheet-backdrop { align-items: center; }
    .sheet { border-radius: 20px; max-width: 520px; }
}

/* Кастомные кнопки переключения DJ/Show */
.segmented {
    display: inline-flex;
    background: #0F172A;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.segmented button {
    padding: 8px 14px;
    border-radius: 8px;
    color: #94A3B8;
    font-weight: 600;
    background: transparent;
    border: none;
    cursor: pointer;
    min-height: 36px;
}
.segmented button.active      { background: #A855F7; color: white; }
.segmented button.active.dj   { background: #A855F7; color: white; }
.segmented button.active.show { background: #F59E0B; color: #0F172A; }
.segmented-tri { width: 100%; display: flex; }
.segmented-tri button { flex: 1; }

/* Карточки выбора языка */
.lang-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 14px;
    color: #F1F5F9;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .05s ease;
    min-height: 56px;
    text-align: left;
}
.lang-card:hover { border-color: #A855F7; background: #243349; }
.lang-card:active { transform: translateY(1px); }
.lang-flag { font-size: 26px; line-height: 1; }
.lang-name { font-weight: 600; font-size: 15px; }

/* Toggle (галочка с notify) */
.toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    background: #334155;
    border-radius: 999px;
    transition: background-color .2s ease;
    flex-shrink: 0;
    cursor: pointer;
}
.toggle-track.on { background: #A855F7; }
.toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.toggle-track.on .toggle-thumb { transform: translateX(18px); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.artist-search {
    background: #0F172A;
    border: 1px solid #1E293B;
    border-radius: 10px;
}

/* Артист-ряд в составе */
.artist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .5);
    border: 1px solid transparent;
    transition: border-color .15s ease;
}
.artist-row:hover { border-color: #334155; }

/* Ряд в аналитике */
.analytics-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .5);
}

/* Поворачивающийся chevron у collapsible */
.chevron-rot {
    display: inline-flex;
    transition: transform .2s ease;
}

/* Share: список артистов с чекбоксами */
.share-artists {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
    padding-right: 4px;
}
.share-artist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .5);
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color .15s ease;
}
.share-artist-row:hover { border-color: #334155; }
input.share-check {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-height: 20px;
    border-radius: 6px;
    border: 1.5px solid #475569;
    background: #0F172A;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    padding: 0;
}
input.share-check:checked {
    background: #A855F7;
    border-color: #A855F7;
}
input.share-check:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 6px; height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Share: одна созданная ссылка */
.share-link-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .6);
    border: 1px solid #334155;
}
.share-link-actions { flex-shrink: 0; }
.share-link-row a.btn { text-decoration: none; }
.share-qr {
    width: 72px; height: 72px;
    flex-shrink: 0;
    border-radius: 8px;
    background: white;
    padding: 4px;
    cursor: zoom-in;
    transition: transform .15s ease;
}
.share-qr:hover { transform: scale(1.05); }

/* Публичный (read-only) слот */
.public-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .55);
    border: 1px solid #1E293B;
}
.public-slot-time {
    font-weight: 700;
    font-size: 14px;
    color: #E2E8F0;
    min-width: 52px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}