/*
  Shared EPOS interface behaviour: loading states and notices. Kept separate from the colours and layout (Bootstrap and,
  later, the chosen design) so the look of the system can be changed without touching how it behaves.
*/

/* thin bar across the top of the page while any request is running */
#epos-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; background: var(--bs-primary); opacity: 0; transition: opacity .2s; pointer-events: none; }
#epos-progress.active { width: 85%; opacity: 1; transition: width 8s cubic-bezier(.1, .7, .2, 1), opacity .1s; }

/* the area being refreshed is dimmed and click-proof, but only if it takes longer than a moment (no flicker on quick scans) */
.epos-loading { position: relative; }
.epos-loading::after { content: ""; position: absolute; inset: 0; z-index: 50; cursor: progress; background: rgba(var(--bs-body-bg-rgb), .55); opacity: 0; animation: epos-dim .15s .35s forwards; }
@keyframes epos-dim { to { opacity: 1; } }

/* a form that is being sent */
form[aria-busy="true"] { cursor: progress; }

/* notices in the corner */
#epos-toasts { position: fixed; top: 56px; right: 16px; z-index: 3100; width: min(380px, calc(100vw - 32px)); }
.epos-toast { transition: opacity .3s; }
.epos-toast.leaving { opacity: 0; }

/* sales screen: category boxes and product tiles (colours come from the category, sizes from here) */
.epos-category-box { min-width: 120px; font-weight: 600; }
.epos-supplier-box { font-weight: 600; border-width: 2px; }
.epos-supplier-box img { height: 28px; max-width: 90px; object-fit: contain; }
.epos-supplier-box.is-selected { outline: 3px solid #0D6EFD; outline-offset: 2px; }
.epos-supplier-box.is-selected::before { content: '\2713'; font-weight: 700; }
.epos-tile { min-height: 76px; }

/* product pictures: a small square that opens in a lightbox */
.epos-thumb { display: inline-block; flex: none; border-radius: 4px; overflow: hidden; background: #fff; vertical-align: middle; cursor: zoom-in; }
.epos-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.epos-thumb-empty { border: 1px dashed var(--bs-border-color); cursor: default; }
#eposLightbox .modal-body { text-align: center; padding: 0; background: #fff; }
#eposLightbox img { max-width: 100%; max-height: 80vh; background: #fff; }
#eposLightbox .epos-lightbox-caption { padding: .5rem 1rem; font-size: .9rem; color: var(--bs-secondary-color); }

/* Blocks the screen while a bulk update is being applied (see data-busy in epos.js). */
.epos-busy { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(14, 19, 17, .72); outline: none; cursor: progress; }
.epos-busy-card { background: #fff; border-radius: 16px; padding: 28px 36px; text-align: center; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,.35); }

/* Searchable drop-downs (searchable-select.js): the real select is hidden, a button shows the choice, a panel lists them with a search box. */
.ss { position: relative; display: block; }
.ss-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; left: 0; bottom: 0; }
.ss-btn { text-align: left; cursor: pointer; display: block; width: 100%; }
.ss-btn .ss-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-placeholder { color: var(--bs-secondary-color, #6d7b74); }
.ss-panel { display: none; position: fixed; z-index: 3200; background: #fff; border: 1px solid var(--uc-line, #dbe3df); border-radius: .8rem; box-shadow: 0 16px 40px rgba(20, 40, 32, .2); padding: .5rem; max-width: min(520px, calc(100vw - 16px)); }
.ss.is-open .ss-panel { display: block; }
.ss-list { list-style: none; margin: .4rem 0 0; padding: 0; overflow-y: auto; }
.ss-item, .ss-group, .ss-none { padding: .35rem .6rem; border-radius: .5rem; font-size: .92rem; }
.ss-item { cursor: pointer; }
.ss-item.is-active { background: #e9f6f1; }
.ss-item.is-selected { font-weight: 600; color: var(--uc-green-2, #1d7f62); }
.ss-item.disabled { opacity: .5; cursor: default; }
.ss-empty { color: var(--bs-secondary-color, #6d7b74); }
.ss-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color, #6d7b74); padding-top: .6rem; }
.ss-none { color: var(--bs-secondary-color, #6d7b74); }