@import "tailwindcss";
@source "../../**/*.php";
@source "../../../app/**/*.php";
@import './fonts.css';

@theme {
  --color-background: #eef7fb;
  --color-foreground: #0a1f33;
  --color-card: #ffffff;
  --color-card-foreground: #0a1f33;
  --color-popover: #ffffff;
  --color-popover-foreground: #0a1f33;
  --color-primary: #0d3b5c;
  --color-primary-foreground: #ffffff;
  --color-secondary: #d4eef7;
  --color-secondary-foreground: #0a1f33;
  --color-muted: #e4f2f9;
  --color-muted-foreground: #4a7a90;
  --color-accent: #c9a84c;
  --color-accent-foreground: #ffffff;
  --color-destructive: #d4183d;
  --color-destructive-foreground: #ffffff;
  --color-border: rgba(13, 59, 92, 0.12);
  --color-input: transparent;
  --color-input-background: #e4f2f9;
  --color-switch-background: #9ec8da;
  --color-ring: #0d3b5c;
  --radius-sm: calc(1rem - 4px);
  --radius-md: calc(1rem - 2px);
  --radius-lg: 1rem;
  --radius-xl: calc(1rem + 4px);
}

body {
  font-family: 'Vazirmatn', sans-serif;
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/* Animations matching React app */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ping {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(2); opacity: 0; }
}

.animate-spin-slow {
  animation: spin 25s linear infinite;
}

.animate-spin-slow-reverse {
  animation: spin 35s linear infinite reverse;
}

/* Custom class scroll transition */
.nav-scrolled {
  background-color: rgba(13, 59, 92, 0.96) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 25px -5px rgba(13, 59, 92, 0.3);
}

/* Lightbox overlay styling */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(7, 24, 39, 0.95);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

#lightbox.active {
  display: flex;
}

/* Guarantee colors and hover for admin panel */
.bg-accent {
  background-color: #c9a84c !important;
  color: #ffffff !important;
}

.bg-accent:hover {
  background-color: #b2923b !important;
  color: #ffffff !important;
}

.hover\:bg-accent-hover:hover {
  background-color: #b2923b !important;
  color: #ffffff !important;
}

/* Site-wide Animations and Transitions */
.transition-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.transition-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

html {
  transition: background-color 0.4s ease, color 0.4s ease;
}

body {
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Modal open/close animation */
#customConfirmContent {
  transition: all 0.2s ease-in-out;
}

/* ════════════════════ GLOBAL DARK MODE OVERRIDES ════════════════════ */
/* Fixes contrast at a shared level instead of per-component */
html.dark body { 
  background-color: #0f172a !important; 
  color: #f1f5f9 !important; 
}
html.dark .bg-slate-50, html.dark .bg-gray-50, html.dark .bg-white { 
  background-color: #1e293b !important; 
  border-color: #334155 !important; 
  color: #f1f5f9 !important; 
}
html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700, html.dark .text-gray-600, html.dark .text-[#0a1f33] { 
  color: #e2e8f0 !important; 
}
html.dark .text-primary {
  color: #9ec8da !important;
}
html.dark .text-gray-500, html.dark .text-gray-400 { 
  color: #94a3b8 !important; 
}
html.dark .border-gray-200, html.dark .border-gray-100, html.dark .border-gray-300 { 
  border-color: #334155 !important; 
}
html.dark input, html.dark select, html.dark textarea { 
  background-color: #0f172a !important; 
  color: #f1f5f9 !important; 
  border-color: #475569 !important; 
}
html.dark input::placeholder, html.dark textarea::placeholder {
  color: #64748b !important;
}
/* Ensure form labels are visible */
html.dark label {
  color: #e2e8f0 !important;
}

/* Admin Sidebar specific dark mode overrides (Light mode uses standard Tailwind classes) */
html.dark aside { 
  background-color: #081220 !important; 
  border-color: #1e293b !important; 
  color: #ffffff !important;
}
html.dark aside a.text-gray-700 {
  color: #cbd5e1 !important;
}
html.dark aside a.text-gray-700:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html.dark .bg-gray-100 { background-color: #334155 !important; }
html.dark .bg-gray-200 { background-color: #475569 !important; color: #f1f5f9 !important; }
html.dark .hover\:bg-gray-50:hover { background-color: #334155 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #475569 !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #475569 !important; }

/* Rich Content Styles for Blog Posts */
.rich-content {
    font-family: inherit;
    line-height: 1.8;
}

.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
    font-family: inherit;
    font-weight: 900;
    color: var(--color-primary);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.rich-content h1 { font-size: 2rem; }
.rich-content h2 { font-size: 1.75rem; }
.rich-content h3 { font-size: 1.5rem; }
.rich-content h4 { font-size: 1.25rem; }

.rich-content p {
    margin-bottom: 1em;
}

.rich-content strong,
.rich-content b {
    font-weight: 700;
}

.rich-content em,
.rich-content i {
    font-style: italic;
}

.rich-content u {
    text-decoration: underline;
}

.rich-content strike {
    text-decoration: line-through;
}

.rich-content ul,
.rich-content ol {
    margin: 1em 0;
    padding-right: 2em;
}

.rich-content ul {
    list-style-type: disc;
}

.rich-content ol {
    list-style-type: decimal;
}

.rich-content li {
    margin-bottom: 0.5em;
}

.rich-content blockquote {
    border-right: 4px solid var(--color-accent);
    padding-right: 1.5em;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--color-muted-foreground);
    background: var(--color-muted);
    padding: 1em 1.5em;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.rich-content blockquote cite {
    display: block;
    margin-top: 0.5em;
    font-style: normal;
    font-size: 0.875em;
    color: var(--color-muted-foreground);
}

.rich-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 2px;
}

.rich-content a:hover {
    color: var(--color-primary);
}

.rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    margin: 1em 0;
}

.rich-content iframe {
    max-width: 100%;
    border-radius: var(--radius-xl);
    margin: 1em 0;
}

.rich-content video {
    max-width: 100%;
    border-radius: var(--radius-xl);
    margin: 1em 0;
}

.rich-content div[style],
.rich-content span[style],
.rich-content p[style] {
    /* Allow inline styles for text-align, margin, padding, width, height, float, clear, display */
}

.rich-content pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.5em;
    border-radius: var(--radius-xl);
    overflow-x: auto;
    margin: 1.5em 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.rich-content code {
    font-family: Fira