/* === CSB Portal – Dark UI, White Text === */
.csb-portal{font-family:Arial, Helvetica, sans-serif}

/* Tabs */
.csb-tabs{display:flex;gap:8px;margin:8px 0 16px}
.csb-tab{
  padding:8px 12px;border:1px solid #334155 !important;border-radius:10px;
  background:#111827 !important;color:#fff !important;text-decoration:none
}
.csb-tab.active{background:#0f172a !important;color:#fff !important;border-color:#475569 !important}

/* Cards */
.csb-card{
  background:#0f172a !important;border:1px solid #111827 !important;color:#fff !important;
  border-radius:16px;padding:18px;box-shadow:0 10px 25px rgba(2,6,23,.2)
}

/* Elementor-proof white text */
.elementor .elementor-widget-container .elementor-shortcode
.csb-portal .csb-card.dark :is(h1,h2,h3,h4,h5,h6,label,p,span,strong,small,a,.muted){
  color:#ffffff !important;
}
.csb-card.dark *, .csb-card.dark *:not(svg){ color:#ffffff !important; fill:#ffffff !important }

/* Divider */
.csb-card hr{border:0;height:1px;background:#23324a !important;opacity:1 !important;margin:12px 0}

/* Form elements */
.csb-card.dark input,
.csb-card.dark select,
.csb-card.dark textarea,
.csb-card.dark button{
  background:#111827 !important;color:#fff !important;border:1px solid #1f2937 !important;
  border-radius:10px;padding:10px;outline:none
}
.csb-card.dark input::placeholder,
.csb-card.dark textarea::placeholder{color:rgba(255,255,255,.75) !important}
.csb-card.dark select, .csb-card.dark select option{color:#fff !important;background:#111827 !important}

/* Buttons */
.csb-card.dark .button,
.csb-card.dark .button-primary,
.csb-card.dark .button-secondary,
.csb-portal button{
  background:#1f2937 !important;color:#fff !important;border:1px solid #334155 !important;
  border-radius:10px;padding:10px 14px;cursor:pointer;
  transition:transform .06s ease, background .2s ease, border-color .2s ease
}
.csb-card.dark .button:hover,
.csb-card.dark .button-primary:hover,
.csb-card.dark .button-secondary:hover,
.csb-portal button:hover{
  background:#0b1220 !important;border-color:#475569 !important;color:#fff !important;transform:translateY(-1px)
}
.csb-card.dark .button-link-delete{background:transparent !important;border:none !important;color:#ffd7d7 !important;cursor:pointer}
.csb-card.dark .button-link-delete:hover{color:#fff !important;text-decoration:underline}

/* Auth grid & forms */
.csb-auth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.csb-form{display:flex;flex-direction:column;gap:10px}
.req{color:#fff !important;margin-left:4px}

/* Model preview + images */
.csb-model-select{display:flex;align-items:center;gap:10px}
.csb-model-select img{
  width:48px;height:48px;object-fit:cover;border-radius:15%;border:1px solid #334155 !important;background:#0f172a !important
}

/* Cars list (fixed 2 cols on desktop) */
.csb-cars{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← عمودين ثابتين */
  gap:12px;
}
.csb-cars li{
  display:flex;gap:10px;align-items:center;background:#111827 !important;border-radius:12px;padding:10px;border:1px solid #1f2937 !important;color:#fff !important
}
.csb-cars li img{border-radius:15%}
.csb-brand-logo{vertical-align:middle;border-radius:6px;display:inline-block;margin-right:6px}

/* Notices + Alerts */
.csb-notice{
  background:#e6fffb !important;
  color:#000000 !important;
  border:1px solid #a5f3fc !important;
  padding:10px 12px;border-radius:10px;margin:8px 0;font-weight:600;font-size:15px;
  display:flex;align-items:center;gap:6px;
}
.csb-notice::before{content:"ℹ️"; font-size:16px;}
.csb-alert{padding:10px 12px;border-radius:10px;margin:8px 0;font-weight:600;font-size:15px;display:flex;align-items:center;gap:6px}
.csb-alert-ok{background:#dcfce7;color:#000000 !important;border:1px solid #bbf7d0}
.csb-alert-ok::before{content:"✅"; font-size:16px}
.csb-alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}

/* Focus */
.csb-card.dark input:focus, .csb-card.dark select:focus, .csb-card.dark textarea:focus{
  border-color:#0ea5b7 !important;box-shadow:0 0 0 3px rgba(14,165,183,.25) !important
}

/* Ensure buttons text white */
.csb-portal .button, .csb-portal .button-primary, .csb-portal .button-secondary{color:#fff !important}

/* Fix thin white line under selects on some themes */
.csb-card.dark select { background-clip: padding-box !important; }

/* Responsive */
@media (max-width:768px){
  .csb-model-select img{width:40px;height:40px}
  .csb-tabs{flex-wrap:wrap}
  /* History/Cars grid becomes 1 column on mobile */
  .csb-cars{ grid-template-columns: 1fr; }
}

/* History table */
.csb-table{ width:100%; border-collapse:collapse; margin:8px 0 16px; }
.csb-table th, .csb-table td{ border:1px solid #23324a; padding:8px 10px; }
.csb-table th{ text-align:left; background:#0b1220; }
.csb-subcard{margin:10px 0 18px}

/* Admin grid (Quick Add) */
.csb-admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
/* ===== FORCE 2 COLUMNS IN HISTORY/CARS GRID ===== */
.csb-card .csb-history .csb-cars,
.csb-portal .csb-cars{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* عمودين ثابتين */
  gap: 12px !important;
}

/* اتأكد إن العناصر جوا الليست مش بتاخد عرض ثابت من أي CSS تاني */
.csb-portal .csb-cars > li{
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important; /* المحتوى جوه الليست يفضل flex للداخل فقط */
}

/* موبايل: عمود واحد */
@media (max-width: 768px){
  .csb-card .csb-history .csb-cars,
  .csb-portal .csb-cars{
    grid-template-columns: 1fr !important;
  }
}

/* ===== FORCE 2 COLUMNS ON HISTORY ONLY ===== */
.csb-portal .csb-card.dark .csb-history ul.csb-cars.csb-grid-2{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  /* لو أي حد كان مديها display:flex */
  grid-auto-flow: row !important;
}

/* اتأكد إن العناصر مش محكومة بعرض 25% من ستايل تاني */
.csb-portal .csb-card.dark .csb-history ul.csb-cars.csb-grid-2 > li{
  width: auto !important;
  max-width: 100% !important;
  flex: initial !important;
}

/* موبايل وتابلت: عمود واحد */
@media (max-width: 992px){
  .csb-portal .csb-card.dark .csb-history ul.csb-cars.csb-grid-2{
    grid-template-columns: 1fr !important;
  }
}