/* POSFIELD — the desktop application.
 *
 * On a monitor the application is an operations console, not an enlarged phone: text is read at arm's length,
 * figures carry the screen, and the width is used to put related information side by side instead of stacking it.
 *
 * EVERY rule in this file lives inside a min-width media query, so the phone layout cannot be affected by anything
 * written here. The identity (navy, blue, radii, dark mode) comes from the tokens; nothing is redefined.
 */

/* ============================== 1024px and up: the desktop application ============================== */
@media (min-width: 1024px) {
  /* ---------- shell ---------- */
  body.pf-app:not(.ui-phase1) { padding-inline-start: 268px !important; }
  .pf-app .desktop-sidebar { width: 268px; padding: 20px 14px 24px; }
  /* Every destination stays reachable: the list scrolls inside the sidebar, the profile stays at the bottom. */
  .pf-app .desktop-sidebar { display: flex; flex-direction: column; overflow: hidden; }
  .pf-app .desktop-sidebar .ds-nav {
    display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline-end: 2px;
  }
  .pf-app .desktop-sidebar .ds-profile-btn, .pf-app .desktop-sidebar .ds-divider { flex: 0 0 auto; }
  .pf-app .desktop-sidebar .ds-nav-item {
    font-size: 15px; font-weight: 650; min-height: 46px; padding: 11px 14px; gap: 12px;
    letter-spacing: 0; line-height: 1.35;
  }
  .pf-app .desktop-sidebar .ds-nav-item .ds-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; }
  .pf-app .desktop-sidebar .ds-nav-item .ds-icon svg, .pf-app .desktop-sidebar .ds-nav-item svg { width: 20px; height: 20px; }
  .pf-app .desktop-sidebar .ds-nav-item.active { font-weight: 800; }
  .pf-app .desktop-sidebar .ds-profile-btn { font-size: 15px; min-height: 50px; font-weight: 700; }
  .pf-app .desktop-sidebar .ds-logo { padding-bottom: 16px; margin-bottom: 10px; }

  /* The working area uses the monitor instead of a phone-width column in the middle of it. */
  .pf-app:not(.ui-phase1) .screen { max-width: 1320px; padding: 26px 34px 72px; }

  /* ---------- typography: read at desktop distance ---------- */
  .pf-app:not(.ui-phase1) .screen { font-size: 15px; line-height: 1.6; }
  .pf-app:not(.ui-phase1) .screen :is(p, label, li, td, th, .list-item, .card) { font-size: inherit; }
  .pf-app:not(.ui-phase1) .screen h1 { font-size: 27px; }
  .pf-app:not(.ui-phase1) .screen h2, .pf-app:not(.ui-phase1) .section-title { font-size: 21px; line-height: 1.35; }
  .pf-app:not(.ui-phase1) .screen h3 { font-size: 18px; }
  .pf-app:not(.ui-phase1) .stat-label, .pf-app:not(.ui-phase1) .text-dim { font-size: 13.5px; }
  /* Figures carry these screens. Many tiles were given a phone-sized value in the markup itself, so the
     desktop scale has to override that inline size rather than lose to it. */
  .pf-app:not(.ui-phase1) .stat-value { font-size: 28px !important; line-height: 1.2; font-weight: 800; }
  .pf-app:not(.ui-phase1) .stats-grid .stat-value { font-size: 28px !important; }
  .pf-app:not(.ui-phase1) .btn { font-size: 15px; min-height: 44px; padding-inline: 18px; }
  .pf-app:not(.ui-phase1) :is(.input, input[type=text], input[type=number], input[type=date], input[type=search], select, textarea) {
    font-size: 15px; min-height: 44px;
  }
  .pf-app:not(.ui-phase1) .chip { font-size: 14px; min-height: 38px; padding: 8px 16px; }
  /* Arabic needs a touch more line height at these sizes to stay comfortable. */
  html[dir="rtl"] .pf-app:not(.ui-phase1) .screen { line-height: 1.75; }

  /* ---------- cards and lists: denser, not emptier ---------- */
  .pf-app:not(.ui-phase1) .card { padding: 18px 20px; }
  .pf-app:not(.ui-phase1) .list-item { padding: 14px 18px; }
  .pf-app:not(.ui-phase1) .stats-grid { gap: 16px; }

  /* A button that carries one action does not need the whole monitor. */
  .pf-app:not(.ui-phase1) .screen > .btn,
  .pf-app:not(.ui-phase1) #tab-rapports > .btn { width: auto; display: inline-flex; }

  /* ---------- tables are first-class on a desktop ---------- */
  .pf-app:not(.ui-phase1) .screen table { font-size: 15px; }
  .pf-app:not(.ui-phase1) .screen :is(th, td) { padding: 12px 14px; }
  .pf-app:not(.ui-phase1) .screen thead th {
    position: sticky; top: 0; z-index: 2; background: var(--pf-surface-2);
    font-size: 13.5px; letter-spacing: .02em; text-transform: none;
  }
  .pf-app:not(.ui-phase1) .screen tbody tr:hover { background: var(--pf-primary-50); }

  /* ---------- dialogs get desktop proportions ---------- */
  .pf-app:not(.ui-phase1) .modal { width: min(760px, 92vw); max-width: min(760px, 92vw); padding: 4px; }
  .pf-app:not(.ui-phase1) .modal .modal-body { padding: 20px 24px 24px; }
  .pf-app:not(.ui-phase1) .modal .modal-title { font-size: 20px; }
  /* Fields that belong together sit together instead of in one long ribbon. */
  .pf-app:not(.ui-phase1) .modal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  /* ---------- a tab bar is a control, not a banner ---------- */
  .pf-app:not(.ui-phase1) .screen > .tabs { display: inline-flex; width: auto; max-width: 100%; }
  .pf-app:not(.ui-phase1) .tab-btn { font-size: 15px; min-height: 42px; padding-inline: 20px; }

  /* ---------- the application header: a working bar, not a title page ---------- */
  .pf-app:not(.ui-phase1) .app-header { padding-block: 10px; }
  .pf-app:not(.ui-phase1) .app-header .pf-header-store,
  .pf-app:not(.ui-phase1) .app-header #headerStoreName { font-size: 14px; font-weight: 700; }

  /* ---------- the panels (Team, Support, Subscription) ---------- */
  /* The panels keep the sheet width they were approved with; only what is inside them is read at desktop size. */
  .pf-app .team-overlay { font-size: 15px; }
  .pf-app .team-overlay :is(h2, .support-title) { font-size: 22px; }
  .pf-app .team-overlay .team-member, .pf-app .team-overlay .team-device { padding: 16px 18px; }
}

/* ============================== 1280px and up: two working columns ============================== */
@media (min-width: 1280px) {
  /* ---------- dashboard / reports: a control centre ---------- */
  .pf-app:not(.ui-phase1) #tab-rapports {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start;
  }
  .pf-app:not(.ui-phase1) #tab-rapports > * { grid-column: 1 / -1; margin: 0; }
  /* one toolbar: period first, then the two report actions */
  .pf-app:not(.ui-phase1) #tab-rapports > .filter-chips { grid-column: span 6; flex-wrap: wrap; align-content: start; }
  .pf-app:not(.ui-phase1) #tab-rapports > #downloadReportPdfBtn { grid-column: span 3; }
  .pf-app:not(.ui-phase1) #tab-rapports > #strictAuditBtn { grid-column: span 3; }
  /* the headline figure beside the breakdown it comes from */
  .pf-app:not(.ui-phase1) #tab-rapports > #netProfitCard { grid-column: span 5; }
  .pf-app:not(.ui-phase1) #tab-rapports > .card:not(#netProfitCard):not(#phantomSimCard) { grid-column: span 7; }
  .pf-app:not(.ui-phase1) #tab-rapports > #phantomSimCard { grid-column: span 5; }
  .pf-app:not(.ui-phase1) #tab-rapports > .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the net profit is the number of the screen */
  .pf-app:not(.ui-phase1) :is(#netProfitCard .stat-value, #kpiNetProfit) { font-size: 40px !important; letter-spacing: -.02em; }
  .pf-app:not(.ui-phase1) #tab-historique > #ventesList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* ---------- catalogues read as a grid, not a ribbon ---------- */
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList, #depensesList, #profitsList, #debtsOwedList, #debtsMineList,
    #achatsList, #fournisseursList, #deliveriesList, #adsList, #projectsList, #walletsList, #fixedDepensesList,
    #phantomDepensesList, #remindersList, #returnsArchiveList, #achatsArchiveList) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start;
  }

  /* ---------- point of sale: catalogue and basket at the same time ----------
     The basket column sizes itself to its content, so an empty basket (hidden) leaves the catalogue the whole
     width instead of a reserved empty strip. */
  .pf-app:not(.ui-phase1) .pos-container {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start;
  }
  .pf-app:not(.ui-phase1) .pos-container > * { grid-column: 1; }
  .pf-app:not(.ui-phase1) .pos-container > :is(#posCartSection, #cartSummaryWrap, #cartActions) { grid-column: 2; width: 100%; }
  /* Only the basket itself gives the column its width, so an empty (hidden) basket leaves none behind. */
  .pf-app:not(.ui-phase1) .pos-container > #posCartSection { width: 400px; }
  .pf-app:not(.ui-phase1) .pos-container > #posCartSection { position: sticky; top: 16px; }
  /* Adding an item switches a phone to the basket; on a monitor both stay on screen, so the next item is one
     click away instead of a trip back to the catalogue. The selling logic is untouched — only what stays visible. */
  .pf-app:not(.ui-phase1) #screen-pos #posProductGrid { display: grid !important; }
  .pf-app:not(.ui-phase1) #posProductGrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .pf-app:not(.ui-phase1) #cartActions { flex-direction: column; }
  .pf-app:not(.ui-phase1) #cartActions .btn { width: 100%; }

  /* ---------- order tracking: more of the operation on screen ---------- */
  /* Only while it is the screen being shown: a screen that is not active must stay hidden. */
  .pf-app:not(.ui-phase1) #screen-deliveries.active {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start;
  }
  .pf-app:not(.ui-phase1) #screen-deliveries > * { grid-column: 1 / -1; margin-bottom: 0; }
  /* the two import panels are two halves of one row instead of two full-width banners */
  .pf-app:not(.ui-phase1) #screen-deliveries > .card:has(#deliveryPdfInput),
  .pf-app:not(.ui-phase1) #screen-deliveries > .card:has(#invoicePdfInput) { grid-column: span 1; height: 100%; }
  .pf-app:not(.ui-phase1) #screen-deliveries .filter-chips { flex-wrap: wrap; }
}

/* ============================== 1600px and up: a third column where it helps ============================== */
@media (min-width: 1600px) {
  .pf-app:not(.ui-phase1) .screen { max-width: 1560px; padding-inline: 40px; }
  .pf-app:not(.ui-phase1) #tab-rapports > .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList, #deliveriesList, #achatsList, #fournisseursList, #walletsList) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pf-app:not(.ui-phase1) .pos-container > #posCartSection { width: 440px; }
  .pf-app:not(.ui-phase1) .stat-value { font-size: 31px !important; }
  .pf-app:not(.ui-phase1) :is(#netProfitCard .stat-value, #kpiNetProfit) { font-size: 46px !important; }
}

/* ============================== 1920px and up ============================== */
@media (min-width: 1920px) {
  .pf-app:not(.ui-phase1) .screen { max-width: 1760px; }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-app:not(.ui-phase1) #tab-historique > #ventesList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================== readability on a monitor ==============================
 * The console was still being read at phone size on a 24-inch screen: a shopkeeper checking stock across the
 * counter could not read a price without leaning in. Everything below raises the reading size one honest step —
 * text, figures, controls and the product cards — and gives the cards room to be cards. Phones are untouched:
 * every rule stays inside the desktop media queries.
 */
@media (min-width: 1024px) {
  .pf-app:not(.ui-phase1) .screen { font-size: 16.5px; line-height: 1.62; }
  .pf-app:not(.ui-phase1) .screen h1 { font-size: 29px; }
  .pf-app:not(.ui-phase1) .screen h2, .pf-app:not(.ui-phase1) .section-title { font-size: 22.5px; }
  .pf-app:not(.ui-phase1) .screen h3 { font-size: 19px; }
  .pf-app:not(.ui-phase1) .stat-label, .pf-app:not(.ui-phase1) .text-dim { font-size: 14.5px; }
  .pf-app:not(.ui-phase1) .stat-value, .pf-app:not(.ui-phase1) .stats-grid .stat-value { font-size: 31px !important; }
  .pf-app:not(.ui-phase1) .btn { font-size: 15.5px; min-height: 46px; }
  .pf-app:not(.ui-phase1) :is(.input, input, select, textarea) { font-size: 15.5px; min-height: 46px; }
  .pf-app:not(.ui-phase1) .chip { font-size: 14.5px; min-height: 40px; }
  .pf-app:not(.ui-phase1) .screen table { font-size: 15.5px; }
  .pf-app:not(.ui-phase1) .screen thead th { font-size: 14px; }

  /* Figures are what the owner actually reads: prices, quantities and totals line up and carry weight. */
  .pf-app:not(.ui-phase1) :is(.product-price, .prod-price, .price, .amount, .money, .qty, .stock-qty, [data-money], [data-qty]) {
    font-size: 16.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .pf-app:not(.ui-phase1) :is(.list-item, .product-card, .prod-card, .card) :is(b, strong) { font-variant-numeric: tabular-nums; }

  /* A product card is a card, not a stamp: fewer per row, each one legible from across the counter. */
  .pf-app:not(.ui-phase1) #posProductGrid { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 14px; }
  .pf-app:not(.ui-phase1) .pos-product-card { padding: 14px; }
  .pf-app:not(.ui-phase1) .pos-product-card-name { font-size: 16px; line-height: 1.4; font-weight: 750; }
  .pf-app:not(.ui-phase1) .pos-product-card-price { font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums; }
  .pf-app:not(.ui-phase1) .pos-product-card-stock { font-size: 14px; }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) :is(.list-item, .product-card) { padding: 14px 16px; }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) :is(.list-item, .product-card) :is(h3, .item-title, b) { font-size: 16.5px; }

  /* The cart, where a mistake costs money. */
  .pf-app:not(.ui-phase1) :is(#cartItems, .cart-item) { font-size: 16px; }
  .pf-app:not(.ui-phase1) :is(#cartTotal, .cart-total, #posTotal) { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
}
@media (min-width: 1600px) {
  .pf-app:not(.ui-phase1) .screen { font-size: 17px; }
  .pf-app:not(.ui-phase1) .stat-value, .pf-app:not(.ui-phase1) .stats-grid .stat-value { font-size: 33px !important; }
  .pf-app:not(.ui-phase1) :is(#netProfitCard .stat-value, #kpiNetProfit) { font-size: 44px !important; }
  .pf-app:not(.ui-phase1) #posProductGrid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
}

/* The lines a shopkeeper actually reads on a list row: the name, then the two prices and what is left in stock.
   They are written as one muted subtitle, which on a monitor was smaller than the eye wants from a metre away. */
@media (min-width: 1024px) {
  .pf-app:not(.ui-phase1) .list-item-title { font-size: 17px; font-weight: 800; line-height: 1.35; }
  .pf-app:not(.ui-phase1) .list-item-subtitle { font-size: 15px; line-height: 1.6; gap: 14px; }
  .pf-app:not(.ui-phase1) .list-item-subtitle span { font-variant-numeric: tabular-nums; }
  .pf-app:not(.ui-phase1) .list-item { padding: 14px 16px; gap: 14px; }
  .pf-app:not(.ui-phase1) .badge { font-size: 13px; padding: 4px 10px; }
}
@media (min-width: 1600px) {
  .pf-app:not(.ui-phase1) .list-item-title { font-size: 18px; }
  .pf-app:not(.ui-phase1) .list-item-subtitle { font-size: 15.5px; }
}

/* ============================== fewer cards, read at a glance ==============================
 * A wall of six small tiles is not a catalogue, it is a mosaic: the owner leans in to read a price. On a monitor
 * the product surfaces now hold FOUR cards to a row at 1440px (two at 1024, five on a very wide screen), each one
 * large enough that the name, the price and what is left in stock can be read across the counter.
 */
@media (min-width: 1024px) {
  .pf-app:not(.ui-phase1) #posProductGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1280px) {
  .pf-app:not(.ui-phase1) #posProductGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  /* the size most desks actually are: four cards, comfortably */
  .pf-app:not(.ui-phase1) #posProductGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .pf-app:not(.ui-phase1) .pos-product-card { padding: 18px 16px; min-height: 132px; }
  .pf-app:not(.ui-phase1) .pos-product-card-name { font-size: 17.5px; font-weight: 800; }
  .pf-app:not(.ui-phase1) .pos-product-card-price { font-size: 20px; font-weight: 900; }
  .pf-app:not(.ui-phase1) .pos-product-card-stock { font-size: 15px; font-weight: 700; }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) .list-item { padding: 18px; }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) .list-item-title { font-size: 18px; }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) .list-item-subtitle { font-size: 15.5px; }
}
@media (min-width: 1800px) {
  .pf-app:not(.ui-phase1) #posProductGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   The size the owner chose, on a desk
   ==========================================================================
   The control at the top of the product screens writes --pf-card-scale on the body. On a phone
   the grid simply reflows; on a desk the column counts above were chosen deliberately, so the
   chosen size shifts them by a column instead of throwing them away. The writing on a card
   follows the same scale, so name and price grow together with the photo. */
@media (min-width: 1000px) {
  .pf-app:not(.ui-phase1) .pos-product-card-name { font-size: calc(16px * var(--pf-card-scale, 1)); }
  .pf-app:not(.ui-phase1) .pos-product-card-price { font-size: calc(17px * var(--pf-card-scale, 1)); }
  .pf-app:not(.ui-phase1) .pos-product-card-stock { font-size: calc(14px * var(--pf-card-scale, 1)); }
}
@media (min-width: 1400px) {
  .pf-app:not(.ui-phase1) .pos-product-card-name { font-size: calc(17.5px * var(--pf-card-scale, 1)); }
  .pf-app:not(.ui-phase1) .pos-product-card-price { font-size: calc(20px * var(--pf-card-scale, 1)); }
  .pf-app:not(.ui-phase1) .pos-product-card-stock { font-size: calc(15px * var(--pf-card-scale, 1)); }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) .list-item-title { font-size: calc(18px * var(--pf-card-scale, 1)); }
  .pf-app:not(.ui-phase1) :is(#produitsList, #stockList) .list-item-subtitle { font-size: calc(15.5px * var(--pf-card-scale, 1)); }

  body.pf-app[data-pf-size="sm"]:not(.ui-phase1) :is(#posProductGrid, #produitsList, #stockList) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.pf-app[data-pf-size="lg"]:not(.ui-phase1) :is(#posProductGrid, #produitsList, #stockList) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.pf-app[data-pf-size="xl"]:not(.ui-phase1) :is(#posProductGrid, #produitsList, #stockList) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
  body.pf-app[data-pf-size="sm"]:not(.ui-phase1) :is(#posProductGrid, #produitsList, #stockList) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.pf-app[data-pf-size="lg"]:not(.ui-phase1) :is(#posProductGrid, #produitsList, #stockList) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.pf-app[data-pf-size="xl"]:not(.ui-phase1) :is(#posProductGrid, #produitsList, #stockList) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   The dashboard as one screen, not three stacked strips
   ==========================================================================
   The tabs sat alone on a row of their own with most of a monitor's width empty beside them, and the period and
   the two report actions formed a second strip below. On a desk they are one toolbar: which view, over which
   period, and what to do with it. The report page's own children join the screen's grid so that row can exist
   at all — nothing is reparented, and the phone layout below 1280px is untouched. */
@media (min-width: 1280px) {
  .pf-app:not(.ui-phase1) #screen-reports.active {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start;
  }
  .pf-app:not(.ui-phase1) #screen-reports.active > .tab-content.active { display: contents; }
  .pf-app:not(.ui-phase1) #screen-reports.active > * { grid-column: 1 / -1; margin: 0; }
  /* row one: the view, the period, the actions */
  .pf-app:not(.ui-phase1) #screen-reports.active > .tabs { grid-column: span 3; margin: 0; align-self: center; }
  .pf-app:not(.ui-phase1) #tab-rapports > .filter-chips { grid-column: span 5; align-self: center; }
  .pf-app:not(.ui-phase1) #tab-rapports > #downloadReportPdfBtn { grid-column: span 2; margin: 0 !important; width: auto !important; }
  .pf-app:not(.ui-phase1) #tab-rapports > #strictAuditBtn { grid-column: span 2; margin: 0 !important; width: auto !important; }
  /* the custom-date control belongs with the period that opens it */
  .pf-app:not(.ui-phase1) #tab-rapports > #customDateRange { grid-column: 1 / -1; margin: 0 !important; }
  /* the register view keeps its own full-width shape inside the same grid */
  .pf-app:not(.ui-phase1) #tab-historique > * { grid-column: 1 / -1; margin: 0; }
  .pf-app:not(.ui-phase1) #tab-historique > .filter-chips { grid-column: span 9; align-self: center; }
  .pf-app:not(.ui-phase1) #tab-historique > #historyCustomDateRange { grid-column: 1 / -1; margin: 0 !important; }
}
  /* Only the breakdown belongs beside the headline figure. Every other card was given its seven columns too,
     so each one below sat with five columns of nothing next to it — the empty right-hand band on the screen. */
@media (min-width: 1280px) {
  .pf-app:not(.ui-phase1) #tab-rapports > .card:not(#netProfitCard):not(#phantomSimCard) { grid-column: 1 / -1; }
  .pf-app:not(.ui-phase1) #tab-rapports > .card:has(#kpiProfit):not(#netProfitCard):not(#phantomSimCard) { grid-column: span 7; }
  /* the two report actions read as one compact group, whatever the language does to their labels */
  .pf-app:not(.ui-phase1) #tab-rapports > :is(#downloadReportPdfBtn, #strictAuditBtn) {
    align-self: center; font-size: 13.5px !important; padding: 11px 12px !important; white-space: normal;
  }
}

/* ==========================================================================
   The till, on a desk
   ==========================================================================
   Selling on a monitor was a single long column: the catalogue, then the basket, then the discount, then the
   total, then the buttons — so finishing a sale meant scrolling past everything to reach the one button that
   matters. A till does not work that way. The screen is split and fixed to the window: the catalogue scrolls
   on its own, and the ticket beside it keeps its lines scrolling inside it with the total and the pay button
   pinned to the bottom, always in reach, never chased. Below 1100px nothing here applies and the phone keeps
   the layout it was given. */
@media (min-width: 1100px) {
  .pf-app:not(.ui-phase1) #screen-pos.active { padding-block-end: 16px; }
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(380px, 28vw, 460px);
    grid-template-rows: auto auto auto minmax(170px, 1fr) auto auto;
    gap: 12px 20px;
    height: calc(100dvh - 150px);
    min-height: 520px;
    align-items: start;
  }
  /* the catalogue side: what the seller picks from */
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container > :is(#posUploadBtn, #posUploadStatus) { grid-column: 1; grid-row: 1; margin: 0 !important; }
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container > #posUploadStatus { grid-row: 2; }
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container > div:not([id]):not(.pf-size-control) { grid-column: 1; grid-row: 2; }
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container > .pf-size-control { grid-column: 1; grid-row: 3; margin: 0; }
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container > #posProductGrid {
    grid-column: 1; grid-row: 4 / -1; align-self: stretch; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding-inline-end: 6px; align-content: start;
    /* Each row as tall as its cards' content. This grid has a fixed height and scrolls, so «auto» rows were held at
       the cards' min-height (132px) and an enlarged display size wrote the price and stock below the card. */
    grid-auto-rows: max-content;
  }
  /* the ticket side: one card, top to bottom, that never leaves the screen */
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container > #posCartSection {
    grid-column: 2; grid-row: 1 / 5; width: auto; position: static;
    align-self: stretch; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px 16px 0 0;
    padding: 14px 14px 4px; margin: 0;
  }
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container > #cartSummaryWrap {
    grid-column: 2; grid-row: 5; margin: 0; border-radius: 0;
    border: 1px solid var(--border); border-block: 0; background: var(--bg-2);
    /* the date, the discount and the figures are a lot of block; it scrolls inside itself so the lines above
       and the button below both keep their room. */
    max-height: 32vh; overflow-y: auto; overscroll-behavior: contain;
  }
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container > #cartActions {
    grid-column: 2; grid-row: 6; margin: 0; position: static; box-shadow: none;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--bg-2); border: 1px solid var(--border); border-block-start: 0;
    border-radius: 0 0 16px 16px; padding: 12px 14px;
  }
  .pf-app:not(.ui-phase1) #screen-pos.active #cartActions .btn { width: 100%; min-height: 46px; }
  /* the one button that ends a sale reads like it */
  .pf-app:not(.ui-phase1) #screen-pos.active #cartActions .btn:last-child { min-height: 58px; font-size: 17px; font-weight: 900; }
  /* the total is the number of the screen */
  .pf-app:not(.ui-phase1) #screen-pos.active #cartSummaryWrap .summary-row.total { font-size: 20px; }
  .pf-app:not(.ui-phase1) #screen-pos.active #cartSummaryWrap .summary-row.total .val { font-size: 30px; font-variant-numeric: tabular-nums; }
  /* an empty basket leaves the catalogue the width, as before */
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container:not(:has(#posCartSection[style*="block"])) { grid-template-columns: minmax(0, 1fr); }
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container:not(:has(#posCartSection[style*="block"])) > #posProductGrid { grid-row: 4 / -1; }
}
@media (min-width: 1100px) {
  /* Whatever else scrolls inside the ticket, the figure the seller reads out loud does not leave the screen. */
  .pf-app:not(.ui-phase1) #screen-pos.active #cartSummaryWrap .summary-row.total {
    position: sticky; inset-block-end: 0; background: var(--bg-2);
    margin-block-start: 8px; padding-block: 10px; border-block-start: 1px dashed var(--border);
  }
}
@media (min-width: 1100px) {
  /* The ticket's figures were being cut: the last lines — the capital and the profit on the goods — sat under
     the buttons because the block was capped without room to breathe. It scrolls to its own end now, and the
     two figures the owner reads last are never hidden behind the action below them. */
  .pf-app:not(.ui-phase1) #screen-pos.active #cartSummaryWrap { max-height: 38vh; padding-block-end: 10px; }
  .pf-app:not(.ui-phase1) #screen-pos.active .pos-container { grid-template-rows: auto auto auto minmax(140px, 1fr) auto auto; }
  /* The search field and the barcode button share the row without one sitting on top of the other. */
  .pf-app:not(.ui-phase1) #screen-pos.active .search-bar { display: flex; gap: 8px; align-items: center; }
  .pf-app:not(.ui-phase1) #screen-pos.active .search-bar > .input { flex: 1 1 auto; min-width: 0; }
  .pf-app:not(.ui-phase1) #screen-pos.active .search-bar > .btn { flex: 0 0 44px; }
}

/* A sale that was started and neither finished nor cancelled: the till entry stops being an invitation and
   becomes a reminder — the same glow, in red, beating faster until the basket is dealt with. */
.pf-app.pf-sale-pending :is(.ds-nav-item, .nav-btn, .more-menu-item)[data-screen="pos"] {
  border-color: rgba(220, 38, 38, .75);
  animation: pf-till-pending 1.1s ease-in-out infinite;
}
@keyframes pf-till-pending {
  0%, 100% { box-shadow: 0 0 0 1px rgba(220, 38, 38, .30), 0 0 10px rgba(220, 38, 38, .30); }
  50%      { box-shadow: 0 0 0 2px rgba(220, 38, 38, .55), 0 0 22px rgba(220, 38, 38, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-app.pf-sale-pending :is(.ds-nav-item, .nav-btn, .more-menu-item)[data-screen="pos"] { animation: none; box-shadow: 0 0 0 2px rgba(220, 38, 38, .55); }
}