edr-platform/apps/edr-passenger-web/backoffice/src/styles/globals.css

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 152 74% 26%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 152 74% 26%;
    --destructive-foreground: 0 0% 100%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 152 74% 26%;
    --radius: 0.5rem;
    
    /* EDR Brand Colors */
    --edr-green: 152 74% 26%;
    --edr-orange: 24 95% 53%;
    --edr-red: 152 74% 26%;
    --edr-blue: 221 83% 53%;
  }

  .dark {
    --background: 222.2 47% 11%;
    --foreground: 210 40% 98%;
    --card: 222.2 47% 11%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 47% 11%;
    --popover-foreground: 210 40% 98%;
    --primary: 152 74% 26%;
    --primary-foreground: 0 0% 100%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 152 74% 26%;
    --destructive-foreground: 0 0% 100%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 152 74% 26%;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}

@layer utilities {
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .animate-fade-up {
    animation: fade-up 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@layer components {
  .card {
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    border: 1px solid hsl(var(--border));
    padding: 1.5rem;
  }
  
  .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition-property: background-color;
    transition-duration: 200ms;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-primary {
    background-color: rgb(20, 113, 76);
    color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }
  
  .btn-primary:hover {
    background-color: rgb(16, 90, 61);
  }
  
  .btn-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
  }
  
  .btn-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8);
  }
  
  .btn-danger {
    background-color: rgb(20, 113, 76);
    color: hsl(var(--destructive-foreground));
  }
  
  .btn-danger:hover {
    background-color: rgb(16, 90, 61);
  }
  
  .input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    transition: border-color 150ms, box-shadow 150ms;
  }
  
  .input:focus {
    outline: none;
    border-color: rgb(20, 113, 76);
    box-shadow: 0 0 0 3px rgba(20, 113, 76, 0.15);
  }

  .input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
  }

  .gradient-edr {
    background-color: rgb(20, 113, 76);
  }

  .gradient-edr-bg {
    background: linear-gradient(to bottom, #0f172a, #1e293b, #0f172a);
  }
  
  .edr-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
  }
  
  .edr-badge-success {
    background-color: #dcfce7;
    color: #166534;
  }
  
  .dark .edr-badge-success {
    background-color: rgb(6 78 59 / 0.3);
    color: #86efac;
  }
  
  .edr-badge-warning {
    background-color: #fef3c7;
    color: #854d0e;
  }
  
  .dark .edr-badge-warning {
    background-color: rgb(120 53 15 / 0.3);
    color: #fbbf24;
  }
  
  .edr-badge-danger {
    background-color: #dcfce7;
    color: rgb(20, 113, 76);
  }
  
  .dark .edr-badge-danger {
    background-color: rgb(6 78 59 / 0.3);
    color: #86efac;
  }
  
  .edr-badge-info {
    background-color: #dbeafe;
    color: #1e40af;
  }
  
  .dark .edr-badge-info {
    background-color: rgb(30 58 138 / 0.3);
    color: #60a5fa;
  }
}