/* ============================================================================
   №417 (28.09.2026): СЕТКА-КАЛЕНДАРЬ ШИНОМОНТАЖА (как в YCLIENTS)
   Файл: frontend/css/tire_grid.css
   Подключается в index.html после style.css.
   Только сетка /app/tire-grid. Мобильные тач-списки живут в tire.js — не тут.
   ========================================================================== */

.tg-wrap { padding: 0 0 90px; }

/* ── Тулбар: вид, даты, навигация ──────────────────────────────────────── */
.tg-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
    padding: 8px 10px; border-bottom: 1px solid #e5e7eb; background: #fff;
    position: sticky; top: 0; z-index: 30;
}
.tg-bar .tg-title { font-weight: 700; font-size: 15px; margin-right: auto; white-space: nowrap; }
.tg-btn {
    border: 1px solid #e5e7eb; background: #fff; border-radius: 8px;
    padding: 5px 9px; font-size: 14px; cursor: pointer; line-height: 1.3;
}
.tg-btn:active { background: #f3f4f6; }
.tg-btn.on { background: #111827; color: #fff; border-color: #111827; }
.tg-btn.tg-icon { font-size: 16px; padding: 4px 8px; }

/* ── Скролл-область сетки ──────────────────────────────────────────────── */
.tg-scroll {
    overflow: auto; max-height: calc(100vh - 190px);
    background: #f9fafb; position: relative; touch-action: none;
    -webkit-user-select: none; user-select: none;
}
.tg-grid { display: flex; min-width: max-content; position: relative; }

/* колонка часов */
.tg-times { position: sticky; left: 0; z-index: 12; background: #fff;
            border-right: 1px solid #e5e7eb; flex: 0 0 52px; }
.tg-times .tg-hcell { height: 44px; border-bottom: 1px solid #e5e7eb;
                      font-size: 11px; color: #6b7280; padding-top: 16px;
                      text-align: right; padding-right: 6px; box-sizing: border-box; }
.tg-tcell { height: 34px; box-sizing: border-box; border-bottom: 1px dashed #eef0f3;
            font-size: 10px; color: #9ca3af; text-align: right; padding-right: 6px; }

/* колонка дня */
.tg-day { flex: 0 0 170px; border-right: 1px solid #e5e7eb; position: relative; background: #fff; }
.tg-day.tg-today { background: #fffbeb; }
.tg-dhead {
    position: sticky; top: 0; z-index: 14; height: 44px; box-sizing: border-box;
    background: #fff; border-bottom: 1px solid #e5e7eb;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-size: 12px; line-height: 1.15;
}
.tg-day.tg-today .tg-dhead { background: #fff7ed; }
.tg-dhead b { font-size: 13px; }
.tg-dhead span { color: #6b7280; font-size: 10px; }
.tg-body { position: relative; }
.tg-slot { height: 34px; box-sizing: border-box; border-bottom: 1px dashed #eef0f3; }
.tg-slot.tg-half { border-bottom-style: solid; border-bottom-color: #f3f4f6; }
.tg-col.tg-drop { outline: 2px dashed #E3262C; outline-offset: -2px; background: #fff7ed; }
.tg-day.tg-day-drop .tg-dhead { background: #fee2e2; }

/* блок записи */
.tg-rec {
    position: absolute; border-radius: 7px; border-left: 3px solid #9ca3af;
    background: #fef3c7; color: #78350f; font-size: 11px; line-height: 1.2;
    padding: 3px 5px; box-sizing: border-box; overflow: hidden; cursor: grab;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08); user-select: none; touch-action: none;
}
.tg-rec b { display: block; font-size: 11px; }
.tg-rec .tg-rec-sub { display: block; white-space: nowrap; overflow: hidden;
                      text-overflow: ellipsis; opacity: .85; }
.tg-rec.st-in_progress { background: #ffedd5; color: #7c2d12; border-left-color: #f97316; }
.tg-rec.st-done, .tg-rec.st-paid { background: #dcfce7; color: #14532d; border-left-color: #16a34a; }
.tg-rec.st-error, .tg-rec.st-canceled { background: #fee2e2; color: #7f1d1d; border-left-color: #dc2626; }
.tg-rec.tg-drag { opacity: .45; }
.tg-rec .tg-money { font-weight: 700; }

/* линия «сейчас» */
.tg-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #E3262C;
          z-index: 20; pointer-events: none; }
.tg-now::before { content: ''; position: absolute; left: 0; top: -4px; width: 8px; height: 8px;
                  border-radius: 50%; background: #E3262C; }

/* ghost при перетаскивании (№417-fix: полупрозрачный, поверх всего, сквозной) */
.tg-ghost {
    position: fixed; z-index: 9999; pointer-events: none; border-radius: 7px;
    border: 2px dashed #E3262C; background: rgba(227, 38, 44, .12);
    font-size: 11px; padding: 3px 5px; box-sizing: border-box;
    opacity: .7; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* скелетон загрузки */
.tg-skel { padding: 12px; }
.tg-skel i { display: block; height: 34px; margin-bottom: 8px; border-radius: 7px;
             background: linear-gradient(90deg, #f1f3f5 25%, #e9ecef 37%, #f1f3f5 63%);
             background-size: 400% 100%; animation: tgShim 1.2s infinite; }
@keyframes tgShim { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* оффлайн-плашка */
.tg-off { background: #fef3c7; color: #78350f; font-size: 12px; padding: 6px 10px; }

/* мини-календарь (переход по дате) */
.tg-cal {
    position: absolute; z-index: 60; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); padding: 8px;
    width: 252px; display: none;
}
.tg-cal.show { display: block; }
.tg-cal .tg-cal-top { display: flex; align-items: center; justify-content: space-between;
                      margin-bottom: 6px; font-weight: 600; font-size: 13px; }
.tg-cal table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tg-cal th { color: #9ca3af; font-weight: 500; padding: 2px 0; }
.tg-cal td { text-align: center; padding: 3px 0; cursor: pointer; border-radius: 6px; }
.tg-cal td:hover { background: #f3f4f6; }
.tg-cal td.other { color: #d1d5db; }
.tg-cal td.today { color: #E3262C; font-weight: 700; }
.tg-cal td.sel { background: #E3262C; color: #fff; }

/* модалка деталей записи */
.tg-modal { position: fixed; inset: 0; background: rgba(17, 24, 39, .5); z-index: 9500;
            display: flex; align-items: center; justify-content: center; padding: 14px; }
.tg-modal .tg-card { background: #fff; border-radius: 14px; max-width: 380px; width: 100%;
                     max-height: 86vh; overflow: auto; padding: 14px; }
.tg-modal .tg-row { display: flex; justify-content: space-between; gap: 10px;
                    padding: 5px 0; border-bottom: 1px dashed #f1f3f5; font-size: 13px; }
.tg-modal .tg-row span:first-child { color: #6b7280; }
.tg-modal .tg-acts { display: flex; gap: 8px; margin-top: 12px; }

/* планшет/десктоп: колонки шире, появляется кнопка «сетка» в навигации */
@media (min-width: 768px) {
    .tg-day { flex-basis: 190px; }
    .tg-scroll { max-height: calc(100vh - 150px); }
}