/*
 * AQUILA POS SALES OVERVIEW
 * R5.7.9C-R2 PHOTO PARITY
 * Desktop + Tablet only.
 * Mobile untouched.
 */

@media (min-width: 768px) {

  .pos-overview {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    gap: 10px !important;
    padding: 8px 10px 18px !important;
    background: #f7f9fc !important;
  }

  .pos-overview-header {
    margin: 0 !important;
    padding: 2px 2px 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .pos-overview-header h1 {
    margin: 0 !important;
    color: #182d4b !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  .pos-overview-header p,
  .pos-overview-header .pos-overview-eyebrow {
    display: none !important;
  }

  .pos-overview-modules {
    order: 1 !important;
    margin: 0 !important;
  }

  .pos-overview-modules > .pos-overview-section-heading {
    display: none !important;
  }

  .pos-overview-module-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .pos-overview-module-card {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    border: 1px solid #dfe5ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(20, 41, 72, .04) !important;
  }

  .pos-overview-module-card strong {
    color: #243955 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
  }

  .pos-overview-module-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  /* Stronger hide for submenu numbers */
  .pos-overview-module-index,
  .pos-overview-modules [class*="module-index"],
  .pos-overview-modules [class*="step-number"],
  .pos-overview-modules [class*="number-chip"],
  .pos-overview-modules [class*="module-step"],
  .pos-overview-modules [data-step-number],
  .pos-overview-modules [data-module-index] {
    display: none !important;
  }

  .pos-overview-performance {
    display: none !important;
  }

  .pos-analytics-command-centre {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .pos-analytics-command-centre > .pos-overview-section-heading {
    display: none !important;
  }

  .pos-analytics-filter-card {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: end !important;
    margin: 0 0 8px !important;
    padding: 8px !important;
    border: 1px solid #dfe5ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 7px rgba(20, 41, 72, .035) !important;
  }

  .pos-analytics-filter-card label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .pos-analytics-filter-card small {
    color: #6d7889 !important;
    font-size: 10px !important;
    font-weight: 750 !important;
  }

  .pos-analytics-filter-card input,
  .pos-analytics-filter-card select,
  .pos-analytics-filter-card button,
  .pos-analytics-filter-card label > span {
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border: 1px solid #d8e0eb !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #30445f !important;
    font-size: 11px !important;
  }

  .pos-analytics-filter-card label > span {
    display: flex !important;
    align-items: center !important;
    padding: 0 9px !important;
  }

  .pos-analytics-filter-actions {
    display: flex !important;
    gap: 6px !important;
    align-items: end !important;
  }

  .pos-analytics-filter-actions button:last-child,
  .pos-analytics-filter-card .primary-action {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  .pos-analytics-kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 0 8px !important;
  }

  .pos-analytics-kpi-strip article {
    min-width: 0 !important;
    min-height: 82px !important;
    padding: 10px 11px !important;
    border: 1px solid #dfe5ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 7px rgba(20, 41, 72, .035) !important;
  }

  .pos-analytics-kpi-strip article span {
    color: #69768a !important;
    font-size: 10px !important;
    font-weight: 750 !important;
  }

  .pos-analytics-kpi-strip article strong {
    margin-top: 4px !important;
    color: #172e50 !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .pos-analytics-kpi-strip article small {
    color: #7e8999 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .pos-analytics-dashboard-grid,
  .pos-analytics-dashboard-grid-all {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 0 0 8px !important;
  }

  .pos-analytics-dashboard-grid.middle,
  .pos-analytics-dashboard-grid.bottom {
    display: contents !important;
  }

  .pos-analytics-card {
    min-width: 0 !important;
    min-height: 225px !important;
    padding: 10px !important;
    overflow: auto !important;
    border: 1px solid #dfe5ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 7px rgba(20, 41, 72, .035) !important;
  }

  .pos-analytics-card > header {
    min-height: 34px !important;
    margin: 0 0 7px !important;
    padding: 0 0 7px !important;
    border-bottom: 1px solid #edf0f4 !important;
  }

  .pos-analytics-card > header strong {
    color: #182f50 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  .pos-analytics-week-select {
    height: 29px !important;
    min-height: 29px !important;
    max-width: 120px !important;
    border: 1px solid #dbe2eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #596980 !important;
    font-size: 10px !important;
  }

  .pos-analytics-card table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .pos-analytics-card th {
    padding: 7px 6px !important;
    border-bottom: 1px solid #e5e9ef !important;
    background: #f8fafc !important;
    color: #69758a !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .pos-analytics-card td {
    padding: 7px 6px !important;
    border-bottom: 1px solid #edf1f5 !important;
    color: #354861 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    white-space: normal !important;
  }

  .pos-analytics-card td.good {
    color: #128258 !important;
    font-weight: 750 !important;
  }

  .pos-analytics-card td.bad {
    color: #d65454 !important;
    font-weight: 750 !important;
  }

  .pos-analytics-card.session-analytics {
    overflow-x: auto !important;
  }

  .pos-analytics-card.session-analytics table {
    min-width: 650px !important;
  }

  .pos-analytics-card.top-products td:nth-child(2) {
    min-width: 150px !important;
    color: #263d5b !important;
    font-weight: 700 !important;
  }

  .pos-analytics-payment-layout {
    display: grid !important;
    grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .pos-analytics-donut {
    width: 110px !important;
    height: 110px !important;
    margin: auto !important;
  }

  .pos-analytics-list {
    gap: 6px !important;
  }

  .pos-analytics-list > * {
    padding: 7px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }
}

@media (min-width: 1280px) {

  .pos-overview-module-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .pos-analytics-filter-card {
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto !important;
  }

  .pos-analytics-kpi-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .pos-analytics-dashboard-grid-all {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  .pos-analytics-dashboard-grid-all .sales-trend { grid-column: span 5 !important; }
  .pos-analytics-dashboard-grid-all .payment-mix { grid-column: span 3 !important; }
  .pos-analytics-dashboard-grid-all .cashier-performance { grid-column: span 4 !important; }
  .pos-analytics-dashboard-grid-all .session-analytics { grid-column: span 5 !important; }
  .pos-analytics-dashboard-grid-all .top-products { grid-column: span 4 !important; }
  .pos-analytics-dashboard-grid-all .returns-exceptions { grid-column: span 3 !important; }
  .pos-analytics-dashboard-grid-all .customer-credit,
  .pos-analytics-dashboard-grid-all .insurance-summary,
  .pos-analytics-dashboard-grid-all .ai-insight,
  .pos-analytics-dashboard-grid-all .recommended-actions { grid-column: span 3 !important; }
}

/* ==========================================================
   AQUILA POS & SALES OVERVIEW R5.7.9C-R3
   MINOR PRESENTATION REFINEMENT
   Desktop + Tablet only.
   ========================================================== */

@media (min-width: 768px) {

  /* --------------------------------------------------------
     1. SLIGHTLY SMALLER TYPOGRAPHY
     -------------------------------------------------------- */

  .pos-overview-header h1,
  #real-pos-sales-analytics-dashboard h1 {
    font-size: 16px !important;
  }

  .pos-overview-module-card strong,
  #real-pos-sales-analytics-dashboard .rpsa-header strong {
    font-size: 10px !important;
  }

  .pos-analytics-filter-card small,
  #real-pos-sales-analytics-dashboard .rpsa-filter-card small {
    font-size: 9px !important;
  }

  .pos-analytics-filter-card input,
  .pos-analytics-filter-card select,
  .pos-analytics-filter-card button,
  .pos-analytics-filter-card label > span,
  #real-pos-sales-analytics-dashboard .rpsa-filter-card input,
  #real-pos-sales-analytics-dashboard .rpsa-filter-card select,
  #real-pos-sales-analytics-dashboard .rpsa-filter-card button {
    font-size: 10px !important;
  }

  .pos-analytics-kpi-strip article span,
  #real-pos-sales-analytics-dashboard .rpsa-kpis article span,
  #real-pos-sales-analytics-dashboard .rpsa-kpis article small {
    font-size: 9px !important;
  }

  .pos-analytics-kpi-strip article strong,
  #real-pos-sales-analytics-dashboard .rpsa-kpis article strong {
    font-size: 15px !important;
  }

  .pos-analytics-kpi-strip article small {
    font-size: 8px !important;
  }

  .pos-analytics-card > header strong,
  #real-pos-sales-analytics-dashboard .rpsa-card > header strong {
    font-size: 11px !important;
  }

  .pos-analytics-card th,
  #real-pos-sales-analytics-dashboard .rpsa-card th {
    font-size: 8.8px !important;
  }

  .pos-analytics-card td,
  #real-pos-sales-analytics-dashboard .rpsa-card td {
    font-size: 9px !important;
  }

  .pos-analytics-list > *,
  #real-pos-sales-analytics-dashboard .rpsa-insight-list,
  #real-pos-sales-analytics-dashboard .rpsa-actions-list,
  #real-pos-sales-analytics-dashboard .rpsa-exception-list {
    font-size: 9px !important;
  }

  /* --------------------------------------------------------
     2. PAYMENT MIX
     Row 1 = donut/pie
     Row 2 = payment values
     One-column parent layout
     -------------------------------------------------------- */

  .pos-analytics-payment-layout,
  #real-pos-sales-analytics-dashboard .rpsa-payment-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    align-items: start !important;
    justify-items: stretch !important;
  }

  .pos-analytics-donut,
  #real-pos-sales-analytics-dashboard .rpsa-donut {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    margin: 2px auto 4px !important;
  }

  .pos-analytics-payment-bars,
  #real-pos-sales-analytics-dashboard .rpsa-payment-bars {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .pos-analytics-payment-bars > div,
  #real-pos-sales-analytics-dashboard .rpsa-payment-bars > div {
    display: grid !important;
    grid-template-columns:
      minmax(70px, .9fr)
      minmax(90px, 1.1fr)
      auto !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 3px 0 !important;
  }

  .pos-analytics-payment-bars span,
  .pos-analytics-payment-bars strong,
  #real-pos-sales-analytics-dashboard .rpsa-payment-bars span,
  #real-pos-sales-analytics-dashboard .rpsa-payment-bars strong {
    font-size: 9px !important;
  }

  /*
   * Keep the Payment Mix card comfortable after changing
   * from side-by-side to vertical.
   */
  .pos-analytics-card.payment-mix,
  #real-pos-sales-analytics-dashboard .rpsa-payment-mix {
    min-height: 260px !important;
  }
}

/*
 * No rule below 768px.
 * Mobile remains exactly under the existing mobile design.
 */

/* ==========================================================
   AQUILA POS & SALES OVERVIEW R5.7.9C-R4
   Requested typography only, desktop/tablet >= 768px
   ========================================================== */
@media (min-width: 768px) {
  .pos-analytics-card.sales-trend header strong,
  .pos-analytics-card.session-analytics header strong {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .pos-analytics-card.sales-trend .pos-analytics-bar-chart i strong {
    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

  .pos-analytics-card.sales-trend .pos-analytics-bar-chart i small {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  .pos-analytics-card.session-analytics th {
    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  .pos-analytics-card.session-analytics td {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .aquila-pos-sales-live-status {
    grid-column: 1 / -1 !important;
    padding: 5px 8px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    border-top: 1px solid rgba(15, 35, 70, .08) !important;
  }

  .aquila-pos-sales-live-status[data-tone="good"] {
    font-weight: 700 !important;
  }

  .aquila-pos-sales-live-status[data-tone="bad"] {
    font-weight: 700 !important;
  }

  .aquila-pos-empty {
    font-size: 9px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }
}

/* No R4 rule exists below 768px. Mobile remains untouched. */

/* ==========================================================
   AQUILA R5.7.9C-R5-R2-R2
   TARGETED POS PRESENTATION
   >= 768px ONLY
   ========================================================== */

@media (min-width: 768px) {

  /* --------------------------------------------------------
     Remaining cards use ACTUAL Payment Mix computed font.
     -------------------------------------------------------- */

  #real-pos-sales-analytics-dashboard
    [data-r579-payment-font="1"]
    header strong,

  .pos-analytics-command-centre
    [data-r579-payment-font="1"]
    header strong {
    font-size:
      var(
        --r579-payment-title-font,
        11px
      ) !important;

    line-height: 1.15 !important;
  }

  #real-pos-sales-analytics-dashboard
    [data-r579-payment-font="1"]
    :is(
      th,
      td,
      span,
      small,
      li,
      p
    ),

  .pos-analytics-command-centre
    [data-r579-payment-font="1"]
    :is(
      th,
      td,
      span,
      small,
      li,
      p
    ) {
    font-size:
      var(
        --r579-payment-body-font,
        9px
      ) !important;

    line-height: 1.16 !important;
  }

  /* --------------------------------------------------------
     SALES TREND DATA LABELS
     Value text itself is untouched.
     -------------------------------------------------------- */

  [data-r579-sales-trend="1"]
    [data-r579-trend-value="1"] {
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;

    translate:
      0
      calc(
        var(
          --r579-trend-row,
          0
        )
        * -9px
      ) !important;
  }

  [data-r579-sales-trend="1"] {
    padding-top: 2px !important;
  }

  /* --------------------------------------------------------
     Sessions / Products / Returns same fixed height.
     Five normal rows visible.
     More rows scroll within card.
     -------------------------------------------------------- */

  [data-r579-fixed-card="1"] {
    height: 248px !important;
    min-height: 248px !important;
    max-height: 248px !important;
    overflow: hidden !important;
  }

  [data-r579-scroll] {
    height: 190px !important;
    max-height: 190px !important;

    overflow-y: auto !important;
    overflow-x: auto !important;

    scrollbar-gutter: stable !important;

    -webkit-overflow-scrolling:
      touch !important;
  }

  [data-r579-scroll] table {
    margin: 0 !important;
  }

  [data-r579-scroll] thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: #f8fafc !important;
  }

  [data-r579-scroll] tbody tr {
    height: 30px !important;
  }

  /* --------------------------------------------------------
     POS SESSION ANALYTICS
     Horizontal scrolling.
     NO wrapping except actual Opened By column.
     -------------------------------------------------------- */

  [data-r579-scroll="sessions"] {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  [data-r579-scroll="sessions"]
    table {
    width: max-content !important;
    min-width: 980px !important;
    table-layout: auto !important;
  }

  [data-r579-scroll="sessions"]
    :is(th, td) {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: middle !important;
  }

  [data-r579-scroll="sessions"]
    [data-r579-opened-by="1"] {
    width: 160px !important;
    min-width: 140px !important;
    max-width: 180px !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* --------------------------------------------------------
     TOP PRODUCTS
     -------------------------------------------------------- */

  [data-r579-scroll="products"]
    table {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* --------------------------------------------------------
     RETURNS & EXCEPTIONS
     -------------------------------------------------------- */

  [data-r579-returns-scroll="1"] {
    height: 190px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
  }

  /* --------------------------------------------------------
     STAFF BRANCH
     Do not allow the V3 action to float under BODY.
     Once moved into User & Security it becomes visible.
     -------------------------------------------------------- */

  body >
    [data-ubuzima-runtime-extension="branch-assignment"] {
    display: none !important;
  }

  [data-r579-branch-host="1"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;

    margin:
      0
      0
      12px !important;
  }

  [data-r579-branch-host="1"]
    [data-ubuzima-runtime-extension="branch-assignment"] {
    display: inline-flex !important;

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: auto !important;

    margin: 0 !important;

    box-shadow: none !important;
  }
}

/*
 * No <768px rules.
 * Existing mobile UI is untouched.
 */

/* ==========================================================
   POS & SALES OVERVIEW
   FINAL THREE-CARD TYPOGRAPHY CLOSURE
   Desktop + Tablet only
   ========================================================== */

@media (min-width: 768px) {

  /*
   * CASHIER PERFORMANCE
   * TOP PRODUCTS BY REVENUE
   * RETURNS & EXCEPTIONS
   *
   * Payment Mix compact scale:
   * title = 11px
   * content = 9px
   */

  #real-pos-sales-analytics-dashboard
    .rpsa-cashier-performance,

  #real-pos-sales-analytics-dashboard
    .rpsa-top-products,

  #real-pos-sales-analytics-dashboard
    .rpsa-returns {
    font-size: 9px !important;
  }

  #real-pos-sales-analytics-dashboard
    .rpsa-cashier-performance
    *,

  #real-pos-sales-analytics-dashboard
    .rpsa-top-products
    *,

  #real-pos-sales-analytics-dashboard
    .rpsa-returns
    * {
    font-size: 9px !important;
    line-height: 1.16 !important;
  }

  /*
   * Restore only card heading to Payment Mix heading scale.
   */

  #real-pos-sales-analytics-dashboard
    .rpsa-cashier-performance
    > header,

  #real-pos-sales-analytics-dashboard
    .rpsa-cashier-performance
    > header
    *,

  #real-pos-sales-analytics-dashboard
    .rpsa-top-products
    > header,

  #real-pos-sales-analytics-dashboard
    .rpsa-top-products
    > header
    *,

  #real-pos-sales-analytics-dashboard
    .rpsa-returns
    > header,

  #real-pos-sales-analytics-dashboard
    .rpsa-returns
    > header
    * {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
}

/*
 * No mobile change.
 */

/* ==========================================================
   FINAL CLOSURE
   Cashier Performance + Top Products only
   Desktop / Tablet
   ========================================================== */

@media (min-width: 768px) {

  /*
   * CASHIER PERFORMANCE
   * Previous effective scale was about 11px / 9px.
   * This is intentionally and visibly smaller.
   */

  #real-pos-sales-analytics-dashboard
    article.rpsa-card.rpsa-cashier-performance
    > header
    > strong,

  .pos-analytics-command-centre
    .pos-analytics-card.cashier-performance
    > header
    > strong {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
  }

  #real-pos-sales-analytics-dashboard
    article.rpsa-card.rpsa-cashier-performance
    :is(
      th,
      td,
      select,
      option,
      button,
      span,
      small
    ),

  .pos-analytics-command-centre
    .pos-analytics-card.cashier-performance
    :is(
      th,
      td,
      select,
      option,
      button,
      span,
      small
    ) {
    font-size: 8px !important;
    line-height: 1.12 !important;
  }

  /*
   * TOP PRODUCTS BY REVENUE
   */

  #real-pos-sales-analytics-dashboard
    article.rpsa-card.rpsa-top-products
    > header
    > strong,

  .pos-analytics-command-centre
    .pos-analytics-card.top-products
    > header
    > strong {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
  }

  #real-pos-sales-analytics-dashboard
    article.rpsa-card.rpsa-top-products
    :is(
      th,
      td,
      button,
      span,
      small
    ),

  .pos-analytics-command-centre
    .pos-analytics-card.top-products
    :is(
      th,
      td,
      button,
      span,
      small
    ) {
    font-size: 8px !important;
    line-height: 1.12 !important;
  }
}