/* ثيم alkabos — pages/account.css
   مجموعة «الحساب ولوحة المعلومات»: profile.php و dashboard.php و
   notifications.php و updates.php.

   الغلاف يحمّل كل ملفّ في pages/ على كل صفحة من صفحات الثيم، فأيّ محدِّد
   طليق هنا يعيد تنسيق صفحات مجموعة أخرى — وقد حدث ذلك مرارًا في نقلات
   سابقة. لذلك كل قاعدة أدناه مسنودة إلى علامة صفحتها وحدها:
       .ak-account  → profile.php
       .ak-dash     → dashboard.php
       .ak-notif    → notifications.php
       .ak-updates  → updates.php
   والعلامات على غلاف الصفحة داخل .content، لا على .content نفسها، حتى لا
   يُسقطها تعديلٌ على $os_main_class صامتًا.

   لا لون مكتوب بالست عشري إلا حيث تكتبه الورقة نفسها (الأخضر/الأحمر
   الدلاليّان وخلفية رمز QR البيضاء): الباقي من متغيّرات الورقة
   --main-color / --main-opacity / --secondary-color / --border-color /
   --text-main / --bg-color / --shadow-color، فيتبع html.dark بلا نسخة ثانية.
   ============================================================ */


/* ==================== profile.php (.ak-account) ==================== */

/* .account .btn في الورقة زرٌّ بعرض كامل، وهي لا تضبط display — فالوسم <a>
   يبقى سطريًّا ويتجاهل width:100%. */
.ak-account a.btn,
.ak-notif a.btn {
  display: block;
  text-align: center;
  text-decoration: none;
}
/* .account .btn تكتب color:var(--text-main) فوق خلفية var(--main-color):
   أبيضُ مقروء في الوضع المظلم، وأسودُ على أحمر في المضيء. الورقة نفسها
   تكتب #fff فوق --main-color في كل موضع آخر (.nav-pills li.active a،
   .pagination li.active a)، فهذا هو لونها المتّسق لا اختراعًا من عندنا. */
.ak-account .btn,
.ak-notif .btn {
  color: #fff;
}
.ak-account .ak-btn-ghost {
  background: var(--secondary-color);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}
.ak-account .ak-btn-danger {
  background: #ef4444;
  color: #fff;
}

/* سطر المفتاح (مفتاح API وسرّ TOTP). المفتاح نفسه لا يدخل هذا السطر إلا بعد
   ?showkey=1 — انظر تعليق profile.php. */
.ak-account .ak-keyline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-color);
}
.ak-account .ak-key {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* محتوى لاتينيّ دائمًا: الاتجاه هنا لا بسمة dir على الوسم. */
  direction: ltr;
  text-align: start;
}
.ak-account .ak-key-mask {
  letter-spacing: 2px;
  opacity: .55;
}
.ak-account .ak-key-btn {
  flex-shrink: 0;
  padding: 4px;
  border: 0;
  background: 0 0;
  line-height: 1;
  font-size: 16px;
  color: var(--main-color);
  cursor: pointer;
}

/* صندوق رمز QR: خلفيّته بيضاء في الوضعين — رمزٌ أسود على أسود لا يُقرأ. */
.ak-account .ak-qrbox {
  width: max-content;
  margin: 4px auto 14px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  line-height: 0;
}
.ak-account .ak-qrbox #gf-qr {
  width: 170px;
  height: 170px;
}

.ak-account .ak-code {
  letter-spacing: 6px;
  text-align: center;
  font-weight: 900;
  direction: ltr;
}
.ak-account .ak-ltr {
  direction: ltr;
  text-align: start;
}
.ak-account .ak-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #22c55e;
  font-weight: 800;
}
/* وميض بطاقة الإشعارات عند القدوم من /profile?tab=notif */
.ak-account .ak-flash {
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px var(--main-opacity);
}
/* .account .card .help-text في الورقة رماديّة ثابتة (#888) ولا تلوّن رابطها. */
.ak-account .help-text a {
  color: var(--main-color);
  font-weight: 800;
}
/* .account .notifications-table تفرض min-width:700px داخل .table-notifications
   ذات overflow-x — وجدولنا عمودان فقط. */
.ak-account .notifications-table,
.ak-notif .notifications-table {
  min-width: 0;
}


/* ================= notifications.php (.ak-notif) ================= */

.ak-notif .ak-mail {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-color);
  color: var(--text-main);
  font-size: 14px;
  word-break: break-all;
  direction: ltr;
  text-align: start;
}


/* ==================== updates.php (.ak-updates) ==================== */

.ak-updates .ak-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}
.ak-updates .ak-head h2 {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-main);
}
.ak-updates .ak-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--main-opacity);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 900;
}
/* .orders .search>div .input-group-btn button تكتب color:#fff فوق خلفية
   var(--secondary-color) — وهي #e9ecef في الوضع المضيء، فتختفي أيقونة البحث
   تمامًا. (نفس العلّة على صفحة الطلبات؛ الإصلاح هنا مسنودٌ إلى صفحتنا وحدها
   ومذكورٌ في التقرير.) */
.ak-updates .search > div .input-group-btn button {
  color: var(--text-main);
}
/* و.btn-search تكتب var(--text-main) فوق var(--main-color): أسود على أحمر
   في الوضع المضيء. */
.ak-updates .table-wrapper .btn-search {
  color: #fff;
}

.ak-updates .ak-svc {
  max-width: 520px;
  line-height: 1.8;
  word-break: break-word;
}
.ak-updates .ak-upd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  white-space: nowrap;
}
/* دلالة اللون: رفع السعر أحمر، تخفيضه أخضر، الجديد بلون الموقع، التعطيل
   كهرمانيّ، والتمكين أزرق — نفس أرقام الورقة في .yes/.no و.icon-box. */
.ak-updates .upd-up   { color: #ef4444 }
.ak-updates .upd-down { color: #22c55e }
.ak-updates .upd-new  { color: var(--main-color) }
.ak-updates .upd-off  { color: #f59e0b }
.ak-updates .upd-on   { color: #3b82f6 }

/* خليّة «لا نتائج» أوّلُ الصفّ وآخرُه معًا، فتتنازع عليها قاعدتا
   :first-child و:last-child بنصفَي استدارة متعاكسين. */
.ak-updates .table-wrapper tbody td.ak-empty {
  border-radius: 10px;
  border-inline-end: none;
}
.ak-updates .ak-empty {
  padding: 38px 16px;
  text-align: center;
}
.ak-updates .ak-empty i {
  display: block;
  margin-bottom: 10px;
  font-size: 34px;
  color: var(--main-color);
  opacity: .85;
}

/* .orders .table-wrapper في الورقة تمرّر الجدول أفقيًّا ولا تملك وضع
   البطاقات على الجوال (وضعٌ تملكه .table-responsive و.childpanels-table
   وحدهما). سمات data-head في ترميز القالب موجودة أصلًا لهذا الغرض. */
@media (max-width: 768px) {
  .ak-updates .table-wrapper table { border-spacing: 0 10px }
  .ak-updates .table-wrapper thead { display: none }
  .ak-updates .table-wrapper tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--secondary-color);
  }
  .ak-updates .table-wrapper tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 4px;
    border-inline-end: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    text-align: start;
  }
  .ak-updates .table-wrapper tbody td:last-child { border-bottom: none }
  .ak-updates .table-wrapper tbody td::before {
    content: attr(data-head);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    opacity: .9;
  }
  .ak-updates .ak-svc { max-width: none }
  .ak-updates .ak-upd { white-space: normal; text-align: end }
  /* صفّ «لا نتائج» يمتدّ على الأعمدة الأربعة: لا رأس له يُطبع قبله. */
  .ak-updates .table-wrapper tbody td.ak-empty { display: block }
  .ak-updates .table-wrapper tbody td.ak-empty::before { content: none }
}


/* ==================== dashboard.php (.ak-dash) ==================== */

.ak-dash .ak-ellipsis {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .main-boxes .icon-btn-sm خلفيّتها rgba(255,255,255,.1) بلا حدّ — تختفي
   تمامًا على الوضع المضيء. */
.ak-dash .icon-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}
.ak-dash .levels-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ak-dash .levels-alert i { color: var(--main-color) }

/* عائلة levels-* في الورقة مكتوبة للوضع المظلم وحده: خلفيّاتها وحدودها
   rgba(255,255,255,.0x) — أي لا شيء فوق أبيض، فيخرج الجدول في الوضع المضيء
   كتلةً بلا رأس ولا فواصل صفوف. الحلّ بمتغيّرات الورقة لا بلون ثابت، ثم
   إعادةُ الفاصل الشفّاف للوضع المظلم وحده لأن --border-color هناك أسود. */
.ak-dash .levels-mini-card .icon {
  background: var(--main-opacity);
  border-color: var(--border-color);
  color: var(--main-color);
}
.ak-dash .levels-table-wrapper { background: var(--bg-color) }
.ak-dash .levels-table-head { background: var(--secondary-color) }
.ak-dash .levels-table-row { border-bottom: 1px solid var(--border-color) }
.ak-dash .levels-table-row:last-child { border-bottom: none }
html.dark .ak-dash .levels-table-row { border-bottom: 1px solid rgba(255, 255, 255, .08) }
html.dark .ak-dash .levels-table-row:last-child { border-bottom: none }

/* الاختصارات: .levels-mini-card صندوقٌ في الورقة، وهنا وسم <a>. */
.ak-dash .ak-quick a.levels-mini-card {
  display: block;
  min-height: 0;
  color: var(--text-main);
  transition: .25s ease;
}
.ak-dash .ak-quick a.levels-mini-card:hover {
  border-color: var(--main-color);
  transform: translateY(-3px);
}
.ak-dash .ak-quick p { margin: 0; font-size: 13px }

.ak-dash .ak-list { margin: 0; padding: 0; list-style: none }
.ak-dash .ak-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border-color);
}
.ak-dash .ak-list li:last-child { border-bottom: none }
.ak-dash .ak-list-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}
.ak-dash .ak-list-name i { flex-shrink: 0; color: var(--main-color) }
.ak-dash .ak-list-val {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--text-main);
}
.ak-dash .ak-list-val.ak-ltr { direction: ltr; text-align: start }
@media (min-width: 768px) {
  .ak-dash .ak-list-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 22px;
  }
}

/* شبكة جدول المستويات في الورقة سبعةُ أعمدة (مزيّة × ستّة مستويات)؛
   أعمدتنا ثلاثة: المستوى، حدّ الإنفاق، الخصم. */
.ak-dash .levels-table-head,
.ak-dash .levels-table-row {
  grid-template-columns: 1.6fr 1fr 1fr;
}
.ak-dash .levels-table-row.ak-lvl-now { background: var(--main-opacity) }
.ak-dash .ak-now-tag {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--main-color);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
@media (max-width: 500px) {
  .ak-dash .levels-table-head,
  .ak-dash .levels-table-row { grid-template-columns: 1.4fr 1fr 1fr }
  .ak-dash .levels-table-wrapper .cell { padding: 12px 8px; font-size: 12px }
  .ak-dash .levels-table-wrapper .cell.feature { padding-right: 10px }
}