/* Outreachist - Consolidated & Minified CSS */
/* Version: 1.2 */

/* ===== Base Styles ===== */
[x-cloak]{display:none!important}
body{font-family:'Inter',sans-serif}

/* ===== Navigation ===== */
.nav-link{position:relative;font-weight:600;transition:all .2s ease}
.nav-link:hover{color:#ef4444}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#ef4444;transition:width .2s ease}
.nav-link:hover::after{width:100%}

/* ===== Buttons ===== */
.btn-get-started{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 4px 14px 0 rgba(239,68,68,.39);transition:all .3s ease}
.btn-get-started:hover{transform:translateY(-2px);box-shadow:0 6px 20px 0 rgba(239,68,68,.5)}

/* ===== Language Switcher ===== */
.lang-btn{background:#f3f4f6;border-radius:9999px;padding:6px 12px;transition:all .2s ease}
.lang-btn:hover{background:#e5e7eb}

/* ===== Sidebar ===== */
.sidebar-active{background-color:#ef4444;color:#fff}

/* ===== Dashboard Theme Variables ===== */
:root{--bg-primary:#ffffff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--border-primary:#e2e8f0;--accent-primary:#f97316;--accent-secondary:#ea580c;--success:#10b981;--error:#ef4444;--warning:#f59e0b}
[data-theme="dark"]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border-primary:#334155;--accent-primary:#f97316;--accent-secondary:#fb923c;--success:#34d399;--error:#f87171;--warning:#fbbf24}

/* ===== Form Styles ===== */
.form-card{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:1rem;padding:1.5rem}
.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}
.form-input{width:100%;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:.75rem;color:var(--text-primary);font-size:.875rem;transition:all .2s ease}
.form-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.form-input::placeholder{color:var(--text-muted)}
.form-input:disabled{opacity:.5;cursor:not-allowed}
.form-input[type="number"]::-webkit-outer-spin-button,.form-input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-input[type="number"]{-moz-appearance:textfield}
.form-select{width:100%;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:.75rem;color:var(--text-primary);font-size:.875rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.25rem;padding-right:2.5rem}
.form-select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.form-checkbox{width:1.25rem;height:1.25rem;border-radius:.375rem;border:2px solid var(--border-primary);background:var(--bg-secondary);cursor:pointer;appearance:none;transition:all .2s ease}
.form-checkbox:checked{background:var(--accent-primary);border-color:var(--accent-primary)}
.form-checkbox:checked::after{content:'';display:block;width:.5rem;height:.75rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);margin:0 auto}

/* ===== Cards ===== */
.platform-card{position:relative;background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:1rem;padding:1.5rem;cursor:pointer;transition:all .2s ease}
.platform-card:hover{border-color:var(--text-muted)}
.platform-card.selected{border-color:var(--accent-primary);background:rgba(249,115,22,.05)}
.platform-card.disabled{opacity:.5;cursor:not-allowed}

/* ===== Tabs ===== */
.tab-nav{display:flex;background:var(--bg-secondary);border-radius:1rem;padding:.375rem;margin-bottom:1.5rem}
.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1rem;border-radius:.75rem;font-size:.875rem;font-weight:600;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:all .2s ease}
.tab-btn:hover:not(.active):not(:disabled){color:var(--text-secondary);background:var(--bg-tertiary)}
.tab-btn.active{background:var(--accent-primary);color:#fff;box-shadow:0 2px 8px rgba(249,115,22,.3)}
.tab-btn:disabled{opacity:.5;cursor:not-allowed}
.tab-btn .step-num{width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;background:var(--bg-tertiary);color:var(--text-muted)}
.tab-btn.active .step-num{background:rgba(255,255,255,.2);color:#fff}
.tab-btn.completed .step-num{background:#10b981;color:#fff}

/* ===== Type Pills ===== */
.type-pill{position:relative;display:inline-flex;align-items:center;padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:.5rem;cursor:pointer;transition:all .15s ease}
.type-pill:hover{border-color:var(--text-muted)}
.type-pill.selected{border-color:var(--accent-primary);background:var(--accent-primary)}
.type-pill.selected .type-name{color:#fff!important}
.type-pill .type-name{font-size:.8125rem;font-weight:500;color:var(--text-secondary)}
.type-pill input[type="radio"]{position:absolute;opacity:0;width:0;height:0}

/* ===== Navigation Buttons ===== */
.btn-nav{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s ease}
.btn-next{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border:none}
.btn-next:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(249,115,22,.3)}
.btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-back{background:var(--bg-secondary);border:1px solid var(--border-primary);color:var(--text-secondary)}
.btn-back:hover{background:var(--bg-tertiary);border-color:var(--text-muted)}
.btn-submit{flex:1;padding:1rem 1.5rem;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:.75rem;border:none;cursor:pointer;transition:all .2s ease}
.btn-submit:hover{background:linear-gradient(135deg,#ea580c,#dc2626);transform:translateY(-1px);box-shadow:0 4px 12px rgba(249,115,22,.3)}

/* ===== Progress Bar ===== */
.progress-bar{height:4px;background:var(--bg-secondary);border-radius:2px;overflow:hidden;margin-bottom:1.5rem}
.progress-fill{height:100%;background:linear-gradient(90deg,#f97316,#ea580c);transition:width .3s ease}

/* ===== Earnings Box ===== */
.earnings-box{padding:1.25rem;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);border-radius:.75rem}

/* ===== Sensitive Cards ===== */
.sensitive-card{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:.5rem;transition:all .15s ease;cursor:pointer;overflow:hidden}
.sensitive-card:hover{border-color:var(--text-muted)}
.sensitive-card.active{border-color:var(--accent-primary)}

/* ===== Asset Grid ===== */
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}
.asset-card{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:.75rem;cursor:pointer;transition:all .15s ease}
.asset-card:hover{border-color:var(--text-muted)}
.asset-card.selected{border-color:var(--accent-primary);background:rgba(249,115,22,.05)}
.asset-card .asset-icon{width:40px;height:40px;border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.asset-card .asset-icon svg{width:20px;height:20px}

/* ===== Utilities ===== */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scrollbar-thin::-webkit-scrollbar{width:6px;height:6px}
.scrollbar-thin::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:3px}
.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}
.scrollbar-thin::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}

/* ===== Admin Styles ===== */
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{position:sticky;top:0;z-index:10;background:var(--bg-secondary);padding:.75rem 1rem;text-align:left;font-weight:600;font-size:.75rem;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border-primary)}
.admin-table td{padding:.75rem 1rem;border-bottom:1px solid var(--border-primary);font-size:.875rem}
.admin-table tbody tr:hover{background:var(--bg-secondary)}

/* ===== Status Badges ===== */
.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500}
.badge-success{background:rgba(16,185,129,.1);color:#10b981}
.badge-error{background:rgba(239,68,68,.1);color:#ef4444}
.badge-warning{background:rgba(245,158,11,.1);color:#f59e0b}
.badge-info{background:rgba(59,130,246,.1);color:#3b82f6}
.badge-pending{background:rgba(107,114,128,.1);color:#6b7280}

/* ===== Tailwind JIT Class Polyfills ===== */
/* Emerald colors */
.from-emerald-600{--tw-gradient-from:#059669}
.via-emerald-600{--tw-gradient-stops:var(--tw-gradient-from),#059669,var(--tw-gradient-to,rgba(5,150,105,0))}
.to-emerald-600{--tw-gradient-to:#059669}
.bg-emerald-600{background-color:#059669}
.text-emerald-600{color:#059669}

/* Teal colors */
.from-teal-600{--tw-gradient-from:#0d9488}
.via-teal-600{--tw-gradient-stops:var(--tw-gradient-from),#0d9488,var(--tw-gradient-to,rgba(13,148,136,0))}
.to-teal-600{--tw-gradient-to:#0d9488}
.bg-teal-600{background-color:#0d9488}
.text-teal-600{color:#0d9488}

/* Slate colors */
.from-slate-900{--tw-gradient-from:#0f172a}
.via-slate-900{--tw-gradient-stops:var(--tw-gradient-from),#0f172a,var(--tw-gradient-to,rgba(15,23,42,0))}
.to-slate-900{--tw-gradient-to:#0f172a}
.bg-slate-900{background-color:#0f172a}
.text-slate-900{color:#0f172a}
.from-slate-800{--tw-gradient-from:#1e293b}
.to-slate-800{--tw-gradient-to:#1e293b}
.bg-slate-800{background-color:#1e293b}
.text-slate-800{color:#1e293b}
.text-slate-700{color:#334155}
.text-slate-600{color:#475569}
.text-slate-500{color:#64748b}
.text-slate-400{color:#94a3b8}
.text-slate-300{color:#cbd5e1}
.bg-slate-100{background-color:#f1f5f9}
.bg-slate-50{background-color:#f8fafc}

/* Purple gradient for auth */
.via-purple-900{--tw-gradient-stops:var(--tw-gradient-from),#581c87,var(--tw-gradient-to,rgba(88,28,135,0))}
.from-purple-900{--tw-gradient-from:#581c87}
.to-purple-900{--tw-gradient-to:#581c87}

/* Arbitrary values polyfills */
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.gap-1\.5{gap:.375rem}
.gap-0\.5{gap:.125rem}
.p-0\.5{padding:.125rem}
.text-\[10px\]{font-size:10px}

/* White with opacity */
.text-white\/60{color:rgba(255,255,255,.6)}
.text-white\/40{color:rgba(255,255,255,.4)}
.text-white\/70{color:rgba(255,255,255,.7)}
.bg-white\/10{background-color:rgba(255,255,255,.1)}
.bg-white\/20{background-color:rgba(255,255,255,.2)}
.hover\:text-white\/70:hover{color:rgba(255,255,255,.7)}

/* Red with opacity */
.bg-red-500\/10{background-color:rgba(239,68,68,.1)}
.border-red-500\/20{border-color:rgba(239,68,68,.2)}
.text-red-300{color:#fca5a5}
.text-red-400{color:#f87171}

/* Green with opacity */
.bg-green-500\/10{background-color:rgba(34,197,94,.1)}
.border-green-500\/20{border-color:rgba(34,197,94,.2)}
.text-green-300{color:#86efac}

/* Blue with opacity */
.bg-blue-500\/10{background-color:rgba(59,130,246,.1)}
.border-blue-500\/20{border-color:rgba(59,130,246,.2)}
.text-blue-100{color:#dbeafe}
.text-blue-200{color:#bfdbfe}
.text-blue-300{color:#93c5fd}

/* Purple opacity */
.bg-purple-500\/10{background-color:rgba(168,85,247,.1)}

/* Orange opacity */
.bg-orange-500\/10{background-color:rgba(249,115,22,.1)}

/* Backdrop blur */
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Aspect ratio */
.aspect-square{aspect-ratio:1/1}
.aspect-video{aspect-ratio:16/9}

/* Object fit */
.object-cover{object-fit:cover}

/* Grid pattern background (for auth page) */
.bg-grid-pattern{background-image:url('data:image/svg+xml,%3Csvg width=%2240%22 height=%2240%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3Cpattern id=%22grid%22 width=%2240%22 height=%2240%22 patternUnits=%22userSpaceOnUse%22%3E%3Cpath d=%22M 40 0 L 0 0 0 40%22 fill=%22none%22 stroke=%22rgba(255,255,255,0.03)%22 stroke-width=%221%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22url(%23grid)%22/%3E%3C/svg%3E')}

/* Announcement bar pattern */
.bg-dots-pattern{background-image:url('data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%220.05%22%3E%3Cpath d=%22M0 0h20v20H0z%22/%3E%3C/g%3E%3C/svg%3E')}

/* Dropdown Menu */
.dropdown-menu{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:.75rem;box-shadow:0 10px 40px rgba(0,0,0,.15);overflow:hidden}
.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;color:var(--text-secondary);font-size:.875rem;transition:all .15s}
.dropdown-item:hover{background:var(--bg-secondary);color:var(--text-primary)}
.dropdown-item svg{width:1.125rem;height:1.125rem;flex-shrink:0}

/* Sidebar */
.sidebar{background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);--sidebar-text:#f1f5f9;--sidebar-text-muted:#94a3b8;--sidebar-hover:rgba(255,255,255,.08);--sidebar-active:rgba(249,115,22,.2)}

/* Alert styles */
.alert{padding:1rem;border-radius:.75rem;margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}
.alert-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#10b981}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#ef4444}
.alert-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#f59e0b}
.alert-info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);color:#3b82f6}
