@import 'design-tokens.css';

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-base);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] header,
[data-theme="dark"] .bg-white,
[data-theme="dark"] #inline-edit-modal,
[data-theme="dark"] #add-entry-modal>div,
[data-theme="dark"] #delete-confirm-modal .bg-white,
[data-theme="dark"] #workday-modal>div {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-base);
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-gray-600,
[data-theme="dark"] th {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-text-muted);
}

[data-theme="dark"] .bg-gray-300,
[data-theme="dark"] .bg-gray-100 {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-base) !important;
}

[data-theme="dark"] .bg-gray-300:hover,
[data-theme="dark"] .bg-gray-100:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: var(--color-text-base) !important;
}

[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400 {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-base) !important;
  border-color: var(--color-border) !important;
  color-scheme: dark;
}

/* Status bar icon backgrounds in dark mode */
[data-theme="dark"] .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.25) !important;
}

[data-theme="dark"] .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.25) !important;
}

/* Gap/overlap indicators in detailed view */
[data-theme="dark"] .bg-red-100.text-red-900 {
  background-color: rgba(248, 113, 113, 0.3) !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl,
[data-theme="dark"] .shadow-2xl {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.18) !important;
}

h1 {
  font-size: var(--font-4xl);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--font-3xl);
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--font-2xl);
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Custom Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.badge-success {
  background-color: #dcfce7;
  color: #166534;
}

.badge-error {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge-warning {
  background-color: #fef3c7;
  color: #92400e;
}

/* Table Improvements */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: var(--space-3) var(--space-6);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: #f9fafb;
}

td {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}