/* Compact/mobile-friendly stylesheet for scorer usability */
/* Applied when body has class .compact-mode or on small screens via media queries */

/* Base adjustments */
.compact-mode, .compact-mode body {
    font-size: 15px; /* slightly larger for readability */
}

/* Reduce container padding */
.compact-mode .container, .compact-mode .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Navbar: make items touch-friendly */
.compact-mode .navbar-nav .nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    font-size: 0.95rem;
}

/* Compact cards */
.compact-mode .card, .compact-mode .player-stat-card, .compact-mode .score-card {
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
}

/* Score header sizes */
.compact-mode .team-score {
    font-size: 2.2rem !important;
}

.compact-mode .timer-display {
    font-size: 1.6rem !important;
}

/* Controls: make buttons larger tap targets and stack on small widths */
.compact-mode .quick-action-btn, .compact-mode .stat-button, .compact-mode .btn {
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
}

/* Vertical stacking for action buttons on narrow screens */
@media (max-width: 768px) {
    .compact-mode .d-flex.flex-wrap.justify-content-center {
        display: block !important;
    }
    .compact-mode .quick-action-btn {
        width: 100%;
        margin-bottom: 0.45rem;
    }
    .compact-mode .btn-group-vertical.w-100 .btn {
        width: 100%;
        margin-bottom: 0.35rem;
    }
}

/* Player stat card: tighter layout */
.compact-mode .player-stat-card .card-body {
    padding: 0.5rem;
}

/* Reduce whitespace in lists and headings */
.compact-mode h5, .compact-mode h6 {
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
}

/* Make toast notifications slightly bigger and easier to read */
.compact-mode .toast {
    font-size: 0.95rem;
}

/* Smaller font for meta text when compact to fit more info */
.compact-mode .text-muted, .compact-mode small {
    font-size: 0.85rem;
}

/* Highlight important badges for clarity */
.compact-mode .match-status-badge {
    font-size: 1rem;
    padding: 0.35rem 0.6rem;
}

/* Ensure scoreboard live/paused badges remain visible */
.compact-mode .live-indicator {
    font-weight: 700;
}

/* Optional: slightly boost contrast for mobile readability */
.compact-mode body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Utility: compact table cell padding */
.compact-mode table td, .compact-mode table th {
    padding: 0.35rem 0.5rem;
}

/* Reduce margins for overall layout */
.compact-mode .row.mb-4, .compact-mode .row.mb-3 {
    margin-bottom: 0.6rem !important;
}

/* Make inputs and selects larger touch targets */
.compact-mode input.form-control, .compact-mode select.form-select, .compact-mode textarea.form-control {
    padding: 0.5rem 0.6rem;
    font-size: 0.95rem;
}

/* Single-page match layout: used by match page to fit all content into viewport
   The body/page will not scroll; instead columns scroll internally. */
.single-page-main {
    height: calc(100vh - 56px); /* account for navbar height */
    overflow: hidden; /* no body scrolling */
    box-sizing: border-box;
}

/* Ensure html and body take full height so 100vh calculations behave consistently */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.single-page-main .left-column,
.single-page-main .right-column {
    height: 100%;
    overflow: auto; /* internal scrolling inside columns only */
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Reduce gaps and margins for single page */
.single-page-main .row > .col-12,
.single-page-main .card {
    margin-bottom: 0.5rem;
}

/* On mobile, stack the player columns for better readability */
@media (max-width: 992px) { /* lg breakpoint */
    /* Allow the page to scroll vertically on mobile */
    html, body {
        height: auto;
    }

    .single-page-main .left-column,
    .single-page-main .right-column,
    .single-page-main { /* Allow parent to grow and scroll on mobile */
        height: auto; /* Allow columns to take their natural height */
        overflow: visible; /* Re-enable normal scrolling */
    }
}

/* Make header compact */
.single-page-main .score-card { padding: 0.6rem; }
.single-page-main .team-score { font-size: 2rem !important; }
.single-page-main .timer-display { font-size: 1.4rem !important; }

/* Make player stat cards smaller */
.single-page-main .player-stat-card { margin-bottom: 0.35rem; }

/* Make Players & Stats compact when compact-mode is enabled (even outside single-page) */
.compact-mode .player-stat-card {
    padding: 0.35rem;
    border-radius: 6px;
    margin-bottom: 0.35rem;
}

.compact-mode .player-stat-card .card-body {
    padding: 0.45rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.compact-mode .player-stat-card .fw-bold {
    font-size: 0.98rem;
}

.compact-mode .player-stat-card .small {
    font-size: 0.78rem;
}

/* Buttons: stacked and full width for narrow screens (touch-friendly) */
.compact-mode .player-stat-card .btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (max-width: 768px) {
    .compact-mode .player-stat-card .btn-group-vertical .btn {
        min-width: 84px;
        padding: 0.45rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* Make points/raids labels compact and aligned */
.compact-mode .player-stat-card .small.text-muted {
    display: block;
    margin-top: 0.15rem;
}

/* Slight background contrast for odd rows to aid scanning */
.compact-mode .player-stat-card:nth-child(odd) {
    background: rgba(0,0,0,0.02);
}

/* Reduce heading sizes in right column to fit more content */
.single-page-main .right-column h6 {
    font-size: 0.98rem;
    margin-bottom: 0.4rem;
}

/* Ensure toast container doesn't push layout */
.single-page-main .toast-container { z-index: 2000; }

/* Enhanced responsive styles for compact mode */

@media (max-width: 576px) {
    .compact-mode .container, .compact-mode .container-fluid {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
    
    .compact-mode .card, .compact-mode .player-stat-card, .compact-mode .score-card {
        padding: 0.4rem;
        border-radius: 6px;
    }
    
    .compact-mode .team-score {
        font-size: 1.6rem !important;
    }
    
    .compact-mode .timer-display {
        font-size: 1.3rem !important;
    }
    
    .compact-mode .quick-action-btn, .compact-mode .stat-button, .compact-mode .btn {
        padding: 0.5rem 0.7rem;
        font-size: 0.9rem;
        min-height: 40px;
    }
    
    .compact-mode .player-stat-card .card-body {
        padding: 0.4rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .compact-mode .player-stat-card .btn-group-vertical {
        width: 100%;
        margin-top: 0.25rem;
    }
    
    .compact-mode .player-stat-card .btn-group-vertical .btn {
        width: 100%;
        min-height: 36px;
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .compact-mode h5, .compact-mode h6 {
        font-size: 0.95rem;
        margin-top: 0.2rem;
        margin-bottom: 0.3rem;
    }
    
    .compact-mode table td, .compact-mode table th {
        padding: 0.3rem 0.4rem;
        font-size: 0.8rem;
    }
    
    .compact-mode .match-status-badge {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    
    .compact-mode .toast {
        font-size: 0.9rem;
    }
    
    .compact-mode .text-muted, .compact-mode small {
        font-size: 0.75rem;
    }
    
    .compact-mode .card-header {
        padding: 0.5rem 0.4rem;
    }
    
    .compact-mode .card-header h5 {
        font-size: 0.9rem;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) {
    .compact-mode .quick-action-btn,
    .compact-mode .stat-button,
    .compact-mode .btn {
        transition: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

/* Ensure modal dialogs are responsive */
@media (max-width: 576px) {
    .compact-mode .modal-dialog {
        margin: 0.5rem;
    }
    
    .compact-mode .modal-content {
        border-radius: 8px;
    }
    
    .compact-mode .modal-body {
        padding: 0.75rem;
    }
}

/* Stack form elements vertically on small screens */
@media (max-width: 576px) {
    .compact-mode .form-row > [class*="col-"] {
        margin-bottom: 0.5rem;
        width: 100%;
    }
}

/* Optimize badge display */
@media (max-width: 576px) {
    .compact-mode .badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.35rem;
    }
}

/* Make dropdown menus full width on mobile */
@media (max-width: 576px) {
    .compact-mode .dropdown-menu {
        min-width: 100%;
        border-radius: 0;
        border: none;
    }
    
    .compact-mode .dropdown-item {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* Optimize timeline display on mobile */
@media (max-width: 576px) {
    .compact-mode .timeline-item {
        padding-left: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .compact-mode .timeline-item::before {
        width: 8px;
        height: 8px;
        left: -5px;
    }
}

/* Ensure responsive image sizing */
.compact-mode img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 576px) {
    .compact-mode img.img-fluid {
        max-height: 50px;
    }
}

/* Scrollable tables on mobile */
@media (max-width: 768px) {
    .compact-mode .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}