/* TanVexa_CRM Custom Styles */
* { scrollbar-width: thin; scrollbar-color: #334155 #0f172a; }
*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-track { background: #0f172a; }
*::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

/* OTP Input styling */
.otp-input { width: 48px; height: 56px; text-align: center; font-size: 24px; font-weight: 700; }
.otp-input:focus { border-color: #06B6D4; box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2); }

/* Form transitions */
input, select, textarea, button { transition: all 0.15s ease; }
input:focus, select:focus, textarea:focus { outline: none; }

/* Card hover */
.card-hover { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

/* Gradient text */
.text-gradient { background: linear-gradient(135deg, #06B6D4, #22D3EE); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Loading spinner */
.spinner { width: 20px; height: 20px; border: 2px solid #334155; border-top-color: #06B6D4; border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast notification */
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; max-width: 360px; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th { text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; border-bottom: 1px solid #1e293b; white-space: nowrap; }
.table-wrap td { padding: 10px 14px; border-bottom: 1px solid #1e293b; font-size: 14px; }
.table-wrap tbody tr:hover td { background: rgba(6, 182, 212, 0.03); }

/* Low stock badge */
.badge-low-stock { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); }
.badge-out-stock { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-in-stock { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }

/* Sidebar active state uses inline classes via PHP */

/* Mobile adjustments */
@media (max-width: 640px) {
    .table-wrap td, .table-wrap th { padding: 8px 10px; font-size: 13px; }
    .otp-input { width: 40px; height: 48px; font-size: 20px; }
    .toast { left: 16px; right: 16px; max-width: none; }
}

/* ── Light Theme Overrides ── */
html.light body { background-color: #f8fafc; color: #334155; }
html.light .bg-slate-900 { background-color: #ffffff; }
html.light .bg-slate-900\/80 { background-color: rgba(255,255,255,0.85); }
html.light .bg-slate-800 { background-color: #ffffff; }
html.light .bg-slate-800\/60,
html.light .bg-slate-800\/40 { background-color: #ffffff; }
html.light .text-slate-200 { color: #334155; }
html.light .text-slate-300 { color: #475569; }
html.light .text-slate-400 { color: #64748b; }
html.light .text-slate-500 { color: #94a3b8; }
html.light .text-slate-600 { color: #94a3b8; }
html.light .text-white { color: #0f172a; }

html.light .border-slate-700\/50,
html.light .border-slate-700\/30,
html.light .border-slate-800\/60 { border-color: #e2e8f0; }

html.light input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea { background-color: #ffffff; color: #1e293b; border-color: #cbd5e1; }

html.light .table-wrap th,
html.light .table-wrap td { border-bottom-color: #e2e8f0; }

html.light .hover\:bg-slate-700\/50:hover { background-color: #f1f5f9 !important; }
html.light .hover\:text-white:hover { color: #0f172a !important; }

html.light .card-hover:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }

html.light * { scrollbar-color: #cbd5e1 #f1f5f9; }
html.light *::-webkit-scrollbar-track { background: #f1f5f9; }
html.light *::-webkit-scrollbar-thumb { background: #cbd5e1; }