/* ============================================================
   ELHASSANE STUDIO - AI Construction Manager
   الملف: public/css/dashboards.css - أنماط لوحات التحكم
   ============================================================ */

/* ============================================================
   حاويات العناصر
   ============================================================ */

.widget-container {
  transition: all 0.3s ease;
}

.widget-container:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.widget-container.editable {
  cursor: grab;
  border-color: #3b82f6;
  border-width: 2px;
}

.widget-container.editable:active {
  cursor: grabbing;
}

.widget-container .widget-header {
  transition: background 0.2s;
}

.widget-container .widget-body {
  transition: min-height 0.3s;
}

/* ============================================================
   عناصر KPI
   ============================================================ */

.kpi-item {
  transition: all 0.3s ease;
}

.kpi-item:hover {
  transform: scale(1.02);
  background: #e2e8f0;
}

.dark .kpi-item:hover {
  background: #4a5568;
}

/* ============================================================
   أدوات المصمم
   ============================================================ */

.dashboard-builder .dashboard-toolbar {
  background: white;
  border-radius: 12px 12px 0 0;
}

.dark .dashboard-builder .dashboard-toolbar {
  background: #1e1e3a;
}

.dashboard-grid {
  min-height: 400px;
  transition: all 0.3s;
}

.dashboard-grid.dragover {
  background: rgba(59, 130, 246, 0.05);
  border: 2px dashed #3b82f6;
}

/* ============================================================
   لوحة العناصر (Palette)
   ============================================================ */

.widget-option {
  transition: all 0.3s ease;
}

.widget-option:hover {
  transform: translateY(-4px);
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.widget-option:active {
  transform: scale(0.95);
}

/* ============================================================
   التقويم
   ============================================================ */

.calendar-grid {
  direction: rtl;
}

.calendar-grid > div {
  padding: 4px 2px;
  border-radius: 4px;
  transition: all 0.2s;
}

.calendar-grid > div:not(:empty):hover {
  background: #e2e8f0;
  cursor: pointer;
}

.dark .calendar-grid > div:not(:empty):hover {
  background: #4a5568;
}

/* ============================================================
   عناصر السحب والإفلات
   ============================================================ */

.widget-container.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.widget-container.drag-over {
  border-color: #3b82f6;
  border-style: dashed;
  background: rgba(59, 130, 246, 0.05);
}

/* ============================================================
   استجابة للشاشات الصغيرة
   ============================================================ */

@media (max-width: 768px) {
  .dashboard-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }
  
  .dashboard-toolbar .flex.items-center.gap-3 {
    flex-direction: column;
    align-items: stretch !important;
  }
  
  .dashboard-toolbar input[type="text"] {
    width: 100% !important;
  }
  
  .widget-container {
    margin-bottom: 16px;
  }
}

/* ============================================================
   تحميل وتأثيرات
   ============================================================ */

.widget-loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ============================================================
   ألوان العناصر حسب النوع — لون واحد موحّد (عرض حديث متناسق)
   ============================================================ */

.widget-type-kpi .widget-header,
.widget-type-chart .widget-header,
.widget-type-table .widget-header,
.widget-type-projects_list .widget-header,
.widget-type-tasks_list .widget-header,
.widget-type-expenses_summary .widget-header,
.widget-type-workers_stats .widget-header,
.widget-type-materials_status .widget-header,
.widget-type-calendar .widget-header,
.widget-type-weather .widget-header {
  border-left: 4px solid var(--brand-secondary);
}

.dark .widget-type-kpi .widget-header,
.dark .widget-type-chart .widget-header,
.dark .widget-type-table .widget-header,
.dark .widget-type-projects_list .widget-header,
.dark .widget-type-tasks_list .widget-header,
.dark .widget-type-expenses_summary .widget-header,
.dark .widget-type-workers_stats .widget-header,
.dark .widget-type-materials_status .widget-header,
.dark .widget-type-calendar .widget-header,
.dark .widget-type-weather .widget-header {
  border-left-color: var(--brand-secondary-dark);
}