/* Centralized Color System: variables, fallbacks, and global rules
   PERBAIKAN: Konsolidasi semua warna ke satu sistem untuk menghindari duplikasi */

/* Root variables for consistent theming across frontend */
:root {
  /* Text colors - konsolidasi dari berbagai file */
  --color-text-primary: #111827; /* rgb(17,24,39) */
  --color-text-secondary: #374151; /* rgb(55,65,81) */
  --color-text-muted: #6B7280; /* rgb(107,114,128) */
  --color-text-inverse: #F9FAFB; /* rgb(249,250,251) */
  --color-text-on-light-bg: #0b254b; /* untuk background light blue */

  /* Background colors - konsolidasi */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F3F4F6; /* rgb(243,244,246) */
  --color-bg-elevated: #FFFFFF;
  --color-bg-inverse: #111827;
  --color-bg-lightblue: #e6e6e6; /* konsolidasi dari theme.css */

  /* Icon colors */
  --color-icon: #0F172A; /* rgb(15,23,42) */
  --color-icon-bg: #E5E7EB; /* rgb(229,231,235) */
  --color-icon-text: #0F172A;

  /* Accent colors - konsolidasi */
  --color-accent: #2563EB; /* blue-600 */
  --color-accent-contrast: #FFFFFF;
  --color-danger: #DC2626;
  --color-warning: #D97706;
  --color-success: #16A34A;
  --color-info: #339af0;

  /* Border & divider */
  --color-border: #E5E7EB;
  --color-divider: #E5E7EB;
  
  /* Button colors - konsolidasi untuk konsistensi */
  --color-btn-primary: #2563EB;
  --color-btn-primary-hover: #1d4ed8;
  --color-btn-danger: #DC2626;
  --color-btn-danger-hover: #B91C1C;
  --color-btn-success: #16A34A;
  --color-btn-success-hover: #15803d;
}

/* Dark scheme adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #D1D5DB;
    --color-text-muted: #9CA3AF;
    --color-text-inverse: #111827;

    --color-bg-primary: #0B1020; /* deep navy */
    --color-bg-secondary: #111827;
    --color-bg-elevated: #0F172A;
    --color-bg-inverse: #F9FAFB;

    --color-icon: #E5E7EB;
    --color-icon-bg: #1F2937;
    --color-icon-text: #E5E7EB;

    --color-accent: #60A5FA; /* blue-400 for dark */
    --color-accent-contrast: #0B1020;
    --color-border: #1F2937;
    --color-divider: #1F2937;
  }
}

/* Responsive color tweaks (increase contrast on small devices) */
@media (max-width: 640px) {
  :root {
    --color-text-primary: #0F172A;
    --color-border: #D1D5DB;
  }
}

/* Global text colors with fallbacks and !important for critical properties */
html, body {
  color: #111827; /* fallback */
  color: var(--color-text-primary) !important;
  background-color: #FFFFFF; /* fallback */
  background-color: var(--color-bg-primary) !important;
}

.text-primary {
  color: #111827;
  color: var(--color-text-primary) !important;
}
.text-secondary {
  color: #374151;
  color: var(--color-text-secondary) !important;
}
.text-muted {
  color: #6B7280;
  color: var(--color-text-muted) !important;
}
.text-inverse {
  color: #F9FAFB;
  color: var(--color-text-inverse) !important;
}

.bg-primary {
  background-color: #FFFFFF;
  background-color: var(--color-bg-primary) !important;
}
.bg-secondary {
  background-color: #F3F4F6;
  background-color: var(--color-bg-secondary) !important;
}
.bg-elevated {
  background-color: #FFFFFF;
  background-color: var(--color-bg-elevated) !important;
}
.bg-inverse {
  background-color: #111827;
  background-color: var(--color-bg-inverse) !important;
}

/* Icon styling: attempt broad coverage of inline SVGs and icon wrappers */
/* Fill/stroke use variables with !important to override inconsistent styles */
svg, .svg-icon, .icon {
  color: #0F172A; /* ensures currentColor fallback */
  color: var(--color-icon) !important;
}
svg path, svg circle, svg rect, svg polygon, svg g {
  fill: #0F172A;
  fill: var(--color-icon) !important;
  stroke: #0F172A;
  stroke: var(--color-icon) !important;
}

.icon-bg {
  background-color: #E5E7EB;
  background-color: var(--color-icon-bg) !important;
}
.icon-text {
  color: #0F172A;
  color: var(--color-icon-text) !important;
}

/* Accent utilities */
.text-accent { color: #2563EB; color: var(--color-accent) !important; }
.bg-accent { background-color: #2563EB; background-color: var(--color-accent) !important; }
.text-on-accent { color: #FFFFFF; color: var(--color-accent-contrast) !important; }

/* Feedback colors */
.text-danger { color: #DC2626; color: var(--color-danger) !important; }
.text-warning { color: #D97706; color: var(--color-warning) !important; }
.text-success { color: #16A34A; color: var(--color-success) !important; }
.bg-danger { background-color: #DC2626; background-color: var(--color-danger) !important; }
.bg-warning { background-color: #D97706; background-color: var(--color-warning) !important; }
.bg-success { background-color: #16A34A; background-color: var(--color-success) !important; }

/* Normalize delete action labels across tables */
.crud-delete { color: var(--color-danger) !important; }
table .crud-delete,
table .text-red-600,
table .btn-outline-danger { color: var(--color-danger) !important; }
table .crud-delete:hover,
table .text-red-600:hover { color: #B91C1C; color: var(--color-danger) !important; opacity: 1; }

/* Tailwind-like compatibility for existing markup */
.text-red-600 { color: #DC2626; color: var(--color-danger) !important; }
.hover\:text-red-700:hover { color: #B91C1C !important; }
.hover\:underline:hover { text-decoration: underline !important; }

/* Borders and dividers */
.border-color { border-color: #E5E7EB; border-color: var(--color-border) !important; }
.divide-color > * + * { border-top-color: #E5E7EB; border-top-color: var(--color-divider) !important; }

/* Ensure form controls follow text colors unless explicitly overridden */
input, select, textarea {
  color: #111827;
  color: var(--color-text-primary) !important;
  background-color: #FFFFFF;
  background-color: var(--color-bg-elevated) !important;
  border-color: #E5E7EB;
  border-color: var(--color-border) !important;
}
button {
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);
}

/* Export/print contexts can force contrast */
@media print {
  :root {
    --color-text-primary: #000000;
    --color-bg-primary: #FFFFFF;
    --color-icon: #000000;
  }
}
:root { --ui-scale: 1 }
html.ui-scale-1-2x { font-size: 19.2px }
html.ui-scale-1-5x { font-size: 24px }
html.high-contrast {
  --color-text-primary: #000000;
  --color-text-secondary: #000000;
  --color-text-muted: #333333;
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-inverse: #000000;
  --color-icon: #000000;
  --color-icon-bg: #FFFFFF;
  --color-icon-text: #000000;
  --color-accent: #0033CC;
  --color-accent-contrast: #FFFFFF;
  --color-border: #000000;
  --color-divider: #000000;
}