/**
 * Minimal custom styles for Daily Sales Report dashboard
 * 99% of styling uses Tailwind CSS utilities - this file only contains
 * essential overrides that can't be done with utility classes
 */

/* Design System Variables - Single Source of Truth */
:root {
    /* Brand Colors - Core palette */
    --color-primary: #3b82f6;        /* Blue - primary brand (blue-500) */
    --color-success: #10b981;        /* Green - positive metrics (green-500) */
    --color-warning: #f59e0b;        /* Amber - warnings (amber-500) */
    --color-error: #ef4444;          /* Red - errors/alerts (red-500) */
    --color-info: #3b82f6;           /* Blue - informational (blue-500) */

    /* Semantic Status Colors - Maps to CONFIG.thresholds */
    --status-good: var(--color-success);
    --status-warn: var(--color-warning);
    --status-bad: var(--color-error);

    /* Background Variations */
    --bg-primary: #eff6ff;           /* Blue background (blue-50) */
    --bg-success: #f0fdf4;           /* Green background (green-50) */
    --bg-warning: #fffbeb;           /* Amber background (amber-50) */
    --bg-error: #fef2f2;             /* Red background (red-50) */

    /* Border Radius */
    --radius-sm: 0.375rem;           /* Small radius (rounded-sm) */
    --radius-md: 0.5rem;             /* Medium radius (rounded-md) */
    --radius-lg: 0.75rem;            /* Large radius (rounded-lg) */

    /* Spacing - Module & Section */
    --module-spacing: 1rem;          /* Space between major modules/cards (mb-4) */
    --section-padding: 0.75rem;      /* Internal section padding (p-3) */
    --header-padding-y: 0.5rem;      /* Header vertical padding (py-2) */
    --header-padding-x: 1rem;        /* Header horizontal padding (px-4) */

    /* Spacing - Controls */
    --control-bar-padding: 0.625rem; /* Control bar vertical padding (py-2.5) */
    --control-gap: 0.75rem;          /* Gap between controls (gap-3) */
    --control-input-padding: 0.5rem; /* Input/select padding (px-2 py-1) */

    /* Typography - Headers */
    --emoji-size: 1.25rem;           /* Emoji font size (text-xl) */
    --header-font-size: 0.9375rem;   /* Section header size (text-base) */
    --subheader-font-size: 0.75rem;  /* Subheader/description size (text-xs) */

    /* Typography - Controls */
    --control-font-size: 0.75rem;    /* Control bar text size (text-xs) */
    --tab-font-size: 0.875rem;       /* Tab text size (text-sm) */
}

/* Alpine.js - Hide elements before hydration */
[x-cloak] {
    display: none !important;
}

/* Sortable table column indicators */
.sort-icon {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.sort-icon.active {
    opacity: 1;
}

/* Optional: Smooth transitions for Alpine.js show/hide */
[x-cloak] {
    transition: opacity 0.2s ease;
}

/* Chatbot message formatting */
.formatted-message {
    line-height: 1.6;
}

.formatted-message strong {
    font-weight: 700;
}

.formatted-message p {
    margin: 0.5em 0;
}

.formatted-message p:first-child {
    margin-top: 0;
}

.formatted-message p:last-child {
    margin-bottom: 0;
}

.formatted-message ul {
    margin: 0.5em 0;
    padding-left: 1.5em;
    list-style-type: disc;
}

.formatted-message li {
    margin: 0.25em 0;
}