/* ============================================================================
   zetra-grid-cards.css

   Global mobile-card visual layer for AG Grids — extracted from POS pages
   (mobile-app.css) so any grid app-wide can opt into the same card look by
   using ZetraGrid's mobileCard mode (sets `.zetra-card-grid` on container
   and renders `.order-card` / `.item-card` cells).

     - Main layout rules are inside @media (max-width: 768px) — desktop is untouched.
     - A small dark-mode fallback stays outside the media query because some
         grids can enter mobileCard mode from JavaScript while the viewport is wider.
   - CSS variables redeclared here so cards work outside POS context.
   - Class names match POS so the visual is identical.
   ========================================================================= */

@media (max-width: 768px) {

    /* CSS custom properties used by the cards. Re-declared here scoped to
       .zetra-card-grid so non-POS pages (which don't load mobile-app.css)
       still resolve them. POS pages define the same vars on :root in
       mobile-app.css — duplicates are harmless. */
    .zetra-card-grid {
        --app-primary: #348fe2;
        --app-success: #00acac;
        --app-warning: #f59c1a;
        --app-danger: #ff5b57;
        --app-dark: #2d353c;
        --app-gray-100: #f8f9fa;
        --app-gray-200: #e9ecef;
        --app-gray-300: #dee2e6;
        --app-gray-500: #adb5bd;
        --app-gray-600: #6c757d;
    }

    html.dark-mode body .zetra-card-grid,
    body.dark-mode .zetra-card-grid,
    .dark-mode .zetra-card-grid {
        --app-dark: #f4f7fb;
        --app-gray-100: #26313d;
        --app-gray-200: #34404d;
        --app-gray-300: #465465;
        --app-gray-500: #aab6c7;
        --app-gray-600: #d5dce8;
    }

    /* ===== AG Grid container in card mode ===== */
    body .zetra-card-grid .ag-root-wrapper { border: none !important; background: transparent !important; }
    body .zetra-card-grid .ag-header { display: none !important; }
    body .zetra-card-grid .ag-body-viewport { background: transparent !important; }

    body .zetra-card-grid .ag-row {
        background: white !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border: 1px solid var(--app-gray-200) !important;
        overflow: hidden;
    }

    body .zetra-card-grid .ag-row:active { transform: scale(0.98); transition: transform 0.1s; }
    body .zetra-card-grid .ag-row-selected { background: #e8f4fd !important; border-color: var(--app-primary) !important; }

    /* Dark mode: card row + selected/hover states */
    html.dark-mode body .zetra-card-grid .ag-row,
    body.dark-mode .zetra-card-grid .ag-row,
    .dark-mode body .zetra-card-grid .ag-row {
        background: var(--app-component-bg, #1e2835) !important;
        border-color: var(--app-component-border-color, #2d3a4a) !important;
        color: var(--app-component-color, #e4e6ef) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    }

    html.dark-mode body .zetra-card-grid .ag-row-hover,
    body.dark-mode .zetra-card-grid .ag-row-hover,
    .dark-mode body .zetra-card-grid .ag-row-hover {
        background: var(--app-component-active-bg, #243040) !important;
    }

    html.dark-mode body .zetra-card-grid .ag-row-selected,
    body.dark-mode .zetra-card-grid .ag-row-selected,
    .dark-mode body .zetra-card-grid .ag-row-selected {
        background: rgba(52, 143, 226, 0.18) !important;
        border-color: var(--app-primary, #348fe2) !important;
        box-shadow: 0 0 0 2px rgba(52, 143, 226, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }

    html.dark-mode body .zetra-card-grid .ag-row-selected.ag-row-hover,
    body.dark-mode .zetra-card-grid .ag-row-selected.ag-row-hover,
    .dark-mode body .zetra-card-grid .ag-row-selected.ag-row-hover {
        background: rgba(52, 143, 226, 0.25) !important;
    }

    body .zetra-card-grid .ag-cell {
        padding: 12px !important;
        line-height: 1.4;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ===== ORDER CARD (list-view rows) ===== */
    body .zetra-card-grid .order-card { padding: 4px 0; width: 100%; }
    body .zetra-card-grid .order-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }
    body .zetra-card-grid .order-main-info { flex: 1; min-width: 0; }
    body .zetra-card-grid .order-number {
        font-size: 12px;
        color: var(--app-primary);
        font-weight: 600;
        margin-bottom: 4px;
    }
    body .zetra-card-grid .order-partner {
        font-size: 16px;
        font-weight: 700;
        color: var(--app-dark);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    body .zetra-card-grid .order-amount { text-align: right; flex-shrink: 0; }
    body .zetra-card-grid .order-amount-value { font-size: 18px; font-weight: 700; color: var(--app-success); }
    body .zetra-card-grid .order-amount-label { font-size: 11px; color: var(--app-gray-600); }

    html.dark-mode body .zetra-card-grid .order-number,
    body.dark-mode .zetra-card-grid .order-number,
    .dark-mode .zetra-card-grid .order-number {
        color: #8cc8ff !important;
    }

    html.dark-mode body .zetra-card-grid .order-partner,
    html.dark-mode body .zetra-card-grid .item-name,
    body.dark-mode .zetra-card-grid .order-partner,
    body.dark-mode .zetra-card-grid .item-name,
    .dark-mode .zetra-card-grid .order-partner,
    .dark-mode .zetra-card-grid .item-name {
        color: var(--app-component-color, #f4f7fb) !important;
    }

    html.dark-mode body .zetra-card-grid .order-amount-value,
    body.dark-mode .zetra-card-grid .order-amount-value,
    .dark-mode .zetra-card-grid .order-amount-value {
        color: #25d8cd !important;
    }

    html.dark-mode body .zetra-card-grid .order-amount-label,
    body.dark-mode .zetra-card-grid .order-amount-label,
    .dark-mode .zetra-card-grid .order-amount-label {
        color: #c7d0dd !important;
    }

    body .zetra-card-grid .order-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        margin-top: 8px;
    }
    body .zetra-card-grid .order-status-badge.status-draft     { background: var(--app-gray-200); color: var(--app-gray-600); }
    body .zetra-card-grid .order-status-badge.status-pending   { background: #fff3cd; color: #856404; }
    body .zetra-card-grid .order-status-badge.status-confirmed { background: #d1ecf1; color: #0c5460; }
    body .zetra-card-grid .order-status-badge.status-ready     { background: #d4edda; color: #155724; }
    body .zetra-card-grid .order-status-badge.status-delivered { background: var(--app-success); color: white; }
    body .zetra-card-grid .order-status-badge.status-cancelled { background: rgba(255, 91, 87, 0.15); color: var(--app-danger); }
    body .zetra-card-grid .order-status-badge.status-info      { background: #d1ecf1; color: #0c5460; }
    body .zetra-card-grid .order-status-badge.status-success   { background: var(--app-success); color: white; }
    body .zetra-card-grid .order-status-badge.status-warning   { background: #fff3cd; color: #856404; }
    body .zetra-card-grid .order-status-badge.status-danger    { background: rgba(255, 91, 87, 0.15); color: var(--app-danger); }
    body .zetra-card-grid .order-status-badge.status-neutral   { background: var(--app-gray-200); color: var(--app-gray-600); }

    body .zetra-card-grid .order-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--app-gray-200);
    }
    body .zetra-card-grid .order-meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--app-gray-600);
        min-width: 0;
    }
    body .zetra-card-grid .order-meta-item i { width: 16px; color: var(--app-gray-600); flex-shrink: 0; }
    body .zetra-card-grid .order-meta-item span { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }

    html.dark-mode body .zetra-card-grid .order-meta,
    body.dark-mode .zetra-card-grid .order-meta,
    .dark-mode .zetra-card-grid .order-meta {
        border-top-color: var(--app-component-border-color, #3a4653) !important;
    }

    html.dark-mode body .zetra-card-grid .order-meta-item,
    html.dark-mode body .zetra-card-grid .order-meta-item i,
    html.dark-mode body .zetra-card-grid .order-meta-item span,
    body.dark-mode .zetra-card-grid .order-meta-item,
    body.dark-mode .zetra-card-grid .order-meta-item i,
    body.dark-mode .zetra-card-grid .order-meta-item span,
    .dark-mode .zetra-card-grid .order-meta-item,
    .dark-mode .zetra-card-grid .order-meta-item i,
    .dark-mode .zetra-card-grid .order-meta-item span {
        color: #d5dce8 !important;
    }

    body .zetra-card-grid .order-note {
        margin-top: 12px;
        padding: 10px;
        background: #fff9c4;
        border-left: 3px solid #ffc107;
        border-radius: 0 8px 8px 0;
        font-size: 12px;
        color: #666;
        word-break: break-word;
    }

    /* ===== ITEM CARD (3-column: image / info / pricing) ===== */
    body .zetra-card-grid .item-card {
        display: flex;
        gap: 12px;
        width: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    body .zetra-card-grid .item-image {
        width: 56px;
        height: 56px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--app-gray-200);
    }
    body .zetra-card-grid .item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    body .zetra-card-grid .item-info {
        flex: 1 1 120px;
        min-width: 0;
        max-width: calc(100% - 150px);
    }
    body .zetra-card-grid .item-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--app-dark);
        margin-bottom: 4px;
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
        white-space: normal;
        line-height: 1.3;
    }
    body .zetra-card-grid .item-category {
        display: inline-block;
        font-size: 11px;
        color: var(--app-gray-600);
        background: var(--app-gray-100);
        padding: 2px 6px;
        border-radius: 4px;
        word-break: break-word;
        max-width: 100%;
        margin-bottom: 4px;
    }

    html.dark-mode body .zetra-card-grid .item-category,
    body.dark-mode .zetra-card-grid .item-category,
    .dark-mode .zetra-card-grid .item-category {
        color: #d5dce8 !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }
    body .zetra-card-grid .item-barcode {
        font-size: 12px;
        color: var(--app-gray-600);
        font-family: monospace;
        margin-bottom: 4px;
        word-break: break-all;
        overflow-wrap: anywhere;
    }
    body .zetra-card-grid .item-note {
        font-size: 11px;
        color: var(--app-gray-600);
        margin-top: 4px;
        font-style: italic;
        word-break: break-word;
    }

    body .zetra-card-grid .item-pricing {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        flex-shrink: 0;
        min-width: 70px;
        max-width: 90px;
    }
    body .zetra-card-grid .item-pricing .price-main {
        font-size: 16px;
        font-weight: 700;
        color: var(--app-dark);
        text-align: right;
    }
    body .zetra-card-grid .item-pricing .price-main small {
        font-size: 11px;
        font-weight: 500;
        color: var(--app-gray-500);
    }
    body .zetra-card-grid .item-pricing .price-sub {
        font-size: 11px;
        color: var(--app-gray-500);
        text-align: right;
    }

    html.dark-mode body .zetra-card-grid .item-pricing .price-main,
    body.dark-mode .zetra-card-grid .item-pricing .price-main,
    .dark-mode .zetra-card-grid .item-pricing .price-main {
        color: var(--app-component-color, #f4f7fb) !important;
    }

    html.dark-mode body .zetra-card-grid .item-pricing .price-main small,
    html.dark-mode body .zetra-card-grid .item-pricing .price-sub,
    body.dark-mode .zetra-card-grid .item-pricing .price-main small,
    body.dark-mode .zetra-card-grid .item-pricing .price-sub,
    .dark-mode .zetra-card-grid .item-pricing .price-main small,
    .dark-mode .zetra-card-grid .item-pricing .price-sub {
        color: #c7d0dd !important;
    }

    body .zetra-card-grid .stock-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 12px;
        margin-top: 4px;
    }
    body .zetra-card-grid .stock-badge.stock-ok    { background: rgba(40, 167, 69, 0.15);  color: #28a745; }
    body .zetra-card-grid .stock-badge.stock-low   { background: rgba(255, 193, 7, 0.15);  color: #d39e00; }
    body .zetra-card-grid .stock-badge.stock-empty { background: rgba(220, 53, 69, 0.15);  color: #dc3545; }

    /* Action row at the bottom of a card (mobileCard.actions) */
    body .zetra-card-grid .card-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--app-gray-200);
        flex-wrap: wrap;
    }
    body .zetra-card-grid .zetra-card-desktop-actions {
        display: contents;
    }
    body .zetra-card-grid .zetra-card-action-fragment,
    body .zetra-card-grid .card-actions .btn-group {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }
    body .zetra-card-grid .card-actions button,
    body .zetra-card-grid .card-actions a,
    body .zetra-card-grid .card-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid var(--app-gray-300);
        background: white;
        color: var(--app-dark);
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 34px;
        white-space: nowrap;
        text-decoration: none;
    }
    body .zetra-card-grid .card-actions button:active,
    body .zetra-card-grid .card-actions a:active,
    body .zetra-card-grid .card-actions .btn:active { transform: scale(0.97); }
    body .zetra-card-grid .card-actions button.action-primary { background: var(--app-primary); color: white; border-color: var(--app-primary); }
    body .zetra-card-grid .card-actions button.action-danger  { background: var(--app-danger);  color: white; border-color: var(--app-danger); }
    body .zetra-card-grid .card-actions .btn-primary { background: var(--app-primary, #348fe2); color: white; border-color: var(--app-primary, #348fe2); }
    body .zetra-card-grid .card-actions .btn-danger  { background: var(--app-danger, #ff5b57); color: white; border-color: var(--app-danger, #ff5b57); }
    body .zetra-card-grid .card-actions .btn-success { background: var(--app-success, #00acac); color: white; border-color: var(--app-success, #00acac); }
    body .zetra-card-grid .card-actions .btn-info    { background: var(--app-info, #49b6d6); color: white; border-color: var(--app-info, #49b6d6); }
    body .zetra-card-grid .card-actions .btn-warning { background: var(--app-warning, #f59c1a); color: #1f2937; border-color: var(--app-warning, #f59c1a); }
    body .zetra-card-grid .card-actions .btn-secondary { background: var(--app-secondary, #6c757d); color: white; border-color: var(--app-secondary, #6c757d); }

    /* On very narrow screens (Urovo DS50 etc.) collapse pricing under info */
    @media (max-width: 400px) {
        body .zetra-card-grid .item-info { max-width: 100%; flex: 1 1 100%; }
        body .zetra-card-grid .item-pricing {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            max-width: 100%;
            min-width: auto;
            width: 100%;
            padding-top: 8px;
            border-top: 1px solid var(--app-gray-200);
            margin-top: 4px;
        }
        body .zetra-card-grid .order-card-header { flex-wrap: wrap; }
    }
}

/* Dark-mode readability fallback for JS-enabled mobileCard mode outside the
   mobile media query. Scoped to .zetra-card-grid so normal desktop grids stay
   unchanged. */
html.dark-mode body .zetra-card-grid,
body.dark-mode .zetra-card-grid,
.dark-mode .zetra-card-grid {
    --app-dark: #f4f7fb;
    --app-gray-100: #26313d;
    --app-gray-200: #34404d;
    --app-gray-300: #465465;
    --app-gray-500: #aab6c7;
    --app-gray-600: #d5dce8;
}

html.dark-mode body .zetra-card-grid .ag-row,
body.dark-mode .zetra-card-grid .ag-row,
.dark-mode .zetra-card-grid .ag-row {
    color: var(--app-component-color, #e4e6ef) !important;
}

html.dark-mode body .zetra-card-grid .order-number,
body.dark-mode .zetra-card-grid .order-number,
.dark-mode .zetra-card-grid .order-number {
    color: #8cc8ff !important;
}

html.dark-mode body .zetra-card-grid .order-partner,
html.dark-mode body .zetra-card-grid .item-name,
body.dark-mode .zetra-card-grid .order-partner,
body.dark-mode .zetra-card-grid .item-name,
.dark-mode .zetra-card-grid .order-partner,
.dark-mode .zetra-card-grid .item-name {
    color: var(--app-component-color, #f4f7fb) !important;
}

html.dark-mode body .zetra-card-grid .order-amount-value,
body.dark-mode .zetra-card-grid .order-amount-value,
.dark-mode .zetra-card-grid .order-amount-value {
    color: #25d8cd !important;
}

html.dark-mode body .zetra-card-grid .order-amount-label,
html.dark-mode body .zetra-card-grid .item-category,
html.dark-mode body .zetra-card-grid .item-pricing .price-main small,
html.dark-mode body .zetra-card-grid .item-pricing .price-sub,
body.dark-mode .zetra-card-grid .order-amount-label,
body.dark-mode .zetra-card-grid .item-category,
body.dark-mode .zetra-card-grid .item-pricing .price-main small,
body.dark-mode .zetra-card-grid .item-pricing .price-sub,
.dark-mode .zetra-card-grid .order-amount-label,
.dark-mode .zetra-card-grid .item-category,
.dark-mode .zetra-card-grid .item-pricing .price-main small,
.dark-mode .zetra-card-grid .item-pricing .price-sub {
    color: #c7d0dd !important;
}

html.dark-mode body .zetra-card-grid .order-status-badge,
body.dark-mode .zetra-card-grid .order-status-badge,
.dark-mode .zetra-card-grid .order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 6px;
    background: #34404d !important;
    color: #f4f7fb !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

html.dark-mode body .zetra-card-grid .order-status-badge.status-success,
html.dark-mode body .zetra-card-grid .order-status-badge.status-delivered,
body.dark-mode .zetra-card-grid .order-status-badge.status-success,
body.dark-mode .zetra-card-grid .order-status-badge.status-delivered,
.dark-mode .zetra-card-grid .order-status-badge.status-success,
.dark-mode .zetra-card-grid .order-status-badge.status-delivered {
    background: rgba(0, 172, 172, 0.22) !important;
    color: #5ff4ea !important;
}

html.dark-mode body .zetra-card-grid .order-status-badge.status-warning,
html.dark-mode body .zetra-card-grid .order-status-badge.status-pending,
body.dark-mode .zetra-card-grid .order-status-badge.status-warning,
body.dark-mode .zetra-card-grid .order-status-badge.status-pending,
.dark-mode .zetra-card-grid .order-status-badge.status-warning,
.dark-mode .zetra-card-grid .order-status-badge.status-pending {
    background: rgba(245, 156, 26, 0.22) !important;
    color: #ffd08a !important;
}

html.dark-mode body .zetra-card-grid .order-status-badge.status-danger,
html.dark-mode body .zetra-card-grid .order-status-badge.status-cancelled,
body.dark-mode .zetra-card-grid .order-status-badge.status-danger,
body.dark-mode .zetra-card-grid .order-status-badge.status-cancelled,
.dark-mode .zetra-card-grid .order-status-badge.status-danger,
.dark-mode .zetra-card-grid .order-status-badge.status-cancelled {
    background: rgba(255, 91, 87, 0.22) !important;
    color: #ffb0ae !important;
}

html.dark-mode body .zetra-card-grid .order-meta,
body.dark-mode .zetra-card-grid .order-meta,
.dark-mode .zetra-card-grid .order-meta {
    border-top-color: var(--app-component-border-color, #3a4653) !important;
}

html.dark-mode body .zetra-card-grid .order-meta-item,
html.dark-mode body .zetra-card-grid .order-meta-item i,
html.dark-mode body .zetra-card-grid .order-meta-item span,
body.dark-mode .zetra-card-grid .order-meta-item,
body.dark-mode .zetra-card-grid .order-meta-item i,
body.dark-mode .zetra-card-grid .order-meta-item span,
.dark-mode .zetra-card-grid .order-meta-item,
.dark-mode .zetra-card-grid .order-meta-item i,
.dark-mode .zetra-card-grid .order-meta-item span {
    color: #d5dce8 !important;
}

html.dark-mode body .zetra-card-grid .item-category,
body.dark-mode .zetra-card-grid .item-category,
.dark-mode .zetra-card-grid .item-category {
    background: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode body .zetra-card-grid .item-pricing .price-main,
body.dark-mode .zetra-card-grid .item-pricing .price-main,
.dark-mode .zetra-card-grid .item-pricing .price-main {
    color: var(--app-component-color, #f4f7fb) !important;
}