.ct-page{
  max-width: 1700px;
  margin: 0 auto;
  padding: 110px 12px 24px;
}

/* HERO */
.ct-hero{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-end;
  margin-bottom: 10px;
}
.ct-kicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  opacity: .85;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.ct-title{ margin: 10px 0 4px; font-size: 22px; }
.ct-sub{ margin:0; opacity:.8; font-size: 13px; }

.ct-profile{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  min-width: 260px;
}
.ct-avatar{
  width: 44px; height: 44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
.ct-name{ font-weight: 900; }
.ct-role{ opacity:.8; font-size: 12px; margin-top:2px; }
.ct-sync{ opacity:.75; font-size: 12px; margin-top:4px; }

/* CARD */
.ct-card{
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

/* TOOLBAR */
.ct-toolbar{
  position: sticky;
  top: 74px;
  z-index: 50; /* ✅ أعلى من أي شيء */
  background: rgba(12,14,18,.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 10px;
}
.ct-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:flex-end;
}
.ct-row.sub{ margin-top: 8px; align-items:center; }

.ct-field{ display:flex; flex-direction:column; gap: 6px; min-width: 170px; }
.ct-field.grow{ flex: 1; min-width: 240px; }
.ct-field label{ font-size: 12px; opacity:.85; }

.ct-input{
  height: 40px;
  border-radius: 10px;
  padding: 0 10px;
  outline:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
}
.ct-input:focus{ border-color: rgba(59,130,246,.55); }

.ct-actions{ display:flex; gap: 8px; flex-wrap: wrap; align-items:center; }

.ct-stats{ font-size: 12px; opacity:.85; }
.sep{ opacity:.6; margin: 0 8px; }
.ct-loading{ font-size: 12px; opacity:.8; }

.ct-pager{ display:flex; gap: 8px; align-items:center; }
.ct-pageInfo{
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  opacity:.9;
}

/* GRID WRAP */
.ct-gridWrap{
        margin-top: 76px ;
  overflow: auto;
  max-height: calc(100vh - 235px);
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,.12);
}

/* GRID */
.ct-grid{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 1700px;
}
.ct-grid th, .ct-grid td{
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 10px;
  text-align:left;
  vertical-align: top;
  white-space: nowrap; /* ✅ Excel-like */
}

/* ✅ Header واضح وما يختفي */
.ct-grid thead th{
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(18,20,26,1);
  border-bottom: 1px solid rgba(255,255,255,.18);
  font-weight: 900;
}

/* widths */
.c-brand{ min-width: 150px; }
.c-model{ min-width: 320px; font-weight: 900; }
.c-desc{ min-width: 420px; opacity:.9; }
.c-meters{ min-width: 90px; }
.c-min{ min-width: 70px; }
.c-total{ min-width: 80px; font-weight: 900; }
.c-actions{ min-width: 90px; }

.ct-num{ font-weight: 800; }
.ct-zero{ opacity:.35; }

/* inputs */
.ct-edit{
  width: 120px;
  height: 34px;
  border-radius: 10px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: inherit;
  outline:none;
}
.ct-edit:focus{ border-color: rgba(59,130,246,.55); }

.ct-saving{
  border-color: rgba(245,158,11,.45) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.18);
}
.ct-saved{
  border-color: rgba(34,197,94,.40) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.12);
}

.ct-empty{ padding: 14px; text-align:center; opacity:.75; }

/* hide warehouses */
.ct-hide{ display:none !important; }

/* ✅ تثبيت أول عمودين (Brand/Model) زي Excel Freeze */
.stickL1{
  position: sticky;
  left: 0;
  z-index: 40;
  background: rgba(18,20,26,1);
  box-shadow: 8px 0 0 rgba(0,0,0,.18);
}
.stickL2{
  position: sticky;
  left: 150px; /* نفس عرض brand تقريباً */
  z-index: 40;
  background: rgba(18,20,26,1);
  box-shadow: 8px 0 0 rgba(0,0,0,.18);
}

/* ✅ نفس الفكرة للخلايا */
td.stickL1, td.stickL2{
  background: rgba(12,14,18,.98);
  z-index: 10;
}

/* modal */
.ct-modal{ position: fixed; inset:0; display:none; z-index: 999; }
.ct-modal[aria-hidden="false"]{ display:block; }
.ct-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.ct-modal__panel{
  position: relative;
  width: min(980px, calc(100vw - 20px));
  margin: 70px auto 20px;
  border-radius: 14px;
  background: rgba(18,20,26,.96);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  max-height: calc(100vh - 92px);
  display:flex;
  flex-direction: column;
}
.ct-modal__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ct-modal__title{ font-weight: 900; }
.ct-modal__sub{ font-size: 12px; opacity:.8; margin-top:4px; }
.ct-modal__tools{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ct-toolsGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  align-items:end;
}
.ct-modal__body{
  padding: 12px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.ct-movesWrap{ overflow:auto; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; }
.ct-moves{ width: 100%; border-collapse: collapse; min-width: 860px; font-size: 12px; }
.ct-moves th, .ct-moves td{ border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px; text-align:right; }
.ct-moves th{ background: rgba(255,255,255,.06); font-weight: 900; }

@media (max-width: 900px){
  .ct-hero{ flex-direction:column; align-items:flex-start; }
  .ct-toolsGrid{ grid-template-columns: 1fr 1fr; }
  .ct-toolbar{ top: 64px; }
  .ct-edit{ width: 100px; }
}

/* ================================
   COUNT TABLE FIXES (Model + Mobile)
================================ */

/* 1) خليه يبين الموديل كامل (Desktop) */
.c-model, .c-brand, .c-desc {
  white-space: normal !important;   /* لفّ النص بدل قص */
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25;
}

/* تكبير عمود الموديل عشان ياخذ راحته */
.c-model { 
  min-width: 260px; 
}

/* تكبير عمود البراند شوي */
.c-brand { 
  min-width: 180px; 
}

/* وصف اختياري - خليله مساحة معقولة */
.c-desc { 
  min-width: 260px; 
}

/* إذا عندك input داخل الخلايا، خلّيها تتمد */
.ct-edit{
  width: 100%;
  min-width: 140px;
}

/* 2) حل تغطية الأعمدة المثبتة على الموبايل */
@media (max-width: 820px){

  /* الأفضل: نلغي الـ sticky على الموبايل عشان ما يغطي */
  .stickL1, .stickL2{
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }

  /* نخلي عمودين Brand/Model أصغر لكن يلفّوا سطرين */
  .c-brand{ min-width: 150px; }
  .c-model{ min-width: 220px; }

  /* بونس: خلي الجدول يمرّ بسلاسة */
  #gridWrap{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* 3) خيار إضافي (لو بدك تضل sticky على التابلت):
   خلي الـ sticky يوقف فقط تحت 480px بدل 820px
   - إذا بدك هذا، احذف الـ media فوق وبدّلها باللي تحت */

/*
@media (max-width: 480px){
  .stickL1, .stickL2{
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
}
*/

/* ===== Fix: Select / Dropdown text not visible ===== */
:root{
  --wm-input-bg: rgba(255,255,255,.06);
  --wm-input-border: rgba(255,255,255,.12);
  --wm-input-text: rgba(255,255,255,.92);
  --wm-input-placeholder: rgba(255,255,255,.55);
}

:root[data-theme="light"]{
  --wm-input-bg: rgba(0,0,0,.04);
  --wm-input-border: rgba(0,0,0,.12);
  --wm-input-text: rgba(0,0,0,.88);
  --wm-input-placeholder: rgba(0,0,0,.55);
}

/* select نفسه */
select,
select.wm-select,
.mi-select,
.ro-select,
.ct-select{
  background: var(--wm-input-bg) !important;
  color: var(--wm-input-text) !important;
  border: 1px solid var(--wm-input-border) !important;
  outline: none;
}

/* option داخل القائمة (مهم لأنه أحيانًا بيكون أبيض بالنص) */
select option{
  background: #121212; /* دارك */
  color: #ffffff;
}

:root[data-theme="light"] select option{
  background: #ffffff;
  color: #111111;
}

/* placeholder-like (لو عندك option أول واحد) */
select:invalid,
select option[disabled]{
  color: var(--wm-input-placeholder) !important;
}

/* optional: تحسين شكل السهم بالدارك */
select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 11px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

:root[data-theme="light"] select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.65) 50%),
    linear-gradient(135deg, rgba(0,0,0,.65) 50%, transparent 50%);
}