/**
 * Supervision Calendar - Color Theme Variables
 *
 * This file contains all color definitions used in the supervision calendar.
 * Customize these variables to change the color scheme of the application.
 */

:root {
    /* ========================================================================
     * BASE COLORS
     * ======================================================================== */

    /* Neutral colors */
    --color-white: #ffffff;
    --color-gray-25: #f0f0f0;
    --color-gray-50: #f5f5f5;
    --color-gray-100: #e0e0e0;
    --color-gray-200: #ddd;
    --color-gray-300: #ccc;
    --color-gray-400: #999;
    --color-gray-450: #555;
    --color-gray-500: #666;
    --color-gray-700: #333;
    --color-gray-800: #212121;

    /* ========================================================================
     * PRIMARY COLORS
     * ======================================================================== */

    /* Main brand color - used for header, buttons, accents */
    --color-primary: #a4ae32;
    --color-primary-light: #b8c14e;
    --color-primary-dark: #5b620a;
    --color-primary-bg: #e3f2fd;

    /* Secondary action color (same as primary-dark, for compatibility) */
    --color-secondary: #ffae00;
    --color-secondary-hover: var(--color-primary-dark);

    /* ========================================================================
     * STATUS COLORS
     * ======================================================================== */

    /* Available slots - Green */
    --color-available: #4caf50;
    --color-available-bg: #e8f5e9;
    --color-available-light: rgba(76, 175, 80, 0.1);

    /* Booked/Requested slots - Orange */
    --color-booked: #ff9800;
    --color-booked-bg: #fff3e0;
    --color-booked-light: rgba(255, 152, 0, 0.1);

    /* Accepted slots - Blue */
    --color-accepted: #41ae32;
    --color-accepted-bg: var(--color-primary-bg);  /* Same as primary-bg */
    --color-accepted-light: rgba(33, 150, 243, 0.1);

    /* Done/Completed slots - Gray */
    --color-done: #9e9e9e;
    --color-done-bg: var(--color-gray-50);

    /* Canceled/Error - Red */
    --color-error: #f44336;
    --color-error-bg: #ffebee;

    /* Aliases for backward compatibility */
    --color-status-available: var(--color-available);
    --color-status-available-bg: var(--color-available-bg);
    --color-status-booked: var(--color-booked);
    --color-status-booked-bg: var(--color-booked-bg);
    --color-status-accepted: var(--color-accepted);
    --color-status-accepted-bg: var(--color-accepted-bg);
    --color-status-done: var(--color-done);
    --color-status-done-bg: var(--color-done-bg);
    --color-status-canceled: var(--color-error);
    --color-status-canceled-bg: var(--color-error-bg);

    /* ========================================================================
     * BADGE COLORS
     * ======================================================================== */

    /* Language badges */
    --color-language-badge-bg: var(--color-primary-bg);
    --color-language-badge-text: var(--color-primary);

    /* Supervisor indicator badges */
    --color-supervisor-badge-bg: var(--color-booked-bg);
    --color-supervisor-badge-text: #f57c00;

    /* ========================================================================
     * UI BACKGROUND COLORS
     * ======================================================================== */

    /* Calendar backgrounds */
    --color-calendar-today: var(--color-primary-bg);
    --color-calendar-other-month: var(--color-gray-50);

    /* Modal/Overlay */
    --color-overlay-bg: rgba(0, 0, 0, 0.5);

    /* ========================================================================
     * TEXT COLORS (using gray scale)
     * ======================================================================== */

    --color-text-primary: var(--color-gray-700);
    --color-text-secondary: var(--color-gray-500);
    --color-text-light: var(--color-gray-400);
    --color-text-white: var(--color-white);

    /* ========================================================================
     * BORDER COLORS (using gray scale)
     * ======================================================================== */

    --color-border-light: var(--color-gray-100);
    --color-border-medium: var(--color-gray-300);
    --color-border-dark: var(--color-gray-400);

    /* ========================================================================
     * BUTTON COLORS
     * ======================================================================== */

    /* Primary action buttons */
    --color-btn-primary-bg: var(--color-secondary);
    --color-btn-primary-hover: var(--color-secondary-hover);
    --color-btn-primary-text: var(--color-white);

    /* Danger/Delete buttons */
    --color-btn-danger-bg: var(--color-error);
    --color-btn-danger-hover: #d32f2f;
    --color-btn-danger-text: var(--color-white);

    /* Success buttons */
    --color-btn-success-bg: var(--color-available);
    --color-btn-success-hover: #388e3c;
    --color-btn-success-text: var(--color-white);

    /* Disabled buttons */
    --color-btn-disabled-bg: var(--color-gray-300);
    --color-btn-disabled-text: var(--color-gray-500);

    /* ========================================================================
     * HEADER COLORS
     * ======================================================================== */

    --color-header-bg: var(--color-primary);
    --color-header-text: var(--color-white);
    --color-header-btn-bg: rgba(255, 255, 255, 0.2);
    --color-header-btn-hover: rgba(255, 255, 255, 0.3);

    /* ========================================================================
     * BOOKING REQUESTS ICON COLORS
     * ======================================================================== */

    --color-requests-icon-bg: rgba(158, 158, 158, 0.15);
    --color-requests-icon-hover: rgba(158, 158, 158, 0.25);
    --color-requests-icon-text: var(--color-gray-500);
    --color-requests-badge-bg: var(--color-error);
    --color-requests-badge-text: var(--color-white);

    /* ========================================================================
     * REAL-TIME STATUS INDICATOR COLORS
     * ======================================================================== */

    --color-realtime-active: var(--color-available);     /* Green - LiveQuery active */
    --color-realtime-polling: var(--color-booked);       /* Orange - Polling mode */
    --color-realtime-inactive: var(--color-done);        /* Gray - Inactive */
    --color-realtime-error: var(--color-error);          /* Red - Error */

    /* ========================================================================
     * MODAL/PANEL COLORS
     * ======================================================================== */

    --color-modal-bg: var(--color-white);
    --color-modal-header-bg: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --color-modal-header-text: var(--color-white);

    /* ========================================================================
     * PAUSE/VACATION COLORS
     * ======================================================================== */

    --color-pause-bg: #fff9e6;
    --color-pause-bg-alt: #fff3d9;
    --color-pause-border: var(--color-booked);
    --color-pause-indicator-bg: var(--color-booked-light);
    --color-pause-indicator-text: var(--color-supervisor-badge-text);

    /* ========================================================================
     * SHADOW COLORS
     * ======================================================================== */

    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-heavy: rgba(0, 0, 0, 0.2);
    --shadow-primary: rgba(0, 0, 0, 0.2);
    --shadow-primary-hover: rgba(0, 0, 0, 0.3);

    /* ========================================================================
     * FORM INPUT COLORS
     * ======================================================================== */

    --color-input-border: var(--color-gray-300);
    --color-input-border-focus: var(--color-secondary);
    --color-input-bg: var(--color-white);
    --color-input-disabled-bg: var(--color-gray-50);

    /* ========================================================================
     * ALERT/MESSAGE COLORS
     * ======================================================================== */

    --color-alert-success-bg: #d4edda;
    --color-alert-success-border: #c3e6cb;
    --color-alert-success-text: #155724;

    --color-alert-error-bg: #f8d7da;
    --color-alert-error-border: #f5c6cb;
    --color-alert-error-text: #721c24;

    --color-alert-warning-bg: #fff3cd;
    --color-alert-warning-border: #ffeaa7;
    --color-alert-warning-text: #856404;

    --color-alert-info-bg: #d1ecf1;
    --color-alert-info-border: #bee5eb;
    --color-alert-info-text: #0c5460;
}