/* ========================================
   تصميم غامق مع ألوان بيضاء فاتحة
   ======================================== */
@font-face {
  font-family: 'Poppins';
  src: url('./alfont_com_Cairo-Regular.ttf');
}

* {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
  background-color: #181619 !important;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.6;
}

p {
  margin: 0 !important;
}

a {
  text-decoration: none;
}

/* ========================================
   الأزرار
   ======================================== */
.btn {
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  border: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-primary, .btn-primary:hover {
  background-color: #a96584;
  border-color: #a96584;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(169, 101, 132, 0.3);
}

.btn-primary:hover {
  background-color: #8b5570;
  box-shadow: 0 4px 8px rgba(169, 101, 132, 0.4);
}

.btn-success {
  background-color: #46a842;
  border: none;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(70, 168, 66, 0.3);
}

.btn-success:hover {
  background-color: #3d8c3a;
  box-shadow: 0 4px 8px rgba(70, 168, 66, 0.4);
}

.btn-info {
  background-color: #60a5fa;
  border: none;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(96, 165, 250, 0.3);
}

.btn-info:hover {
  background-color: #3b82f6;
  box-shadow: 0 4px 8px rgba(96, 165, 250, 0.4);
}

/* ========================================
   النماذج والحقول
   ======================================== */
.form-control, .form-select {
  border-radius: 8px;
  border: 2px solid #333;
  padding: 0.8rem 1rem;
  background-color: #222;
  color: #ffffff;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-control:focus, .form-select:focus {
  border-color: #a96584;
  background-color: #2a2a2a;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(169, 101, 132, 0.2);
  outline: none;
}

.form-control::placeholder {
  color: #999;
}

.form-label {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* ========================================
   الجداول
   ======================================== */
.table {
  background-color: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 1.5rem;
  border: 1px solid #333;
}

.table->ad {
  background-color: #a96584;
  color: #ffffff;
}

.table->ad th {
  border: none;
  padding: 1rem;
  font-weight: 600;
  border-bottom: 2px solid #8b5570;
}

.table tbody {
  background-color: #181619;
}

.table tbody tr {
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #2a2a2a;
}

.table tbody tr:hover {
  background-color: #222;
}

.table tbody tr:last-child {
  border-bottom: none;
}

.table td, .table th {
  background-color: transparent !important;
  color: #ffffff !important;
  border: none;
  padding: 1rem;
  vertical-align: middle;
}

.table td a, .table th a {
  color: #a96584 !important;
  transition: color 0.2s ease;
}

.table td a:hover, .table th a:hover {
  color: #c980a5 !important;
  text-decoration: underline;
}

/* ========================================
   البطاقات والأقسام
   ======================================== */
.card, .device, .branch-div, .branch-div-items-filter {
  background-color: #1a1a1a;
  border-radius: 12px;
  border: 1px solid #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.card:hover, .device:hover, .branch-div:hover, .branch-div-items-filter:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: #a96584;
}

.device.border-info, .branch-div.border-info, .branch-div-items-filter.border-info {
  border: 2px solid #a96584;
  background-color: #222;
  box-shadow: 0 2px 8px rgba(169, 101, 132, 0.3);
}

/* ========================================
   قائمة جانبية (Sidebar)
   ======================================== */
.side-bar-offcanvas {
  background-color: #1a1a1a !important;
  color: #ffffff;
  border-left: 1px solid #333;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
}

.side-bar-offcanvas a {
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin: 0.25rem 0.5rem;
  display: block;
}

.side-bar-offcanvas a:hover {
  background-color: #2a2a2a;
  color: #a96584;
}

/* ========================================
   النوافذ المنبثقة (Modals)
   ======================================== */
.modal-content {
  background-color: #1a1a1a;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid #333;
  color: #ffffff;
}

/* زر الإغلاق X باللون الأبيض */
.modal-header .close,
.modal-header button.close {
  color: #ffffff !important;
}

.modal-header .close:hover,
.modal-header button.close:hover {
  color: #ffffff !important;
  opacity: 0.8;
}

/* تحسينات خاصة لـ open_device_modal */
#open_device_modal .modal-header .close,
#open_device_modal .modal-header button.close {
  color: #ffffff !important;
}

#open_device_modal .modal-header .close:hover,
#open_device_modal .modal-header button.close:hover {
  color: #ffffff !important;
  opacity: 0.8;
}

#open_device_modal .btn-primary,
#open_device_modal .btn-primary {
  color: #ffffff !important;
}

#open_device_modal .btn-primary:hover,
#open_device_modal .btn-primary:hover {
  color: #ffffff !important;
}

#open_device_modal .modal-header h5,
#open_device_modal .modal-header h5 {
  color: #ffffff;
}

#open_device_modal .form-control,
#open_device_modal .form-control {
  color: #ffffff;
}

#open_device_modal .form-control::placeholder,
#open_device_modal .form-control::placeholder {
  color: #999;
}

#open_device_modal .form-label,
#open_device_modal .form-label {
  color: #ffffff;
}

/* Modal خاص بالجهاز - نصوص بيضاء */
#colse_device_modal1 .modal-content,
#colse_device_modal .modal-content {
  color: #ffffff;
}

#colse_device_modal1 .modal-header h5,
#colse_device_modal .modal-header h5 {
  color: #ffffff;
}

#colse_device_modal1 .modal-body,
#colse_device_modal .modal-body {
  color: #ffffff;
}

#colse_device_modal1 .modal-footer,
#colse_device_modal .modal-footer {
  color: #ffffff;
}

#colse_device_modal1 .text-danger,
#colse_device_modal .text-danger {
  color: #ffffff !important;
}

#colse_device_modal1 .form-control,
#colse_device_modal .form-control {
  color: #ffffff;
}

#colse_device_modal1 .form-control::placeholder,
#colse_device_modal .form-control::placeholder {
  color: #999;
}

#colse_device_modal1 .form-label,
#colse_device_modal .form-label {
  color: #ffffff;
}
#open_device_modal .form-label,
#open_device_modal .form-label {
  color: #ffffff;
}

/* ========================================
   Offcanvas
   ======================================== */
.offcanvas {
  background-color: #1a1a1a;
  border-right: 1px solid #333;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
}

.offcanvas-header {
  border-bottom: 1px solid #333;
  padding: 1.25rem 1.5rem;
  background-color: #222;
}

.offcanvas-body {
  padding: 1.5rem;
  background-color: #1a1a1a;
}

/* ========================================
   حالات الأجهزة
   ======================================== */
.state-span {
  width: 28px;
  height: 28px;
  display: inline-block;
  border-radius: 50%;
  top: -1vh;
  right: -1vh;
  position: absolute;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.state-span:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.bg-success {
  background-color: #46a842;
  box-shadow: 0 2px 4px rgba(70, 168, 66, 0.3);
}

.bg-danger {
  background-color: #c0183c;
  box-shadow: 0 2px 4px rgba(192, 24, 60, 0.3);
}

/* ========================================
   الأزرار الدائرية
   ======================================== */
.add-price-list-item, .remove-price-list-item, .remove-item-to-order-sapn, .add-item-to-order-sapn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.add-price-list-item, .add-item-to-order-sapn {
  background-color: #46a842;
}

.remove-price-list-item, .remove-item-to-order-sapn {
  background-color: #c0183c;
}

.add-price-list-item:hover, .add-item-to-order-sapn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(70, 168, 66, 0.4);
}

.remove-price-list-item:hover, .remove-item-to-order-sapn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(192, 24, 60, 0.4);
}

/* ========================================
   مؤشر المؤشر
   ======================================== */
.pointer {
  cursor: pointer;
  transition: all 0.2s ease;
}

.pointer:hover {
  filter: brightness(1.1);
}

/* ========================================
   شريط التمرير
   ======================================== */
.scroll {
  overflow-y: scroll;
}

.scroll::-webkit-scrollbar {
  width: 8px;
}

.scroll::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 8px;
}

.scroll::-webkit-scrollbar-thumb {
  background: #a96584;
  border-radius: 8px;
  border: 2px solid #1a1a1a;
  transition: background 0.2s ease;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: #8b5570;
}

/* ========================================
   Datepicker
   ======================================== */
.air-datepicker--pointer {
  display: none;
}

.air-datepicker {
  z-index: 1051 !important;
  position: absolute;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.air-datepicker-cell.-today- {
  background-color: rgba(169, 101, 132, 0.2);
  color: #a96584;
  border-radius: 4px;
  font-weight: 600;
}

.air-datepicker-cell.-selected- {
  background-color: #a96584;
  color: #ffffff;
  border-radius: 4px;
}

.datepicker-footer {
  padding: 1rem;
  background-color: #222;
  text-align: center;
  border-top: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 8px 8px;
}

.datepicker-footer .selected-date {
  font-weight: 600;
  color: #ffffff;
}

.datepicker-footer .set-date-btn {
  background-color: #a96584;
  color: #ffffff;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(169, 101, 132, 0.3);
}

.datepicker-footer .set-date-btn:hover {
  background-color: #8b5570;
  box-shadow: 0 4px 8px rgba(169, 101, 132, 0.4);
}

/* ========================================
   عناصر خاصة
   ======================================== */
.user-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #a96584;
  box-shadow: 0 2px 4px rgba(169, 101, 132, 0.3);
  transition: all 0.2s ease;
}

.user-image:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(169, 101, 132, 0.4);
}

.border-primary-bottom {
  border-bottom: 2px solid #a96584;
}

.rounded-20 {
  border-radius: 20px;
}

.container {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.left-column, .right-column {
  width: 50%;
}

.right-column {
  direction: ltr;
}

.in-user-device {
  background-color: #1a1a1a;
}

/* ========================================
   صفحة تسجيل الدخول
   ======================================== */
.login {
  height: 100vh;
  background: linear-gradient(135deg, #181619, #222);
}

.login img {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ========================================
   الأيقونات SVG
   ======================================== */
svg {
  transition: all 0.2s ease;
  fill: #ffffff;
  stroke: #ffffff;
}

svg:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.1));
}

/* ========================================
   التجاوب
   ======================================== */
@media (max-width: 768px) {
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .table {
    font-size: 0.9rem;
    border-radius: 6px;
  }

  .modal-content {
    margin: 1rem;
    border-radius: 8px;
  }

  .card, .device, .branch-div {
    border-radius: 8px;
  }
}

/* ========================================
   تحسينات إضافية
   ======================================== */
.text-success {
  color: #46a842 !important;
}

.text-danger {
  color: #c0183c !important;
}

.text-warning {
  color: #f59e0b !important;
}

.text-primary {
  color: #a96584 !important;
}

/* تحسينات للأجهزة */
.avaliable-device {
  background-color: #1a1a1a;
  border: 1px solid #333;
}

.in-user-device {
  background-color: #1a1a1a;
  border: 1px solid #c0183c;
}

/* تحسينات للنصوص - بيضاء */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
  font-weight: 700;
}

h4 {
  margin-bottom: 0.5rem;
}

/* تحسينات للروابط - بيضاء */
.NoColor {
  color: #ffffff !important;
  transition: color 0.2s ease;
}

.NoColor:hover {
  color: #a96584 !important;
}

/* تحسينات للأدوات */
.tasks-table {
  background-color: #1a1a1a;
}

/* تحسينات للقوائم - بيضاء */
.side-li {
  margin: 0.25rem 0;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.side-li:hover {
  background-color: #2a2a2a;
}

/* تحسينات للأدوات التفاعلية */
.filter-tasks-btns .btn {
  min-width: 120px;
  font-weight: 600;
}

/* تحسينات للتأثيرات */
.team-emps, .scroll {
  background-color: #1a1a1a;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* تحسينات العامة */
.offcanvas-start {
  width: 40% !important;
}

/* تحسينات للتجربة */
[type="button"] {
  cursor: pointer;
}

/* إضافات للألوان */
.bg-info {
  background-color: rgba(169, 101, 132, 0.2) !important;
}

.border-info {
  border: 2px solid #a96584 !important;
}