/* app/admin/dashboard/admin-style.css */

@import "tailwindcss";

/* ─────────────────────────────────────────────────────────────
   THEME VARIABLES
   ───────────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg: #EFF6FF;
  --surface: #FFFFFF;
  --surface-raised: #F8FAFF;
  --surface-hover: #F0F7FF;

  /* Primary */
  --primary: #0284C7;
  --primary-hover: #0369A1;
  --primary-muted: #E0F2FE;
  --primary-text: #0369A1;

  /* Text */
  --text: #0C1E35;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-disabled: #94A3B8;

  /* Borders */
  --border: #BFDBFE;
  --border-light: #DBEAFE;
  --border-strong: #93C5FD;

  /* Semantic */
  --success: #059669;
  --success-bg: #ECFDF5;
  --success-text: #065F46;
  --success-border: #A7F3D0;

  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --warning-text: #92400E;
  --warning-border: #FDE68A;

  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --danger-text: #991B1B;
  --danger-border: #FECACA;

  --info: #7C3AED;
  --info-bg: #EDE9FE;
  --info-text: #5B21B6;
  --info-border: #C4B5FD;

  /* Accents */
  --accent-purple: #7C3AED;
  --accent-green: #059669;
  --accent-orange: #D97706;
  --accent-pink: #DB2777;

  /* Charts */
  --chart-1: #0284C7;
  --chart-2: #7C3AED;
  --chart-3: #059669;
  --chart-4: #D97706;
  --chart-bar: #0284C7;
  --chart-bar-muted: #BFDBFE;

  /* Sidebar */
  --sidebar-bg: #FFFFFF;
  --sidebar-border: #BFDBFE;
  --sidebar-item-hover: #EFF6FF;
  --sidebar-item-active: #E0F2FE;
  --sidebar-icon: #94A3B8;
  --sidebar-icon-active: #0284C7;
  --sidebar-item-text: #334155;
  --sidebar-item-text-active: #0284C7;
  --sidebar-item-text-hover: #0C1E35;
  --sidebar-child-text: #64748B;
  --sidebar-child-text-active: #0284C7;

  /* Topbar */
  --topbar-bg: #FFFFFF;
  --topbar-border: #BFDBFE;

  /* Input */
  --input-bg: #FFFFFF;
  --input-border: #BFDBFE;
  --input-border-focus: #0284C7;
  --input-text: #0C1E35;
  --input-placeholder: #94A3B8;

  /* Scrollbar */
  --scrollbar-track: #EFF6FF;
  --scrollbar-thumb: #BFDBFE;

  /* Shadows */
  --card-shadow: 0 1px 3px 0 rgb(2 132 199 / 0.08), 0 1px 2px -1px rgb(2 132 199 / 0.08);
  --modal-shadow: 0 20px 60px -10px rgb(2 132 199 / 0.15);
  --button-shadow: 0 1px 2px 0 rgb(2 132 199 / 0.2);

  /* Gradients */
  --gradient-blue: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --gradient-purple: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  --gradient-orange: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  --gradient-green: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --gradient-red: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  --gradient-indigo: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);

  /* Status Colors */
  --status-pending: #F59E0B;
  --status-confirmed: #3B82F6;
  --status-pending-review: #8B5CF6;
  --status-completed: #10B981;
  --status-cancelled: #EF4444;
  --status-paid: #10B981;
  --status-payment-pending: #F59E0B;
  --status-failed: #EF4444;
  --status-refunded: #F97316;

  /* Status Backgrounds */
  --status-pending-bg: #FEF3C7;
  --status-confirmed-bg: #DBEAFE;
  --status-pending-review-bg: #EDE9FE;
  --status-completed-bg: #D1FAE5;
  --status-cancelled-bg: #FEE2E2;
}

/* ─────────────────────────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────────────────────────── */

.dark {
  /* Backgrounds */
  --bg: #0F172A;
  --surface: #1E293B;
  --surface-raised: #263348;
  --surface-hover: #2D3F55;

  /* Primary */
  --primary: #38BDF8;
  --primary-hover: #7DD3FC;
  --primary-muted: #0C2233;
  --primary-text: #BAE6FD;

  /* Text */
  --text: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-disabled: #475569;

  /* Borders */
  --border: #334155;
  --border-light: #1E293B;
  --border-strong: #475569;

  /* Semantic */
  --success: #34D399;
  --success-bg: #0A2E22;
  --success-text: #6EE7B7;
  --success-border: #065F46;

  --warning: #FB923C;
  --warning-bg: #2D1500;
  --warning-text: #FED7AA;
  --warning-border: #9A3412;

  --danger: #F87171;
  --danger-bg: #2D0F0F;
  --danger-text: #FCA5A5;
  --danger-border: #991B1B;

  --info: #A78BFA;
  --info-bg: #1E1A3A;
  --info-text: #C4B5FD;
  --info-border: #4C1D95;

  /* Accents */
  --accent-purple: #A78BFA;
  --accent-green: #34D399;
  --accent-orange: #FB923C;
  --accent-pink: #F472B6;

  /* Charts */
  --chart-1: #38BDF8;
  --chart-2: #A78BFA;
  --chart-3: #34D399;
  --chart-4: #FB923C;
  --chart-bar: #38BDF8;
  --chart-bar-muted: #1E3A5F;

  /* Sidebar */
  --sidebar-bg: #1E293B;
  --sidebar-border: #334155;
  --sidebar-item-hover: #263348;
  --sidebar-item-active: #0C2233;
  --sidebar-icon: #475569;
  --sidebar-icon-active: #38BDF8;
  --sidebar-item-text: #94A3B8;
  --sidebar-item-text-active: #38BDF8;
  --sidebar-item-text-hover: #F1F5F9;
  --sidebar-child-text: #94A3B8;
  --sidebar-child-text-active: #38BDF8;

  /* Topbar */
  --topbar-bg: #1E293B;
  --topbar-border: #334155;

  /* Input */
  --input-bg: #0F172A;
  --input-border: #334155;
  --input-border-focus: #38BDF8;
  --input-text: #F1F5F9;
  --input-placeholder: #475569;

  /* Scrollbar */
  --scrollbar-track: #1E293B;
  --scrollbar-thumb: #334155;

  /* Shadows */
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --modal-shadow: 0 20px 60px -10px rgb(0 0 0 / 0.6);
  --button-shadow: 0 1px 2px 0 rgb(56 189 248 / 0.15);

  /* Gradients */
  --gradient-blue: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --gradient-purple: linear-gradient(135deg, #6D28D9 0%, #5B21B6 100%);
  --gradient-orange: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);

  /* Status Backgrounds */
  --status-pending-bg: #451A03;
  --status-confirmed-bg: #1E3A5F;
  --status-pending-review-bg: #2E1065;
  --status-completed-bg: #064E3B;
  --status-cancelled-bg: #450A0A;
}

/* ─────────────────────────────────────────────────────────────
   UTILITY CLASSES (Hal #1)
   ───────────────────────────────────────────────────────────── */

/* Backgrounds */
.bg-var-bg { background-color: var(--bg); }
.bg-var-surface { background-color: var(--surface); }
.bg-var-surface-hover { background-color: var(--surface-hover); }
.bg-var-surface-raised { background-color: var(--surface-raised); }
.bg-var-primary { background-color: var(--primary); }
.bg-var-primary-muted { background-color: var(--primary-muted); }
.bg-var-sidebar { background-color: var(--sidebar-bg); }
.bg-var-topbar { background-color: var(--topbar-bg); }
.bg-var-success { background-color: var(--success); }
.bg-var-success-bg { background-color: var(--success-bg); }
.bg-var-warning { background-color: var(--warning); }
.bg-var-warning-bg { background-color: var(--warning-bg); }
.bg-var-danger { background-color: var(--danger); }
.bg-var-danger-bg { background-color: var(--danger-bg); }
.bg-var-info { background-color: var(--info); }
.bg-var-info-bg { background-color: var(--info-bg); }

/* Text Colors */
.text-var-text { color: var(--text); }
.text-var-text-secondary { color: var(--text-secondary); }
.text-var-text-muted { color: var(--text-muted); }
.text-var-text-disabled { color: var(--text-disabled); }
.text-var-primary { color: var(--primary); }
.text-var-primary-text { color: var(--primary-text); }
.text-var-success { color: var(--success); }
.text-var-success-text { color: var(--success-text); }
.text-var-warning { color: var(--warning); }
.text-var-warning-text { color: var(--warning-text); }
.text-var-danger { color: var(--danger); }
.text-var-danger-text { color: var(--danger-text); }
.text-var-info { color: var(--info); }
.text-var-info-text { color: var(--info-text); }
.text-var-accent-purple { color: var(--accent-purple); }
.text-var-accent-green { color: var(--accent-green); }
.text-var-accent-orange { color: var(--accent-orange); }
.text-var-accent-pink { color: var(--accent-pink); }

/* Border Colors */
.border-var-border { border-color: var(--border); }
.border-var-border-light { border-color: var(--border-light); }
.border-var-border-strong { border-color: var(--border-strong); }
.border-var-primary { border-color: var(--primary); }
.border-var-success { border-color: var(--success); }
.border-var-warning { border-color: var(--warning); }
.border-var-danger { border-color: var(--danger); }

/* Box Shadows */
.shadow-var-card { box-shadow: var(--card-shadow); }
.shadow-var-modal { box-shadow: var(--modal-shadow); }
.shadow-var-button { box-shadow: var(--button-shadow); }

/* Background Gradients */
.bg-gradient-purple { background: var(--gradient-purple); }
.bg-gradient-orange { background: var(--gradient-orange); }
.bg-gradient-green { background: var(--gradient-green); }
.bg-gradient-red { background: var(--gradient-red); }
.bg-gradient-indigo { background: var(--gradient-indigo); }

/* Sidebar Specific */
.bg-var-sidebar { background-color: var(--sidebar-bg); }
.border-var-sidebar { border-color: var(--sidebar-border); }
.text-var-sidebar-icon { color: var(--sidebar-icon); }
.text-var-sidebar-icon-active { color: var(--sidebar-icon-active); }
.hover-bg-var-sidebar-item-hover:hover { background-color: var(--sidebar-item-hover); }

/* Input Specific */
.bg-var-input { background-color: var(--input-bg); }
.border-var-input { border-color: var(--input-border); }
.text-var-input { color: var(--input-text); }
.placeholder-var-input::placeholder { color: var(--input-placeholder); }

/* Status Colors */
.text-var-status-pending { color: var(--status-pending); }
.text-var-status-confirmed { color: var(--status-confirmed); }
.text-var-status-completed { color: var(--status-completed); }
.text-var-status-cancelled { color: var(--status-cancelled); }
.bg-var-status-pending-bg { background-color: var(--status-pending-bg); }
.bg-var-status-confirmed-bg { background-color: var(--status-confirmed-bg); }
.bg-var-status-completed-bg { background-color: var(--status-completed-bg); }
.bg-var-status-cancelled-bg { background-color: var(--status-cancelled-bg); }

/* Borders */
.border-var-border { border-color: var(--border); }
.border-var-border-light { border-color: var(--border-light); }
.border-var-border-strong { border-color: var(--border-strong); }
.border-var-sidebar-border { border-color: var(--sidebar-border); }
.border-var-topbar-border { border-color: var(--topbar-border); }

/* Additional Utilities for Websites Module */

/* Gradient for success button */
.bg-var-gradient-success {
  background: linear-gradient(135deg, var(--success) 0%, #0D9488 100%);
}

/* Info alert styles */
.bg-var-info-bg {
  background-color: var(--info-bg);
}

.border-var-info-border {
  border-color: var(--info-border);
}

.text-var-info-text {
  color: var(--info-text);
}

/* Danger alert styles */
.bg-var-danger-bg {
  background-color: var(--danger-bg);
}

.border-var-danger-border {
  border-color: var(--danger-border);
}

.text-var-danger {
  color: var(--danger);
}

/* Warning text */
.text-var-warning {
  color: var(--warning);
}

/* Success text and bg */
.text-var-success {
  color: var(--success);
}

.bg-var-success-bg {
  background-color: var(--success-bg);
}

/* Primary muted background */
.bg-var-primary-muted {
  background-color: var(--primary-muted);
}

/* Border strong */
.border-var-border-strong {
  border-color: var(--border-strong);
}

/* Accent purple text */
.text-var-accent-purple {
  color: var(--accent-purple);
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

/* Body */
body {
  background-color: var(--bg);
  color: var(--text);
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.3s ease-out;
}