/* حكايتي (Hikayaty) Color Scheme - Based on Website Design */

:root {
  /* Primary Brand Colors */
  --hikayaty-beige: #F5F1E8;
  --hikayaty-cream: #F7F3E9;
  --hikayaty-brown: #8B4513;
  --hikayaty-dark-brown: #6B3410;
  --hikayaty-blue: #2C3E50;
  --hikayaty-dark-blue: #1A252F;
  --hikayaty-yellow: #FFD700;
  --hikayaty-warm-yellow: #F4D03F;
  
  /* Secondary Colors */
  --hikayaty-light-grey: #E8E8E8;
  --hikayaty-grey: #95A5A6;
  --hikayaty-green: #27AE60;
  --hikayaty-blue-accent: #3498DB;
  --hikayaty-stone: #BDC3C7;
  
  /* Text Colors */
  --hikayaty-text-dark: #2C3E50;
  --hikayaty-text-brown: #8B4513;
  --hikayaty-text-light: #7F8C8D;
  --hikayaty-text-muted: #95A5A6;
  
  /* Background Colors */
  --hikayaty-bg-primary: #F5F1E8;
  --hikayaty-bg-secondary: #F7F3E9;
  --hikayaty-bg-card: #FFFFFF;
  --hikayaty-bg-overlay: rgba(245, 241, 232, 0.95);
  
  /* Border Colors */
  --hikayaty-border-light: #E8E8E8;
  --hikayaty-border-medium: #BDC3C7;
  --hikayaty-border-dark: #95A5A6;
  
  /* Status Colors */
  --hikayaty-success: #27AE60;
  --hikayaty-warning: #F39C12;
  --hikayaty-danger: #E74C3C;
  --hikayaty-info: #3498DB;
  
  /* Button Colors */
  --hikayaty-btn-primary: #8B4513;
  --hikayaty-btn-primary-hover: #6B3410;
  --hikayaty-btn-secondary: #2C3E50;
  --hikayaty-btn-secondary-hover: #1A252F;
  --hikayaty-btn-accent: #FFD700;
  --hikayaty-btn-accent-hover: #F4D03F;
}

/* Global Body Styling */
body {
  background-color: var(--hikayaty-bg-primary);
  color: var(--hikayaty-text-dark);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header/Navigation Styling */
.navbar {
  background-color: var(--hikayaty-bg-secondary) !important;
  border-bottom: 1px solid var(--hikayaty-border-light);
}

.navbar-brand {
  color: var(--hikayaty-brown) !important;
  font-weight: bold;
  font-size: 1.5rem;
}

.navbar-nav .nav-link {
  color: var(--hikayaty-text-dark) !important;
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: var(--hikayaty-brown) !important;
}

/* Button Styling */
.btn-primary {
  background-color: var(--hikayaty-btn-primary);
  border-color: var(--hikayaty-btn-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--hikayaty-btn-primary-hover);
  border-color: var(--hikayaty-btn-primary-hover);
}

.btn-secondary {
  background-color: var(--hikayaty-btn-secondary);
  border-color: var(--hikayaty-btn-secondary);
  color: white;
}

.btn-secondary:hover {
  background-color: var(--hikayaty-btn-secondary-hover);
  border-color: var(--hikayaty-btn-secondary-hover);
}

.btn-warning {
  background-color: var(--hikayaty-btn-accent);
  border-color: var(--hikayaty-btn-accent);
  color: var(--hikayaty-text-dark);
}

.btn-warning:hover {
  background-color: var(--hikayaty-btn-accent-hover);
  border-color: var(--hikayaty-btn-accent-hover);
  color: var(--hikayaty-text-dark);
}

/* Card Styling */
.card {
  background-color: var(--hikayaty-bg-card);
  border: 1px solid var(--hikayaty-border-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: var(--hikayaty-bg-secondary);
  border-bottom: 1px solid var(--hikayaty-border-light);
  color: var(--hikayaty-text-dark);
}

/* Form Styling */
.form-control {
  border: 1px solid var(--hikayaty-border-medium);
  background-color: var(--hikayaty-bg-card);
}

.form-control:focus {
  border-color: var(--hikayaty-brown);
  box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.25);
}

/* Alert Styling */
.alert-success {
  background-color: rgba(39, 174, 96, 0.1);
  border-color: var(--hikayaty-success);
  color: var(--hikayaty-success);
}

.alert-warning {
  background-color: rgba(243, 156, 18, 0.1);
  border-color: var(--hikayaty-warning);
  color: var(--hikayaty-warning);
}

.alert-danger {
  background-color: rgba(231, 76, 60, 0.1);
  border-color: var(--hikayaty-danger);
  color: var(--hikayaty-danger);
}

.alert-info {
  background-color: rgba(52, 152, 219, 0.1);
  border-color: var(--hikayaty-info);
  color: var(--hikayaty-info);
}

/* Table Styling */
.table {
  background-color: var(--hikayaty-bg-card);
}

.table thead th {
  background-color: var(--hikayaty-bg-secondary);
  border-bottom: 2px solid var(--hikayaty-border-medium);
  color: var(--hikayaty-text-dark);
  font-weight: 600;
}

.table tbody tr:hover {
  background-color: var(--hikayaty-bg-secondary);
}

/* Modal Styling */
.modal-content {
  background-color: var(--hikayaty-bg-card);
  border: 1px solid var(--hikayaty-border-light);
}

.modal-header {
  background-color: var(--hikayaty-bg-secondary);
  border-bottom: 1px solid var(--hikayaty-border-light);
}

.modal-footer {
  background-color: var(--hikayaty-bg-secondary);
  border-top: 1px solid var(--hikayaty-border-light);
}

/* Badge Styling */
.badge-primary {
  background-color: var(--hikayaty-brown);
}

.badge-secondary {
  background-color: var(--hikayaty-blue);
}

.badge-success {
  background-color: var(--hikayaty-success);
}

.badge-warning {
  background-color: var(--hikayaty-warning);
  color: var(--hikayaty-text-dark);
}

.badge-danger {
  background-color: var(--hikayaty-danger);
}

/* Text Color Utilities */
.text-hikayaty-brown {
  color: var(--hikayaty-brown) !important;
}

.text-hikayaty-blue {
  color: var(--hikayaty-blue) !important;
}

.text-hikayaty-yellow {
  color: var(--hikayaty-yellow) !important;
}

/* Background Color Utilities */
.bg-hikayaty-beige {
  background-color: var(--hikayaty-bg-primary) !important;
}

.bg-hikayaty-cream {
  background-color: var(--hikayaty-bg-secondary) !important;
}

.bg-hikayaty-brown {
  background-color: var(--hikayaty-brown) !important;
}

.bg-hikayaty-blue {
  background-color: var(--hikayaty-blue) !important;
}

/* Border Color Utilities */
.border-hikayaty {
  border-color: var(--hikayaty-border-medium) !important;
}

.border-hikayaty-light {
  border-color: var(--hikayaty-border-light) !important;
}

/* Special Effects */
.hikayaty-glow {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.hikayaty-sparkle {
  position: relative;
}

.hikayaty-sparkle::before {
  content: "✨";
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.8rem;
  animation: sparkle 2s infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* RTL Support */
[dir="rtl"] .navbar-nav {
  direction: rtl;
}

[dir="rtl"] .hikayaty-sparkle::before {
  right: auto;
  left: -5px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1.2rem;
  }
  
  .btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
}

/* Print Styles */
@media print {
  .navbar, .btn, .modal {
    display: none !important;
  }
  
  body {
    background-color: white !important;
    color: black !important;
  }
  
  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}