/* REDESIGN-2026 · S5 — الحساب والمنصة. الجلسة S5 بس اللي بتكتب هنا.
   القيم كلها من `tokens.css` (`--ty-*`). */

/* ── W32 · دخول موظفي المنصة (`platform.html`) ─────────────────────────────
   صفحة مستقلة عن التطبيق: خلفية فحمية ثابتة وبطاقة واحدة في النص. */
.pl-page {
  margin: 0;
  background: var(--ty-charcoal);
  color: var(--ty-text);
  font-family: var(--ty-font-body);
  font-variant-numeric: tabular-nums;
}
.pl-page *,
.pl-page *::before,
.pl-page *::after {
  box-sizing: border-box;
}
.pl-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 24px;
}
.pl-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 440px;
  padding: 36px 32px;
  border-radius: 24px;
  background: var(--ty-surface);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.pl-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pl-brand svg {
  flex-shrink: 0;
  fill: var(--ty-green);
}
.pl-brand-text {
  display: flex;
  flex-direction: column;
}
.pl-brand-text strong {
  font-family: var(--ty-font-head);
  font-size: 20px;
}
.pl-brand-text h1 {
  margin: 0;
  color: var(--ty-warn-fg);
  font-family: var(--ty-font-body);
  font-size: 14px;
  font-weight: 700;
}
.pl-lead {
  margin: 0;
  color: var(--ty-text-2);
  font-size: 15px;
  line-height: 1.7;
}
.pl-lead a {
  color: var(--ty-green);
  font-weight: 700;
}
.pl-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}
.pl-field[hidden] {
  display: none;
}
.pl-field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--ty-line-strong);
  border-radius: var(--ty-radius-s);
  background: var(--ty-surface);
  color: var(--ty-text);
  font-family: inherit;
  font-size: 16px;
}
.pl-field input::placeholder {
  color: var(--ty-text-4);
}
.pl-field input:focus-visible,
.pl-submit:focus-visible,
.pl-lead a:focus-visible {
  outline: 3px solid var(--ty-green);
  outline-offset: 2px;
}
/* PLATFORM-LOGIN-1106: خانة كلمة المرور بعينها، والنقط أكبر ومتباعدة عشان تتعدّ. */
.pl-pw {
  position: relative;
  display: block;
}
/* الخانة `dir="ltr"` والعين على شمال الصفحة العربية: المسافة في بداية الخانة (شمالها) عشان النقط ماتتحطش تحت العين. */
.pl-pw input {
  padding-inline-start: 56px;
}
.pl-pw input[type="password"] {
  font-size: 20px;
  letter-spacing: 0.18em;
}
.pl-pw__toggle {
  position: absolute;
  inset-inline-end: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--ty-radius-s);
  background: transparent;
  color: var(--ty-text-3);
  cursor: pointer;
}
.pl-pw__toggle[aria-pressed="true"] {
  color: var(--ty-green);
}
.pl-pw__toggle:focus-visible {
  outline: 3px solid var(--ty-green);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pl-pw__toggle:hover {
    color: var(--ty-green);
  }
}
.pl-field input.pl-code {
  font-size: 18px;
  letter-spacing: 0.3em;
}
.pl-field input.pl-code::placeholder {
  letter-spacing: 0;
}
.pl-status {
  margin: 0;
  color: var(--ty-text-3);
  font-size: 14px;
  line-height: 1.6;
}
.pl-status:empty {
  display: none;
}
.pl-status.is-bad {
  padding: 10px 14px;
  border-radius: var(--ty-radius-s);
  background: var(--ty-bad-bg);
  color: var(--ty-bad-fg);
  font-weight: 600;
}
.pl-submit {
  height: 52px;
  border: 0;
  border-radius: var(--ty-radius-s);
  background: var(--ty-charcoal);
  color: #ffffff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.pl-submit:disabled {
  background: var(--ty-disabled-bg);
  color: var(--ty-disabled-fg);
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .pl-wrap {
    padding: 24px 16px;
  }
  .pl-card {
    padding: 28px 20px;
  }
}

/* ── شاشات الحساب (W30 الأمان، W07 الفريق، W29 التدقيق…) — أصناف `ac-*` ─────
   الهيكل: رأس (سطر القسم + العنوان + الوصف) ثم شبكة بطاقات بتتكسر عمود واحد
   في الموبايل. */
.ac-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--ty-text);
  font-family: var(--ty-font-body);
  font-variant-numeric: tabular-nums;
}
/* FIX-ROUND V2 · 1: `.ac-page` عمود flex ارتفاعه من محتواه. `.ty-list` جوّاه كانت `min-height: 100%`
   (مقاسها لما تكون هي الشاشة كلها) فبتاخد طول الصفحة كله: 1330px للفريق و3950px لشركات المنصة، واللي
   بعدها يتزق تحت أو يتعصر (سجل أفعال المنصة 2px بـ`overflow: hidden`). جوّه الصفحة كل ابن بمقاس محتواه. */
.ac-page > * {
  flex: none;
}
.ac-page .ty-list {
  min-height: 0;
}
.ac-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ty-line-soft);
}
.ac-head > div {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ac-head > .ac-actions {
  flex: 0 1 auto;
  flex-direction: row;
  /* UI-CLARITY-1101: بيلف — «تصدير CSV» وشريحة «السلسلة سليمة» في صف واحد كانوا 351px على تليفون 360 بعد تكبير الخط. */
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
}
.ac-head h1 {
  margin: 0;
  font-family: var(--ty-font-head);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
}
.ac-head__eyebrow,
.ac-head__lede {
  color: var(--ty-text-3);
  font-size: 14px;
  line-height: 1.6;
}
.ac-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
.ac-col {
  display: flex;
  flex: 1 1 380px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.ac-col--wide {
  flex-basis: 420px;
}
.ac-card {
  gap: 14px;
}
.ac-card h2 {
  margin: 0;
  font-family: var(--ty-font-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}
.ac-card p {
  margin: 0;
  color: var(--ty-text-2);
  font-size: 15px;
  line-height: 1.7;
}
.ac-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
}
.ac-card--list .ac-card__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ty-line-soft);
}
.ac-card--list .ac-card__foot {
  padding: 12px 20px;
  border-top: 1px solid var(--ty-line-soft);
  color: var(--ty-text-3);
  font-size: 14px;
}
.ac-card--list > .ty-state {
  margin: 16px 20px;
}
.ac-count {
  color: var(--ty-text-3);
  font-family: var(--ty-font-body);
  font-size: 15px;
  font-weight: 500;
}
.ac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ac-rows,
.ac-kvs,
.ac-codes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ac-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  font-size: 15px;
}
.ac-row + .ac-row {
  border-top: 1px solid var(--ty-line-soft);
}
.ac-row--current {
  background: var(--ty-green-soft);
}
.ac-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ac-row__sub {
  color: var(--ty-text-3);
  font-size: 14px;
}
.ac-row__sub--bad {
  color: var(--ty-bad-fg);
  font-weight: 600;
}
.ac-row .ty-btn,
.ac-row .ty-chip {
  flex-shrink: 0;
}
.ac-kv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 0;
  font-size: 15px;
}
.ac-kv + .ac-kv {
  border-top: 1px solid var(--ty-line-soft);
}
.ac-kv__value {
  color: var(--ty-text-3);
  font-weight: 600;
}
.ac-kv__value--g {
  color: var(--ty-ok-fg);
}
.ac-kv__value--a {
  color: var(--ty-warn-fg);
}
.ac-kv__note {
  flex-basis: 100%;
  color: var(--ty-text-3);
  font-size: 14px;
}
.ac-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--ty-radius-s);
  background: var(--ty-warn-bg);
  color: var(--ty-warn-fg);
  font-size: 14px;
  line-height: 1.7;
}
.ac-codes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: var(--ty-radius-s);
  background: var(--ty-warn-bg);
  color: var(--ty-warn-fg);
  font-size: 14px;
  line-height: 1.6;
}
.ac-codes ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.ac-codes code {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ty-surface);
  color: var(--ty-text);
  font-size: 15px;
  text-align: center;
  user-select: all;
}
.ac-secret {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  user-select: all;
}
.ac-copy {
  align-self: flex-start;
  margin-top: 8px;
}
/* 2FA-QR: أبيض ثابت حوالين الرمز حتى في الوضع الليلي — الكاميرا محتاجة التباين. */
.ac-qr {
  display: block;
  width: min(192px, 60vw);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 12px;
  border-radius: 8px;
  background: #fff;
  image-rendering: pixelated;
}
/* ── M14 · قائمة الحساب (جوه ورقة `profile-sheet`) ─────────────────────────────── */
.ac-menu {
  font-family: var(--ty-font-body);
  max-height: 100dvh;
  overflow-y: auto;
}
.ac-menu__group {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.ac-menu__group h3 {
  margin: 0 0 4px;
  color: var(--ty-text-3);
  font-family: var(--ty-font-body);
  font-size: 14px;
  font-weight: 600;
}
.ac-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--ty-line-soft);
  background: none;
  color: var(--ty-text);
  font: inherit;
  text-align: start;
}
button.ac-menu__row {
  cursor: pointer;
}
button.ac-menu__row:focus-visible {
  outline: 3px solid var(--ty-green);
  outline-offset: 2px;
}
.ac-menu__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 16px;
}
.ac-menu__text small,
.ac-menu__hint {
  color: var(--ty-text-3);
  font-size: 14px;
  line-height: 1.6;
}
.ac-menu__hint {
  margin-top: 6px;
  text-align: center;
}
.ac-menu__value,
.ac-menu__chev {
  color: var(--ty-text-3);
  font-size: 15px;
}
.ac-menu__switch {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--ty-line-strong);
}
.ac-menu__switch::after {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ty-surface);
  content: "";
  transition: inset-inline-start 0.15s;
}
[aria-checked="true"] > .ac-menu__switch {
  background: var(--ty-green);
}
[aria-checked="true"] > .ac-menu__switch::after {
  inset-inline-start: 23px;
}
.ac-menu__facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.ac-menu__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ty-line-soft);
  font-size: 15px;
}
.ac-menu__facts dt {
  color: var(--ty-text-3);
}
.ac-menu__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .ac-menu__switch::after {
    transition: none;
  }
}
.ac-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ac-table__scroll {
  overflow-x: auto;
}
.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.ac-table th,
.ac-table td {
  padding: 12px 20px;
  border-top: 1px solid var(--ty-line-soft);
  text-align: start;
  vertical-align: middle;
  font-weight: 400;
}
.ac-table thead th {
  border-top: 0;
  background: var(--ty-surface-2);
  color: var(--ty-text-3);
  font-size: 14px;
  font-weight: 600;
}
.ac-table__name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: var(--ty-touch);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ty-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ac-table__name bdi {
  color: var(--ty-text-3);
  font-size: 14px;
}
@media (hover: hover) and (pointer: fine) {
  .ac-table__name:hover b {
    color: var(--ty-green);
  }
}
.ac-table__name:focus-visible {
  outline: 3px solid var(--ty-green);
  outline-offset: 2px;
}
.ac-table__actions {
  white-space: nowrap;
}
.ac-table__actions > * + * {
  margin-inline-start: 8px;
}
.ac-table__hint {
  color: var(--ty-text-3);
  font-size: 14px;
}
.ac-linkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: var(--ty-radius-s);
  background: var(--ty-green-soft);
  color: var(--ty-text);
  font-size: 14px;
  line-height: 1.7;
}
.ac-linkbox .invite-link {
  flex: 1 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ty-green);
  font-weight: 600;
}
.ac-linkbox .ty-btn {
  text-decoration: none;
}
.ac-tab {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}
.ac-tab .ac-row {
  padding-inline: 0;
}
.ac-plain {
  margin: 0;
  color: var(--ty-text-2);
  font-size: 15px;
}
/* FIX-ROUND R5 · 10: شريط التجربة في رئيسية المالك — تنبيه مش منع، فلونه تحذير مش خطر. النص بيلف والزر بينزل
   سطر على العرض الضيق (360) من غير تمرير أفقي. */
.ac-trial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: var(--ty-radius-s);
  background: var(--ty-warn-bg);
  color: var(--ty-warn-fg);
}
.ac-trial__text {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.ac-assign {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ac-select {
  flex: 1 1 200px;
  min-width: 0;
  min-height: var(--ty-touch);
  padding: 0 12px;
  border: 1.5px solid var(--ty-line-strong);
  border-radius: var(--ty-radius-s);
  background: var(--ty-surface);
  color: var(--ty-text);
  font: inherit;
}
.ac-more summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--ty-touch);
  color: var(--ty-green);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ac-more summary:focus-visible {
  outline: 3px solid var(--ty-green);
  outline-offset: 2px;
}
.ac-more h3 {
  margin: 12px 0 0;
  font-size: 15px;
}
.ac-more .ac-row {
  padding-inline: 0;
}
.ac-more__lede {
  color: var(--ty-text-3);
  font-size: 14px;
}
@media (max-width: 640px) {
  .ac-page {
    gap: 16px;
  }
  .ac-head h1 {
    font-size: 23px;
  }
  .ac-grid,
  .ac-col {
    gap: 16px;
  }
  .ac-col {
    flex-basis: 100%;
  }
}

/* ── W29 سجل التدقيق + W31 الشركات ─────────────────────────────────────────
   صف الفلاتر، ذيل الترقيم، أرقام البطاقة، والجدول اللي بيتحوّل بطاقات في الموبايل. */
.ac-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ac-filter .ac-select {
  flex: 0 1 auto;
}
/* V2 · 12: قايمة اختيار أصغر من 16px بتخلّي آيفون يكبّر الصفحة لما تتفتح (كانت 15px في سجل التدقيق). */
select.ac-select {
  font-size: 16px;
}
.ac-filter input[type="search"] {
  flex: 1 1 220px;
}
.ac-filter__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ty-text-2);
  font-size: 14px;
}
/* BILLING-1106 · فحص التليفون: لافتة طويلة + خانة كانوا بيعدّوا حرف الكارت الشمال في 360–412 (RTL بيطفح شمال،
   فمفيش تمرير أفقي يكشفه). الصف بيلفّ، والخانة بتتمدّ في الباقي ومابتعدّيش العرض. */
.ac-filter__date {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
.ac-filter__date .ac-select {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
}
.ac-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.ac-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.ac-fact {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--ty-radius-s);
  background: var(--ty-surface-2);
}
.ac-fact dt {
  color: var(--ty-text-3);
  font-size: 14px;
}
.ac-fact dd {
  margin: 0;
  font-family: var(--ty-font-head);
  font-size: 20px;
  font-weight: 700;
}
.ac-fact--bad {
  background: var(--ty-bad-bg);
}
.ac-fact--bad dd {
  color: var(--ty-bad-fg);
}
.ac-fact--warn {
  background: var(--ty-warn-bg);
}
.ac-fact--warn dd {
  color: var(--ty-warn-fg);
}
.ac-table__when {
  color: var(--ty-text-2);
  white-space: nowrap;
}
.ac-table__note {
  display: block;
  color: var(--ty-text-3);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.ac-table--stack td {
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .ac-filter .ac-select,
  .ac-filter__date,
  .ac-filter .ty-btn {
    flex: 1 1 100%;
  }
  .ac-filter__date .ac-select {
    flex: 1 1 auto;
  }
  .ac-table--stack,
  .ac-table--stack tbody,
  .ac-table--stack tr,
  .ac-table--stack td {
    display: block;
  }
  .ac-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ac-table--stack tr {
    padding: 12px 16px;
    border-top: 1px solid var(--ty-line-soft);
  }
  .ac-table--stack tr:first-child {
    border-top: 0;
  }
  .ac-table--stack td {
    display: flex;
    gap: 10px;
    padding: 3px 0;
    border: 0;
    white-space: normal;
  }
  .ac-table--stack td::before {
    flex: 0 0 96px;
    color: var(--ty-text-3);
    font-size: 14px;
    content: attr(data-label);
  }
}

/* ── FIX-ROUND V3 · 2 — النافذة القديمة `#recordModal` بشكل النماذج الجديدة ─────────────────
   «قواعد الصلاحيات المسجّلة» في الفريق و«دعوة الفريق من ملف» لسه بيفتحوا النافذة القديمة
   (`qa-h2-requests` بيقيس عليها بـ`#recordForm .primary-button`)، فالأصناف والمعرّفات زي ما هي
   والشكل بس اللي اتغيّر: عنوان بحجم عنوان النموذج، زر حفظ بعرض النافذة و56px، وخانة ملف `.ty-file`. */
#recordModal .modal-head h2 {
  font-family: var(--ty-font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#recordModal .modal-head p {
  margin-top: 4px;
  color: var(--ty-text-2);
  font-size: 14px;
  line-height: 1.6;
}
#recordForm > .primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ty-touch-field);
  border-radius: var(--ty-radius-m);
  font-size: 18px;
  font-weight: 700;
}
#recordModal .modal-file {
  display: grid;
  gap: 8px;
}
#recordModal .modal-file__label {
  font-weight: 800;
}
#recordModal .modal-fields .ty-file {
  display: flex;
  font-weight: 400;
}
#recordModal .modal-fields .ty-file__input {
  min-height: 0;
  padding: 0;
  border: 0;
}