/* ============================================================
   Vivajoy Online Sale — Theme: Frosty Blue (Snow Town)
   ใช้ร่วมกับ Bootstrap 5 — load หลัง bootstrap.min.css
   ============================================================ */

:root {
    /* ===== Brand Palette ===== */
    --vj-primary:        #0EA5E9;   /* ฟ้าน้ำแข็ง — ปุ่มหลัก, link, focus */
    --vj-primary-dark:   #0284C7;   /* hover */
    --vj-primary-darker: #1E3A8A;   /* navbar, heading */
    --vj-accent:         #38BDF8;   /* highlight, badge */

    /* ===== Surface / Background ===== */
    --vj-bg:             #F0F9FF;   /* page background */
    --vj-bg-alt:         #E0F2FE;   /* card alt / striped */
    --vj-surface:        #FFFFFF;   /* card, modal */
    --vj-border:         #BAE6FD;   /* border อ่อน */
    --vj-border-strong:  #7DD3FC;

    /* ===== Text ===== */
    --vj-text:           #0F172A;   /* heading */
    --vj-text-body:      #1E293B;   /* body */
    --vj-text-muted:     #64748B;   /* helper */
    --vj-text-on-primary:#FFFFFF;

    /* ===== Status (order/payment/ticket) ===== */
    --vj-success:        #10B981;   /* approved */
    --vj-warning:        #F59E0B;   /* pending / slip_uploaded */
    --vj-danger:         #EF4444;   /* rejected */
    --vj-neutral:        #94A3B8;   /* cancelled */
    --vj-info:           #06B6D4;

    /* ===== Shape ===== */
    --vj-radius-sm: 6px;
    --vj-radius:    12px;
    --vj-radius-lg: 18px;

    /* ===== Shadow (นุ่มแบบหิมะ) ===== */
    --vj-shadow-sm: 0 1px 2px rgba(14,165,233,.08);
    --vj-shadow:    0 4px 14px rgba(14,165,233,.12);
    --vj-shadow-lg: 0 12px 32px rgba(14,165,233,.18);

    /* ===== Font ===== */
    --vj-font: "Sarabun", "Noto Sans Thai", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ===== Base ===== */
html, body {
    background: var(--vj-bg);
    color: var(--vj-text-body);
    font-family: var(--vj-font);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--vj-text);
    font-weight: 700;
}

a {
    color: var(--vj-primary-dark);
    text-decoration: none;
}
a:hover { color: var(--vj-primary-darker); text-decoration: underline; }

/* ===== Brand Header / Navbar ===== */
.vj-navbar {
    background: linear-gradient(135deg, #1E3A8A 0%, #0EA5E9 100%);
    color: #fff;
    box-shadow: var(--vj-shadow);
}
.vj-navbar a, .vj-navbar .navbar-brand { color: #fff; }
.vj-navbar a:hover { color: #BAE6FD; }

.vj-brand {
    font-weight: 800;
    letter-spacing: .5px;
}
.vj-brand::before {
    content: "❄";
    margin-right: .35rem;
    color: #BAE6FD;
}

/* ===== Card ===== */
.vj-card,
.card {
    background: var(--vj-surface);
    border: 1px solid var(--vj-border);
    border-radius: var(--vj-radius);
    box-shadow: var(--vj-shadow-sm);
}
.vj-card-header {
    background: var(--vj-bg-alt);
    border-bottom: 1px solid var(--vj-border);
    padding: .75rem 1rem;
    border-radius: var(--vj-radius) var(--vj-radius) 0 0;
    font-weight: 700;
    color: var(--vj-primary-darker);
}

/* ===== Buttons (override Bootstrap primary) ===== */
.btn-primary,
.vj-btn-primary {
    background-color: var(--vj-primary);
    border-color: var(--vj-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--vj-radius-sm);
}
.btn-primary:hover,
.vj-btn-primary:hover,
.btn-primary:focus,
.vj-btn-primary:focus {
    background-color: var(--vj-primary-dark);
    border-color: var(--vj-primary-dark);
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(14,165,233,.25);
}

.vj-btn-outline {
    background: transparent;
    color: var(--vj-primary-dark);
    border: 1px solid var(--vj-primary);
    border-radius: var(--vj-radius-sm);
    font-weight: 600;
}
.vj-btn-outline:hover {
    background: var(--vj-primary);
    color: #fff;
}

.btn-danger { background-color: var(--vj-danger); border-color: var(--vj-danger); }
.btn-success { background-color: var(--vj-success); border-color: var(--vj-success); }
.btn-warning { background-color: var(--vj-warning); border-color: var(--vj-warning); color: #fff; }

/* ===== Form ===== */
.form-control, .form-select {
    border-radius: var(--vj-radius-sm);
    border-color: var(--vj-border-strong);
    background: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--vj-primary);
    box-shadow: 0 0 0 .2rem rgba(14,165,233,.18);
}
.form-label { font-weight: 600; color: var(--vj-text); }

/* ===== Table ===== */
.table {
    background: #fff;
    border-radius: var(--vj-radius);
    overflow: hidden;
}
.table > thead {
    background: var(--vj-bg-alt);
    color: var(--vj-primary-darker);
}
.table > thead th { font-weight: 700; border-bottom: 2px solid var(--vj-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(224,242,254,.35); }

/* ===== Status Badge ===== */
.vj-badge {
    display: inline-block;
    padding: .25rem .6rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.2;
}
.vj-badge-pending        { background:#FEF3C7; color:#92400E; }
.vj-badge-slip_uploaded  { background:#DBEAFE; color:#1E40AF; }
.vj-badge-approved       { background:#D1FAE5; color:#065F46; }
.vj-badge-rejected       { background:#FEE2E2; color:#991B1B; }
.vj-badge-cancelled      { background:#E2E8F0; color:#475569; }

.vj-badge-pending_review { background:#FEF3C7; color:#92400E; }
.vj-badge-unused         { background:#E0F2FE; color:#0369A1; }
.vj-badge-used           { background:#E2E8F0; color:#475569; text-decoration: line-through; }

.vj-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--vj-danger);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

@keyframes vj-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
}

.vj-badge-pulse {
    animation: vj-pulse .4s ease-in-out 3;
}

/* ===== Alert ===== */
.alert { border-radius: var(--vj-radius); border: 1px solid transparent; }
.alert-info    { background:#E0F2FE; color:#0C4A6E; border-color: var(--vj-border); }
.alert-success { background:#D1FAE5; color:#065F46; border-color:#6EE7B7; }
.alert-warning { background:#FEF3C7; color:#92400E; border-color:#FCD34D; }
.alert-danger  { background:#FEE2E2; color:#991B1B; border-color:#FCA5A5; }

/* ===== Snow Decorative ===== */
.vj-hero {
    background:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,.6) 0, transparent 12%),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,.5) 0, transparent 10%),
        radial-gradient(circle at 60% 80%, rgba(255,255,255,.5) 0, transparent 10%),
        linear-gradient(135deg, #1E3A8A 0%, #0EA5E9 60%, #38BDF8 100%);
    color: #fff;
    border-radius: var(--vj-radius-lg);
    padding: 2rem 1.5rem;
    box-shadow: var(--vj-shadow);
}
.vj-hero h1, .vj-hero h2, .vj-hero h3 { color: #fff; }

.vj-divider-snow {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vj-border-strong), transparent);
    margin: 1.5rem 0;
}

/* ===== Ticket / QR Card ===== */
.vj-ticket {
    background: #fff;
    border: 2px dashed var(--vj-primary);
    border-radius: var(--vj-radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--vj-shadow);
}
.vj-ticket-qr {
    background: #fff;
    padding: 12px;
    display: inline-block;
    border-radius: var(--vj-radius-sm);
}
.vj-qr-img {
    width: 100%;
    max-width: 320px;
    height: auto;
}
.vj-ticket-title {
    color: var(--vj-primary-darker);
    font-size: 1.35rem;
    font-weight: 800;
}
.vj-ticket-meta {
    color: var(--vj-text-body);
    line-height: 1.8;
}
.vj-qr-card {
    border: 1px solid var(--vj-border);
    border-radius: var(--vj-radius);
    padding: 12px;
    text-align: center;
    background: var(--vj-surface);
    box-shadow: var(--vj-shadow-sm);
    transition: opacity .5s ease;
}
.vj-qr-wrap {
    display: inline-block;
    max-width: 200px;
    width: 100%;
}
.vj-qr-card .vj-qr-img {
    max-width: 200px;
}
.vj-qr-used-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    border-radius: var(--vj-radius-sm);
    color: #fff;
    font-size: 4rem;
    line-height: 1;
    align-items: center;
    justify-content: center;
}
.vj-qr-used {
    opacity: .4;
    pointer-events: none;
}
.vj-qr-used .vj-qr-used-overlay {
    display: flex;
}
.vj-qr-label {
    font-size: .85rem;
    font-weight: 600;
    margin-top: 6px;
    color: var(--vj-primary-darker);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vj-qr-num {
    font-size: .75rem;
    color: var(--vj-text-muted);
}

/* ===== Receipt ===== */
.vj-receipt {
    background: #fff;
    color: #000;
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: var(--vj-radius);
    font-family: "Sarabun", monospace;
    max-width: 780px;
    margin: 0 auto;
}
.vj-receipt-header {
    text-align: center;
}

/* ===== Dashboard Stat Card ===== */
.vj-stat {
    background: #fff;
    border: 1px solid var(--vj-border);
    border-left: 4px solid var(--vj-primary);
    border-radius: var(--vj-radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--vj-shadow-sm);
}
.vj-stat-label { color: var(--vj-text-muted); font-size: .85rem; }
.vj-stat-value { font-size: 1.75rem; font-weight: 800; color: var(--vj-primary-darker); }

/* ===== Scanner ===== */
.vj-scan-result {
    min-height: 88px;
}
.vj-handheld-scan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: .75rem;
    align-items: end;
}
.vj-handheld-scan .form-control {
    font-size: 1.2rem;
    letter-spacing: 0;
}

/* ===== Lang Switcher ===== */
.vj-lang-switch .btn {
    border-radius: 999px;
    padding: .15rem .7rem;
    font-size: .85rem;
}

/* ===== Responsive 360px ===== */
@media (max-width: 400px) {
    body { font-size: 14px; }
    .vj-hero { padding: 1.25rem 1rem; }
    .vj-stat-value { font-size: 1.4rem; }
    .table { font-size: .85rem; }
    .vj-handheld-scan { grid-template-columns: 1fr; }
}

/* ===== Print (ใบเสร็จ / ตั๋ว) ===== */
@media print {
    body { background: #fff; }
    .vj-navbar, .vj-no-print, nav, footer { display: none !important; }
    .vj-ticket, .vj-receipt { box-shadow: none; border-color: #000; }
}