/* ═══════════════════════════════════════════════════════════════
   k.css — نظام التصميم (البدائيات المشتركة)
   ───────────────────────────────────────────────────────────────
   يعتمد على t.css .. يجب تحميل t.css قبله.
   كل كلاس هنا يبدأ بـ k- .. لا يوجد ولا كلاس بهذه البادئة في
   المشروع حالياً، فاضافة هذا الملف لا تغير شيئاً حتى نبدل الصفحة.

   الاستخدام: k-card k-card-h   (الاساس + التعديل)
   ═══════════════════════════════════════════════════════════════ */


/* ══════════ 1) البناء والتخطيط ══════════ */

.k-wrap{ max-width:1000px; margin:0 auto; padding:var(--k-s5) var(--k-s6); }
.k-wrap-n{ max-width:760px; }                       /* ضيق */
.k-wrap-w{ max-width:1240px; }                      /* واسع */

.k-sec{ margin-bottom:var(--k-s7); }

.k-grid{ display:grid; gap:var(--k-s4); grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.k-grid-2{ grid-template-columns:repeat(2,1fr); }
.k-grid-3{ grid-template-columns:repeat(3,1fr); }

.k-row{ display:flex; gap:var(--g,var(--k-s3)); align-items:center; flex-wrap:wrap; }
.k-row-b{ justify-content:space-between; }          /* الطرفان */
.k-row-c{ justify-content:center; }
.k-col{ display:flex; flex-direction:column; gap:var(--g,var(--k-s3)); align-items:stretch; }
.k-grow{ flex:1; min-width:160px; }                 /* يملأ الفراغ */
.k-grow-0{ flex:1; min-width:0; }                   /* يملأ الفراغ و يسمح بالانكماش */
.k-ico{ width:32px; height:32px; object-fit:contain; flex-shrink:0; }  /* ايقونة عنوان */

/* تحكم بالفراغ داخل k-row و k-col و k-grid */
.k-g1{ --g:var(--k-s1); } .k-g2{ --g:var(--k-s2); } .k-g3{ --g:var(--k-s3); }
.k-g4{ --g:var(--k-s4); }
.k-g5{ --g:var(--k-s5); } .k-g6{ --g:var(--k-s6); } .k-g7{ --g:var(--k-s7); }


/* ══════════ 2) الحاويات ══════════ */

.k-card{
  background:var(--k-panel);
  border:1px solid var(--k-line);
  border-radius:var(--k-r4);
  padding:var(--k-s5) var(--k-s6);
  color:var(--k-txt);
}
.k-card-g{ background:linear-gradient(180deg,var(--k-panel2) 0%,var(--k-panel) 100%); }  /* بتدرج */
.k-card-h{ transition:border-color var(--k-tr), transform var(--k-tr); }
.k-card-h:hover{ border-color:var(--k-blue); transform:translateY(-2px); }
.k-card-a{ border-right:4px solid var(--k-gold); }  /* بشريط جانبي مميز */
.k-card-p{ padding:var(--k-s3) var(--k-s4); }       /* حشوة اصغر */
.k-card-l{ padding:var(--k-s7) var(--k-s8); }       /* حشوة اكبر */
.k-card-0{ padding:0; overflow:hidden; }            /* بلا حشوة .. للجداول الملتصقة */

/* شريط عنوان داخل بطاقة k-card-0 */
.k-strip{
  background:var(--k-bg); padding:var(--k-s4) var(--k-s6);
  color:#fff; font-size:var(--k-fs-md); font-weight:var(--k-fw);
  border-bottom:1px solid var(--k-line);
}

/* شريط اجراءات اسفل بطاقة k-card-0 */
.k-bar{
  display:flex; align-items:center; gap:var(--g,var(--k-s3)); flex-wrap:wrap;
  padding:var(--k-s4) var(--k-s6);
  background:var(--k-bg); border-top:1px solid var(--k-line);
}

.k-pad{ padding:var(--k-s6) var(--k-s7); }          /* حشوة داخلية لمحتوى k-card-0 */
.k-elev{ box-shadow:var(--k-sh2); }                 /* ارتفاع */

/* صورة دائرية (اللاعب، المحادثة، الحساب) */
.k-avatar{
  width:var(--av,46px); height:var(--av,46px); flex-shrink:0;
  border-radius:50%; border:2px solid var(--k-line);
  background:#1a2a4a; object-fit:cover;
  display:flex; align-items:center; justify-content:center;
}
.k-avatar-s{ --av:30px; }
.k-avatar-l{ --av:72px; border-width:3px; }

/* الكلاس الافتراضي لـ avatar_img() .. كان مكررا في s.css و g.css
   لان اياً منهما لا يُحمَّل في الجهتين. مكانه هنا فتعريف واحد يكفي الكل. */
.s-ava{
  width:38px; height:38px; flex-shrink:0;
  border-radius:50%; object-fit:cover; overflow:hidden;
  border:2px solid var(--k-gold); background:rgba(255,215,0,.1);
  display:inline-flex; align-items:center; justify-content:center;
}
.s-ava-non{
  font-size:1.1em; color:var(--k-gold);
  font-weight:var(--k-fwx); line-height:1;
}

.k-box{
  background:var(--k-bg);
  border:1px solid var(--k-line);
  border-radius:var(--k-r3);
  padding:var(--k-s4);
}


/* ══════════ 3) العناوين والنصوص ══════════ */

.k-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--k-s4); flex-wrap:wrap;
  padding-bottom:var(--k-s4); margin-bottom:var(--k-s4);
  border-bottom:1px solid var(--k-line);
}
.k-title{ margin:0; color:var(--k-gold); font-size:var(--k-fs-lg); font-weight:var(--k-fwx); }
.k-title-l{ margin:0 0 var(--k-s1); color:#fff; font-weight:var(--k-fwx);
            font-size:clamp(var(--k-fs-lg),2vw,22px); }   /* عنوان صفحة */
.k-sub{   margin:0; color:var(--k-dim); font-size:var(--k-fs-sm); font-weight:var(--k-fw); }
.k-hint{  color:var(--k-dim); font-size:var(--k-fs-xs); line-height:1.8; }
.k-note{
  background:var(--k-panel2); border:1px solid var(--k-line);
  border-radius:var(--k-r3); padding:var(--k-s4);
  color:var(--k-dim); font-size:var(--k-fs-sm); line-height:1.9;
}


/* ══════════ 4) الازرار ══════════ */
/* نفس نظام bld.css: --b0/--b1 يتغيران عبر كلاس النوع */

.k-btn{
  --b0:#888; --b1:#666;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--k-s3);
  padding:var(--k-s4) var(--k-s6);
  border:1px solid rgba(0,0,0,.35); border-radius:var(--k-r3);
  background:linear-gradient(var(--b0),var(--b1));
  color:var(--k-wht); font-family:inherit; font-size:var(--k-fs); font-weight:var(--k-fwb);
  text-decoration:none; white-space:nowrap;
  cursor:pointer; box-shadow:var(--k-btn-sh), var(--k-btn-in);
  transition:transform .05s ease, filter var(--k-tr);
}
.k-btn:hover, .k-btn:focus{ text-decoration:none; color:var(--k-wht); }
.k-btn:hover{ filter:brightness(1.06); }
.k-btn:active{ transform:translateY(1px); }
/* الحالة المعطلة: الوان صريحة بدل opacity حفاظا على وضوح النص */
.k-btn:disabled{
  --b0:#141c33; --b1:#141c33;
  border-color:var(--k-line); color:#7386a8;
  cursor:not-allowed; box-shadow:none; filter:none;
}
.k-btn img{ width:var(--k-s7); height:var(--k-s7); object-fit:contain; }

.k-btn-sm{ padding:var(--k-s2) var(--k-s5); font-size:var(--k-fs-sm); border-radius:var(--k-r2); }
.k-btn-w{ width:100%; }

/* انواع الازرار — نفس الدلالات المعتمدة في المشروع */
.k-btn-build  { --b0:var(--k-c-blue0); --b1:var(--k-c-blue1); }   /* 3: تطوير مبنى */
.k-btn-train  { --b0:var(--k-c-orng0); --b1:var(--k-c-orng1); }   /* 4: تدريب وحدة */
.k-btn-war    { --b0:var(--k-c-war0);  --b1:var(--k-c-war1);  }   /* 1: ارسال الجيش */
.k-btn-msg    { --b0:var(--k-c-teal0); --b1:var(--k-c-teal1); }   /* 2: ارسال رسالة */
.k-btn-trade  { --b0:var(--k-c-grn0);  --b1:var(--k-c-grn1);  }   /* 5: ارسال تجار */
.k-btn-money  { --b0:var(--k-c-gold0); --b1:var(--k-c-gold1); color:var(--k-bg); } /* 6: ارسال المال */
.k-btn-ok     { --b0:var(--k-c-emer0); --b1:var(--k-c-emer1); }   /* 7: الموافقة */
.k-btn-new    { --b0:var(--k-c-crea0); --b1:var(--k-c-crea1); }   /* 8: انشاء */
.k-btn-red    { --b0:var(--k-c-red0);  --b1:var(--k-c-red1);  }   /* هدم / خطر */

/* زر رئيسي: تدرج ازرق بحد سماوي و توهج (الاجراء الاساسي في الصفحة) */
.k-btn-pri{ --b0:#1e4a7a; --b1:#15355c; border-color:var(--k-blue); box-shadow:none; }
.k-btn-pri:hover{ box-shadow:0 0 10px rgba(96,205,255,.35); }

/* زر مسطح بلا بروز (للثانوي) */
.k-btn-gh{
  background:var(--k-bg); background-image:none;
  border:1px solid var(--k-line); color:var(--k-blue);
  box-shadow:none; font-weight:var(--k-fw);
}
.k-btn-gh, .k-btn-gh:hover, .k-btn-gh:focus{ color:var(--k-blue); }
.k-btn-gh:hover{ border-color:var(--k-blue); background:var(--k-line2); color:var(--k-blue-l); filter:none; }

/* زر الدعوة الذهبي (صفحات الموقع) */
.k-btn-cta{
  background:linear-gradient(180deg,var(--k-gold),var(--k-gold-d));
  border:1px solid var(--k-gold-b); color:var(--k-gold-t) !important;
  font-weight:var(--k-fwx); text-decoration:none; box-shadow:none;
}


/* ══════════ 5) التبويبات ══════════ */

.k-tabs{ display:flex; gap:var(--k-s2); flex-wrap:wrap; align-items:center; margin-bottom:var(--k-s5); }
.k-tab{
  padding:var(--k-s2) var(--k-s6); border-radius:var(--k-r3);
  background:var(--k-panel2); border:1px solid var(--k-line);
  color:var(--k-dim); font-size:var(--k-fs); font-weight:var(--k-fw);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color var(--k-tr), color var(--k-tr), border-color var(--k-tr);
}
.k-tab:hover{ background:var(--k-line2); border-color:var(--k-blue); color:var(--k-blue-l); }
.k-tab.on,
.k-tab.active{ background:var(--k-panel3); border-color:var(--k-blue); color:var(--k-blue); box-shadow:var(--k-glow); }
/* active مرادف لـ on لان المعالج العام [data-open] في javascript.js يبدّل active */
.k-tab-eq{ flex:1; }                                /* تبويبات متساوية العرض */

/* لوح التبويب: يظهر بكلاس on */
.k-pane{ display:none; }
.k-pane.on{ display:flex; flex-direction:column; gap:var(--g,var(--k-s6)); }


/* ══════════ 6) الجداول ══════════ */

.k-tbl{ width:100%; border-collapse:collapse; }
.k-tbl thead tr{ background:var(--k-bg); }
.k-tbl th{
  padding:var(--k-s4) var(--k-s5); text-align:right;
  color:#fff; font-size:var(--k-fs); font-weight:var(--k-fw);
  border-bottom:2px solid var(--k-line);
}
.k-tbl td{ padding:var(--k-s4) var(--k-s5); color:var(--k-txt); font-size:var(--k-fs); }
.k-tbl tbody tr:nth-child(odd){  background:var(--k-panel); }
.k-tbl tbody tr:nth-child(even){ background:var(--k-panel3); }
.k-tbl tbody tr:hover{ background:var(--k-line2); }
.k-tbl a{ color:var(--k-blue); text-decoration:none; font-weight:600; }
.k-tbl a:hover{ color:var(--k-blue-l); text-decoration:underline; }
.k-tbl-c th, .k-tbl-c td{ text-align:center; }      /* توسيط الاعمدة */


/* ══════════ 7) الحالات والشارات ══════════ */

.k-ok{  background:var(--k-grn-bg); border:1px solid var(--k-grn); color:var(--k-grn-l);
        border-radius:var(--k-r2); padding:var(--k-s4); font-size:var(--k-fs); }
.k-err{ background:var(--k-red-bg); border:1px solid var(--k-red); color:var(--k-red-l);
        border-radius:var(--k-r2); padding:var(--k-s4); font-size:var(--k-fs); }
.k-warn{ background:#332a0a; border:1px solid var(--k-gold); color:var(--k-gold);
         border-radius:var(--k-r2); padding:var(--k-s4); font-size:var(--k-fs); font-weight:var(--k-fw); }

/* شريط تقدم (ولاء، خبرة، نسبة فوز، طابور بناء) */
.k-prog{
  height:var(--h,8px); border-radius:var(--k-r1); overflow:hidden;
  background:var(--k-bg); border:1px solid var(--k-line);
}
.k-prog-f{ height:100%; border-radius:var(--k-r1); transition:width .3s ease; background:var(--k-blue); }

.k-badge{
  display:inline-block; padding:3px var(--k-s4); border-radius:var(--k-rp);
  background:var(--k-panel3); border:1px solid var(--k-line);
  color:var(--k-dim); font-size:var(--k-fs-xs); font-weight:var(--k-fwb);
}
.k-badge-gold{ color:var(--k-gold); border-color:var(--k-gold); }
.k-badge-blue{ color:var(--k-blue); border-color:var(--k-blue); }
.k-badge-red{  color:var(--k-red-l); border-color:var(--k-red); }
.k-badge-ok{   background:var(--k-grn-bg); color:var(--k-grn-l); border-color:var(--k-grn); }
.k-badge-err{  background:var(--k-red-bg); color:var(--k-red-l); border-color:var(--k-red); }
.k-badge-hot{  background:#e55; color:#fff; border-color:#e55; }   /* شارة لفت نظر: جديد */

/* عنوان قسم داخلي */
.k-sec-title{
  color:var(--k-blue); font-size:var(--k-fs); font-weight:var(--k-fw);
  margin:var(--k-s6) 0 var(--k-s2);
  border-right:3px solid var(--k-blue); padding-right:var(--k-s3);
}

.k-empty{ color:var(--k-mute); font-size:var(--k-fs); text-align:center;
          padding:var(--k-s8) 0; grid-column:1/-1; }


/* ══════════ 8) الحقول ══════════ */

/* تشمل حقول `koe-main-sc` ايضا: كانت مكرّرة حرفيا في g.css بـ١٢ خاصية
   متطابقة. k.css يُحمَّل قبل g.css دائما (main.php و basic_zag.php و
   f.site.php) فالوراثة مضمونة. */
.k-in, .k-sel, .k-txta,
.koe-main-sc input[type="text"],
.koe-main-sc input[type="number"],
.koe-main-sc input[type="email"],
.koe-main-sc input[type="password"],
.koe-main-sc input[type="search"],
.koe-main-sc textarea{
  width:100%; min-width:0; box-sizing:border-box;
  padding:var(--k-s3) var(--k-s4);
  background:var(--k-bg); color:var(--k-wht);
  border:1px solid var(--k-line); border-radius:var(--k-r2);
  font-family:inherit; font-size:var(--k-fs-md); font-weight:var(--k-fw); line-height:1.4;
}
.k-in:focus, .k-sel:focus, .k-txta:focus{
  outline:none; border-color:var(--k-blue); box-shadow:var(--k-ring);
}
.k-in::placeholder, .k-txta::placeholder{ color:#6d80a6; font-weight:400; }
.k-in-s{ max-width:64px;  text-align:center; }
.k-in-m{ max-width:140px; }
.k-txta{ min-height:90px; resize:vertical; }
.k-lbl{ display:block; margin-bottom:var(--k-s2); color:var(--k-dim);
        font-size:var(--k-fs-sm); font-weight:var(--k-fw); }


/* ══════════ 9) مساعدات ══════════ */

.k-c{ text-align:center; }
.k-mid{ align-items:center; }        /* توسيط عناصر flex عمودياً */
.k-b{ font-weight:var(--k-fwx); }
.k-r{ text-align:right; }
.k-l{ text-align:left; }
.k-gold-t{ color:var(--k-gold); }
.k-blue-t{ color:var(--k-blue); }
.k-mut{ color:var(--k-dim); }
.k-xs{ font-size:var(--k-fs-xs); }
.k-sm{ font-size:var(--k-fs-sm); }
.k-lg{ font-size:var(--k-fs-lg); }
.k-num{ font-variant-numeric:tabular-nums; font-weight:var(--k-fwb); }
.k-stat{ font-size:19px; font-weight:var(--k-fwx); color:var(--k-txt2); }  /* قيمة بارزة */
.k-hide{ display:none !important; }
.k-nowrap{ white-space:nowrap; }
.k-wrapt{ white-space:normal; }
.k-self-e{ align-self:flex-end; }


/* ══════════ 10) الجوال ══════════ */

@media (max-width:600px){
  .k-wrap{ padding:var(--k-s4) var(--k-s4); }
  .k-grid-3{ grid-template-columns:repeat(2,1fr); }
  .k-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .k-head{ flex-direction:column; align-items:stretch; }
  .k-tbl th, .k-tbl td{ padding:var(--k-s3) var(--k-s3); font-size:var(--k-fs-sm); }
  .k-btn{ min-height:44px; }
}

/* رمز تعبيري كبير في حالة الفراغ */
.k-emoji{ font-size:40px; margin-bottom:var(--k-s4); }

.k-grid-sm{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }  /* بطاقات صغيرة */

.k-scroll-x{ width:100%; overflow-x:auto; margin-top:var(--k-s1); }  /* جدول واسع على الجوال */

/* رمز/ايقونة كبيرة .. الحجم عبر --sz */
.k-big-ico{ font-size:var(--sz,32px); line-height:1; flex-shrink:0; }
.k-sz24{ --sz:24px; } .k-sz26{ --sz:26px; } .k-sz38{ --sz:38px; } .k-sz46{ --sz:46px; }
/* شبكة بطاقات عريضة */
.k-grid-lg{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.k-red-t{ color:var(--k-red-l); }
/* شارة ركنية فوق ايقونة (عدّاد / حالة) */
.k-corner{
  position:absolute; top:-8%; left:-8%; z-index:3;
  width:clamp(18px,1.8vw,28px); height:clamp(18px,1.8vw,28px);
  line-height:clamp(18px,1.8vw,28px); text-align:center;
  border-radius:50%; background:rgba(0,0,0,.7); color:#fff;
  font-size:clamp(11px,1vw,18px); font-weight:bold;
}


/* ══════════ 11) مساعدات موحدة ══════════ */
/* بديل style= المتناثر .. الوان دلالية بدل الوان خام (blue/red/green/orange)
   فالنتيجة تتبع ثيم اللعبة و تتغير من مكان واحد */

/* الوان النص */
.k-c-blue{ color:var(--k-blue); }
.k-c-red{  color:var(--k-red-l); }
.k-c-grn{  color:var(--k-grn-l); }
.k-c-gold{ color:var(--k-gold); }
.k-c-org{  color:#e0895a; }
.k-c-w{    color:#fff; }
.k-c-dim{  color:var(--k-dim); }
.k-c-dim2{ color:#ccc; }

/* المسافات */
.k-m0{ margin:0; }
.k-mt{ margin-top:var(--k-s6); }
.k-mb{ margin-bottom:var(--k-s6); }
.k-mb0{ margin-bottom:0; }
.k-my{ margin:var(--k-s6) 0; }
.k-p0{ padding:0; }
.k-p1{ padding:var(--k-s4); }

/* المقاسات و التخطيط */
.k-w{ width:100%; }
.k-f1{ flex:1; }
.k-mw{ max-width:220px; }
.k-ib{ display:inline-block; }
.k-fcol{ display:flex; flex-direction:column; gap:var(--g,var(--k-s4)); }
.k-icon{ width:20px; height:20px; object-fit:contain; vertical-align:middle; }
.k-icon-l{ width:28px; height:28px; }
.k-ltr{ direction:ltr; }

/* المعطل: لون صريح بدل opacity (حفاظا على التباين) */
.k-off{ background:var(--k-line) !important; color:#8fa3c8 !important; cursor:not-allowed; }
.k-fs15{ font-size:15px; }
.k-w34{ width:34px; }
.k-rot{ transform:rotate(180deg); }
.k-tag{ border-radius:3px; padding:2px 6px; white-space:nowrap; font-size:var(--k-fs-sm); }
.k-ita{ color:#aaa; font-style:italic; }
.k-bd-gold{ border-color:var(--k-gold) !important; }


/* ══════════ 12) مكونات موحّدة عبر الصفحات ══════════ */
/* كل واحد منها كان معرّفا بثلاثة اسماء فاكثر بفروق تجميلية فقط */

/* بطاقة بتدرّج — كانت qd-card و sp-card */
.k-card-grad{
  background:linear-gradient(180deg,var(--k-panel2) 0%,var(--k-panel) 100%);
  border:1px solid var(--k-line); border-radius:var(--k-r4);
  padding:var(--k-s6) var(--k-s7); color:#c3d0e8;
}

/* عنصر قائمة صندوقي — كانت bn-item و sw-item و ix-stat */
.k-item{
  background:var(--k-panel); color:var(--k-txt);
  border:1px solid var(--k-line); border-radius:var(--k-r5);
  padding:var(--k-s7) var(--k-s8);
}
.k-item-row{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.k-item-c{ text-align:center; }

/* صف بين طرفين داخل قائمة — كانت alc-row و sw-row و stat-item */
.k-lrow{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--k-s4); flex-wrap:wrap;
  padding:5px var(--k-s4); font-size:12.5px;
}
.k-lrow-b{ border-bottom:1px solid #1c2745; }
.k-lrow-b:last-child{ border-bottom:0; }

/* عنوان بايقونة — كانت pf-title و sq-title */
.k-htitle{ display:flex; align-items:center; gap:var(--k-s4); margin:0 0 var(--k-s6); }