/*
 * assets/css/app.css — Padel Center Omni
 * Tailwind-compatible custom theme via CSS variables
 * 
 * Carregamos o Tailwind via CDN (dev) ou compilado (prod).
 * Estas variáveis replicam o tema do Lovable (shadcn/ui).
 */

:root {
    /* ── Brand ─────────────────────────────── */
    --color-primary: #F58634;
    --color-primary-foreground: #ffffff;
    --color-secondary: #4C8FFC;

    /* ── Base ──────────────────────────────── */
    --color-background: #f8f9fb;
    --color-foreground: #1a1a2e;
    --color-card: #ffffff;
    --color-card-foreground: #1a1a2e;
    --color-muted: #f1f5f9;
    --color-muted-foreground: #64748b;
    --color-border: #e2e8f0;

    /* ── Destructive ──────────────────────── */
    --color-destructive: #ef4444;
    --color-destructive-foreground: #ffffff;

    /* ── Sidebar ──────────────────────────── */
    --color-sidebar: #1a1a2e;
    --color-sidebar-foreground: #e2e8f0;
    --color-sidebar-muted: #64748b;
    --color-sidebar-border: #2d2d4a;
    --color-sidebar-accent: #2d2d4a;
    --color-sidebar-accent-foreground: #ffffff;
    --color-sidebar-primary: #F58634;
    --color-sidebar-primary-foreground: #ffffff;

    /* ── Status colors (reservas) ─────────── */
    --color-status-casual: #4C8FFC;
    --color-status-monthly: #F58634;
    --color-status-class: #22c55e;
    --color-status-event: #a855f7;
    --color-status-block: #94a3b8;
    --color-status-alert: #ef4444;
}

/* ── Scrollbar Personalizada (Padel Center Theme) ────────────────────────── */

/* Chrome, Edge e Safari */
::-webkit-scrollbar { 
    width: 4px; 
    height: 4px; 
}

::-webkit-scrollbar-track { 
    background: var(--color---color-primary); /* Fundo igual ao da página */
}

::-webkit-scrollbar-thumb { 
    background: #cbd5e1; /* Cor neutra inicial */
    border-radius: 10px;
    border: 2px solid var(--color-background); /* Cria um respiro em volta da barra */
}

::-webkit-scrollbar-thumb:hover { 
    background: var(--color-primary); /* Barra fica Laranja ao passar o mouse */
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 var(--color-background);
}

/* Ajuste específico para quando o mouse está sobre elementos roláveis no Firefox */
*:hover {
    scrollbar-color: var(--color-primary) var(--color-background);
}

/* Evita que o conteúdo mude de largura quando a scrollbar aparece */
html {
    scrollbar-gutter: stable;
}

body {
    /* Mantém o fundo do conteúdo cinza claro conforme seu design original */
    background: var(--color-background);
    min-height: 100vh;
}

/* ── Reset & Base ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--color-background);
    color: var(--color-foreground);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

.fixed.inset-0.z-50.flex.items-center.justify-center {
    margin-top: 0 !important;
}

.border-gray-200 {

    border-color: #ccc !important;
}

/* ── Custom utility classes ───────────────── */
.bg-primary    { background-color: var(--color-primary) !important; }
.text-primary  { color: var(--color-primary) !important; }
.bg-primary-foreground    { background-color: var(--color-primary-foreground) !important; }
.text-primary-foreground  { color: var(--color-primary-foreground) !important; }

.bg-secondary-brand    { background-color: var(--color-secondary) !important; }
.text-secondary-brand  { color: var(--color-secondary) !important; }

.bg-card       { background-color: var(--color-card) !important; }
.bg-background { background-color: var(--color-background) !important; }
.text-foreground { color: var(--color-foreground) !important; }
.text-muted-foreground { color: var(--color-muted-foreground) !important; }
.border-border { border-color: var(--color-border) !important; }
.bg-muted      { background-color: var(--color-muted) !important; }

.bg-destructive   { background-color: var(--color-destructive) !important; }
.text-destructive { color: var(--color-destructive) !important; }
.text-destructive-foreground { color: var(--color-destructive-foreground) !important; }

/* Sidebar */
.bg-sidebar    { background-color: var(--color-sidebar) !important; }
.text-sidebar-foreground  { color: var(--color-sidebar-foreground) !important; }
.text-sidebar-muted       { color: var(--color-sidebar-muted) !important; }
.border-sidebar-border    { border-color: var(--color-sidebar-border) !important; }
.bg-sidebar-accent        { background-color: var(--color-sidebar-accent) !important; }
.text-sidebar-accent-foreground { color: var(--color-sidebar-accent-foreground) !important; }
.bg-sidebar-primary       { background-color: var(--color-sidebar-primary) !important; }
.text-sidebar-primary-foreground { color: var(--color-sidebar-primary-foreground) !important; }
/* Cor do link (branco) e transição suave */
.bg-sidebar a {
    color: #e5e7eb !important;
    transition: opacity 0.5s ease-in-out; /* Opcional: deixa a mudança suave */
}

/* Garante que o span dentro do link também fique branco */
.bg-sidebar a span {
    color: #ffffff !important;
}

/* Opacidade ao passar o mouse */
.bg-sidebar a:hover {
    opacity: 0.7; /* Altere este valor (0.0 a 1.0) para deixar mais ou menos transparente */
}

/* Status */
.bg-status-casual   { background-color: var(--color-status-casual) !important; }
.text-status-casual { color: var(--color-status-casual) !important; }
.border-status-casual { border-color: var(--color-status-casual) !important; }

.bg-status-monthly   { background-color: var(--color-status-monthly) !important; }
.text-status-monthly { color: var(--color-status-monthly) !important; }
.border-status-monthly { border-color: var(--color-status-monthly) !important; }

.bg-status-class   { background-color: var(--color-status-class) !important; }
.text-status-class { color: var(--color-status-class) !important; }
.border-status-class { border-color: var(--color-status-class) !important; }

.bg-status-event   { background-color: var(--color-status-event) !important; }
.text-status-event { color: var(--color-status-event) !important; }

.bg-status-block   { background-color: var(--color-status-block) !important; }
.text-status-block { color: var(--color-status-block) !important; }

.bg-status-alert   { background-color: var(--color-status-alert) !important; }
.text-status-alert { color: var(--color-status-alert) !important; }
.border-status-alert { border-color: var(--color-status-alert) !important; }

/* ── Opacity variants (for bg-status-X/10 etc) ── */
.bg-primary\/10    { background-color: rgba(245, 134, 52, 0.1) !important; }
.bg-primary\/15    { background-color: rgba(245, 134, 52, 0.15) !important; }
.bg-destructive\/5  { background-color: rgba(239, 68, 68, 0.05) !important; }
.bg-destructive\/10 { background-color: rgba(239, 68, 68, 0.1) !important; }
.bg-destructive\/20 { background-color: rgba(239, 68, 68, 0.2) !important; }
.border-destructive\/20 { border-color: rgba(239, 68, 68, 0.2) !important; }
.border-destructive\/30 { border-color: rgba(239, 68, 68, 0.3) !important; }

.bg-status-casual\/10  { background-color: rgba(76, 143, 252, 0.1) !important; }
.bg-status-casual\/15  { background-color: rgba(76, 143, 252, 0.15) !important; }
.bg-status-monthly\/10 { background-color: rgba(245, 134, 52, 0.1) !important; }
.bg-status-monthly\/15 { background-color: rgba(245, 134, 52, 0.15) !important; }
.bg-status-class\/10   { background-color: rgba(34, 197, 94, 0.1) !important; }
.bg-status-class\/15   { background-color: rgba(34, 197, 94, 0.15) !important; }
.bg-status-event\/10   { background-color: rgba(168, 85, 247, 0.1) !important; }
.bg-status-event\/15   { background-color: rgba(168, 85, 247, 0.15) !important; }

/* ── Animations (matching Lovable) ────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-slide-in { animation: slideIn 0.3s ease-out; }

/* ── Focus ring padrão ────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 134, 52, 0.3);
    border-color: var(--color-primary);
}

/* ── Scrollbar sutil ──────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Badge base ───────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}