/* ===== Design tokens (AirError — cool / modern) ===== */
:root {
    --bg: #eaf2fb;
    --bg-2: #f6fafe;
    --surface: #ffffff;
    --ink: #0f172a;
    --muted: #64748b;
    --primary: #0284c7;
    --primary-strong: #0369a1;
    --grad: linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #6366f1 100%);
    --grad-soft: linear-gradient(135deg, #ecfeff, #eff6ff);
    --border: #e3ebf3;
    --danger: #e11d48;
    --success: #16a34a;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 6px 24px rgba(15, 40, 82, .07);
    --shadow-lg: 0 14px 40px rgba(15, 40, 82, .12);
}

html, body {
    font-family: 'Noto Sans Thai', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--bg);
    background-image: radial-gradient(1200px 500px at 100% -10%, #d5ecff 0%, transparent 60%),
                      radial-gradient(900px 500px at -10% 0%, #e5fbff 0%, transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

input, select, textarea, button { font-family: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3 { letter-spacing: -0.01em; }

.content { padding-top: 0; }
h1:focus { outline: none; }

/* ===== Bootstrap overrides kept minimal ===== */
.btn-primary { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .25);
}

/* ===== Validation (from template) ===== */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: #b32121; padding: 1rem 1rem 1rem 1rem; color: white; border-radius: 10px;
}
.blazor-error-boundary::after { content: "เกิดข้อผิดพลาด"; }

/* แถบแจ้ง error ของ Blazor circuit — ซ่อนไว้จนกว่าจะเกิด error จริง (blazor.js จะ set display:block เอง) */
#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000;
    box-sizing: border-box; padding: .7rem 1.25rem;
    background: #fff7ed; color: #7c2d12; border-top: 1px solid #fed7aa;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
#blazor-error-ui .reload { color: #c2410c; font-weight: 700; margin: 0 .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .6rem; }

/* ===== Auth bar / Facebook button ===== */
.authbar { display: flex; align-items: center; gap: 12px; }
.authbar__pic { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.12); }
.authbar__name { font-weight: 600; color: var(--ink); font-size: .92rem; }
.authbar__link { color: var(--muted); font-size: .9rem; font-weight: 600; }
.authbar__link:hover { color: var(--primary); }
.btn-fb {
    display: inline-flex; align-items: center; gap: 8px;
    background: #1877f2; color: #fff !important;
    padding: 9px 18px; border-radius: 10px; font-weight: 600; font-size: .9rem;
    box-shadow: 0 4px 14px rgba(24, 119, 242, .3);
    transition: transform .15s, box-shadow .15s;
}
.btn-fb::before { content: "f"; font-weight: 800; font-family: Georgia, serif; }
.btn-fb:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(24, 119, 242, .4); }

/* ── legal pages (privacy / data-deletion) ── */
.legal { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; line-height: 1.75; }
.legal h1 { font-size: 1.7rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.legal__upd { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }
.legal h2 { font-size: 1.15rem; font-weight: 700; color: #0369a1; margin: 24px 0 8px; }
.legal ul, .legal ol { padding-left: 24px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--primary); font-weight: 600; }

/* ══════════ Admin (global — ใช้ร่วมทุกหน้า admin) ══════════ */
.admin { max-width: 1040px; margin: 0 auto; padding: 24px 16px 60px; }
.admin h1 { font-size: 1.6rem; font-weight: 800; color: var(--ink, #0f172a); margin-bottom: 4px; }
.admin__hint { color: var(--muted, #64748b); font-size: .9rem; margin-bottom: 12px; }
.admin__bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.admin__in { padding: 11px 14px; border: 2px solid var(--border, #e2e8f0); border-radius: 12px; background: #fff; }
.admin__in:focus { outline: none; border-color: #38bdf8; }
.admin__btn {
    padding: 11px 18px; border: none; border-radius: 12px; background: var(--primary, #0284c7);
    color: #fff; font-weight: 700; cursor: pointer; transition: filter .15s, transform .15s;
}
.admin__btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.admin__btn:disabled { opacity: .4; cursor: default; }
.admin__btn--new { background: linear-gradient(135deg, #10b981, #059669); }
.admin__btn--save { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.admin__form {
    border: 1px solid #e9d5ff; background: linear-gradient(135deg, #faf5ff, #f5f3ff);
    border-radius: 18px; padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow, 0 6px 24px rgba(15,40,82,.07));
}
.admin__form h3 { margin: 0 0 14px; color: #6d28d9; font-weight: 800; }
.admin__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin__grid label { display: flex; flex-direction: column; font-size: .8rem; font-weight: 700; color: #475569; gap: 4px; }
.admin__grid input, .admin__grid select, .admin__grid textarea {
    padding: 9px 12px; border: 1px solid #d8dee9; border-radius: 10px; font-size: .95rem; background: #fff;
}
.admin__grid input:focus, .admin__grid select:focus, .admin__grid textarea:focus { outline: none; border-color: #38bdf8; }
.admin__wide { grid-column: 1 / -1; }
.admin__actions { margin-top: 14px; display: flex; gap: 8px; align-items: center; }
.admin__msg { color: #be123c; font-size: .85rem; }
.admin__count { margin: 10px 0; color: var(--muted, #64748b); font-weight: 700; }
.admin__table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: var(--shadow, 0 6px 24px rgba(15,40,82,.07)); border: 1px solid var(--border, #e3ebf3);
}
.admin__table th, .admin__table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #eef2f7; vertical-align: top; font-size: .92rem; }
.admin__table th { background: #f6fafe; color: #475569; font-weight: 700; }
.admin__table tr:last-child td { border-bottom: none; }
.admin__table tbody tr:hover { background: #f8fbff; }
.admin__row-actions { white-space: nowrap; }
.admin__row-actions button { margin-right: 6px; padding: 6px 12px; border: 1px solid #d8dee9; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; }
.admin__row-actions button:hover { border-color: #38bdf8; color: var(--primary, #0284c7); }
.admin__del { color: #be123c !important; border-color: #fecdd3 !important; }
.admin__del:hover { background: #fff1f2 !important; }
.tag { padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #e2e8f0; color: #475569; }
.tag--technician { background: #ffe4e6; color: #be123c; }
.tag--diy { background: #dcfce7; color: #15803d; }
.admin__pager { margin-top: 16px; display: flex; gap: 8px; }

/* editor + parts + section links + members */
.admin__editor-label { display: block; font-size: .8rem; font-weight: 700; color: #475569; margin: 14px 0 6px; }
.admin__editor { width: 100%; min-height: 200px; border: 1px solid #d8dee9; border-radius: 10px; }
.admin__parts { margin-top: 16px; }
.admin__parts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.admin__part-row { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: 8px; margin-bottom: 8px; }
.admin__part-row input { padding: 9px 12px; border: 1px solid #d8dee9; border-radius: 10px; font-size: .92rem; }
.admin__links { margin-top: 16px; }
.admin__links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-top: 8px; }
.admin__chk { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: #334155; background: #fff; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; }
.admin__chk small { color: #94a3b8; font-weight: 500; }
.admin__chk b { font-weight: 700; }
.admin__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.admin__chip { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: #0f172a; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px; padding: 4px 6px 4px 12px; }
.admin__chip small { color: #6366f1; font-weight: 500; }
.admin__chip-x { border: 0; background: #c7d2fe; color: #1e293b; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: .75rem; }
.admin__chip-x:hover { background: #a5b4fc; }

/* ── modal เต็มจอ (ฟอร์มแก้ไขเรื่องซ่อม) ── */
.modal-full { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, .55); display: flex; justify-content: center; }
.modal-full__panel { background: #f8fafc; width: 100%; max-width: none; display: flex; flex-direction: column; max-height: 100vh; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.modal-full__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.modal-full__head h3 { flex: 1; margin: 0; font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.modal-full__close { width: 40px; height: 40px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 10px; font-size: 1rem; cursor: pointer; color: #334155; }
.modal-full__close:hover { background: #eef2ff; }
.modal-full__body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.modal-full__body.admin__form { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.modal-full__foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #fff; border-top: 1px solid #e2e8f0; }

@media (max-width: 720px) {
    .modal-full__panel { max-width: 100%; }
}
.admin__quick span { display: flex; gap: 6px; }
.admin__expired { color: #be123c; font-weight: 600; }

/* ══════════ ซื้อ Token ══════════ */
.buy { max-width: 1040px; margin: 0 auto; padding: 24px 16px 60px; }
.buy h1 { font-size: 1.6rem; font-weight: 800; color: var(--ink, #0f172a); margin-bottom: 4px; }
.buy__hint { color: var(--muted, #64748b); font-size: .92rem; margin-bottom: 20px; }
.buy__h2 { font-size: 1.2rem; font-weight: 800; margin: 32px 0 12px; color: var(--ink, #0f172a); }
.buy__packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pack {
    position: relative; background: #fff; border: 2px solid #e2e8f0; border-radius: 18px;
    padding: 22px 18px; text-align: center; box-shadow: 0 6px 24px rgba(15,40,82,.06);
}
.pack--promo { border-color: #f59e0b; }
.pack__badge {
    position: absolute; top: -12px; right: 14px; background: linear-gradient(135deg,#f59e0b,#ea580c);
    color: #fff; font-size: .78rem; font-weight: 800; padding: 4px 12px; border-radius: 999px;
}
.pack__tokens { font-size: 2.1rem; font-weight: 800; color: #0284c7; line-height: 1; }
.pack__tokens span { font-size: .9rem; color: #64748b; font-weight: 600; }
.pack__name { font-weight: 700; color: #334155; margin: 8px 0 2px; }
.pack__price { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin: 6px 0; }
.pack__per { font-size: .8rem; color: #94a3b8; margin-bottom: 14px; }
.pack__buy {
    width: 100%; padding: 11px; border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg,#8b5cf6,#6366f1); color: #fff; font-weight: 700;
}
.pack__buy:disabled { opacity: .5; cursor: default; }

.pay { background: linear-gradient(135deg,#faf5ff,#eff6ff); border: 1px solid #e9d5ff; border-radius: 18px; padding: 22px; margin-bottom: 24px; }
.pay h3 { margin: 0 0 16px; color: #6d28d9; font-weight: 800; }
.pay__grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.pay__qr { text-align: center; background: #fff; border-radius: 14px; padding: 16px; border: 1px solid #e2e8f0; align-self: start; }
.pay__qr img { width: 100%; max-width: 220px; height: auto; }
.pay__acct { font-weight: 700; color: #334155; margin-top: 8px; }
.pay__amt { font-size: 1.4rem; font-weight: 800; color: #0284c7; }
.pay__steps { margin: 0 0 14px; padding-left: 20px; color: #475569; line-height: 1.9; }
.pay__file { display: block; margin: 10px 0; }
.pay__picked { font-size: .85rem; color: #15803d; margin-bottom: 10px; }
.pay__actions { display: flex; gap: 8px; }
.pay__cancel { padding: 11px 18px; border: 1px solid #d8dee9; background: #fff; border-radius: 12px; cursor: pointer; font-weight: 600; }
.pay__msg { margin-top: 10px; color: #be123c; font-size: .9rem; }

.admin__link-btn { padding: 6px 12px; border: 1px solid #d8dee9; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; color: #0284c7; }
.admin__link-btn:hover { border-color: #38bdf8; }

.slip-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.7); display: grid; place-items: center; z-index: 100; padding: 20px; }
.slip-modal { background: #fff; border-radius: 16px; padding: 16px; max-width: 90vw; max-height: 90vh; overflow: auto; text-align: center; }
.slip-modal img { max-width: 100%; max-height: 70vh; border-radius: 10px; margin-bottom: 12px; }

@media (max-width: 640px) { .pay__grid { grid-template-columns: 1fr; } }

/* ══════════ ร้านค้า / ตลาดอะไหล่ ══════════ */
.shop-status { padding: 12px 16px; border-radius: 12px; font-size: .95rem; margin-bottom: 16px; }
.shop-status--pending { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }
.shop-status--approved { background: #dcfce7; border: 1px solid #bbf7d0; color: #15803d; }
.shop-status--rejected, .shop-status--suspended { background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 8px; }
.prod { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(15,40,82,.05); display: flex; flex-direction: column; }
.prod__img { aspect-ratio: 4/3; background: #f1f5f9; display: grid; place-items: center; overflow: hidden; }
.prod__img img { width: 100%; height: 100%; object-fit: cover; }
.prod__noimg { color: #94a3b8; font-size: .85rem; }
.prod__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.prod__name { font-weight: 700; color: #0f172a; }
.prod__price { font-size: 1.2rem; font-weight: 800; color: #0284c7; }
.prod__code, .prod__compat, .prod__shop { font-size: .8rem; color: #64748b; }
.prod__buy { margin-top: auto; padding-top: 8px; color: #0284c7; font-weight: 700; text-decoration: none; font-size: .9rem; }
.prod__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.prod__actions button, .prod__upload { padding: 6px 10px; border: 1px solid #d8dee9; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .8rem; }
.prod__upload { color: #0284c7; }

/* ══════════ CRM ══════════ */
.crm-back { display: inline-block; margin-bottom: 12px; color: var(--muted, #64748b); font-weight: 600; text-decoration: none; }
.crm-back:hover { color: var(--primary, #0284c7); }
.crm-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 16px; }
.crm-head h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.crm-sub { display: flex; gap: 14px; margin: 4px 0; }
.crm-sub a { color: var(--primary, #0284c7); font-weight: 600; text-decoration: none; }
.crm-addr { color: #64748b; font-size: .9rem; }
.crm-totals { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.crm-totals > div { text-align: right; }
.crm-totals span { display: block; font-size: .75rem; color: #94a3b8; }
.crm-totals b { font-size: 1.1rem; color: #0f172a; }
.crm-unpaid { color: #be123c !important; }
.crm-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; margin-bottom: 16px; box-shadow: 0 4px 16px rgba(15,40,82,.05); }
.crm-sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.crm-sec-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.crm-sec-head small { color: #94a3b8; }
.crm-photos, .crm-visit-photos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crm-photo, .crm-vp { position: relative; width: 90px; height: 90px; border-radius: 10px; overflow: hidden; background: #f1f5f9; display: grid; place-items: center; }
.crm-photo img, .crm-vp img { width: 100%; height: 100%; object-fit: cover; }
.crm-photo-del { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; }
.crm-vp-tag { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(2,132,199,.85); color: #fff; font-size: .7rem; text-align: center; }
.crm-vp-tag--after { background: rgba(21,128,94,.85); }
.crm-photo-add { width: 90px; height: 90px; border: 2px dashed #cbd5e1; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: #64748b; font-weight: 700; }
.crm-photo-add.sm { width: auto; height: auto; padding: 6px 10px; font-size: .8rem; border-radius: 8px; }
.crm-units { display: flex; flex-direction: column; gap: 8px; }
.crm-unit { border: 1px solid #eef2f7; border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-unit-sub { display: flex; gap: 12px; font-size: .82rem; color: #64748b; flex-wrap: wrap; }
.crm-unit-act button { margin-left: 6px; padding: 5px 10px; border: 1px solid #d8dee9; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .8rem; }
.crm-types { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 12px; }
.crm-type { font-size: .9rem; font-weight: 600; color: #334155; display: flex; gap: 6px; align-items: center; }
.crm-parts { margin: 8px 0; }
.crm-parts-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.crm-part-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }
.crm-part-row input { padding: 8px 10px; border: 1px solid #d8dee9; border-radius: 8px; font-size: .88rem; }
.crm-paid { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 8px 0; }
.crm-visit { border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.crm-visit-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.crm-chip { background: #e0f2fe; color: #0369a1; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.crm-visit-tech { color: #94a3b8; font-size: .82rem; margin-left: 8px; }
.crm-visit-money { display: flex; gap: 10px; align-items: center; }
.crm-visit-money b { font-size: 1.05rem; }
.crm-pay { border: none; border-radius: 999px; padding: 4px 12px; font-size: .78rem; font-weight: 700; cursor: pointer; background: #fee2e2; color: #be123c; }
.crm-pay.paid { background: #dcfce7; color: #15803d; }
.crm-visit-parts { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; font-size: .84rem; color: #475569; }
.crm-visit-note { font-size: .86rem; color: #64748b; margin: 6px 0; }
.crm-visit-del { margin-left: auto; padding: 5px 10px; border-radius: 8px; font-size: .78rem; }
@media (max-width: 640px) { .crm-part-row { grid-template-columns: 1fr 1fr; } }

/* ── CRM phase 2: tabs / dashboard / reminders / calendar ── */
.crm-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 2px solid #e2e8f0; }
.crm-tabs a { padding: 8px 16px; text-decoration: none; color: #64748b; font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.crm-tabs a.on { color: #0284c7; border-bottom-color: #0284c7; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dash-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; box-shadow: 0 4px 16px rgba(15,40,82,.05); }
.dash-card span { display: block; font-size: .8rem; color: #64748b; margin-bottom: 4px; }
.dash-card b { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.dash-card--good b { color: #15803d; }
.dash-card--warn { background: #fffbeb; border-color: #fde68a; }
.dash-card--warn b { color: #b45309; }
.rem-list { display: flex; flex-direction: column; gap: 8px; }
.rem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #eef2f7; border-radius: 10px; }
.rem--overdue { border-color: #fecaca; background: #fef2f2; }
.rem-kind { font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rem-kind--clean { background: #e0f2fe; color: #0369a1; }
.rem-kind--warranty { background: #fef3c7; color: #b45309; }
.rem-kind--appointment { background: #ede9fe; color: #6d28d9; }
.rem-kind--followup { background: #fee2e2; color: #be123c; }
.rem-body { flex: 1; }
.rem-sub { font-size: .82rem; color: #64748b; }
.rem-act { display: flex; gap: 10px; }
.rem-act a { color: #0284c7; font-weight: 700; text-decoration: none; font-size: .85rem; }
.tbl-wrap { overflow-x: auto; }
.cal-day { margin-bottom: 16px; }
.cal-date { font-weight: 800; color: #334155; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #eef2f7; }
.cal-appt { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #eef2f7; border-radius: 10px; margin-bottom: 6px; }
.cal-appt--done { opacity: .55; }
.cal-appt--cancelled { opacity: .5; text-decoration: line-through; }
.cal-time { font-weight: 800; color: #0284c7; font-variant-numeric: tabular-nums; }
.cal-body { flex: 1; }
.cal-note { font-size: .82rem; color: #64748b; }
.cal-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-act button, .cal-act a { padding: 5px 10px; border: 1px solid #d8dee9; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .78rem; text-decoration: none; color: #334155; }
.cal-done { background: #dcfce7 !important; color: #15803d !important; border-color: #bbf7d0 !important; }
.cal-status { font-size: .8rem; color: #94a3b8; font-weight: 600; }

/* ══════════ ตลาดงานซ่อม ══════════ */
.job-list { display: flex; flex-direction: column; gap: 10px; }
.job-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 16px rgba(15,40,82,.05); cursor: pointer; }
.job-card:hover { border-color: #93c5fd; }
.job-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.job-symptom { color: #334155; margin: 6px 0; }
.job-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: #64748b; }
.job-contact { margin-top: 8px; font-weight: 600; }
.job-contact a { color: #0284c7; }
.job-status { font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.job-status--open { background: #dbeafe; color: #1d4ed8; }
.job-status--assigned, .job-status--inprogress { background: #fef3c7; color: #b45309; }
.job-status--done { background: #dcfce7; color: #15803d; }
.job-status--closed { background: #e2e8f0; color: #475569; }
.job-status--cancelled { background: #fee2e2; color: #be123c; }
.offer { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #eef2f7; border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.offer--accepted { border-color: #86efac; background: #f0fdf4; }
.offer-rating { color: #f59e0b; font-size: .84rem; margin-left: 8px; }
.offer-price { font-weight: 800; color: #0284c7; margin-left: 8px; }
.offer-note { font-size: .86rem; color: #64748b; margin-top: 4px; }
.offer-tag { color: #15803d; font-weight: 700; font-size: .82rem; }
.timeline { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }
.tl { display: flex; gap: 10px; padding: 6px 0; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: none; background: #0284c7; }
.tl-dot--customer { background: #8b5cf6; }
.tl-body { font-size: .9rem; }
.tl-body small { color: #94a3b8; }
.tl-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.tl-add select, .tl-add input { padding: 8px 10px; border: 1px solid #d8dee9; border-radius: 8px; }
.tl-add input { flex: 1; min-width: 140px; }
.rate-stars { display: flex; gap: 2px; }
.rate-star { background: none; border: none; font-size: 1.8rem; color: #cbd5e1; cursor: pointer; }
.rate-star.on { color: #f59e0b; }

/* ── AI สแกนสติกเกอร์ ── */
.scan-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.scan-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; font-weight: 700; padding: 9px 16px; border-radius: 10px; cursor: pointer; font-size: .9rem; }
.scan-msg { font-size: .85rem; color: #475569; }

/* ══════════ Sidebar layout (พับซ่อน/แสดง ด้วย CSS ล้วน) ══════════ */
.nav-toggle { display: none; }
.layout { min-height: 100vh; }

.side {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 40;
    background: #10222e; color: #cfe3ea; display: flex; flex-direction: column;
    overflow-y: auto; transition: transform .22s ease;
}
.side__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 10px; }
.side__brand { color: #fff; font-weight: 800; font-size: 1.2rem; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.side__logo { font-size: 1.3rem; }
.side__x { cursor: pointer; color: #7fb4c6; font-size: 1.6rem; line-height: 1; padding: 0 8px; border-radius: 8px; user-select: none; }
.side__x:hover { background: rgba(255,255,255,.08); color: #fff; }
.side__nav { display: flex; flex-direction: column; padding: 6px 10px 24px; gap: 2px; }
.side__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #cfe3ea; text-decoration: none; font-weight: 600; font-size: .93rem; transition: background .12s; }
.side__link > span { width: 22px; text-align: center; flex: none; }
.side__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.side__link.active { background: linear-gradient(135deg, #0ea5b7, #0891b2); color: #fff; box-shadow: 0 4px 12px rgba(8,145,178,.35); }
.side__group { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: #6f97a6; padding: 16px 12px 4px; font-weight: 700; }

.content { margin-left: 240px; transition: margin-left .22s ease; min-height: 100vh; display: flex; flex-direction: column; }
.appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 9px 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border, #e3ebf3); }
.hamburger { cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 4px 11px; border-radius: 9px; color: #334155; user-select: none; }
.hamburger:hover { background: #eef4f8; }
.appbar__spacer { flex: 1; }
.appbar .authbar__name { color: #334155; font-weight: 700; font-size: .9rem; }
.appbar .authbar__link { color: #64748b; font-weight: 600; font-size: .88rem; text-decoration: none; }
.appbar .authbar__link:hover { color: var(--primary, #0284c7); }
.content__main { flex: 1; }

/* พับ (desktop) */
.nav-toggle:checked ~ .layout .side { transform: translateX(-100%); }
.nav-toggle:checked ~ .layout .content { margin-left: 0; }

.backdrop { display: none; }

/* มือถือ: เริ่มปิด, กด ☰ เปิดทับเป็น overlay */
@media (max-width: 900px) {
    .side { transform: translateX(-100%); box-shadow: 4px 0 28px rgba(0,0,0,.3); }
    .content { margin-left: 0; }
    .nav-toggle:checked ~ .layout .side { transform: translateX(0); }
    .nav-toggle:checked ~ .layout .content { margin-left: 0; }
    .nav-toggle:checked ~ .layout .backdrop { display: block; position: fixed; inset: 0; background: rgba(2,10,20,.45); z-index: 35; }
}

/* ── token chip บนแถบบน ── */
.tok-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .85rem; padding: 5px 12px; border-radius: 999px; text-decoration: none; background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.tok-chip:hover { background: #bae6fd; }
.tok-chip--empty { background: #fee2e2; color: #be123c; border-color: #fecaca; }
.tok-chip--admin { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }

.crm-visit-edit { padding: 5px 12px; border: 1px solid #d8dee9; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .78rem; color: #0284c7; }
.crm-visit-edit:hover { border-color: #38bdf8; }

/* ── ประวัติการแก้ไข (timeline ต่อรายการ) ── */
.hist { margin-top: 16px; border-top: 1px dashed #e2e8f0; padding-top: 14px; }
.hist__head { font-weight: 800; color: #334155; margin-bottom: 12px; }
.hist__item { position: relative; padding-left: 26px; padding-bottom: 16px; }
.hist__item::before { content: ""; position: absolute; left: 5px; top: 5px; bottom: -4px; width: 2px; background: #e2e8f0; }
.hist__item:last-child::before { display: none; }
.hist__dot { position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; border: 2px solid #fff; }
.hist__item:first-child .hist__dot { background: #0284c7; }
.hist__title { font-weight: 700; color: #0f172a; }
.hist__change { font-size: .9rem; color: #475569; margin-top: 2px; }
.hist__by { font-size: .78rem; color: #94a3b8; margin-top: 4px; }

/* ── การ์ดยอด token ในหน้าซื้อ ── */
.tok-balance { display: flex; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg,#eff6ff,#e0f2fe); border: 1px solid #bae6fd; border-radius: 16px; padding: 16px 20px; margin-bottom: 20px; }
.tok-balance--warn { background: linear-gradient(135deg,#fff7ed,#fef2f2); border-color: #fecaca; }
.tok-balance__item { display: flex; flex-direction: column; }
.tok-balance__item span { font-size: .8rem; color: #64748b; }
.tok-balance__item b { font-size: 1.6rem; font-weight: 800; color: #0369a1; }
.tok-balance--warn .tok-balance__item b { color: #b45309; }

/* ── หน้า login / register ── */
.auth { max-width: 420px; margin: 40px auto; padding: 0 16px; }
.auth__card { background: #fff; border: 1px solid var(--border, #e3ebf3); border-radius: 20px; padding: 28px 26px; box-shadow: 0 8px 30px rgba(15,40,82,.08); }
.auth__card h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 4px; color: var(--ink, #0f172a); }
.auth__hint { color: var(--muted, #64748b); font-size: .9rem; margin: 0 0 16px; }
.auth__err { background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; padding: 10px 12px; border-radius: 10px; font-size: .88rem; margin-bottom: 14px; }
.auth__form { display: flex; flex-direction: column; gap: 12px; }
.auth__form label { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; font-weight: 700; color: #475569; }
.auth__form input { padding: 11px 14px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 1rem; }
.auth__form input:focus { outline: none; border-color: #38bdf8; }
.auth__btn { margin-top: 4px; padding: 12px; border: none; border-radius: 12px; background: linear-gradient(135deg,#0ea5b7,#0891b2); color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer; }
.auth__btn:hover { filter: brightness(1.06); }
.auth__or { display: flex; align-items: center; text-align: center; color: #94a3b8; font-size: .85rem; margin: 18px 0; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
.auth__or span { padding: 0 12px; }
.auth .btn-fb { justify-content: center; width: 100%; }
.auth__alt { text-align: center; margin-top: 18px; font-size: .9rem; color: #64748b; }
.auth__alt a { color: var(--primary, #0284c7); font-weight: 700; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.auth__ok { background: #dcfce7; border: 1px solid #bbf7d0; color: #15803d; padding: 10px 12px; border-radius: 10px; font-size: .9rem; margin-bottom: 14px; }

/* ── ปุ่มลบลูกค้า (ชัดขึ้น) ── */
.crm-del-cust { margin-left: auto; background: #fee2e2; color: #be123c; border: 1px solid #fecaca; padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.crm-del-cust:hover { background: #fecaca; }

/* ── รูป CRM คลิกดูใหญ่ (gallery/lightbox) ── */
.crm-photo img, .crm-vp img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,12,20,.85); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__x { position: fixed; top: 16px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.3rem; cursor: pointer; }
.lightbox__x:hover { background: rgba(255,255,255,.28); }

/* ── รูปเครื่องแอร์ (ในแถวเครื่อง) ── */
.crm-unit { flex-direction: column; align-items: stretch; }
.crm-unit-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-photo.sm { width: 66px; height: 66px; }

/* ── สถานะ/จำนวน สินค้าในร้าน ── */
.prod__stat { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0; }
.prod__status { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.prod__status--available { background: #dcfce7; color: #15803d; }
.prod__status--outofstock { background: #fee2e2; color: #be123c; }
.prod__status--discontinued { background: #e2e8f0; color: #475569; }
.prod__stock { font-size: .78rem; color: #64748b; }

/* ── layout 2 คอลัมน์: เนื้อหาซ้าย / ประวัติขวา ── */
.crm-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 16px; align-items: start; }
.crm-main, .crm-side { min-width: 0; }
.crm-side .histlog { position: sticky; top: 16px; }
.crm-side .histlog__list { max-height: 72vh; overflow-y: auto; padding-right: 4px; }
@media (max-width: 900px) {
    .crm-layout { grid-template-columns: 1fr; }
    .crm-side .histlog { position: static; }
    .crm-side .histlog__list { max-height: none; }
}

/* ── ประวัติการสร้าง/แก้ไข (CRM timeline) ── */
.histlog__list { margin-top: 12px; }
.histlog__item { display: flex; gap: 12px; position: relative; padding: 0 0 16px 4px; }
.histlog__item::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: -2px; width: 2px; background: #e2e8f0; }
.histlog__item:last-child::before { display: none; }
.histlog__dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #94a3b8; margin-top: 3px; z-index: 1; box-shadow: 0 0 0 3px #fff; }
.histlog__item--create .histlog__dot { background: #2563eb; }
.histlog__item--delete .histlog__dot { background: #dc2626; }
.histlog__body { flex: 1; min-width: 0; }
.histlog__title { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.histlog__title span { font-weight: 700; color: #1e293b; }
.histlog__title time { font-size: .78rem; color: #94a3b8; white-space: nowrap; }
.histlog__change { font-size: .88rem; color: #475569; margin-top: 2px; }
.histlog__by { font-size: .78rem; color: #94a3b8; margin-top: 3px; }