@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * { box-sizing: border-box; }

  body {
    @apply bg-background font-sans antialiased;
    color: #c8d0e8;
    font-size: 14px;
    background-image:
      radial-gradient(ellipse at 15% 0%, rgba(168,85,247,0.08) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 100%, rgba(59,130,246,0.06) 0%, transparent 55%);
  }

  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.25); border-radius: 9999px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,0.45); }

  ::selection { background: rgba(168,85,247,0.3); color: #fff; }
}

@layer components {

  /* ─── CARDS ─────────────────────────────────── */
  .card {
    background: rgba(13,14,20,0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(30,32,53,0.9);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .card-glass {
    background: rgba(20,22,32,0.65);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(168,85,247,0.1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  }
  .card-glass:hover {
    border-color: rgba(168,85,247,0.22);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(168,85,247,0.08);
    transform: translateY(-1px);
  }

  .card-2 {
    background: rgba(20,22,32,0.55);
    border: 1px solid rgba(30,32,53,0.7);
    border-radius: 10px;
    padding: 14px;
    transition: background 0.15s, border-color 0.15s;
  }
  .card-2:hover {
    background: rgba(28,30,46,0.7);
    border-color: rgba(42,45,74,0.9);
  }

  /* Stat card with neon accent top-border */
  .stat-card {
    background: rgba(13,14,20,0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(30,32,53,0.9);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  }
  .stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
  }
  .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  }

  /* ─── BUTTONS ────────────────────────────────── */
  .btn-primary {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #fff;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(168,85,247,0.4);
    box-shadow: 0 0 16px rgba(168,85,247,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all 0.15s;
    cursor: pointer;
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, #9333ea 0%, #6d28d9 100%);
    box-shadow: 0 0 28px rgba(168,85,247,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-1px);
  }
  .btn-primary:active { transform: translateY(0); }

  .btn-secondary {
    background: rgba(168,85,247,0.08);
    color: #a855f7;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(168,85,247,0.22);
    transition: all 0.15s;
    cursor: pointer;
  }
  .btn-secondary:hover {
    background: rgba(168,85,247,0.15);
    border-color: rgba(168,85,247,0.4);
    box-shadow: 0 0 16px rgba(168,85,247,0.15);
  }

  .btn-ghost {
    background: transparent;
    color: #4b5680;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    transition: all 0.15s;
    cursor: pointer;
  }
  .btn-ghost:hover {
    background: rgba(28,30,46,0.9);
    color: #c8d0e8;
    border-color: rgba(30,32,53,0.9);
  }

  .btn-danger {
    background: rgba(239,68,68,0.08);
    color: #ef4444;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(239,68,68,0.22);
    transition: all 0.15s;
    cursor: pointer;
  }
  .btn-danger:hover {
    background: rgba(239,68,68,0.16);
    box-shadow: 0 0 16px rgba(239,68,68,0.2);
  }

  .btn-success {
    background: rgba(34,197,94,0.08);
    color: #22c55e;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(34,197,94,0.22);
    transition: all 0.15s;
    cursor: pointer;
  }
  .btn-success:hover {
    background: rgba(34,197,94,0.16);
    box-shadow: 0 0 16px rgba(34,197,94,0.2);
  }

  .btn-warning {
    background: rgba(245,158,11,0.08);
    color: #f59e0b;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(245,158,11,0.22);
    transition: all 0.15s;
    cursor: pointer;
  }

  /* Icon-only action buttons */
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.15s;
    cursor: pointer;
    color: #4b5680;
    background: transparent;
  }
  .icon-btn:hover { color: #c8d0e8; background: rgba(28,30,46,0.8); border-color: rgba(30,32,53,0.8); }
  .icon-btn-danger:hover { color: #ef4444; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); }
  .icon-btn-success:hover { color: #22c55e; background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.2); }
  .icon-btn-warning:hover { color: #f59e0b; background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
  .icon-btn-accent:hover { color: #a855f7; background: rgba(168,85,247,0.1); border-color: rgba(168,85,247,0.2); }

  /* ─── INPUTS ─────────────────────────────────── */
  .input {
    background: rgba(28,30,46,0.7);
    border: 1px solid rgba(42,45,74,0.9);
    color: #c8d0e8;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 13px;
    width: 100%;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
  }
  .input::placeholder { color: #4b5680; }
  .input:focus {
    border-color: rgba(168,85,247,0.5);
    box-shadow: 0 0 0 3px rgba(168,85,247,0.1);
  }

  .label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #4b5680;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .divider { border-top: 1px solid rgba(30,32,53,0.9); }

  /* ─── STATUS INDICATORS ─────────────────────── */
  .status-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  }
  .status-online { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.7); animation: glowPulse 2s ease-in-out infinite; }
  .status-warning { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.7); animation: glowPulse 2s ease-in-out infinite; }
  .status-offline { background: #4b5680; }
  .status-error { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.7); animation: glowPulse 2s ease-in-out infinite; }
  .status-idle { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.7); animation: glowPulse 2s ease-in-out infinite; }

  /* ─── BADGES ─────────────────────────────────── */
  .badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 5px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .badge-purple { background: rgba(168,85,247,0.12); color: #c084fc; border: 1px solid rgba(168,85,247,0.2); }
  .badge-blue { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
  .badge-cyan { background: rgba(6,182,212,0.12); color: #22d3ee; border: 1px solid rgba(6,182,212,0.2); }
  .badge-green { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
  .badge-warning { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
  .badge-danger { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
  .badge-muted { background: rgba(75,86,128,0.12); color: #64748b; border: 1px solid rgba(75,86,128,0.2); }

  /* ─── TABLES ─────────────────────────────────── */
  .data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .data-table th {
    color: #4b5680; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(30,32,53,0.9);
    text-align: left; white-space: nowrap;
  }
  .data-table td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(30,32,53,0.5);
    color: #8891b4; font-size: 13px;
  }
  .data-table tr:last-child td { border-bottom: none; }
  .data-table tbody tr { transition: background 0.12s; }
  .data-table tbody tr:hover td { background: rgba(168,85,247,0.04); color: #c8d0e8; }

  /* ─── PROGRESS BARS ──────────────────────────── */
  .progress-bar {
    height: 5px; border-radius: 9999px; overflow: hidden;
    background: rgba(30,32,53,0.9);
  }
  .progress-fill { height: 100%; border-radius: 9999px; transition: width 0.4s ease; }
  .progress-purple { background: linear-gradient(90deg, #7c3aed, #a855f7); box-shadow: 0 0 8px rgba(168,85,247,0.4); }
  .progress-blue { background: linear-gradient(90deg, #2563eb, #3b82f6); box-shadow: 0 0 8px rgba(59,130,246,0.4); }
  .progress-green { background: linear-gradient(90deg, #16a34a, #22c55e); box-shadow: 0 0 8px rgba(34,197,94,0.4); }
  .progress-warning { background: linear-gradient(90deg, #d97706, #f59e0b); box-shadow: 0 0 8px rgba(245,158,11,0.4); }
  .progress-danger { background: linear-gradient(90deg, #dc2626, #ef4444); box-shadow: 0 0 8px rgba(239,68,68,0.4); }
  .progress-cyan { background: linear-gradient(90deg, #0891b2, #06b6d4); box-shadow: 0 0 8px rgba(6,182,212,0.4); }

  /* ─── NEON TEXT ──────────────────────────────── */
  .text-neon-purple { color: #a855f7; text-shadow: 0 0 20px rgba(168,85,247,0.5); }
  .text-neon-blue { color: #60a5fa; text-shadow: 0 0 20px rgba(96,165,250,0.5); }
  .text-neon-cyan { color: #22d3ee; text-shadow: 0 0 20px rgba(34,211,238,0.5); }
  .text-neon-green { color: #4ade80; text-shadow: 0 0 20px rgba(74,222,128,0.5); }

  /* ─── GLOW WRAPPERS ──────────────────────────── */
  .glow-purple { box-shadow: 0 0 40px rgba(168,85,247,0.18); }
  .glow-blue   { box-shadow: 0 0 40px rgba(59,130,246,0.18); }
  .glow-cyan   { box-shadow: 0 0 40px rgba(6,182,212,0.18); }
  .glow-green  { box-shadow: 0 0 40px rgba(34,197,94,0.18); }

  /* ─── PAGE HEADER ────────────────────────────── */
  .page-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 24px;
  }
  .page-title {
    font-size: 20px; font-weight: 700; color: #e2e8f0; letter-spacing: -0.02em;
  }
  .page-subtitle { font-size: 13px; color: #4b5680; margin-top: 3px; }

  /* ─── SECTION LABEL ──────────────────────────── */
  .section-label {
    font-size: 10px; font-weight: 700; color: rgba(75,86,128,0.7);
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0 8px; margin: 16px 0 6px;
  }

  /* ─── TOOLTIP-LIKE INFO ROW ──────────────────── */
  .info-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid rgba(30,32,53,0.5);
  }
  .info-row:last-child { border-bottom: none; }
  .info-key { font-size: 12px; color: #4b5680; }
  .info-val { font-size: 12px; color: #c8d0e8; font-weight: 500; }
}

/* Recharts custom styles */
.recharts-cartesian-grid-horizontal line,
.recharts-cartesian-grid-vertical line {
  stroke: rgba(30,32,53,0.6) !important;
}
.recharts-tooltip-wrapper .recharts-default-tooltip {
  background: rgba(13,14,20,0.95) !important;
  border: 1px solid rgba(168,85,247,0.2) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}