/* REDESIGN-2026 · [S3] أصناف شاشات الفلوس. الألوان والمقاسات من `tokens.css` بس. */

/* عنصر شبكة في الهيكل: من غير `min-width: 0` جدول البنود بيمدّ الصفحة كلها على الموبايل. */
.s3-screen,
.s3-record,
.s3-body,
.s3-main,
.s3-lines__body {
  min-width: 0;
  max-width: 100%;
}
.s3-screen {
  color: var(--ty-text);
  font-family: var(--ty-font-body);
  font-variant-numeric: tabular-nums;
}
.s3-record {
  display: flex;
  flex-direction: column;
  background: var(--ty-bg);
}

/* --- الرأس --- */
.s3-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ty-line-soft);
}
.s3-heading {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.s3-path,
.s3-sub {
  color: var(--ty-text-3);
  font-size: 14px;
}
.s3-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.s3-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.s3-title {
  margin: 0;
  font-family: var(--ty-font-head);
  font-size: 28px;
  font-weight: 700;
}
.s3-ref {
  color: var(--ty-text-3);
  font-size: 14px;
  font-weight: 500;
}
.s3-head__actions,
.s3-decide,
.s3-actions,
.s3-row__actions,
.s3-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.s3-back {
  display: none;
}
.s3-wait {
  color: var(--ty-warn-fg);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
.s3-menu-wrap {
  position: relative;
}
.s3-menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--ty-line);
  border-radius: var(--ty-radius-m);
  background: var(--ty-surface);
  box-shadow: var(--ty-shadow);
}

/* --- الجسم --- */
.s3-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0 48px;
}
.s3-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
.s3-lines {
  flex: 2 1 600px;
  min-width: 0;
}
.s3-side {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.s3-lines__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ty-line-soft);
}
.s3-lines__head h3 {
  font-size: 19px;
}
.s3-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s3-card__head h3 {
  font-size: 17px;
}
.s3-card__lede {
  color: var(--ty-text-3);
  font-size: 14px;
  line-height: 1.6;
}
.s3-card__foot {
  padding: 8px 12px;
  border-top: 1px solid var(--ty-line-soft);
}
.s3-scroll {
  overflow-x: auto;
}
.s3-table {
  min-width: 620px;
}
/* جدول التسويات: من غير عرض أدنى، فبيقعد كله في عرض الموبايل. */
.s3-table--fit td:last-child,
.s3-table--fit th:last-child {
  white-space: nowrap;
  text-align: end;
}
.s3-row--cap {
  background: var(--ty-warn-bg);
}
.s3-cap {
  color: var(--ty-warn-fg);
  font-size: 14px;
  font-weight: 600;
}
.s3-unit {
  color: var(--ty-text-3);
}
.s3-text {
  margin: 0;
  color: var(--ty-text-2);
  font-size: 15px;
  line-height: 1.7;
}
.s3-pad {
  padding: 16px 20px;
}
.s3-alert {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ty-warn-bg);
  color: var(--ty-warn-fg);
  font-size: 15px;
  line-height: 1.7;
}
.s3-alert--info {
  background: var(--ty-info-bg);
  color: var(--ty-info-fg);
}
.s3-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ty-line-soft);
  font-size: 14px;
}
.s3-row__text {
  flex: 1;
  min-width: 200px;
  line-height: 1.8;
}
/* RV1107C: «صورة الإيصال» في العهدة كانت 46px على الموبايل — هدف اللمس 48 على الأقل. */
@media (pointer: coarse), (max-width: 640px) {
  .s3-receipt {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch, 48px);
    padding-inline: 4px;
  }
}

/* --- بطاقة الحساب --- */
.s3-calc {
  display: flex;
  flex-direction: column;
  font-size: 15px;
}
.s3-calc__title {
  order: 0;
  padding: 20px 20px 0;
  font-size: 18px;
}
.s3-calc__rows {
  display: flex;
  order: 1;
  flex-direction: column;
  gap: 10px;
  padding: 12px 20px 0;
}
.s3-calc__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.s3-calc__row span {
  color: var(--ty-text-2);
}
.s3-calc__row b {
  font-weight: 500;
  direction: ltr;
}
.s3-calc__net {
  display: flex;
  order: 2;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 20px 20px;
  padding: 12px;
  border-radius: var(--ty-radius-m);
  background: var(--ty-ok-bg);
  color: var(--ty-ok-fg);
  font-weight: 700;
}
.s3-calc__net strong {
  font-size: 24px;
  direction: ltr;
}
/* SITE-CASH: «في إيدك» — الرقم اللي المهندس فاتح الشاشة عشانه. */
.s3-cash-balance {
  font-size: 24px;
  direction: ltr;
  white-space: nowrap;
}
.s3-fold {
  display: none;
}

/* --- رأس بطاقة فيه زر جنب العنوان (المالية · البوابات) --- */
.s3-card__head--row {
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* --- بوابات الأطراف (W23): قائمة يتختار منها + تفاصيل --- */
.s3-picks {
  flex: 1 1 300px;
  gap: 0;
}
.s3-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 20px;
  border: 0;
  border-top: 1px solid var(--ty-line-soft);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.s3-pick[aria-pressed="true"] {
  background: var(--ty-surface-2);
}
@media (hover: hover) and (pointer: fine) {
  .s3-pick:hover {
    background: var(--ty-surface-2);
  }
}
.s3-pick:focus-visible {
  outline: 2px solid var(--ty-info-fg);
  outline-offset: -2px;
}
.s3-pick__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.6;
}
.s3-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.s3-issued {
  border-color: var(--ty-ok-fg);
  background: var(--ty-ok-bg);
}
.s3-issued__link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--ty-radius-m);
  background: var(--ty-surface);
  color: var(--ty-text);
  font-size: 14px;
  direction: ltr;
  text-align: left;
  overflow-wrap: anywhere;
  user-select: all;
}

/* --- ورقة المستخلص وأمر التغيير على `PrintSheet`: نفس قواعد التقسيم اللي على الورقة القديمة
       (styles.css): رأس الجدول بيتكرر، والصف والصورة والتوقيعات ما بيتقطعوش بين صفحتين. --- */
@media print {
  body.printing-doc .ty-print__table-wrap {
    overflow: visible;
  }
  /* 5-أ-٢: المستخلص 10 أعمدة بأرقام ملايين = 742px والورقة A4 فيها 688px بعد الهامش —
     كان بيتقص 54px من الشمال في الـPDF. خط أصغر وحشو أضيق في الطباعة بس. */
  body.printing-doc .ty-print__table {
    font-size: 14px;
  }
  body.printing-doc .ty-print__table th,
  body.printing-doc .ty-print__table td {
    padding: 4px 5px;
  }
  body.printing-doc .ty-print__table thead {
    display: table-header-group;
  }
  body.printing-doc .ty-print__table tr,
  body.printing-doc .ty-print__photos figure,
  body.printing-doc .ty-print__signs {
    break-inside: avoid;
  }
}

/* --- صفحة قسم الفلوس على الموبايل (M06) --- */
.s3-sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  padding: 20px 0 32px;
}
.s3-sec__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s3-sec__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 12px 20px;
  border: 0;
  border-top: 1px solid var(--ty-line-soft);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.s3-sec__row:first-child {
  border-top: 0;
}
@media (hover: hover) and (pointer: fine) {
  .s3-sec__row:hover {
    background: var(--ty-surface-2);
  }
}
.s3-sec__row:focus-visible {
  outline: 2px solid var(--ty-info-fg);
  outline-offset: -2px;
}
/* ORGANIZE-1101: أيقونة الشاشة في أول الصف — نفس الطقم اللي في القائمة والدليل. */
.s3-sec__ico {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--ty-green);
}
.s3-sec__ico svg {
  width: 24px;
  height: 24px;
}
.s3-sec__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
}
.s3-sec__live {
  color: var(--ty-warn-fg);
  font-size: 14px;
  font-weight: 600;
}
.s3-sec__go {
  color: var(--ty-text-3);
  font-size: 22px;
}
.s3-sec__cta .ty-btn {
  width: 100%;
  min-height: 56px;
}

/* --- الموبايل (M07): الصافي فوق، التفاصيل والبنود مطوية، وأزرار القرار ثابتة تحت --- */
@media (max-width: 640px) {
  .s3-head {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 14px 0 12px;
  }
  .s3-back {
    display: inline-flex;
    flex-shrink: 0;
  }
  .s3-path {
    display: none;
  }
  .s3-title {
    font-size: 21px;
  }
  .s3-heading {
    flex: 1 1 auto;
  }
  .s3-body {
    gap: 14px;
    padding: 18px 0 24px;
  }
  .s3-main {
    /* `wrap` الموروثة من الويب بتخلّي عمود الموبايل يتمدد بعرض الجدول. */
    flex-flow: column nowrap;
    align-items: stretch;
    gap: 14px;
  }
  .s3-side {
    order: -1;
    flex: 0 0 auto;
    gap: 14px;
  }
  .s3-lines {
    flex: 0 0 auto;
  }
  .s3-fold {
    display: inline-flex;
    min-height: 52px;
    border-radius: 0;
    border-top: 1px solid var(--ty-line-soft);
    background: var(--ty-surface-2);
  }
  .s3-calc__title {
    display: none;
  }
  .s3-calc__net {
    order: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    padding: 20px;
    border-radius: 0;
    background: none;
    color: var(--ty-text-2);
    font-weight: 400;
  }
  .s3-calc__net strong {
    color: var(--ty-ok-fg);
    font-size: 34px;
  }
  .s3-calc .s3-fold {
    order: 1;
  }
  .s3-calc__rows {
    display: none;
    order: 2;
    padding: 16px 20px;
    border-top: 1px solid var(--ty-line-soft);
  }
  .s3-calc.is-open .s3-calc__rows {
    display: flex;
  }
  .s3-lines__body {
    display: none;
  }
  .s3-lines.is-open .s3-lines__body {
    display: block;
  }
  .s3-lines__head {
    border-bottom: 0;
  }
  .s3-head__actions {
    flex-shrink: 0;
  }
  /* FIX-ROUND V2 · 8: رأس شاشة القايمة (من غير زر رجوع — «مقاولو الباطن» بزرّين) كان سطر واحد ما بيلفّش:
     الزرّين واخدين السطر، والعنوان سطرين في 104px، والوصف 4. العنوان فوق، والأزرار تحته بعرض كامل.
     رأس السجل (بزر الرجوع، M07) زي ما هو سطر واحد. */
  .s3-head:not(:has(.s3-back)) {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .s3-head:not(:has(.s3-back)) > .s3-heading,
  .s3-head:not(:has(.s3-back)) > .s3-head__actions {
    flex: 1 1 100%;
  }
  .s3-head:not(:has(.s3-back)) > .s3-head__actions > * {
    flex: 1 1 0;
  }
  /* أزرار القرار بتلزق فوق الشريط السفلي (M-Tabs: 84px، أو 70 + الحافة الآمنة). */
  .s3-decide {
    position: fixed;
    inset-inline: 0;
    bottom: max(84px, calc(70px + env(safe-area-inset-bottom, 0px)));
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--ty-line);
    background: var(--ty-surface);
  }
  .s3-decide:empty {
    display: none;
  }
  .s3-decide .ty-btn {
    min-height: 56px;
  }
  .s3-record {
    padding-bottom: 96px;
  }
  .s3-row__actions .ty-btn,
  .s3-actions .ty-btn {
    flex: 1 1 auto;
  }
}