.dn-page {
  .action-buttons { display: flex; gap: 0.1rem; }
  .amount { font-family: 'Courier New', monospace; font-weight: 600; text-align: end; }
  .mono { font-family: 'Courier New', monospace; font-weight: 600; font-size: 0.8rem; color: var(--color-text-secondary); }
}

:host ::ng-deep {
  .header-add-btn {
    border-color: rgba(255,255,255,0.4) !important;
    color: #fff !important;
    font-size: 0.72rem !important;
    padding: 0.2rem 0.5rem !important;
    &:hover {
      background: rgba(255,255,255,0.15) !important;
      border-color: rgba(255,255,255,0.6) !important;
    }
  }
}

.view-dn {
  .view-header-info {
    display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-surface-border);
    border-inline-start: 3px solid var(--color-accent, #f5a623);
    padding-inline-start: 0.75rem;
    .info-item { display: flex; flex-direction: column; gap: 0.25rem;
      label { font-weight: 700; font-size: 0.65rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
      span { font-size: 0.8125rem; }
      .mono { font-family: 'Courier New', monospace; font-weight: 600; }
    }
  }

  .shipping-card {
    background: var(--color-surface-muted); border: 1px solid var(--color-surface-border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem;
    h4 { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--module-color, var(--color-brand)); display: flex; align-items: center; gap: 0.5rem; }
    .shipping-grid { display: flex; flex-wrap: wrap; gap: 1.5rem;
      .ship-item { display: flex; flex-direction: column; gap: 0.15rem;
        label { font-weight: 700; font-size: 0.65rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
        span { font-size: 0.8125rem; }
        .mono { font-family: 'Courier New', monospace; font-weight: 600; }
      }
    }
  }

  .status-timeline {
    display: flex; align-items: center; justify-content: center; gap: 0; margin: 1rem 0; padding: 1rem 0;
    .timeline-step {
      display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
      .step-dot {
        width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface-border); transition: all 0.2s;
      }
      span { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 600; }
      &.active .step-dot { background: var(--module-color, var(--color-brand)); }
      &.done .step-dot { background: #22c55e; }
      &.active span { color: var(--color-text-primary); }
    }
    .timeline-line {
      width: 60px; height: 2px; background: var(--color-surface-border); margin: 0 0.25rem; margin-bottom: 1.25rem;
      &.active { background: var(--module-color, var(--color-brand)); }
    }
  }

  .view-lines-table {
    width: 100%; border-collapse: collapse; font-size: 0.8125rem;
    border: 1px solid var(--color-surface-border); border-radius: 8px; overflow: hidden;
    thead th {
      background: var(--color-surface-hover); padding: 0.5rem; text-align: start;
      font-weight: 700; font-size: 0.68rem; color: var(--color-text-secondary);
      border-bottom: 2px solid var(--color-surface-border);
      text-transform: uppercase; letter-spacing: 0.03em;
    }
    tbody td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-surface-hover); }
    tbody tr:hover td { background: rgba(245, 166, 35, 0.04); }
    .amount { text-align: end; font-family: 'Courier New', monospace; }
  }
}

.ship-form {
  .form-field {
    display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem;
    label { font-weight: 700; font-size: 0.65rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
    input { width: 100%; }
  }
}
