/**
 * Fundlelo Accounting CRM - Standardized Corporate Design System
 * Unified typography, standard box models, crisp borders, and refined palette
 */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --primary: #6366F1 !important; /* Refined Royal Indigo */
  --primary-foreground: #FFFFFF !important;
  --ring: #6366F1 !important;
  --background: #F8FAFC !important;
  --foreground: #0F172A !important;
  --card: #FFFFFF !important;
  --card-foreground: #0F172A !important;
  --popover: #FFFFFF !important;
  --popover-foreground: #0F172A !important;
  --secondary: #F1F5F9 !important;
  --secondary-foreground: #334155 !important;
  --muted: #F8FAFC !important;
  --muted-foreground: #64748B !important;
  --accent: #EEF2FF !important;
  --accent-foreground: #4338CA !important;
  --destructive: #EF4444 !important;
  --destructive-foreground: #FFFFFF !important;
  --border: #E2E8F0 !important;
  --input: #E2E8F0 !important;
  --radius: 0.75rem;
}

.dark {
  --background: #0B0F19 !important;
  --foreground: #F8FAFC !important;
  --card: #111827 !important;
  --card-foreground: #F8FAFC !important;
  --secondary: #1F2937 !important;
  --secondary-foreground: #E5E7EB !important;
  --muted: #111827 !important;
  --muted-foreground: #9CA3AF !important;
  --accent: #1E1B4B !important;
  --accent-foreground: #E0E7FF !important;
  --border: #1F2937 !important;
  --input: #1F2937 !important;
}

/* ==========================================================================
   1. GLOBAL BODY & BACKGROUND STANDARDS
   ========================================================================== */
body {
  background-color: #F8FAFC !important;
  background-image: none !important;
  color: #0F172A !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
}

.dark body {
  background-color: #0B0F19 !important;
  color: #F8FAFC !important;
}

/* ==========================================================================
   2. UNIFIED TYPOGRAPHY STANDARDS ("FONTS")
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.font-bold.text-foreground,
.font-semibold.text-foreground {
  color: #0F172A;
  letter-spacing: -0.015em;
}

/* Explicit white headings inside dark hero banners, dark cards, and text-white containers */
.text-white,
.text-white h1,
.text-white h2,
.text-white h3,
[class*="text-white"],
h1.text-white,
h2.text-white,
h3.text-white,
[class*="from-[#1E0836]"] h1,
[class*="from-[#1E0836]"] h2,
[class*="from-[#1E0836]"] h3,
[class*="bg-slate-900"] h1,
[class*="bg-slate-900"] h2,
[class*="bg-slate-900"] h3 {
  color: #FFFFFF !important;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .font-bold.text-foreground,
.dark .font-semibold.text-foreground {
  color: #F8FAFC !important;
}

/* Secondary & Muted Information */
.text-muted-foreground {
  color: #64748B !important;
}

/* Monospace Codes, Numbers, Dates, and IDs (Replaces pink/magenta text) */
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

td .text-primary,
td span.font-mono.text-primary,
.table-id-code {
  color: #1E293B !important;
  font-weight: 600 !important;
}

/* Table Header Typography */
thead th,
.table-header-cell {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background-color: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.dark thead th {
  color: #94A3B8 !important;
  background-color: #111827 !important;
  border-bottom: 1px solid #1F2937 !important;
}

/* ==========================================================================
   3. UNIFIED BOXES, CARDS & CONTAINERS STANDARDS ("BOXES")
   ========================================================================== */
.bg-card,
[class*="bg-card"],
.card-standard {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.04) !important;
}

.dark .bg-card,
.dark [class*="bg-card"] {
  background-color: #111827 !important;
  border-color: #1F2937 !important;
}

/* Standard Form Controls & Search Boxes */
input, select, textarea,
input[type="text"],
input[type="search"] {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 0.75rem !important;
  color: #0F172A !important;
  font-size: 0.875rem !important;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.03) !important;
  transition: all 0.15s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
  outline: none !important;
}

.dark input, .dark select, .dark textarea {
  background-color: #111827 !important;
  border-color: #1F2937 !important;
  color: #F8FAFC !important;
}

/* Standard Table Container */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

tbody tr {
  transition: background-color 0.15s ease !important;
}

tbody tr:hover {
  background-color: #F8FAFC !important;
}

.dark tbody tr:hover {
  background-color: #1E293B/50 !important;
}

tbody td {
  border-bottom: 1px solid #F1F5F9 !important;
}

.dark tbody td {
  border-bottom: 1px solid #1F2937 !important;
}

/* ==========================================================================
   4. STANDARDIZED BADGES & STATUS PILLS ("BOXES")
   ========================================================================== */

/* A. Category Badges (Standard Slate Box - Eliminates neon orange!) */
.bg-amber-50,
.text-amber-700,
.border-amber-200,
span[class*="text-amber-700"] {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
  font-weight: 500 !important;
}

/* B. Verified / Completed / Disbursed (Crisp Authentic Fintech Emerald) */
.bg-emerald-50,
.bg-emerald-50\/60,
.bg-emerald-50\/80 {
  background-color: #ECFDF5 !important;
}

.text-emerald-700,
.text-emerald-600 {
  color: #047857 !important;
}

.border-emerald-200,
.border-emerald-300 {
  border-color: #A7F3D0 !important;
}

/* C. Available / Active Badges (Standard Neutral Slate Pill) */
.bg-blue-50 {
  background-color: #F1F5F9 !important;
}

.text-blue-700,
.text-blue-600 {
  color: #334155 !important;
}

.border-blue-200 {
  border-color: #E2E8F0 !important;
}

/* D. Approved Status Badges (Subtle Indigo) */
.bg-violet-50 {
  background-color: #EEF2FF !important;
}

.text-violet-700 {
  color: #4338CA !important;
}

.border-violet-200 {
  border-color: #C7D2FE !important;
}

/* E. Pending / Review Status (Clean Amber) */
.badge-pending {
  background-color: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #B45309 !important;
}

/* F. Superseded / Rejected / Warning (Clean Rose) */
.bg-rose-50 {
  background-color: #FFF1F2 !important;
}

.text-rose-700,
.text-rose-600 {
  color: #BE123C !important;
}

.border-rose-200 {
  border-color: #FECDD3 !important;
}

/* ==========================================================================
   5. STANDARDIZED ACTION BUTTONS ("BOXES")
   ========================================================================== */
td button,
td a[title],
.action-button-standard {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  border-radius: 0.5rem !important;
  padding: 0.375rem !important;
  transition: all 0.15s ease !important;
}

td button:hover,
td a[title]:hover,
.action-button-standard:hover {
  background-color: #EEF2FF !important;
  border-color: #C7D2FE !important;
  color: #4338CA !important;
}

/* ==========================================================================
   6. HEADER BAR & PROFILE STANDARDS
   ========================================================================== */
header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.03) !important;
}

/* Header Live Online Badge */
header .text-emerald-700 {
  color: #047857 !important;
}

header .bg-emerald-500\/10 {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
}

/* User Avatar in Header */
header .rounded-full.bg-emerald-500\/10 {
  background-color: #EEF2FF !important;
  border-color: #C7D2FE !important;
  color: #4338CA !important;
}

/* Role Badge */
header .text-primary.font-semibold {
  color: #4F46E5 !important;
}

/* ==========================================================================
   7. NAVIGATION TABS STANDARDS
   ========================================================================== */
nav {
  background-color: transparent !important;
}

nav button {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: 0.75rem !important;
  transition: all 0.15s ease !important;
}

nav button.bg-primary,
button[data-state="active"],
button[aria-selected="true"] {
  background: linear-gradient(135deg, #7C3AED 0%, #6366F1 50%, #4F46E5 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px -1px rgba(99, 102, 241, 0.35) !important;
  border: none !important;
}

nav button:not(.bg-primary):not([data-state="active"]) {
  color: #64748B !important;
  background-color: transparent !important;
}

nav button:not(.bg-primary):not([data-state="active"]):hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

/* ==========================================================================
   8. PRIMARY ACTION BUTTONS (Disbursal Batch, Login, Submit)
   ========================================================================== */
.bg-primary,
button[type="submit"],
.btn-primary-gradient {
  background: linear-gradient(135deg, #7C3AED 0%, #6366F1 50%, #4F46E5 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px -1px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.15s ease !important;
}

.bg-primary:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, #6D28D9 0%, #4F46E5 50%, #4338CA 100%) !important;
  box-shadow: 0 4px 14px -1px rgba(99, 102, 241, 0.4) !important;
}

/* Hero Banner on Overview */
div[class*="from-emerald-900"],
div[class*="via-teal-950"],
div[class*="via-emerald-950"],
div[class*="from-[#1E0836]"],
div[class*="from-[#0F051D]"],
div[class*="from-[#1A0B2E]"] {
  background-image: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%) !important;
  border-color: #312E81 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25) !important;
}