/**
 * MOBILE SCHEDULE - Расписание для мобильных
 * Удобный просмотр по дням
 */

@media (max-width: 767px) {
  /* ============================================
     PAGE LAYOUT
     ============================================ */
  
  .schedule-page {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .schedule-page .container {
    padding: 0 !important;
  }
  
  /* ============================================
     HEADER
     ============================================ */
  
  .schedule-header {
    padding: 16px;
    text-align: center;
  }
  
  .schedule-header h1 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  
  .schedule-header p {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
  }
  
  /* ============================================
     DAY TABS - Дни недели
     ============================================ */
  
  .schedule-days {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 0 16px 16px;
    scrollbar-width: none;
    position: sticky;
    top: calc(var(--mobile-header-height, 56px) + env(safe-area-inset-top, 0px));
    background: var(--bg-primary, #0c0c0e);
    z-index: 100;
  }
  
  .schedule-days::-webkit-scrollbar {
    display: none;
  }
  
  .schedule-day-tab {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-main, #fff);
    transition: all 0.2s ease;
  }
  
  .schedule-day-tab.active {
    background: var(--color-primary, #00d4ff);
    border-color: var(--color-primary, #00d4ff);
    color: #000;
  }
  
  .schedule-day-tab.today {
    border-color: var(--color-primary, #00d4ff);
  }
  
  .schedule-day-tab.today::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-primary, #00d4ff);
    border-radius: 50%;
  }
  
  .schedule-day-name {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
  }
  
  .schedule-day-date {
    font-size: 16px;
    font-weight: 700;
  }
  
  /* ============================================
     RELEASE LIST
     ============================================ */
  
  .schedule-content {
    padding: 0 16px;
  }
  
  .schedule-section {
    margin-bottom: 24px;
  }
  
  .schedule-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, #00d4ff);
    margin-bottom: 12px;
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .schedule-section-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--color-primary, #00d4ff);
    border-radius: 2px;
  }
  
  /* Release Card */
  .schedule-release-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    margin-bottom: 10px;
    text-decoration: none;
    color: var(--text-main, #fff);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
  }
  
  .schedule-release-card:active {
    background: rgba(255,255,255,0.08);
    transform: scale(0.99);
  }
  
  /* Time indicator */
  .schedule-release-time {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.6);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  
  .schedule-release-poster {
    flex: 0 0 60px;
    width: 60px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  
  .schedule-release-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .schedule-release-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .schedule-release-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .schedule-release-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
  }
  
  .schedule-release-type,
  .schedule-release-voice {
    font-size: 10px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
  }
  
  .schedule-release-episode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--color-primary, #00d4ff);
    color: #000;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    align-self: flex-start;
  }
  
  .schedule-release-episode i {
    font-size: 10px;
  }
  
  /* Empty state */
  .schedule-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
  }
  
  .schedule-empty-icon {
    font-size: 48px;
    color: rgba(255,255,255,0.2);
    margin-bottom: 16px;
  }
  
  .schedule-empty-text {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
  }
  
  /* ============================================
     CALENDAR VIEW (compact)
     ============================================ */
  
  .schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 16px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    margin: 0 16px 20px;
  }
  
  .schedule-calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    position: relative;
  }
  
  .schedule-calendar-day.has-releases {
    color: var(--text-main, #fff);
  }
  
  .schedule-calendar-day.has-releases::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--color-primary, #00d4ff);
    border-radius: 50%;
  }
  
  .schedule-calendar-day.today {
    background: var(--color-primary, #00d4ff);
    color: #000;
  }
  
  .schedule-calendar-day.today::after {
    background: #000;
  }
  
  .schedule-calendar-day.selected {
    border: 2px solid var(--color-primary, #00d4ff);
  }
  
  /* ============================================
     WEEK NAVIGATION
     ============================================ */
  
  .schedule-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 16px;
  }
  
  .schedule-week-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 10px;
    color: var(--text-main, #fff);
    font-size: 16px;
    cursor: pointer;
  }
  
  .schedule-week-btn:active {
    background: rgba(255,255,255,0.15);
  }
  
  .schedule-week-label {
    font-size: 15px;
    font-weight: 600;
  }
  
  /* ============================================
     PUBLIC SCHEDULE PAGE
     ============================================ */
  
  .public-schedule {
    padding-top: 16px;
  }
  
  .public-schedule .schedule-box {
    padding: 0;
  }
  
  .public-schedule .card {
    background: transparent;
    border: none;
    border-radius: 0;
  }
  
  .public-schedule .card-header {
    padding: 0;
    background: transparent;
    border: none;
  }
  
  .public-schedule .date-slider {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    padding: 0 16px 16px;
    scrollbar-width: none;
    list-style: none;
    margin: 0;
  }
  
  .public-schedule .date-slider::-webkit-scrollbar {
    display: none;
  }
  
  .public-schedule .date-slider .nav-item {
    flex: 0 0 auto;
  }
  
  .public-schedule .date-slider .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
  }
  
  .public-schedule .date-slider .nav-link.active {
    background: var(--color-primary, #00d4ff);
    border-color: var(--color-primary, #00d4ff);
    color: #000;
  }
  
  .public-schedule .schedule-day-date {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 2px;
  }
  
  .public-schedule .schedule-day-label {
    font-size: 12px;
    font-weight: 700;
  }
  
  .public-schedule .card-body {
    padding: 16px;
  }
  
  .public-schedule .schedule-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .public-schedule .schedule-item:active {
    transform: scale(0.99);
    background: rgba(255,255,255,0.08);
  }
  
  .public-schedule .schedule-item__poster {
    width: 60px;
    height: 90px;
    border-radius: 6px;
    object-fit: cover;
  }
  
  .public-schedule .schedule-item__info {
    flex: 1;
    min-width: 0;
  }
  
  .public-schedule .schedule-item__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  
  .public-schedule .schedule-item__episode {
    display: inline-flex;
    padding: 4px 8px;
    background: var(--color-primary, #00d4ff);
    color: #000;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
  }
  
  .public-schedule .no-releases {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,0.5);
  }
  
  /* ============================================
     SCHEDULE-PUBLIC MOBILE - Компактные карточки
     ============================================ */
  
  /* Переключатели вида СПИСКОМ/КАЛЕНДАРЬ */
  .schedule-public__view-toggle {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
  }
  
  .schedule-public__view-btn {
    padding: 8px 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
  }
  
  /* Карточка дня */
  .schedule-public__card {
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.04) !important;
  }
  
  .schedule-public__card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
  }
  
  .schedule-public__card-title i {
    margin-right: 6px !important;
    font-size: 12px !important;
  }
  
  /* КАРТОЧКА РЕЛИЗА - КОМПАКТНАЯ ГОРИЗОНТАЛЬНАЯ */
  .schedule-public__item,
  .schedule-item.schedule-public__item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    background: rgba(255,255,255,0.03) !important;
    border-radius: 10px !important;
    position: relative !important;
    overflow: hidden !important; /* не даём карточке “уезжать вбок” */
    max-width: 100% !important;
  }
  
  /* Bootstrap grid внутри карточки:
     делаем безопасно — оставляем структуру, но убираем отрицательные margin/padding,
     и НЕ запрещаем flex-shrink у контента (раньше это ломало перенос и давало overflow). */
  .schedule-public__item > .row.align-items-center {
    width: 100% !important;
    margin: 0 !important;
  }
  .schedule-public__item > .row.align-items-center > [class*="col-"] {
    padding: 0 !important;
  }
  /* Вторая колонка (эпизод) — абсолют справа сверху */
  .schedule-public__item > .row.align-items-center > [class*="col-xl-3"][class*="col-lg-3"],
  .schedule-public__item > .row.align-items-center > .col-0 {
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
    width: auto !important;
    padding: 0 !important;
  }
  /* Основная колонка контента занимает всю ширину */
  .schedule-public__item > .row.align-items-center > [class*="col-xl-9"][class*="col-lg-9"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Внутренний row: постер + текст */
  .schedule-public__item > .row.align-items-center > [class*="col-xl-9"][class*="col-lg-9"] > .row.align-items-center {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  /* Колонка с постером */
  .schedule-public__item > .row.align-items-center > [class*="col-xl-9"][class*="col-lg-9"] > .row.align-items-center > .col-4,
  .schedule-public__item > .row.align-items-center > [class*="col-xl-9"][class*="col-lg-9"] > .row.align-items-center > .col-sm-3 {
    flex: 0 0 65px !important;
    width: 65px !important;
    padding: 0 !important;
  }
  /* Колонка с текстом должна сжиматься, иначе будет горизонтальный overflow */
  .schedule-public__item > .row.align-items-center > [class*="col-xl-9"][class*="col-lg-9"] > .row.align-items-center > .col-8,
  .schedule-public__item > .row.align-items-center > [class*="col-xl-9"][class*="col-lg-9"] > .row.align-items-center > .col-sm-9 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  
  /* ПОСТЕР - СЛЕВА, красивый */
  .schedule-public__poster {
    width: 65px !important;
    min-width: 65px !important;
    height: 95px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
    flex-shrink: 0 !important;
    display: block !important;
  }
  
  /* КОНТЕНТ - справа от постера */
  .schedule-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding-right: 60px !important;
  }
  
  /* НАЗВАНИЕ - БОЛЬШОЙ */
  .schedule-public__item-title,
  .small-title.schedule-public__item-title,
  .schedule-page-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 0 4px 0 !important;
    color: var(--text-main, #fff) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  
  /* КНОПКИ (ОНГОИНГ, озвучки) - МАЛЕНЬКИЕ - ДЛЯ ВСЕХ ТЕМ */
  .schedule-public__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Чипы: не должны растягивать строку и уводить контент вбок */
  .schedule-public__chips a {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 0 1 auto !important;
  }
  /* Озвучки: максимум ~2 в строку (остальные перенесутся) */
  .schedule-public__chips a.btn-tag--voice,
  .schedule-public__chips a.voiceover-button {
    max-width: 48% !important;
  }
  
  /* Высокоспецифичные селекторы с тегом a */
  .schedule-public a.btn-toggle,
  .schedule-public a.btn-tag,
  .schedule-public a.status-button,
  .schedule-public a.voiceover-button,
  .schedule-public a.schedule-page-button,
  .schedule-public__chips a.btn-toggle,
  .schedule-public__chips a.btn-tag,
  .schedule-public__chips a.status-button,
  .schedule-public__chips a.voiceover-button,
  .schedule-public__item a.btn-toggle,
  .schedule-public__item a.btn-tag,
  .schedule-public__item a.status-button,
  .schedule-public__item a.voiceover-button,
  .schedule-public .btn-toggle,
  .schedule-public .btn-tag,
  .schedule-public .status-button,
  .schedule-public .voiceover-button {
    font-size: 9px !important;
    font-weight: 600 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    color: var(--text-main, rgba(255,255,255,0.8)) !important;
    min-height: auto !important;
    height: auto !important;
    gap: 2px !important;
  }
  
  .schedule-public a.btn-toggle--status,
  .schedule-public a.status-button,
  .schedule-public__chips a.status-button,
  .schedule-public__item a.status-button,
  .schedule-public .btn-toggle--status,
  .schedule-public .status-button {
    background: rgba(76, 175, 80, 0.2) !important;
    color: #4CAF50 !important;
  }
  
  .schedule-public a.btn-tag--voice,
  .schedule-public a.voiceover-button,
  .schedule-public__chips a.voiceover-button,
  .schedule-public__item a.voiceover-button,
  .schedule-public .btn-tag--voice,
  .schedule-public .voiceover-button {
    background: rgba(0, 212, 255, 0.15) !important;
    color: var(--color-primary, #00d4ff) !important;
  }
  
  /* ДАТА */
  .schedule-public__date,
  .schedule-release-date {
    font-size: 11px !important;
    color: rgba(255,255,255,0.5) !important;
    margin: 2px 0 0 0 !important;
  }
  
  /* НОМЕР СЕРИИ - справа вверху */
  .schedule-public__episode,
  .schedule-page-episode {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--color-primary, #00d4ff) !important;
    background: rgba(0, 212, 255, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    text-align: center !important;
    margin: 0 !important;
    display: inline-block !important;
  }
  
  /* Разделитель */
  .schedule-public__divider {
    margin: 4px 0 !important;
    opacity: 0.1 !important;
  }
  
  /* Пустое сообщение */
  .schedule-public__empty {
    font-size: 13px !important;
    color: rgba(255,255,255,0.4) !important;
    text-align: center !important;
    padding: 20px !important;
  }
  
  /* ===== СВЕТЛАЯ ТЕМА ===== */
  html[data-theme="light_japan"] .schedule-public__item-title,
  html[data-theme="light_japan"] .schedule-page-title {
    color: var(--text-main, #1a1a1a) !important;
  }
  
  html[data-theme="light_japan"] .schedule-public__chips .btn-toggle,
  html[data-theme="light_japan"] .schedule-public__chips .btn-tag,
  html[data-theme="light_japan"] .schedule-public__chips .status-button,
  html[data-theme="light_japan"] .schedule-public__chips .voiceover-button,
  html[data-theme="light_japan"] .schedule-public__chips .schedule-page-button {
    background: rgba(0,0,0,0.06) !important;
    color: rgba(0,0,0,0.7) !important;
  }
  
  html[data-theme="light_japan"] .schedule-public__chips .btn-toggle--status,
  html[data-theme="light_japan"] .schedule-public__chips .status-button {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #2e7d32 !important;
  }
  
  html[data-theme="light_japan"] .schedule-public__chips .btn-tag--voice,
  html[data-theme="light_japan"] .schedule-public__chips .voiceover-button {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #4f46e5 !important;
  }
  
  html[data-theme="light_japan"] .schedule-public__date,
  html[data-theme="light_japan"] .schedule-release-date {
    color: rgba(0,0,0,0.5) !important;
  }
  
  html[data-theme="light_japan"] .schedule-public__episode,
  html[data-theme="light_japan"] .schedule-page-episode {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #4f46e5 !important;
  }
  
  html[data-theme="light_japan"] .schedule-public__card {
    background: rgba(0,0,0,0.03) !important;
  }
  
  html[data-theme="light_japan"] .schedule-public__item {
    background: rgba(0,0,0,0.02) !important;
  }
}