/* =====================================================
   PWA UI — Warehouse
   สไตล์ของแบนเนอร์ติดตั้ง / แถบอัปเดต / แถบออฟไลน์ / toast
   รองรับ 320px – 2560px, โหมดมืด, และ safe-area ของ iPhone
===================================================== */

:root {
    --pwa-primary: #059669;
    --pwa-primary-dark: #047857;
    --pwa-bg: #ffffff;
    --pwa-text: #0f172a;
    --pwa-muted: #64748b;
    --pwa-border: #e2e8f0;
    --pwa-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    --pwa-radius: 14px;
    --pwa-safe-b: env(safe-area-inset-bottom, 0px);
    --pwa-safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --pwa-bg: #1e293b;
        --pwa-text: #f1f5f9;
        --pwa-muted: #94a3b8;
        --pwa-border: #334155;
        --pwa-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    }
}

/* ---------- ปุ่มร่วม ---------- */
.pwa-btn {
    border: 0;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    transition: background .15s ease, transform .1s ease, opacity .15s ease;
    font-family: inherit;
}
.pwa-btn:active { transform: scale(.97); }
.pwa-btn:disabled { opacity: .6; cursor: default; }
.pwa-btn:focus-visible { outline: 2px solid var(--pwa-primary); outline-offset: 2px; }

.pwa-btn-primary { background: var(--pwa-primary); color: #fff; }
.pwa-btn-primary:hover { background: var(--pwa-primary-dark); }

.pwa-btn-ghost { background: transparent; color: var(--pwa-muted); }
.pwa-btn-ghost:hover { background: rgba(100, 116, 139, .12); }

/* =====================================================
   แบนเนอร์ติดตั้งแอป (มุมล่าง)
===================================================== */
.pwa-install-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + var(--pwa-safe-b));
    z-index: 10800;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--pwa-bg);
    color: var(--pwa-text);
    border: 1px solid var(--pwa-border);
    border-radius: var(--pwa-radius);
    box-shadow: var(--pwa-shadow);
    transform: translateY(140%);
    opacity: 0;
    transition: transform .32s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
}
.pwa-install-banner.show { transform: translateY(0); opacity: 1; }

.pwa-install-icon {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    flex: 0 0 48px;
    object-fit: contain;
    background: #f8fafc;
}

.pwa-install-body { flex: 1 1 auto; min-width: 0; }
.pwa-install-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.pwa-install-desc  { font-size: 13px; color: var(--pwa-muted); line-height: 1.35; }

.pwa-install-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* จอแคบ: ปุ่มลงมาอยู่บรรทัดล่าง เต็มความกว้าง */
@media (max-width: 520px) {
    .pwa-install-banner { flex-wrap: wrap; gap: 10px; }
    .pwa-install-actions { width: 100%; }
    .pwa-install-actions .pwa-btn { flex: 1 1 0; }
    .pwa-install-desc { font-size: 12px; }
}

/* จอใหญ่: จำกัดความกว้าง จัดกลางล่าง ไม่กินเต็มจอ */
@media (min-width: 768px) {
    .pwa-install-banner {
        left: auto;
        right: 24px;
        bottom: calc(24px + var(--pwa-safe-b));
        max-width: 440px;
    }
}

/* =====================================================
   แถบแจ้งอัปเดต (ด้านบน)
===================================================== */
.pwa-update-bar {
    position: fixed;
    top: var(--pwa-safe-t);
    left: 0;
    right: 0;
    z-index: 10900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 11px 16px;
    background: linear-gradient(135deg, var(--pwa-primary) 0%, var(--pwa-primary-dark) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(5, 150, 105, .35);
    transform: translateY(-100%);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.pwa-update-bar.show { transform: translateY(0); }

.pwa-update-text { display: inline-flex; align-items: center; gap: 8px; }
.pwa-update-actions { display: flex; gap: 8px; }

.pwa-update-bar .pwa-btn-primary { background: rgba(255, 255, 255, .22); }
.pwa-update-bar .pwa-btn-primary:hover { background: rgba(255, 255, 255, .34); }
.pwa-update-bar .pwa-btn-ghost { color: rgba(255, 255, 255, .85); }
.pwa-update-bar .pwa-btn-ghost:hover { background: rgba(255, 255, 255, .16); }

@media (max-width: 420px) {
    .pwa-update-bar { font-size: 13px; padding: 10px 12px; }
    .pwa-update-bar .pwa-btn { padding: 6px 12px; font-size: 13px; }
}

/* =====================================================
   แถบออฟไลน์ (ด้านล่าง)
===================================================== */
.pwa-offline-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10850;
    padding: 9px 14px calc(9px + var(--pwa-safe-b));
    background: #b45309;
    color: #fff;
    font-size: 13px;
    text-align: center;
    transform: translateY(100%);
    transition: transform .28s ease;
}
.pwa-offline-bar.show { transform: translateY(0); }

@media (max-width: 420px) {
    .pwa-offline-bar { font-size: 12px; }
}

/* =====================================================
   คู่มือติดตั้งสำหรับ iOS
===================================================== */
.pwa-ios-guide {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
    opacity: 0;
    transition: opacity .25s ease;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.pwa-ios-guide.show { opacity: 1; }

.pwa-ios-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--pwa-bg);
    color: var(--pwa-text);
    border-radius: 18px;
    padding: 22px 20px calc(22px + var(--pwa-safe-b));
    box-shadow: var(--pwa-shadow);
    text-align: center;
    transform: translateY(24px);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.pwa-ios-guide.show .pwa-ios-card { transform: translateY(0); }

.pwa-ios-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--pwa-muted);
    cursor: pointer;
    padding: 4px 8px;
}

.pwa-ios-card .pwa-install-icon { margin: 0 auto 10px; display: block; width: 56px; height: 56px; }
.pwa-ios-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; }

.pwa-ios-steps {
    text-align: left;
    margin: 0 0 12px;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--pwa-text);
}
.pwa-ios-share {
    display: inline-block;
    border: 1.5px solid var(--pwa-primary);
    color: var(--pwa-primary);
    border-radius: 5px;
    padding: 0 6px;
    font-weight: 700;
}
.pwa-ios-note { font-size: 12px; color: var(--pwa-muted); }

/* @media (min-width: 768px): จอใหญ่ให้กล่องลอยกลางจอ */
@media (min-width: 768px) {
    .pwa-ios-guide { align-items: center; }
}

/* =====================================================
   Toast
===================================================== */
.pwa-toast-box {
    position: fixed;
    left: 50%;
    bottom: calc(20px + var(--pwa-safe-b));
    transform: translateX(-50%);
    z-index: 11100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}

.pwa-toast {
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    color: #fff;
    background: #334155;
    box-shadow: var(--pwa-shadow);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    text-align: center;
}
.pwa-toast.show { opacity: 1; transform: translateY(0); }
.pwa-toast-success { background: #15803d; }
.pwa-toast-info    { background: #047857; }
.pwa-toast-warn    { background: #b45309; }
.pwa-toast-error   { background: #b91c1c; }

/* =====================================================
   โหมดติดตั้งแล้ว (standalone)
===================================================== */
/* กันเนื้อหาชนแถบสถานะบน iPhone เวลาใช้ black-translucent */
body.pwa-standalone {
    padding-top: var(--pwa-safe-t);
}
/* ในแอปที่ติดตั้งแล้ว ไม่ต้องโชว์ปุ่มติดตั้งอีก */
body.pwa-standalone .pwa-install-btn { display: none !important; }

/* Windows: แถบชื่อเรื่องแบบ window-controls-overlay */
@media (display-mode: window-controls-overlay) {
    body { padding-top: env(titlebar-area-height, 0px); }
}

/* ---------- ลดการเคลื่อนไหวตามการตั้งค่าระบบ ---------- */
@media (prefers-reduced-motion: reduce) {
    .pwa-install-banner,
    .pwa-update-bar,
    .pwa-offline-bar,
    .pwa-ios-guide,
    .pwa-ios-card,
    .pwa-toast { transition: none; }
}

/* ---------- ตอนพิมพ์ ไม่ต้องแสดง UI ของ PWA ---------- */
@media print {
    .pwa-install-banner,
    .pwa-update-bar,
    .pwa-offline-bar,
    .pwa-ios-guide,
    .pwa-toast-box { display: none !important; }
}