/* Unfold Custom Styles for Al-Quran App */

/* Islamic-themed color variables */
:root {
  --islamic-green: #2D5A27;
  --islamic-gold: #D4AF37;
  --islamic-blue: #1B365D;
  --islamic-light: #F8F9FA;
}

/* Custom Islamic color scheme for admin */
.bg-primary-600 {
  background-color: var(--islamic-green) !important;
}

.text-primary-600 {
  color: var(--islamic-green) !important;
}

/* Login page customization */
.login-form {
  background: linear-gradient(135deg, rgba(45, 90, 39, 0.1), rgba(27, 54, 93, 0.1));
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

/* Header customization */
.admin-header {
  background: linear-gradient(90deg, var(--islamic-green), var(--islamic-blue));
}

/* Sidebar Islamic styling */
.sidebar {
  background: linear-gradient(180deg,
    rgba(45, 90, 39, 0.95) 0%,
    rgba(27, 54, 93, 0.95) 100%
  );
}

.sidebar .nav-link:hover {
  background: rgba(212, 175, 55, 0.2);
  color: var(--islamic-gold);
}

/* Card styling with Islamic pattern inspiration */
.card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(45, 90, 39, 0.1);
}

.card-header {
  background: linear-gradient(90deg,
    rgba(45, 90, 39, 0.1),
    rgba(27, 54, 93, 0.1)
  );
  border-bottom: 2px solid var(--islamic-green);
}

/* Table styling */
.table th {
  background-color: rgba(45, 90, 39, 0.1);
  color: var(--islamic-blue);
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(45, 90, 39, 0.05);
}

/* Button styling */
.btn-primary {
  background: linear-gradient(45deg, var(--islamic-green), var(--islamic-blue));
  border: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(45deg, var(--islamic-blue), var(--islamic-green));
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Search box Islamic styling */
.search-box {
  border: 2px solid rgba(45, 90, 39, 0.3);
  border-radius: 25px;
  transition: border-color 0.3s ease;
}

.search-box:focus {
  border-color: var(--islamic-green);
  box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
}

/* Dashboard widgets */
.dashboard-widget {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.9),
    rgba(248, 249, 250, 0.9)
  );
  border-left: 4px solid var(--islamic-green);
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.dashboard-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Form styling */
.form-control {
  border: 1px solid rgba(45, 90, 39, 0.3);
  border-radius: 6px;
  transition: border-color 0.3s ease;
}

.form-control:focus {
  border-color: var(--islamic-green);
  box-shadow: 0 0 0 2px rgba(45, 90, 39, 0.1);
}

/* Navigation breadcrumb */
.breadcrumb {
  background: linear-gradient(90deg,
    rgba(45, 90, 39, 0.05),
    rgba(27, 54, 93, 0.05)
  );
  border-radius: 25px;
}

.breadcrumb-item.active {
  color: var(--islamic-green);
  font-weight: 600;
}

/* Islamic pattern decoration */
.islamic-pattern::before {
  content: "☪";
  color: var(--islamic-gold);
  font-size: 1.2em;
  margin-right: 8px;
}

/* Admin actions */
.admin-actions {
  background: rgba(45, 90, 39, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(45, 90, 39, 0.1);
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .sidebar {
    background: var(--islamic-green);
  }

  .dashboard-widget {
    margin-bottom: 1rem;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] {
  --islamic-green: #3D6A37;
  --islamic-gold: #E4BF47;
  --islamic-blue: #2B466D;
}

[data-theme="dark"] .card {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(45, 90, 39, 0.3);
}

[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg,
    rgba(45, 90, 39, 0.9) 0%,
    rgba(27, 54, 93, 0.9) 100%
  );
}

/* Animation for loading states */
@keyframes islamicPulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

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