/* ============================================
   PUFFIN - Financial Document Processor
   Design System: Editorial Monochrome
   ============================================ */

/* -------- Design Tokens -------- */
:root {
  /* Typography */
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Monochromatic Palette - Softened for better readability */
  --ink-100: #1A1A1A;  /* Softened from #0A0A0A - easier on eyes */
  --ink-90: #262626;
  --ink-80: #333333;
  --ink-70: #4A4A4A;
  --ink-60: #5C5C5C;
  --ink-50: #787878;
  --ink-40: #A3A3A3;
  --ink-30: #D4D4D4;
  --ink-20: #E5E5E5;
  --ink-15: #EDEDED;
  --ink-10: #F5F5F5;
  --ink-05: #FAFAFA;
  --ink-00: #FFFFFF;

  /* Accent - Puffin Orange (used sparingly) */
  --accent: #F97316;
  --accent-muted: #FDBA74;
  --accent-subtle: #FFF7ED;

  /* Semantic */
  --success: #16A34A;
  --success-subtle: #F0FDF4;
  --warning: #CA8A04;
  --warning-subtle: #FEFCE8;
  --error: #DC2626;
  --error-subtle: #FEF2F2;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Shadows - Subtle, refined */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.03);
  --shadow-ring: 0 0 0 3px rgba(10, 10, 10, 0.08);
  --shadow-ring-accent: 0 0 0 3px rgba(249, 115, 22, 0.15);

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
}

/* -------- Base Styles -------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-90);
  background: var(--ink-05);
  margin: 0;
}

/* -------- Typography Refinements -------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-100);
}

/* -------- Selection -------- */
::selection {
  background: var(--ink-100);
  color: var(--ink-00);
}

/* -------- Links -------- */
a {
  color: var(--ink-90);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

a:hover {
  color: var(--ink-100);
}

/* -------- Focus States -------- */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
}

/* -------- MudBlazor Overrides -------- */

/* AppBar */
.mud-appbar {
  background: var(--ink-00) !important;
  color: var(--ink-90) !important;
  border-bottom: 1px solid var(--ink-20) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mud-appbar.mud-appbar-fixed-top {
  z-index: 1200;
}

/* Drawer */
.mud-drawer {
  background: var(--ink-00) !important;
  border-right: 1px solid var(--ink-15) !important;
}

/* Navigation Links */
.mud-nav-link {
  border-radius: var(--radius-md) !important;
  margin: 2px 0 !important;
  padding: 10px 14px !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  color: var(--ink-60) !important;
  transition: all var(--duration-fast) ease !important;
}

.mud-nav-link:hover {
  background: var(--ink-10) !important;
  color: var(--ink-90) !important;
}

.mud-nav-link.active {
  background: var(--ink-100) !important;
  color: var(--ink-00) !important;
}

.mud-nav-link.active .mud-nav-link-icon {
  color: var(--ink-00) !important;
}

.mud-nav-link-icon {
  color: var(--ink-50) !important;
  transition: color var(--duration-fast) ease !important;
}

.mud-nav-link:hover .mud-nav-link-icon {
  color: var(--ink-70) !important;
}

/* Paper/Cards */
.mud-paper {
  background: var(--ink-00) !important;
  border: 1px solid var(--ink-15) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-4 {
  box-shadow: var(--shadow-sm) !important;
}

/* Buttons */
.mud-button-root {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
}

/* Primary Button - Solid Black */
.mud-button-filled.mud-button-filled-primary {
  background: var(--ink-100) !important;
  color: var(--ink-00) !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
  background: var(--ink-80) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}

.mud-button-filled.mud-button-filled-primary:active {
  transform: translateY(0);
}

/* Secondary/Outlined Button */
.mud-button-outlined.mud-button-outlined-primary {
  border-color: var(--ink-30) !important;
  color: var(--ink-90) !important;
}

.mud-button-outlined.mud-button-outlined-primary:hover {
  background: var(--ink-10) !important;
  border-color: var(--ink-40) !important;
}

/* Text Button */
.mud-button-text.mud-button-text-primary {
  color: var(--ink-70) !important;
}

.mud-button-text.mud-button-text-primary:hover {
  background: var(--ink-10) !important;
  color: var(--ink-90) !important;
}

/* Icon Buttons */
.mud-icon-button {
  transition: all var(--duration-fast) ease !important;
}

.mud-icon-button:hover {
  background: var(--ink-10) !important;
}

/* Chips */
.mud-chip {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0 !important;
  border-radius: var(--radius-full) !important;
  transition: all var(--duration-fast) ease !important;
}

.mud-chip.mud-chip-size-small {
  height: 24px !important;
  font-size: 0.6875rem !important;
}

/* Status Chips - Monochrome variants */
.mud-chip.mud-chip-filled {
  border: none !important;
}

/* Default/Pending */
.mud-chip.mud-chip-color-default.mud-chip-filled {
  background: var(--ink-15) !important;
  color: var(--ink-70) !important;
}

.mud-chip.mud-chip-color-default.mud-chip-outlined {
  background: transparent !important;
  border: 1px solid var(--ink-30) !important;
  color: var(--ink-50) !important;
}

/* Info/Processing */
.mud-chip.mud-chip-color-info.mud-chip-filled {
  background: var(--ink-90) !important;
  color: var(--ink-00) !important;
}

.mud-chip.mud-chip-color-info.mud-chip-outlined {
  background: transparent !important;
  border: 1px solid var(--ink-40) !important;
  color: var(--ink-60) !important;
}

/* Success/Completed */
.mud-chip.mud-chip-color-success.mud-chip-filled {
  background: var(--ink-100) !important;
  color: var(--ink-00) !important;
}

.mud-chip.mud-chip-color-success.mud-chip-outlined {
  background: transparent !important;
  border: 1px solid var(--ink-30) !important;
  color: var(--ink-50) !important;
}

/* Primary/Reviewed */
.mud-chip.mud-chip-color-primary.mud-chip-filled {
  background: var(--accent) !important;
  color: var(--ink-00) !important;
}

.mud-chip.mud-chip-color-primary.mud-chip-outlined {
  background: transparent !important;
  border: 1px solid var(--accent-muted) !important;
  color: var(--accent) !important;
  opacity: 0.7;
}

/* Error/Failed */
.mud-chip.mud-chip-color-error.mud-chip-filled {
  background: var(--error) !important;
  color: var(--ink-00) !important;
}

.mud-chip.mud-chip-color-error.mud-chip-outlined {
  background: transparent !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
  color: var(--error) !important;
  opacity: 0.7;
}

/* Filter chip inactive state */
.filter-chip-inactive {
  opacity: 0.5 !important;
}

.filter-chip-inactive:hover {
  opacity: 0.75 !important;
}

/* Data Grid */
.mud-table {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

.mud-table-head .mud-table-cell {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-50) !important;
  background: var(--ink-05) !important;
  border-bottom: 1px solid var(--ink-15) !important;
  padding: 14px 16px !important;
}

.mud-table-body .mud-table-row {
  transition: background var(--duration-fast) ease;
}

.mud-table-body .mud-table-row:hover {
  background: var(--ink-05) !important;
}

.mud-table-body .mud-table-cell {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--ink-10) !important;
  font-size: 0.875rem !important;
  color: var(--ink-80) !important;
}

/* Table Links */
.mud-table .mud-link {
  color: var(--ink-90) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.mud-table .mud-link:hover {
  color: var(--ink-100) !important;
  text-decoration: underline !important;
}

/* Inputs */
.mud-input-outlined .mud-input-control-input-container {
  border-radius: var(--radius-md) !important;
}

.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--ink-30) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--duration-fast) ease !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
  border-color: var(--ink-50) !important;
}

.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--ink-100) !important;
  border-width: 1.5px !important;
}

.mud-input-slot {
  font-family: var(--font-sans) !important;
}

/* Select/Dropdown */
.mud-select .mud-input-slot {
  font-size: 0.875rem !important;
}

/* Avatar */
.mud-avatar {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

.mud-avatar.mud-avatar-filled-primary {
  background: var(--ink-100) !important;
  color: var(--ink-00) !important;
}

/* Snackbar */
.mud-snackbar {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
}

/* Dialog */
.mud-dialog {
  border-radius: var(--radius-xl) !important;
}

.mud-dialog-title {
  font-weight: 600 !important;
}

/* Progress */
.mud-progress-linear {
  border-radius: var(--radius-full) !important;
  background: var(--ink-15) !important;
}

.mud-progress-linear-bar {
  background: var(--ink-100) !important;
}

/* -------- Custom Components -------- */

/* Page Header */
.page-header {
  margin-bottom: var(--space-8);
}

.page-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ink-100);
  letter-spacing: -0.03em;
  margin: 0;
}

/* Status Indicator Dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot--pending { background: var(--ink-40); }
.status-dot--processing { background: var(--ink-70); animation: pulse 1.5s infinite; }
.status-dot--completed { background: var(--ink-100); }
.status-dot--reviewed { background: var(--accent); }
.status-dot--failed { background: var(--error); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  background: var(--ink-10);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  color: var(--ink-40);
}

.empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-90);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  color: var(--ink-50);
  margin-bottom: var(--space-6);
}

/* Financial Values */
.financial-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 0.875rem;
}

.financial-value--positive { color: var(--success); }
.financial-value--negative { color: var(--error); }

/* Utility Classes */
.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--ink-50); }
.text-primary { color: var(--ink-90); }
.text-accent { color: var(--accent); }

/* -------- Animations -------- */
.page-enter {
  animation: fadeSlideUp 0.4s var(--ease-out) forwards;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered list animation */
.stagger > * {
  opacity: 0;
  animation: fadeSlideUp 0.4s var(--ease-out) forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }

/* -------- Print Styles -------- */
@media print {
  .mud-appbar,
  .mud-drawer,
  .no-print {
    display: none !important;
  }

  .mud-main-content {
    padding: 0 !important;
  }
}

/* -------- Responsive -------- */
@media (max-width: 960px) {
  .mud-drawer-open-responsive-md-left {
    width: 100% !important;
  }
}