/**
 * Work Card Mobile Enhancements - ТОЛЬКО ДЛЯ МОБИЛЬНЫХ
 * Карточки СТРОГО на половину экрана БЕЗ СКРОЛЛА
 */

/* ============================================
   ШРИФТ INTER ДЛЯ ВСЕЙ КАРТОЧКИ
   ============================================ */

body.layout-phone .work-card {
    /* zoom removed */
    font-family: 'Inter', sans-serif !important;
    --media-size: clamp(120px, 19vw, 144px) !important;
    --chip-h: clamp(32px, 4vw, 38px) !important;
    --stat-value-size: clamp(13px, 1.9vw, 16px) !important;
    --stat-label-size: clamp(7.5px, 1vw, 9px) !important;
    --card-pad: 8px !important;
    --card-gap: 6px !important;
    font-weight: 400 !important;
}

/* ============================================
   УБИРАЕМ СКРОЛЛ - КАРТОЧКИ НА ПОЛ ЭКРАНА
   ============================================ */

body.layout-phone #taskFeed {
    overflow: hidden !important;
    gap: 6px !important;
    padding: 0 6px 6px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

body.layout-phone .work-slot {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 45% !important;
    /* Decreased by 2% (to 45%) */
    /* Reduced from 50% by ~5% relative */
    overflow: hidden !important;
    margin-bottom: 4px;
    /* Slight gap */
}

/* Compensate bottom bar space */
body.layout-phone {
    --pwa-space-1: 4px;
    --pwa-space-2: 8px;
    --pwa-space-3: 12px;
    --pwa-space-4: 16px;
    --pwa-radius-md: 12px;
    --pwa-radius-lg: 16px;
    --pwa-border: rgba(148, 163, 184, 0.26);
    --pwa-soft-bg: rgba(255, 255, 255, 0.9);
    padding-bottom: 60px !important;
}

body.layout-phone .work-slot .task-card {
    height: 100% !important;
    overflow: hidden !important;
}

/* Work popups (long-press + similar sizes) must stay centered in PWA mobile/tablet */
body.layout-phone #screenWork .work-popup-sheet,
body.layout-tablet #screenWork .work-popup-sheet {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(560px, calc(100vw - 24px)) !important;
    max-height: min(78vh, 620px) !important;
    overflow: auto !important;
    border-radius: 16px !important;
    opacity: 0 !important;
    transform: translate(-50%, calc(-50% + 16px)) scale(0.96) !important;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    z-index: 2201 !important;
}

body.layout-phone #screenWork .lp-sheet.work-popup-sheet,
body.layout-tablet #screenWork .lp-sheet.work-popup-sheet {
    width: min(420px, calc(100vw - 24px)) !important;
}

body.layout-phone #screenWork .work-popup-sheet.open,
body.layout-tablet #screenWork .work-popup-sheet.open {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

body.layout-phone .work-card .card-swipe-layer {
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    /* Добавил Flex */
    flex-direction: column !important;
    /* Вертикально */
}


body.layout-phone .task-card.work-card .card-body {
    flex: 1 !important;
    overflow: hidden !important;
    padding: var(--card-pad) var(--card-pad) 0 !important;
    gap: 0 !important;
    /* GRID LAYOUT ДЛЯ ЦЕНТРИРОВАНИЯ СТАТОВ */
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    /* 1. Header */
    /* 2. Places */
    /* 3. Stats (1fr - занимает все доступное место) */
    /* 4. BottomBar */
}

/* ВОЗВРАЩАЕМ ОРИГИНАЛЬНЫЕ СТИЛИ (из base.css), НО ЗАЩИЩАЕМ ОТ СПЛЮЩИВАНИЯ */
body.layout-phone .work-card .bottom-bar {
    flex-shrink: 0 !important;
    margin: 0 var(--pwa-space-2) var(--pwa-space-3) !important;
    gap: var(--pwa-space-2) !important;
}

/* Удаляем переопределения qty-control и action-ok, чтобы вернулись оригиналы */
/* body.layout-phone .work-card .qty-control - удалено */
/* body.layout-phone .work-card .action-ok - удалено */

/* ============================================
   ОПИСАНИЕ - МАКСИМУМ 2 СТРОКИ
   ============================================ */

body.layout-phone .work-card .card-name {
    font-size: clamp(12px, 3.25vw, 14px) !important;
    line-height: 1.28 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 4px !important;
    font-weight: 400 !important;
    color: #374151 !important;
}

/* ============================================
   СТРУКТУРА ИНФО - ПРИЖИМАЕМ ИКОНКИ К НИЗУ
   ============================================ */

body.layout-phone .work-card .card-info {
    min-height: var(--media-size) !important;
    gap: var(--pwa-space-1) !important;
    height: 100% !important;
}

body.layout-phone .work-card .card-info-main {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-start !important;
}

body.layout-phone #screenWork .work-card .card-quick-actions,
body.layout-tablet #screenWork .work-card .card-quick-actions {
    display: flex;
    gap: 8px;
    margin-top: auto !important;
    flex-shrink: 0;
    padding-top: 4px !important;
    width: 100% !important;
}

body.layout-phone #screenWork .work-card .quick-action-btn,
body.layout-tablet #screenWork .work-card .quick-action-btn {
    flex: 1 !important;
    height: 30px;
    min-height: 30px;
    border: none !important;
    background: #f9fafb !important;
    border-radius: 8px;
    font-size: 16px;
    color: #4b5563;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.1s ease !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
}

body.layout-phone #screenWork .work-card .quick-action-btn:active,
body.layout-tablet #screenWork .work-card .quick-action-btn:active {
    background: #f3f4f6 !important;
    transform: scale(0.98) !important;
}

body.layout-phone #screenWork .work-card .quick-action-btn svg,
body.layout-tablet #screenWork .work-card .quick-action-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
}

/* ============================================
   СУММА - ВНИЗУ ФОТО
   ============================================ */

body.layout-phone .work-card .photo-sum-chip {
    top: auto !important;
    bottom: 6px !important;
    left: 6px !important;
    /* Frosted Glass Effect */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body.layout-phone .work-card .photo-sales-chip {
    top: auto !important;
    bottom: 6px !important;
    right: 6px !important;
}

/* ============================================
   ФОТО
   ============================================ */

body.layout-phone .work-card .card-photo-box {
    width: var(--media-size) !important;
    min-width: var(--media-size) !important;
    height: var(--media-size) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.layout-phone .work-card .card-media-col {
    width: var(--media-size) !important;
    flex: 0 0 var(--media-size) !important;
}

/* ============================================
   СТАТИСТИКА
   ============================================ */

/* ============================================
   СТАТИСТИКА (Clean Stats)
   ============================================ */

body.layout-phone .work-card .card-stats {
    padding: 6px 0 8px 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;

    /* УБИРАЕМ ВСЕ БОРДЕРЫ (как просили) */
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;

    /* ЦЕНТРИРОВАНИЕ ВНУТРИ GRID 1fr */
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    width: 100% !important;
}

body.layout-phone .work-card .stat-group {
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid rgba(203, 213, 225, 0.55) !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.55) !important;
    padding: 6px 0 !important;
}

body.layout-phone .work-card .stat-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 4px !important;
    gap: 0 !important;
    border: none !important;
    position: relative !important;
}

/* Возвращаем центрирование (как просили "верни когда работало") */
body.layout-phone .work-card .stat-item:first-child {
    padding-left: 0 !important;
    align-items: center !important;
}

body.layout-phone .work-card .stat-item:last-child {
    padding-right: 0 !important;
    align-items: center !important;
}

/* Вертикальные разделители */
body.layout-phone .work-card .stat-item::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 15% !important;
    height: 70% !important;
    width: 1px !important;
    background: rgba(209, 213, 219, 0.4) !important;
    /* Тонкий серый разделитель */
}

body.layout-phone .work-card .stat-item:last-child::after {
    display: none !important;
}

body.layout-phone .work-card .stat-item+.stat-item {
    border-left: none !important;
    /* Убираем старый бордер */
}

body.layout-phone .work-card .stat-value {
    font-weight: 400 !important;
    /* Не жирный, как просили */
    font-size: clamp(27px, 4vw, 33px) !important;
    /* Увеличил в ~1.5 раза (было 18-22) */
    color: #111827 !important;
    line-height: 1 !important;
    /* Плотнее интерлиньяж */
    margin-bottom: -3px !important;
    /* Вернул отступ для Inter */
    letter-spacing: -0.5px !important;
    /* Чуть плотнее для Inter */
}

body.layout-phone .work-card .stat-label {
    color: #9ca3af !important;
    font-weight: 500 !important;
    font-size: 7.5px !important;
    /* Еще меньше (было 9px) */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
    /* Чуть уменьшил отступ */
}

/* Цвета отклонения (Pastel Tone Text) */
/* Green: #10b981 (Emerald-500) - modern clean green */
body.layout-phone .work-card .stat-value.green {
    color: #10b981 !important;
}

/* Red: #ef4444 (Red-500) - modern clean red */
body.layout-phone .work-card .stat-value.red {
    color: #ef4444 !important;
}

/* ============================================
   БЛОК МЕСТ - СМАРТ-ТЕГ (Horizontal Scroll)
   ============================================ */

body.layout-phone .work-card .card-places {
    padding: 4px 0 !important;
    flex-shrink: 0 !important;
    min-height: 36px !important;
    /* Увеличил высоту контейнера */
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    align-items: center !important;
    /* Скрываем скроллбар */
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    margin-top: var(--pwa-space-2) !important;
    margin-bottom: var(--pwa-space-2) !important;
    row-gap: 6px !important;
}

/* Chrome/Safari/Webkit scrollbar hide */
body.layout-phone .work-card .card-places::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.layout-phone .mobile-place-pill {
    display: inline-flex !important;
    align-items: center !important;
    /* Более плотный и современный фон (Gray-100) */
    background: #f3f4f6 !important;
    padding: 0 12px !important;
    /* Убираем вертикальный паддинг, используем height + flex align */
    height: 28px !important;
    /* Фиксированная высота */
    border-radius: 99px !important;
    color: #374151 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    flex-shrink: 0 !important;
    /* Не сжиматься */
    white-space: nowrap !important;
}

body.layout-phone .mobile-place-pill.no-scan {
    background: transparent !important;
    color: #9ca3af !important;
    padding: 0 !important;
    height: 28px !important;
}


body.layout-phone .mobile-place-name {
    font-weight: 700 !important;
    /* Жирный шрифт, как просили */
    font-size: clamp(14px, 2vw, 16px) !important;
    /* Чуть крупнее и единый размер */
    line-height: 1 !important;
}

body.layout-phone .mobile-place-sep {
    color: #9ca3af !important;
    margin: 0 4px !important;
    font-weight: 400 !important;
    font-size: clamp(14px, 2vw, 16px) !important;
    /* Такой же размер */
    align-self: center !important;
    position: relative !important;
    top: -1px !important;
    /* Визуальная компенсация */
}

body.layout-phone .mobile-place-count {
    color: #4b5563 !important;
    /* Чуть темнее для читаемости */
    font-weight: 500 !important;
    /* Чуть плотнее обычного */
    font-size: clamp(14px, 2vw, 16px) !important;
    /* Строго такой же размер как у имени */
    line-height: 1 !important;
}

/* ============================================
   ОСТАЛЬНЫЕ ЭЛЕМЕНТЫ
   ============================================ */

body.layout-phone .work-card .card-main {
    gap: var(--card-gap) !important;
}

body.layout-phone .work-card .card-header {
    margin-bottom: var(--card-gap) !important;
    flex-shrink: 0 !important;
}



body.layout-phone .work-card .card-sku {
    font-size: clamp(18px, 4.9vw, 24px) !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 2px !important;
}

/* ============================================
   ФИКС "КАРТОЧКА СВОБОДНА" - НА ВСЮ ВЫСОТУ
   ============================================ */

body.layout-phone .work-slot .task-card-placeholder {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    background: #fff !important;
    border-radius: 24px !important;
    border: 2px dashed #e5e7eb !important;
    margin-bottom: 0 !important;
    /* Убираем отступы если есть */
}

/* Mobile list-mode rules are centralized in components.css (@media max-width:1024). */

/* ============================================
   PREMIUM PWA POLISH (Mobile)
   ============================================ */
body.layout-phone .work-slot .task-card.work-card {
    border: 1px solid var(--pwa-border) !important;
    border-radius: var(--pwa-radius-lg) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

body.layout-phone .task-card.work-card .card-main {
    gap: var(--pwa-space-2) !important;
    align-items: flex-start !important;
}

body.layout-phone .work-card .mobile-place-pill {
    background: var(--pwa-soft-bg) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 10px !important;
    min-height: 28px !important;
}

body.layout-phone .work-card .stat-item .stat-value {
    font-size: clamp(22px, 6vw, 28px) !important;
}

body.layout-phone .work-card .qty-control,
body.layout-phone .work-card .action-ok {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
}

body.layout-phone .work-card .qc-btn {
    width: 30px !important;
    min-width: 30px !important;
}