/* -------------------------------------------------------------------------
   The two things that change how the whole portal looks: the dark theme, and
   the right-to-left layout Arabic is read in. Kept apart from the design
   system so that file describes the components and this one describes only
   what a theme or a direction does to them.

   Dark theme: the document frame the build's own CSS lays out. Every dark
   rule is scoped to the screen, so a printed invoice or statement is always
   drawn in the light tokens whatever theme the reader had on.
   ------------------------------------------------------------------------- */

@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
  }

  html[data-theme="dark"] body {
    background: #0A0A0A;
    color: #FAFAFA;
  }

  html[data-theme="dark"] .lp-sidebar {
    background: #141414;
    border-color: #454545;
  }

  html[data-theme="dark"] .lp-head,
  html[data-theme="dark"] body.lp-has-brand > .lp-head { border-color: #2E2E2E; }
  html[data-theme="dark"] body.lp-has-brand > .lp-head { background: #141414; }

  html[data-theme="dark"] .lp-brand { color: #FAFAFA; }
  html[data-theme="dark"] .lp-brand:focus-visible { outline-color: #FFFFFF; }

  html[data-theme="dark"] .lp-nav a { color: #A3A3A3; }
  html[data-theme="dark"] .lp-nav a:hover { background: #1C1C1C; color: #FAFAFA; }
  html[data-theme="dark"] .lp-nav a[aria-current="page"] { background: #FFFFFF; color: #0A0A0A; }
  html[data-theme="dark"] .lp-nav a:focus-visible { outline-color: #FFFFFF; }

  html[data-theme="dark"] .lp-account-row { border-color: #2E2E2E; }
  html[data-theme="dark"] .lp-nav a.lp-account:hover .lp-account-name { color: #FAFAFA; }
  html[data-theme="dark"] .lp-nav a.lp-account[aria-current="page"] {
    background: #1C1C1C;
    color: #A3A3A3;
  }
  html[data-theme="dark"] .lp-nav a.lp-account[aria-current="page"] .lp-account-name { color: #FAFAFA; }

  html[data-theme="dark"] .lp-account-name { color: #A3A3A3; }

  html[data-theme="dark"] .lp-logout { border-color: #5C1F22; color: #FCA5A5; }
  html[data-theme="dark"] .lp-logout:hover { background: #2A1113; border-color: #FCA5A5; }
  html[data-theme="dark"] .lp-logout:focus-visible { outline-color: #FCA5A5; }

  html[data-theme="dark"] .lp-burger { border-color: #2E2E2E; }
  html[data-theme="dark"] .lp-burger span { background: #A3A3A3; }
  html[data-theme="dark"] .lp-burger:hover span { background: #FAFAFA; }
  html[data-theme="dark"] .lp-burger:focus-visible { outline-color: #FFFFFF; }

  html[data-theme="dark"] .lp-notfound p { color: #A3A3A3; }
  html[data-theme="dark"] .lp-notfound a { color: #FAFAFA; }

  @media (max-width: 1023px) {
    html[data-theme="dark"] .lp-nav {
      background: #141414;
      box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .9);
    }
  }

  html[data-theme="dark"] .lp-pref-btn { border-color: #2E2E2E; color: #A3A3A3; }
  html[data-theme="dark"] .lp-pref-btn:hover { background: #1C1C1C; color: #FAFAFA; }
  html[data-theme="dark"] .lp-pref-btn:focus-visible { outline-color: #FFFFFF; }

  html[data-theme="dark"] .dl-authwidget {
    --dl-bg: #141414;
    --dl-surface: #1C1C1C;
    --dl-border: #2E2E2E;
    --dl-border-strong: #454545;
    --dl-ink: #FAFAFA;
    --dl-muted: #D4D4D4;
    --dl-muted2: #A3A3A3;
    --dl-placeholder: #A3A3A3;
    --dl-primary: #FAFAFA;
    --dl-primary-dark: #FFFFFF;
    --dl-primary-light: #262626;
    --dl-on-primary: #0A0A0A;
    --dl-accent-line: #454545;
    --dl-success-bg: #10281A;
    --dl-success-text: #4ADE80;
    --dl-success-border: #1F5233;
    --dl-success-strong: #4ADE80;
    --dl-warn-bg: #2A1D05;
    --dl-warn-text: #FBBF24;
    --dl-warn-border: #5A3F0A;
    --dl-warn-solid: #FBBF24;
    --dl-danger: #FCA5A5;
    --dl-danger-bg: #2A1113;
    --dl-danger-border: #5C1F22;
    --dl-accent-text: #D4D4D4;
    --dl-neutral-bg: #262626;
    --dl-shimmer: #2E2E2E;
    --dl-tint: #1C1C1C;
    --dl-scrim: rgba(0, 0, 0, .66);
    --dl-shadow-card: 0 1px 3px rgba(0, 0, 0, .45);
    --dl-shadow-lift: 0 2px 6px -2px rgba(0, 0, 0, .5), 0 10px 24px -12px rgba(0, 0, 0, .7);
    --dl-shadow-hover: 0 1px 2px rgba(0, 0, 0, .5);
    --dl-shadow-row: 0 1px 2px rgba(0, 0, 0, .4);
    --dl-ring: 0 0 0 3px rgba(250, 250, 250, .22);
    --dl-ring-danger: 0 0 0 3px rgba(252, 165, 165, .22);
  }

  html[data-theme="dark"] .dl-toast-success,
  html[data-theme="dark"] .dl-toast-error,
  html[data-theme="dark"] .dl-toast-warn { color: #0A0A0A; }
  html[data-theme="dark"] .dl-toast-info { background-color: #262626; color: #FAFAFA; }
  html[data-theme="dark"] .dl-toast-action { background: rgba(255, 255, 255, .92); color: #0A0A0A; }

  html[data-theme="dark"] .dl-authwidget .dl-select,
  html[data-theme="dark"] .dl-authwidget select,
  html[data-theme="dark"] .dl-authwidget .dl-select:disabled,
  html[data-theme="dark"] .dl-authwidget select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23A3A3A3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

}

.dl-authwidget .dl-select,
.dl-authwidget select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23737373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--dl-field-pad-x) center;
  background-size: 12px 8px;
}

.dl-authwidget .dl-select:disabled,
.dl-authwidget select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23737373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--dl-field-pad-x) center;
  background-size: 12px 8px;
}

.dl-authwidget .dl-select.dl-input-sm {
  padding-inline-end: 30px;
  background-position: right var(--dl-field-pad-x-sm) center;
  background-size: 11px 7px;
}

html[dir="rtl"] body {
  font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* The widget hardcodes a Latin-first stack, which would leave Arabic text
   falling through to Cairo glyph by glyph while Latin stayed in Jakarta -
   two faces at one size, reading as two sizes. Lead with Cairo throughout. */
html[dir="rtl"] .dl-authwidget {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --dl-list-btn-w: 96px;
}

html[dir="rtl"] .dl-chart-wrap,
html[dir="rtl"] .dl-an-chart { direction: ltr; }

html[dir="rtl"] .dl-arch-label {
  letter-spacing: normal;
  text-transform: none;
}

html[dir="rtl"] .dl-ltr { text-align: right; }

/* The arrow on the way out points at the edge the reader leaves by. */
html[dir="rtl"] .lp-logout svg { transform: scaleX(-1); }

html[dir="rtl"] .dl-authwidget .dl-select,
html[dir="rtl"] .dl-authwidget select,
html[dir="rtl"] .dl-authwidget .dl-select:disabled,
html[dir="rtl"] .dl-authwidget select:disabled {
  background-position: left var(--dl-field-pad-x) center;
}

html[dir="rtl"] .dl-authwidget .dl-select.dl-input-sm {
  background-position: left var(--dl-field-pad-x-sm) center;
}

html[dir="rtl"] .dl-toast { background-position: right bottom; }

html[dir="rtl"] input[type="number"] {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="datetime-local"] {
  position: relative;
  direction: rtl;
  text-align: right;
  padding-left: 38px;
}

html[dir="rtl"] input[type="date"]::-webkit-date-and-time-value,
html[dir="rtl"] input[type="time"]::-webkit-date-and-time-value,
html[dir="rtl"] input[type="datetime-local"]::-webkit-date-and-time-value,
html[dir="rtl"] input[type="date"]::-webkit-datetime-edit,
html[dir="rtl"] input[type="time"]::-webkit-datetime-edit,
html[dir="rtl"] input[type="datetime-local"]::-webkit-datetime-edit {
  direction: ltr;
  text-align: right;
}

html[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator,
html[dir="rtl"] input[type="time"]::-webkit-calendar-picker-indicator,
html[dir="rtl"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 50%;
  right: auto;
  left: 12px;
  margin: 0;
  transform: translateY(-50%);
}

/* The theme and language buttons, beside the portal's name. They are there
   whether or not anybody is signed in; for an account the choice is written to
   it as well, so it follows the reader between machines. */
.lp-prefs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.lp-pref-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  background: transparent;
  color: #404040;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.lp-pref-btn:hover { background: #F5F5F5; color: #0A0A0A; }
.lp-pref-btn:focus-visible { outline: 2px solid #0A0A0A; outline-offset: 2px; }
.lp-pref-btn svg { display: block; width: 18px; height: 18px; }

.lp-pref-btn .lp-icon-dark { display: none; }
html[data-theme="dark"] .lp-pref-btn .lp-icon-dark { display: block; }
html[data-theme="dark"] .lp-pref-btn .lp-icon-light { display: none; }

@media (max-width: 1023px) {
  .lp-pref-btn { height: 40px; min-width: 40px; }
}

@media print { .lp-prefs { display: none; } }

/* -------------------------------------------------------------------------
   The portal's components: everything a page is built from, and the tokens
   they are all drawn in. Scoped to .dl-authwidget so the design system
   governs the pages without reaching the document frame around them.

   The tokens. A theme changes these and every component below follows.
   ------------------------------------------------------------------------- */

.dl-authwidget {
  --dl-bg: #FFFFFF;
  --dl-surface: #FAFAFA;
  --dl-border: #E5E5E5;
  --dl-border-strong: #D4D4D4;
  --dl-ink: #0A0A0A;
  --dl-muted: #404040;
  --dl-muted2: #737373;
  --dl-placeholder: #737373;
  --dl-primary: #0A0A0A;
  --dl-primary-dark: #262626;
  --dl-primary-light: #F5F5F5;
  --dl-on-primary: #FFFFFF;
  --dl-accent-line: #D4D4D4;
  --dl-success-bg: #F0FDF4;
  --dl-success-text: #15803D;
  --dl-success-border: #BBF7D0;
  --dl-success-strong: #15803D;
  --dl-warn-bg: #FFFBEB;
  --dl-warn-text: #B45309;
  --dl-warn-border: #FDE68A;
  --dl-warn-solid: #B45309;
  --dl-danger: #B91C1C;
  --dl-danger-bg: #FEF2F2;
  --dl-danger-border: #FECACA;
  --dl-accent-text: #404040;
  --dl-neutral-bg: #F5F5F5;
  --dl-shimmer: #E5E5E5;
  --dl-tint: #FAFAFA;
  --dl-scrim: rgba(10, 10, 10, .45);
  --dl-active-bg: var(--dl-primary-light);
  --dl-active-text: var(--dl-primary-dark);

  --dl-space-2: 2px;
  --dl-space-4: 4px;
  --dl-space-8: 8px;
  --dl-space-12: 12px;
  --dl-space-16: 16px;
  --dl-space-20: 20px;
  --dl-space-24: 24px;
  --dl-space-32: 32px;
  --dl-space-40: 40px;

  /* The type ramp. Each step owns one role; nothing picks a size freehand.
     The reading steps (2xs-sm) are fixed: body text must not shrink on a
     phone. The display steps (lg-3xl) scale fluidly, reaching their desktop
     size around 720px, so a heading is never oversized on a narrow screen.

       2xs  12       micro: uppercase labels, table headers, badges
       xs   13       secondary: meta, help, captions, sub-titles
       sm   14       body and every control (the workhorse)
       md   15       emphasized body: fact values, timeline titles
       lg   16-17    card and entity titles
       xl   18-20    panel and section titles
       2xl  20-24    page headings
       3xl  24-30    display numbers: KPI values, invoice totals          */
  --dl-fs-2xs: .75rem;
  --dl-fs-xs: .8125rem;
  --dl-fs-sm: .875rem;
  --dl-fs-md: .9375rem;
  --dl-fs-lg: clamp(1rem, .95rem + .25vw, 1.0625rem);
  --dl-fs-xl: clamp(1.125rem, 1rem + .6vw, 1.25rem);
  --dl-fs-2xl: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
  --dl-fs-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem);

  /* Leading tightens as size rises: display text needs less of it. */
  --dl-lh-display: 1.2;
  --dl-lh-tight: 1.3;
  --dl-lh-normal: 1.45;
  --dl-lh-loose: 1.5;

  --dl-fw-medium: 500;
  --dl-fw-semibold: 600;
  --dl-fw-bold: 700;

  --dl-radius-lg: 10px;
  --dl-radius-md: 8px;
  --dl-radius-sm: 6px;
  --dl-radius-xs: 4px;
  --dl-radius-pill: 999px;
  --dl-field-h: 36px;
  --dl-field-h-sm: 32px;
  --dl-field-h-xs: 28px;
  --dl-field-pad-x: 12px;
  --dl-field-pad-y: 8px;
  --dl-field-pad-x-sm: 8px;
  --dl-field-pad-y-sm: 4px;

  --dl-list-btn-w: 112px;

  --dl-shadow-card: 0 1px 3px rgba(10, 10, 10, .06);
  --dl-shadow-lift: 0 2px 6px -2px rgba(10, 10, 10, .06), 0 10px 24px -12px rgba(10, 10, 10, .14);
  --dl-shadow-hover: 0 1px 2px rgba(10, 10, 10, .06);
  --dl-shadow-row: 0 1px 2px rgba(10, 10, 10, .05);
  --dl-ring: 0 0 0 3px rgba(10, 10, 10, .16);
  --dl-ring-danger: 0 0 0 3px rgba(185, 28, 28, .18);

  --dl-ease: .15s ease;
  --dl-ease-slow: .2s ease;

  font-family: 'Plus Jakarta Sans', 'Cairo', sans-serif;
  direction: ltr;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  padding-bottom: var(--dl-space-32);
  scroll-margin-top: 120px;
  color: var(--dl-ink);
}

.dl-authwidget *,
.dl-authwidget *::before,
.dl-authwidget *::after { box-sizing: border-box; }

.dl-authwidget img,
.dl-authwidget svg,
.dl-authwidget table,
.dl-authwidget pre { max-width: 100%; }

.dl-authwidget.dl-gate { width: 100%; max-width: 460px; min-width: 0; }

.dl-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.dl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dl-card {
  background: var(--dl-bg);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg);
  box-shadow: var(--dl-shadow-card);
  padding: var(--dl-space-24);
  animation: dlFadeIn .35s ease;
  width: 100%;
  max-width: 100%;
}

.dl-card + .dl-card { margin-top: var(--dl-space-16); }

.dl-form-panel,
.dl-filters-wrap {
  background: var(--dl-surface);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-md);
  padding: var(--dl-space-16);
  margin-bottom: var(--dl-space-20);
}

.dl-form-panel:last-child,
.dl-filters-wrap:last-child { margin-bottom: 0; }

.dl-divider {
  height: 1px;
  background: var(--dl-border);
  margin: var(--dl-space-16) 0;
  border: 0;
}

@keyframes dlFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.dl-h4 {
  font-size: var(--dl-fs-2xl);
  font-weight: var(--dl-fw-semibold);
  line-height: var(--dl-lh-display);
  letter-spacing: -.01em;
  color: var(--dl-ink);
  margin: 0 0 var(--dl-space-4);
}

.dl-subtext {
  font-size: var(--dl-fs-sm);
  color: var(--dl-muted2);
  margin: 0 0 var(--dl-space-20);
  line-height: var(--dl-lh-loose);
}

.dl-label {
  display: block;
  font-size: var(--dl-fs-sm);
  font-weight: var(--dl-fw-semibold);
  color: var(--dl-muted);
  margin-bottom: var(--dl-space-8);
}

.dl-req { color: var(--dl-danger); }

.dl-section-label {
  font-size: var(--dl-fs-2xs);
  font-weight: var(--dl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dl-muted2);
  margin: 0 0 var(--dl-space-12);
  display: flex;
  align-items: center;
  gap: var(--dl-space-8);
}

.dl-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dl-border);
}

.dl-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dl-space-12);
  margin-bottom: var(--dl-space-4);
}

.dl-header-row .dl-h4 { margin-bottom: 0; }

/* The page head card. Every page opens with one: the page title, the buttons
   that act on the whole page, and the filters or the search box that narrow
   it — all in a card of their own, above the card holding the content. */
.dl-page-head { padding: var(--dl-space-20) var(--dl-space-24); }
.dl-page-head > .dl-header-row { margin-bottom: var(--dl-space-20); }
.dl-page-head > .dl-toggle-filter-btn { margin-bottom: 0; }
.dl-page-head > .dl-toggle-filter-btn + .dl-filters-wrap:not(.dl-collapsed) {
  margin-top: var(--dl-space-16);
}
.dl-page-head > .dl-header-row:last-child,
.dl-page-head > .dl-toolbar:last-child,
.dl-page-head > .dl-filters-wrap:last-child { margin-bottom: 0; }

/* A list that opens its own card already has the card's padding above it. */
.dl-card > .dl-list:first-child,
.dl-card > .dl-row-list:first-child { margin-top: 0; }

.dl-empty-note {
  font-size: var(--dl-fs-sm);
  color: var(--dl-muted2);
  text-align: center;
  padding: var(--dl-space-8) 0;
}

.dl-empty-note.dl-note-start {
  text-align: start;
  padding: 0;
}

.dl-field {
  margin-bottom: var(--dl-space-16);
  width: 100%;
  min-width: 0;
}

.dl-field:last-child { margin-bottom: 0; }

.dl-field-group { display: flex; gap: var(--dl-space-12); }
.dl-field-group > .dl-field { flex: 1; min-width: 0; }

.dl-field-group-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dl-space-12);
}

.dl-field-group,
.dl-field-group-4 { margin-bottom: var(--dl-space-16); }

.dl-field-group:last-child,
.dl-field-group-4:last-child { margin-bottom: 0; }

.dl-field-group > .dl-field,
.dl-field-group-4 > .dl-field { margin-bottom: 0; }

.dl-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dl-space-12);
  margin-top: var(--dl-space-16);
}

.dl-input,
.dl-select,
.dl-textarea {
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  font-size: var(--dl-fs-sm);
  font-weight: var(--dl-fw-medium);
  color: var(--dl-ink);
  padding: var(--dl-field-pad-y) var(--dl-field-pad-x);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-sm);
  background: var(--dl-bg);
  transition: border-color var(--dl-ease), box-shadow var(--dl-ease);
}

.dl-authwidget .dl-input:not(.dl-input-sm),
.dl-authwidget .dl-select:not(.dl-input-sm) {
  height: var(--dl-field-h);
  min-height: var(--dl-field-h);
  line-height: 1.2;
}

.dl-textarea { resize: vertical; min-height: 70px; }

.dl-input:focus,
.dl-select:focus,
.dl-textarea:focus {
  outline: none;
  border-color: var(--dl-primary);
  box-shadow: var(--dl-ring);
}

.dl-input::placeholder,
.dl-textarea::placeholder { color: var(--dl-placeholder); }

/* The hint has done its work once the caret is in the field. */
.dl-input:focus::placeholder,
.dl-textarea:focus::placeholder { color: transparent; }

.dl-input:disabled,
.dl-select:disabled,
.dl-textarea:disabled {
  background: var(--dl-neutral-bg);
  cursor: not-allowed;
}

.dl-input-sm {
  padding: var(--dl-field-pad-y-sm) var(--dl-field-pad-x-sm);
  font-size: var(--dl-fs-xs);
}

.dl-input.dl-input-error,
.dl-select.dl-input-error,
.dl-textarea.dl-input-error,
.dl-checkbox-group.dl-input-error {
  border-color: var(--dl-danger);
  box-shadow: var(--dl-ring-danger);
  animation: dlInvalidPulse .45s ease;
}

.dl-input.dl-input-error:focus,
.dl-select.dl-input-error:focus,
.dl-textarea.dl-input-error:focus {
  outline: none;
  border-color: var(--dl-danger);
  box-shadow: var(--dl-ring-danger);
}

@keyframes dlInvalidPulse {
  0% { box-shadow: 0 0 0 0 rgba(185, 28, 28, .24); }
  100% { box-shadow: var(--dl-ring-danger); }
}

.dl-pwd-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.dl-pwd-wrap .dl-input { padding-inline-end: 42px; }

.dl-pwd-toggle {
  position: absolute;
  inset-inline-end: var(--dl-space-8);
  background: transparent;
  border: none;
  color: var(--dl-muted2);
  cursor: pointer;
  padding: var(--dl-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dl-radius-xs);
  transition: color var(--dl-ease), background var(--dl-ease);
}

.dl-pwd-toggle:hover {
  color: var(--dl-primary);
  background: var(--dl-neutral-bg);
}

.dl-pwd-toggle:focus-visible { outline: none; box-shadow: var(--dl-ring); }

.dl-input[type="password"]::-ms-reveal,
.dl-input[type="password"]::-ms-clear,
.dl-input[type="password"]::-webkit-contacts-auto-fill-button,
.dl-input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* The steppers are a target too small to aim at and too easy to hit by
   accident - a scroll over a focused field walks a quantity or a price a step
   at a time. Every number field here is typed, so the arrows only take width. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.dl-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dl-space-8);
  padding: var(--dl-space-2);
  border: 1px solid transparent;
  border-radius: var(--dl-radius-sm);
}

.dl-checkbox-pill { position: relative; }

.dl-checkbox-pill input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.dl-checkbox-pill label {
  display: inline-flex;
  align-items: center;
  padding: var(--dl-space-8) var(--dl-space-16);
  border-radius: var(--dl-radius-pill);
  border: 1px solid var(--dl-border);
  font-size: var(--dl-fs-sm);
  font-weight: var(--dl-fw-semibold);
  color: var(--dl-muted);
  cursor: pointer;
  transition: background var(--dl-ease), border-color var(--dl-ease), color var(--dl-ease);
}

.dl-checkbox-pill input:checked + label {
  background: var(--dl-active-bg);
  border-color: var(--dl-primary);
  color: var(--dl-active-text);
}

.dl-checkbox-pill input:focus-visible + label { box-shadow: 0 0 0 3px var(--dl-primary-light); }

.dl-checkbox-pill input:disabled { cursor: not-allowed; }
.dl-checkbox-pill input:disabled + label { opacity: .55; cursor: not-allowed; }

.dl-authwidget input[type="date"],
.dl-authwidget input[type="time"],
.dl-authwidget input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  text-align: start;
  background-color: var(--dl-bg);
}

.dl-authwidget input[type="date"]::-webkit-date-and-time-value,
.dl-authwidget input[type="time"]::-webkit-date-and-time-value,
.dl-authwidget input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  padding: 0;
  min-height: 0;
  line-height: 1.2;
}

.dl-authwidget input[type="date"]::-webkit-datetime-edit { padding: 0; line-height: 1.2; }
.dl-authwidget input[type="date"]::-webkit-calendar-picker-indicator { padding: 0; margin: 0; opacity: .5; }

.dl-authwidget .dl-date-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.dl-authwidget .dl-date-ph {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--dl-field-pad-x);
  transform: translateY(-50%);
  font-family: inherit;
  font-size: var(--dl-fs-sm);
  font-weight: var(--dl-fw-medium);
  color: var(--dl-placeholder);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}

.dl-authwidget .dl-date-wrap.dl-date-empty .dl-date-ph { opacity: 1; }
.dl-authwidget .dl-date-wrap.dl-date-empty input[type="date"] { color: transparent; }
.dl-authwidget .dl-date-wrap.dl-date-empty input[type="date"]:focus { color: var(--dl-ink); }
.dl-authwidget .dl-date-wrap.dl-date-empty input[type="date"]:focus + .dl-date-ph { opacity: 0; }

.dl-btn {
  font-family: inherit;
  font-size: var(--dl-fs-sm);
  font-weight: var(--dl-fw-semibold);
  line-height: 1.3;
  height: var(--dl-field-h);
  padding: 0 var(--dl-space-16);
  border-radius: var(--dl-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dl-ease), border-color var(--dl-ease), box-shadow var(--dl-ease);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.dl-btn:focus-visible { outline: none; box-shadow: var(--dl-ring); }
.dl-btn:disabled { opacity: .45; cursor: not-allowed; }

.dl-btn-primary {
  background: var(--dl-primary);
  border-color: var(--dl-primary);
  color: var(--dl-on-primary);
}

.dl-btn-primary:hover:not(:disabled) {
  background: var(--dl-primary-dark);
  border-color: var(--dl-primary-dark);
}

.dl-btn-secondary {
  background: var(--dl-bg);
  color: var(--dl-ink);
  border-color: var(--dl-border);
}

.dl-btn-secondary:hover:not(:disabled) {
  background: var(--dl-neutral-bg);
  border-color: var(--dl-border-strong);
}

.dl-btn-danger {
  border-color: var(--dl-danger-border);
  color: var(--dl-danger);
  background: var(--dl-bg);
}

.dl-btn-danger:hover:not(:disabled) { background: var(--dl-danger-bg); }

.dl-btn-tone-danger { color: var(--dl-danger); }
.dl-btn-tone-warn { color: var(--dl-warn-text); }

.dl-btn-sm { height: var(--dl-field-h-sm); padding: 0 var(--dl-space-12); font-size: var(--dl-fs-xs); }
.dl-btn-xs { height: var(--dl-field-h-xs); padding: 0 var(--dl-space-8); font-size: var(--dl-fs-2xs); border-radius: var(--dl-radius-xs); }
.dl-btn-block { display: flex; width: 100%; }

.dl-link-btn {
  font-family: inherit;
  font-size: var(--dl-fs-xs);
  font-weight: var(--dl-fw-semibold);
  color: var(--dl-primary);
  background: none;
  border: none;
  border-radius: var(--dl-radius-xs);
  padding: 3px var(--dl-space-8);
  cursor: pointer;
}

.dl-link-btn:hover:not(:disabled) { background: var(--dl-primary-light); }
.dl-link-btn:disabled { color: var(--dl-muted2); opacity: .6; cursor: not-allowed; }

.dl-authwidget .dl-is-busy {
  position: relative;
  opacity: .72;
  cursor: progress;
}

.dl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--dl-space-4);
  padding: 3px var(--dl-space-12);
  border-radius: var(--dl-radius-pill);
  font-size: var(--dl-fs-xs);
  font-weight: var(--dl-fw-semibold);
  background: var(--dl-neutral-bg);
  color: var(--dl-muted);
  border: 1px solid var(--dl-border);
}

.dl-pill + .dl-pill { margin-inline-start: var(--dl-space-8); }

.dl-pill-accent {
  background: var(--dl-active-bg);
  color: var(--dl-active-text);
  border-color: var(--dl-accent-line);
}

.dl-pill-neutral {
  background: var(--dl-neutral-bg);
  color: var(--dl-muted);
  border-color: var(--dl-border);
}

/* A pill that carries a label and the value it names, ruled apart so the two
   read as two things. Written at the call site as two nodes, never one
   sentence, so each half reaches the dictionary on its own. */
.dl-pill b {
  padding-inline-start: var(--dl-space-8);
  margin-inline-start: var(--dl-space-4);
  border-inline-start: 1px solid;
  border-inline-start-color: inherit;
  font-weight: var(--dl-fw-bold);
  unicode-bidi: isolate;
}

.dl-pill-accent b {
  border-inline-start-color: var(--dl-accent-line);
  color: var(--dl-ink);
}

.dl-pill-neutral b {
  border-inline-start-color: var(--dl-border-strong);
  color: var(--dl-ink);
}

.dl-pill-clickable {
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s ease;
}

.dl-pill-clickable:hover { opacity: .85; }

.dl-pill-success,
.dl-status-delivered,
.dl-status-paid,
.dl-due-ontrack {
  background: var(--dl-success-bg);
  color: var(--dl-success-text);
  border-color: var(--dl-success-border);
}

.dl-pill-warn,
.dl-status-partial,
.dl-due-soon,
.dl-priority-rush {
  background: var(--dl-warn-bg);
  color: var(--dl-warn-text);
  border-color: var(--dl-warn-border);
}

.dl-pill-danger,
.dl-status-unpaid,
.dl-due-overdue,
.dl-stage-attention {
  background: var(--dl-danger-bg);
  color: var(--dl-danger);
  border-color: var(--dl-danger-border);
}

.dl-status-active,
.dl-stage-pill {
  background: var(--dl-primary-light);
  color: var(--dl-primary-dark);
  border-color: var(--dl-accent-line);
}

.dl-status-void {
  background: var(--dl-neutral-bg);
  color: var(--dl-muted2);
  border-color: var(--dl-border);
  text-decoration: line-through;
}

.dl-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dl-space-20);
  height: var(--dl-space-20);
  padding: 0 var(--dl-space-4);
  border-radius: 9px;
  background: var(--dl-primary);
  color: var(--dl-on-primary);
  font-size: var(--dl-fs-2xs);
  font-weight: var(--dl-fw-semibold);
}

/* Avatar initials are sized to their circle, a fixed box, so they hold the
   ramp's desktop lg / 2xl value rather than scaling with the viewport. */
.dl-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dl-primary-light);
  border: 1px solid var(--dl-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--dl-primary-dark);
  font-weight: var(--dl-fw-semibold);
  font-size: 1.0625rem;
}

.dl-avatar svg { width: 22px; height: 22px; opacity: .8; }

.dl-avatar-lg { width: 68px; height: 68px; font-size: 1.5rem; }
.dl-avatar-lg svg { width: 34px; height: 34px; }

.dl-toolbar {
  display: flex;
  gap: var(--dl-space-12);
  margin-bottom: var(--dl-space-20);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.dl-toolbar .dl-input { max-width: 340px; }

.dl-filters-wrap {
  overflow: hidden;
  transition: max-height .3s ease, opacity var(--dl-ease-slow), padding .3s ease, margin .3s ease;
}

.dl-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--dl-space-12);
}

.dl-filters-grid .dl-field,
.dl-filters-grid > * { margin-bottom: 0; min-width: 0; }

.dl-filters-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dl-space-12);
  flex-wrap: wrap;
  margin-top: var(--dl-space-16);
}

.dl-toggle-filter-btn {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--dl-space-8);
  width: 100%;
  margin-bottom: var(--dl-space-16);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  font-size: var(--dl-fs-sm);
  font-weight: var(--dl-fw-semibold);
  color: var(--dl-ink);
  background: var(--dl-bg);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-sm);
  padding: var(--dl-field-pad-y) var(--dl-field-pad-x);
}

.dl-toggle-filter-btn .dl-toggle-left {
  display: flex;
  align-items: center;
  gap: var(--dl-space-8);
}

.dl-toggle-filter-btn svg { width: var(--dl-space-16); height: var(--dl-space-16); flex-shrink: 0; }
.dl-toggle-filter-btn .dl-chevron { transition: transform var(--dl-ease-slow); }
.dl-toggle-filter-btn[aria-expanded="true"] .dl-chevron { transform: rotate(180deg); }

.dl-row-list {
  display: flex;
  flex-direction: column;
  gap: var(--dl-space-16);
  margin-top: var(--dl-space-12);
}

.dl-row-card {
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-md);
  background: var(--dl-bg);
  padding: var(--dl-space-20);
  transition: border-color var(--dl-ease), box-shadow var(--dl-ease);
}

.dl-row-card:hover {
  border-color: var(--dl-border-strong);
  box-shadow: var(--dl-shadow-row);
}

.dl-list {
  display: flex;
  flex-direction: column;
  gap: var(--dl-space-12);
  margin-top: var(--dl-space-12);
}

.dl-list-row {
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-md);
  padding: var(--dl-space-16) var(--dl-space-16);
  transition: border-color var(--dl-ease), box-shadow var(--dl-ease);
}

.dl-list-row:hover {
  border-color: var(--dl-border-strong);
  box-shadow: var(--dl-shadow-row);
}

.dl-list-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dl-space-12);
  flex-wrap: nowrap;
}

.dl-list-main { flex: 1 1 auto; min-width: 0; }

.dl-list-main--media {
  display: flex;
  align-items: center;
  gap: var(--dl-space-12);
}

.dl-list-main--media > div:last-child { min-width: 0; }

.dl-list-actions {
  display: flex;
  align-items: center;
  gap: var(--dl-space-8);
  flex-wrap: nowrap;
  flex: 0 0 auto;
  max-width: 100%;
}

@media (min-width: 769px) {
  .dl-list-actions > .dl-btn,
  .dl-list-actions .dl-delete-confirm-group > .dl-btn {
    flex: 0 0 var(--dl-list-btn-w);
    width: var(--dl-list-btn-w);
  }
}

.dl-list-edit { display: none; }

.dl-list-row.editing .dl-list-view { display: none; }
.dl-list-row.editing .dl-list-edit { display: block; }

.dl-list-row.deleting .dl-list-view { flex-wrap: wrap; }
.dl-list-row.deleting .dl-edit-btn,
.dl-list-row.deleting .dl-delete-btn,
.dl-list-row.deleting .dl-archive-btn,
.dl-list-row.deleting .dl-unarchive-btn { display: none; }
.dl-list-row.deleting .dl-delete-confirm-group { display: flex; animation: dlFadeIn .2s ease; }

.dl-list-name {
  font-size: var(--dl-fs-lg);
  font-weight: var(--dl-fw-semibold);
  color: var(--dl-ink);
  margin: 0 0 var(--dl-space-8);
  line-height: var(--dl-lh-tight);
  overflow-wrap: anywhere;
}

.dl-list-name .dl-pill {
  height: 22px;
  padding: 0 var(--dl-space-12);
  font-size: var(--dl-fs-xs);
  line-height: 1;
  vertical-align: middle;
  margin-inline-start: var(--dl-space-8);
}

.dl-list-sub {
  margin: 0 0 var(--dl-space-8);
  font-size: var(--dl-fs-xs);
  color: var(--dl-muted2);
  font-weight: var(--dl-fw-medium);
}

.dl-list-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dl-space-8);
}

.dl-list-pills .dl-pill + .dl-pill { margin-inline-start: 0; }

/* A row that is archived or switched off keeps its actions at full strength —
   they are how it comes back — and fades only what it says about itself. */
.dl-list-row.inactive .dl-list-main { opacity: .55; }

@media (max-width: 768px) {
  .dl-list-view { flex-wrap: wrap; row-gap: var(--dl-space-16); }
  .dl-list-actions { width: 100%; gap: var(--dl-space-12); flex-wrap: wrap; }
  .dl-list-actions > .dl-btn,
  .dl-list-actions .dl-delete-confirm-group > .dl-btn { flex: 1 1 0; min-width: 0; }
  .dl-list-actions .dl-delete-confirm-group { width: 100%; }
  .dl-confirm-text { width: 100%; margin-inline-end: 0; }

  .dl-form-actions > .dl-btn { flex: 1 1 0; min-width: 0; }

  .dl-header-row { flex-direction: column; align-items: stretch; gap: var(--dl-space-16); }
  .dl-header-row .dl-btn { width: 100%; display: flex; }
  .dl-toolbar { flex-direction: column; align-items: stretch; gap: var(--dl-space-16); }
  .dl-filters-grid,
  .dl-filters-foot { row-gap: var(--dl-space-16); }
}

.dl-delete-confirm-group {
  display: none;
  gap: var(--dl-space-8);
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.dl-confirm-text {
  font-size: var(--dl-fs-sm);
  font-weight: var(--dl-fw-semibold);
  color: var(--dl-danger);
  margin-inline-end: var(--dl-space-4);
}

.dl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--dl-space-40) 0;
  text-align: center;
  color: var(--dl-muted2);
}

.dl-empty-state svg {
  width: 44px;
  height: 44px;
  margin-bottom: var(--dl-space-12);
  opacity: .35;
}

.dl-empty-state p { margin: 0; font-size: var(--dl-fs-sm); }

.dl-skeleton {
  height: 190px;
  border-radius: var(--dl-radius-md);
  margin-bottom: var(--dl-space-16);
  background: linear-gradient(90deg, var(--dl-neutral-bg) 25%, var(--dl-shimmer) 37%, var(--dl-neutral-bg) 63%);
  background-size: 400% 100%;
  animation: dlShimmer 1.4s ease infinite;
}

.dl-skeleton-sm { height: 70px; }

.dl-pagination-container {
  display: flex;
  align-items: center;
  gap: var(--dl-space-8);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: var(--dl-space-20);
}

.dl-page-btn {
  min-width: var(--dl-space-32);
  height: var(--dl-space-32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dl-border);
  border-radius: 7px;
  background: var(--dl-bg);
  color: var(--dl-ink);
  font-family: inherit;
  font-size: var(--dl-fs-sm);
  font-weight: var(--dl-fw-semibold);
  cursor: pointer;
  padding: 0 var(--dl-space-8);
  transition: background var(--dl-ease), border-color var(--dl-ease), color var(--dl-ease);
}

.dl-page-btn:hover:not(:disabled) {
  background: var(--dl-neutral-bg);
  border-color: var(--dl-border-strong);
}

.dl-page-btn:disabled { opacity: .4; cursor: not-allowed; }

.dl-page-btn.dl-page-active {
  background: var(--dl-primary);
  color: var(--dl-on-primary);
  border-color: var(--dl-primary);
  pointer-events: none;
}

.dl-page-dots { color: var(--dl-muted); font-weight: var(--dl-fw-semibold); padding: 0 var(--dl-space-4); }

.dl-toast-stack {
  position: fixed;
  inset-block-end: var(--dl-space-16);
  inset-inline: var(--dl-space-16);
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  gap: var(--dl-space-12);
  align-items: stretch;
  width: auto;
  max-width: min(420px, calc(100vw - 2 * var(--dl-space-16)));
  margin-inline: auto;
  padding: 0;
  pointer-events: none;
}

.dl-toast {
  pointer-events: auto;
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--dl-space-12);
  padding-block: var(--dl-space-12) var(--dl-space-16);
  padding-inline: var(--dl-space-16) var(--dl-space-12);
  border-radius: var(--dl-radius-md);
  background-color: var(--dl-ink);
  background-image: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 3px;
  animation-name: dl-toast-countdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  color: #FFFFFF;
  font-size: var(--dl-fs-sm);
  font-weight: var(--dl-fw-semibold);
  line-height: var(--dl-lh-normal);
  box-shadow: var(--dl-shadow-lift);
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
  overflow: hidden;
}

.dl-toast.dl-toast-in { opacity: 1; transform: translateY(0) scale(1); }
.dl-toast.dl-toast-out { opacity: 0; transform: translateY(-10px) scale(.98); }

.dl-toast-success { background-color: var(--dl-success-text); color: #FFFFFF; }
.dl-toast-error { background-color: var(--dl-danger); color: #FFFFFF; }
.dl-toast-warn { background-color: var(--dl-warn-solid); color: #FFFFFF; }
.dl-toast-info { background-color: var(--dl-ink); color: #FFFFFF; }

.dl-toast-icon { flex: 0 0 auto; width: var(--dl-space-20); height: var(--dl-space-20); margin-top: 1px; }
.dl-toast-icon svg { display: block; width: var(--dl-space-20); height: var(--dl-space-20); }

.dl-toast-body { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }

.dl-toast-extra {
  display: flex;
  align-items: center;
  gap: var(--dl-space-8);
  margin-top: var(--dl-space-12);
}

.dl-toast-link {
  flex: 1 1 auto;
  min-width: 0;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--dl-fs-xs);
  font-weight: var(--dl-fw-medium);
  background: rgba(255, 255, 255, .18);
  padding: var(--dl-space-8) var(--dl-space-8);
  border-radius: var(--dl-radius-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-toast-action {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--dl-fs-xs);
  font-weight: var(--dl-fw-semibold);
  padding: 7px 11px;
  border: none;
  border-radius: var(--dl-radius-xs);
  background: rgba(255, 255, 255, .94);
  color: var(--dl-ink);
  cursor: pointer;
  white-space: nowrap;
}

.dl-toast-action:hover { opacity: .85; }

.dl-toast-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-block: -3px 0;
  margin-inline: 0 -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--dl-radius-xs);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .7;
  -webkit-appearance: none;
  appearance: none;
}

.dl-toast-close svg { display: block; width: 13px; height: 13px; }
.dl-toast-close:hover { opacity: 1; background: rgba(255, 255, 255, .20); }
.dl-toast-paused { animation-play-state: paused; }

@keyframes dl-toast-countdown {
  from { background-size: 100% 3px; }
  to { background-size: 0% 3px; }
}

.dl-authwidget .dl-tooth-g {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dl-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dl-space-16);
  background: var(--dl-scrim);
  animation: dlFadeIn var(--dl-ease-slow);
  margin: 0;
}

.dl-modal-card {
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--dl-space-20);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg);
  background: var(--dl-bg);
  box-shadow: var(--dl-shadow-lift);
}

.dl-modal-card.dl-modal-wide { max-width: 720px; }

.dl-modal-head {
  display: flex;
  align-items: center;
  gap: var(--dl-space-12);
  margin-bottom: var(--dl-space-12);
}

.dl-modal-head .dl-section-label { flex: 1; min-width: 0; margin: 0; }

.dl-modal-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--dl-border);
  border-radius: 50%;
  background: var(--dl-surface);
  color: var(--dl-muted2);
  cursor: pointer;
  transition: background var(--dl-ease), border-color var(--dl-ease), color var(--dl-ease);
}

.dl-modal-close:hover {
  background: var(--dl-neutral-bg);
  border-color: var(--dl-border-strong);
  color: var(--dl-ink);
}

.dl-modal-close:focus-visible { outline: none; box-shadow: var(--dl-ring); }
.dl-modal-close svg { display: block; width: 11px; height: 11px; }

.dl-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--dl-space-8);
  margin-top: var(--dl-space-16);
}

.dl-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-md);
  -webkit-overflow-scrolling: touch;
}

.dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dl-fs-sm);
}

.dl-table thead th {
  position: sticky;
  top: 0;
  background: var(--dl-surface);
  text-align: start;
  font-weight: var(--dl-fw-semibold);
  font-size: var(--dl-fs-2xs);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--dl-muted2);
  padding: 11px var(--dl-space-12);
  border-bottom: 1px solid var(--dl-border);
  white-space: nowrap;
}

.dl-table tbody td {
  padding: 11px var(--dl-space-12);
  border-bottom: 1px solid var(--dl-border);
  color: var(--dl-ink);
  vertical-align: top;
}

.dl-table tbody tr:last-child td { border-bottom: none; }
.dl-table tbody tr:hover { background: var(--dl-surface); }

.dl-table tfoot td {
  padding: 11px var(--dl-space-12);
  border-top: 2px solid var(--dl-border-strong);
  font-weight: var(--dl-fw-bold);
  background: var(--dl-surface);
}

.dl-table .dl-num,
.dl-doc-table .dl-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.dl-table-empty {
  text-align: center;
  padding: 28px var(--dl-space-12);
  color: var(--dl-muted2);
  font-size: var(--dl-fs-sm);
}

.dl-strong { font-weight: var(--dl-fw-semibold); }
.dl-muted { color: var(--dl-muted2); font-size: var(--dl-fs-xs); }

.dl-link {
  color: var(--dl-ink);
  font-weight: var(--dl-fw-semibold);
  text-decoration: underline;
  text-decoration-color: var(--dl-muted2);
  text-underline-offset: 3px;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.dl-link:hover,
.dl-link:focus-visible { text-decoration-color: var(--dl-ink); }

/* A printable document — an invoice, a statement. Off the screen entirely,
   and the only thing on the paper. */
.dl-print-doc { display: none; }

@media print {
  .dl-authwidget > :not(.dl-print-doc) { display: none !important; }
  .dl-authwidget { padding: 0; overflow: visible; }
  .dl-print-doc { display: block; }
  .dl-modal { display: none !important; }
}

.dl-print-doc {
  color: var(--dl-ink);
  font-size: var(--dl-fs-md);
  line-height: var(--dl-lh-normal);
}

.dl-doc-head {
  display: flex;
  justify-content: space-between;
  gap: var(--dl-space-20);
  align-items: flex-start;
  padding-bottom: var(--dl-space-16);
  border-bottom: 2px solid var(--dl-ink);
  margin-bottom: var(--dl-space-20);
}

.dl-doc-title {
  font-size: var(--dl-fs-2xl);
  line-height: var(--dl-lh-display);
  font-weight: var(--dl-fw-bold);
  margin: 0 0 var(--dl-space-8);
}

.dl-doc-lab { font-weight: var(--dl-fw-semibold); font-size: var(--dl-fs-xl); margin: 0; }
.dl-doc-line { margin: 0; color: var(--dl-muted); }

.dl-doc-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dl-space-20);
  margin-bottom: var(--dl-space-20);
}

.dl-doc-parties .dl-section-label::after { display: none; }

.dl-doc-table { width: 100%; border-collapse: collapse; margin-bottom: var(--dl-space-20); }

.dl-doc-table th,
.dl-doc-table td {
  padding: var(--dl-space-8) var(--dl-space-12);
  border-bottom: 1px solid var(--dl-border);
  text-align: start;
  vertical-align: top;
}

.dl-doc-table th {
  font-size: var(--dl-fs-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dl-muted2);
  border-bottom: 1px solid var(--dl-border-strong);
}

.dl-doc-table tfoot td { font-weight: var(--dl-fw-semibold); border-bottom: none; }
.dl-doc-table tfoot .dl-doc-grand td { font-size: var(--dl-fs-xl); border-top: 2px solid var(--dl-ink); }

.dl-doc-foot {
  margin-top: var(--dl-space-32);
  color: var(--dl-muted2);
  font-size: var(--dl-fs-xs);
}

@media (max-width: 768px) {
  .dl-toggle-filter-btn { display: flex; }
  .dl-filters-wrap { max-height: 1200px; opacity: 1; }
  .dl-filters-wrap.dl-collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-color: transparent;
  }
}

@media (min-width: 769px) {
  .dl-filters-wrap.dl-collapsed {
    max-height: none;
    opacity: 1;
    padding: var(--dl-space-16);
    margin-bottom: var(--dl-space-20);
    border-color: var(--dl-border);
  }
}

@media (max-width: 600px) {
  .dl-card { padding: var(--dl-space-20) var(--dl-space-16); }
  .dl-field-group { flex-direction: column; gap: var(--dl-space-16); }
  .dl-field-group-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dl-space-16) var(--dl-space-12); }
  .dl-toolbar .dl-input { max-width: 100%; }

  /* Pills stop sizing to their own text and share the row evenly, so a column
     of them reads as a column instead of a ragged edge. A row that carries an
     avatar beside its text gives that text the width to share out. */
  .dl-list-main--media > div:last-child { flex: 1 1 auto; }

  .dl-list-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  }

  .dl-list-pills .dl-pill { justify-content: space-between; }

  .dl-authwidget { --dl-field-h: 44px; }

  .dl-authwidget .dl-btn,
  .dl-authwidget button,
  .dl-authwidget select,
  .dl-authwidget [role="button"] { min-height: 44px; }

  .dl-authwidget .dl-toast-close,
  .dl-authwidget .dl-toast-action,
  .dl-authwidget .dl-chip-remove,
  .dl-authwidget .dl-link-btn,
  .dl-authwidget .dl-file-remove { min-height: 0; }

  .dl-authwidget .dl-input,
  .dl-authwidget .dl-select,
  .dl-authwidget input,
  .dl-authwidget select,
  .dl-authwidget textarea { font-size: 16px; }

  .dl-authwidget .dl-date-ph { font-size: 16px; }
  .dl-authwidget .dl-pwd-toggle { min-width: 44px; min-height: 44px; }

  /* The 44px touch floor would stretch the round close button into an oval;
     it keeps its own size and stays a circle. */
  .dl-authwidget .dl-modal-close { width: 32px; height: 32px; min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-card { animation: none; }
  .dl-toast { transition: none; animation: none; background-size: 0 3px; }
  .dl-skeleton { animation: none; }
  .dl-input.dl-input-error,
  .dl-select.dl-input-error,
  .dl-textarea.dl-input-error,
  .dl-checkbox-group.dl-input-error { animation: none; }
}

@media print {
  .dl-toast-stack,
  .dl-pagination-container,
  .dl-toggle-filter-btn { display: none !important; }
  .dl-card { box-shadow: none; break-inside: avoid; }
}