/*
 * POS screen: parts that carry fixed colours in the app (date pill, Recent Transactions button,
 * plus icons, coloured action icons) follow the active theme (Cyber / Soft, light / dark).
 */
html[data-style="soft"] { --pos-btn-bg: var(--cy-nav); --pos-btn-ink: #ffffff; }
html[data-style="soft"][data-theme="dark"] { --pos-btn-bg: var(--cy-accent); --pos-btn-ink: var(--cy-accent-ink); }
html[data-style="cyber"] { --pos-btn-bg: var(--cy-accent); --pos-btn-ink: var(--cy-accent-ink); }
html[data-theme="light"] { --cy-accent-text: color-mix(in srgb, var(--cy-accent) 46%, #000); }
html[data-theme="dark"] { --cy-accent-text: var(--cy-accent); }

/* Date pill in the header and the "Recent Transactions" button */
body.lockscreen .tw-bg-\[\#646EE4\] {
    background: var(--pos-btn-bg) !important; color: var(--pos-btn-ink) !important; border-radius: 999px !important; box-shadow: none !important;
}
body.lockscreen .tw-bg-\[\#646EE4\] * { color: inherit !important; }
body.lockscreen .hover\:tw-bg-\[\#414aac\]:hover { filter: brightness(1.12); }
body.lockscreen button#recent-transactions { font-weight: 500; }

/* Plus / customer-add icons */
body.lockscreen .text-primary, body.lockscreen i.fa-plus-circle { color: var(--cy-accent-text) !important; }

/* Header tool icons and the bottom action icons: calm, one colour; accent on hover */
body.lockscreen .pos-header button svg, body.lockscreen .pos-header button i, body.lockscreen .pos-header a svg, body.lockscreen .pos-header a i { color: var(--cy-muted) !important; transition: color .15s; }
body.lockscreen .pos-header button:hover svg, body.lockscreen .pos-header button:hover i, body.lockscreen .pos-header a:hover svg, body.lockscreen .pos-header a:hover i { color: var(--cy-text) !important; }
body.lockscreen .pos-form-actions i[class*="tw-text-["], body.lockscreen .pos-form-actions svg[class*="tw-text-["] { color: var(--cy-muted) !important; transition: color .15s; }
body.lockscreen .pos-form-actions button:hover i[class*="tw-text-["], body.lockscreen .pos-form-actions button:hover svg[class*="tw-text-["] { color: var(--cy-accent-text) !important; }
body.lockscreen .pos-form-actions button.tw-font-bold { font-weight: 500; }

/* Bottom bar: a floating rounded tray instead of a flat strip */
html[data-style="soft"] body.lockscreen .pos-form-actions { border-radius: 24px 24px 0 0 !important; box-shadow: 0 -8px 30px rgba(23, 23, 40, .08) !important; }

/* Product names in the cart and other link-coloured text */
body.lockscreen .text-link, body.lockscreen #pos_table a:not(.btn), body.lockscreen .pos_table a:not(.btn) { color: var(--cy-accent-text) !important; }
body.lockscreen .text-info, body.lockscreen .fa-info-circle { color: var(--cy-accent-text) !important; }

/* Payment pop-up: the totals panel is an AdminLTE colour box (bg-orange); the card rules had turned it white
   under white text. It becomes the theme's dark panel. */
.box.bg-orange, .box.box-solid.bg-orange { background: var(--cy-nav) !important; color: #fff !important; }
.box.bg-orange *, .box.box-solid.bg-orange * { color: #fff !important; }
.box.bg-orange hr { border-color: rgba(255, 255, 255, .15) !important; }

/* "slate" greys used by the POS tiles, filters and headings follow the theme like the "gray" ones do */
.tw-text-slate-900, .tw-text-slate-800, .tw-text-slate-700, .tw-text-slate-950 { color: var(--cy-text) !important; }
.tw-text-slate-600, .tw-text-slate-500, .tw-text-slate-400 { color: var(--cy-muted) !important; }
.tw-bg-slate-50, .tw-bg-slate-100 { background-color: var(--cy-surface-2) !important; }
.tw-border-slate-100, .tw-border-slate-200, .tw-border-slate-300 { border-color: var(--cy-border) !important; }

/* ---------- Contrast fixes found by the audit ---------- */
body.lockscreen h4.pos-card-name, body.lockscreen .pos-card-name { color: var(--cy-text) !important; }
body.lockscreen .pos-count-badge { color: var(--cy-text) !important; background: var(--cy-lilac, var(--cy-surface-2)) !important; border-color: transparent !important; }
/* out-of-stock tiles stay dimmed but readable */
body.lockscreen .product_box[class*="opacity"] { opacity: 1 !important; }
body.lockscreen .product_box[class*="opacity"] img { opacity: .45; filter: grayscale(.6); }
body.lockscreen .product_box small.text-muted, body.lockscreen .product_box .text-muted { color: var(--cy-muted) !important; }
body.lockscreen .pos_totals_right_label { color: var(--cy-text) !important; opacity: .78; }
/* hard-coded greys written as arbitrary Tailwind values */
.tw-text-\[\#64748b\], .tw-text-\[\#6b7280\], .tw-text-\[\#475569\], .tw-text-\[\#94a3b8\], .tw-text-\[\#9ca3af\] { color: var(--cy-muted) !important; }
.tw-text-\[\#334155\], .tw-text-\[\#1e293b\], .tw-text-\[\#0f172a\], .tw-text-\[\#111827\], .tw-text-\[\#1f2937\] { color: var(--cy-text) !important; }
body.lockscreen td.serial_no, body.lockscreen .pos-unit-label, .serial_no { color: var(--cy-muted) !important; }
/* Cyber: the blue "info" button gets a darker blue so white text reads (Soft keeps its lilac style) */
html[data-style="cyber"] .btn-info { background-color: #2f63cf !important; border-color: #2f63cf !important; color: #fff !important; }
html[data-style="cyber"] .btn-info:hover { background-color: #254fa8 !important; }

/* ---------- IMEI / Serial button (under the product title on every screen) ---------- */
.cy-serial-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%;
    min-height: 34px; margin-top: 8px; padding: 7px 11px; border-radius: var(--cy-radius-sm, 10px); flex-wrap: wrap; row-gap: 0;
    border: 1px solid var(--cy-border); background: var(--cy-surface-2); color: var(--cy-text);
    font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: center; transition: background .15s, border-color .15s, color .15s;
}
.cy-serial-btn .cy-serial-label, .cy-serial-btn .serial_badge { white-space: nowrap; }
.cy-serial-btn:hover { border-color: currentColor; }
.cy-serial-btn .fa { font-size: 13px; }
.cy-serial-btn.is-idle { color: var(--cy-muted); }
.cy-serial-btn.is-empty { color: var(--cy-red-t); background: color-mix(in srgb, var(--cy-red-t) 10%, transparent); border-color: color-mix(in srgb, var(--cy-red-t) 45%, transparent); }
.cy-serial-btn.is-partial { color: var(--cy-orange-t); background: color-mix(in srgb, var(--cy-orange-t) 10%, transparent); border-color: color-mix(in srgb, var(--cy-orange-t) 45%, transparent); }
.cy-serial-btn.is-done { color: var(--cy-green-t); background: color-mix(in srgb, var(--cy-green-t) 10%, transparent); border-color: color-mix(in srgb, var(--cy-green-t) 45%, transparent); }
a.quick-edit-product { border-bottom: 0; }
a.quick-edit-product::after { content: "\270E"; margin-left: 6px; font-size: .8em; opacity: 0; transition: opacity .15s; }
a.quick-edit-product:hover::after { opacity: .7; }