/*
|--------------------------------------------------------------------------
| EasyPrintDz CRM - Mobile Polish V17
| Scope: visual/mobile only. No business logic.
|--------------------------------------------------------------------------
*/

:root {
    --epz-mobile-border: rgba(15, 23, 42, .08);
    --epz-mobile-muted: #64748b;
    --epz-mobile-bg: #f8fafc;
    --epz-mobile-card: #ffffff;
    --epz-mobile-soft: rgba(37, 99, 235, .08);
}

/* General mobile spacing */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .container,
    .container-fluid,
    .page-container,
    .admin-container,
    .content,
    .main-content,
    main {
        max-width: 100% !important;
    }

    .card,
    .ep-card,
    .panel,
    .box {
        border-radius: 18px !important;
    }

    .table-responsive {
        border-radius: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        max-width: 100%;
    }

    .btn,
    button,
    input,
    select,
    textarea {
        font-size: 14px;
    }

    input,
    select,
    textarea {
        min-height: 42px;
    }
}

/* Convert common admin tables to readable mobile cards */
@media (max-width: 640px) {
    table.epz-mobile-card-table,
    .epz-mobile-card-table thead,
    .epz-mobile-card-table tbody,
    .epz-mobile-card-table th,
    .epz-mobile-card-table td,
    .epz-mobile-card-table tr {
        display: block;
        width: 100%;
    }

    .epz-mobile-card-table {
        border: 0 !important;
        background: transparent !important;
    }

    .epz-mobile-card-table thead {
        display: none !important;
    }

    .epz-mobile-card-table tbody {
        display: grid;
        gap: 12px;
    }

    .epz-mobile-card-table tr {
        background: var(--epz-mobile-card);
        border: 1px solid var(--epz-mobile-border);
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
        padding: 10px 12px;
        overflow: hidden;
    }

    .epz-mobile-card-table td {
        border: 0 !important;
        border-bottom: 1px dashed rgba(15, 23, 42, .08) !important;
        padding: 9px 0 !important;
        min-height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        text-align: right;
        word-break: break-word;
    }

    .epz-mobile-card-table td:last-child {
        border-bottom: 0 !important;
    }

    .epz-mobile-card-table td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        color: var(--epz-mobile-muted);
        font-weight: 700;
        text-align: left;
        font-size: 12px;
        line-height: 1.4;
    }

    .epz-mobile-card-table td:empty::after {
        content: "-";
        color: var(--epz-mobile-muted);
    }

    .epz-mobile-card-table td .btn,
    .epz-mobile-card-table td a.btn,
    .epz-mobile-card-table td button {
        margin: 2px 0;
        width: auto;
        max-width: 100%;
        white-space: normal;
    }

    .epz-mobile-card-table td:last-child {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .epz-mobile-card-table td:last-child::before {
        display: none;
    }
}

/* Long codes / license keys readability */
@media (max-width: 640px) {
    td,
    .key-value,
    .license-key,
    code,
    pre {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    code,
    pre,
    .key-value,
    .license-key {
        white-space: pre-wrap !important;
        font-size: 12px !important;
    }
}

/* Better top stats on phone */
@media (max-width: 768px) {
    .stats-grid,
    .dashboard-grid,
    .cards-grid,
    .summary-grid,
    .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .stat-card,
    .summary-card,
    .kpi-card {
        min-height: auto !important;
        padding: 14px !important;
    }

    .stat-card h3,
    .summary-card h3,
    .kpi-card h3 {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .stat-card .value,
    .summary-card .value,
    .kpi-card .value,
    .stat-value {
        font-size: 20px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 420px) {
    .stats-grid,
    .dashboard-grid,
    .cards-grid,
    .summary-grid,
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile action buttons */
@media (max-width: 640px) {
    .actions,
    .page-actions,
    .header-actions,
    .toolbar,
    .filters,
    .filter-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .actions .btn,
    .page-actions .btn,
    .header-actions .btn,
    .toolbar .btn,
    .filters .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* Forms on mobile */
@media (max-width: 640px) {
    form .row,
    .form-row,
    .grid,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .modal-dialog {
        margin: 10px !important;
    }
}

/* Prevent accidental horizontal page overflow */
@media (max-width: 768px) {
    img,
    svg,
    canvas {
        max-width: 100%;
        height: auto;
    }

    .overflow-auto,
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}