/* ============================================================
   DhanGenie — components.css
   All UI component classes. Depends on tokens.css + app.css
   ============================================================ */

/* ============================================================
   CARDS
   ============================================================ */
.dg-card {
  background: var(--dg-card);
  border: 1px solid var(--dg-card-border);
  border-radius: var(--dg-card-radius);
  box-shadow: var(--dg-shadow-xs);
  transition: box-shadow var(--dg-duration-base) var(--dg-ease-default),
              border-color var(--dg-duration-base) var(--dg-ease-default);
}
.dg-card:hover { box-shadow: var(--dg-shadow-sm); border-color: var(--dg-border); }
.dg-card-p     { padding: var(--dg-space-5); }
.dg-card-p-sm  { padding: var(--dg-space-4); }
.dg-card-p-lg  { padding: var(--dg-space-6); }
.dg-card-header {
  padding: var(--dg-space-4) var(--dg-space-5);
  border-bottom: 1px solid var(--dg-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-3);
}
.dg-card-header-title {
  font-size: var(--dg-font-size-base);
  font-weight: var(--dg-font-weight-semibold);
  color: var(--dg-text);
}
.dg-card-body  { padding: var(--dg-space-5); }
.dg-card-footer {
  padding: var(--dg-space-4) var(--dg-space-5);
  border-top: 1px solid var(--dg-border-subtle);
  background: var(--dg-surface-1);
  border-radius: 0 0 var(--dg-card-radius) var(--dg-card-radius);
}

/* ---- Stat Card ---- */
.dg-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-3);
  padding: var(--dg-space-5);
}
.dg-stat-card-header { display: flex; align-items: center; justify-content: space-between; }
.dg-stat-card-icon {
  width: 36px; height: 36px;
  border-radius: var(--dg-radius-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dg-stat-card-icon svg { width: 18px; height: 18px; }
.dg-stat-card-icon-blue    { background: var(--dg-primary-50);  color: var(--dg-primary-600); }
.dg-stat-card-icon-emerald { background: var(--dg-emerald-50);  color: var(--dg-emerald-600); }
.dg-stat-card-icon-gold    { background: var(--dg-gold-50);     color: var(--dg-gold-600); }
.dg-stat-card-icon-danger  { background: var(--dg-danger-50);   color: var(--dg-danger-600); }
.dg-stat-card-value {
  font-size: var(--dg-font-size-4xl);
  font-weight: var(--dg-font-weight-bold);
  letter-spacing: var(--dg-letter-spacing-tight);
  color: var(--dg-text);
  line-height: 1;
}
.dg-stat-card-label { font-size: var(--dg-font-size-base); color: var(--dg-text-secondary); }
.dg-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-1);
  font-size: var(--dg-font-size-xs);
  font-weight: var(--dg-font-weight-semibold);
}
.dg-stat-trend-up   { color: var(--dg-emerald-600); }
.dg-stat-trend-down { color: var(--dg-danger-600); }
.dg-stat-trend svg  { width: 12px; height: 12px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dg-space-2);
  height: var(--dg-btn-height);
  padding: 0 var(--dg-space-4);
  font-size: var(--dg-font-size-base);
  font-weight: var(--dg-font-weight-medium);
  border-radius: var(--dg-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dg-duration-base) var(--dg-ease-default);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  user-select: none;
}
.dg-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.dg-btn:disabled, .dg-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.dg-btn.is-loading { pointer-events: none; }
.dg-btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Primary */
.dg-btn-primary {
  background: var(--dg-brand-primary);
  color: var(--dg-brand-on);
  border-color: var(--dg-brand-primary);
  box-shadow: 0 1px 2px rgba(37,99,235,0.25);
}
.dg-btn-primary:hover:not(:disabled) {
  background: var(--dg-brand-primary-h);
  border-color: var(--dg-brand-primary-h);
  box-shadow: 0 2px 6px rgba(37,99,235,0.35);
  transform: translateY(-1px);
}
.dg-btn-primary:active { transform: translateY(0); box-shadow: none; }

/* Secondary */
.dg-btn-secondary {
  background: var(--dg-surface-1);
  color: var(--dg-text);
  border-color: var(--dg-border);
}
.dg-btn-secondary:hover:not(:disabled) { background: var(--dg-surface-2); border-color: var(--dg-text-muted); }

/* Ghost */
.dg-btn-ghost {
  background: transparent;
  color: var(--dg-text-secondary);
  border-color: transparent;
}
.dg-btn-ghost:hover:not(:disabled) { background: var(--dg-surface-2); color: var(--dg-text); }

/* Danger */
.dg-btn-danger {
  background: var(--dg-danger-500);
  color: white;
  border-color: var(--dg-danger-500);
}
.dg-btn-danger:hover:not(:disabled) { background: var(--dg-danger-600); border-color: var(--dg-danger-600); }

/* Outline */
.dg-btn-outline {
  background: transparent;
  color: var(--dg-brand-primary);
  border-color: var(--dg-brand-primary);
}
.dg-btn-outline:hover:not(:disabled) { background: var(--dg-brand-subtle); }

/* Sizes */
.dg-btn-xs  { height: 1.5rem;  padding: 0 var(--dg-space-2);  font-size: var(--dg-font-size-xs); }
.dg-btn-sm  { height: 1.75rem; padding: 0 var(--dg-space-3);  font-size: var(--dg-font-size-sm); }
.dg-btn-lg  { height: 2.5rem;  padding: 0 var(--dg-space-5);  font-size: var(--dg-font-size-md); }
.dg-btn-xl  { height: 2.75rem; padding: 0 var(--dg-space-6);  font-size: var(--dg-font-size-lg); }
.dg-btn-icon { width: var(--dg-btn-height); padding: 0; }
.dg-btn-icon svg { width: 16px; height: 16px; }
.dg-btn-w-full { width: 100%; }

/* ============================================================
   BADGES
   ============================================================ */
.dg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-1);
  padding: 2px 8px;
  border-radius: var(--dg-radius-full);
  font-size: var(--dg-font-size-xs);
  font-weight: var(--dg-font-weight-semibold);
  letter-spacing: var(--dg-letter-spacing-wide);
  line-height: 1.4;
  white-space: nowrap;
}
.dg-badge svg { width: 10px; height: 10px; }
.dg-badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.dg-badge-success  { background: var(--dg-emerald-50);  color: var(--dg-emerald-700); }
.dg-badge-warning  { background: var(--dg-gold-50);     color: var(--dg-gold-700); }
.dg-badge-danger   { background: var(--dg-danger-50);   color: var(--dg-danger-700); }
.dg-badge-info     { background: var(--dg-info-50);     color: var(--dg-primary-700); }
.dg-badge-neutral  { background: var(--dg-surface-2);   color: var(--dg-text-secondary); }
.dg-badge-brand    { background: var(--dg-primary-50);  color: var(--dg-primary-700); }
.dg-badge-gold     { background: var(--dg-gold-50);     color: var(--dg-gold-700); }
.dg-badge-active   { background: var(--dg-emerald-50);  color: var(--dg-emerald-600); }
.dg-badge-expired  { background: var(--dg-danger-50);   color: var(--dg-danger-600); }
.dg-badge-pending  { background: var(--dg-gold-50);     color: var(--dg-gold-600); }
.dg-badge-outline  { background: transparent; border: 1px solid currentColor; }

/* ============================================================
   FORMS
   ============================================================ */
.dg-label {
  display: block;
  font-size: var(--dg-font-size-base);
  font-weight: var(--dg-font-weight-medium);
  color: var(--dg-text);
  margin-bottom: var(--dg-space-2);
}
.dg-label-required::after { content: ' *'; color: var(--dg-danger-500); }
.dg-label-hint {
  display: block;
  font-size: var(--dg-font-size-xs);
  color: var(--dg-text-muted);
  font-weight: var(--dg-font-weight-regular);
  margin-top: var(--dg-space-1);
}

.dg-input, .dg-select, .dg-textarea {
  display: block;
  width: 100%;
  height: var(--dg-input-height);
  padding: 0 var(--dg-space-3);
  font-size: var(--dg-font-size-base);
  color: var(--dg-text);
  background: var(--dg-surface-0);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-md);
  transition: border-color var(--dg-duration-base), box-shadow var(--dg-duration-base);
  appearance: none;
}
.dg-textarea { height: auto; padding: var(--dg-space-3); resize: vertical; }
.dg-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 2.5rem; }
.dg-input:focus, .dg-select:focus, .dg-textarea:focus {
  outline: none;
  border-color: var(--dg-brand-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.dg-input::placeholder, .dg-textarea::placeholder { color: var(--dg-text-muted); }
.dg-input:disabled, .dg-select:disabled, .dg-textarea:disabled { opacity: 0.5; cursor: not-allowed; background: var(--dg-surface-2); }
.dg-input.is-error { border-color: var(--dg-danger-500); }
.dg-input.is-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.dg-input.is-success { border-color: var(--dg-emerald-500); }

.dg-field { display: flex; flex-direction: column; gap: var(--dg-space-2); }
.dg-field-error { font-size: var(--dg-font-size-xs); color: var(--dg-danger-600); margin-top: var(--dg-space-1); }

/* Input with icon */
.dg-input-group { position: relative; }
.dg-input-group .dg-input { padding-left: 2.25rem; }
.dg-input-group-icon {
  position: absolute;
  left: var(--dg-space-3);
  top: 50%; transform: translateY(-50%);
  color: var(--dg-text-muted);
  width: 15px; height: 15px;
  pointer-events: none;
}
.dg-input-group-icon-right { left: auto; right: var(--dg-space-3); }
.dg-input-group .dg-input-icon-right { padding-left: var(--dg-space-3); padding-right: 2.25rem; }

/* Toggle / Switch */
.dg-toggle { display: flex; align-items: center; gap: var(--dg-space-3); cursor: pointer; }
.dg-toggle input[type="checkbox"] { display: none; }
.dg-toggle-track {
  width: 36px; height: 20px;
  background: var(--dg-surface-3);
  border-radius: var(--dg-radius-full);
  position: relative;
  transition: background var(--dg-duration-base);
  flex-shrink: 0;
}
.dg-toggle-track::after {
  content: '';
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 3px; left: 3px;
  transition: transform var(--dg-duration-base) var(--dg-ease-spring);
  box-shadow: var(--dg-shadow-sm);
}
.dg-toggle input:checked ~ .dg-toggle-track { background: var(--dg-brand-primary); }
.dg-toggle input:checked ~ .dg-toggle-track::after { transform: translateX(16px); }
.dg-toggle-label { font-size: var(--dg-font-size-base); color: var(--dg-text); }

/* Checkbox */
.dg-checkbox { display: flex; align-items: center; gap: var(--dg-space-2); cursor: pointer; }
.dg-checkbox input[type="checkbox"] {
  width: 15px; height: 15px;
  border-radius: var(--dg-radius-sm);
  border: 1px solid var(--dg-border);
  background: var(--dg-surface-0);
  cursor: pointer;
  accent-color: var(--dg-brand-primary);
}

/* ============================================================
   TABLES
   ============================================================ */
.dg-table-wrapper { overflow-x: auto; border-radius: var(--dg-card-radius); }
.dg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--dg-font-size-base);
}
.dg-table thead tr th {
  padding: var(--dg-space-3) var(--dg-space-4);
  text-align: left;
  font-size: var(--dg-font-size-xs);
  font-weight: var(--dg-font-weight-semibold);
  color: var(--dg-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--dg-letter-spacing-widest);
  border-bottom: 1px solid var(--dg-border);
  background: var(--dg-surface-1);
  white-space: nowrap;
  user-select: none;
}
.dg-table thead tr th:first-child { border-radius: var(--dg-radius-lg) 0 0 0; }
.dg-table thead tr th:last-child  { border-radius: 0 var(--dg-radius-lg) 0 0; }
.dg-table th.is-sortable { cursor: pointer; }
.dg-table th.is-sortable:hover { color: var(--dg-text-secondary); }
.dg-table-sort-icon { width: 12px; height: 12px; margin-left: var(--dg-space-1); vertical-align: middle; opacity: 0.5; }
.dg-table th.is-sorted .dg-table-sort-icon { opacity: 1; color: var(--dg-brand-primary); }

.dg-table tbody tr td {
  padding: var(--dg-space-3) var(--dg-space-4);
  border-bottom: 1px solid var(--dg-border-subtle);
  color: var(--dg-text);
  vertical-align: middle;
  height: var(--dg-table-row-h);
}
.dg-table tbody tr:last-child td { border-bottom: none; }
.dg-table tbody tr { transition: background var(--dg-duration-fast); }
.dg-table tbody tr:hover td { background: var(--dg-surface-1); }
.dg-table tbody tr.is-selected td { background: var(--dg-primary-50); }
[data-theme="dark"] .dg-table tbody tr.is-selected td { background: rgba(59,130,246,0.08); }

/* ---- Table Controls ---- */
.dg-table-controls {
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
  padding: var(--dg-space-3) var(--dg-space-4);
  border-bottom: 1px solid var(--dg-border-subtle);
  flex-wrap: wrap;
}
.dg-table-search { flex: 1; min-width: 200px; }
.dg-table-pagination {
  display: flex;
  align-items: center;
  gap: var(--dg-space-2);
  padding: var(--dg-space-3) var(--dg-space-4);
  border-top: 1px solid var(--dg-border-subtle);
  font-size: var(--dg-font-size-xs);
  color: var(--dg-text-secondary);
}
.dg-table-pagination-info { flex: 1; }

/* ============================================================
   TABS
   ============================================================ */
.dg-tabs { display: flex; gap: var(--dg-space-1); border-bottom: 1px solid var(--dg-border); }
.dg-tab {
  display: flex; align-items: center; gap: var(--dg-space-2);
  padding: var(--dg-space-3) var(--dg-space-4);
  font-size: var(--dg-font-size-base);
  font-weight: var(--dg-font-weight-medium);
  color: var(--dg-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dg-duration-fast), border-color var(--dg-duration-fast);
  text-decoration: none;
  white-space: nowrap;
}
.dg-tab svg { width: 15px; height: 15px; }
.dg-tab:hover { color: var(--dg-text); }
.dg-tab.is-active { color: var(--dg-brand-primary); border-bottom-color: var(--dg-brand-primary); }
.dg-tab-content > *:not(.is-active-tab) { display: none; }

/* Vertical tabs (settings sidebar) */
.dg-tabs-vertical { flex-direction: column; border-bottom: none; border-right: 1px solid var(--dg-border); gap: 0; }
.dg-tabs-vertical .dg-tab { border-bottom: none; border-right: 2px solid transparent; margin-bottom: 0; margin-right: -1px; border-radius: var(--dg-radius-md) 0 0 var(--dg-radius-md); }
.dg-tabs-vertical .dg-tab.is-active { border-right-color: var(--dg-brand-primary); background: var(--dg-brand-subtle); }

/* ============================================================
   MODALS
   ============================================================ */
.dg-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: var(--dg-z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--dg-space-4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dg-duration-base) var(--dg-ease-default);
}
.dg-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.dg-modal {
  background: var(--dg-surface-0);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-2xl);
  box-shadow: var(--dg-shadow-2xl);
  width: 100%; max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.96) translateY(8px);
  transition: transform var(--dg-duration-base) var(--dg-ease-spring);
}
.dg-modal-overlay.is-open .dg-modal { transform: scale(1) translateY(0); }
.dg-modal-sm { max-width: 380px; }
.dg-modal-lg { max-width: 700px; }
.dg-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--dg-space-5) var(--dg-space-6) var(--dg-space-4);
  border-bottom: 1px solid var(--dg-border-subtle);
}
.dg-modal-title { font-size: var(--dg-font-size-lg); font-weight: var(--dg-font-weight-semibold); }
.dg-modal-close { color: var(--dg-text-muted); }
.dg-modal-close:hover { color: var(--dg-text); }
.dg-modal-body { padding: var(--dg-space-6); }
.dg-modal-footer {
  display: flex; justify-content: flex-end; gap: var(--dg-space-3);
  padding: var(--dg-space-4) var(--dg-space-6);
  border-top: 1px solid var(--dg-border-subtle);
  background: var(--dg-surface-1);
  border-radius: 0 0 var(--dg-radius-2xl) var(--dg-radius-2xl);
}

/* ============================================================
   TOASTS
   ============================================================ */
.dg-toast-container {
  position: fixed;
  bottom: var(--dg-space-5);
  right: var(--dg-space-5);
  z-index: var(--dg-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-2);
  max-width: 380px;
  width: calc(100vw - var(--dg-space-10));
}
.dg-toast {
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
  padding: var(--dg-space-3) var(--dg-space-4);
  background: var(--dg-surface-0);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-xl);
  box-shadow: var(--dg-shadow-lg);
  font-size: var(--dg-font-size-base);
  animation: dg-toast-in var(--dg-duration-slow) var(--dg-ease-spring);
}
.dg-toast-icon { flex-shrink: 0; width: 18px; height: 18px; }
.dg-toast-message { flex: 1; line-height: var(--dg-line-height-normal); }
.dg-toast-close { color: var(--dg-text-muted); cursor: pointer; flex-shrink: 0; width: 16px; height: 16px; }
.dg-toast-success .dg-toast-icon { color: var(--dg-emerald-500); }
.dg-toast-error   .dg-toast-icon { color: var(--dg-danger-500); }
.dg-toast-warning .dg-toast-icon { color: var(--dg-gold-500); }
.dg-toast-info    .dg-toast-icon { color: var(--dg-primary-500); }
@keyframes dg-toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dg-dropdown { position: relative; display: inline-block; }
.dg-dropdown-menu {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  min-width: 180px;
  background: var(--dg-surface-0);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-xl);
  box-shadow: var(--dg-shadow-xl);
  padding: var(--dg-space-1);
  z-index: var(--dg-z-dropdown);
  opacity: 0; pointer-events: none;
  transform: translateY(-4px) scale(0.98);
  transition: opacity var(--dg-duration-base), transform var(--dg-duration-base) var(--dg-ease-spring);
  transform-origin: top right;
}
.dg-dropdown-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.dg-dropdown-item {
  display: flex; align-items: center; gap: var(--dg-space-2);
  padding: var(--dg-space-2) var(--dg-space-3);
  font-size: var(--dg-font-size-base);
  color: var(--dg-text-secondary);
  border-radius: var(--dg-radius-md);
  cursor: pointer;
  transition: background var(--dg-duration-fast), color var(--dg-duration-fast);
  text-decoration: none;
}
.dg-dropdown-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.dg-dropdown-item:hover { background: var(--dg-surface-2); color: var(--dg-text); }
.dg-dropdown-item.is-danger { color: var(--dg-danger-600); }
.dg-dropdown-item.is-danger:hover { background: var(--dg-danger-50); }
.dg-dropdown-divider { height: 1px; background: var(--dg-border-subtle); margin: var(--dg-space-1) 0; }
.dg-dropdown-label {
  padding: var(--dg-space-2) var(--dg-space-3) var(--dg-space-1);
  font-size: var(--dg-font-size-xs);
  color: var(--dg-text-muted);
  font-weight: var(--dg-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--dg-letter-spacing-widest);
}

/* ============================================================
   SKELETON LOADERS
   ============================================================ */
@keyframes dg-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.dg-skeleton {
  border-radius: var(--dg-radius-md);
  background: linear-gradient(
    90deg,
    var(--dg-surface-2) 25%,
    var(--dg-surface-3) 50%,
    var(--dg-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: dg-shimmer 1.6s ease-in-out infinite;
}
[data-theme="dark"] .dg-skeleton {
  background: linear-gradient(
    90deg,
    var(--dg-surface-2) 25%,
    #2a2a2e 50%,
    var(--dg-surface-2) 75%
  );
  background-size: 200% 100%;
}
.dg-skeleton-text   { height: 1em; border-radius: var(--dg-radius-sm); }
.dg-skeleton-title  { height: 1.5em; border-radius: var(--dg-radius-sm); }
.dg-skeleton-card   { height: 120px; border-radius: var(--dg-card-radius); }
.dg-skeleton-avatar { border-radius: var(--dg-radius-full); }

/* ============================================================
   EMPTY STATES
   ============================================================ */
.dg-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--dg-space-16) var(--dg-space-8);
  color: var(--dg-text-muted);
}
.dg-empty-icon {
  width: 56px; height: 56px;
  background: var(--dg-surface-2);
  border-radius: var(--dg-radius-xl);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--dg-space-4);
}
.dg-empty-icon svg { width: 28px; height: 28px; color: var(--dg-text-muted); }
.dg-empty-title   { font-size: var(--dg-font-size-lg); font-weight: var(--dg-font-weight-semibold); color: var(--dg-text-secondary); margin-bottom: var(--dg-space-2); }
.dg-empty-desc    { font-size: var(--dg-font-size-base); color: var(--dg-text-muted); max-width: 360px; line-height: var(--dg-line-height-relaxed); margin-bottom: var(--dg-space-5); }

/* ============================================================
   UPGRADE CARD (Feature Gate)
   ============================================================ */
.dg-upgrade-card {
  border: 1.5px dashed var(--dg-gold-400);
  border-radius: var(--dg-card-radius);
  padding: var(--dg-space-6);
  text-align: center;
  background: linear-gradient(135deg, var(--dg-gold-50), transparent);
}
[data-theme="dark"] .dg-upgrade-card { background: linear-gradient(135deg, rgba(217,119,6,0.06), transparent); }
.dg-upgrade-card-icon { font-size: 2rem; margin-bottom: var(--dg-space-3); }
.dg-upgrade-card-title { font-size: var(--dg-font-size-lg); font-weight: var(--dg-font-weight-semibold); margin-bottom: var(--dg-space-2); }
.dg-upgrade-card-desc  { font-size: var(--dg-font-size-base); color: var(--dg-text-secondary); max-width: 380px; margin: 0 auto var(--dg-space-5); line-height: var(--dg-line-height-relaxed); }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.dg-progress { height: 6px; background: var(--dg-surface-3); border-radius: var(--dg-radius-full); overflow: hidden; }
.dg-progress-bar {
  height: 100%;
  border-radius: var(--dg-radius-full);
  background: var(--dg-brand-primary);
  transition: width var(--dg-duration-slower) var(--dg-ease-out);
}
.dg-progress-bar.is-success { background: var(--dg-emerald-500); }
.dg-progress-bar.is-warning { background: var(--dg-gold-500); }
.dg-progress-bar.is-danger  { background: var(--dg-danger-500); }
.dg-progress-lg { height: 10px; }

/* ============================================================
   AVATAR
   ============================================================ */
.dg-avatar {
  border-radius: var(--dg-radius-full);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--dg-font-weight-semibold);
  letter-spacing: var(--dg-letter-spacing-wide);
  background: var(--dg-primary-100);
  color: var(--dg-primary-700);
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
}
.dg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dg-avatar-xs  { width: 20px; height: 20px; font-size: 0.5625rem; }
.dg-avatar-sm  { width: 28px; height: 28px; font-size: var(--dg-font-size-xs); }
.dg-avatar-md  { width: 36px; height: 36px; font-size: var(--dg-font-size-base); }
.dg-avatar-lg  { width: 48px; height: 48px; font-size: var(--dg-font-size-lg); }
.dg-avatar-xl  { width: 64px; height: 64px; font-size: var(--dg-font-size-2xl); }

/* ============================================================
   ALERT (inline notice)
   ============================================================ */
.dg-alert {
  display: flex; align-items: flex-start; gap: var(--dg-space-3);
  padding: var(--dg-space-4);
  border-radius: var(--dg-radius-lg);
  font-size: var(--dg-font-size-base);
  line-height: var(--dg-line-height-normal);
  border: 1px solid transparent;
}
.dg-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.dg-alert-success { background: var(--dg-emerald-50); color: var(--dg-emerald-700); border-color: var(--dg-emerald-100); }
.dg-alert-warning { background: var(--dg-gold-50);    color: var(--dg-gold-700);    border-color: var(--dg-gold-100); }
.dg-alert-danger  { background: var(--dg-danger-50);  color: var(--dg-danger-700);  border-color: var(--dg-danger-100); }
.dg-alert-info    { background: var(--dg-info-50);    color: var(--dg-primary-700); border-color: var(--dg-primary-100); }

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
.dg-command-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  z-index: var(--dg-z-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16vh;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dg-duration-base);
}
.dg-command-overlay.is-open { opacity: 1; pointer-events: auto; }
.dg-command-box {
  width: 100%; max-width: 580px;
  background: var(--dg-surface-0);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-2xl);
  box-shadow: var(--dg-shadow-2xl);
  overflow: hidden;
  transform: scale(0.96) translateY(-8px);
  transition: transform var(--dg-duration-base) var(--dg-ease-spring);
}
.dg-command-overlay.is-open .dg-command-box { transform: scale(1) translateY(0); }
.dg-command-header {
  display: flex; align-items: center; gap: var(--dg-space-3);
  padding: var(--dg-space-4);
  border-bottom: 1px solid var(--dg-border-subtle);
}
.dg-command-header svg { width: 18px; height: 18px; color: var(--dg-text-muted); flex-shrink: 0; }
.dg-command-input {
  flex: 1;
  border: none; background: transparent;
  font-size: var(--dg-font-size-md);
  color: var(--dg-text);
  outline: none;
}
.dg-command-input::placeholder { color: var(--dg-text-muted); }
.dg-command-results { max-height: 400px; overflow-y: auto; padding: var(--dg-space-2); }
.dg-command-group-label {
  padding: var(--dg-space-2) var(--dg-space-3) var(--dg-space-1);
  font-size: var(--dg-font-size-xs);
  font-weight: var(--dg-font-weight-semibold);
  color: var(--dg-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--dg-letter-spacing-widest);
}
.dg-command-item {
  display: flex; align-items: center; gap: var(--dg-space-3);
  padding: var(--dg-space-2) var(--dg-space-3);
  border-radius: var(--dg-radius-lg);
  cursor: pointer;
  transition: background var(--dg-duration-fast);
}
.dg-command-item svg { width: 15px; height: 15px; color: var(--dg-text-muted); flex-shrink: 0; }
.dg-command-item-label { font-size: var(--dg-font-size-base); color: var(--dg-text); flex: 1; }
.dg-command-item-shortcut {
  font-size: var(--dg-font-size-xs);
  color: var(--dg-text-muted);
  background: var(--dg-surface-2);
  padding: 2px 6px;
  border-radius: var(--dg-radius-sm);
  font-family: var(--dg-font-mono);
}
.dg-command-item:hover, .dg-command-item.is-selected {
  background: var(--dg-surface-2);
}
.dg-command-item.is-selected .dg-command-item-label { color: var(--dg-brand-primary); }
.dg-command-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--dg-space-4);
  padding: var(--dg-space-3) var(--dg-space-4);
  border-top: 1px solid var(--dg-border-subtle);
  font-size: var(--dg-font-size-xs);
  color: var(--dg-text-muted);
}
.dg-command-footer kbd {
  background: var(--dg-surface-2);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-sm);
  padding: 1px 4px;
  font-family: var(--dg-font-mono);
  font-size: 0.625rem;
}

/* ============================================================
   ACTIVITY FEED
   ============================================================ */
.dg-activity { display: flex; flex-direction: column; gap: 0; }
.dg-activity-item { display: flex; gap: var(--dg-space-3); padding: var(--dg-space-4) 0; position: relative; }
.dg-activity-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px; top: 40px; bottom: 0;
  width: 1px;
  background: var(--dg-border-subtle);
}
.dg-activity-icon {
  width: 34px; height: 34px;
  border-radius: var(--dg-radius-full);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--dg-bg);
}
.dg-activity-icon svg { width: 14px; height: 14px; }
.dg-activity-icon-login   { background: var(--dg-primary-50);  color: var(--dg-primary-600); }
.dg-activity-icon-billing { background: var(--dg-emerald-50);  color: var(--dg-emerald-600); }
.dg-activity-icon-device  { background: var(--dg-gold-50);     color: var(--dg-gold-600); }
.dg-activity-icon-tool    { background: var(--dg-info-50);     color: var(--dg-primary-600); }
.dg-activity-icon-workspace { background: var(--dg-surface-2); color: var(--dg-text-secondary); }
.dg-activity-icon-alert   { background: var(--dg-danger-50);   color: var(--dg-danger-600); }
.dg-activity-body { flex: 1; min-width: 0; }
.dg-activity-title { font-size: var(--dg-font-size-base); color: var(--dg-text); line-height: var(--dg-line-height-normal); }
.dg-activity-title strong { font-weight: var(--dg-font-weight-semibold); }
.dg-activity-time  { font-size: var(--dg-font-size-xs); color: var(--dg-text-muted); margin-top: var(--dg-space-1); }

/* ============================================================
   ONBOARDING STEPS
   ============================================================ */
.dg-onboarding-steps { display: flex; align-items: center; gap: 0; margin-bottom: var(--dg-space-8); }
.dg-onboarding-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.dg-onboarding-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px; left: calc(50% + 16px); right: calc(-50% + 16px);
  height: 2px;
  background: var(--dg-border);
}
.dg-onboarding-step.is-complete:not(:last-child)::after { background: var(--dg-brand-primary); }
.dg-onboarding-step-circle {
  width: 32px; height: 32px;
  border-radius: var(--dg-radius-full);
  border: 2px solid var(--dg-border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--dg-font-size-base);
  font-weight: var(--dg-font-weight-semibold);
  color: var(--dg-text-muted);
  background: var(--dg-surface-0);
  transition: all var(--dg-duration-base);
  z-index: 1;
}
.dg-onboarding-step.is-active .dg-onboarding-step-circle {
  background: var(--dg-brand-primary);
  border-color: var(--dg-brand-primary);
  color: white;
}
.dg-onboarding-step.is-complete .dg-onboarding-step-circle {
  background: var(--dg-emerald-500);
  border-color: var(--dg-emerald-500);
  color: white;
}
.dg-onboarding-step-label {
  font-size: var(--dg-font-size-xs);
  color: var(--dg-text-muted);
  margin-top: var(--dg-space-2);
  text-align: center;
  white-space: nowrap;
}
.dg-onboarding-step.is-active .dg-onboarding-step-label { color: var(--dg-brand-primary); font-weight: var(--dg-font-weight-medium); }
.dg-onboarding-step.is-complete .dg-onboarding-step-label { color: var(--dg-emerald-600); }

/* ============================================================
   AI ASSISTANT
   ============================================================ */
.dg-ai-bubble {
  position: fixed;
  bottom: var(--dg-space-6);
  right: var(--dg-space-6);
  z-index: var(--dg-z-ai);
}
.dg-ai-btn {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--dg-primary-700), var(--dg-primary-500));
  border-radius: var(--dg-radius-full);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,99,235,0.4);
  cursor: pointer;
  transition: transform var(--dg-duration-base) var(--dg-ease-spring), box-shadow var(--dg-duration-base);
  border: none;
  color: white;
}
.dg-ai-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37,99,235,0.5); }
.dg-ai-btn svg { width: 22px; height: 22px; }
.dg-ai-panel {
  position: absolute; bottom: 64px; right: 0;
  width: 340px;
  background: var(--dg-surface-0);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-2xl);
  box-shadow: var(--dg-shadow-2xl);
  overflow: hidden;
  display: none;
}
.dg-ai-panel.is-open { display: flex; flex-direction: column; }
.dg-ai-panel-header { padding: var(--dg-space-4); background: linear-gradient(135deg, var(--dg-primary-900), var(--dg-primary-700)); color: white; }
.dg-ai-panel-title  { font-size: var(--dg-font-size-base); font-weight: var(--dg-font-weight-semibold); }
.dg-ai-panel-subtitle { font-size: var(--dg-font-size-xs); opacity: 0.7; margin-top: 2px; }
.dg-ai-panel-body { padding: var(--dg-space-5); min-height: 120px; font-size: var(--dg-font-size-base); color: var(--dg-text-secondary); }

/* ============================================================
   NOTIFICATION PANEL
   ============================================================ */
.dg-notification-item {
  display: flex; align-items: flex-start; gap: var(--dg-space-3);
  padding: var(--dg-space-3) var(--dg-space-4);
  cursor: pointer;
  transition: background var(--dg-duration-fast);
  border-bottom: 1px solid var(--dg-border-subtle);
}
.dg-notification-item:hover { background: var(--dg-surface-1); }
.dg-notification-item.is-unread { background: var(--dg-primary-50); }
[data-theme="dark"] .dg-notification-item.is-unread { background: rgba(59,130,246,0.06); }
.dg-notification-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dg-brand-primary); flex-shrink: 0; margin-top: 6px; }
.dg-notification-body { flex: 1; min-width: 0; }
.dg-notification-message { font-size: var(--dg-font-size-base); color: var(--dg-text); line-height: var(--dg-line-height-normal); }
.dg-notification-time   { font-size: var(--dg-font-size-xs); color: var(--dg-text-muted); margin-top: 2px; }

/* ============================================================
   LICENSE KEY CARD
   ============================================================ */
.dg-license-key {
  font-family: var(--dg-font-mono);
  font-size: var(--dg-font-size-sm);
  background: var(--dg-surface-2);
  padding: var(--dg-space-2) var(--dg-space-3);
  border-radius: var(--dg-radius-md);
  letter-spacing: var(--dg-letter-spacing-wider);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dg-space-2);
  color: var(--dg-text-secondary);
}
.dg-license-key-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-license-copy-btn { cursor: pointer; color: var(--dg-text-muted); flex-shrink: 0; }
.dg-license-copy-btn:hover { color: var(--dg-brand-primary); }

/* ============================================================
   WORKSPACE SWITCHER
   ============================================================ */
.dg-ws-switcher-btn {
  display: flex; align-items: center; gap: var(--dg-space-2);
  padding: var(--dg-space-2) var(--dg-space-3);
  background: var(--dg-surface-2);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-md);
  cursor: pointer;
  transition: all var(--dg-duration-fast);
  width: 100%;
}
.dg-ws-switcher-btn:hover { background: var(--dg-surface-3); }
.dg-ws-name { font-size: var(--dg-font-size-base); font-weight: var(--dg-font-weight-medium); color: var(--dg-text); flex: 1; min-width: 0; }
.dg-ws-chevron { color: var(--dg-text-muted); width: 14px; height: 14px; flex-shrink: 0; }