/* assets/css/count.css - Excel Count Page Final */

:root{
  --ct-bg: rgba(255,255,255,.05);
  --ct-bg-2: rgba(255,255,255,.07);
  --ct-line: rgba(255,255,255,.11);
  --ct-line-2: rgba(255,255,255,.18);
  --ct-text: rgba(255,255,255,.92);
  --ct-muted: rgba(255,255,255,.70);
  --ct-head: rgba(15,17,23,.98);
  --ct-cell: rgba(12,14,18,.98);
  --ct-accent: #3b82f6;
  --ct-danger: #ef4444;
  --ct-danger-2: #dc2626;
  --ct-ok: #22c55e;
  --ct-warn: #f59e0b;
}

/* ===== Page: قريب من التوب بار بدون فراغ كبير ===== */
.ct-page{
  max-width: 1800px;
  margin: 0 auto;
  padding: 78px 10px 16px !important;
}

/* HERO صغير وما يأخذ مساحة */
.ct-hero{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:center;
  margin-bottom: 6px;
}
.ct-kicker{
  display:inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  opacity: .85;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--ct-line);
}
.ct-title{ margin: 5px 0 2px; font-size: 19px; line-height:1.2; }
.ct-sub{ margin:0; opacity:.78; font-size: 12px; line-height:1.4; }

.ct-profile{
  display:flex;
  gap: 9px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--ct-line);
  min-width: 235px;
}
.ct-avatar{
  width: 38px; height: 38px;
  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; font-size: 13px; }
.ct-role{ opacity:.8; font-size: 11px; margin-top:1px; }
.ct-sync{ opacity:.72; font-size: 11px; margin-top:2px; }

/* ===== Card ===== */
.ct-card{
  border-radius: 14px;
  background: var(--ct-bg);
  border: 1px solid var(--ct-line);
  overflow:hidden;
}

/* ===== Toolbar: كل الأدوات بسطر واحد، وإذا ضاقت الشاشة يعمل Scroll أفقي ===== */
.ct-toolbar{
  position: sticky;
  top: 62px;
  z-index: 80;
  background: rgba(12,14,18,.985);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.13);
  padding: 8px 8px 7px;
}
.ct-row{
  display:flex;
  gap: 8px;
  align-items:flex-end;
}
.ct-row:not(.sub){
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.ct-row:not(.sub) > *{
  flex: 0 0 auto !important;
}
.ct-row.sub{
  margin-top: 5px;
  align-items:center;
  flex-wrap: nowrap;
  overflow-x:auto;
}

.ct-field,
.ct-toolbar .field{
  display:flex;
  flex-direction:column;
  gap: 4px;
  margin: 0 !important;
  min-width: 150px;
}
.ct-field.grow{
  flex: 0 0 270px !important;
  min-width: 270px;
  max-width: 320px;
}
.brand-field{ min-width: 170px !important; }
.ct-field label,
.ct-toolbar .field label{
  font-size: 11px;
  opacity:.8;
  white-space: nowrap;
}

.ct-input,
.ct-toolbar select,
.ct-toolbar input{
  height: 36px;
  border-radius: 10px;
  padding: 0 10px;
  outline:none;
  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(255,255,255,.06) !important;
  color: var(--ct-text) !important;
  min-width: 0;
}
.ct-input:focus,
.ct-toolbar select:focus,
.ct-toolbar input:focus{
  border-color: rgba(59,130,246,.62);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
select option{
  background:#111318 !important;
  color:#fff !important;
}

.ct-actions{
  display:flex;
  gap: 7px;
  flex-wrap: nowrap !important;
  align-items:flex-end;
}
.ct-stats{ font-size: 12px; opacity:.85; white-space: nowrap; }
.sep{ opacity:.6; margin: 0 7px; }
.ct-loading{ font-size: 12px; opacity:.85; white-space: nowrap; }

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

/* ===== Buttons ===== */
.btn{
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.075);
  color: inherit;
  padding: 0 11px;
  cursor:pointer;
  white-space: nowrap;
  transition: .15s ease;
}
.btn:hover{ border-color: rgba(255,255,255,.23); transform: translateY(-1px); }
.btn.tiny{ min-height: 32px; padding: 0 9px; font-size: 12px; border-radius: 9px; }
.btn.primary{ background: rgba(59,130,246,.20); border-color: rgba(59,130,246,.38); }
.btn.danger{
  background: rgba(239,68,68,.20) !important;
  border-color: rgba(239,68,68,.42) !important;
  color: #fff !important;
}
.btn.danger:hover{ background: rgba(220,38,38,.34) !important; }

/* ===== Grid Wrap ===== */
.ct-gridWrap{
  margin-top: 62px !important;
  overflow: auto;
  max-height: calc(100vh - 178px);
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,.12);
  position: relative;
}

/* ===== Excel Grid ===== */
.ct-grid{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 1900px;
}
.ct-grid th,
.ct-grid td{
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-left: 1px solid rgba(255,255,255,.055);
  padding: 8px 9px;
  text-align:left;
  vertical-align: top;
  white-space: nowrap;
}
.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;
}

/* Hide Min column fully */
.c-min,
th.c-min,
td.c-min{
  display:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Widths */
.c-brand{ min-width: 160px; max-width: 210px; }
.c-model{ min-width: 360px !important; max-width: 520px; font-weight: 900; }
.c-desc{ min-width: 330px; max-width: 520px; opacity:.92; }
.c-meters{ min-width: 95px; }
.c-total{ min-width: 85px; font-weight: 900; }
.c-actions{ min-width: 150px; }

.c-brand,
.c-model,
.c-desc{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.28;
}
.ct-num{ font-weight: 800; }
.ct-zero{ opacity:.35; }

/* Inputs inside cells */
.ct-edit{
  width: 100%;
  min-width: 118px;
  height: 32px;
  border-radius: 9px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: inherit;
  outline:none;
}
.c-model .ct-edit{ min-width: 340px !important; }
.c-brand .ct-edit{ min-width: 145px; }
.c-desc .ct-edit{ min-width: 300px; }
.ct-edit:focus{ border-color: rgba(59,130,246,.58); }
.ct-saving{
  border-color: rgba(245,158,11,.48) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.16);
}
.ct-saved{
  border-color: rgba(34,197,94,.45) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.13);
}
.ct-empty{ padding: 14px; text-align:center; opacity:.75; }

/* Warehouse column visibility */
.ct-hide,
th.ct-hide,
td.ct-hide{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Freeze first columns desktop */
.stickL1{
  position: sticky;
  left: 0;
  z-index: 45;
  background: rgba(18,20,26,1);
  box-shadow: 7px 0 0 rgba(0,0,0,.18);
}
.stickL2{
  position: sticky;
  left: 160px;
  z-index: 45;
  background: rgba(18,20,26,1);
  box-shadow: 7px 0 0 rgba(0,0,0,.18);
}
td.stickL1,
td.stickL2{
  background: rgba(12,14,18,.985);
  z-index: 12;
}

/* ===== Moves Modal: fixed overlay فوق الجدول ===== */
.ct-modal{
  position: fixed !important;
  inset: 0 !important;
  display:none !important;
  z-index: 99999 !important;
}
.ct-modal[aria-hidden="false"]{
  display:block !important;
}
.ct-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58);
}
.ct-modal__panel{
  position: relative !important;
  width: min(1040px, calc(100vw - 22px));
  margin: 55px auto 18px;
  border-radius: 15px;
  background: rgba(18,20,26,.985);
  border: 1px solid rgba(255,255,255,.13);
  overflow:hidden;
  max-height: calc(100vh - 80px);
  display:flex;
  flex-direction: column;
  box-shadow: 0 24px 90px rgba(0,0,0,.65);
}
.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; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .ct-page{ padding: 70px 8px 12px !important; }
  .ct-hero{ flex-direction:column; align-items:flex-start; }
  .ct-profile{ min-width: 100%; }
  .ct-toolbar{ top: 56px; }
  .ct-row:not(.sub){ flex-wrap: nowrap !important; overflow-x:auto; }
  .ct-field.grow{ flex-basis: 240px !important; min-width: 240px; }
  .ct-gridWrap{ max-height: calc(100vh - 185px); }
  .ct-toolsGrid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px){
  .ct-title{ font-size: 17px; }
  .ct-sub,.ct-kicker{ display:none; }
  .ct-row.sub{ font-size: 11px; }
  .ct-grid{ min-width: 1150px; }
  .c-model{ min-width: 270px !important; }
  .c-model .ct-edit{ min-width: 250px !important; }
  .c-desc{ min-width: 240px; }
  .ct-edit{ min-width: 88px; }

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

@media (max-width: 480px){
  .ct-page{ padding-left: 6px !important; padding-right: 6px !important; }
  .ct-toolbar{ padding: 7px; }
  .btn{ padding: 0 9px; }
  .ct-field.grow{ flex-basis: 220px !important; min-width:220px; }
  .ct-modal__panel{ margin-top: 42px; max-height: calc(100vh - 58px); }
}


/* تصغير Meters */
.c-meters,
th.c-meters{
  min-width: 70px !important;
  width: 70px !important;
}

/* تصغير أعمدة المستودعات */
.ct-grid th[data-wh],
.ct-grid td[data-wh]{
  min-width: 72px !important;
  width: 72px !important;
  max-width: 72px !important;
}

/* تصغير input داخل المستودعات */
.ct-grid td[data-wh] .ct-edit{
  width: 58px !important;
  min-width: 58px !important;
  text-align: center;
  padding: 0 6px;
}

/* تصغير Total */
.c-total,
th.c-total{
  min-width: 70px !important;
  width: 70px !important;
}

.c-model,
th.c-model{
  min-width: 360px !important;
}

/* خلي الجدول ما يتمدد */
.ct-grid{
  table-layout: fixed !important;
  width: max-content !important;
}

/* منع التمدد */
.ct-grid th,
.ct-grid td{
  white-space: nowrap;
}

/* تحديد عرض ثابت للأعمدة المهمة */
.c-brand, th.c-brand{
  width: 120px !important;
  min-width: 120px !important;
}

.c-model, th.c-model{
  width: 260px !important;
  min-width: 260px !important;
}

.c-desc, th.c-desc{
  width: 220px !important;
  min-width: 220px !important;
}

/* المستودعات تبقى ثابتة */
.ct-grid th[data-wh],
.ct-grid td[data-wh]{
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
}

/* لما تختار مستودع لا يكبر الباقي */
.ct-hide{
  display: none !important;
}

/* المستودع المختار يطلع واضح */
.ct-grid th.wh-active,
.ct-grid td.wh-active{
  background: rgba(59,130,246,.18) !important;
  border-left: 1px solid rgba(59,130,246,.45);
  border-right: 1px solid rgba(59,130,246,.45);
}

/* إلغاء أسهم input number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}



/* =========================
   COUNT PAGE - LIGHT THEME FIX
   يعمل فقط لما الثيم يصير light
========================= */

:root[data-theme="light"] body{
  background:#f4f6fb !important;
  color:#111827 !important;
}

:root[data-theme="light"] .ct-page{
  color:#111827 !important;
}

:root[data-theme="light"] .ct-card,
:root[data-theme="light"] .ct-profile,
:root[data-theme="light"] .ct-pageInfo,
:root[data-theme="light"] .ct-stat,
:root[data-theme="light"] .ct-stats{
  background:#ffffff !important;
  color:#111827 !important;
  border-color:#e5e7eb !important;
}

:root[data-theme="light"] .ct-toolbar{
  background:rgba(255,255,255,.96) !important;
  color:#111827 !important;
  border-bottom:1px solid #e5e7eb !important;
}

:root[data-theme="light"] .ct-kicker{
  background:#eef2ff !important;
  border-color:#dbe3ff !important;
  color:#1e3a8a !important;
}

:root[data-theme="light"] .ct-title,
:root[data-theme="light"] .ct-sub,
:root[data-theme="light"] .ct-name,
:root[data-theme="light"] .ct-role,
:root[data-theme="light"] .ct-sync,
:root[data-theme="light"] .ct-field label{
  color:#111827 !important;
}

:root[data-theme="light"] .ct-input,
:root[data-theme="light"] .ct-edit,
:root[data-theme="light"] input,
:root[data-theme="light"] select{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d1d5db !important;
}

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

:root[data-theme="light"] .ct-gridWrap{
  background:#ffffff !important;
}

:root[data-theme="light"] .ct-grid{
  background:#ffffff !important;
  color:#111827 !important;
}

:root[data-theme="light"] .ct-grid th{
  background:#f1f5f9 !important;
  color:#111827 !important;
  border-bottom:1px solid #d1d5db !important;
}

:root[data-theme="light"] .ct-grid td{
  background:#ffffff !important;
  color:#111827 !important;
  border-bottom:1px solid #eef2f7 !important;
}

:root[data-theme="light"] .ct-grid tbody tr:hover td{
  background:#f8fafc !important;
}

:root[data-theme="light"] .stickL1,
:root[data-theme="light"] .stickL2,
:root[data-theme="light"] td.stickL1,
:root[data-theme="light"] td.stickL2{
  background:#ffffff !important;
  color:#111827 !important;
  box-shadow:8px 0 0 rgba(15,23,42,.06) !important;
}

:root[data-theme="light"] .ct-zero{
  opacity:.55 !important;
  color:#6b7280 !important;
}

:root[data-theme="light"] .btn{
  background:#e5e7eb !important;
  color:#111827 !important;
  border:1px solid #d1d5db !important;
}

:root[data-theme="light"] .btn:hover{
  background:#dbe1ea !important;
}

:root[data-theme="light"] .btn.primary{
  background:#2563eb !important;
  color:#ffffff !important;
  border-color:#2563eb !important;
}

:root[data-theme="light"] .btn.danger{
  background:#ef4444 !important;
  color:#ffffff !important;
  border-color:#ef4444 !important;
}

:root[data-theme="light"] .wh-active{
  background:#dbeafe !important;
  color:#111827 !important;
  border-left:1px solid #3b82f6 !important;
  border-right:1px solid #3b82f6 !important;
}

:root[data-theme="light"] .ct-modal__panel{
  background:#ffffff !important;
  color:#111827 !important;
  border-color:#e5e7eb !important;
}

:root[data-theme="light"] .ct-modal__head,
:root[data-theme="light"] .ct-modal__tools{
  border-color:#e5e7eb !important;
}

:root[data-theme="light"] .ct-moves th{
  background:#f1f5f9 !important;
  color:#111827 !important;
}

:root[data-theme="light"] .ct-moves td{
  background:#ffffff !important;
  color:#111827 !important;
}

:root[data-theme="light"] .ct-empty,
:root[data-theme="light"] .ct-loading{
  color:#374151 !important;
}