/* What every screen shares, on top of the wms-app theme (assets/vendor/theme/main.css).
   Poppins has no Thai glyphs, so Sarabun (local woff2, thai + latin) follows it. */
@font-face { font-family: Sarabun; font-weight: 400; font-display: swap; src: url("../vendor/fonts/sarabun/sarabun-400-thai.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 400; font-display: swap; src: url("../vendor/fonts/sarabun/sarabun-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: Sarabun; font-weight: 500; font-display: swap; src: url("../vendor/fonts/sarabun/sarabun-500-thai.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 500; font-display: swap; src: url("../vendor/fonts/sarabun/sarabun-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: Sarabun; font-weight: 700; font-display: swap; src: url("../vendor/fonts/sarabun/sarabun-700-thai.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 700; font-display: swap; src: url("../vendor/fonts/sarabun/sarabun-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }

body { font-family: Poppins, Sarabun, sans-serif; }

/* Until the shell is in, show nothing half-drawn. */
body.lg-boot { visibility: hidden; }

/* A control the caller may not use: visible, dimmed, with a hint on hover. */
.lg-locked { opacity: .55; cursor: not-allowed; }

.lg-sortable { cursor: pointer; user-select: none; }
.lg-sortable[aria-sort="ascending"]::after { content: " ▲"; font-size: .7em; }
.lg-sortable[aria-sort="descending"]::after { content: " ▼"; font-size: .7em; }

.lg-company-dialog { max-width: 360px; }
.lg-company-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; color: var(--bs-body-color); border-bottom: 1px solid var(--bs-border-color); }
.lg-company-row:last-child { border-bottom: 0; }
.lg-company-row:hover, .lg-company-row.active { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.lg-company-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.lg-user-menu { min-width: 260px; }
.lg-logo-img { flex: none; }
.lg-settings-menu { min-width: 220px; }
.lg-settings-menu .ti { font-size: 1.1rem; }
.lg-settings-menu .dropdown-header { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; padding: .25rem .5rem; }
.lg-toasts { z-index: 1090; }

/* The notice shown when the session ended while a screen was open. */
.lg-ended { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 1100; min-width: 300px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }

/* Signed-out screens. */
.lg-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: #f4f5f7; }
.lg-auth .card { width: 100%; max-width: 420px; }

/* The letter screens' PDF print-template choice. */
.print-template {
    width: auto;
    max-width: 18rem;
}

/* Autocomplete dropdown (lg-ui suggest / picker): right under the input, the input's width */
.lg-ac-wrap { position: relative; }
.lg-ac { position: absolute; left: 0; right: 0; top: 100%; z-index: 1060; margin: .125rem 0 0; padding: .25rem 0; list-style: none;
    max-height: 280px; overflow-y: auto; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.lg-ac[hidden] { display: none; }
.lg-ac-item { display: flex; align-items: baseline; gap: .5rem; padding: .375rem .75rem; cursor: pointer; }
.lg-ac-item.active, .lg-ac-item:hover { background: var(--bs-tertiary-bg, #f1f3f5); }
.lg-ac-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lg-ac-sub { flex: 0 0 auto; color: var(--bs-secondary-color, #6c757d); font-size: .8125rem; }
.lg-ac-badge { flex: 0 0 auto; font-weight: 500; }
.lg-ac-empty { padding: .375rem .75rem; color: var(--bs-secondary-color, #6c757d); }

/* the ? button in the top bar (assets/js/shell.js shows it; the dot says this screen's tour is new) */
.lg-help-btn { position: relative; }
.lg-help-btn[hidden] { display: none; }
.lg-help-btn[aria-expanded="true"] { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.lg-help-dot { position: absolute; top: .375rem; right: .375rem; width: .5rem; height: .5rem; border-radius: 999px; background: #dc2626; }
.lg-help-dot[hidden] { display: none; }

/* lgUi.choices: a pick-any list as a selector (the button names the ticked items, the menu holds the checkboxes). */
.lg-choices-menu { min-width: 12rem; max-height: 16rem; overflow-y: auto; }
.lg-choices-menu .form-check { margin-bottom: 0; padding: 4px 4px 4px 2rem; }