/* Logistics pages: one look for Tools, Packing Lists and Client Property (owner 08-10-2026: "very dull and empty ... messy UI").
   ESKIMO colours (skill eskimo-document, brand.json): teal #0EA8C0, dark #0B6478, tint #E3F4F8, amber #BF8F00. */
:root {
    --ew-teal: #0EA8C0; --ew-dark: #0B6478; --ew-deep: #07485a; --ew-tint: #E3F4F8; --ew-tint2: #f1fafc;
    --ew-ink: #0f1f2a; --ew-text: #334155; --ew-muted: #64748b; --ew-line: #e2e8f0; --ew-soft: #f8fafc; --ew-bg: #eef3f6;
    --ew-shadow: 0 1px 2px rgba(15, 31, 42, .05), 0 8px 24px rgba(15, 31, 42, .06);
}
body.lg { background: var(--ew-bg); color: var(--ew-text); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
.lg h1, .lg h2, .lg h3, .lg b, .lg strong { color: var(--ew-ink); }
.lg a { color: var(--ew-dark); }
.lg .wrap { max-width: 1260px; margin: 0 auto; padding: 0 24px; }
.lg.wide .wrap { max-width: 1580px; }

/* ---------- the header band ---------- */
.lg-top { background: radial-gradient(900px 260px at 88% -30%, rgba(255, 255, 255, .20), transparent 65%), linear-gradient(118deg, #07485a 0%, #0B6478 42%, #0E98B0 100%);
          color: #fff; padding: 14px 0 70px; }
.lg-top a { color: #fff; }
.lg-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font-size: 13px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lg-logo { display: inline-flex; align-items: center; padding-right: 18px; margin-right: 4px; border-right: 1px solid rgba(255, 255, 255, .22); }
.lg-logo img { height: 52px; width: auto; display: block; }
.lg-crumb { color: rgba(255, 255, 255, .7); display: flex; gap: 8px; align-items: center; }
.lg-crumb a { color: rgba(255, 255, 255, .78); text-decoration: none; } .lg-crumb a:hover { color: #fff; }
.lg-user { margin-left: auto; color: rgba(255, 255, 255, .75); }
.lg-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.lg-head .ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .22); display: grid; place-items: center; font-size: 25px; flex: none; }
.lg-head h1 { color: #fff; font-size: 27px; font-weight: 700; letter-spacing: -.015em; margin: 0; line-height: 1.2; }
.lg-head h1 small { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .65); margin-left: 8px; letter-spacing: .02em; }
.lg-head p { margin: 4px 0 0; color: rgba(255, 255, 255, .8); font-size: 14px; max-width: 720px; }
.lg-head .act { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lg-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px;
           padding: 5px 13px; font-size: 13px; color: #fff !important; text-decoration: none; white-space: nowrap; transition: background .15s; }
a.lg-chip:hover { background: rgba(255, 255, 255, .24); }
.lg-chip b { color: #fff; font-weight: 700; font-size: 14px; }
.lg-chip.warn { background: #fff4d6; border-color: #fff4d6; color: #7a5300 !important; } .lg-chip.warn b { color: #7a5300; }
.lg-chip.bad { background: #ffe1df; border-color: #ffe1df; color: #a01717 !important; } .lg-chip.bad b { color: #a01717; }
.btn-glass { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; border-radius: 10px; font-weight: 600; padding: 8px 14px; }
.btn-glass:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.btn-white { background: #fff; color: var(--ew-dark) !important; border: 0; border-radius: 10px; font-weight: 700; padding: 9px 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.btn-white:hover { background: var(--ew-tint); }

/* ---------- content sits over the band ---------- */
.lg-main { margin-top: -48px; padding-bottom: 110px; }
.lg-tabs { background: #fff; border-radius: 16px; box-shadow: var(--ew-shadow); padding: 6px; display: flex; gap: 4px; overflow-x: auto; margin-bottom: 18px; }
.lg-tabs a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 11px; color: var(--ew-muted);
             font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.lg-tabs a:hover { background: var(--ew-soft); color: var(--ew-ink); }
.lg-tabs a.on { background: var(--ew-dark); color: #fff; box-shadow: 0 4px 12px rgba(11, 100, 120, .3); }
.lg-tabs a i { font-size: 17px; }
.lg-tabs .n { background: #eef2f6; color: var(--ew-text); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.lg-tabs a.on .n { background: rgba(255, 255, 255, .22); color: #fff; }
.lg-tabs .n.bad { background: #fee2e2; color: #b91c1c; }

/* ---------- cards ---------- */
.lg-card { background: #fff; border: 1px solid #e6ecf1; border-radius: 16px; box-shadow: var(--ew-shadow); margin-bottom: 18px; }
.lg-card > .hd { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid #edf1f5; flex-wrap: wrap; }
.lg-card > .hd > div:not(.lg-step):not(.tools) { flex: 1 1 260px; min-width: 0; }   /* a long hint wraps inside, the step number stays beside the title */
.lg-card > .hd h2 { font-size: 16.5px; font-weight: 700; margin: 0; letter-spacing: -.005em; }
.lg-card > .hd .hint { color: var(--ew-muted); font-size: 13px; margin-top: 1px; }
.lg-card > .hd .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-card > .bd { padding: 20px 22px; }
.lg-card > .bd.flush { padding: 0; }
.lg-step { width: 32px; height: 32px; border-radius: 10px; background: var(--ew-tint); color: var(--ew-dark); font-weight: 700; display: grid; place-items: center; font-size: 14px; flex: none; }
.lg-step.ic { font-size: 16px; }

/* ---------- form fields ---------- */
.lg-label { display: block; font-size: 12.5px; font-weight: 600; color: #3b4a5a; margin-bottom: 6px; }
.lg-label .opt { font-weight: 500; color: #94a3b8; }
.lg-label .req { color: #dc2626; }
.lg-help { font-size: 12.5px; color: var(--ew-muted); margin-top: 5px; }
.lg .form-control, .lg .form-select { border-radius: 10px; border-color: #d4dde6; padding: .55rem .8rem; color: var(--ew-ink); }
.lg .form-control-sm, .lg .form-select-sm { border-radius: 8px; padding: .32rem .6rem; }
.lg .form-control:focus, .lg .form-select:focus { border-color: var(--ew-teal); box-shadow: 0 0 0 3px rgba(14, 168, 192, .18); }
.lg .form-control::placeholder { color: #a0aec0; }
.lg .up { text-transform: uppercase; } .lg .up::placeholder { text-transform: none; }
.lg-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.lg-quick button { border: 1px solid #d4dde6; background: #fff; border-radius: 999px; font-size: 12px; padding: 2px 11px; color: var(--ew-text); }
.lg-quick button:hover { border-color: var(--ew-teal); color: var(--ew-dark); background: var(--ew-tint2); }

/* choice tiles (big radio buttons) */
.lg-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.lg-choice > div { position: relative; }
.lg-choice input { position: absolute; opacity: 0; pointer-events: none; }
.lg-choice label { display: flex; gap: 13px; align-items: center; border: 1.5px solid #dbe3ea; border-radius: 13px; padding: 13px 15px; cursor: pointer; background: #fff; height: 100%; transition: all .15s; }
.lg-choice label:hover { border-color: #9fd6e2; }
.lg-choice label .ic { width: 40px; height: 40px; border-radius: 11px; background: #f1f5f9; display: grid; place-items: center; font-size: 19px; color: var(--ew-muted); flex: none; transition: all .15s; }
.lg-choice label b { display: block; font-size: 14.5px; }
.lg-choice label span { color: var(--ew-muted); font-size: 12.5px; line-height: 1.35; display: block; }
.lg-choice input:checked + label { border-color: var(--ew-teal); background: var(--ew-tint2); box-shadow: 0 0 0 3px rgba(14, 168, 192, .14); }
.lg-choice input:checked + label .ic { background: var(--ew-dark); color: #fff; }
.lg-choice input:focus-visible + label { outline: 2px solid var(--ew-teal); outline-offset: 2px; }

/* pill choices (small radio buttons) */
.lg-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.lg-pills input { position: absolute; opacity: 0; pointer-events: none; }
.lg-pills label { border: 1.5px solid #dbe3ea; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; color: var(--ew-text); transition: all .15s; }
.lg-pills label:hover { border-color: #9fd6e2; }
.lg-pills input:checked + label { background: var(--ew-dark); border-color: var(--ew-dark); color: #fff; }
.lg-pills.cond input:checked + label.good { background: #15803d; border-color: #15803d; }
.lg-pills.cond input:checked + label.warn { background: #d97706; border-color: #d97706; }
.lg-pills.cond input:checked + label.bad { background: #dc2626; border-color: #dc2626; }
.lg-pills.cond input:checked + label.dark { background: #334155; border-color: #334155; }
.lg-pills.sm label { padding: 4px 11px; font-size: 12.5px; }

/* the packing-list switch */
.lg-toggle { display: flex; gap: 14px; align-items: center; border: 1.5px dashed #a9d9e4; background: var(--ew-tint2); border-radius: 13px; padding: 14px 16px; cursor: pointer; transition: all .15s; }
.lg-toggle.on { border-style: solid; border-color: var(--ew-teal); background: #e9f7fa; }
.lg-toggle .ic { width: 40px; height: 40px; border-radius: 11px; background: #fff; color: var(--ew-dark); display: grid; place-items: center; font-size: 19px; flex: none; }
.lg-toggle.on .ic { background: var(--ew-dark); color: #fff; }
.lg-toggle b { display: block; font-size: 14.5px; }
.lg-toggle span { color: var(--ew-muted); font-size: 12.5px; }
.lg-toggle .form-switch { margin-left: auto; padding-left: 0; }
.lg-toggle .form-check-input { width: 3em; height: 1.6em; margin: 0; cursor: pointer; float: none; }
.lg-toggle .form-check-input:checked { background-color: var(--ew-dark); border-color: var(--ew-dark); }
.lg-sub { border-left: 3px solid var(--ew-teal); padding: 4px 0 4px 18px; margin: 16px 0 4px 18px; }

/* scan box */
.lg-scan { position: relative; }
.lg-scan > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 23px; color: var(--ew-teal); pointer-events: none; z-index: 2; }
.lg-scan input { padding-left: 56px !important; height: 60px; font-size: 18px; border-radius: 14px !important; border: 2px solid #cbe6ed !important; background: #fbfeff; }
.lg-scan input:focus { border-color: var(--ew-teal) !important; background: #fff; }
.lg-scan .cam { position: absolute; right: 8px; top: 8px; bottom: 8px; border-radius: 10px; width: 48px; z-index: 2; }
.lg-sugg { position: absolute; left: 0; right: 0; top: 64px; z-index: 40; background: #fff; border: 1px solid var(--ew-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 31, 42, .16); max-height: 360px; overflow-y: auto; padding: 6px; }
.lg-sugg button { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; }
.lg-sugg button:hover, .lg-sugg button.active { background: var(--ew-tint2); }
.lg-sugg .none { padding: 10px; color: var(--ew-muted); font-size: 13px; }

/* a scanned tool */
.lg-items { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lg-item { border: 1px solid #e3e9ef; border-radius: 13px; padding: 13px 15px; background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; animation: lgIn .25s ease; }
.lg-item.bad { border-color: #fbc4c4; background: #fff8f8; }
.lg-item .nm { font-weight: 600; color: var(--ew-ink); font-size: 14.5px; }
.lg-item .meta { color: var(--ew-muted); font-size: 12.5px; margin-top: 2px; }
.lg-item .why { color: #b91c1c; font-weight: 600; font-size: 13px; margin-top: 3px; }
.lg-item .more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 22px; border-top: 1px dashed #e3e9ef; padding-top: 9px; margin-top: 3px; }
.lg-item .more .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; margin-bottom: 3px; }
.lg-item .more .specs { white-space: pre-line; font-size: 12.5px; }
.lg-item .more ol { margin: 0; padding-left: 18px; font-size: 12.5px; }
.lg-item .ret { grid-column: 1 / -1; }
@keyframes lgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- tables ---------- */
.lg .table.lg-table { margin: 0; --bs-table-bg: transparent; }
.lg-table > thead th { background: var(--ew-soft); color: #6b7a8c; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--ew-line) !important;
                       padding: 10px 14px; white-space: nowrap; }
.lg-table > tbody td { padding: 12px 14px; border-bottom: 1px solid #eef2f6; vertical-align: middle; font-size: 13.5px; color: var(--ew-text); }
.lg-table > tbody tr:last-child td { border-bottom: 0; }
.lg-table.hover > tbody tr:hover td { background: #f9fcfd; }
.lg-table tr.sec td { background: var(--ew-tint); color: var(--ew-dark); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 14px; }
.lg-table tr.late td:first-child { box-shadow: inset 4px 0 0 #ef4444; }
.lg-table .sub { color: var(--ew-muted); font-size: 12.5px; }
.lg-table td.num { font-variant-numeric: tabular-nums; }
.lg-scroll { max-height: 620px; overflow: auto; }
.lg-scroll thead th { position: sticky; top: 0; z-index: 2; }

/* ---------- small things ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.pill.ok { background: #dcfce7; color: #166534; } .pill.warn { background: #fef3c7; color: #92400e; } .pill.bad { background: #fee2e2; color: #991b1b; }
.pill.info { background: #e0f2fe; color: #075985; } .pill.mute { background: #f1f5f9; color: #475569; } .pill.teal { background: var(--ew-tint); color: var(--ew-dark); }
.pill.dark { background: #334155; color: #fff; } .pill.plain::before { display: none; }
.tag { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; background: #f1f5f9; color: var(--ew-ink); border-radius: 6px; padding: 2px 7px; white-space: nowrap; border: 1px solid #e5eaf0; }
.lg-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 26px; }
.lg-facts .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #8a99aa; font-weight: 700; }
.lg-facts .v { font-weight: 600; color: var(--ew-ink); margin-top: 3px; }
.lg-facts .v .sub { font-weight: 400; color: var(--ew-muted); font-size: 12.5px; display: block; }
.lg-prog { height: 7px; background: #e5ebf1; border-radius: 99px; overflow: hidden; min-width: 90px; }
.lg-prog > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ew-teal), var(--ew-dark)); border-radius: 99px; }
.lg-empty { text-align: center; color: var(--ew-muted); padding: 44px 16px; }
.lg-empty > i.bi { font-size: 38px; display: block; margin-bottom: 10px; color: #b4c3d1; }
.lg-empty > b { display: block; color: var(--ew-ink); font-size: 15px; margin-bottom: 3px; }
.lg-note { display: flex; gap: 10px; align-items: flex-start; background: var(--ew-tint2); border: 1px solid #d3edf3; color: #24515d; border-radius: 12px; padding: 11px 14px; font-size: 13px; }
.lg-note i { color: var(--ew-teal); font-size: 16px; }
.lg-flash { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; box-shadow: var(--ew-shadow); background: #fff; border-left: 5px solid #16a34a; }
.lg-flash.bad { border-left-color: #dc2626; } .lg-flash > i { font-size: 22px; color: #16a34a; } .lg-flash.bad > i { color: #dc2626; }
.lg-flash b { color: var(--ew-ink); } .lg-flash .small { color: var(--ew-muted); }
.lg-log { list-style: none; margin: 0; padding: 0; }
.lg-log li { position: relative; padding: 0 0 16px 30px; }
.lg-log li::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: -4px; width: 2px; background: #e5ebf1; }
.lg-log li:last-child::before { display: none; }
.lg-log li > i { position: absolute; left: 1px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ew-teal); }
.lg-log .when { font-size: 12px; color: var(--ew-muted); }
.lg-log .what { font-weight: 600; color: var(--ew-ink); }
.btn-ew { background: var(--ew-dark); border-color: var(--ew-dark); color: #fff; font-weight: 600; border-radius: 10px; }
.btn-ew:hover, .btn-ew:focus { background: var(--ew-deep); border-color: var(--ew-deep); color: #fff; }
.btn-ew-soft { background: var(--ew-tint); color: var(--ew-dark); border: 0; font-weight: 600; border-radius: 10px; }
.btn-ew-soft:hover { background: #cdeaf1; color: var(--ew-deep); }
.lg .btn-light { border: 1px solid var(--ew-line); background: #fff; border-radius: 10px; font-weight: 600; color: var(--ew-text); }
.lg .btn-light:hover { background: var(--ew-soft); }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--ew-line); background: #fff; color: var(--ew-muted); padding: 0; }
.icon-btn:hover { color: var(--ew-dark); border-color: #9fd6e2; background: var(--ew-tint2); }

/* the floating save bar */
.lg-save { position: sticky; bottom: 14px; z-index: 30; display: flex; align-items: center; gap: 16px; background: rgba(12, 28, 38, .95); color: #fff; border-radius: 16px;
           padding: 12px 12px 12px 22px; box-shadow: 0 14px 34px rgba(12, 28, 38, .28); margin-top: 6px; backdrop-filter: blur(6px); }
.lg-save .sum { flex: 1; font-size: 13.5px; color: rgba(255, 255, 255, .78); line-height: 1.45; min-width: 0; }
.lg-save .sum b { color: #fff; }
.lg-save .btn { padding: 11px 24px; font-weight: 700; border-radius: 11px; font-size: 15px; white-space: nowrap; }
.lg-save .btn-go { background: var(--ew-teal); border: 0; color: #fff; } .lg-save .btn-go:hover { background: #0c97ad; color: #fff; }
.lg-save .btn-go:disabled { background: #3b4f5c; color: rgba(255, 255, 255, .5); }
.lg-save .btn-go.in { background: #16a34a; } .lg-save .btn-go.in:hover { background: #12873d; }

/* select2 in the same style */
.lg .select2-container--bootstrap-5 .select2-selection { border-radius: 10px; border-color: #d4dde6; min-height: 40px; padding-top: .45rem; }
.lg .select2-container--bootstrap-5.select2-container--focus .select2-selection, .lg .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--ew-teal); box-shadow: 0 0 0 3px rgba(14, 168, 192, .18); }
.select2-container--bootstrap-5 .select2-dropdown { border-color: #cfe1e8; border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 31, 42, .14); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background: var(--ew-tint); color: var(--ew-ink); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected { background: var(--ew-dark); color: #fff; }
.s2-opt { display: flex; flex-direction: column; line-height: 1.3; } .s2-opt small { color: #8394a7; }
.select2-results__option--selected .s2-opt small, .select2-results__option--highlighted .s2-opt small { color: inherit; opacity: .75; }

@media (max-width: 768px) {
    .lg .wrap { padding: 0 14px; }
    .lg-head h1 { font-size: 22px; } .lg-head .act { margin-left: 0; width: 100%; }
    .lg-card > .bd { padding: 16px; } .lg-card > .hd { padding: 14px 16px; }
    .lg-save { flex-wrap: wrap; } .lg-save .btn { width: 100%; }
}
@media print { .lg-top, .lg-tabs, .lg-save { display: none !important; } .lg-main { margin-top: 0; } }
/* links styled as buttons keep the button's own text colour (".lg a" would turn them teal) */
.lg a.btn-ew, .lg a.btn-ew:hover { color: #fff; }
.lg a.btn-ew-soft { color: var(--ew-dark); } .lg a.btn-ew-soft:hover { color: var(--ew-deep); }
.lg a.btn-light { color: var(--ew-text); }
.lg a.btn-glass, .lg .lg-save .btn-glass { color: #fff; }
.lg a.icon-btn { color: var(--ew-muted); } .lg a.icon-btn:hover { color: var(--ew-dark); }

/* ---------- dashboard tiles ---------- */
.lg-sec { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #7b8a9b; margin: 8px 0 12px; }
.lg-sec i { color: var(--ew-teal); font-size: 14px; }
.lg-sec::after { content: ''; flex: 1; height: 1px; background: #d8e1e8; }
.lg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; margin-bottom: 30px; }
.lg-tile { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid #e6ecf1; border-radius: 16px; padding: 18px 18px 16px;
           box-shadow: var(--ew-shadow); text-decoration: none; color: var(--ew-text) !important; transition: transform .15s, box-shadow .15s, border-color .15s; }
.lg-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15, 31, 42, .13); border-color: #bfe3eb; }
.lg-tile .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--ew-tint); color: var(--ew-dark); display: grid; place-items: center; font-size: 22px; }
.lg-tile.amber .ic { background: #fff3d6; color: #8a6200; } .lg-tile.slate .ic { background: #eef2f6; color: #475569; }
.lg-tile h3 { font-size: 15.5px; font-weight: 700; margin: 0; color: var(--ew-ink); }
.lg-tile p { font-size: 13px; color: var(--ew-muted); margin: 0; line-height: 1.45; flex: 1; }
.lg-tile .go { position: absolute; top: 20px; right: 18px; color: #b4c3d1; font-size: 18px; transition: transform .15s, color .15s; }
.lg-tile:hover .go { color: var(--ew-teal); transform: translateX(3px); }
.lg-tile .pills { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }

/* ---------- older pages: plain Bootstrap parts take the same look ---------- */
.lg .card { border: 1px solid #e6ecf1; border-radius: 16px; box-shadow: var(--ew-shadow); }
.lg .card-header { background: #fff; border-bottom: 1px solid #edf1f5; padding: 14px 20px; font-weight: 700; color: var(--ew-ink); }
.lg .card-header:first-child { border-radius: 16px 16px 0 0; }
.lg .card-footer { background: #fff; border-top: 1px solid #edf1f5; border-radius: 0 0 16px 16px; }
.lg .table > thead > tr > th, .lg .table > thead.table-dark > tr > th, .lg .table > thead.table-light > tr > th, .lg .table > thead.table-secondary > tr > th {
    background: var(--ew-soft); color: #6b7a8c; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-color: var(--ew-line); white-space: nowrap; vertical-align: middle; }
.lg .table > tbody > tr > td { color: var(--ew-text); border-color: #eef2f6; vertical-align: middle; }
.lg .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: #f6fbfc; }
.lg .table-bordered > :not(caption) > * > * { border-color: #e6ecf1; }
.lg .btn { border-radius: 10px; font-weight: 600; } .lg .btn-sm { border-radius: 8px; } .lg .btn-lg { border-radius: 12px; }
.lg .btn-primary { background: var(--ew-dark); border-color: var(--ew-dark); color: #fff; }
.lg .btn-primary:hover, .lg .btn-primary:focus, .lg .btn-primary:active { background: var(--ew-deep); border-color: var(--ew-deep); color: #fff; }
.lg .btn-outline-primary { color: var(--ew-dark); border-color: #9fd6e2; }
.lg .btn-outline-primary:hover, .lg .btn-outline-primary.active { background: var(--ew-tint); color: var(--ew-deep); border-color: #9fd6e2; }
.lg .btn-check:checked + .btn-outline-primary { background: var(--ew-dark); border-color: var(--ew-dark); color: #fff; }
.lg .btn-dark { background: var(--ew-ink); border-color: var(--ew-ink); }
.lg .btn-outline-dark { color: var(--ew-ink); border-color: #cbd5df; } .lg .btn-outline-dark:hover { background: var(--ew-ink); color: #fff; }
.lg .btn-outline-secondary { color: var(--ew-text); border-color: #d4dde6; } .lg .btn-outline-secondary:hover { background: var(--ew-soft); color: var(--ew-ink); border-color: #c2ccd6; }
.lg .badge { border-radius: 999px; font-weight: 600; padding: .38em .72em; }
.lg .alert { border-radius: 12px; border-width: 1px; font-size: 13.5px; }
.lg .alert-info { background: var(--ew-tint2); border-color: #cfeaf1; color: #24515d; }
.lg .alert-light { background: #fff; border-color: var(--ew-line); color: var(--ew-text); }
.lg .list-group-item-action:hover { background: var(--ew-tint2); }
.lg code { color: #0a5566; }
.lg .nav-tabs { border-bottom: 0; gap: 4px; }
.lg .form-check-input:checked { background-color: var(--ew-dark); border-color: var(--ew-dark); }
.lg .form-control[readonly] { background: var(--ew-soft); color: var(--ew-muted); }
.lg .input-group-text { background: var(--ew-soft); border-color: #d4dde6; color: var(--ew-muted); border-radius: 10px; }
.lg .page-link { color: var(--ew-dark); } .lg .page-item.active .page-link { background: var(--ew-dark); border-color: var(--ew-dark); color: #fff; }
.lg .dataTables_wrapper .dataTables_filter input, .lg .dataTables_wrapper .dataTables_length select { border-radius: 10px; border: 1px solid #d4dde6; padding: .35rem .7rem; }
.lg .dataTables_wrapper .dataTables_info { color: var(--ew-muted); font-size: 13px; }
.lg-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #eef2f6; border-radius: 11px; padding: 4px; }
.lg-seg a { padding: 6px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ew-muted) !important; text-decoration: none; white-space: nowrap; }
.lg-seg a:hover { color: var(--ew-ink) !important; background: rgba(255, 255, 255, .6); }
.lg-seg a.on { background: #fff; color: var(--ew-dark) !important; box-shadow: 0 1px 3px rgba(15, 31, 42, .12); }
.lg-seg .n { font-size: 11.5px; background: #dde5ec; border-radius: 999px; padding: 0 7px; margin-left: 4px; color: var(--ew-text); }
.lg-seg a.on .n { background: var(--ew-tint); color: var(--ew-dark); }
.lg-stat { display: flex; align-items: center; gap: 14px; }
.lg-stat .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--ew-tint); color: var(--ew-dark); display: grid; place-items: center; font-size: 22px; flex: none; }
.lg-stat .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #8a99aa; font-weight: 700; }
.lg-stat .v { font-size: 22px; font-weight: 700; color: var(--ew-ink); line-height: 1.2; }

/* signing on screen (owner 09-10-2026: the person delivering signs here instead of on paper) */
.lg-sig { position: relative; border: 1.5px dashed #b8c6d1; border-radius: 13px; background: #fbfdfe; max-width: 560px; }
.lg-sig.on { border-style: solid; border-color: var(--ew-teal); background: #fff; }
.lg-sig canvas { display: block; width: 100%; aspect-ratio: 900 / 260; touch-action: none; cursor: crosshair; border-radius: 13px; }
.lg-sig .ph { position: absolute; left: 16px; bottom: 12px; color: #94a3b8; font-size: 13px; pointer-events: none; }
.lg-sig.on .ph { display: none; }
.lg-sig .clr { position: absolute; right: 8px; top: 8px; }
.lg-sig-img { max-width: 260px; max-height: 80px; display: block; }
/* a photo on an item line */
.lg-photo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; vertical-align: middle; }

/* compact choice tiles, 3 per row (owner 09-10-2026: the delivery kinds were too large) */
.lg-choice.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.lg-choice.compact label { padding: 9px 11px; gap: 10px; border-radius: 11px; align-items: flex-start; }
.lg-choice.compact label .ic { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
.lg-choice.compact label b { font-size: 13.5px; line-height: 1.25; }
.lg-choice.compact label span span { font-size: 11.5px; line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .lg-choice.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lg-choice.compact { grid-template-columns: 1fr; } }
.lg-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 13px; color: var(--ew-muted); }
.lg-more input { accent-color: var(--ew-teal); }

/* Delivery Order lines: Model and S/N only where they apply (owner 09-10-2026) */
.no-sn .sncol { display: none; }

/* a client item line on Receiving: two rows (type, brand, model, S/N / qty, condition, note, photo), the model the widest (owner 09-10-2026) */
.cp-lines td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.cp-line { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 10px; }
.cp-line .lb { display: block; font-size: 11.5px; color: var(--ew-muted); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-line .f-ty { grid-column: span 3; } .cp-line .f-br { grid-column: span 2; } .cp-line .f-mo { grid-column: span 4; } .cp-line .f-se { grid-column: span 3; }
.cp-line .f-qt { grid-column: span 1; } .cp-line .f-co { grid-column: span 3; } .cp-line .f-nt { grid-column: span 6; } .cp-line .f-act { grid-column: span 2; }
@media (max-width: 860px) { .cp-line > div { grid-column: span 6 !important; } .cp-line .f-mo, .cp-line .f-nt { grid-column: span 12 !important; } }