/*
  EasyPrintDz CRM - Mobile V23
  Goal:
  - Restore better mobile look similar to V21
  - Remove horizontal scroll on phone
  - Keep desktop/tablet normal
  - UI only, no business logic
*/

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

/* Prevent accidental page overflow */
body,
.min-h-screen,
.app,
.admin-app,
.admin-layout,
.page,
.page-wrapper,
.main,
.main-content,
.content,
.content-wrapper,
.container,
.container-fluid {
    max-width: 100%;
}

/* Better cards without forcing desktop tables to break */
.card,
.panel,
.stat-card,
.dashboard-card,
.metric-card,
.box,
.section,
.table-card {
    max-width: 100%;
}

/* Long values: keys, emails, references, tokens */
code,
pre,
.badge,
.key-code,
.license-key,
.token,
.reference,
.invoice-number,
.customer-email,
td,
th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Buttons should wrap instead of pushing the page */
.actions,
.action-buttons,
.btn-group,
.button-row,
.flex-actions,
td .flex,
td form,
td .inline-flex {
    flex-wrap: wrap;
    max-width: 100%;
}

.actions > *,
.action-buttons > *,
.btn-group > *,
.button-row > *,
.flex-actions > * {
    min-width: 0;
}

/* Desktop/tablet can keep normal table scroll inside its box */
.table-responsive,
.overflow-x-auto {
    max-width: 100%;
}

/* Phone mode: no horizontal scroll, tables become clean cards */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .admin-layout,
    .admin-app,
    .main,
    .main-content,
    .content,
    .content-wrapper,
    .page,
    .page-wrapper,
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .card,
    .panel,
    .stat-card,
    .dashboard-card,
    .metric-card,
    .box,
    .section,
    .table-card {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        border-radius: 18px;
    }

    .table-responsive,
    .overflow-x-auto {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    .table-responsive table,
    .overflow-x-auto table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        display: block !important;
    }

    .table-responsive thead,
    .overflow-x-auto thead {
        display: none !important;
    }

    .table-responsive tbody,
    .overflow-x-auto tbody {
        display: block !important;
        width: 100% !important;
    }

    .table-responsive tr,
    .overflow-x-auto tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px 0 !important;
        padding: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.10) !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
        overflow: hidden !important;
    }

    .table-responsive td,
    .overflow-x-auto td {
        display: grid !important;
        grid-template-columns: minmax(95px, 38%) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed rgba(148, 163, 184, 0.45) !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        vertical-align: top !important;
        text-align: start !important;
    }

    .table-responsive td:last-child,
    .overflow-x-auto td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .table-responsive td::before,
    .overflow-x-auto td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 12px;
        line-height: 1.35;
        text-transform: uppercase;
        letter-spacing: .02em;
        min-width: 0;
    }

    .table-responsive td:not([data-label])::before,
    .overflow-x-auto td:not([data-label])::before,
    .table-responsive td[data-label=""]::before,
    .overflow-x-auto td[data-label=""]::before {
        content: "Info";
    }

    .table-responsive td > *,
    .overflow-x-auto td > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .btn,
    button,
    input,
    select,
    textarea,
    .form-control,
    .form-select {
        max-width: 100%;
    }

    .btn,
    button,
    a.btn {
        white-space: normal;
    }

    .badge,
    .status,
    .pill {
        display: inline-flex;
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
    }

    pre,
    code,
    .key-code,
    .license-key,
    .token,
    .reference {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    .table-responsive td,
    .overflow-x-auto td {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .table-responsive td::before,
    .overflow-x-auto td::before {
        font-size: 11px;
    }
}