/* EasyPrintDz CRM - Mobile Polish V19 */
/* Visual-only, safe responsive improvements */

:root {
    --ep-bg: #f4f8fb;
    --ep-card: #ffffff;
    --ep-dark: #0f172a;
    --ep-muted: #64748b;
    --ep-border: #e5e7eb;
    --ep-blue: #2563eb;
    --ep-green: #10b981;
    --ep-red: #ef4444;
    --ep-yellow: #f59e0b;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

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

* {
    box-sizing: border-box;
}

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

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {

    body {
        font-size: 14px;
        line-height: 1.45;
    }

    main,
    .container,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .mx-auto,
    .content,
    .page-content,
    .admin-content,
    .dashboard-page,
    .sales-page,
    .finance-page,
    .pos-page,
    .users-page,
    .keys-page,
    .products-page,
    .customers-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    h1 {
        font-size: 22px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em;
    }

    h2 {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    .text-5xl { font-size: 30px !important; }
    .text-4xl { font-size: 26px !important; }
    .text-3xl { font-size: 22px !important; }
    .text-2xl { font-size: 19px !important; }
    .text-xl { font-size: 17px !important; }

    .p-10 { padding: 16px !important; }
    .p-8 { padding: 14px !important; }
    .p-6 { padding: 12px !important; }
    .px-8 { padding-left: 12px !important; padding-right: 12px !important; }
    .py-8 { padding-top: 14px !important; padding-bottom: 14px !important; }

    .gap-8 { gap: 12px !important; }
    .gap-6 { gap: 10px !important; }
    .gap-5 { gap: 10px !important; }
    .gap-4 { gap: 8px !important; }

    .rounded-3xl,
    .rounded-2xl,
    .rounded-xl,
    .card,
    .ep-card,
    .stat-card,
    .summary-card,
    .wallet-card,
    .product-card,
    .sale-card,
    .bg-white {
        border-radius: 16px !important;
    }

    .shadow-xl,
    .shadow-lg,
    .shadow-md,
    .shadow,
    .card,
    .ep-card,
    .stat-card,
    .summary-card,
    .wallet-card,
    .product-card,
    .sale-card,
    .bg-white {
        box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
    }

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

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

    .card,
    .ep-card,
    .stat-card,
    .summary-card,
    .wallet-card,
    .product-card,
    .sale-card,
    .bg-white {
        padding: 11px !important;
        overflow-wrap: anywhere;
    }

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

    nav ul,
    .nav-links,
    .tabs,
    .admin-tabs,
    .top-menu,
    .menu,
    .navigation-menu {
        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,
    .admin-tabs::-webkit-scrollbar,
    .top-menu::-webkit-scrollbar,
    .menu::-webkit-scrollbar,
    .navigation-menu::-webkit-scrollbar {
        display: none;
    }

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

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

    textarea {
        min-height: 90px;
    }

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

    button,
    .btn,
    a.btn,
    input[type="submit"],
    .button,
    .action-btn {
        min-height: 39px;
        border-radius: 11px !important;
        font-size: 12.5px !important;
        font-weight: 800;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }

    .actions,
    .action-buttons,
    .button-row,
    .btn-row,
    .sale-actions,
    .form-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 > *,
    .form-actions > * {
        width: 100% !important;
    }

    .table-responsive,
    .table-wrap,
    .overflow-x-auto,
    .transactions-table,
    .sales-table,
    .finance-table,
    .users-table,
    .keys-table,
    .products-table,
    .customers-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px !important;
        border: 1px solid rgba(226,232,240,.9);
        background: #fff;
        position: relative;
    }

    table {
        width: 100%;
        min-width: 680px;
        border-collapse: collapse;
        font-size: 12px !important;
    }

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

    th {
        font-size: 11px !important;
        letter-spacing: .02em;
    }

    td {
        font-size: 12px !important;
    }

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

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

    .users-page table,
    .users-table table {
        min-width: 680px;
    }

    .keys-page table,
    .keys-table table {
        min-width: 760px;
    }

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

    .pos-page .summary-grid,
    .quick-sale-page .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

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

    .invoice-page,
    .customer-page,
    .public-customer-page,
    .sale-details-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

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

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

    .badge,
    .status,
    .pill,
    .tag {
        font-size: 11px !important;
        border-radius: 999px !important;
        padding: 4px 8px !important;
        white-space: nowrap;
    }

    .mobile-scroll-hint::before,
    .table-responsive::before,
    .table-wrap::before {
        content: "← scroll →";
        display: block;
        font-size: 10px;
        color: #94a3b8;
        text-align: right;
        padding: 5px 8px 0;
    }
}

@media (max-width: 430px) {
    body {
        font-size: 13px;
    }

    main,
    .container,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .mx-auto,
    .content,
    .page-content,
    .admin-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .grid,
    .stats-grid,
    .dashboard-grid,
    .summary-grid,
    .cards-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;
    }

    h1 { font-size: 20px !important; }
    h2 { font-size: 17px !important; }
    h3 { font-size: 15px !important; }

    .text-5xl { font-size: 27px !important; }
    .text-4xl { font-size: 24px !important; }
    .text-3xl { font-size: 21px !important; }
    .text-2xl { font-size: 18px !important; }

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

    .actions,
    .action-buttons,
    .button-row,
    .btn-row,
    .sale-actions,
    .form-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    table {
        min-width: 650px;
    }

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

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

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