/**
 * Pallas Global Styles
 * Loaded on every page via base.html
 */

/* ==========================================================================
   Tabler Scrollbar Layout Fix
   Tabler's layout-fluid uses margin-left: calc(100vw - 100%) which causes
   a ~15px left margin when no scrollbar is present. This override removes
   that margin entirely. See Tabler issue #2271.
   https://github.com/tabler/tabler/issues/2271
   Watch for: Tabler PR #2548 includes a proper fix - check when upgrading.
   ========================================================================== */

@media (min-width: 992px) {
    :root {
        margin-left: 0;
    }
}

/* ==========================================================================
   Tabler Color Overrides — Tailwind Palette
   Replace Tabler's default colors with Tailwind equivalents for a more
   harmonious palette. All existing bg-* / text-* classes keep working.
   Must match Tabler's `:root, [data-bs-theme=light]` selector for specificity.
   ========================================================================== */

:root, [data-bs-theme=light] {
    /* Named colors */
    --tblr-blue: #2563eb;           /* Tailwind blue-600 */
    --tblr-blue-rgb: 37, 99, 235;
    --tblr-azure: #0ea5e9;          /* Tailwind sky-500 */
    --tblr-azure-rgb: 14, 165, 233;
    --tblr-indigo: #6366f1;         /* Tailwind indigo-500 */
    --tblr-indigo-rgb: 99, 102, 241;
    --tblr-purple: #a855f7;         /* Tailwind purple-500 */
    --tblr-purple-rgb: 168, 85, 247;
    --tblr-red: #ef4444;            /* Tailwind red-500 */
    --tblr-red-rgb: 239, 68, 68;
    --tblr-orange: #f97316;         /* Tailwind orange-500 */
    --tblr-orange-rgb: 249, 115, 22;
    --tblr-yellow: #f59e0b;         /* Tailwind amber-500 */
    --tblr-yellow-rgb: 245, 158, 11;
    --tblr-green: #16a34a;          /* Tailwind green-600 */
    --tblr-green-rgb: 22, 163, 74;
    --tblr-cyan: #06b6d4;           /* Tailwind cyan-500 */
    --tblr-cyan-rgb: 6, 182, 212;

    /* Semantic aliases — Tabler hardcodes these, so we re-point them */
    --tblr-primary: var(--tblr-blue);       /* blue */
    --tblr-primary-rgb: 37, 99, 235;
    --tblr-success: var(--tblr-green);      /* green */
    --tblr-success-rgb: 22, 163, 74;
    --tblr-info: var(--tblr-azure);         /* azure */
    --tblr-info-rgb: 14, 165, 233;
    --tblr-warning: var(--tblr-yellow);     /* yellow */
    --tblr-warning-rgb: 245, 158, 11;
    --tblr-danger: var(--tblr-red);         /* red */
    --tblr-danger-rgb: 239, 68, 68;

    /* Structural */
    --tblr-border-color: #e5e7eb;   /* Tailwind gray-200 */
}

/* ==========================================================================
   CSS Variables - Event Colors
   Tailwind palette, matching backend constants in core/constants.py
   ========================================================================== */

:root {
    --pallas-maintenance-color: #fde047;  /* Tailwind yellow-300 */
    --pallas-activity-color: #16a34a;     /* Tailwind green-600 */
    --pallas-closure-color: #ef4444;      /* Tailwind red-500 */
    --pallas-shift-color: #7dd3fc;        /* Tailwind sky-300 */
    --pallas-timeoff-color: #a1a1aa;      /* Tailwind zinc-400 */
    --pallas-holiday-color: #ef4444;      /* Tailwind red-500 */
    --pallas-match-color: #7c3aed;        /* Tailwind violet-600 */

    /* Activity type shortcuts */
    --pallas-public-color: #16a34a;       /* Same as activity (green-600) */
    --pallas-aquafitness-color: #7dd3fc;  /* Tailwind sky-300 */
    --pallas-aquabike-color: #6ee7b7;     /* Tailwind emerald-300 */
    --pallas-badminton-color: #fb923c;    /* Tailwind orange-400 */
    --pallas-bebes-nageurs-color: #f9a8d4; /* Tailwind pink-300 */
    --pallas-parcours-aquatique-color: #2dd4bf; /* Tailwind teal-400 */
}

/* ==========================================================================
   Booking Status Selectgroup Colors
   Override Tabler's default primary color for checked state
   Used in booking forms (calendar modal, bookings list modal)
   ========================================================================== */

.booking-status-confirmed .form-selectgroup-input:checked + .form-selectgroup-label {
    color: var(--tblr-green);
    background: rgba(var(--tblr-green-rgb), 0.04);
    border-color: var(--tblr-green);
}

.booking-status-requested .form-selectgroup-input:checked + .form-selectgroup-label {
    color: var(--tblr-yellow);
    background: rgba(var(--tblr-yellow-rgb), 0.04);
    border-color: var(--tblr-yellow);
}

.booking-status-option .form-selectgroup-input:checked + .form-selectgroup-label {
    color: var(--tblr-cyan);
    background: rgba(var(--tblr-cyan-rgb), 0.04);
    border-color: var(--tblr-cyan);
}

.booking-status-invoiced .form-selectgroup-input:checked + .form-selectgroup-label {
    color: var(--tblr-purple);
    background: rgba(var(--tblr-purple-rgb), 0.04);
    border-color: var(--tblr-purple);
}

.booking-status-cancelled .form-selectgroup-input:checked + .form-selectgroup-label {
    color: var(--tblr-red);
    background: rgba(var(--tblr-red-rgb), 0.04);
    border-color: var(--tblr-red);
}

/* ==========================================================================
   Match Badge
   Violet badge matching the match event color (Tailwind violet-600)
   ========================================================================== */

.badge-match {
    color: var(--pallas-match-color);
    background-color: color-mix(in srgb, var(--pallas-match-color) 10%, transparent);
}

/* ==========================================================================
   Tom Select Fixes
   Override transparent background from tom-select.bootstrap5.css
   ========================================================================== */

.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
    background-color: var(--tblr-bg-surface);
}

.ts-wrapper.form-select .ts-control {
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* ==========================================================================
   History Accordion
   Remove horizontal padding from list items in history accordion
   ========================================================================== */

#historyContent .list-group-item {
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   Data Tables - Row Actions
   Fade-in action buttons on hover for cleaner table appearance.
   On touch devices (no hover capability), buttons are always visible.
   ========================================================================== */

.table-row-actions {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    /* Match .btn height: line-height (1.25rem) + padding-y×2 (0.5625rem) + border×2 (1px) */
    min-height: calc(1.25rem + 0.5625rem * 2 + 1px * 2);
}

tr:hover .table-row-actions {
    opacity: 1;
}

/* Touch devices: always show action buttons since hover doesn't work */
@media (hover: none) {
    .table-row-actions {
        opacity: 1;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.table td {
    vertical-align: middle;
}


/* ==========================================================================
   Toast Container Position
   Position below navbar instead of at top of viewport
   Tabler navbar is ~3.5rem on desktop, ~3rem on mobile (smaller brand padding)
   ========================================================================== */

#toastContainer {
    top: 3rem !important;
}

@media (min-width: 768px) {
    #toastContainer {
        top: 3.5rem !important;
    }
}

/* ==========================================================================
   Tabular Numbers
   Use tabular (monospace) figures for time displays and numeric data
   ========================================================================== */

.time-cell {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Empty State Icon Size
   Tabler .empty-icon sets width/height but doesn't set font-size for icon fonts.
   Set font-size to match the container dimensions (3rem).
   ========================================================================== */

.empty-icon .ti {
    font-size: 3rem;
}