/* =============================================================================
   ZetraGrid v2 — Standardized AG Grid visual tokens
   -----------------------------------------------------------------------------
   Loaded globally from `_Layout.cshtml`. Targets every `.ag-theme-quartz` grid
   in the app via the AG Grid v33+ CSS custom properties. The companion
   `zetraGrid.js` installs a global monkey-patch on `agGrid.createGrid` so all
   existing call sites pick up these tokens without per-file changes.

   Goals:
     - Consistent row/header sizing across the whole app.
     - Touch-friendly sizing on mobile (≤768px) without changing the look on
       desktop dramatically.
     - Cooperate with the existing `.erp-card-grid` / `.erp-card-container`
       (POS card mode) and `.ag-theme-quartz` setup.

   Implementation notes:
     - We override AG Grid v33+ CSS custom properties (`--ag-*`) — these cascade
       into the Quartz theme automatically.
     - Mobile rules are gated under `@media (max-width: 768px)`.
     - Card-mode tokens live alongside `.erp-card-*` classes already defined in
       the helper-injected styles; we only standardize spacing + colors here.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Desktop tokens (apply to every grid on a v2 page)
   ----------------------------------------------------------------------------- */
.ag-theme-quartz,
[class*="ag-theme-"] {
    /* Sizing */
    --ag-row-height: 36px;
    --ag-header-height: 38px;
    --ag-list-item-height: 32px;

    /* Typography */
    --ag-font-size: 13px;
    --ag-font-family: inherit;

    /* Spacing */
    --ag-cell-horizontal-padding: 12px;
    --ag-grid-size: 4px;
    --ag-borders: solid 1px;

    /* Color tokens — neutral, blends with Zetra primary palette */
    --ag-foreground-color: #2f3640;
    --ag-background-color: #ffffff;
    --ag-header-background-color: #f7f8fa;
    --ag-header-foreground-color: #2f3640;
    --ag-odd-row-background-color: #fafbfc;
    --ag-row-hover-color: rgba(var(--app-theme-rgb, 52, 143, 226), 0.08);
    --ag-selected-row-background-color: rgba(var(--app-theme-rgb, 52, 143, 226), 0.16);
    --ag-border-color: #e9ecef;
    --ag-secondary-border-color: #f1f3f5;
    --ag-row-border-color: #f1f3f5;
    --ag-input-focus-border-color: var(--app-theme, #348fe2);
    --ag-input-focus-box-shadow: 0 0 0 2px rgba(var(--app-theme-rgb, 52, 143, 226), 0.2);
    --ag-range-selection-border-color: var(--app-theme, #348fe2);
    --ag-checkbox-checked-color: var(--app-theme, #348fe2);
}

/* Crisper sort/filter icons */
.ag-theme-quartz .ag-header-cell-text {
    font-weight: 600;
}

/* Pagination panel — quieter look */
.ag-theme-quartz .ag-paging-panel {
    border-top: 1px solid var(--ag-border-color);
    padding: 4px 12px;
}

/* -----------------------------------------------------------------------------
   Mobile overrides (touch-friendly, larger tap targets, no hover effects)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ag-theme-quartz,
    [class*="ag-theme-"] {
        --ag-row-height: 44px;          /* min touch target */
        --ag-header-height: 40px;       /* keep table headers visible for select-all/filter controls */
        --ag-cell-horizontal-padding: 10px;
        --ag-row-hover-color: transparent; /* no hover on touch devices */
    }

    .erp-card-grid,
    .zetra-card-grid {
        --ag-header-height: 0px;        /* card-mode grids hide header */
    }

    /* Larger fonts inside the card containers for readability */
    .erp-card-container,
    .mobile-card-container {
        font-size: 14px;
    }

    /* Bigger pagination buttons */
    .ag-theme-quartz .ag-paging-panel {
        padding: 8px 12px;
        min-height: 44px;
    }
    .ag-theme-quartz .ag-paging-button {
        min-width: 36px;
        min-height: 36px;
    }
}

/* -----------------------------------------------------------------------------
   Card-mode standardization (POS-style single-column grids)
   ----------------------------------------------------------------------------- */
.erp-card-grid .ag-row {
    --ag-row-border-color: transparent;
    border-bottom: 1px solid #eef0f3;
}

.erp-card-grid .ag-row:last-child {
    border-bottom: none;
}

.erp-card-container {
    /* Consistent padding + spacing across all card renderers */
    padding: 12px;
    gap: 12px;
}

/* POS single-column card grids.
   These grids are manually rendered card columns (NarudzbaList, Narudzba,
   SkladistePriprema). On some device widths AG Grid can keep an early narrow
   measurement on .ag-root/.ag-center-cols-container, so lock the internal
   single-column layers to the grid's current width. */
.pos-card-grid {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.pos-card-grid .ag-root-wrapper,
.pos-card-grid .ag-root-wrapper-body,
.pos-card-grid .ag-root,
.pos-card-grid .ag-body,
.pos-card-grid .ag-body-viewport,
.pos-card-grid .ag-center-cols-viewport,
.pos-card-grid .ag-center-cols-clipper,
.pos-card-grid .ag-center-cols-container,
.pos-card-grid .ag-row,
.pos-card-grid .ag-cell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.pos-card-grid .ag-root-wrapper-body,
.pos-card-grid .ag-root {
    flex: 1 1 auto !important;
}

.pos-card-grid .ag-cell {
    padding-right: 14px !important;
}

.pos-card-grid .ag-cell-wrapper,
.pos-card-grid .ag-cell-value,
.pos-card-grid .ag-cell > .order-card,
.pos-card-grid .ag-cell > .item-card,
.pos-card-grid .ag-cell > div {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* -----------------------------------------------------------------------------
   Performance hints — avoid expensive paints on slow devices
   ----------------------------------------------------------------------------- */
.ag-theme-quartz .ag-row,
.ag-theme-quartz .ag-header-cell {
    /* Promote each row/header to its own layer for cheaper scrolling on
       low-end Android. `will-change: transform` is preferred over filters. */
    will-change: transform;
}

.ag-theme-quartz .ag-cell {
    /* Disable text shadow / heavy effects on cells */
    text-shadow: none;
}

/* =============================================================================
   SMALL-SCREEN STANDARDS (≤ 480px / ≤ 400px scanners like Urovo DS50)
   -----------------------------------------------------------------------------
   Standards applied:
     - WCAG 2.5.5 / Apple HIG / Material: ≥ 44px touch targets
     - Body text ≥ 13px, never below 11px even for secondary labels
     - `min-width: 0` on flex children → graceful shrink + ellipsis
     - `overflow-x: auto` for horizontal scrollers (chips, action bars)
     - Stack horizontal flex layouts vertically when columns would collide
     - Trim non-essential chrome (checkbox column, gutters) to maximize content
   ============================================================================= */

/* ---------- Phones (≤ 480px) ---------- */
@media (max-width: 480px) {

    /* AG Grid checkbox column: shrink from default 50px → 36px so the data
       column gets the room it needs. */
    body .ag-theme-quartz .ag-cell.bulk-select-cell,
    body .ag-theme-quartz [col-id="bulkSelect"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Card body padding tighter on phones */
    body .erp-card-container {
        padding: 8px;
        gap: 8px;
    }

    /* ---- Item cards (Artikli/Stavke) ----
       Allow the layout to wrap when the row is narrow. Pricing column moves
       under info instead of overlaying it. */
    body .item-card.artikli-card,
    body .item-card.stavke-card {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    body .artikli-card .item-image,
    body .stavke-card .item-image {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    body .artikli-card .item-info,
    body .stavke-card .item-info {
        /* Take everything left of pricing; allow shrink so siblings can fit */
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    body .artikli-card .item-pricing,
    body .stavke-card .item-pricing {
        /* Right-aligned but no longer rigid; allows wrap to its own row */
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: 50% !important;
        padding-left: 6px !important;
    }

    /* Name allows up to 2 lines then ellipsis — prevents 4-line tower */
    body .item-name {
        font-size: 14px !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }

    /* Price always on a single line, slightly smaller.
       Uses a deep selector chain to beat pos-pages.css `.artikli-card
       .item-pricing .price-main` (specificity 0,3,0). */
    body .artikli-card .item-pricing .price-main,
    body .stavke-card  .item-pricing .price-main,
    body .price-main {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    body .artikli-card .item-pricing .price-sub,
    body .stavke-card  .item-pricing .price-sub,
    body .price-sub {
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* ---- Mobile filter/sort toolbar (chips) ----
       Ensure parent doesn't clip; chips scroll horizontally as designed. */
    body .erp-grid-toolbar {
        max-width: 100%;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding: 6px 8px !important;
        scroll-snap-type: x proximity;
    }
    body .erp-sort-btn,
    body .erp-filter-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 36px; /* slightly more touch-friendly */
        font-size: 12px;
    }
    /* Truncate the selected sort label so the pill doesn't grow huge */
    body .erp-sort-btn .sort-field {
        max-width: 80px;
    }

    /* ---- Order list cards (NarudzbaList) ---- */
    body .order-card-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    body .order-main-info {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    body .order-partner {
        font-size: 14px !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    body .order-amount {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        text-align: right;
    }
    body .order-amount-value {
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    body .order-amount-label {
        font-size: 10px !important;
    }
    /* Order meta row: dates/warehouse/payment chips → wrap & shrink */
    body .order-meta {
        flex-wrap: wrap !important;
        gap: 4px 10px !important;
    }
    body .order-meta-item {
        font-size: 11px !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---- Bottom action bar ----
       Don't stack 6 buttons vertically; scroll horizontally instead. */
    body .app-bottom-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    }
    .app-bottom-bar::-webkit-scrollbar { display: none; }
    body .app-bottom-bar > * {
        flex: 0 0 auto;
        min-width: 88px;
        min-height: 44px;   /* WCAG touch target */
        font-size: 13px;
        white-space: nowrap;
    }

    /* ---- Totals summary line above bottom bar ----
       Allow values to drop under labels rather than splitting "BAM 2670.26" */
    body .totals-summary {
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
        font-size: 12px !important;
    }
    body .totals-summary > * {
        min-width: 0;
    }
}

/* ---------- Compact phones / scanners (≤ 400px, e.g. Urovo DS50) ---------- */
@media (max-width: 400px) {

    /* Drop image to icon-tile so info has more room */
    body .artikli-card .item-image,
    body .stavke-card .item-image {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* Name 1 line on really tight screens — full name shown via tap */
    body .item-name {
        -webkit-line-clamp: 1 !important;
        font-size: 13px !important;
    }

    /* Pricing wraps fully under info when info needs full width */
    body .artikli-card .item-pricing,
    body .stavke-card .item-pricing {
        flex-basis: 100% !important;
        max-width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 0 !important;
    }

    /* Action bar buttons can drop the label, keep icon — but only if the
       button has both. Apps typically use `<i> Text` so we just shrink. */
    body .app-bottom-bar > * {
        min-width: 72px;
        font-size: 12px;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* AG Grid header (when shown) more compact */
    body .ag-theme-quartz {
        --ag-cell-horizontal-padding: 6px;
    }
}

/* =============================================================================
   NarudzbaList / ERP shell fixes (desktop ERP shell on mobile)
   -----------------------------------------------------------------------------
   Pages built on `.erp-app-shell` + `.erp-tab-toolbar` (NarudzbaList and
   similar) need help on narrow screens: their action button group wraps to a
   vertical stack and autoHeight card grids overflow the tab body.
   Now applied globally so any list page using the ERP shell benefits.
   ============================================================================= */
@media (max-width: 768px) {
    /* ---- Tab toolbar with action button group ----
       Make the button row a single horizontal scroller instead of letting
       the 6 buttons wrap into 6 separate rows. */
    .erp-tab-toolbar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .erp-tab-toolbar::-webkit-scrollbar { display: none; }
    .erp-tab-toolbar .erp-btn-group {
        flex-wrap: nowrap !important;
        flex: 0 0 auto !important;
    }
    .erp-tab-toolbar .btn {
        flex: 0 0 auto !important;
        min-width: 96px;
        min-height: 44px;        /* WCAG touch target */
        white-space: nowrap;
        font-size: 12px;
    }

    /* ---- Card-grid row width cap ----
       AG Grid's row container is `position: absolute` and can be wider than
       the visible viewport when the column flex fights with autoHeight.
       Lock both to the grid's own width to prevent the row's blue selection
       bar from extending past the screen. Applies to any card-mode grid. */
    .erp-card-grid .ag-row,
    .erp-card-grid .ag-cell {
        max-width: 100%;
    }
    .erp-card-grid .ag-cell-wrapper,
    .erp-card-grid .ag-cell > * {
        max-width: 100%;
        overflow: hidden;        /* card content uses ellipsis where needed */
    }

    /* ---- POS card-mode width fill ----
       Pages like Narudzba/SkladistePriprema/NarudzbaList render a single
       cellRenderer column with `flex: 1`. When AG Grid initializes inside a
       hidden tab (`display:none`) it measures width as 0 and `sizeColumnsToFit()`
       freezes the column at minWidth. Even after the tab becomes visible the
       row stays narrow, leaving the right side empty and clipping the article
       name (e.g. "SANDUK PUN UNION (").
       Force the AG Grid row containers to span the full grid width regardless
       of stale pixel measurements. Single-column card grids only — multi-column
       grids will not have `.pos-ag-table` so they're unaffected. */
    body .pos-ag-table .ag-center-cols-container,
    body .pos-ag-table .ag-center-cols-clipper,
    body .pos-ag-table .ag-row,
    body .pos-ag-table .ag-cell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* Render container inside the cell stretches to fill */
    body .pos-ag-table .ag-cell-wrapper,
    body .pos-ag-table .ag-cell > .item-card,
    body .pos-ag-table .ag-cell > .order-card,
    body .pos-ag-table .ag-cell > div {
        width: 100% !important;
    }

    /* ---- Article / order name MUST wrap, not clip ----
       pos-pages.css sets `.artikli-card .item-name { word-break: break-word; }`
       which is correct, but there's no `white-space` reset, and ancestor
       `text-overflow: ellipsis` rules on `.item-barcode` / `.item-category`
       can leak via cascade in some renderers. Explicitly enable wrapping. */
    body .item-card .item-name,
    body .order-card .order-partner,
    body .order-card .order-card-header > * {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    /* ---- Mobile shell scroll contract ----
       Keep the ERP shell fixed and let the tab body own vertical scrolling.
       Auto-height card grids grow inside it; explicit inner-scroll grids keep
       a bounded height. */
    .erp-tab-body {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    .erp-tab-body .erp-grid-page-scroll,
    .erp-tab-body .ag-grid-full:has(.ag-layout-auto-height) {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .erp-tab-body .erp-grid-page-scroll .ag-body-viewport,
    .erp-tab-body .erp-grid-page-scroll .ag-center-cols-viewport {
        overflow-y: visible !important;
    }

    .erp-tab-body .erp-grid-inner-scroll {
        height: min(65vh, calc(100dvh - 220px)) !important;
        min-height: 280px;
    }
}

@media (max-width: 480px) {
    /* On phones, drop the toolbar button labels' min-width further so all 6
       fit closer to the visible area before the user has to scroll. */
    body .erp-tab-toolbar .btn {
        min-width: 80px;
        padding: 0.4rem 0.6rem;
    }
}