/**
 * Cbran Provider - Assigned Tasks Stylesheet
 * @version 32.0.0
 * @location /assets/css/cbran-assigned-tasks-style.css
 * @description Styles for the [cbran_assigned_tasks] shortcode page, aligned with the new mockup.
 */

/* Note: Tailwind CSS is loaded via CDN. This file contains custom styles and animations. */

/* Custom color for the Payout amount */
.text-payout-pink {
    color: #d6007a;
}

/* Scrolling text animation (marquee) for long location strings */
.scroll-container {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.scrolling-text {
    display: inline-block;
}

.scrolling-text.animate-scroll {
    padding-left: 100%;
    animation: cbran-marquee-scroll 15s linear infinite;
}

.scroll-container:hover .scrolling-text.animate-scroll {
    animation-play-state: paused;
}

@keyframes cbran-marquee-scroll {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-200%); }
}

/* --- Wave Animation for Urgency Bar --- */
.urgency-bar {
    position: relative;
    overflow: hidden;
}

.urgency-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    animation-name: cbran-wave-effect;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform: translateX(-150%);
}

@keyframes cbran-wave-effect {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(150%); }
}

/* Urgency Statuses, including LATE and ACTIVE for assigned tasks */
.wave-late::after { 
    animation-duration: 1s;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    z-index: 1;
}
.wave-active::after {
    animation-duration: 4s;
    background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.4), transparent);
}
.wave-urgent::after { 
    animation-duration: 2s; 
    background: linear-gradient(90deg, transparent, rgba(185, 28, 28, 0.2), transparent);
}
.wave-soon::after { 
    animation-duration: 3.5s; 
    background: linear-gradient(90deg, transparent, rgba(194, 65, 12, 0.2), transparent);
}
.wave-today::after { 
    animation-duration: 5s; 
    background: linear-gradient(90deg, transparent, rgba(22, 101, 52, 0.15), transparent);
}

.status-late-bg { background-image: linear-gradient(to right, #ef4444, #dc2626); }
.status-active-bg { background-image: linear-gradient(to right, #60a5fa, #3b82f6); }
.status-urgent-bg { background-image: linear-gradient(to right, #fee2e2, #fecaca); }
.status-soon-bg { background-image: linear-gradient(to right, #ffedd5, #fed7aa); }
.status-today-bg { background-image: linear-gradient(to right, #dcfce7, #bbf7d0); }

.status-late-text, .status-active-text { color: #ffffff; }
.status-urgent-text { color: #b91c1c; }
.status-soon-text { color: #c2410c; }
.status-today-text { color: #166534; }

/* --- Styles for Flex Pill Navigator --- */
.toggle-container {
    background-color: #e5e7eb; /* bg-gray-200 */
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    /* Create a stacking context */
    isolation: isolate;
}

.toggle-button {
    position: relative;
    z-index: 10 !important; /* Above everything to remain clickable */
    background-color: transparent !important; /* Ensure transparent background */
    flex: 1;
    text-align: center;
    color: #374151; /* text-gray-700 */
    transition: color 0.3s ease-in-out;
    padding: 0.375rem 1.25rem; /* Equivalent to py-1.5 px-5 */
    border: none;
    background: none;
    cursor: pointer;
}

.toggle-button.active {
    color: #1f2937; /* text-gray-800 */
}

.toggle-glider {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: #ffffff !important; /* bg-white - force white background */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
    z-index: 2 !important; /* Above the gray background but below buttons */
    pointer-events: none; /* Allow clicks to pass through to buttons */
}