/* ============================================
   Responsive Design for Stand Allocations Page (EditRounds)
   Using Syncfusion Kanban Component
   ============================================ */

/* Syncfusion Kanban board wrapper - enable horizontal scrolling */
.e-kanban {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.e-kanban .e-kanban-content {
    overflow-x: auto !important;
}

/* Kanban table - set minimum width to prevent cramping */
.e-kanban .e-kanban-table {
    min-width: 1080px; /* 6 columns x 180px minimum */
}

/* Individual stand columns - minimum width */
.e-kanban .e-kanban-column {
    min-width: 180px;
    max-width: 250px;
}

/* Column headers (Stand 1, Stand 2, etc.) */
.e-kanban .e-kanban-column .e-column-header {
    padding: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Kanban cards (competitor cards) */
.e-kanban .e-card {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    font-size: 0.9rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.e-kanban .e-card-header {
    padding: 0.25rem;
    font-size: 0.875rem;
}

.e-kanban .e-card-content {
    padding: 0.25rem;
    font-size: 0.813rem;
}

/* Action buttons container at top */
.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.button-container .btn {
    white-space: nowrap;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* ============================================
   Responsive breakpoints
   ============================================ */

/* Large tablets and 150% zoom on 1280px screens */
@media (max-width: 1199px) {
    /* Reduce column widths */
    .e-kanban .e-kanban-column {
        min-width: 160px;
        max-width: 200px;
    }

    .e-kanban .e-kanban-table {
        min-width: 960px; /* 6 x 160px */
    }

    /* Compact cards */
    .e-kanban .e-card {
        font-size: 0.85rem;
        padding: 0.375rem;
    }

    .e-kanban .e-card-header {
        font-size: 0.813rem;
    }

    .e-kanban .e-card-content {
        font-size: 0.75rem;
    }

    /* Compact column headers */
    .e-kanban .e-kanban-column .e-column-header {
        font-size: 0.9rem;
        padding: 0.375rem;
    }
}

/* Tablets and 150% zoom */
@media (max-width: 991px) {
    /* Even more compact */
    .e-kanban .e-kanban-column {
        min-width: 140px;
        max-width: 180px;
    }

    .e-kanban .e-kanban-table {
        min-width: 840px; /* 6 x 140px */
    }

    .e-kanban .e-card {
        font-size: 0.8rem;
        padding: 0.3rem;
    }

    .e-kanban .e-card-header {
        font-size: 0.75rem;
    }

    .e-kanban .e-card-content {
        font-size: 0.7rem;
    }

    /* Stack action buttons */
    .button-container {
        flex-direction: column;
    }

    .button-container .btn {
        width: 100%;
    }
}

/* Mobile devices */
@media (max-width: 767px) {
    /* Very compact for mobile */
    .e-kanban .e-kanban-column {
        min-width: 120px;
        max-width: 150px;
    }

    .e-kanban .e-kanban-table {
        min-width: 720px; /* 6 x 120px */
    }

    .e-kanban .e-kanban-column .e-column-header {
        font-size: 0.813rem;
        padding: 0.3rem;
    }

    .e-kanban .e-card {
        font-size: 0.75rem;
        padding: 0.25rem;
        margin-bottom: 0.375rem;
    }

    .e-kanban .e-card-header {
        font-size: 0.7rem;
    }

    .e-kanban .e-card-content {
        font-size: 0.65rem;
    }

    /* Reduce button padding on mobile */
    .button-container .btn {
        font-size: 0.813rem;
        padding: 0.375rem 0.75rem;
    }
}

/* ============================================
   High DPI / Zoom adjustments
   Specifically for 150% zoom
   ============================================ */
@media (min-resolution: 144dpi) and (max-width: 1366px),
       (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1366px) {

    /* At 150% zoom, apply compact styles */
    .e-kanban .e-kanban-column {
        min-width: 150px !important;
        max-width: 190px !important;
    }

    .e-kanban .e-kanban-table {
        min-width: 900px !important; /* 6 x 150px */
    }

    .e-kanban .e-card {
        font-size: 0.813rem !important;
        padding: 0.35rem !important;
    }

    .e-kanban .e-card-header {
        font-size: 0.75rem !important;
    }

    .e-kanban .e-card-content {
        font-size: 0.7rem !important;
    }

    .e-kanban .e-kanban-column .e-column-header {
        font-size: 0.875rem !important;
        padding: 0.4rem !important;
    }

    /* Reduce action button sizes */
    .button-container .btn {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.85rem !important;
    }
}

/* ============================================
   Avatar/badge styling within cards
   ============================================ */

/* Country flags and avatars */
.e-kanban .e-card .e-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

@media (max-width: 991px) {
    .e-kanban .e-card .e-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

@media (max-width: 767px) {
    .e-kanban .e-card .e-avatar {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
}

/* Remove buttons (red X) in cards */
.e-kanban .e-card .remove-button,
.e-kanban .e-card .e-close {
    min-width: 20px;
    height: 20px;
    font-size: 0.75rem;
}

/* Control buttons at bottom of cards */
.e-kanban .e-card .card-controls,
.e-kanban .e-card .btn-group {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.25rem;
}

.e-kanban .e-card .card-controls .btn,
.e-kanban .e-card .btn-group .btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    min-width: 28px;
}

@media (max-width: 767px) {
    .e-kanban .e-card .card-controls .btn,
    .e-kanban .e-card .btn-group .btn {
        padding: 0.15rem 0.3rem;
        font-size: 0.65rem;
        min-width: 24px;
    }
}

/* ============================================
   Drag and drop visual feedback
   ============================================ */

.e-kanban .e-card.e-dragging {
    opacity: 0.6;
}

.e-kanban .e-kanban-column.e-drag-hover {
    background-color: #e7f3ff;
}

/* ============================================
   Print mode - use full 6 columns
   ============================================ */
@media print {
    .e-kanban .e-kanban-column {
        min-width: auto !important;
        max-width: none !important;
    }

    .e-kanban .e-kanban-table {
        min-width: 100% !important;
    }

    .button-container {
        display: none !important;
    }

    /* Hide scroll indicators */
    .e-kanban {
        overflow: visible !important;
    }
}

/* ============================================
   Additional container responsive fixes
   ============================================ */

/* Container for the whole page */
.container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

@media (min-width: 1200px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Row spacing */
.row.mb-3 {
    margin-bottom: 0.75rem !important;
}

@media (max-width: 767px) {
    .row.mb-3 {
        margin-bottom: 0.5rem !important;
    }
}