/* =========================================================
   Professional Mobile UI
   لا يحتوي أي منطق محاسبي
   ========================================================= */

:root{
  --app-bg:#f3f6f9;
  --surface:#ffffff;
  --primary:#0f766e;
  --primary-dark:#0b5f59;
  --primary-soft:#ecfdf9;
  --text:#0f172a;
  --muted:#64748b;
  --border:#dbe4ec;
  --danger:#dc2626;
  --radius:16px;
  --shadow:0 8px 28px rgba(15,23,42,.07);
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--app-bg);
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
}

/* ===============================
   APP CONTAINER
   =============================== */

main{
  width:100%;
  max-width:1400px;
}

.card{
  border-color:var(--border);
  box-shadow:var(--shadow);
}

header{
  background:transparent;
}

/* ===============================
   NAVIGATION
   =============================== */

nav{
  scrollbar-width:none;
}

nav::-webkit-scrollbar{
  display:none;
}

nav button{
  white-space:nowrap;
  transition:
    background .15s ease,
    transform .15s ease;
}

nav button:active{
  transform:scale(.97);
}

/* ===============================
   INPUTS
   =============================== */

input,
select,
textarea{
  outline:none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--primary);
  box-shadow:
    0 0 0 3px rgba(15,118,110,.10);
}

button{
  min-height:44px;
}

button.primary{
  background:var(--primary);
  color:white;
}

button.primary:hover{
  background:var(--primary-dark);
}

/* ===============================
   CALCULATION CARDS
   =============================== */

.calc>div{
  min-width:0;
}

.calc strong{
  display:block;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

/* ===============================
   TABLES
   =============================== */

.tablewrap{
  width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

table{
  font-variant-numeric:tabular-nums;
}

th{
  position:sticky;
  top:0;
  z-index:2;
}

/* ===============================
   BUYER / SELLER CARDS
   =============================== */

.buyer-deal-card,
.seller-deal-card,
.deal-data-card{
  box-shadow:
    0 5px 20px rgba(15,23,42,.06);
}

.purchase-badge,
.seller-deal-badges span{
  font-size:12px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

  body{
    padding-bottom:82px;
  }

  main{
    padding:10px;
  }

  /* -------------------------------
     HEADER
     ------------------------------- */

  header{
    padding:8px 4px 6px;
    margin-bottom:8px;
  }

  header h1{
    font-size:21px;
  }

  header span{
    font-size:11px;
    color:var(--muted);
  }

  header .secondary{
    min-height:38px;
    padding:8px 11px;
    font-size:12px;
  }

  /* -------------------------------
     BOTTOM APP NAV
     ------------------------------- */

  nav{
    position:fixed;
    right:0;
    left:0;
    bottom:0;
    z-index:100;

    display:flex;
    flex-wrap:nowrap;

    gap:5px;
    margin:0;
    padding:
      8px
      8px
      calc(8px + env(safe-area-inset-bottom));

    overflow-x:auto;

    background:
      rgba(255,255,255,.96);

    border-top:
      1px solid var(--border);

    box-shadow:
      0 -8px 30px rgba(15,23,42,.08);

    backdrop-filter:
      blur(14px);
  }

  nav button{
    flex:0 0 auto;

    min-height:46px;
    padding:8px 13px;

    border-radius:12px;

    font-size:12px;
  }

  nav button.active{
    background:var(--primary);
    color:#fff;
  }

  /* -------------------------------
     SECTIONS
     ------------------------------- */

  .card{
    padding:15px;
    border-radius:18px;
  }

  .grid2,
  .tab.grid2.active{
    grid-template-columns:1fr;
    gap:12px;
  }

  h2{
    font-size:19px;
    margin-top:0;
  }

  h3{
    font-size:16px;
  }

  /* -------------------------------
     FORMS
     ------------------------------- */

  label{
    margin:12px 0;
    font-size:13px;
  }

  input,
  select,
  textarea{
    min-height:50px;
    padding:12px 13px;
    border-radius:12px;
    font-size:16px;
  }

  textarea{
    min-height:90px;
  }

  select[size]{
    min-height:150px;
  }

  .row,
  .filters{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }

  .filters>*{
    width:100%;
  }

  .filters button,
  .filters .buttonlink{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    min-height:48px;
  }

  /* -------------------------------
     SALE TOTALS
     ------------------------------- */

  .calc{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:8px;
  }

  .calc>div{
    padding:11px;
    min-height:88px;
  }

  .calc span{
    line-height:1.45;
  }

  .calc strong{
    margin-top:6px;
    font-size:20px;
  }

  /* -------------------------------
     TABLE
     ------------------------------- */

  .tablewrap{
    margin-right:-5px;
    margin-left:-5px;
    padding-bottom:6px;
  }

  table{
    min-width:950px;
    font-size:12px;
  }

  th,
  td{
    padding:9px 8px;
  }

  /* -------------------------------
     MULTI PURCHASES
     ------------------------------- */

  .buyer-purchase-row,
  .seller-purchase-box{
    padding:12px;
    border-radius:14px;
  }

  .purchase-row-head,
  .seller-buyer-row-head,
  .multi-title-row{
    gap:8px;
  }

  .purchase-input-grid{
    grid-template-columns:1fr;
  }

  .purchase-calcs,
  .seller-item-totals,
  .seller-buyer-calcs{
    grid-template-columns:1fr;
  }

  .buyer-summary,
  .seller-main-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .buyer-summary>div,
  .seller-main-summary>div{
    min-width:0;
  }

  .buyer-summary strong,
  .seller-main-summary strong{
    font-size:17px;
    overflow-wrap:anywhere;
  }

  /* -------------------------------
     RESULT CARDS
     ------------------------------- */

  .buyer-item-grid,
  .seller-view-calcs,
  .seller-deal-summary-view,
  .buyer-deal-summary{
    grid-template-columns:1fr 1fr;
  }

  .seller-buyer-view{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .seller-buyer-view strong{
    grid-column:1/-1;
  }

  /* -------------------------------
     BIG SAVE BUTTONS
     ------------------------------- */

  #saveSaleBtn,
  #saveBuyerDeal,
  #saveSellerDeal{
    position:sticky;
    bottom:72px;
    z-index:20;

    width:100%;
    min-height:54px;

    margin-top:14px;

    border-radius:14px;

    box-shadow:
      0 8px 24px rgba(15,118,110,.25);

    font-size:16px;
  }

  /* -------------------------------
     TOAST
     ------------------------------- */

  #toast{
    right:12px;
    left:12px;
    bottom:88px;

    max-width:none;
    width:auto;

    text-align:center;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media(max-width:430px){

  main{
    padding:7px;
  }

  .card{
    padding:12px;
    border-radius:15px;
  }

  header h1{
    font-size:19px;
  }

  .calc{
    grid-template-columns:1fr 1fr !important;
  }

  .calc strong{
    font-size:18px;
  }

  .buyer-summary,
  .seller-main-summary,
  .buyer-item-grid,
  .seller-view-calcs,
  .seller-deal-summary-view,
  .buyer-deal-summary{
    grid-template-columns:1fr;
  }

  .seller-buyer-view{
    grid-template-columns:1fr;
  }

  nav button{
    min-width:105px;
  }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media(min-width:801px){

  nav{
    position:sticky;
    top:0;
    z-index:50;

    padding:7px 0;

    background:
      rgba(243,246,249,.95);

    backdrop-filter:
      blur(10px);
  }
}