/* Design System - Dark Theme 
   Based on design_system.md specifications */

:root {
  /* Base colors */
  --bg-page: #111827;
  --bg-card: #1F2937;
  --text-primary: #FFFFFF;
  --text-secondary: #F9FAFB;
  --text-tertiary: #E5E7EB;
  --text-subtle: #9CA3AF;
  
  /* Border colors */
  --border-green: #22c55e;
  --border-blue: #3b82f6;
  --border-yellow: #eab308;
  --border-red: #ef4444;
  
  /* Button colors */
  --btn-primary-bg: #2563eb;
  --btn-primary-hover: #1d4ed8;
  --btn-edit-bg: #ca8a04;
  --btn-edit-hover: #a16207;
  --btn-delete-bg: #dc2626;
  --btn-delete-hover: #b91c1c;
  --btn-secondary-bg: #4b5563;
  --btn-secondary-hover: #374151;
}

/* Base styles */
body {
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
}

/* Card styling */
.design-card {
  max-width: 80rem; /* max-w-7xl - using container width for consistency */
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem; /* p-6 */
  background-color: var(--bg-card);
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
  margin-bottom: 2rem; /* mb-8 */
  width: 100%;
  border-left-width: 4px;
}

/* Card variants by border color */
.design-card-green {
  border-left-color: var(--border-green);
}

.design-card-blue {
  border-left-color: var(--border-blue);
}

.design-card-yellow {
  border-left-color: var(--border-yellow);
}

.design-card-red {
  border-left-color: var(--border-red);
}

/* Input fields */
input, select, textarea {
  background-color: #374151 !important; /* bg-gray-700 */
  border: 1px solid #4B5563 !important; /* border border-gray-600 */
  color: white !important;
  border-radius: 0.5rem !important; /* rounded-lg */
  padding: 0.5rem 1rem !important; /* px-4 py-2 */
}

input:focus, select:focus, textarea:focus {
  --tw-ring-color: #3b82f6 !important; /* focus:ring-blue-500 */
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  border-color: transparent !important;
}

/* Button styling */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
}

.btn-edit {
  background-color: var(--btn-edit-bg);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.btn-edit:hover {
  background-color: var(--btn-edit-hover);
}

.btn-delete {
  background-color: var(--btn-delete-bg);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.btn-delete:hover {
  background-color: var(--btn-delete-hover);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-hover);
}

/* Badge styling */
.badge {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px; /* rounded-full */
  display: inline-block;
}

.badge-blue {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.badge-green {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.badge-yellow {
  background-color: rgba(234, 179, 8, 0.2);
  color: #fde047;
}

.badge-red {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Message boxes styling */
.message-error {
  margin-bottom: 1.5rem; /* mb-6 */
  padding: 1rem; /* p-4 */
  background-color: rgba(220, 38, 38, 0.2); /* bg-red-900/50 */
  border-left-width: 4px;
  border-left-color: var(--border-red); /* border-red-500 */
  color: #fca5a5; /* text-red-200 */
  border-radius: 0.5rem; /* rounded-lg */
}

.message-success {
  margin-bottom: 1.5rem; /* mb-6 */
  padding: 1rem; /* p-4 */
  background-color: rgba(22, 163, 74, 0.2); /* bg-green-900/50 */
  border-left-width: 4px;
  border-left-color: var(--border-green); /* border-green-500 */
  color: #86efac; /* text-green-200 */
  border-radius: 0.5rem; /* rounded-lg */
}

/* Standard layout container */
.layout-container {
  max-width: 80rem; /* Matches max-w-7xl from Tailwind */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
}

/* Header & Footer overrides */
header {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

footer {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

footer a {
  color: var(--text-tertiary) !important;
}

footer a:hover {
  color: var(--text-primary) !important;
}

footer p, footer div {
  color: var(--text-tertiary) !important;
}

/* Text colors */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

/* Other overrides to ensure design system is consistently applied */
.bg-white {
  background-color: var(--bg-card) !important;
}

.bg-gray-100, .bg-gray-200 {
  background-color: var(--bg-page) !important;
}

.text-gray-500, .text-gray-600 {
  color: var(--text-tertiary) !important;
}

.text-gray-700, .text-gray-800, .text-gray-900 {
  color: var(--text-primary) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .design-card {
    padding: 1rem;
  }
}