pfm/PostFundManagement.ConsoleUI/src/index.css

@import "tailwindcss";

@theme {
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@layer base {
  :root {
    color-scheme: dark;
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  body {
    background-color: #090d16;
    color: #e2e8f0;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  button, input, select, textarea {
    font-family: inherit;
  }

  .font-mono, code, kbd, samp, pre {
    font-family: var(--font-mono) !important;
  }

  /* Form control color scheme */
  input, select, textarea {
    color-scheme: dark;
  }

  /* Custom dark scrollbar styling - auto-appearing with transparent tracks */
  * {
    scrollbar-width: thin;
    scrollbar-color: #262626 transparent;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: #262626;
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
  }

  /* Table responsive containment and smooth auto-scrolling */
  .overflow-x-auto {
    overflow-x: auto !important;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure tables preserve minimum readable width without squashing action buttons */
  .overflow-x-auto > table {
    min-width: 780px;
  }
}

/* High Contrast Dark Theme Adaptations for existing utility classes */
.bg-white {
  background-color: #111111 !important;
}

.bg-slate-50,
.bg-slate-50\/50,
.bg-slate-50\/60,
.bg-slate-50\/75,
.bg-slate-50\/80,
.bg-slate-50\/90 {
  background-color: #161616 !important;
}

.bg-slate-100,
.bg-slate-200 {
  background-color: #202020 !important;
}

.border-slate-100 {
  border-color: #222222 !important;
}

.border-slate-200 {
  border-color: #2d2d2d !important;
}

.border-slate-300 {
  border-color: #3d3d3d !important;
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #242424 !important;
}

/* Text contrast enhancements */
.text-slate-900 {
  color: #ffffff !important;
}

.text-slate-800 {
  color: #f8fafc !important;
}

.text-slate-700 {
  color: #f1f5f9 !important;
}

.text-slate-600 {
  color: #e2e8f0 !important;
}

.text-slate-500 {
  color: #cbd5e1 !important;
}

.text-slate-400 {
  color: #94a3b8 !important;
}

.text-gray-900 {
  color: #ffffff !important;
}

.text-gray-800 {
  color: #f8fafc !important;
}

.text-gray-700 {
  color: #f1f5f9 !important;
}

.text-gray-600 {
  color: #e2e8f0 !important;
}

.text-gray-500 {
  color: #cbd5e1 !important;
}

.text-gray-400 {
  color: #94a3b8 !important;
}

/* High-contrast status badges and notification banners */
.bg-emerald-50,
.bg-emerald-50\/40,
.bg-emerald-50\/60 {
  background-color: rgba(16, 185, 129, 0.16) !important;
}

.text-emerald-700,
.text-emerald-800,
.text-emerald-900 {
  color: #6ee7b7 !important;
}

.border-emerald-200,
.border-emerald-300 {
  border-color: rgba(110, 231, 183, 0.35) !important;
}

.bg-amber-50,
.bg-amber-50\/40,
.bg-amber-50\/60 {
  background-color: rgba(245, 158, 11, 0.16) !important;
}

.text-amber-700,
.text-amber-800,
.text-amber-900 {
  color: #fcd34d !important;
}

.border-amber-200,
.border-amber-300 {
  border-color: rgba(252, 211, 77, 0.35) !important;
}

.bg-rose-50,
.bg-rose-50\/40,
.bg-rose-50\/60 {
  background-color: rgba(244, 63, 94, 0.16) !important;
}

.text-rose-700,
.text-rose-800,
.text-rose-900 {
  color: #fda4af !important;
}

.border-rose-200,
.border-rose-300 {
  border-color: rgba(253, 164, 175, 0.35) !important;
}

.bg-purple-50,
.bg-indigo-50 {
  background-color: rgba(139, 92, 246, 0.16) !important;
}

.text-purple-700,
.text-purple-800,
.text-indigo-700,
.text-indigo-800 {
  color: #d8b4fe !important;
}

.border-purple-200,
.border-purple-300,
.border-indigo-200,
.border-indigo-300 {
  border-color: rgba(216, 180, 254, 0.35) !important;
}

.bg-sky-50,
.bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.16) !important;
}

.text-sky-700,
.text-sky-800,
.text-blue-700,
.text-blue-800 {
  color: #93c5fd !important;
}

.border-sky-200,
.border-sky-300,
.border-blue-200,
.border-blue-300 {
  border-color: rgba(147, 197, 253, 0.35) !important;
}

/* Form inputs, textareas, and select controls */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  background-color: #141414 !important;
  color: #ffffff !important;
  border-color: #383838 !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

/* Table header text high contrast */
th {
  color: #cbd5e1 !important;
}

.hover\:bg-slate-50:hover,
.hover\:bg-slate-50\/80:hover,
.hover\:bg-slate-100:hover {
  background-color: #1f1f1f !important;
}

.hover\:text-slate-800:hover,
.hover\:text-slate-900:hover {
  color: #ffffff !important;
}

/* Primary actions matching the clean blue/indigo accent */
.bg-emerald-600 {
  background-color: #2563eb !important;
}

.hover\:bg-emerald-500:hover,
.hover\:bg-emerald-700:hover {
  background-color: #1d4ed8 !important;
}

.border-emerald-600 {
  border-color: #3b82f6 !important;
}