/* ============================================================================
   club_theme.css
   ============================================================================
   Developer Notes:
   - Central theme variables used across the app (login, courts, legends, etc).
   - Colours must align with the club scheme (top bar red and menu bar black).
   - courts.js reads specific CSS variables from :root using getComputedStyle().
   - If a variable is missing, courts.js will log an error (as you saw).
   ============================================================================ */

:root {

    /* ------------------------------------------------------------------------
       Club core colours (do not change the concept: top bar red + menu bar black)
       ------------------------------------------------------------------------ */
    --club-red: #D5393B;
    --club-red-dark: #8B141B;
    --club-black: #111111;

    /* Added for main.css gradient support */
    --club-red-light: #f57f7a;

    /* =====================================================
       Primary Action Button (Login, Submit, Confirm)
       ===================================================== */

    /* Primary button */
    --btn-primary-bg: #D5393B;          /* Club red */
    --btn-primary-bg-hover: #B92E30;    /* Darker red on hover */
    --btn-primary-text: #FFFFFF;
    --btn-primary-border: #8B141B;

    /* Disabled state */
    --btn-primary-disabled-bg: #999999;
    --btn-primary-disabled-text: #EEEEEE;

    /* =====================================================
       Input Fields (Textboxes, Forms, Read only states)
       ===================================================== */

    /* Editable input background */
    --ui-input-bg: #ffffff;

    /* Read only or disabled input background */
    --ui-input-bg-readonly: #f9f9f9;

    /* =====================================================
       System Messages and Validation
       ===================================================== */

    /* Error text colour (validation, API failures, warnings) */
    --ui-error-text: #b00020;

    /* ------------------------------------------------------------------------
       Base UI surfaces and borders
       ------------------------------------------------------------------------ */
    --ui-page-bg: #f4f4f4;
    --ui-surface-bg: #ffffff;
    --ui-surface-border: #dddddd;
    --ui-border-default: #dddddd;

    /* Added aliases for main.css */
    --panel-bg: var(--ui-surface-bg);
    --border-colour: var(--ui-border-default);

    /* ------------------------------------------------------------------------
       Table styling
       ------------------------------------------------------------------------ */
    --ui-table-header-bg: #f4f4f4;

    /* ------------------------------------------------------------------------
       Base UI text
       ------------------------------------------------------------------------ */
    --ui-text-primary: #111111;
    --ui-text-muted: #555555;
    --ui-text-inverse: #ffffff;

    /* Added aliases for main.css */
    --text-default: var(--ui-text-primary);
    --text-on-dark: var(--ui-text-inverse);

    /* ------------------------------------------------------------------------
       Navigation bar colours for main.css
       ------------------------------------------------------------------------ */
    --nav-gradient-1: #222222;
    --nav-gradient-2: #333333;
    --nav-gradient-3: #444444;

    --nav-link: #dddddd;
    --nav-link-hover: #ffffff;
    --nav-link-hover-bg: rgba(255, 255, 255, 0.2);

    /* ------------------------------------------------------------------------
       Period colours (used for periods column + legend items)
       ------------------------------------------------------------------------ */
    --period-normal-bg: #1b2c3c;
    --period-normal-border: #1b2c3c;
    --period-normal-text: #ffffff;

    --period-peak-bg: #602537;
    --period-peak-border: #4A0B0F;
    --period-peak-text: #ffffff;

    --period-special-bg: #55595a;
    --period-special-border: #4B481F;
    --period-special-text: #ffffff;


    /* ------------------------------------------------------------------------
       Booking cell defaults (Available state)
       ------------------------------------------------------------------------ */
    --booking-available-bg: #ffffff;
    --booking-available-text: #111111;

    /* ------------------------------------------------------------------------
       Peak time column behaviour (time column background becomes selected date colour)
       ------------------------------------------------------------------------ */
    --booking-peak-time-text: #ffffff;

   /* ------------------------------------------------------------------------
      Waiting List Availability (legend + selectable time cells)
      ------------------------------------------------------------------------ */
    --waiting-list-bg: #333333;         /* Base background for waiting list items */
    --waiting-list-text: #ffffff;       /* Text colour for waiting list items */
    --waiting-list-hover-bg: #555555;   /* Hover background for waiting list time cells */


    /* ------------------------------------------------------------------------
       Legend item sizing (used by courts.js and courts.css)
       ------------------------------------------------------------------------ */
    --legend-item-padding: 5px 10px;
    --legend-item-margin: 5px;
    --legend-item-radius: 5px;

    /* ------------------------------------------------------------------------
       Added for courts.css (remove hardcoded values in CSS + JS)
       ------------------------------------------------------------------------ */
    --ui-scroll-thumb: #888888;
    --ui-scroll-thumb-hover: #555555;

    --ui-hover-bg: #d9d9d9;

    --ui-selected-bg: #333333; /* used for .date-block.selected */

    --ui-booked-text: #ffffff; /* used for booked cells text */
    --ui-color-box-border: #cccccc;

}