/* ============================================================
   MAILTHENTIC DESIGN SYSTEM — Enterprise SaaS Theme
   ============================================================ */

:root {
  /* Brand palette */
  --pk-primary-900: #0b1220;
  --pk-primary-800: #0f1b2d;
  --pk-primary-700: #162843;
  --pk-accent-600: #10b981;
  --pk-accent-700: #059669;

  /* Surfaces */
  --pk-bg: #f7f8fb;
  --pk-card: #ffffff;
  --pk-border: #e5e7eb;

  /* Typography */
  --pk-text: #0f172a;
  --pk-muted: #64748b;

  /* Radius tokens */
  --pk-radius-md: 0.625rem;
  --pk-radius-lg: 0.75rem;
  --pk-radius-xl: 0.95rem;
  --pk-radius-2xl: 1.25rem;

  /* Shadow tokens */
  --pk-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --pk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --pk-shadow-md: 0 4px 16px -6px rgba(15, 23, 42, 0.12);
  --pk-shadow-lg: 0 10px 24px -8px rgba(15, 23, 42, 0.16);

  /* Focus ring */
  --pk-ring: 0 0 0 3px rgba(16, 185, 129, 0.18);
  --pk-ring-red: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* ---- Base ---- */
html, body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--pk-text);
  background-color: var(--pk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   CARDS
   ============================================================ */
.pak-card {
  border: 1px solid var(--pk-border);
  background: var(--pk-card);
  border-radius: var(--pk-radius-2xl);
  box-shadow: var(--pk-shadow-md);
}

.pak-card-soft {
  border: 1px solid var(--pk-border);
  background: var(--pk-card);
  border-radius: var(--pk-radius-xl);
  box-shadow: var(--pk-shadow-sm);
}

/* ---- Utility ---- */
.pak-muted {
  color: var(--pk-muted);
}

.pak-gradient-wash {
  background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.18), transparent 40%),
    radial-gradient(circle at top right, rgba(22, 40, 67, 0.12), transparent 36%), #f7f8fb;
}

/* ============================================================
   BUTTONS  —  Unified system with consistent sizing
   ============================================================ */
.pak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  transition: all 180ms ease;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.pak-btn:focus-visible {
  outline: none;
  box-shadow: var(--pk-ring);
}

.pak-btn:disabled,
.pak-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary — emerald accent */
.pak-btn-primary {
  background: var(--pk-accent-600);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.24);
}

.pak-btn-primary:hover:not(:disabled) {
  background: var(--pk-accent-700);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
  transform: translateY(-0.5px);
}

/* Secondary — white outline */
.pak-btn-secondary {
  background: #fff;
  color: var(--pk-text);
  border-color: var(--pk-border);
  box-shadow: var(--pk-shadow-xs);
}

.pak-btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Danger */
.pak-btn-danger {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.24);
}

.pak-btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

/* Soft — ghost style */
.pak-btn-soft {
  background: #f1f5f9;
  color: #475569;
  border-color: transparent;
}

.pak-btn-soft:hover:not(:disabled) {
  background: #e2e8f0;
  color: #334155;
}

/* Large variant */
.pak-btn-lg {
  padding: 0.8rem 1.75rem;
  font-size: 0.9375rem;
  border-radius: 0.8rem;
}

/* ============================================================
   BADGES  —  Status indicators
   ============================================================ */
.pak-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.45;
}

.pak-badge-valid {
  background: #dcfce7;
  color: #047857;
}

.pak-badge-risky {
  background: #fef3c7;
  color: #b45309;
}

.pak-badge-invalid {
  background: #fee2e2;
  color: #b91c1c;
}

.pak-badge-unknown {
  background: #e2e8f0;
  color: #475569;
}

.pak-badge-info {
  background: #dbeafe;
  color: #1e40af;
}

/* ============================================================
   FORM SYSTEM  —  Inputs, labels, help, errors
   ============================================================ */
.pak-input,
.pak-form :where(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], input[type="file"], input[type="number"], input[type="tel"], input[type="url"], select, textarea) {
  width: 100%;
  min-height: 2.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--pk-border);
  background: #fff;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--pk-text);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.pak-form :where(textarea),
textarea.pak-input {
  min-height: 7rem;
  resize: vertical;
}

.pak-input::placeholder,
.pak-form :where(input, select, textarea)::placeholder {
  color: #94a3b8;
}

.pak-input:focus,
.pak-form :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--pk-accent-600);
  box-shadow: var(--pk-ring);
}

.pak-input[aria-invalid="true"],
.pak-form :where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]) {
  border-color: #ef4444;
  box-shadow: var(--pk-ring-red);
}

.pak-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: -0.005em;
}

.pak-help {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.5;
}

.pak-error {
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #dc2626;
}

/* ============================================================
   ALERTS
   ============================================================ */
.pak-alert {
  border-radius: var(--pk-radius-lg);
  border: 1px solid var(--pk-border);
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pak-alert-success {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.pak-alert-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.pak-alert-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.pak-alert-info {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e40af;
}

/* ============================================================
   TABLE SYSTEM  —  Consistent data tables
   ============================================================ */
.pak-table {
  width: 100%;
  font-size: 0.8125rem;
  line-height: 1.5;
  border-collapse: separate;
  border-spacing: 0;
}

.pak-table thead {
  border-bottom: 1px solid var(--pk-border);
}

.pak-table thead th {
  padding: 0.65rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pk-muted);
  text-align: left;
  background: #f8fafc;
  white-space: nowrap;
}

.pak-table thead th:first-child {
  border-radius: 0.5rem 0 0 0;
}

.pak-table thead th:last-child {
  border-radius: 0 0.5rem 0 0;
}

.pak-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 120ms ease;
}

.pak-table tbody tr:hover {
  background-color: #f8fafc;
}

.pak-table tbody tr:last-child {
  border-bottom: none;
}

.pak-table tbody td {
  padding: 0.65rem 0.75rem;
  color: var(--pk-text);
  vertical-align: middle;
}

.pak-table tbody td.muted {
  color: var(--pk-muted);
}

/* ============================================================
   STAT CARD  —  Dashboard metric cards
   ============================================================ */
.pak-stat-card {
  border: 1px solid var(--pk-border);
  background: var(--pk-card);
  border-radius: var(--pk-radius-xl);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--pk-shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.pak-stat-card:hover {
  box-shadow: var(--pk-shadow-md);
  transform: translateY(-1px);
}

/* ============================================================
   SECTION EYEBROW  —  Label chips above headings
   ============================================================ */
.pak-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #047857;
}

/* ============================================================
   STEP INDICATOR  —  Numbered circles for process flows
   ============================================================ */
.pak-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--pk-primary-900);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ============================================================
   DASHBOARD SHELL  —  Sidebar + layout
   ============================================================ */
#dashboardSidebar {
  will-change: width, transform;
}

#dashboardMain {
  will-change: margin-left;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.dashboard-shell {
  overflow-x: hidden;
}

.dashboard-main-inner > * {
  max-width: 100%;
}

/* ---- Active nav item ---- */
#dashboardSidebar .nav-item-active {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-weight: 600;
}

/* ---- Nav item hover ---- */
#dashboardSidebar .nav-item {
  transition: all 140ms ease;
  font-weight: 500;
}

#dashboardSidebar .nav-item:not(.nav-item-active):hover {
  background: #f1f5f9;
  color: var(--pk-primary-900);
}

/* ---- Desktop sidebar ---- */
@media (min-width: 768px) {
  #dashboardSidebar {
    width: 16rem;
    transform: translateX(0) !important;
  }

  body:not(.sidebar-collapsed) #dashboardMain {
    margin-left: 16rem;
    width: calc(100% - 16rem);
  }

  body.sidebar-collapsed #dashboardSidebar {
    width: 5rem;
  }

  body.sidebar-collapsed #dashboardMain {
    margin-left: 5rem;
    width: calc(100% - 5rem);
  }

  body.sidebar-collapsed #dashboardSidebar .brand-block {
    justify-content: center;
  }

  body.sidebar-collapsed #dashboardSidebar .credit-panel {
    display: none;
  }

  body.sidebar-collapsed #dashboardSidebar nav {
    margin-top: 0.25rem;
  }

  body.sidebar-collapsed #dashboardSidebar section {
    margin-top: 0.9rem;
  }

  body.sidebar-collapsed #dashboardSidebar .nav-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.75rem !important;
    min-width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border-radius: 0.9rem;
    transition: all 180ms ease;
  }

  body.sidebar-collapsed #dashboardSidebar .space-y-1 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.35rem;
  }

  body.sidebar-collapsed #dashboardSidebar .nav-item-active {
    box-shadow: 0 6px 14px -10px rgba(16, 185, 129, 0.55);
  }

  body.sidebar-collapsed #dashboardSidebar .nav-label {
    width: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
  }
}

/* ---- Mobile sidebar ---- */
@media (max-width: 767.98px) {
  #dashboardSidebar {
    width: 16rem;
    transform: translateX(-100%);
  }

  body.sidebar-mobile-open #dashboardSidebar {
    transform: translateX(0);
  }

  #dashboardMain {
    margin-left: 0 !important;
    width: 100% !important;
  }

  body.sidebar-mobile-open #sidebarBackdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pak-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pak-pagination a,
.pak-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 140ms ease;
}

.pak-pagination a:hover {
  background: #f1f5f9;
}

.pak-pagination .active {
  background: var(--pk-primary-900);
  color: #fff;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.pak-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.pak-empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: #f1f5f9;
  color: #94a3b8;
  margin-bottom: 1rem;
}

/* ============================================================
   DROPZONE
   ============================================================ */
.pak-dropzone {
  border: 2px dashed var(--pk-border);
  border-radius: var(--pk-radius-2xl);
  background: #fafbfc;
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: all 180ms ease;
  cursor: pointer;
}

.pak-dropzone:hover,
.pak-dropzone.drag-over {
  border-color: var(--pk-accent-600);
  background: #ecfdf5;
}

/* ============================================================
   PRICING CARD
   ============================================================ */
.pak-pricing-card {
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-xl);
  padding: 1.5rem;
  background: var(--pk-card);
  transition: all 200ms ease;
}

.pak-pricing-card:hover {
  border-color: var(--pk-accent-600);
  box-shadow: 0 0 0 1px var(--pk-accent-600), var(--pk-shadow-md);
  transform: translateY(-2px);
}

.pak-pricing-card-featured {
  border-color: var(--pk-accent-600);
  box-shadow: 0 0 0 1px var(--pk-accent-600);
  position: relative;
}