/* ==========================================================================
   TSCGatewaySMS - Theme & Core Styling (100% Offline & Pixel-Perfect)
   ========================================================================== */

:root {
    --brand-50: #f0f9ff;
    --brand-100: #e0f2fe;
    --brand-400: #38bdf8;
    --brand-500: #0ea5e9;
    --brand-600: #0284c7;
    --brand-700: #0369a1;
    --brand-900: #0c4a6e;
    --dark-bg: #0f172a;
    --card-bg: #1e293b;
    --card-border: #334155;
}

/* Backgrounds & Borders */
body, .bg-darkBg { background-color: #0f172a !important; color: #f1f5f9; }
.bg-cardBg { background-color: #1e293b !important; }
.bg-cardBg\/80 { background-color: rgba(30, 41, 59, 0.8) !important; }
.border-cardBorder { border-color: #334155 !important; }

.bg-slate-900 { background-color: #0f172a !important; }
.bg-slate-950 { background-color: #020617 !important; }
.bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-800\/50 { background-color: rgba(30, 41, 59, 0.5) !important; }
.bg-slate-900\/60 { background-color: rgba(15, 23, 42, 0.6) !important; }
.bg-slate-900\/80 { background-color: rgba(15, 23, 42, 0.8) !important; }

.border-slate-700 { border-color: #334155 !important; }
.border-slate-750 { border-color: #2e3c51 !important; }
.border-slate-800 { border-color: #1e293b !important; }
.border-slate-700\/60 { border-color: rgba(51, 65, 85, 0.6) !important; }

/* Brand Colors */
.bg-brand-50 { background-color: #f0f9ff !important; }
.bg-brand-100 { background-color: #e0f2fe !important; }
.bg-brand-400 { background-color: #38bdf8 !important; }
.bg-brand-500 { background-color: #0ea5e9 !important; }
.bg-brand-600 { background-color: #0284c7 !important; }
.bg-brand-700 { background-color: #0369a1 !important; }

.hover\:bg-brand-500:hover { background-color: #0ea5e9 !important; }
.hover\:bg-brand-600:hover { background-color: #0284c7 !important; }

.text-brand-300 { color: #7dd3fc !important; }
.text-brand-400 { color: #38bdf8 !important; }
.text-brand-500 { color: #0ea5e9 !important; }
.text-brand-600 { color: #0284c7 !important; }

.border-brand-500\/30 { border-color: rgba(14, 165, 233, 0.3) !important; }
.bg-brand-500\/30 { background-color: rgba(14, 165, 233, 0.3) !important; }
.bg-brand-500\/20 { background-color: rgba(14, 165, 233, 0.2) !important; }
.bg-brand-500\/10 { background-color: rgba(14, 165, 233, 0.1) !important; }

/* Status Colors & Badges */
.bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1) !important; }
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2) !important; }
.border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3) !important; }
.text-emerald-400 { color: #34d399 !important; }
.text-emerald-300 { color: #6ee7b7 !important; }
.bg-emerald-600 { background-color: #059669 !important; }
.hover\:bg-emerald-500:hover { background-color: #10b981 !important; }

.bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.1) !important; }
.bg-rose-500\/20 { background-color: rgba(244, 63, 94, 0.2) !important; }
.border-rose-500\/30 { border-color: rgba(244, 63, 94, 0.3) !important; }
.text-rose-400 { color: #fb7185 !important; }
.text-rose-300 { color: #fda4af !important; }
.bg-rose-600 { background-color: #e11d48 !important; }
.hover\:bg-rose-500:hover { background-color: #f43f5e !important; }

.bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.1) !important; }
.bg-amber-500\/20 { background-color: rgba(245, 158, 11, 0.2) !important; }
.border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.3) !important; }
.text-amber-400 { color: #fbbf24 !important; }
.text-amber-300 { color: #fcd34d !important; }
.bg-amber-600 { background-color: #d97706 !important; }

.bg-indigo-500\/10 { background-color: rgba(99, 102, 241, 0.1) !important; }
.bg-indigo-500\/20 { background-color: rgba(99, 102, 241, 0.2) !important; }
.border-indigo-500\/30 { border-color: rgba(99, 102, 241, 0.3) !important; }
.text-indigo-400 { color: #818cf8 !important; }
.text-indigo-300 { color: #a5b4fc !important; }
.text-indigo-200 { color: #c7d2fe !important; }

/* Slate Text Colors */
.text-slate-100 { color: #f1f5f9 !important; }
.text-slate-200 { color: #e2e8f0 !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-500 { color: #64748b !important; }

/* Arbitrary Font Sizes */
.text-\[10px\] { font-size: 10px !important; line-height: 14px !important; }
.text-\[11px\] { font-size: 11px !important; line-height: 15px !important; }

/* Alpine Cloak & Custom Scrollbar */
[x-cloak] { display: none !important; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #0f172a; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }