/* =====================================================================
   Easy Label Printing - interface theme
   Load after Bootstrap 5.3. Built around the world of the product:
   die-cut sticker sheets, price tags, perforations and barcode strips.
   ===================================================================== */

:root {
  /* palette */
  --elp-ink: #0E1A3A;          /* deep ink: sidebar, headings */
  --elp-ink-2: #34405F;        /* body text */
  --elp-muted: #6A7493;        /* secondary text */
  --elp-paper: #F3F5FA;        /* page background */
  --elp-paper-2: #E9EDF6;      /* recessed areas, cutting mat */
  --elp-surface: #FFFFFF;
  --elp-line: #DFE4F0;
  --elp-line-2: #C9D1E4;
  --elp-blue: #2F45FF;         /* press blue: actions */
  --elp-blue-d: #1F33DB;
  --elp-blue-tint: #ECEEFF;
  --elp-tag: #FFD23F;          /* price-tag yellow, used sparingly */
  --elp-tag-tint: #FFF6D2;
  --elp-ok: #0E9A72;
  --elp-ok-tint: #E3F6EF;
  --elp-bad: #D93445;
  --elp-bad-tint: #FDECEE;

  /* shape: radius follows role, not one value everywhere */
  --elp-r-sheet: 18px;         /* large sheets: ticket, hero */
  --elp-r-panel: 14px;         /* panels, cards */
  --elp-r-ctl: 9px;            /* inputs, buttons */
  --elp-r-chip: 6px;

  --elp-font: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --elp-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* bootstrap bridge */
  --bs-body-font-family: var(--elp-font);
  --bs-body-font-size: .9375rem;
  --bs-body-font-weight: 450;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--elp-ink-2);
  --bs-body-bg: var(--elp-paper);
  --bs-emphasis-color: var(--elp-ink);
  --bs-secondary-color: var(--elp-muted);
  --bs-border-color: var(--elp-line);
  --bs-border-radius: var(--elp-r-ctl);
  --bs-border-radius-lg: var(--elp-r-panel);
  --bs-primary: var(--elp-blue);
  --bs-primary-rgb: 47, 69, 255;
  --bs-success-rgb: 14, 154, 114;
  --bs-danger-rgb: 217, 52, 69;
  --bs-link-color: var(--elp-blue);
  --bs-link-color-rgb: 47, 69, 255;
  --bs-link-hover-color: var(--elp-blue-d);
  --bs-link-hover-color-rgb: 31, 51, 219;
  --bs-focus-ring-color: rgba(47, 69, 255, .22);
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--elp-paper);
  color: var(--elp-ink-2);
  font-family: var(--elp-font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--elp-ink);
  font-family: var(--elp-font);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.2;
}
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: .9375rem; font-weight: 650; }
a { text-underline-offset: 3px; }
.text-muted { color: var(--elp-muted) !important; }
code, .font-monospace, .mono { font-family: var(--elp-mono); font-size: .86em; }
::selection { background: var(--elp-tag); color: var(--elp-ink); }
/* tabular figures only on plain digits; this font widens commas and full stops under tnum */
.elp-days, .elp-meter-top b { font-variant-numeric: tabular-nums; }
/* older pages put the title and a button in a plain flex row: keep the button its natural size */
.elp-content > .d-flex > .btn, .elp-content > .d-flex > div > .btn { align-self: center; }
.elp-content > .d-flex > h4 { margin-bottom: 0; }
.elp-content > .d-flex:has(> h4) { margin-bottom: 1.4rem !important; align-items: center; }

/* Page titles: every inner page opens with <h4><i class="bi ..."></i> Title</h4> */
.elp-content > h4,
.elp-content > div > h4,
.elp-content > .d-flex > h4 {
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem);
  font-weight: 750;
  letter-spacing: -.022em;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.25rem;
}
.elp-content > h4 > .bi:first-child,
.elp-content > div > h4 > .bi:first-child,
.elp-content > .d-flex > h4 > .bi:first-child {
  flex: none;
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: 11px;
  background: var(--elp-surface);
  border: 1px solid var(--elp-line);
  color: var(--elp-blue);
  font-size: 1.15rem;
}
.elp-content > h4 small,
.elp-content > div > h4 small,
.elp-content > .d-flex > h4 small { font-size: .875rem !important; font-weight: 500; color: var(--elp-muted); letter-spacing: 0; }
.elp-content > h4 + p.text-muted { margin-top: -.6rem; margin-bottom: 1.25rem; max-width: 70ch; }

/* ---------------------------------------------------------------------
   App shell
   --------------------------------------------------------------------- */
.elp-app { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }

.elp-side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--elp-ink);
  color: #B9C2DF;
  padding: 22px 14px 16px;
  overflow-y: auto;
  z-index: 1040;
}
.elp-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 10px 22px;
  color: #fff; text-decoration: none;
}
.elp-brand:hover { color: #fff; }
.elp-mark { flex: none; width: 40px; height: 40px; }
.elp-brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.elp-brand-name b { font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; }
.elp-brand-name span { font-size: .8rem; color: #8F9AC0; font-weight: 500; margin-top: 3px; }

.elp-nav-group { margin-top: 10px; }
.elp-nav-head {
  font-size: .75rem; font-weight: 600; color: #6F7BA5;
  padding: 12px 12px 6px;
}
.elp-nav a {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; margin: 1px 0;
  border-radius: 10px;
  color: #B9C2DF; text-decoration: none;
  font-weight: 550; font-size: .9375rem;
  transition: background-color .15s, color .15s;
}
.elp-nav a .bi { font-size: 1.08rem; width: 20px; text-align: center; color: #7C88B3; transition: color .15s; }
.elp-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.elp-nav a:hover .bi { color: #fff; }
.elp-nav a.active { background: rgba(255, 255, 255, .1); color: #fff; }
.elp-nav a.active .bi { color: var(--elp-tag); }
.elp-nav a.active::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--elp-tag);
}
.elp-nav a:focus-visible, .elp-side-foot a:focus-visible, .elp-side-foot button:focus-visible {
  outline: 2px solid var(--elp-tag); outline-offset: 2px;
}

.elp-side-foot { margin-top: auto; padding-top: 18px; }

/* package "tape": a strip of label roll that runs down as days pass */
.elp-tape {
  display: block; text-decoration: none;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 12px 14px 13px;
  color: #DCE2F5;
  margin-bottom: 12px;
}
.elp-tape:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.elp-tape-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.elp-tape-top b { font-weight: 700; color: #fff; font-size: .9rem; }
.elp-tape-top span { font-size: .8rem; color: #98A3C8; white-space: nowrap; }
.elp-tape-bar {
  margin-top: 10px; height: 8px; border-radius: 3px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 10px, rgba(255,255,255,.05) 10px 12px);
}
.elp-tape-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--elp-tag) 0 10px, #E9B900 10px 12px);
}
.elp-tape.is-low .elp-tape-bar i { background: repeating-linear-gradient(90deg, #FF6B78 0 10px, #E0465A 10px 12px); }
.elp-tape.is-low .elp-tape-top span { color: #FF9AA4; font-weight: 600; }

.elp-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 2px 10px;
}
.elp-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--elp-tag); color: var(--elp-ink);
  font-weight: 800; font-size: .85rem;
}
.elp-user-meta { min-width: 0; line-height: 1.2; flex: 1; }
.elp-user-meta b { display: block; color: #fff; font-weight: 650; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elp-user-meta span { font-size: .78rem; color: #8F9AC0; }
.elp-logout {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  color: #98A3C8; text-decoration: none;
}
.elp-logout:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.elp-main { min-width: 0; display: flex; flex-direction: column; }
.elp-topbar { display: none; }
.elp-content {
  width: 100%; max-width: 1480px;
  padding: 32px clamp(16px, 3.2vw, 44px) 72px;
}

/* brand row with the collapse button */
.elp-side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 22px; }
.elp-side-head .elp-brand { padding: 2px 0 0 10px; min-width: 0; }
.elp-collapse {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 9px;
  display: grid; place-items: center;
  background: transparent; color: #7C88B3; font-size: 1.1rem;
  transition: background-color .15s, color .15s;
}
.elp-collapse:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.elp-collapse:focus-visible { outline: 2px solid var(--elp-tag); outline-offset: 2px; }

/* collapsed: the sidebar becomes a slim icon rail and the page gets the room */
@media (min-width: 992px) {
  .elp-animate .elp-app { transition: grid-template-columns .22s ease; }
  html.elp-collapsed .elp-app { grid-template-columns: 76px minmax(0, 1fr); }
  html.elp-collapsed .elp-side { padding: 18px 12px 14px; overflow-x: hidden; }
  html.elp-collapsed .elp-side-head { flex-direction: column; gap: 12px; padding-bottom: 14px; }
  html.elp-collapsed .elp-side-head .elp-brand { padding: 0; }
  html.elp-collapsed .elp-brand-name,
  html.elp-collapsed .elp-nav-t,
  html.elp-collapsed .elp-tape-top,
  html.elp-collapsed .elp-user-meta { display: none; }
  html.elp-collapsed .elp-nav-head { font-size: 0; height: 1px; padding: 0; margin: 12px 8px; background: rgba(255, 255, 255, .1); }
  html.elp-collapsed .elp-nav a { justify-content: center; gap: 0; padding: 11px 0; }
  html.elp-collapsed .elp-nav a .bi { width: auto; font-size: 1.2rem; }
  html.elp-collapsed .elp-nav a.active::before { left: -12px; }
  html.elp-collapsed .elp-tape { padding: 9px 8px; }
  html.elp-collapsed .elp-tape-bar { margin-top: 0; }
  html.elp-collapsed .elp-user { flex-direction: column; gap: 8px; padding: 8px 0 0; }
}

/* mobile: the sidebar slides in */
@media (max-width: 991.98px) {
  .elp-app { grid-template-columns: minmax(0, 1fr); }
  .elp-side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 284px; height: auto;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .elp-app.side-open .elp-side { transform: none; box-shadow: 0 0 0 100vmax rgba(14, 26, 58, .45); }
  .elp-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1030;
    background: var(--elp-ink); color: #fff;
    padding: 10px 16px;
  }
  .elp-topbar .elp-brand { padding: 0; }
  .elp-collapse { display: none; }
  .elp-topbar .elp-mark { width: 32px; height: 32px; }
  .elp-burger {
    width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.3rem;
  }
  .elp-content { padding-top: 22px; }
}

/* ---------------------------------------------------------------------
   Bootstrap components, re-cut
   --------------------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--elp-line);
  --bs-card-border-radius: var(--elp-r-panel);
  --bs-card-inner-border-radius: calc(var(--elp-r-panel) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-bg: var(--elp-surface);
  box-shadow: none;
}
.card-header { font-weight: 650; color: var(--elp-ink); padding: .9rem 1.1rem; }
.card-footer { background: transparent !important; border-top: 1px solid var(--elp-line); padding: .75rem 1.1rem; }
.card-body { padding: 1.15rem 1.25rem; }
.card.card-body { padding: 1.4rem 1.5rem; }
.card > .table, .card > .table-responsive > .table { margin-bottom: 0; }
.card.table-responsive, .card:has(> .table) { overflow: hidden; }

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--elp-r-ctl);
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: .9rem;
  --bs-btn-focus-box-shadow: 0 0 0 4px rgba(47, 69, 255, .22);
  letter-spacing: -.003em;
  transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-x: .7rem; --bs-btn-padding-y: .32rem; --bs-btn-font-size: .82rem; --bs-btn-border-radius: 8px; }
.btn-lg { --bs-btn-padding-x: 1.3rem; --bs-btn-padding-y: .72rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: 11px; }
.btn .bi { margin-right: .15em; }

.btn-primary {
  --bs-btn-bg: var(--elp-blue); --bs-btn-border-color: var(--elp-blue);
  --bs-btn-hover-bg: var(--elp-blue-d); --bs-btn-hover-border-color: var(--elp-blue-d);
  --bs-btn-active-bg: var(--elp-blue-d); --bs-btn-active-border-color: var(--elp-blue-d);
  --bs-btn-disabled-bg: var(--elp-blue); --bs-btn-disabled-border-color: var(--elp-blue);
}
.btn-success {
  --bs-btn-bg: var(--elp-ok); --bs-btn-border-color: var(--elp-ok);
  --bs-btn-hover-bg: #0B8461; --bs-btn-hover-border-color: #0B8461;
  --bs-btn-active-bg: #0B8461; --bs-btn-active-border-color: #0B8461;
}
.btn-outline-primary {
  --bs-btn-color: var(--elp-blue); --bs-btn-border-color: #BCC4FF; --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--elp-blue-tint); --bs-btn-hover-color: var(--elp-blue-d); --bs-btn-hover-border-color: var(--elp-blue);
  --bs-btn-active-bg: var(--elp-blue-tint); --bs-btn-active-color: var(--elp-blue-d); --bs-btn-active-border-color: var(--elp-blue);
}
.btn-outline-secondary {
  --bs-btn-color: var(--elp-ink-2); --bs-btn-border-color: var(--elp-line-2); --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--elp-paper); --bs-btn-hover-color: var(--elp-ink); --bs-btn-hover-border-color: #AEB8D2;
  --bs-btn-active-bg: var(--elp-paper-2); --bs-btn-active-color: var(--elp-ink); --bs-btn-active-border-color: #AEB8D2;
}
.btn-outline-danger {
  --bs-btn-color: var(--elp-bad); --bs-btn-border-color: #F2B8BF; --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--elp-bad-tint); --bs-btn-hover-color: #B32535; --bs-btn-hover-border-color: var(--elp-bad);
  --bs-btn-active-bg: var(--elp-bad-tint); --bs-btn-active-color: #B32535; --bs-btn-active-border-color: var(--elp-bad);
}
.btn-outline-success {
  --bs-btn-color: var(--elp-ok); --bs-btn-border-color: #A7DFCB; --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--elp-ok-tint); --bs-btn-hover-color: #0B7A5A; --bs-btn-hover-border-color: var(--elp-ok);
}
.btn-link { --bs-btn-color: var(--elp-blue); font-weight: 600; text-decoration: none; }
.btn-group > .btn.active { background: var(--elp-blue-tint); border-color: var(--elp-blue); color: var(--elp-blue-d); }

/* forms */
.form-label { font-weight: 600; font-size: .85rem; color: var(--elp-ink); margin-bottom: .4rem; }
.form-text { color: var(--elp-muted); font-size: .8rem; }
.form-control, .form-select {
  border-color: var(--elp-line-2);
  border-radius: var(--elp-r-ctl);
  padding: .55rem .8rem;
  color: var(--elp-ink);
  background-color: #fff;
  font-size: .9375rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { padding: .32rem .6rem; font-size: .84rem; border-radius: 8px; }
.form-select-sm { padding-right: 2rem; }
.form-control::placeholder { color: #9AA3BE; }
.form-control:hover, .form-select:hover { border-color: #AEB8D2; }
.form-control:focus, .form-select:focus { border-color: var(--elp-blue); box-shadow: 0 0 0 4px rgba(47, 69, 255, .14); }
.form-check-input { border-color: #AEB8D2; width: 1.1em; height: 1.1em; margin-top: .2em; }
.form-check-input:checked { background-color: var(--elp-blue); border-color: var(--elp-blue); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(47, 69, 255, .18); border-color: var(--elp-blue); }
.form-switch .form-check-input { width: 2.1em; }
.input-group-text { background: var(--elp-paper); border-color: var(--elp-line-2); color: var(--elp-muted); font-weight: 600; }

/* tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--elp-ink-2);
  --bs-table-hover-bg: #F6F8FD;
  --bs-table-border-color: var(--elp-line);
  margin-bottom: 0;
  font-size: .9rem;
}
.table > thead > tr > th {
  background: #F8F9FD;
  color: var(--elp-muted);
  font-weight: 600; font-size: .8rem;
  border-bottom: 1px solid var(--elp-line);
  padding-top: .7rem; padding-bottom: .7rem;
  white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .72rem .9rem; }
.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table td > a:not(.btn) { color: var(--elp-ink); font-weight: 600; text-decoration: none; }
.table td > a:not(.btn):hover { color: var(--elp-blue); }
.table td.text-muted.p-4, .table td.text-muted { color: var(--elp-muted); }

/* badges: small printed chips */
.badge { font-weight: 650; font-size: .72rem; border-radius: var(--elp-r-chip); padding: .34em .6em; letter-spacing: .01em; }
.badge.bg-light { background: var(--elp-paper-2) !important; color: var(--elp-ink-2) !important; }
.badge.bg-secondary { background: #E4E8F3 !important; color: var(--elp-ink-2) !important; }
.badge.bg-primary { background: var(--elp-blue-tint) !important; color: var(--elp-blue-d) !important; }
.badge.bg-success { background: var(--elp-ok-tint) !important; color: #0B7A5A !important; }
.badge.bg-warning { background: var(--elp-tag-tint) !important; color: #7A5B00 !important; }
.badge.bg-danger { background: var(--elp-bad-tint) !important; color: #B32535 !important; }

/* alerts */
.alert {
  border: 1px solid transparent; border-left-width: 4px;
  border-radius: 12px; padding: .85rem 1.1rem;
  font-weight: 500;
  display: flex; align-items: flex-start; gap: .6rem;
}
.alert > .bi { flex: none; margin-top: .1rem; }
.alert-success { background: var(--elp-ok-tint); border-color: #BFE8D9; border-left-color: var(--elp-ok); color: #0A5F46; }
.alert-danger { background: var(--elp-bad-tint); border-color: #F6C9CF; border-left-color: var(--elp-bad); color: #8E1C2A; }
.alert-info { background: var(--elp-blue-tint); border-color: #D2D7FF; border-left-color: var(--elp-blue); color: #1A2A99; }
.alert-warning { background: var(--elp-tag-tint); border-color: #F6E3A0; border-left-color: #E8B800; color: #6B5000; }
.alert a { color: inherit; font-weight: 700; }

/* modal, dropdown, pagination */
.modal-content { border: 0; border-radius: var(--elp-r-sheet); box-shadow: 0 30px 80px -20px rgba(14, 26, 58, .45); }
.modal-header { border-bottom: 1px solid var(--elp-line); padding: 1.1rem 1.4rem; }
.modal-body { padding: 1.3rem 1.4rem; }
.modal-footer { border-top: 1px solid var(--elp-line); padding: .9rem 1.4rem; }
.modal-backdrop.show { opacity: .5; background: var(--elp-ink); }
.dropdown-menu { border-color: var(--elp-line); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px -16px rgba(14, 26, 58, .3); }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-weight: 500; }
.pagination { --bs-pagination-border-radius: 8px; --bs-pagination-active-bg: var(--elp-blue); --bs-pagination-active-border-color: var(--elp-blue); --bs-pagination-color: var(--elp-ink-2); --bs-pagination-border-color: var(--elp-line); gap: 4px; }
.pagination .page-link { border-radius: 8px !important; font-weight: 600; min-width: 34px; text-align: center; }

/* ---------------------------------------------------------------------
   Shared pieces
   --------------------------------------------------------------------- */
.elp-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.elp-pagehead h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.elp-pagehead p { margin: 6px 0 0; color: var(--elp-muted); max-width: 62ch; }

.elp-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.elp-section-title h2 { font-size: 1.12rem; font-weight: 750; margin: 0; }
.elp-section-title a { font-weight: 600; text-decoration: none; font-size: .875rem; }

/* perforation: the tear line between a stub and its ticket */
.elp-perf { position: relative; }
.elp-perf::before, .elp-perf::after {
  content: ""; position: absolute; left: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--elp-paper); border: 1px solid var(--elp-line);
}
.elp-perf::before { top: -12px; clip-path: inset(50% 0 0 0); }
.elp-perf::after { bottom: -12px; clip-path: inset(0 0 50% 0); }

/* package ticket on the company dashboard */
.elp-ticket {
  display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  background: var(--elp-surface);
  border: 1px solid var(--elp-line);
  border-radius: var(--elp-r-sheet);
  overflow: visible;
}
.elp-ticket-stub {
  background: var(--elp-ink); color: #fff;
  border-radius: calc(var(--elp-r-sheet) - 1px) 0 0 calc(var(--elp-r-sheet) - 1px);
  padding: 26px 26px 24px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  position: relative; overflow: hidden;
}
.elp-ticket-stub::after {
  /* barcode strip printed along the stub's bottom edge */
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 10px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 2px, transparent 2px 4px, rgba(255,255,255,.22) 4px 5px, transparent 5px 9px, rgba(255,255,255,.22) 9px 12px, transparent 12px 14px);
}
.elp-ticket.is-low .elp-ticket-stub { background: #8E1C2A; }
.elp-days { font-size: clamp(3.4rem, 2.6rem + 3vw, 4.6rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; }
.elp-days-label { color: #A9B3D6; font-weight: 600; margin-top: 8px; }
.elp-ticket.is-low .elp-days-label { color: #FFC2C9; }
.elp-ticket-stub .elp-tape-bar { margin-top: 0; }
.elp-ticket-body { padding: 24px 28px; border-left: 2px dashed var(--elp-line-2); }
.elp-ticket-body h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.elp-ticket-dates { color: var(--elp-muted); margin-top: 4px; }
.elp-ticket-row { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 22px; align-items: flex-end; }
.elp-meter { min-width: 200px; flex: 1; max-width: 340px; }
.elp-meter-top { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 7px; }
.elp-meter-top b { color: var(--elp-ink); font-weight: 700; }
.elp-meter-bar { height: 8px; border-radius: 4px; background: var(--elp-paper-2); overflow: hidden; }
.elp-meter-bar i { display: block; height: 100%; background: var(--elp-blue); border-radius: 4px; }
.elp-features { display: flex; flex-wrap: wrap; gap: 8px; }
.elp-feature {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  background: var(--elp-ok-tint); color: #0B7A5A;
}
.elp-feature.off { background: var(--elp-paper); color: #98A1BC; text-decoration: line-through; text-decoration-color: rgba(152,161,188,.6); }

@media (max-width: 767.98px) {
  .elp-ticket { grid-template-columns: minmax(0, 1fr); }
  .elp-ticket-stub { border-radius: calc(var(--elp-r-sheet) - 1px) calc(var(--elp-r-sheet) - 1px) 0 0; }
  .elp-ticket-body { border-left: 0; border-top: 2px dashed var(--elp-line-2); }
  .elp-perf::before, .elp-perf::after { display: none; }
}

/* workflow: three real steps, so they are numbered */
.elp-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--elp-surface); border: 1px solid var(--elp-line); border-radius: var(--elp-r-panel); }
.elp-step {
  position: relative; display: flex; gap: 16px; padding: 20px 22px;
  text-decoration: none; color: var(--elp-ink-2);
  transition: background-color .15s;
}
.elp-step + .elp-step { border-left: 1px solid var(--elp-line); }
.elp-step:first-child { border-radius: var(--elp-r-panel) 0 0 var(--elp-r-panel); }
.elp-step:last-child { border-radius: 0 var(--elp-r-panel) var(--elp-r-panel) 0; }
.elp-step:hover { background: #F8F9FE; color: var(--elp-ink-2); }
.elp-step:focus-visible { outline: 3px solid rgba(47, 69, 255, .35); outline-offset: -3px; }
.elp-step-num {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--elp-line-2); color: var(--elp-muted);
  font-weight: 800; font-size: .95rem;
}
.elp-step.done .elp-step-num { background: var(--elp-ok); border-color: var(--elp-ok); color: #fff; }
.elp-step.next .elp-step-num { background: var(--elp-blue); border-color: var(--elp-blue); color: #fff; box-shadow: 0 0 0 5px var(--elp-blue-tint); }
.elp-step h3 { font-size: 1rem; font-weight: 750; margin: 6px 0 3px; }
.elp-step p { margin: 0; font-size: .86rem; color: var(--elp-muted); }
.elp-step-cta { display: inline-block; margin-top: 8px; font-weight: 650; font-size: .85rem; color: var(--elp-blue); }
@media (max-width: 767.98px) {
  .elp-flow { grid-template-columns: minmax(0, 1fr); }
  .elp-step + .elp-step { border-left: 0; border-top: 1px solid var(--elp-line); }
  .elp-step:first-child { border-radius: var(--elp-r-panel) var(--elp-r-panel) 0 0; }
  .elp-step:last-child { border-radius: 0 0 var(--elp-r-panel) var(--elp-r-panel); }
}

/* label thumbnails drawn at the template's real proportions */
.elp-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.elp-tpl {
  display: flex; flex-direction: column;
  background: var(--elp-surface);
  border: 1px solid var(--elp-line);
  border-radius: var(--elp-r-panel);
  overflow: hidden;
  transition: border-color .15s;
}
.elp-tpl:hover { border-color: #AEB8D2; }
.elp-mat {
  height: 150px; display: grid; place-items: center; padding: 16px;
  background-color: var(--elp-paper-2);
  background-image:
    linear-gradient(rgba(14,26,58,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,26,58,.055) 1px, transparent 1px);
  background-size: 14px 14px;
  border-bottom: 1px solid var(--elp-line);
  position: relative;
}
.elp-mat svg { width: 78%; height: 100%; filter: drop-shadow(0 6px 10px rgba(14, 26, 58, .14)); }
.elp-mat img { max-width: 80%; max-height: 118px; object-fit: contain; border-radius: 6px; }
.elp-mat-size {
  position: absolute; right: 10px; bottom: 9px;
  font-family: var(--elp-mono); font-size: .72rem; font-weight: 500;
  color: var(--elp-ink-2); background: rgba(255,255,255,.85);
  padding: 2px 7px; border-radius: 5px;
}
.elp-tpl-body { padding: 14px 16px 6px; flex: 1; }
.elp-tpl-body h3 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.elp-tpl-body p { font-size: .84rem; color: var(--elp-muted); margin: 0; }
.elp-tpl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.elp-tpl-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 16px; }
.elp-tpl-actions form { margin: 0; }
.elp-tpl-actions .dropdown { margin-left: auto; }
a.elp-mat-link { display: block; text-decoration: none; }
a.elp-mat-link:focus-visible { outline: 3px solid rgba(47, 69, 255, .4); outline-offset: -3px; }
a.elp-mat-link:hover .elp-mat svg { transform: translateY(-2px); }
.elp-mat svg { transition: transform .2s ease; }

/* stat tiles (admin): die-cut top-right corner */
.elp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.elp-stat {
  position: relative; display: block; text-decoration: none;
  background: var(--elp-surface); border: 1px solid var(--elp-line);
  border-radius: var(--elp-r-panel);
  padding: 18px 20px 20px; color: var(--elp-ink-2);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: border-color .15s, background-color .15s;
}
.elp-stat::after {
  content: ""; position: absolute; right: 0; top: 0; width: 22px; height: 22px;
  background: linear-gradient(225deg, transparent 50%, var(--elp-line-2) 50%, var(--elp-paper-2) 54%);
}
.elp-stat:hover { background: #FAFBFE; color: var(--elp-ink-2); }
.elp-stat-label { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--elp-muted); }
.elp-stat-label .bi { color: var(--elp-blue); }
.elp-stat-num { font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; color: var(--elp-ink); line-height: 1.05; margin-top: 10px; }
.elp-stat.is-key { background: var(--elp-ink); border-color: var(--elp-ink); color: #C9D0EA; }
.elp-stat.is-key .elp-stat-num { color: #fff; }
.elp-stat.is-key .elp-stat-label { color: #A9B3D6; }
.elp-stat.is-key .elp-stat-label .bi { color: var(--elp-tag); }
.elp-stat.is-key::after { background: linear-gradient(225deg, transparent 50%, #2A3762 50%); }

/* quick actions */
.elp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.elp-action {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--elp-surface); border: 1px solid var(--elp-line);
  text-decoration: none; color: var(--elp-ink); font-weight: 650;
  transition: border-color .15s, background-color .15s;
}
.elp-action:hover { border-color: var(--elp-blue); background: #FAFBFF; color: var(--elp-ink); }
.elp-action .bi {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--elp-blue-tint); color: var(--elp-blue);
}
.elp-action small { display: block; font-weight: 500; color: var(--elp-muted); font-size: .8rem; margin-top: 1px; }

/* price tag: the package price, cut like a swing tag */
.elp-price {
  position: relative; display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--elp-tag); color: var(--elp-ink);
  padding: 7px 16px 7px 26px; margin: 4px 0 14px;
  font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  border-radius: 0 6px 6px 0;
}
.elp-price::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--elp-surface);
}
.elp-price small { font-size: .78rem; font-weight: 600; color: #6B5300; }

/* empty states */
.elp-empty {
  text-align: center; padding: 42px 20px; color: var(--elp-muted);
  background: var(--elp-surface); border: 1.5px dashed var(--elp-line-2); border-radius: var(--elp-r-panel);
}
.elp-empty .bi { font-size: 1.8rem; color: #A3ACC6; display: block; margin-bottom: 8px; }
.elp-empty b { display: block; color: var(--elp-ink); font-size: 1rem; margin-bottom: 4px; }

/* ---------------------------------------------------------------------
   Sign-in
   --------------------------------------------------------------------- */
.elp-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); background: var(--elp-surface); }
.elp-auth-art {
  position: relative; overflow: hidden;
  background: var(--elp-ink); color: #fff;
  padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column;
}
.elp-auth-art h1 {
  color: #fff; font-weight: 800; letter-spacing: -.04em; line-height: .98;
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.4rem);
  margin: auto 0 0; max-width: 11ch; position: relative; z-index: 2;
}
.elp-auth-art p { color: #A9B3D6; font-size: 1.05rem; max-width: 42ch; margin: 18px 0 0; position: relative; z-index: 2; }
.elp-auth-art .elp-brand { padding: 0; position: relative; z-index: 2; }

/* the sticker sheet coming out of the printer */
.elp-sheet {
  position: absolute; right: -5%; top: 7%;
  height: 58%; width: auto; max-width: 52%; aspect-ratio: 210 / 297;
  background: #FBFCFF; border-radius: 6px;
  padding: 5.5% 5%;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 3.2%;
  transform: rotate(-7deg);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.6);
  animation: elp-feed 1.1s cubic-bezier(.2,.7,.2,1) both;
  z-index: 1;
}
.elp-sheet { container-type: inline-size; }
.elp-sheet-lbl {
  background: #fff; border: 1px solid #DCE2F0; border-radius: 2.4cqw;
  padding: 4.2cqw 4.2cqw 3.4cqw;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.8cqw;
  color: var(--elp-ink); overflow: hidden; position: relative; min-height: 0;
}
.elp-sheet-lbl > div { min-width: 0; line-height: 1.15; }
.elp-sheet-lbl b, .elp-sheet-lbl span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elp-sheet-lbl b { font-size: 3.2cqw; font-weight: 800; letter-spacing: -.01em; }
.elp-sheet-lbl span { font-size: 2.5cqw; color: var(--elp-muted); font-weight: 600; margin-top: .5cqw; }
.elp-sheet-lbl .price { color: var(--elp-ink); font-weight: 800; font-size: 3cqw; margin: 0; }
.elp-sheet-lbl svg { width: 100%; height: 100%; min-height: 0; display: block; }
.elp-sheet-lbl.peeled {
  transform: translate(10%, -14%) rotate(6deg);
  box-shadow: 0 18px 30px -10px rgba(14,26,58,.45);
  border-color: var(--elp-tag); background: var(--elp-tag);
  z-index: 2;
}
.elp-sheet-lbl.peeled span { color: #5E4800; }
.elp-sheet-slot { border: 1.5px dashed #CBD3E6; border-radius: 2.4cqw; }
@keyframes elp-feed { from { transform: translateY(60%) rotate(-7deg); opacity: 0; } to { transform: rotate(-7deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .elp-sheet { animation: none; } * { scroll-behavior: auto !important; } }

.elp-auth-form { display: flex; align-items: center; justify-content: center; padding: 40px clamp(20px, 5vw, 64px); background: var(--elp-surface); }
.elp-auth-box { width: 100%; max-width: 380px; }
.elp-auth-box h2 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 6px; }
.elp-auth-box > p { color: var(--elp-muted); margin-bottom: 28px; }
.elp-auth-box .form-control { padding: .72rem .9rem; font-size: 1rem; }
.elp-auth-switch { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--elp-line); font-size: .9rem; color: var(--elp-muted); }
.elp-auth-switch a { font-weight: 650; text-decoration: none; }
.elp-pass { position: relative; }
.elp-pass .form-control { padding-right: 3rem; }
.elp-pass button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: transparent; border-radius: 8px; color: var(--elp-muted);
}
.elp-pass button:hover { background: var(--elp-paper); color: var(--elp-ink); }

@media (max-width: 991.98px) {
  .elp-auth { grid-template-columns: minmax(0, 1fr); }
  .elp-auth-art { min-height: 300px; }
  .elp-auth-art h1 { font-size: clamp(2rem, 1.2rem + 4vw, 2.8rem); margin-top: 48px; max-width: 12ch; }
  .elp-sheet { height: auto; width: 40%; right: -8%; top: 12%; }
}
@media (max-width: 575.98px) {
  .elp-sheet { display: none; }
  .elp-auth-art { min-height: 0; }
}

/* ---------------------------------------------------------------------
   Designer and print preview
   --------------------------------------------------------------------- */
.elp-content #stage {
  background-color: var(--elp-paper-2) !important;
  background-image:
    linear-gradient(rgba(14,26,58,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,26,58,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid var(--elp-line);
  border-radius: var(--elp-r-panel) !important;
}
.elp-content .panel { border-radius: var(--elp-r-panel); }
.elp-content .panel h6 { font-size: .9rem; font-weight: 750; margin-top: 1.1rem; }
.elp-content .panel h6:first-child { margin-top: 0; }

.elp-printbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--elp-ink); color: #fff;
  padding: 12px clamp(14px, 2.5vw, 28px);
}
.elp-printbar strong { font-weight: 750; font-size: 1rem; }
.elp-printbar .meta { color: #A9B3D6; font-size: .86rem; }
.elp-printbar .tip { color: #8F9AC0; font-size: .8rem; }
.elp-printbar .btn-back { color: #C9D0EA; border: 1px solid rgba(255,255,255,.18); background: transparent; }
.elp-printbar .btn-back:hover { background: rgba(255,255,255,.08); color: #fff; }
.elp-printbar .form-select { background-color: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
.elp-printbar .form-select option { color: var(--elp-ink); }
.elp-printbar .btn-print { background: var(--elp-tag); border-color: var(--elp-tag); color: var(--elp-ink); font-weight: 750; }
.elp-printbar .btn-print:hover { background: #F2C200; border-color: #F2C200; color: var(--elp-ink); }

/* company login: password reset */
.elp-pwbox { border: 1px solid var(--elp-line); border-radius: 12px; padding: 16px 18px; background: #FBFCFE; margin: 0; }
.elp-pwbox h6 { margin-bottom: 4px; }
.elp-newpw {
  border: 1px solid #BFE8D9; border-left: 4px solid var(--elp-ok); background: var(--elp-ok-tint);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; color: #0A5F46;
}
.elp-newpw-top { font-weight: 600; }
.elp-newpw-top .bi { margin-right: 4px; }
.elp-newpw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.elp-newpw code {
  font-family: var(--elp-mono); font-size: 1.15rem; letter-spacing: .06em; color: var(--elp-ink);
  background: #fff; border: 1.5px dashed #8FD3BA; border-radius: 8px; padding: 6px 14px; user-select: all;
}

/* print settings list */
.elp-print-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.elp-print-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 6px 0 0; font-size: .85rem; }
.elp-print-facts dt { font-weight: 500; color: var(--elp-muted); }
.elp-print-facts dd { margin: 0; color: var(--elp-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elp-tpl-body p.small { color: var(--elp-muted); }