/**
 * POLISH PACK — MAX LEVEL SaaS UI (Stripe/Linear Tier)
 * Loads LAST. Pure visual refinement.
 * - Visual depth (Layer 2 for dropdowns/modals)
 * - Micro-interactions (180ms)
 * - KPI intelligence
 * - Sidebar premium
 * - Onboarding elevation
 */

/* ============================================
   PHASE 1 — LAYER 2 (Elevated surfaces)
   ============================================ */
.dropdown-menu,
.notif-dropdown,
.modal-content,
.cw-context-menu {
  box-shadow: var(--shadow-elevated, 0 8px 16px rgba(15,23,42,0.06), 0 20px 40px rgba(15,23,42,0.08)) !important;
}

/* ============================================
   PHASE 3 — MICRO INTERACTIONS (180ms)
   ============================================ */

/* Cards: hover translateY(-2px), shadow increase */
.card-xl,
.ds-card,
.dashboard-card,
.section-card {
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease !important;
}

.card-xl:hover,
.ds-card:hover,
.dashboard-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-2) !important;
}

/* Buttons: hover darken, active press */
.btn {
  transition: all 180ms ease !important;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
}

.btn:active:not(:disabled) {
  transform: translateY(0) !important;
}

.btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Table rows: subtle hover */
.table tbody tr {
  transition: background 180ms ease !important;
}

.table tbody tr:hover {
  background: var(--table-hover) !important;
}

/* Badges: softer, consistent radius */
.badge {
  border-radius: 999px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
}

/* Inputs: focus ring, no browser outline */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* ============================================
   PHASE 2 — KPI INTELLIGENCE
   ============================================ */
.ds-kpi-card {
  position: relative;
  overflow: hidden;
}

.ds-kpi-card {
  padding-left: var(--ds-space-3) !important;
}

.ds-kpi-card .kpi-icon {
  position: absolute;
  top: var(--ds-space-2);
  left: var(--ds-space-2);
  right: auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 16px;
}

.ds-kpi-card .kpi-title,
.ds-kpi-card .kpi-value,
.ds-kpi-card .kpi-subtitle,
.ds-kpi-card .kpi-delta,
.ds-kpi-card .kpi-link {
  padding-left: 52px;
}

.ds-kpi-card .kpi-delta {
  font-size: var(--ds-caption);
  color: var(--text-muted);
  margin-top: var(--ds-space-1);
}

.ds-kpi-card .kpi-delta.positive { color: var(--success); }
.ds-kpi-card .kpi-delta.negative { color: var(--danger); }

.ds-kpi-card .kpi-sparkline {
  height: 28px;
  margin-top: var(--ds-space-2);
  margin-left: 52px;
  background: linear-gradient(180deg, var(--surface-2) 0%, transparent 100%);
  border-radius: var(--radius-sm);
  opacity: 0.5;
}

/* ============================================
   PHASE 4 — PAGE HEADER
   ============================================ */
.page-header {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding-bottom: var(--ds-space-2) !important;
  margin-bottom: var(--ds-space-3) !important;
}

.page-title {
  font-weight: 700 !important;
}

.page-subtitle {
  color: var(--text-muted) !important;
  font-size: var(--ds-body) !important;
}

/* ============================================
   PHASE 5 — TABLE REFINEMENT
   ============================================ */
.table th {
  font-weight: 600 !important;
  padding: var(--ds-space-2) var(--ds-space-2) !important;
  border-bottom: 1px solid var(--border) !important;
}

.table td {
  padding: var(--ds-space-2) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

.table .col-actions {
  text-align: right !important;
}

/* ============================================
   PHASE 6 — EMPTY STATE (no grey blocks)
   ============================================ */
.empty-state {
  background: var(--surface-2) !important;
  border: 1px dashed var(--border) !important;
  border-radius: var(--radius-md) !important;
}

.empty-state .empty-icon {
  color: var(--text-soft) !important;
  opacity: 0.7 !important;
}

/* ============================================
   PHASE 7 — SIDEBAR PREMIUM
   ============================================ */
.menu-item > a {
  transition: background 180ms ease, color 180ms ease, transform 180ms ease !important;
}

.menu-item > a:hover {
  transform: translateX(3px) !important;
}

.menu-item.is-active > a {
  background: var(--sidebar-active) !important;
  color: var(--sidebar-active-text) !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}

.menu-section-divider {
  margin-top: var(--ds-space-3) !important;
  margin-bottom: var(--ds-space-1) !important;
  padding-top: var(--ds-space-2) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
}

.menu-section-divider:first-of-type {
  margin-top: var(--ds-space-2) !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.menu-section-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--sidebar-text-muted) !important;
  opacity: 0.85 !important;
}

/* ============================================
   PHASE 8 — ONBOARDING ELEVATION
   ============================================ */
.onboarding-status-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--ds-space-3) !important;
  box-shadow: var(--shadow-1) !important;
}

.onboarding-status-badge {
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

.onboarding-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.onboarding-checklist li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--ds-space-2) var(--ds-space-3) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  gap: var(--ds-space-2) !important;
}

.onboarding-checklist li:last-child {
  border-bottom: none !important;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

.onboarding-step-card {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-space-2) !important;
  padding: var(--ds-space-2) var(--ds-space-3) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-2) !important;
}

.onboarding-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.onboarding-capability-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: var(--ds-space-2) !important;
}

.onboarding-capability-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-space-2) !important;
  padding: var(--ds-space-2) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-2) !important;
}

/* Utility: text colors for onboarding */
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Utility: spacing (onboarding) */
.gap-2 { gap: var(--ds-space-1) !important; }
.flex-wrap { flex-wrap: wrap !important; }
.mt-3 { margin-top: var(--ds-space-3) !important; }
.mb-0 { margin-bottom: 0 !important; }
.me-2 { margin-inline-end: var(--ds-space-1) !important; }
.mb-4 { margin-bottom: var(--ds-space-4) !important; }

/* ============================================
   PHASE 9 — CONSISTENCY (unified radii, padding)
   ============================================ */
.card-xl,
.ds-card,
.dashboard-card,
.section-card,
.modal-content,
.dropdown-menu {
  border-radius: var(--radius-md) !important;
}

.btn,
.btn-sm,
.btn-lg {
  border-radius: var(--radius-sm) !important;
}

.form-control,
input[type="text"],
input[type="email"],
select,
textarea {
  border-radius: var(--radius-sm) !important;
}