`react-dash/src/index.css`

39 lines
@tailwind base;
@tailwind components;
@tailwind utilities;

:root { --bg: #0a0e1a; --card: #111827; --border: #1e293b; }
body { background: var(--bg); color: #e2e8f0; font-family: 'Inter', sans-serif; margin: 0; }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.stat-v { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.bg-green { background: rgba(16,185,129,0.15); color: #10b981; }
.bg-red { background: rgba(239,68,68,0.15); color: #ef4444; }
.bg-yellow { background: rgba(245,158,11,0.15); color: #f59e0b; }
.bg-blue { background: rgba(59,130,246,0.15); color: #3b82f6; }
.bg-purple { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.pulse-g { animation: pg 2s infinite; }
@keyframes pg { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.4)} 50%{box-shadow:0 0 0 6px rgba(16,185,129,0)} }
.btn { padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; }
.btn-p { background: #3b82f6; color: white; } .btn-p:hover { background: #2563eb; }
.btn-d { background: #ef4444; color: white; } .btn-d:hover { background: #dc2626; }
.btn-s { background: #10b981; color: white; } .btn-s:hover { background: #059669; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 0.75rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; border-bottom: 1px solid var(--border); }
td { padding: 0.75rem; border-bottom: 1px solid rgba(30,41,59,0.5); font-size: 0.85rem; }
tr:hover td { background: rgba(59,130,246,0.03); }

/* Setup Wizard */
.step-enter { opacity: 0; transform: translateX(24px); }
.step-active { opacity: 1; transform: translateX(0); transition: opacity 0.35s ease, transform 0.35s ease; }
.step-exit { opacity: 0; transform: translateX(-24px); transition: opacity 0.2s ease, transform 0.2s ease; }
@keyframes pulse-blue { 0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.4)} 50%{box-shadow:0 0 0 8px rgba(59,130,246,0)} }
.step-active-pulse { animation: pulse-blue 2s infinite; }
.stepper-line { height: 2px; flex: 1; background: #1e293b; transition: background 0.3s; }
.stepper-line.done { background: #22c55e; }
.wizard-gradient { background: linear-gradient(135deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.wizard-btn { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white; padding: 0.75rem 2rem; border-radius: 10px; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; transition: all 0.2s; }
.wizard-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(59,130,246,0.3); }
.wizard-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }