/**
 * ============================================
 * POS Design System - Components & Utilities
 * ============================================
 *
 * Reusable component classes and utility classes
 * that use design system tokens.
 *
 * @version 1.0.0
 */

/* ============================================
 * UTILITY - BACKGROUNDS
 * ============================================ */
.bg-surface { background-color: var(--color-surface) !important; }
.bg-elevated { background-color: var(--color-elevated) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-primary-subtle { background-color: var(--color-primary-subtle) !important; }
.bg-success-subtle { background-color: var(--color-success-subtle) !important; }
.bg-warning-subtle { background-color: var(--color-warning-subtle) !important; }
.bg-danger-subtle { background-color: var(--color-danger-subtle) !important; }
.bg-info-subtle { background-color: var(--color-info-subtle) !important; }

/* Un `.badge .bg-warning` heredaba el color de texto blanco de `.badge`
   (1.9:1 sobre ambar). Cuando .bg-* pinta una superficie de color dentro de un
   badge, el texto tiene que ser el de esa superficie. */
.badge.bg-primary { color: var(--color-text-on-primary) !important; }
.badge.bg-success { color: var(--color-text-on-success) !important; }
.badge.bg-warning { color: var(--color-text-on-warning) !important; }
.badge.bg-danger  { color: var(--color-text-on-danger) !important; }
.badge.bg-info    { color: var(--color-text-on-info) !important; }

/* ============================================
 * UTILITY - TEXT
 * ============================================ */
/* OJO: van contra --color-*-text, no contra --color-*. Son dos usos distintos
   del mismo color: --color-danger es la SUPERFICIE (fondo del boton rojo) y
   --color-danger-text es el TEXTO rojo sobre el fondo del tema. Usar el mismo
   valor para los dos dejaba .text-danger en 3.9:1 sobre slate-800 y .text-success
   en 3.8:1 sobre blanco, ambos por debajo de AA (4.5:1). */
.text-primary { color: var(--color-primary-text) !important; }
.text-success { color: var(--color-success-text) !important; }
.text-warning { color: var(--color-warning-text) !important; }
.text-danger { color: var(--color-danger-text) !important; }
.text-info { color: var(--color-info-text) !important; }
/* --text-muted lo emite styles-clean.blade.php con el color que el comercio
   eligio en Configuracion; el fallback es el token del design system. Sin este
   pasaje el selector "Texto secundario" no pintaba nada: este archivo se carga
   despues de la capa del comercio y le ganaba por orden. */
.text-muted { color: var(--text-muted, var(--color-text-muted)) !important; }
.text-secondary { color: var(--text-secondary, var(--color-text-secondary)) !important; }
.text-heading { color: var(--color-heading) !important; }

/* ============================================
 * UTILITY - BORDERS
 * ============================================ */
.border-primary { border-color: var(--color-primary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-danger { border-color: var(--color-danger) !important; }
.border-info { border-color: var(--color-info) !important; }

/* ============================================
 * UTILITY - FOCUS RING
 * ============================================ */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

.focus-visible:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* ============================================
 * STAT CARDS (Dashboard)
 * ============================================ */
.stat-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    border-left: 4px solid var(--color-primary);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-card--primary { border-left-color: var(--color-primary); }
.stat-card--success { border-left-color: var(--color-success); }
.stat-card--warning { border-left-color: var(--color-warning); }
.stat-card--danger { border-left-color: var(--color-danger); }
.stat-card--info { border-left-color: var(--color-info); }

.stat-card__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.stat-card__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
}

.stat-card__change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-1);
}

.stat-card__change--positive { color: var(--color-success-text); }
.stat-card__change--negative { color: var(--color-danger-text); }
.stat-card__change--neutral { color: var(--color-text-muted); }

/* ============================================
 * ICON CONTAINERS
 * ============================================ */
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
}

.icon-container--sm { width: 2rem; height: 2rem; }
.icon-container--lg { width: 3rem; height: 3rem; }

.icon-container--primary {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary-text);
}

.icon-container--success {
    background-color: var(--color-success-subtle);
    color: var(--color-success-text);
}

.icon-container--warning {
    background-color: var(--color-warning-subtle);
    color: var(--color-warning-text);
}

.icon-container--danger {
    background-color: var(--color-danger-subtle);
    color: var(--color-danger-text);
}

.icon-container--info {
    background-color: var(--color-info-subtle);
    color: var(--color-info-text);
}

/* ============================================
 * EMPTY STATES
 * ============================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

.empty-state__icon {
    font-size: 3rem;
    color: var(--color-text-muted);
    opacity: 0.5;
    margin-bottom: var(--space-4);
}

.empty-state__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading-secondary);
    margin-bottom: var(--space-2);
}

.empty-state__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    max-width: 24rem;
}

/* ============================================
 * CHART CONTAINER
 * ============================================ */
.chart-container {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.chart-container__header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chart-container__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-text);
    margin: 0;
}

.chart-container__body {
    padding: var(--space-4);
}

/* ============================================
 * STATUS INDICATORS
 * ============================================ */
.status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
}

.status-dot--available { background-color: var(--color-status-available); }
.status-dot--busy { background-color: var(--color-status-busy); }
.status-dot--reserved { background-color: var(--color-status-reserved); }
.status-dot--pending { background-color: var(--color-status-pending); }
.status-dot--preparing { background-color: var(--color-status-preparing); }
.status-dot--delivered { background-color: var(--color-status-delivered); }
.status-dot--cancelled { background-color: var(--color-status-cancelled); }

/* Animated pulse for active states */
.status-dot--pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
 * LOADING SKELETON
 * ============================================ */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-surface) 0%,
        var(--color-surface-hover) 50%,
        var(--color-surface) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton--text {
    height: 1rem;
    margin-bottom: var(--space-2);
}

.skeleton--title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--space-3);
}

.skeleton--avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
}

/* ============================================
 * DIVIDERS
 * ============================================ */
.divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-4) 0;
}

.divider--light {
    background-color: var(--color-border-light);
}

.divider--vertical {
    width: 1px;
    height: auto;
    margin: 0 var(--space-3);
}

/* ============================================
 * QUICK ACTION BUTTONS
 * ============================================ */
.quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.quick-action:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.quick-action:focus {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

.quick-action--primary:hover {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary-text);
    border-color: var(--color-primary);
}

.quick-action--danger:hover {
    background-color: var(--color-danger-subtle);
    color: var(--color-danger-text);
    border-color: var(--color-danger);
}

/* ============================================
 * THEME TOGGLE BUTTON
 * ============================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.theme-toggle:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-primary-text);
    border-color: var(--color-primary);
}

.theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* Sun icon for dark theme, moon icon for light theme */
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: inline; }

/* ============================================
 * TRANSITION UTILITIES
 * ============================================ */
.transition-colors {
    transition: background-color var(--duration-fast) var(--ease-in-out),
                border-color var(--duration-fast) var(--ease-in-out),
                color var(--duration-fast) var(--ease-in-out);
}

.transition-all {
    transition: all var(--duration-normal) var(--ease-in-out);
}

.transition-transform {
    transition: transform var(--duration-fast) var(--ease-in-out);
}

/* ============================================
 * RESPONSIVE UTILITIES
 * ============================================ */
@media (max-width: 768px) {
    .stat-card {
        padding: var(--space-3);
    }

    .stat-card__value {
        font-size: var(--font-size-xl);
    }

    .chart-container__header {
        padding: var(--space-2) var(--space-3);
    }
}

/* ============================================
 * SUPERFICIES DE ESTADO (tarjetas de resumen, cabeceras de mesa)
 * ============================================
 *
 * Estas clases ya se usaban en ~40 lugares de las vistas (mesas, cocina,
 * gastos, sorteos, reportes) pero NUNCA estuvieron definidas en ningun CSS.
 * El efecto era que la tarjeta se quedaba con el fondo normal y el
 * `text-white` del markup encima: en tema oscuro se leia de casualidad y en
 * tema claro quedaba blanco sobre blanco, es decir invisible.
 *
 * Van con valores fijos de la paleta y no con --color-success/-danger/...
 * a proposito: el markup fuerza `text-white !important`, asi que el fondo
 * tiene que ser oscuro SIEMPRE, tambien en tema claro. Los tramos elegidos
 * dan 4.8:1 o mas contra el blanco en el extremo mas claro del degradado.
 */
.gradient-available {
    background: linear-gradient(135deg, var(--palette-success-700), var(--palette-success-900));
    color: #ffffff;
}

.gradient-busy {
    background: linear-gradient(135deg, var(--palette-danger-600), var(--palette-danger-800));
    color: #ffffff;
}

.gradient-reserved {
    background: linear-gradient(135deg, var(--palette-warning-700), var(--palette-warning-900));
    color: #ffffff;
}

.gradient-preparing {
    background: linear-gradient(135deg, var(--palette-info-700), var(--palette-info-900));
    color: #ffffff;
}

.gradient-pending {
    background: linear-gradient(135deg, var(--palette-primary-600), var(--palette-primary-800));
    color: #ffffff;
}

.gradient-delivered {
    background: linear-gradient(135deg, var(--palette-success-700), var(--palette-success-900));
    color: #ffffff;
}

/* Paneles oscuros de la aplicacion (tarjetas de Inicio, Reportes, Roles,
   Beepers). Los tramos son los que el comercio elige en Configuracion ->
   Gradientes de UI: los emite layouts/theme/styles-clean.blade.php.

   El texto NO es un #ffffff fijo: es --gradient-dark-text, que sale calculado
   sobre el tramo mas claro del degradado. Ese blanco fijo es exactamente lo que
   dejaba estas ~40 tarjetas en blanco sobre blanco cuando el fondo era claro; si
   ahora el color lo elige el comercio, el riesgo seria permanente.

   El fallback de cada variable deja este archivo funcionando solo, sin la capa
   del comercio, con los mismos valores de siempre. */
.gradient-dark-card,
.gradient-dark {
    background: linear-gradient(135deg,
        var(--gradient-dark-start, var(--palette-slate-800)),
        var(--gradient-dark-end, var(--palette-slate-900)));
    color: var(--gradient-dark-text, #ffffff);
}

/* .gradient-modal no la usa ninguna vista: queda con los valores del design
   system y sin selector de color en Configuracion. */
.gradient-modal {
    background: linear-gradient(135deg, var(--palette-slate-800), var(--palette-slate-900));
    color: #ffffff;
}

.gradient-accent-primary {
    background: linear-gradient(135deg,
        var(--accent-primary, var(--palette-primary-600)),
        var(--accent-primary-end, var(--palette-primary-800)));
    color: var(--accent-primary-text, #ffffff);
}

.gradient-accent-secondary {
    background: linear-gradient(135deg,
        var(--accent-secondary, var(--palette-accent-600)),
        var(--accent-secondary-end, var(--palette-accent-800)));
    color: var(--accent-secondary-text, #ffffff);
}

.gradient-accent-info {
    background: linear-gradient(135deg,
        var(--accent-info, var(--palette-info-700)),
        var(--accent-info-end, var(--palette-info-900)));
    color: var(--accent-info-text, #ffffff);
}

/* La letra de estas superficies la manda la SUPERFICIE, no el markup.
 *
 * Las ~30 tarjetas y circulos que las usan traen `text-white` escrito a mano, de
 * cuando el degradado era siempre oscuro. Ahora los tramos los elige el comercio
 * y pueden ser claros (el tema claro de fabrica los define claros): sin estas
 * reglas, el titulo quedaria blanco sobre un fondo blanco, que es exactamente el
 * problema que se corrigio en la pasada de contraste y que reaparecería apenas
 * el color deja de estar fijo. --gradient-dark-text y --accent-*-text vienen
 * calculados sobre el color elegido, asi que siempre se leen.
 *
 * Los `.text-success`/`.text-danger` de los iconos NO se pisan: llevan
 * !important propio y siguen marcando su significado. */
.gradient-dark-card .text-white,
.gradient-dark-card .text-light,
.gradient-dark .text-white,
.gradient-dark .text-light {
    color: var(--gradient-dark-text, #ffffff) !important;
}

.gradient-accent-primary .text-white,
.gradient-accent-primary .text-light {
    color: var(--accent-primary-text, #ffffff) !important;
}

.gradient-accent-secondary .text-white,
.gradient-accent-secondary .text-light {
    color: var(--accent-secondary-text, #ffffff) !important;
}

.gradient-accent-info .text-white,
.gradient-accent-info .text-light {
    color: var(--accent-info-text, #ffffff) !important;
}

/* Y el texto sin clase. Sin esto se queda con el color global del tema
   (styles-clean pinta `p, span, div` y los encabezados), que puede ser claro
   mientras la tarjeta es clara. Sin !important, para que las utilidades de color
   sigan ganando. */
.gradient-dark-card p,
.gradient-dark-card span,
.gradient-dark-card div,
.gradient-dark-card small,
.gradient-dark-card li,
.gradient-dark-card h1,
.gradient-dark-card h2,
.gradient-dark-card h3,
.gradient-dark-card h4,
.gradient-dark-card h5,
.gradient-dark-card h6 {
    color: var(--gradient-dark-text, #ffffff);
}

/* Texto secundario dentro de una superficie de estado: `opacity` en vez de un
   gris, para que nunca baje del contraste del texto principal mas de lo justo. */
.gradient-available .text-muted,
.gradient-busy .text-muted,
.gradient-reserved .text-muted,
.gradient-preparing .text-muted,
.gradient-pending .text-muted,
.gradient-delivered .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Las superficies que el comercio puede recolorear llevan su propio secundario,
   calculado sobre el color elegido: un rgba blanco fijo sobre un degradado claro
   es justo el blanco-sobre-blanco que se corrigio en la pasada de contraste. */
.gradient-dark-card .text-muted {
    color: var(--gradient-dark-text-muted, rgba(255, 255, 255, 0.85)) !important;
}

.gradient-accent-primary .text-muted {
    color: var(--accent-primary-text-muted, rgba(255, 255, 255, 0.85)) !important;
}

.gradient-accent-secondary .text-muted {
    color: var(--accent-secondary-text-muted, rgba(255, 255, 255, 0.85)) !important;
}

.gradient-accent-info .text-muted {
    color: var(--accent-info-text-muted, rgba(255, 255, 255, 0.85)) !important;
}

/* Bordes de estado (grilla de mesas). El ancho y el estilo los pone el markup. */
.border-status-available { border-color: var(--color-status-available) !important; }
.border-status-busy { border-color: var(--color-status-busy) !important; }
.border-status-reserved { border-color: var(--color-status-reserved) !important; }

/* ============================================
 * PRINT STYLES
 * ============================================ */
@media print {
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .card,
    .stat-card,
    .chart-container {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
    }

    .theme-toggle,
    .sidebar-theme,
    .navbar {
        display: none !important;
    }
}