/* 
CHANGELOG: deals_kanban_horizontal_scroll.css
Created: March 25, 2025
Author: Claude
Purpose: Add horizontal scrolling functionality to the deals kanban board
Route: /crm/deals/pipeline
Blueprint: deals_routes_blueprint.py
Template: deals_kanban_board.html
*/

/* Make the kanban container scrollable horizontally */
.deals-kanban-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 15px; /* Add padding for scrollbar */
    min-height: calc(100vh - 250px); /* Set a minimum height */
    scroll-behavior: smooth; /* For smooth scrolling */
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

/* Ensure the stages have a minimum width */
.deals-kanban-stage {
    min-width: 280px; /* Minimum width for each column */
    flex: 0 0 auto; /* Prevent columns from shrinking */
    margin-right: 15px; /* Space between columns */
    max-height: 100%; /* Full height */
}

/* For the cards container, make it scrollable if there are many cards */
.deals-kanban-cards {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

/* Add visual indicators for scrolling */
.deals-kanban-container::-webkit-scrollbar {
    height: 8px;
}

.deals-kanban-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.deals-kanban-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.deals-kanban-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Scroll controls styling */
.deals-kanban-scroll-controls {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
    gap: 10px;
}

.deals-kanban-scroll-button {
    padding: 6px 15px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.deals-kanban-scroll-button:hover {
    background-color: #e9ecef;
}

/* Add shadow to indicate more content */
.deals-kanban-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 30px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
    display: none; /* Initially hidden, shown via JS when content overflows */
}