/* EasyPrintDz CRM - Mobile Real Polish V18 */
/* Safe visual-only patch */

:root{
    --ep-dark:#071226;
    --ep-primary:#2563eb;
    --ep-success:#10b981;
    --ep-warning:#f59e0b;
    --ep-danger:#ef4444;
    --ep-muted:#64748b;
    --ep-border:#e5e7eb;
    --ep-bg:#f4f8fb;
    --ep-card:#ffffff;
}

/* global safety */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: linear-gradient(180deg, #eef7ff 0%, #f8fafc 48%, #ffffff 100%);
}

img, svg, video, canvas {
    max-width: 100%;
}

* {
    box-sizing: border-box;
}

/* make tables safer everywhere */
table {
    width: 100%;
    border-collapse: collapse;
}

.table-responsive,
.overflow-x-auto,
[class*="table"] {
    max-width: 100%;
}

/* general card polish */
.card,
.ep-card,
.rounded-card,
.bg-white,
[class*="shadow"] {
    overflow-wrap: anywhere;
}

/* top navigation mobile */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        line-height: 1.45;
    }

    .container,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    main,
    .content,
    .page-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    header,
    nav,
    .navbar,
    .topbar,
    .admin-nav {
        max-width: 100%;
    }

    nav ul,
    .nav-links,
    .tabs,
    .menu,
    .top-menu,
    .admin-tabs,
    .ep-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    nav ul::-webkit-scrollbar,
    .nav-links::-webkit-scrollbar,
    .tabs::-webkit-scrollbar,
    .menu::-webkit-scrollbar,
    .top-menu::-webkit-scrollbar,
    .admin-tabs::-webkit-scrollbar,
    .ep-tabs::-webkit-scrollbar {
        display: none;
    }

    nav a,
    .nav-link,
    .tab,
    .menu a,
    .top-menu a,
    .admin-tabs a,
    .ep-tabs a {
        white-space: nowrap !important;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

    /* cards/grid mobile */
    .grid,
    .stats-grid,
    .dashboard-grid,
    .cards-grid,
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .grid > *,
    .stats-grid > *,
    .dashboard-grid > *,
    .cards-grid > *,
    .summary-grid > * {
        min-width: 0 !important;
    }

    .card,
    .ep-card,
    .stat-card,
    .summary-card,
    .wallet-card,
    .product-card,
    .sale-card,
    .bg-white {
        border-radius: 16px !important;
        padding: 12px !important;
        box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
    }

    h1 { font-size: 22px !important; line-height: 1.2 !important; }
    h2 { font-size: 19px !important; line-height: 1.25 !important; }
    h3 { font-size: 16px !important; line-height: 1.3 !important; }

    .text-4xl { font-size: 28px !important; }
    .text-3xl { font-size: 24px !important; }
    .text-2xl { font-size: 20px !important; }
    .text-xl { font-size: 18px !important; }

    /* forms */
    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 42px;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    textarea {
        min-height: 92px;
    }

    label {
        font-size: 12px !important;
        color: var(--ep-dark);
    }

    /* buttons */
    button,
    .btn,
    a.btn,
    input[type="submit"] {
        min-height: 40px;
        border-radius: 11px !important;
        font-size: 13px !important;
        font-weight: 700;
        white-space: normal;
        text-align: center;
    }

    .actions,
    .action-buttons,
    .button-row,
    .btn-row,
    .sale-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100%;
    }

    .actions > *,
    .action-buttons > *,
    .button-row > *,
    .btn-row > *,
    .sale-actions > * {
        width: 100% !important;
    }

    /* tables on mobile */
    table {
        min-width: 640px;
        font-size: 12px !important;
    }

    .table-wrap,
    .table-responsive,
    .overflow-x-auto,
    .transactions-table,
    .sales-table,
    .finance-table,
    .users-table,
    .keys-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }

    th, td {
        padding: 9px 8px !important;
        vertical-align: middle !important;
        white-space: nowrap;
    }

    /* finance: prevent right cut */
    .finance-page,
    .finance-container,
    .wallets-page,
    .transactions-page {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .finance-page table,
    .transactions-page table {
        min-width: 720px;
    }

    /* POS mobile */
    .pos-page,
    .quick-sale-page,
    .sale-details-page {
        max-width: 100% !important;
    }

    .pos-page .grid,
    .quick-sale-page .grid {
        grid-template-columns: 1fr !important;
    }

    .pos-product-card,
    .product-sale-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* invoice/customer pages */
    .invoice-page,
    .customer-page,
    .public-customer-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .invoice-page .actions,
    .customer-page .actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* alerts */
    .alert,
    .success,
    .error,
    .warning,
    .notification,
    [role="alert"] {
        border-radius: 14px !important;
        padding: 11px 12px !important;
        font-size: 13px !important;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 430px) {
    .grid,
    .stats-grid,
    .dashboard-grid,
    .cards-grid,
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .card,
    .ep-card,
    .stat-card,
    .summary-card,
    .wallet-card,
    .product-card,
    .sale-card,
    .bg-white {
        padding: 10px !important;
        border-radius: 15px !important;
    }

    .actions,
    .action-buttons,
    .button-row,
    .btn-row,
    .sale-actions {
        grid-template-columns: 1fr 1fr !important;
    }

    .actions.single-mobile,
    .action-buttons.single-mobile,
    .btn-row.single-mobile {
        grid-template-columns: 1fr !important;
    }

    button,
    .btn,
    a.btn,
    input[type="submit"] {
        min-height: 39px;
        font-size: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .text-4xl { font-size: 25px !important; }
    .text-3xl { font-size: 22px !important; }
    .text-2xl { font-size: 19px !important; }

    th, td {
        font-size: 11px !important;
    }
}

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

    .actions,
    .action-buttons,
    .button-row,
    .btn-row,
    .sale-actions {
        grid-template-columns: 1fr !important;
    }
}