/* ============================================================
   BDCA Cricket — Responsive CSS
   Mobile First | Tablet | Desktop
   ============================================================ */

/* ─── BASE MOBILE (< 576px) ─────────────────────────────────── */
@media (max-width: 575.98px) {

    /* Navbar */
    .navbar-brand span { font-size: 13px !important; max-width: 160px; }

    /* Sidebar hidden by default on mobile — handled by Master.css */
    .content-area { padding: 10px 10px !important; }

    /* Breadcrumb compact */
    .breadcrumb { font-size: 11px; padding: 4px 10px; }

    /* Cards */
    .card-body  { padding: 12px !important; }
    .card-header { padding: 9px 14px !important; font-size: 12.5px !important; }

    /* KPI Cards — 2 per row */
    .kpi-card { min-height: 85px !important; padding: 14px 14px !important; }
    .kpi-value { font-size: 1.5rem !important; }
    .kpi-label { font-size: 11px !important; }
    .kpi-sub   { font-size: 10px !important; margin-top: 4px !important; }
    .kpi-icon  { font-size: 2.2rem !important; }

    /* Stat cards */
    .stat-card { padding: 12px !important; }
    .stat-value { font-size: 1.2rem !important; }
    .stat-icon  { width: 38px !important; height: 38px !important; }

    /* Tables — horizontal scroll */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { font-size: 11.5px !important; }
    .table th, .table td { padding: 7px 8px !important; white-space: nowrap; }

    /* Buttons */
    .btn { font-size: 11.5px !important; padding: 5px 10px !important; }
    .btn-xs { font-size: 10px !important; padding: 2px 6px !important; }

    /* Forms */
    .form-control, .form-select { font-size: 13px !important; padding: 7px 10px !important; }
    .form-label { font-size: 12px !important; }

    /* Filter bar */
    .filter-bar { padding: 10px !important; }

    /* Player view */
    .pv-header { padding: 14px 14px 12px !important; flex-wrap: wrap; gap: 10px !important; }
    .pv-name   { font-size: .95rem !important; }
    .pv-tabs   { overflow-x: auto; flex-wrap: nowrap; gap: 0; }
    .pv-tab    { padding: 9px 10px !important; font-size: 11px !important; white-space: nowrap; }
    .pv-tab-content { padding: 14px !important; }
    .pv-grid   { grid-template-columns: repeat(2,1fr) !important; gap: 12px 10px !important; }
    .doc-check-grid { grid-template-columns: 1fr !important; }
    .perf-mini-grid { grid-template-columns: repeat(3,1fr) !important; }

    /* Dashboard action buttons */
    .d-flex.gap-2 .btn { padding: 4px 8px !important; font-size: 11px !important; }

    /* Player photo */
    .player-photo    { width: 36px !important; height: 36px !important; }
    .player-photo-lg { width: 72px !important; height: 72px !important; }
    .pv-avatar       { width: 44px !important; height: 44px !important; font-size: 1rem !important; }

    /* Modal */
    .modal-dialog { margin: 10px !important; }
    .modal-body   { padding: 14px !important; }

    /* Page headings */
    h5.mb-0 { font-size: 14px !important; }

    /* Hide less important table columns on mobile */
    .hide-mobile { display: none !important; }
}

/* ─── SMALL TABLETS (576px – 767px) ─────────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {
    .content-area { padding: 14px !important; }
    .kpi-value { font-size: 1.7rem !important; }
    .pv-grid   { grid-template-columns: repeat(2,1fr) !important; }
    .doc-check-grid { grid-template-columns: 1fr !important; }
    .table { font-size: 12px !important; }
    .pv-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .pv-tab  { font-size: 12px !important; padding: 9px 12px !important; white-space: nowrap; }
}

/* ─── TABLETS (768px – 991px) ───────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .content-area { padding: 16px !important; }
    .kpi-value { font-size: 1.75rem !important; }
    .pv-grid   { grid-template-columns: repeat(2,1fr) !important; }
    .pv-tabs   { overflow-x: auto; }
}

/* ─── DESKTOP (≥ 992px) — ensure sidebar margin ─────────────── */
@media (min-width: 992px) {
    .main-content { margin-left: var(--sidebar-w) !important; }
    body.sidebar-collapsed .main-content { margin-left: 52px !important; }
}

/* ─── UNIVERSAL RESPONSIVE HELPERS ──────────────────────────── */

/* Make all tables scrollable horizontally */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Player view tabs scroll on small screens */
.pv-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pv-tabs::-webkit-scrollbar { display: none; }

/* Performance table on mobile */
.perf-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Filter bar wraps nicely */
.filter-bar .row { --bs-gutter-y: 0.5rem; }

/* Card header flex wrap */
.card-header {
    flex-wrap: wrap;
    gap: 6px;
}

/* Form rows wrap on small screens */
@media (max-width: 767.98px) {
    .row.g-3 > [class*="col-md"] { margin-bottom: 0; }
}

/* Action buttons in table — compact on mobile */
@media (max-width: 575.98px) {
    td[style*="white-space:nowrap"] { white-space: normal !important; }
    td[style*="white-space: nowrap"] { white-space: normal !important; }
}

/* Dashboard chart responsive */
@media (max-width: 767.98px) {
    canvas { max-height: 200px !important; }
}

/* Login page */
@media (max-width: 575.98px) {
    .login-card { margin: 10px; border-radius: 12px !important; }
    .login-header { padding: 24px 20px 18px !important; }
    .login-body   { padding: 20px !important; }
}

/* Footer responsive */
@media (max-width: 575.98px) {
    footer {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px 14px !important;
        font-size: 11px !important;
    }
}

/* Breadcrumb mobile */
@media (max-width: 575.98px) {
    .breadcrumb-item + .breadcrumb-item::before { padding: 0 4px; }
}

/* Pagination mobile */
@media (max-width: 575.98px) {
    .pagination { flex-wrap: wrap; gap: 2px; }
    .page-link  { padding: 4px 8px; font-size: 11px; }
}

/* KPI row — 2 columns on mobile, 3 on tablet, 6 on desktop */
@media (max-width: 575.98px) {
    .kpi-col { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .kpi-col { width: 33.33% !important; flex: 0 0 33.33% !important; max-width: 33.33% !important; }
}

/* Navbar quick search hidden on very small screens */
@media (max-width: 767.98px) {
    .navbar-search { display: none !important; }
}

/* Touch-friendly tap targets */
@media (max-width: 767.98px) {
    .sidebar-link { padding: 11px 16px !important; font-size: 13px !important; }
    .dropdown-item { padding: 10px 16px !important; }
}

/* Print */
@media print {
    #sidebar, #mainNavbar, footer,
    .btn, .breadcrumb, .filter-bar,
    .no-print, .pv-tabs, nav[aria-label] { display: none !important; }
    body         { padding-top: 0 !important; font-size: 11pt; }
    .main-content{ margin-left: 0 !important; }
    .content-area{ padding: 0 !important; }
    .card        { box-shadow: none !important; border: 1px solid #ccc !important; }
    .pv-tab-content { display: block !important; }
    .pv-header   { background: #1a3333 !important; -webkit-print-color-adjust: exact; }
    .table       { font-size: 9pt !important; }
    .table th, .table td { padding: 5px 6px !important; }
}