/*
 * TSports Web.Mobile - compact, scan-friendly data lists.
 * Loaded after component-scoped styles so phone layouts remain consistent
 * across Social, Sessions, Customers, Inventory, Invoices and admin lists.
 */

@media screen and (max-width: 768px) {
    /* Shared list rhythm */
    .social-page .participant-card,
    .sessions-page .session-card,
    .customers-page .customer-card,
    .inventory-page .product-card,
    .invoice-page .invoice-record,
    .expenses-page .expense-row,
    .logs-page .log-row,
    .employees-page .employee-card,
    .programs-page .program-card {
        border-radius: 14px !important;
        box-shadow: 0 3px 12px rgba(15, 31, 51, .04) !important;
    }

    /* SOCIAL: player cards must never squeeze the player name vertically. */
    .social-page .social-list-section,
    .social-page .social-detail {
        padding: 12px !important;
        border-radius: 15px !important;
    }

    .social-page .operation-card {
        padding: 11px !important;
        border-radius: 14px !important;
    }

    .social-page .social-player-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        margin: 2px 0 12px !important;
    }

    .social-page .social-player-search,
    .social-page .social-player-toolbar > .button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .social-page .participant-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    .social-page .participant-card {
        padding: 12px !important;
        min-width: 0 !important;
    }

    .social-page .participant-top {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 3px !important;
    }

    .social-page .participant-top > .player-avatar {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 44px !important;
        height: 44px !important;
        align-self: center !important;
    }

    .social-page .participant-top > .player-copy {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    .social-page .participant-top > .status-pill {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .social-page .player-copy strong {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .social-page .player-copy small {
        margin-top: 2px !important;
        line-height: 1.35 !important;
    }

    .social-page .player-money-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 10px 0 !important;
    }

    .social-page .player-money-grid > div {
        padding: 8px 9px !important;
        border-radius: 9px !important;
    }

    .social-page .player-money-grid span {
        margin-bottom: 4px !important;
        font-size: 10.5px !important;
    }

    .social-page .player-money-grid strong {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    .social-page .participant-card > p {
        margin: 0 !important;
        padding: 8px 9px !important;
        border-radius: 9px !important;
        background: #f7fafc !important;
        line-height: 1.45 !important;
    }

    .social-page .player-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding-top: 10px !important;
    }

    .social-page .player-actions .button {
        min-height: 40px !important;
        padding: 7px 8px !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
    }

    .social-page .social-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-bottom: 14px !important;
    }

    .social-page .social-summary-grid > div {
        padding: 10px !important;
    }

    .social-page .social-session-card {
        min-height: 0 !important;
        padding: 12px !important;
    }

    .social-page .social-card-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 9px 0 !important;
    }

    .social-page .social-card-stats > span {
        min-width: 0 !important;
        padding: 6px !important;
        border-radius: 8px !important;
        background: #f1f5f9 !important;
        text-align: center !important;
        overflow-wrap: break-word !important;
    }

    /* OPEN COURTS / BOOKING SESSIONS */
    .sessions-page .session-grid {
        gap: 9px !important;
    }

    .sessions-page .session-card {
        padding: 12px !important;
    }

    .sessions-page .customer-line {
        margin: 9px 0 !important;
        padding: 7px 9px !important;
    }

    .sessions-page .session-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .sessions-page .session-stats > div,
    .sessions-page .detail-summary > div {
        padding: 8px 9px !important;
        border-radius: 9px !important;
    }

    .sessions-page .detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .sessions-page .participant-billing-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .sessions-page .participant-money-inline {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .sessions-page .participant-money-inline span {
        padding: 6px !important;
    }

    .sessions-page .participant-billing-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 6px !important;
    }

    /* CUSTOMERS */
    .customers-page .customer-list-card {
        padding: 12px !important;
    }

    .customers-page .customer-grid {
        gap: 8px !important;
    }

    .customers-page .customer-card {
        padding: 12px !important;
    }

    .customers-page .customer-name-row {
        align-items: flex-start !important;
    }

    .customers-page .customer-name-row > strong {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        line-height: 1.3 !important;
    }

    .customers-page .customer-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 9px !important;
    }

    .customers-page .customer-stats > div {
        padding: 7px !important;
    }

    .customers-page .customer-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 9px !important;
        padding-top: 9px !important;
    }

    .customers-page .customer-actions .button {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* INVENTORY / FOOD / PRODUCTS */
    .inventory-page .panel {
        padding: 12px !important;
    }

    .inventory-page .product-grid {
        gap: 9px !important;
    }

    .inventory-page .product-card {
        padding: 11px !important;
        gap: 9px !important;
    }

    .inventory-page .product-title-row strong {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        line-height: 1.3 !important;
    }

    .inventory-page .product-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .inventory-page .product-metrics div {
        padding: 7px 8px !important;
        border-radius: 9px !important;
    }

    .inventory-page .product-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .inventory-page .product-actions .button {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* INVOICES */
    .invoice-page .invoice-list-panel {
        padding: 12px !important;
    }

    .invoice-page .invoice-list {
        gap: 7px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .invoice-page .invoice-record {
        padding: 11px !important;
    }

    .invoice-page .record-customer {
        margin-top: 6px !important;
    }

    .invoice-page .record-meta {
        margin-top: 4px !important;
    }

    .invoice-page .record-money {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 8px !important;
        padding-top: 7px !important;
    }

    /* EXPENSES */
    .expenses-page .expenses-list-panel {
        padding: 12px !important;
    }

    .expenses-page .expense-list {
        gap: 7px !important;
        margin-top: 10px !important;
    }

    .expenses-page .expense-row {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .expenses-page .expense-date {
        min-height: 50px !important;
        border-radius: 10px !important;
    }

    .expenses-page .expense-amount {
        grid-column: 2 !important;
        margin-top: 1px !important;
    }

    .expenses-page .expense-actions {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    /* LOGS */
    .logs-page .timeline-list {
        gap: 7px !important;
    }

    .logs-page .log-row {
        padding: 10px !important;
        gap: 8px !important;
    }

    .logs-page .log-copy,
    .logs-page .log-time {
        min-width: 0 !important;
    }

    .logs-page .log-copy strong,
    .logs-page .log-copy span {
        overflow-wrap: break-word !important;
    }

    /* EMPLOYEES / ROLES */
    .employees-page .list-card {
        padding: 12px !important;
    }

    .employees-page .employee-grid,
    .employees-page .role-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .employees-page .employee-card,
    .employees-page .role-card {
        padding: 12px !important;
        gap: 10px !important;
    }

    .employees-page .employee-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 9px 0 !important;
    }

    .employees-page .card-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .employees-page .card-actions .button {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* CUSTOMER PROGRAMS / COMBOS */
    .programs-page .program-card-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .programs-page .program-card {
        padding: 12px !important;
    }

    .programs-page .card-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .programs-page .card-actions .button {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media screen and (max-width: 390px) {
    .social-page .player-actions,
    .customers-page .customer-actions,
    .inventory-page .product-actions,
    .expenses-page .expense-actions,
    .employees-page .card-actions,
    .programs-page .card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sessions-page .participant-money-inline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .social-page .social-card-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    .social-page .social-card-stats > span:last-child {
        grid-column: 1 / -1 !important;
    }
}