/* TAIF V5 — Currency Management Mobile Records Table V2.6
   Base: V2.1 FIX (approved reference).
   Goal: on mobile currency-management records, remove the pair column and the middle-price column,
   then rebalance the row so remaining fields stay in one horizontal table with fixed-size pills.
   Also adds slight spacing between the four price pills and fixes header-title alignment over their real columns.
   Scope: إدارة العملات في وضع الموبايل فقط.
*/

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-layout{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-table,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-table--split-scroll{
    --cm-mobile-table-width: 596px;
    --cm-mobile-grid:
      18px 34px 46px 124px
      62px 62px 62px 62px 126px;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:thin !important;
    padding-bottom:5px !important;
    border-radius:10px !important;
    background:transparent !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-scroll,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-scroll-inner,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row{
    width:var(--cm-mobile-table-width) !important;
    min-width:var(--cm-mobile-table-width) !important;
    max-width:none !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-scroll,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-scroll--split-scroll{
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
    padding:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-scroll-inner,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-scroll-inner--split-scroll{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    padding-top:4px !important;
    overflow:visible !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow--split-scroll{
    --cm-mobile-head-grid: 18px 34px 42px 108px 62px 62px 62px 62px 146px;
    display:grid !important;
    grid-template-columns:var(--cm-mobile-head-grid) !important;
    position:sticky !important;
    top:0 !important;
    z-index:6 !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    border-radius:8px 8px 0 0 !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#edf2f8 0%,#dfe7f1 100%) !important;
    border:1px solid rgba(148,163,184,.26) !important;
    box-shadow:none !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > div{
    min-width:0 !important;
    min-height:30px !important;
    height:30px !important;
    padding:0 4px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:9.2px !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    border-inline-start:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > div:first-child{
    border-inline-start:0 !important;
  }


  /* Mobile only: hide the counterpart/pricing-currency button from currency management topbar */
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-toolbar-counterpart,
  body.taif-mobile-mode .panel[data-view="currency-management"] [data-currency-management-counterpart-picker],
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-btn--counterpart{
    display:none !important;
  }


  /* Hide removed mobile-only columns: أزواج العملات + السعر الوسطي */
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(5),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(8),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(5),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(8){
    display:none !important;
  }

  /* Explicit column mapping so the gray header titles sit exactly above their real columns */
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(1),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(1){ grid-column:1 !important; }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(2),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(2){ grid-column:2 !important; }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(3),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(3){ grid-column:3 !important; }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(4),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(4){ grid-column:4 !important; }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(6),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(6){ grid-column:5 !important; }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(7),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(7){ grid-column:6 !important; }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(9),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(9){ grid-column:7 !important; }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(10),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(10){ grid-column:8 !important; }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(11),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > :nth-child(11){ grid-column:9 !important; }

  /* Fine tune the gray header labels so each title feels centered over its own column */
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(2),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(3),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(4),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(11){
    padding-inline:3px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(6),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(7),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(9),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(10){
    padding-inline:2px !important;
    font-size:8.55px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(6) *,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(7) *,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(9) *,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(10) *{
    max-width:100% !important;
  }

  /* Main fix: completely cancel the stacked mobile-card placement from 31-mobile-app-mode.css */
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row--usd,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row--selected{
    display:grid !important;
    grid-template-columns:var(--cm-mobile-grid) !important;
    grid-template-areas:none !important;
    grid-auto-flow:column !important;
    gap:0 !important;
    min-height:38px !important;
    height:38px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:8px !important;
    border:1px solid rgba(37,99,235,.10) !important;
    background:#fff !important;
    box-shadow:0 4px 12px rgba(15,23,42,.055) !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row--usd{
    background:linear-gradient(180deg,#f7fbff 0%,#ffffff 100%) !important;
    border-color:rgba(37,99,235,.18) !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > *,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-state-slot,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-flag,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-code-pill,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-name-col,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-pair-col,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-actions{
    grid-area:auto !important;
    grid-column:auto !important;
    grid-row:auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    min-height:38px !important;
    height:38px !important;
    margin:0 !important;
    padding:3px 4px !important;
    border-radius:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-content:center !important;
    text-align:center !important;
    background:transparent !important;
    border:0 !important;
    border-inline-start:1px solid rgba(148,163,184,.16) !important;
    box-shadow:none !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
    line-height:1.15 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > *:first-child{
    border-inline-start:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > *::before,
  body.taif-mobile-mode .panel[data-view="currency-management"] :where(.currency-management-code-pill, .currency-management-name-col, .currency-management-pair-col, .currency-management-num-pill)::before{
    display:none !important;
    content:none !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-state-slot{
    padding:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-state-dot{
    width:11px !important;
    height:11px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-flag{
    padding:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-flag-image{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-code-pill{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    padding:0 4px !important;
    border-radius:7px !important;
    border:1px solid rgba(15,23,42,.10) !important;
    background:linear-gradient(180deg,#f8fafc,#eef2f7) !important;
    color:#1e293b !important;
    font-size:10px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-name-col{
    justify-content:center !important;
    align-items:center !important;
    padding-inline:6px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-name{
    width:100% !important;
    max-width:100% !important;
    color:#0f172a !important;
    font-size:10px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    text-align:right !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-pair-col{
    display:none !important;
    padding-inline:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-pair-badge{
    width:100% !important;
    max-width:100% !important;
    min-height:24px !important;
    height:24px !important;
    padding:0 4px !important;
    border-radius:8px !important;
    font-size:9.3px !important;
    font-weight:900 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    padding:0 4px !important;
    border-radius:7px !important;
    border:1px solid rgba(148,163,184,.18) !important;
    background:linear-gradient(180deg,#ffffff,#f8fafc) !important;
    box-shadow:none !important;
    font-size:9.7px !important;
    font-weight:900 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--buy,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--ratio-buy{
    color:#15803d !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--sell,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--ratio-sell{
    color:#dc2626 !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--mid{
    display:none !important;
    color:#1d4ed8 !important;
  }

  /* Add slight visual gaps so the four buy/sell pills are not glued together */
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--buy,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--sell,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--ratio-buy,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--ratio-sell{
    width:calc(100% - 6px) !important;
    min-width:calc(100% - 6px) !important;
    max-width:calc(100% - 6px) !important;
    margin-inline:3px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-actions{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:3px !important;
    padding:3px !important;
    align-items:center !important;
    justify-content:stretch !important;
    background:transparent !important;
    border-inline-start:1px solid rgba(148,163,184,.16) !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-iconbtn,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-actions :where(button){
    width:100% !important;
    min-width:0 !important;
    height:26px !important;
    min-height:26px !important;
    padding:0 !important;
    border-radius:8px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-iconbtn svg{
    width:12px !important;
    height:12px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-table,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-table--split-scroll{
    --cm-mobile-table-width: 552px;
    --cm-mobile-grid:
      16px 32px 44px 112px
      58px 58px 58px 58px 116px;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > div{
    height:29px !important;
    min-height:29px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow--split-scroll{
    --cm-mobile-head-grid: 16px 32px 40px 100px 58px 58px 58px 58px 132px;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > div{
    font-size:8.8px !important;
    padding:0 3px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(6),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(7),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(9),
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-headrow > :nth-child(10){
    font-size:8.15px !important;
    padding-inline:1px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > *,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-state-slot,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-flag,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-code-pill,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-name-col,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-pair-col,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-actions{
    min-height:36px !important;
    height:36px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-row > *,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-name-col,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-pair-col,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-actions{
    padding:3px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-code-pill,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill{
    height:25px !important;
    min-height:25px !important;
    max-height:25px !important;
    font-size:9.2px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--buy,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--sell,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--ratio-buy,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-num-pill--ratio-sell{
    width:calc(100% - 4px) !important;
    min-width:calc(100% - 4px) !important;
    max-width:calc(100% - 4px) !important;
    margin-inline:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-name{
    font-size:9.5px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-pair-badge{
    height:23px !important;
    min-height:23px !important;
    font-size:8.8px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-flag-image{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
  }

  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-iconbtn,
  body.taif-mobile-mode .panel[data-view="currency-management"] .currency-management-actions :where(button){
    height:24px !important;
    min-height:24px !important;
  }
}