/* ============================================================
   BOFA Bakery SaaS — Theme CSS
   Base (light) form-control styling lives here too because every
   layout loads this file; dark overrides are scoped under
   html.dark and use higher specificity than Tailwind utilities.
   ============================================================ */

html.dark {
    color-scheme: dark;
}

/* ---- Base form controls (visible boxes in light theme) ----
   App forms style fields with `border-gray-300` (color only) and
   no width/bg/padding, so boxes were invisible on white cards.
   Selectors carry an attribute so they out-specify the Play CDN's
   form reset (`button, input, select, textarea { padding: 0 }`). */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select:not([multiple]),
textarea:not([cols]) {
    border: 1.5px solid #9ca3af;   /* gray-400 — clearly visible on white */
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: #111827;                /* gray-900 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) inset;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):hover,
select:not([multiple]):hover,
textarea:not([cols]):hover {
    border-color: #6b7280;         /* gray-500 on hover */
}

/* ---- Page shell ---- */
html.dark body {
    background-color: #061a38; /* deep navy — brand-950 tint */
}

html.dark .bg-gray-50 {
    background-color: #12294a; /* panel / thead surface (navy tint) */
}

html.dark .bg-gray-100 {
    background-color: #334155; /* slate-700 */
}

html.dark .bg-white {
    background-color: #1e293b; /* slate-800 — cards, inputs */
}

html.dark .bg-white\/90 {
    background-color: rgba(15, 23, 42, 0.92); /* sticky topbar */
}

html.dark .bg-white\/5,
html.dark .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.08); /* keep translucent on dark sidebar */
}

/* ---- Gray buttons keep a visible surface ---- */
html.dark .bg-gray-700 {
    background-color: #475569; /* slate-600 */
}

html.dark .bg-gray-800 {
    background-color: #475569; /* slate-600 */
}

/* ---- Text hierarchy (lighter in dark) ---- */
html.dark .text-gray-900 { color: #f1f5f9; }  /* slate-100 */
html.dark .text-gray-800 { color: #e2e8f0; }  /* slate-200 */
html.dark .text-gray-700 { color: #cbd5e1; }  /* slate-300 */
html.dark .text-gray-600 { color: #94a3b8; }  /* slate-400 */
html.dark .text-gray-500 { color: #94a3b8; }  /* slate-400 */
html.dark .text-gray-400 { color: #64748b; }  /* slate-500 */
html.dark .text-gray-300 { color: #94a3b8; }  /* slate-400 */
html.dark .text-gray-200 { color: #cbd5e1; }  /* slate-300 */

/* ---- Borders & dividers ---- */
html.dark .border-gray-100 { border-color: rgba(148, 163, 184, 0.12); }
html.dark .border-gray-200 { border-color: rgba(148, 163, 184, 0.20); }
html.dark .border-gray-300 { border-color: #475569; }

html.dark .divide-gray-50  > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148, 163, 184, 0.08); }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148, 163, 184, 0.12); }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148, 163, 184, 0.20); }

/* ---- Hover states ---- */
html.dark .hover\:bg-gray-50:hover  { background-color: rgba(148, 163, 184, 0.08); }
html.dark .hover\:bg-gray-100:hover { background-color: rgba(148, 163, 184, 0.14); }
html.dark .hover\:bg-gray-700:hover { background-color: #64748b; }
html.dark .hover\:bg-red-50:hover   { background-color: rgba(239, 68, 68, 0.12); }
html.dark .hover\:bg-brand-50:hover  { background-color: rgba(3, 37, 85, 0.25); }
html.dark .hover\:bg-brand-100:hover { background-color: rgba(3, 37, 85, 0.35); }
html.dark .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.12); }

/* ---- Brand accents on light surfaces ---- */
html.dark .bg-brand-50  { background-color: rgba(3, 37, 85, 0.25); }
html.dark .text-brand-600 { color: #AFC9E2; } /* brand-200 */
html.dark .text-brand-700 { color: #7FA4CD; } /* brand-300 */
html.dark .text-brand-800 { color: #4A7FB8; } /* brand-400 */
html.dark .border-brand-100 { border-color: rgba(3, 37, 85, 0.35); }

/* ---- Status badges & flash messages ---- */
html.dark .bg-emerald-50  { background-color: rgba(16, 185, 129, 0.10); }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.15); }
html.dark .text-emerald-600 { color: #34d399; }
html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .text-emerald-800 { color: #a7f3d0; }
html.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.20); }
html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.30); }

html.dark .bg-red-50  { background-color: rgba(239, 68, 68, 0.10); }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.15); }
html.dark .text-red-400 { color: #fca5a5; }
html.dark .text-red-600 { color: #f87171; }
html.dark .text-red-700 { color: #fca5a5; }
html.dark .border-red-100 { border-color: rgba(239, 68, 68, 0.20); }
html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.30); }
html.dark .border-red-300 { border-color: rgba(239, 68, 68, 0.40); }

html.dark .bg-amber-50  { background-color: rgba(245, 158, 11, 0.10); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.15); }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .border-amber-300 { border-color: rgba(245, 158, 11, 0.40); }

html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15); }
html.dark .text-blue-600 { color: #93c5fd; }
html.dark .border-blue-300 { border-color: rgba(59, 130, 246, 0.40); }

/* ---- Form controls ---- */
html.dark ::placeholder {
    color: #64748b;
}

html.dark select option {
    background-color: #1e293b;
    color: #e2e8f0;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]),
html.dark select:not([multiple]),
html.dark textarea:not([cols]) {
    background-color: #1e293b; /* slate-800 — matches card surface */
    border-color: #64748b;     /* slate-500 — clearly visible on dark */
    color: #e2e8f0;            /* slate-200 */
}

/* ---- Footer ---- */
html.dark footer {
    background-color: #0a1e3c;
}

/* ---- Misc polish ---- */
html.dark ::selection {
    background-color: rgba(3, 37, 85, 0.45);
}

html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Print views (invoices, reports) must stay light */
html.dark body:has(div.print-layout) {
    background-color: #fff;
}