/* ============================================================================
   DERWENT LONDON - Components
   ============================================================================
   Framework-agnostic component styles.
   Depends on: tokens.css, foundations.css
   ============================================================================ */


/* ============================================================================
   BUTTONS
   ============================================================================
   Option A colour system — locked April 2026.

   Primary (dl-btn--primary): sage fill (#95b7aa), forest text. The standard
   positive action across all tools and layouts.

   Secondary (dl-btn--secondary): sage outline. Supporting action on the same
   screen as a primary.

   Ghost (dl-btn--ghost): no background, no border. Header chrome, tertiary.

   Accent (dl-btn--accent): lime fill (#d1d82c). Reserved for the single
   highest-urgency CTA per screen (Send, Publish, Export). One per screen max.

   Danger (dl-btn--danger): error red. Destructive/irreversible actions only.

   Tokens: primary colour is --dl-interactive-default = var(--dl-sage).
   Hover = #a8c5b9, Active = #8fb0a3 in both light and dark modes.
   ============================================================================ */

.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dl-space-2);
  height: var(--dl-button-height-md);
  padding-inline: var(--dl-space-6);
  font-family: var(--dl-font-primary);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-wider);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: var(--dl-border-width-thin) solid transparent;
  border-radius: var(--dl-radius-button);
  cursor: pointer;
  transition: var(--dl-transition-colors), var(--dl-transition-shadow);
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.dl-btn:focus-visible {
  box-shadow: var(--dl-focus-ring);
}

.dl-btn:disabled,
.dl-btn[aria-disabled="true"] {
  opacity: var(--dl-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary - context-aware.
   Light surfaces: forest fill, white text (high contrast on cream/white).
   Dark surfaces:  sage fill,  forest text (soft on charcoal chrome). */
.dl-btn--primary {
  background-color: var(--dl-forest);
  color: var(--dl-white);
  border-color: var(--dl-forest);
}

.dl-btn--primary:hover {
  background-color: #4a5740;
  border-color: #4a5740;
}

.dl-btn--primary:active {
  background-color: #354029;
  border-color: #354029;
}

[data-theme="dark"] .dl-btn--primary,
.dl-dark .dl-btn--primary {
  background-color: var(--dl-sage);
  color: var(--dl-forest);
  border-color: var(--dl-sage);
}
[data-theme="dark"] .dl-btn--primary:hover,
.dl-dark .dl-btn--primary:hover  { background-color: #a8c5b9; border-color: #a8c5b9; }
[data-theme="dark"] .dl-btn--primary:active,
.dl-dark .dl-btn--primary:active { background-color: #8fb0a3; border-color: #8fb0a3; }

/* Secondary - context-aware outline.
   Light: forest outline, forest text.
   Dark:  sage outline,   sage text. */
.dl-btn--secondary {
  background-color: transparent;
  color: var(--dl-forest);
  border-color: var(--dl-forest);
}

.dl-btn--secondary:hover {
  background-color: rgba(63, 74, 52, 0.08);
  color: var(--dl-forest);
}

.dl-btn--secondary:active {
  background-color: rgba(63, 74, 52, 0.14);
  border-color: #354029;
  color: #354029;
}

[data-theme="dark"] .dl-btn--secondary,
.dl-dark .dl-btn--secondary {
  color: var(--dl-sage);
  border-color: var(--dl-sage);
}
[data-theme="dark"] .dl-btn--secondary:hover,
.dl-dark .dl-btn--secondary:hover  { background-color: rgba(149,183,170,0.12); color: var(--dl-sage); }
[data-theme="dark"] .dl-btn--secondary:active,
.dl-dark .dl-btn--secondary:active { background-color: rgba(149,183,170,0.2); border-color: #8fb0a3; color: #8fb0a3; }

/* .dl-light — forces light-context button tokens inside an otherwise
   dark-themed page (e.g. showcase "Light content context" panels). */
.dl-light .dl-btn--primary {
  background-color: var(--dl-forest);
  color: var(--dl-white);
  border-color: var(--dl-forest);
}
.dl-light .dl-btn--primary:hover  { background-color: #4a5740; border-color: #4a5740; }
.dl-light .dl-btn--primary:active { background-color: #354029; border-color: #354029; }

.dl-light .dl-btn--secondary {
  background-color: transparent;
  color: var(--dl-forest);
  border-color: var(--dl-forest);
}
.dl-light .dl-btn--secondary:hover  { background-color: rgba(63,74,52,0.08); color: var(--dl-forest); }
.dl-light .dl-btn--secondary:active { background-color: rgba(63,74,52,0.14); border-color: #354029; color: #354029; }

.dl-light .dl-btn--ghost {
  color: var(--dl-text-primary);
}
.dl-light .dl-btn--ghost:hover  { background-color: rgba(0,0,0,var(--dl-opacity-hover)); }
.dl-light .dl-btn--ghost:active { background-color: rgba(0,0,0,var(--dl-opacity-pressed)); }

/* Ghost - text only */
.dl-btn--ghost {
  background-color: transparent;
  color: var(--dl-text-primary);
  border-color: transparent;
  padding-inline: var(--dl-space-3);
}

.dl-btn--ghost:hover {
  background-color: rgba(0, 0, 0, var(--dl-opacity-hover));
}

[data-theme="dark"] .dl-btn--ghost,
.dl-dark .dl-btn--ghost {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .dl-btn--ghost:hover,
.dl-dark .dl-btn--ghost:hover {
  background-color: rgba(255, 255, 255, var(--dl-opacity-hover));
  color: #fff;
}

.dl-btn--ghost:active {
  background-color: rgba(0, 0, 0, var(--dl-opacity-pressed));
}

/* Accent - lime/amber CTA */
.dl-btn--accent {
  background-color: var(--dl-lime);
  color: var(--dl-black);
  border-color: var(--dl-lime);
}

.dl-btn--accent:hover {
  background-color: var(--dl-lime-90);
  border-color: var(--dl-lime-90);
}

.dl-btn--accent:active {
  background-color: var(--dl-lime-80);
  border-color: var(--dl-lime-80);
}

/* Danger */
.dl-btn--danger {
  background-color: var(--dl-status-error);
  color: var(--dl-white);
  border-color: var(--dl-status-error);
}

.dl-btn--danger:hover {
  background-color: #a83a2e;
  border-color: #a83a2e;
}

/* Sizes */
.dl-btn--sm {
  height: var(--dl-button-height-sm);
  padding-inline: var(--dl-space-4);
  font-size: var(--dl-text-xs);
}

.dl-btn--lg {
  height: var(--dl-button-height-lg);
  padding-inline: var(--dl-space-8);
  font-size: var(--dl-text-base);
}

/* Icon-only */
.dl-btn--icon {
  width: var(--dl-button-height-md);
  padding: 0;
}

.dl-btn--icon.dl-btn--sm { width: var(--dl-button-height-sm); }
.dl-btn--icon.dl-btn--lg { width: var(--dl-button-height-lg); }

/* Full width */
.dl-btn--full {
  width: 100%;
}

/* Loading state */
.dl-btn.dl-btn--loading {
  color: transparent;
  pointer-events: none;
}

.dl-btn--loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--dl-radius-full);
  animation: dl-spin 600ms linear infinite;
}

.dl-btn--primary.dl-btn--loading::after { border-color: var(--dl-white); border-right-color: transparent; }
[data-theme="dark"] .dl-btn--primary.dl-btn--loading::after,
.dl-dark .dl-btn--primary.dl-btn--loading::after { border-color: var(--dl-forest); border-right-color: transparent; }

@keyframes dl-spin {
  to { transform: rotate(360deg); }
}

/* Button group */
.dl-btn-group {
  display: inline-flex;
  gap: var(--dl-space-2);
}

/* Button with leading/trailing icon — gap already set on base .dl-btn */
.dl-btn svg,
.dl-btn i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Icon-only button — bigger svg */
.dl-btn.dl-btn--icon svg,
.dl-btn.dl-btn--icon i {
  width: 18px;
  height: 18px;
}

[data-theme="dark"] .dl-btn--ghost.dl-btn--icon svg,
.dl-dark .dl-btn--ghost.dl-btn--icon svg {
  stroke: #fff;
  opacity: 0.9;
}
[data-theme="dark"] .dl-btn--ghost.dl-btn--icon:hover svg,
.dl-dark .dl-btn--ghost.dl-btn--icon:hover svg {
  opacity: 1;
}

/* ── State simulation classes (for documentation only, not production) ──── */
/* Mirror exact :hover/:active/:focus-visible pseudo-class values so        */
/* developers can see every state as a static snapshot.                     */

.dl-btn--primary.is-hover   { background-color: #4a5740; border-color: #4a5740; }
.dl-btn--primary.is-active  { background-color: #354029; border-color: #354029; }
.dl-btn--primary.is-focus   { box-shadow: var(--dl-focus-ring); outline: none; }

[data-theme="dark"] .dl-btn--primary.is-hover,
.dl-dark .dl-btn--primary.is-hover   { background-color: #a8c5b9; border-color: #a8c5b9; }
[data-theme="dark"] .dl-btn--primary.is-active,
.dl-dark .dl-btn--primary.is-active  { background-color: #8fb0a3; border-color: #8fb0a3; }

.dl-btn--secondary.is-hover  { background-color: rgba(63,74,52,0.08); }
.dl-btn--secondary.is-active { background-color: rgba(63,74,52,0.14); border-color: #354029; color: #354029; }
.dl-btn--secondary.is-focus  { box-shadow: var(--dl-focus-ring); outline: none; }

[data-theme="dark"] .dl-btn--secondary.is-hover,
.dl-dark .dl-btn--secondary.is-hover  { background-color: rgba(149,183,170,0.12); color: var(--dl-sage); }
[data-theme="dark"] .dl-btn--secondary.is-active,
.dl-dark .dl-btn--secondary.is-active { background-color: rgba(149,183,170,0.2); border-color: #8fb0a3; color: #8fb0a3; }

.dl-light .dl-btn--primary.is-hover  { background-color: #4a5740; border-color: #4a5740; }
.dl-light .dl-btn--primary.is-active { background-color: #354029; border-color: #354029; }
.dl-light .dl-btn--secondary.is-hover  { background-color: rgba(63,74,52,0.08); color: var(--dl-forest); }
.dl-light .dl-btn--secondary.is-active { background-color: rgba(63,74,52,0.14); border-color: #354029; color: #354029; }
.dl-light .dl-btn--ghost.is-hover  { background-color: rgba(0,0,0,var(--dl-opacity-hover)); }
.dl-light .dl-btn--ghost.is-active { background-color: rgba(0,0,0,var(--dl-opacity-pressed)); }

.dl-btn--ghost.is-hover  { background-color: rgba(0,0,0,var(--dl-opacity-hover)); }
.dl-btn--ghost.is-active { background-color: rgba(0,0,0,var(--dl-opacity-pressed)); }
.dl-btn--ghost.is-focus  { box-shadow: var(--dl-focus-ring); outline: none; }

[data-theme="dark"] .dl-btn--ghost.is-hover,
.dl-dark .dl-btn--ghost.is-hover  { background-color: rgba(255,255,255,var(--dl-opacity-hover)); }
[data-theme="dark"] .dl-btn--ghost.is-active,
.dl-dark .dl-btn--ghost.is-active { background-color: rgba(255,255,255,var(--dl-opacity-pressed)); }

.dl-btn--accent.is-hover  { background-color: var(--dl-lime-90); border-color: var(--dl-lime-90); }
.dl-btn--accent.is-active { background-color: var(--dl-lime-80); border-color: var(--dl-lime-80); }
.dl-btn--accent.is-focus  { box-shadow: var(--dl-focus-ring); outline: none; }

.dl-btn--danger.is-hover  { background-color: #a83a2e; border-color: #a83a2e; }
.dl-btn--danger.is-active { background-color: #8c2f24; border-color: #8c2f24; }
.dl-btn--danger.is-focus  { box-shadow: var(--dl-focus-ring); outline: none; }


/* ============================================================================
   FORM INPUTS
   ============================================================================ */

.dl-input {
  display: block;
  width: 100%;
  height: var(--dl-input-height-md);
  padding: var(--dl-space-2) var(--dl-space-4);
  font-family: var(--dl-font-primary);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-light);
  letter-spacing: var(--dl-tracking-wide);
  color: var(--dl-text-primary);
  background-color: var(--dl-surface-primary);
  border: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-default);
  border-radius: var(--dl-radius-input);
  transition: var(--dl-transition-colors);
  appearance: none;
}

.dl-input::placeholder {
  color: var(--dl-text-tertiary);
  opacity: var(--dl-opacity-placeholder);
}

.dl-input:hover {
  border-color: var(--dl-mid-grey);
}

.dl-input:focus {
  border-color: var(--dl-border-focus);
  box-shadow: var(--dl-focus-ring);
}

.dl-input:disabled {
  opacity: var(--dl-opacity-disabled);
  cursor: not-allowed;
  background-color: var(--dl-surface-secondary);
}

/* Input sizes */
.dl-input--sm { height: var(--dl-input-height-sm); font-size: var(--dl-text-sm); padding: var(--dl-space-1) var(--dl-space-3); }
.dl-input--lg { height: var(--dl-input-height-lg); font-size: var(--dl-text-md); padding: var(--dl-space-3) var(--dl-space-5); }

/* Textarea */
.dl-textarea {
  min-height: 120px;
  height: auto;
  resize: vertical;
}

/* Validation states */
.dl-input--error {
  border-color: var(--dl-status-error);
}

.dl-input--error:focus {
  border-color: var(--dl-status-error);
  box-shadow: 0 0 0 var(--dl-focus-ring-offset) var(--dl-surface-primary),
              0 0 0 calc(var(--dl-focus-ring-offset) + var(--dl-focus-ring-width)) var(--dl-status-error);
}

.dl-input--success {
  border-color: var(--dl-status-success);
}

/* Field wrapper */
.dl-field {
  display: flex;
  flex-direction: column;
  gap: var(--dl-space-1-5);
}

.dl-field__label {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-wide);
  color: var(--dl-text-primary);
}

.dl-field__label--required::after {
  content: ' *';
  color: var(--dl-status-error);
}

.dl-field__hint {
  font-size: var(--dl-text-xs);
  color: var(--dl-text-secondary);
}

.dl-field__error {
  font-size: var(--dl-text-xs);
  color: var(--dl-status-error);
}

/* Select */
.dl-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23303439' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--dl-space-4) center;
  padding-right: var(--dl-space-10);
}

/* Checkbox & Radio */
.dl-checkbox,
.dl-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--dl-space-2);
  cursor: pointer;
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
}

.dl-checkbox__input,
.dl-radio__input {
  width: 20px;
  height: 20px;
  border: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-default);
  appearance: none;
  cursor: pointer;
  transition: var(--dl-transition-colors);
  flex-shrink: 0;
}

.dl-checkbox__input { border-radius: var(--dl-radius-xs); }
.dl-radio__input { border-radius: var(--dl-radius-full); }

.dl-checkbox__input:checked,
.dl-radio__input:checked {
  background-color: var(--dl-interactive-default);
  border-color: var(--dl-interactive-default);
}

.dl-checkbox__input:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.dl-radio__input:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='3' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.dl-checkbox__input:focus-visible,
.dl-radio__input:focus-visible {
  box-shadow: var(--dl-focus-ring);
}

/* Toggle / Switch */
.dl-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--dl-warm-grey);
  border-radius: var(--dl-radius-full);
  cursor: pointer;
  transition: background-color var(--dl-duration-fast) var(--dl-ease-standard);
}

.dl-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--dl-white);
  border-radius: var(--dl-radius-full);
  box-shadow: var(--dl-shadow-sm);
  transition: transform var(--dl-duration-fast) var(--dl-ease-standard);
}

.dl-toggle[aria-checked="true"],
.dl-toggle.dl-toggle--active {
  background-color: var(--dl-forest);
}

.dl-toggle[aria-checked="true"]::after,
.dl-toggle.dl-toggle--active::after {
  transform: translateX(20px);
}


/* ============================================================================
   CARDS
   ============================================================================
   Apple HIG influence: content takes priority. The container defers to
   what's inside it. Clean edges, subtle elevation, generous spacing.
   ============================================================================ */

.dl-card {
  display: flex;
  flex-direction: column;
  background-color: var(--dl-surface-elevated);
  border-radius: var(--dl-radius-card);
  overflow: hidden;
  transition: var(--dl-transition-shadow), var(--dl-transition-transform);
}

.dl-card--elevated {
  box-shadow: var(--dl-shadow-sm);
}

.dl-card--elevated:hover {
  box-shadow: var(--dl-shadow-md);
}

.dl-card--outlined {
  border: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-default);
}

.dl-card--interactive {
  cursor: pointer;
}

.dl-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--dl-shadow-lg);
}

.dl-card--interactive:active {
  transform: translateY(0);
  box-shadow: var(--dl-shadow-sm);
}

.dl-card__media {
  width: 100%;
  aspect-ratio: var(--dl-ratio-landscape);
  overflow: hidden;
}

.dl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dl-duration-slow) var(--dl-ease-standard);
}

.dl-card--interactive:hover .dl-card__media img {
  transform: scale(1.03);
}

.dl-card__body {
  flex: 1;
  padding: var(--dl-space-6);
}

.dl-card__title {
  font-size: var(--dl-text-lg);
  font-weight: var(--dl-weight-medium);
  line-height: var(--dl-leading-snug);
}

.dl-card__subtitle {
  font-size: var(--dl-text-sm);
  color: var(--dl-text-secondary);
  margin-top: var(--dl-space-1);
}

.dl-card__text {
  margin-top: var(--dl-space-3);
  color: var(--dl-text-secondary);
  font-size: var(--dl-text-sm);
  line-height: var(--dl-leading-relaxed);
}

.dl-card__footer {
  padding: var(--dl-space-4) var(--dl-space-6);
  border-top: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-subtle);
}

/* Property card - specific to Derwent */
.dl-card--property .dl-card__media {
  aspect-ratio: var(--dl-ratio-photo);
}

.dl-card--property .dl-card__body {
  padding: var(--dl-space-5);
}

/* Stat card */
.dl-card--stat {
  text-align: center;
  padding: var(--dl-space-8) var(--dl-space-6);
}

.dl-card--stat .dl-card__value {
  font-size: var(--dl-text-4xl);
  font-weight: var(--dl-weight-bold);
  line-height: var(--dl-leading-none);
}

.dl-card--stat .dl-card__label {
  font-size: var(--dl-text-sm);
  color: var(--dl-text-secondary);
  margin-top: var(--dl-space-2);
  letter-spacing: var(--dl-tracking-wider);
}


/* ============================================================================
   NAVIGATION
   ============================================================================ */

/* Top bar */
.dl-header {
  position: sticky;
  top: 0;
  z-index: var(--dl-z-header);
  height: var(--dl-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--dl-container-pad);
  background-color: var(--dl-surface-primary);
  border-bottom: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dl-header--transparent {
  background-color: transparent;
  border-bottom: none;
}

.dl-header__logo img {
  height: 20px;
  width: auto;
}

.dl-header__nav {
  display: flex;
  align-items: center;
  gap: var(--dl-space-8);
}

.dl-header__link {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-regular);
  letter-spacing: var(--dl-tracking-wider);
  color: var(--dl-text-primary);
  transition: var(--dl-transition-colors);
  padding: var(--dl-space-2) 0;
  position: relative;
}

.dl-header__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--dl-text-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dl-duration-normal) var(--dl-ease-standard);
}

.dl-header__link:hover::after,
.dl-header__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Breadcrumbs */
.dl-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--dl-space-2);
  font-size: var(--dl-text-sm);
  color: var(--dl-text-secondary);
}

.dl-breadcrumbs__separator {
  color: var(--dl-text-tertiary);
}

.dl-breadcrumbs__current {
  color: var(--dl-text-primary);
  font-weight: var(--dl-weight-medium);
}

/* Tabs */
.dl-tabs {
  display: flex;
  gap: var(--dl-space-1);
  border-bottom: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-default);
}

.dl-tab {
  padding: var(--dl-space-3) var(--dl-space-4);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-regular);
  letter-spacing: var(--dl-tracking-wide);
  color: var(--dl-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--dl-transition-colors);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.dl-tab:hover {
  color: var(--dl-text-primary);
}

.dl-tab[aria-selected="true"],
.dl-tab--active {
  color: var(--dl-text-primary);
  font-weight: var(--dl-weight-medium);
  border-bottom-color: var(--dl-text-primary);
}

/* Sidebar nav */
.dl-sidenav {
  display: flex;
  flex-direction: column;
  gap: var(--dl-space-0-5);
}

.dl-sidenav__item {
  padding: var(--dl-space-2) var(--dl-space-4);
  font-size: var(--dl-text-sm);
  color: var(--dl-text-secondary);
  border-radius: var(--dl-radius-sm);
  transition: var(--dl-transition-colors);
}

.dl-sidenav__item:hover {
  color: var(--dl-text-primary);
  background-color: var(--dl-surface-secondary);
}

.dl-sidenav__item[aria-current="page"],
.dl-sidenav__item--active {
  color: var(--dl-text-primary);
  font-weight: var(--dl-weight-medium);
  background-color: var(--dl-surface-secondary);
}


/* ============================================================================
   BADGES, TAGS, CHIPS
   ============================================================================ */

.dl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dl-space-1);
  padding: var(--dl-space-0-5) var(--dl-space-2-5);
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-wider);
  border-radius: var(--dl-radius-badge);
  line-height: var(--dl-leading-normal);
}

.dl-badge--neutral {
  background-color: var(--dl-surface-secondary);
  color: var(--dl-text-primary);
}

.dl-badge--success {
  background-color: var(--dl-status-success-bg);
  color: var(--dl-status-success);
}

.dl-badge--warning {
  background-color: var(--dl-status-warning-bg);
  color: var(--dl-status-warning);
}

.dl-badge--error {
  background-color: var(--dl-status-error-bg);
  color: var(--dl-status-error);
}

.dl-badge--info {
  background-color: var(--dl-status-info-bg);
  color: var(--dl-status-info);
}

.dl-badge--brand {
  background-color: var(--dl-forest);
  color: var(--dl-white);
}

/* Tag - removable */
.dl-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--dl-space-1-5);
  padding: var(--dl-space-1) var(--dl-space-3);
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-regular);
  letter-spacing: var(--dl-tracking-wide);
  border: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-default);
  border-radius: var(--dl-radius-sm);
  color: var(--dl-text-primary);
}

.dl-tag__remove {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dl-radius-full);
  cursor: pointer;
  transition: var(--dl-transition-colors);
}

.dl-tag__remove:hover {
  background-color: rgba(0, 0, 0, var(--dl-opacity-hover));
}


/* ============================================================================
   ALERTS & NOTIFICATIONS
   ============================================================================ */

.dl-alert {
  display: flex;
  gap: var(--dl-space-3);
  padding: var(--dl-space-4) var(--dl-space-5);
  border-radius: var(--dl-radius-md);
  font-size: var(--dl-text-sm);
  line-height: var(--dl-leading-normal);
}

.dl-alert--info    { background-color: var(--dl-status-info-bg); color: var(--dl-text-primary); }
.dl-alert--success { background-color: var(--dl-status-success-bg); color: var(--dl-text-primary); }
.dl-alert--warning { background-color: var(--dl-status-warning-bg); color: var(--dl-text-primary); }
.dl-alert--error   { background-color: var(--dl-status-error-bg); color: var(--dl-text-primary); }

.dl-alert__title {
  font-weight: var(--dl-weight-medium);
  margin-bottom: var(--dl-space-1);
}

/* Toast */
.dl-toast {
  position: fixed;
  bottom: var(--dl-space-6);
  right: var(--dl-space-6);
  z-index: var(--dl-z-toast);
  min-width: 320px;
  max-width: 480px;
  padding: var(--dl-space-4) var(--dl-space-5);
  background-color: var(--dl-charcoal);
  color: var(--dl-white);
  border-radius: var(--dl-radius-md);
  box-shadow: var(--dl-shadow-xl);
  font-size: var(--dl-text-sm);
  animation: dl-toast-in var(--dl-duration-slow) var(--dl-ease-decelerate);
}

@keyframes dl-toast-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Banner */
.dl-banner {
  padding: var(--dl-space-3) var(--dl-space-6);
  text-align: center;
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-regular);
  border-bottom: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-subtle);
}


/* ============================================================================
   MODALS & DIALOGS
   ============================================================================ */

.dl-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--dl-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dl-surface-overlay);
  animation: dl-fade-in var(--dl-duration-fast) var(--dl-ease-standard);
}

.dl-modal {
  background-color: var(--dl-surface-elevated);
  border-radius: var(--dl-radius-modal);
  box-shadow: var(--dl-shadow-2xl);
  max-width: 560px;
  width: calc(100% - var(--dl-space-8));
  max-height: calc(100dvh - var(--dl-space-16));
  overflow-y: auto;
  animation: dl-modal-in var(--dl-duration-slow) var(--dl-ease-decelerate);
}

.dl-modal--lg { max-width: 720px; }
.dl-modal--sm { max-width: 400px; }
.dl-modal--full { max-width: calc(100% - var(--dl-space-8)); max-height: calc(100dvh - var(--dl-space-8)); }

.dl-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dl-space-5) var(--dl-space-6);
  border-bottom: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-subtle);
}

.dl-modal__title {
  font-size: var(--dl-text-lg);
  font-weight: var(--dl-weight-medium);
}

.dl-modal__body {
  padding: var(--dl-space-6);
}

.dl-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--dl-space-3);
  padding: var(--dl-space-4) var(--dl-space-6);
  border-top: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-subtle);
}

@keyframes dl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dl-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


/* ============================================================================
   TOOLTIPS & POPOVERS
   ============================================================================ */

.dl-tooltip {
  position: absolute;
  z-index: var(--dl-z-tooltip);
  padding: var(--dl-space-2) var(--dl-space-3);
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-white);
  background-color: var(--dl-charcoal);
  border-radius: var(--dl-radius-sm);
  box-shadow: var(--dl-shadow-md);
  white-space: nowrap;
  pointer-events: none;
  animation: dl-fade-in var(--dl-duration-fast) var(--dl-ease-decelerate);
}

.dl-popover {
  position: absolute;
  z-index: var(--dl-z-popover);
  background-color: var(--dl-surface-elevated);
  border: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-subtle);
  border-radius: var(--dl-radius-md);
  box-shadow: var(--dl-shadow-lg);
  min-width: 200px;
  animation: dl-modal-in var(--dl-duration-normal) var(--dl-ease-decelerate);
}

.dl-popover__body {
  padding: var(--dl-space-4);
}


/* ============================================================================
   TABLES
   ============================================================================ */

.dl-table {
  width: 100%;
  font-size: var(--dl-text-sm);
  text-align: left;
}

.dl-table th {
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-wider);
  color: var(--dl-text-secondary);
  padding: var(--dl-space-3) var(--dl-space-4);
  border-bottom: var(--dl-border-width-medium) var(--dl-border-style) var(--dl-border-strong);
}

.dl-table td {
  padding: var(--dl-space-3) var(--dl-space-4);
  border-bottom: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-subtle);
  vertical-align: top;
}

.dl-table tr:hover td {
  background-color: var(--dl-surface-secondary);
}

.dl-table--striped tr:nth-child(even) td {
  background-color: var(--dl-surface-secondary);
}


/* ============================================================================
   ACCORDION
   ============================================================================ */

.dl-accordion {
  border-top: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-default);
}

.dl-accordion__item {
  border-bottom: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-default);
}

.dl-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--dl-space-4) 0;
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--dl-text-primary);
  transition: var(--dl-transition-colors);
}

.dl-accordion__trigger:hover {
  color: var(--dl-text-secondary);
}

.dl-accordion__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--dl-duration-normal) var(--dl-ease-standard);
}

.dl-accordion__trigger[aria-expanded="true"] .dl-accordion__icon {
  transform: rotate(180deg);
}

.dl-accordion__content {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dl-duration-slow) var(--dl-ease-standard);
}

.dl-accordion__content[aria-hidden="false"] {
  max-height: 1000px;
}

.dl-accordion__body {
  padding-bottom: var(--dl-space-6);
  color: var(--dl-text-secondary);
  font-size: var(--dl-text-sm);
  line-height: var(--dl-leading-relaxed);
}


/* ============================================================================
   PROGRESS & LOADING
   ============================================================================ */

/* Progress bar */
.dl-progress {
  width: 100%;
  height: 4px;
  background-color: var(--dl-surface-secondary);
  border-radius: var(--dl-radius-full);
  overflow: hidden;
}

.dl-progress__bar {
  height: 100%;
  background-color: var(--dl-forest);
  border-radius: var(--dl-radius-full);
  transition: width var(--dl-duration-slow) var(--dl-ease-decelerate);
}

/* Spinner */
.dl-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--dl-border-subtle);
  border-top-color: var(--dl-text-primary);
  border-radius: var(--dl-radius-full);
  animation: dl-spin 700ms linear infinite;
}

.dl-spinner--sm { width: 16px; height: 16px; }
.dl-spinner--lg { width: 40px; height: 40px; border-width: 3px; }

/* Skeleton */
.dl-skeleton {
  background: linear-gradient(
    90deg,
    var(--dl-surface-secondary) 25%,
    var(--dl-surface-tertiary) 50%,
    var(--dl-surface-secondary) 75%
  );
  background-size: 200% 100%;
  animation: dl-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--dl-radius-sm);
}

.dl-skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--dl-space-2);
}

.dl-skeleton--circle {
  border-radius: var(--dl-radius-full);
}

@keyframes dl-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}


/* ============================================================================
   AVATARS
   ============================================================================ */

.dl-avatar {
  width: var(--dl-size-avatar-md);
  height: var(--dl-size-avatar-md);
  border-radius: var(--dl-radius-avatar);
  overflow: hidden;
  background-color: var(--dl-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-semibold);
  color: var(--dl-text-primary);
  flex-shrink: 0;
}

.dl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dl-avatar--sm { width: var(--dl-size-avatar-sm); height: var(--dl-size-avatar-sm); font-size: var(--dl-text-xs); }
.dl-avatar--lg { width: var(--dl-size-avatar-lg); height: var(--dl-size-avatar-lg); font-size: var(--dl-text-lg); }
.dl-avatar--xl { width: var(--dl-size-avatar-xl); height: var(--dl-size-avatar-xl); font-size: var(--dl-text-2xl); }


/* ============================================================================
   EMPTY STATES & ERROR PAGES
   ============================================================================ */

.dl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--dl-space-16) var(--dl-space-6);
  gap: var(--dl-space-4);
}

.dl-empty__icon {
  width: 64px;
  height: 64px;
  color: var(--dl-text-tertiary);
}

.dl-empty__title {
  font-size: var(--dl-text-lg);
  font-weight: var(--dl-weight-medium);
}

.dl-empty__text {
  font-size: var(--dl-text-sm);
  color: var(--dl-text-secondary);
  max-width: var(--dl-measure-narrow);
}


/* ============================================================================
   IMAGE TREATMENT
   ============================================================================ */

.dl-image {
  overflow: hidden;
  border-radius: var(--dl-radius-md);
}

.dl-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dl-image--square  { aspect-ratio: var(--dl-ratio-square); }
.dl-image--wide    { aspect-ratio: var(--dl-ratio-landscape); }
.dl-image--tall    { aspect-ratio: var(--dl-ratio-portrait); }
.dl-image--photo   { aspect-ratio: var(--dl-ratio-photo); }
.dl-image--golden  { aspect-ratio: var(--dl-ratio-golden); }

/* Image with overlay text */
.dl-image--overlay {
  position: relative;
}

.dl-image--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
}

.dl-image--overlay .dl-image__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--dl-space-6);
  color: var(--dl-white);
  z-index: var(--dl-z-raised);
}


/* ============================================================================
   FOOTER
   ============================================================================ */

.dl-footer {
  background-color: var(--dl-charcoal);
  color: var(--dl-white);
  padding: var(--dl-space-16) var(--dl-container-pad) var(--dl-space-8);
}

.dl-footer a {
  color: var(--dl-warm-grey);
  transition: var(--dl-transition-colors);
}

.dl-footer a:hover {
  color: var(--dl-white);
}

.dl-footer__bottom {
  margin-top: var(--dl-space-12);
  padding-top: var(--dl-space-6);
  border-top: var(--dl-border-width-thin) var(--dl-border-style) rgba(255, 255, 255, 0.15);
  font-size: var(--dl-text-xs);
  color: var(--dl-mid-grey);
}


/* ============================================================================
   SECTION 11 — PAGE CONTROLS & NEW COMPONENTS
   ============================================================================ */


/* ----------------------------------------------------------------------------
   11.1 Search Bar
   ---------------------------------------------------------------------------- */

.dl-search {
  position: relative;
  display: flex;
  align-items: center;
}

.dl-search__icon {
  position: absolute;
  left: var(--dl-space-3);
  display: flex;
  align-items: center;
  color: var(--dl-text-tertiary);
  pointer-events: none;
  width: 16px;
  height: 16px;
}

.dl-search .dl-input {
  padding-left: var(--dl-space-9);
  padding-right: var(--dl-space-10);
}

.dl-search__kbd {
  position: absolute;
  right: var(--dl-space-3);
  font-family: var(--dl-font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--dl-surface-secondary);
  border: 1px solid var(--dl-border-default);
  border-radius: var(--dl-radius-xs);
  color: var(--dl-text-tertiary);
  pointer-events: none;
}

.dl-search__clear {
  position: absolute;
  right: var(--dl-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-surface-secondary);
  color: var(--dl-text-secondary);
  font-size: 12px;
  cursor: pointer;
  border: none;
  transition: var(--dl-transition-colors);
}

.dl-search__clear:hover {
  background: var(--dl-border-default);
  color: var(--dl-text-primary);
}


/* ----------------------------------------------------------------------------
   11.2 Segmented Control
   ---------------------------------------------------------------------------- */

.dl-segmented {
  display: inline-flex;
  align-items: center;
  background: var(--dl-surface-secondary);
  border: 1px solid var(--dl-border-default);
  border-radius: var(--dl-radius-md);
  padding: 3px;
  gap: 2px;
}

.dl-segmented__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dl-space-1-5) var(--dl-space-4);
  font-family: var(--dl-font-primary);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  letter-spacing: var(--dl-tracking-wide);
  color: var(--dl-text-secondary);
  border-radius: var(--dl-radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: var(--dl-transition-colors), var(--dl-transition-shadow);
  white-space: nowrap;
}

.dl-segmented__option:hover {
  color: var(--dl-text-primary);
}

.dl-segmented__option[aria-selected="true"],
.dl-segmented__option--active {
  background: var(--dl-surface-elevated);
  color: var(--dl-text-primary);
  font-weight: var(--dl-weight-medium);
  box-shadow: var(--dl-shadow-sm);
}

.dl-segmented--sm .dl-segmented__option {
  padding: var(--dl-space-1) var(--dl-space-3);
  font-size: var(--dl-text-xs);
}

.dl-segmented--full {
  width: 100%;
}

.dl-segmented--full .dl-segmented__option {
  flex: 1;
}


/* ----------------------------------------------------------------------------
   11.3 Filter Bar & Filter Pills
   ---------------------------------------------------------------------------- */

.dl-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dl-space-2);
  padding: var(--dl-space-3) 0;
}

.dl-filter-bar__label {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-widest);
  text-transform: uppercase;
  color: var(--dl-text-secondary);
  flex-shrink: 0;
}

.dl-filter-bar__divider {
  width: 1px;
  height: 16px;
  background: var(--dl-border-default);
  flex-shrink: 0;
}

.dl-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--dl-space-1-5);
  padding: var(--dl-space-1) var(--dl-space-3);
  font-family: var(--dl-font-primary);
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-light);
  letter-spacing: var(--dl-tracking-wide);
  color: var(--dl-text-secondary);
  background: transparent;
  border: 1px solid var(--dl-border-default);
  border-radius: var(--dl-radius-full);
  cursor: pointer;
  transition: var(--dl-transition-colors);
  white-space: nowrap;
}

.dl-filter-pill:hover {
  border-color: var(--dl-interactive-default);
  color: var(--dl-text-primary);
}

.dl-filter-pill--active {
  background: rgba(149, 183, 170, 0.12);
  border-color: var(--dl-interactive-default);
  color: var(--dl-text-primary);
}

.dl-filter-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--dl-space-1);
  background: var(--dl-interactive-default);
  color: var(--dl-forest);
  border-radius: var(--dl-radius-full);
  font-size: 10px;
  font-weight: var(--dl-weight-medium);
}

.dl-filter-pill__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  opacity: 0.6;
  transition: opacity var(--dl-duration-fast) var(--dl-ease-standard);
}

.dl-filter-pill:hover .dl-filter-pill__remove {
  opacity: 1;
}

.dl-filter-pill--clear {
  border-color: transparent;
  color: var(--dl-text-tertiary);
}

.dl-filter-pill--clear:hover {
  border-color: transparent;
  color: var(--dl-status-error);
}


/* ----------------------------------------------------------------------------
   11.4 Pagination
   ---------------------------------------------------------------------------- */

.dl-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--dl-space-1);
}

.dl-pagination__meta {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-secondary);
}

.dl-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--dl-space-2);
  font-family: var(--dl-font-primary);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--dl-radius-sm);
  cursor: pointer;
  transition: var(--dl-transition-colors);
}

.dl-pagination__item:hover {
  background: var(--dl-surface-secondary);
  color: var(--dl-text-primary);
}

.dl-pagination__item--active {
  background: var(--dl-surface-secondary);
  border-color: var(--dl-border-default);
  color: var(--dl-text-primary);
  font-weight: var(--dl-weight-medium);
  cursor: default;
}

.dl-pagination__item--disabled {
  opacity: var(--dl-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.dl-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  color: var(--dl-text-tertiary);
  font-size: var(--dl-text-sm);
}


/* ----------------------------------------------------------------------------
   11.5 Stepper
   ---------------------------------------------------------------------------- */

.dl-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--dl-border-default);
  border-radius: var(--dl-radius-input);
  overflow: hidden;
  height: var(--dl-input-height-md);
}

.dl-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  background: var(--dl-surface-secondary);
  color: var(--dl-text-primary);
  border: none;
  font-size: var(--dl-text-lg);
  font-weight: var(--dl-weight-light);
  cursor: pointer;
  transition: var(--dl-transition-colors);
  flex-shrink: 0;
}

.dl-stepper__btn:hover {
  background: var(--dl-border-default);
}

.dl-stepper__value {
  width: 48px;
  height: 100%;
  text-align: center;
  font-family: var(--dl-font-primary);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-primary);
  background: var(--dl-surface-primary);
  border: none;
  border-left: 1px solid var(--dl-border-default);
  border-right: 1px solid var(--dl-border-default);
  -moz-appearance: textfield;
}

.dl-stepper__value::-webkit-inner-spin-button,
.dl-stepper__value::-webkit-outer-spin-button {
  -webkit-appearance: none;
}


/* ----------------------------------------------------------------------------
   11.6 Slider
   ---------------------------------------------------------------------------- */

.dl-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--dl-space-1);
}

.dl-slider-row {
  display: flex;
  align-items: center;
  gap: var(--dl-space-3);
}

.dl-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-border-default);
  outline: none;
  cursor: pointer;
}

.dl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-interactive-default);
  cursor: pointer;
  transition: box-shadow var(--dl-duration-fast) var(--dl-ease-standard);
}

.dl-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-interactive-default);
  border: none;
  cursor: pointer;
}

.dl-slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(149, 183, 170, 0.18);
}

.dl-slider:focus-visible {
  box-shadow: none;
}

.dl-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(149, 183, 170, 0.35);
}

.dl-slider__value {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-text-primary);
  min-width: 36px;
  text-align: right;
}

.dl-slider__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--dl-text-xs);
  color: var(--dl-text-tertiary);
}


/* ----------------------------------------------------------------------------
   11.7 Combobox / Autocomplete
   ---------------------------------------------------------------------------- */

.dl-combobox {
  position: relative;
}

.dl-combobox__dropdown {
  position: absolute;
  top: calc(100% + var(--dl-space-1));
  left: 0;
  right: 0;
  background: var(--dl-surface-elevated);
  border: 1px solid var(--dl-border-default);
  border-radius: var(--dl-radius-md);
  box-shadow: var(--dl-shadow-lg);
  z-index: var(--dl-z-dropdown);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}

.dl-combobox__group-label {
  padding: var(--dl-space-2) var(--dl-space-4) var(--dl-space-1);
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-widest);
  text-transform: uppercase;
  color: var(--dl-text-tertiary);
}

.dl-combobox__option {
  display: flex;
  align-items: center;
  gap: var(--dl-space-2);
  padding: var(--dl-space-2-5) var(--dl-space-4);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-primary);
  cursor: pointer;
  transition: background var(--dl-duration-micro) var(--dl-ease-standard);
}

.dl-combobox__option:hover,
.dl-combobox__option--focused {
  background: var(--dl-surface-secondary);
}

.dl-combobox__option--selected {
  color: var(--dl-interactive-default);
}

.dl-combobox__empty {
  padding: var(--dl-space-6) var(--dl-space-4);
  text-align: center;
  font-size: var(--dl-text-sm);
  color: var(--dl-text-tertiary);
}


/* ----------------------------------------------------------------------------
   11.8 File Upload / Dropzone
   ---------------------------------------------------------------------------- */

.dl-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dl-space-2);
  padding: var(--dl-space-10) var(--dl-space-8);
  border: 1.5px dashed var(--dl-border-default);
  border-radius: var(--dl-radius-lg);
  background: var(--dl-surface-secondary);
  cursor: pointer;
  text-align: center;
  transition: var(--dl-transition-colors), border-color var(--dl-duration-fast) var(--dl-ease-standard);
}

.dl-dropzone:hover,
.dl-dropzone--hover {
  border-color: var(--dl-interactive-default);
  background: rgba(149, 183, 170, 0.06);
}

.dl-dropzone--active {
  border-color: var(--dl-interactive-default);
  border-style: solid;
  background: rgba(149, 183, 170, 0.1);
}

.dl-dropzone--error {
  border-color: var(--dl-status-error);
  background: var(--dl-status-error-bg);
}

.dl-dropzone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-border-default);
  color: var(--dl-text-secondary);
  margin-bottom: var(--dl-space-1);
}

.dl-dropzone__title {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-text-primary);
}

.dl-dropzone__sub {
  font-size: var(--dl-text-xs);
  color: var(--dl-text-tertiary);
}

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

.dl-file-item {
  display: flex;
  align-items: center;
  gap: var(--dl-space-3);
  padding: var(--dl-space-2-5) var(--dl-space-4);
  background: var(--dl-surface-secondary);
  border: 1px solid var(--dl-border-subtle);
  border-radius: var(--dl-radius-sm);
}

.dl-file-item__icon {
  display: flex;
  align-items: center;
  color: var(--dl-text-tertiary);
  flex-shrink: 0;
}

.dl-file-item__name {
  flex: 1;
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-file-item__size {
  font-size: var(--dl-text-xs);
  color: var(--dl-text-tertiary);
  flex-shrink: 0;
}

.dl-file-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--dl-radius-full);
  color: var(--dl-text-tertiary);
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
  transition: var(--dl-transition-colors);
  flex-shrink: 0;
}

.dl-file-item__remove:hover {
  background: var(--dl-status-error-bg);
  color: var(--dl-status-error);
}


/* ----------------------------------------------------------------------------
   11.9 Contextual Menu / Dropdown Menu
   ---------------------------------------------------------------------------- */

.dl-menu {
  display: flex;
  flex-direction: column;
  min-width: 180px;
  background: var(--dl-surface-elevated);
  border: 1px solid var(--dl-border-default);
  border-radius: var(--dl-radius-md);
  overflow: hidden;
  padding: var(--dl-space-1) 0;
}

.dl-menu--floating {
  box-shadow: var(--dl-shadow-lg);
  position: absolute;
  z-index: var(--dl-z-popover);
}

.dl-menu__label {
  padding: var(--dl-space-1-5) var(--dl-space-4);
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-widest);
  text-transform: uppercase;
  color: var(--dl-text-tertiary);
}

.dl-menu__item {
  display: flex;
  align-items: center;
  gap: var(--dl-space-2-5);
  padding: var(--dl-space-2-5) var(--dl-space-4);
  font-family: var(--dl-font-primary);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background var(--dl-duration-micro) var(--dl-ease-standard);
}

.dl-menu__item:hover {
  background: var(--dl-surface-secondary);
}

.dl-menu__item--danger {
  color: var(--dl-status-error);
}

.dl-menu__item--danger:hover {
  background: var(--dl-status-error-bg);
}

.dl-menu__item__trailing {
  margin-left: auto;
  font-size: var(--dl-text-xs);
  color: var(--dl-text-tertiary);
  font-family: var(--dl-font-mono);
}

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


/* ----------------------------------------------------------------------------
   11.10 Command Palette
   ---------------------------------------------------------------------------- */

.dl-command-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--dl-z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  background: var(--dl-surface-overlay);
  animation: dl-fade-in var(--dl-duration-fast) var(--dl-ease-standard);
}

.dl-command {
  width: calc(100% - var(--dl-space-8));
  max-width: 560px;
  background: var(--dl-surface-elevated);
  border: 1px solid var(--dl-border-default);
  border-radius: var(--dl-radius-lg);
  box-shadow: var(--dl-shadow-2xl);
  overflow: hidden;
  animation: dl-modal-in var(--dl-duration-slow) var(--dl-ease-decelerate);
}

.dl-command__input-row {
  display: flex;
  align-items: center;
  gap: var(--dl-space-3);
  padding: var(--dl-space-4) var(--dl-space-5);
  border-bottom: 1px solid var(--dl-border-subtle);
}

.dl-command__icon {
  display: flex;
  align-items: center;
  color: var(--dl-text-tertiary);
  flex-shrink: 0;
}

.dl-command__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--dl-font-primary);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-primary);
  letter-spacing: var(--dl-tracking-wide);
}

.dl-command__input::placeholder {
  color: var(--dl-text-tertiary);
  opacity: var(--dl-opacity-placeholder);
}

.dl-command__results {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--dl-space-1) 0;
}

.dl-command__group-label {
  padding: var(--dl-space-2) var(--dl-space-5) var(--dl-space-1);
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-widest);
  text-transform: uppercase;
  color: var(--dl-text-tertiary);
}

.dl-command__result {
  display: flex;
  align-items: center;
  gap: var(--dl-space-3);
  padding: var(--dl-space-2-5) var(--dl-space-5);
  cursor: pointer;
  transition: background var(--dl-duration-micro) var(--dl-ease-standard);
}

.dl-command__result:hover,
.dl-command__result--selected {
  background: var(--dl-surface-secondary);
}

.dl-command__result-icon {
  display: flex;
  align-items: center;
  color: var(--dl-text-tertiary);
  flex-shrink: 0;
  width: 20px;
}

.dl-command__result-label {
  flex: 1;
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-primary);
}

.dl-command__result-meta {
  font-size: var(--dl-text-xs);
  color: var(--dl-text-tertiary);
}

.dl-command__footer {
  display: flex;
  align-items: center;
  gap: var(--dl-space-4);
  padding: var(--dl-space-3) var(--dl-space-5);
  border-top: 1px solid var(--dl-border-subtle);
  background: var(--dl-surface-secondary);
}

.dl-command__hint {
  display: flex;
  align-items: center;
  gap: var(--dl-space-1-5);
  font-size: var(--dl-text-xs);
  color: var(--dl-text-tertiary);
}

.dl-command__hint kbd {
  font-family: var(--dl-font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--dl-surface-elevated);
  border: 1px solid var(--dl-border-default);
  border-radius: var(--dl-radius-xs);
  color: var(--dl-text-secondary);
}


/* ----------------------------------------------------------------------------
   11.11 Status Dots
   ---------------------------------------------------------------------------- */

.dl-status {
  display: inline-flex;
  align-items: center;
  gap: var(--dl-space-2);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-primary);
}

.dl-status__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--dl-radius-full);
  flex-shrink: 0;
}

.dl-status--live .dl-status__dot {
  background: var(--dl-status-error);
  animation: dl-pulse 1.5s ease-in-out infinite;
}

.dl-status--online .dl-status__dot   { background: var(--dl-status-success); }
.dl-status--busy .dl-status__dot     { background: var(--dl-status-warning); }
.dl-status--away .dl-status__dot     { background: var(--dl-amber); }
.dl-status--pending .dl-status__dot  { background: var(--dl-warm-grey); }
.dl-status--offline .dl-status__dot  { background: var(--dl-mid-grey); }
.dl-status--error .dl-status__dot    { background: var(--dl-status-error); }

@keyframes dl-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-status--live .dl-status__dot { animation: none; }
}


/* ----------------------------------------------------------------------------
   11.12 Numeric Nav Badge
   ---------------------------------------------------------------------------- */

.dl-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--dl-space-1);
  background: #c44536;
  color: var(--dl-white);
  border-radius: var(--dl-radius-full);
  font-size: 10px;
  font-weight: var(--dl-weight-medium);
  letter-spacing: 0;
  line-height: 1;
}


/* ----------------------------------------------------------------------------
   11.13 Data List / Settings Rows
   ---------------------------------------------------------------------------- */

.dl-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dl-border-subtle);
  border-radius: var(--dl-radius-md);
  overflow: hidden;
}

.dl-list-section {
  padding: var(--dl-space-2) var(--dl-space-4);
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-widest);
  text-transform: uppercase;
  color: var(--dl-text-tertiary);
  background: var(--dl-surface-secondary);
  border-bottom: 1px solid var(--dl-border-subtle);
}

.dl-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dl-space-3) var(--dl-space-4);
  border-bottom: 1px solid var(--dl-border-subtle);
  background: var(--dl-surface-elevated);
}

.dl-list-item:last-child {
  border-bottom: none;
}

.dl-list-item--interactive {
  cursor: pointer;
  transition: background var(--dl-duration-micro) var(--dl-ease-standard);
}

.dl-list-item--interactive:hover {
  background: var(--dl-surface-secondary);
}

.dl-list-item__leading {
  display: flex;
  align-items: center;
  gap: var(--dl-space-3);
  flex: 1;
  min-width: 0;
}

.dl-list-item__icon {
  display: flex;
  align-items: center;
  color: var(--dl-text-secondary);
  flex-shrink: 0;
  width: 20px;
}

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

.dl-list-item__label {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-primary);
}

.dl-list-item__desc {
  font-size: var(--dl-text-xs);
  color: var(--dl-text-secondary);
  margin-top: 2px;
}

.dl-list-item__trailing {
  display: flex;
  align-items: center;
  gap: var(--dl-space-2);
  flex-shrink: 0;
}

.dl-list-item__value {
  font-size: var(--dl-text-sm);
  color: var(--dl-text-secondary);
}

.dl-list-item__chevron {
  color: var(--dl-text-tertiary);
  font-size: var(--dl-text-base);
}


/* ----------------------------------------------------------------------------
   11.14 Section Header
   ---------------------------------------------------------------------------- */

.dl-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--dl-space-3);
  border-bottom: 1px solid var(--dl-border-subtle);
  margin-bottom: var(--dl-space-4);
}

.dl-section-hdr__left {
  display: flex;
  align-items: center;
  gap: var(--dl-space-2);
}

.dl-section-hdr__title {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-wider);
  text-transform: uppercase;
  color: var(--dl-text-primary);
}

.dl-section-hdr__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--dl-space-1-5);
  background: var(--dl-surface-secondary);
  border: 1px solid var(--dl-border-default);
  border-radius: var(--dl-radius-full);
  font-size: 11px;
  font-weight: var(--dl-weight-medium);
  color: var(--dl-text-secondary);
}

.dl-section-hdr__action {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-medium);
  letter-spacing: var(--dl-tracking-wide);
  color: var(--dl-interactive-default);
  text-decoration: none;
  transition: color var(--dl-duration-fast) var(--dl-ease-standard);
}

.dl-section-hdr__action:hover {
  color: var(--dl-interactive-hover);
}


/* ----------------------------------------------------------------------------
   11.15 Step Indicator / Wizard
   ---------------------------------------------------------------------------- */

.dl-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.dl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dl-space-2);
  flex: 1;
  position: relative;
}

.dl-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 1px;
  background: var(--dl-border-default);
}

.dl-step--complete:not(:last-child)::after {
  background: var(--dl-forest);
}

.dl-step__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--dl-radius-full);
  border: 2px solid var(--dl-border-default);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-text-secondary);
  background: var(--dl-surface-elevated);
  position: relative;
  z-index: 1;
  transition: var(--dl-transition-colors);
}

.dl-step--complete .dl-step__indicator {
  background: var(--dl-forest);
  border-color: var(--dl-forest);
  color: var(--dl-white);
}

.dl-step--active .dl-step__indicator {
  border-color: var(--dl-interactive-default);
  color: var(--dl-interactive-default);
  box-shadow: 0 0 0 3px rgba(149, 183, 170, 0.2);
}

.dl-step--error .dl-step__indicator {
  border-color: var(--dl-status-error);
  color: var(--dl-status-error);
}

.dl-step__label {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-tertiary);
  text-align: center;
  letter-spacing: var(--dl-tracking-wide);
}

.dl-step--active .dl-step__label {
  color: var(--dl-text-primary);
  font-weight: var(--dl-weight-medium);
}

.dl-step--complete .dl-step__label {
  color: var(--dl-text-secondary);
}


/* ----------------------------------------------------------------------------
   11.16 Drawer / Side Panel
   ---------------------------------------------------------------------------- */

.dl-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--dl-z-modal) - 1);
  background: var(--dl-surface-overlay);
  animation: dl-fade-in var(--dl-duration-fast) var(--dl-ease-standard);
}

.dl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  z-index: var(--dl-z-modal);
  background: var(--dl-surface-elevated);
  border-left: 1px solid var(--dl-border-default);
  box-shadow: var(--dl-shadow-2xl);
  display: flex;
  flex-direction: column;
  animation: dl-drawer-in var(--dl-duration-slow) var(--dl-ease-decelerate);
}

.dl-drawer--sm { width: 320px; }
.dl-drawer--lg { width: 600px; }

@keyframes dl-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.dl-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dl-space-5) var(--dl-space-6);
  border-bottom: 1px solid var(--dl-border-subtle);
  flex-shrink: 0;
}

.dl-drawer__title {
  font-size: var(--dl-text-lg);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-text-primary);
}

.dl-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--dl-space-6);
}

.dl-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--dl-space-3);
  padding: var(--dl-space-4) var(--dl-space-6);
  border-top: 1px solid var(--dl-border-subtle);
  flex-shrink: 0;
}