/* =====================================================================
   M-POS — өнгөний загвар (theme)
   Энэ файлыг устгавал хуучин харагдах байдал руугаа буцна.
   Загварыг дээд мөрний 🎨 товчоор сонгоно (компьютер бүр өөрийнхөө сонголтыг санана).
   ===================================================================== */

/* ---------- Загварын өнгөнүүд ---------- */
:root,
:root[data-theme="ocean"] {
    --a1: #4f46e5;          /* үндсэн өнгө */
    --a2: #0ea5e9;          /* хоёрдогч (градиент) */
    --a-dark: #3730a3;
    --a-soft: #eef2ff;      /* цайвар дэвсгэр */
    --a-soft2: #e0e7ff;
    --a-border: #c7d2fe;
    --a-text: #4338ca;
    --hdr1: #1e1b4b;        /* толгой хэсгийн градиент */
    --hdr2: #312e81;
    --nav: #272463;
    --page1: #eef2ff;       /* хуудасны дэвсгэр */
    --page2: #f0f9ff;
}
:root[data-theme="emerald"] {
    --a1: #059669; --a2: #14b8a6; --a-dark: #047857;
    --a-soft: #ecfdf5; --a-soft2: #d1fae5; --a-border: #a7f3d0; --a-text: #047857;
    --hdr1: #022c22; --hdr2: #064e3b; --nav: #053d2f;
    --page1: #ecfdf5; --page2: #f0fdfa;
}
:root[data-theme="violet"] {
    --a1: #7c3aed; --a2: #db2777; --a-dark: #6d28d9;
    --a-soft: #f5f3ff; --a-soft2: #ede9fe; --a-border: #ddd6fe; --a-text: #6d28d9;
    --hdr1: #2e1065; --hdr2: #4c1d95; --nav: #3b1677;
    --page1: #f5f3ff; --page2: #fdf2f8;
}
:root[data-theme="sunset"] {
    --a1: #ea580c; --a2: #e11d48; --a-dark: #c2410c;
    --a-soft: #fff7ed; --a-soft2: #ffedd5; --a-border: #fed7aa; --a-text: #c2410c;
    --hdr1: #431407; --hdr2: #7c2d12; --nav: #5c210b;
    --page1: #fff7ed; --page2: #fff1f2;
}
:root[data-theme="classic"] {
    --a1: #0284c7; --a2: #0284c7; --a-dark: #0369a1;
    --a-soft: #f0f9ff; --a-soft2: #e0f2fe; --a-border: #bae6fd; --a-text: #0369a1;
    --hdr1: #0f172a; --hdr2: #0f172a; --nav: #1e293b;
    --page1: #f1f5f9; --page2: #f1f5f9;
}

/* ---------- Ерөнхий ---------- */
body {
    background: linear-gradient(135deg, var(--page1) 0%, var(--page2) 100%) !important;
}
::-webkit-scrollbar-thumb { background: var(--a-border); }
::-webkit-scrollbar-thumb:hover { background: var(--a1); }
::-webkit-scrollbar-track { background: transparent; }

/* Толгой хэсэг */
body > header {
    background: linear-gradient(90deg, var(--hdr1) 0%, var(--hdr2) 100%) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
body > header .text-sky-400 { color: #fff !important; }
body > header .mpos-logo .text-white { color: #fff !important; }

/* Цэсний мөр */
body > nav {
    background: var(--nav) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    padding-top: 4px; padding-bottom: 4px;
    gap: 2px;
}
body > nav > button {
    border-radius: 8px !important;
    color: rgba(255, 255, 255, .78) !important;
    transition: background .15s, color .15s, transform .1s;
}
body > nav > button:hover { background: rgba(255, 255, 255, .09) !important; color: #fff !important; }
.active-tab {
    background: linear-gradient(135deg, var(--a1), var(--a2)) !important;
    color: #fff !important;
    border-bottom: none !important;
    box-shadow: 0 4px 14px -4px var(--a1);
}
.active-tab i { color: #fff !important; }

/* ---------- Карт, самбар ---------- */
main .bg-white.rounded-md,
main .bg-white.rounded-lg {
    border-radius: 14px !important;
    border-color: rgba(148, 163, 184, .22) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .18) !important;
}
/* Харанхуй гарчигтай самбар (сагс гэх мэт) ба цонхны гарчиг */
.bg-slate-800:not(button) {
    background: linear-gradient(90deg, var(--hdr1), var(--hdr2)) !important;
}
.bg-slate-900\/60 { background-color: rgba(15, 23, 42, .55) !important; }

/* Цонх (modal) */
.fixed.inset-0 > .bg-white.rounded-lg,
.fixed.inset-0 > form.bg-white.rounded-lg {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .45) !important;
}

/* Хүснэгтийн толгой */
main thead.bg-slate-100,
main thead .bg-slate-100,
.fixed thead.bg-slate-100 {
    background: var(--a-soft) !important;
    color: var(--a-text) !important;
}
main tbody tr:hover { background-color: var(--a-soft) !important; }

/* ---------- Өнгө солих (sky → загварын өнгө) ---------- */
.bg-sky-600, .bg-sky-500 {
    background: linear-gradient(135deg, var(--a1), var(--a2)) !important;
    border-color: transparent !important;
}
.bg-sky-600:hover, .hover\:bg-sky-700:hover { filter: brightness(1.08); }
button.bg-sky-600, label.bg-sky-600 { box-shadow: 0 4px 12px -4px var(--a1); }
.bg-sky-700 { background-color: var(--a-dark) !important; }
.bg-sky-50 { background-color: var(--a-soft) !important; }
.hover\:bg-sky-50:hover, .hover\:bg-sky-100:hover { background-color: var(--a-soft2) !important; }
.bg-sky-100 { background-color: var(--a-soft2) !important; }
.text-sky-600, .text-sky-700, .text-sky-800 { color: var(--a-text) !important; }
.border-sky-200, .border-sky-300 { border-color: var(--a-border) !important; }
.border-sky-400, .border-sky-500, .border-sky-600, .hover\:border-sky-400:hover { border-color: var(--a1) !important; }
.focus\:ring-sky-500:focus, .focus\:ring-2:focus { --tw-ring-color: color-mix(in srgb, var(--a1) 45%, transparent) !important; }
.focus\:border-sky-500:focus { border-color: var(--a1) !important; }
.toggle:checked { background: linear-gradient(135deg, var(--a1), var(--a2)) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--a1); }

/* Оролтын талбар */
main input[type="text"], main input[type="number"], main input[type="date"], main input:not([type]), main select,
.fixed input[type="text"], .fixed input[type="number"], .fixed input[type="password"], .fixed input:not([type]), .fixed select {
    border-radius: 8px !important;
    transition: border-color .15s, box-shadow .15s;
}
main input:focus, main select:focus, .fixed input:focus, .fixed select:focus {
    outline: none !important;
    border-color: var(--a1) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 18%, transparent) !important;
}

/* Товчнууд */
main button.rounded, .fixed button.rounded, main label.rounded { border-radius: 8px !important; }
main button, .fixed button { transition: filter .15s, transform .08s, background-color .15s; }
main button:active:not(:disabled), .fixed button:active:not(:disabled) { transform: translateY(1px); }
.bg-emerald-600 {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    box-shadow: 0 6px 16px -6px rgba(5, 150, 105, .7);
}
.bg-emerald-600:hover { filter: brightness(1.07); }
.bg-amber-500 {
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    box-shadow: 0 6px 16px -8px rgba(249, 115, 22, .8);
}
.bg-violet-600 { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; }
.bg-rose-600 { background: linear-gradient(135deg, #e11d48, #f43f5e) !important; }

/* ---------- Борлуулалт ---------- */
/* Барааны карт: бүлэг бүр өөр өнгийн зураастай */
#pos-products-grid .pos-grid-btn {
    --cat: var(--a1);
    position: relative;
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, .25) !important;
    border-radius: 12px !important;
    padding-top: 12px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
    transition: transform .12s, box-shadow .15s, border-color .15s;
}
#pos-products-grid .pos-grid-btn::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--cat);
}
#pos-products-grid .pos-grid-btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 9%, transparent) 0%, transparent 55%);
}
#pos-products-grid .pos-grid-btn:hover {
    transform: translateY(-2px);
    border-color: var(--cat) !important;
    box-shadow: 0 10px 22px -10px var(--cat) !important;
}
#pos-products-grid .pos-grid-btn .text-sky-700 { color: var(--cat) !important; filter: saturate(1.1) brightness(.85); }
#pos-products-grid .pos-grid-btn .cat-chip {
    display: inline-block; margin-top: 4px; padding: 0 6px; border-radius: 999px;
    font-size: 9px; font-weight: 600; line-height: 16px;
    color: var(--cat); background: color-mix(in srgb, var(--cat) 12%, #fff);
}

/* Бүлгийн самбар */
#category-sidebar {
    background: linear-gradient(180deg, var(--a-soft), #fff) !important;
    border-left-color: rgba(148, 163, 184, .2) !important;
    gap: 3px;
}
#category-sidebar .cat-btn {
    --cat: var(--a1);
    border-radius: 9px !important;
    position: relative;
    padding-left: 12px !important;
    transition: background .15s, color .15s;
}
#category-sidebar .cat-btn:not(.bg-sky-600)::before {
    content: ""; position: absolute; left: 4px; top: 50%; width: 4px; height: 60%;
    transform: translateY(-50%); border-radius: 4px; background: var(--cat); opacity: .85;
}
#category-sidebar .cat-btn:not(.bg-sky-600):hover { background: color-mix(in srgb, var(--cat) 12%, #fff) !important; }
#category-sidebar .cat-btn.bg-sky-600 {
    background: linear-gradient(135deg, var(--cat), color-mix(in srgb, var(--cat) 70%, #000)) !important;
    box-shadow: 0 6px 14px -6px var(--cat) !important;
}

/* Сагс */
#cart-grand-total {
    background: linear-gradient(90deg, var(--a1), var(--a2));
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
    font-size: 1.9rem !important; letter-spacing: -.5px;
}
#cart-table-body tr { transition: background .15s; }
#cart-table-body tr:nth-child(even) { background: rgba(148, 163, 184, .05); }
.cart-num { border-radius: 7px !important; }
.cart-num:focus { border-color: var(--a1) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent) !important; }

/* Сканнерын талбар илүү тод */
#pos-barcode-search {
    border: 2px solid var(--a-border) !important;
    background: #fff !important;
}
#pos-barcode-search:focus { border-color: var(--a1) !important; }

/* Мэдэгдэл (toast) */
#toast {
    background: linear-gradient(135deg, var(--hdr2), var(--a1)) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45) !important;
}

/* Нэвтрэх дэлгэц */
#login-screen {
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--a2) 45%, transparent), transparent 45%),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--a1) 55%, transparent), transparent 50%),
        linear-gradient(135deg, var(--hdr1), var(--hdr2)) !important;
}
#login-screen form { border-radius: 18px !important; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6) !important; }

/* ---------- Загвар сонгох цэс ---------- */
#theme-picker {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    background: #fff; color: #334155; border-radius: 12px; padding: 10px;
    box-shadow: 0 18px 40px -10px rgba(15, 23, 42, .4); width: 210px;
}
#theme-picker .tp-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 7px 8px; border-radius: 8px; font-weight: 600; font-size: 12px; text-align: left;
}
#theme-picker .tp-item:hover { background: #f1f5f9; }
#theme-picker .tp-item.on { background: #f1f5f9; outline: 2px solid #cbd5e1; }
#theme-picker .tp-sw { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }

/* ---------- M-POS лого: "M" цэнхэр ---------- */
.mpos-m { color: #2f80ed !important; -webkit-text-fill-color: #2f80ed; background: none !important; }
body > header .mpos-m, #login-screen .mpos-m, .bg-slate-800 .mpos-m { color: #4da3ff !important; -webkit-text-fill-color: #4da3ff; }