/* Dark-theme overrides for Tailwind utility classes used in scaffold views.
   Keeps the existing class names working under the dark layout. */

.bg-gray-100     { background-color: var(--layout-surface) !important; }
.bg-gray-50      { background-color: var(--layout-surface) !important; }
.bg-white        { background-color: var(--layout-surface-2) !important; }
.bg-yellow-50    { background-color: rgba(255, 204, 0, 0.08) !important; }
.bg-green-50     { background-color: rgba(34, 197, 94, 0.08) !important; }
.bg-blue-100     { background-color: rgba(59, 130, 246, 0.12) !important; }

.text-gray-800   { color: var(--layout-text) !important; }
.text-gray-700   { color: var(--layout-text) !important; }
.text-gray-600   { color: var(--layout-text-muted) !important; }
.text-gray-500   { color: var(--layout-text-muted) !important; }
.text-gray-400   { color: var(--layout-text-dim) !important; }
.text-gray-300   { color: var(--layout-text-dim) !important; }
.text-green-800  { color: #4ade80 !important; }
.text-green-700  { color: #4ade80 !important; }
.text-blue-700   { color: #60a5fa !important; }
.text-red-700    { color: var(--layout-red-soft) !important; }
.text-red-600    { color: var(--layout-red-soft) !important; }
.text-red-500    { color: var(--layout-red-soft) !important; }

.border,
.border-t        { border-color: var(--layout-border) !important; }
.border-yellow-300 { border-color: rgba(255, 204, 0, 0.25) !important; }
.border-green-300  { border-color: rgba(34, 197, 94, 0.25) !important; }

.shadow-md       { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important; }
.shadow-lg       { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important; }

input[type="text"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
    background-color: var(--layout-surface) !important;
    color: var(--layout-text) !important;
    border-color: var(--layout-border) !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    border-color: var(--layout-border-strong) !important;
    outline-color: rgba(59, 130, 246, 0.3);
}

.table           { color: var(--layout-text); }
.table th        { color: var(--layout-text-muted); }

/* Buttons: keep bg-blue-600 and bg-gray-800 readable */
.bg-blue-600     { background-color: #2563eb !important; }
.bg-blue-700     { background-color: #1d4ed8 !important; }
.bg-red-600      { background-color: var(--layout-red) !important; }
.bg-red-700      { background-color: var(--layout-red-soft) !important; }
.bg-gray-800     { background-color: var(--layout-surface-2) !important; }