/* /assets/css/style.css */

/* === ROOT VARIABLES & BASE STYLES === */
:root {
    --primary-color: #0d6efd; /* Enterprise Blue */
    --primary-hover: #0b5ed7;
    --secondary-color: #6c757d; /* Muted Gray */
    --light-bg: #f8f9fa;
    --dark-bg: #212529;
    --light-text: #212529;
    --dark-text: #f8f9fa;
    --border-light: #dee2e6;
    --border-dark: #495057;
    --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
    --shadow-md: 0 .5rem 1rem rgba(0,0,0,.15);
    --shadow-lg: 0 1rem 3rem rgba(0,0,0,.175);
    --font-sans: 'Inter', sans-serif;
}

body {
    font-family: var(--font-sans);
}

/* === PUBLIC SITE: LAYOUT & COMPONENTS === */
/* Header */
header.sticky-top {
    backdrop-filter: blur(10px);
}

/* Page & Post Content General Styling */
.page-content, .post-content {
    line-height: 1.75;
}

.page-content h1, .post-content h1,
.page-content h2, .post-content h2,
.page-content h3, .post-content h3 {
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.page-content h1, .post-content h1 { font-size: 2.25rem; }
.page-content h2, .post-content h2 { font-size: 1.875rem; }
.page-content h3, .post-content h3 { font-size: 1.5rem; }

.page-content a, .post-content a {
    color: var(--primary-color);
    text-decoration: underline;
}
.dark .page-content a, .dark .post-content a {
    color: #6ea8fe;
}

.page-content ul, .post-content ul,
.page-content ol, .post-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1.25em;
}
.page-content ul, .post-content ul { list-style-type: disc; }
.page-content ol, .post-content ol { list-style-type: decimal; }

.page-content blockquote, .post-content blockquote {
    border-left: 4px solid var(--border-light);
    padding-left: 1rem;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--secondary-color);
}
.dark .page-content blockquote, .dark .post-content blockquote {
    border-left-color: var(--border-dark);
    color: #adb5bd;
}

.page-content pre, .post-content pre {
    background-color: #1f2937; /* Kept specific for code blocks */
    color: #e5e7eb;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5em 0;
}

/* === ADMIN PANEL: UNIVERSAL DARK MODE FORM & EDITOR FIX === */

/* Step 1: Fix standard text inputs, textareas, and selects in dark mode */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark textarea,
.dark select {
    background-color: #ffffff !important;
    color: #111827 !important; /* Dark text */
    border-color: #d1d5db !important; /* Light gray border */
}

.dark input::placeholder, .dark textarea::placeholder {
    color: #6b7280 !important;
}

/* Step 2: Force a light theme for the Quill Editor component in dark mode */
.ql-toolbar {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.ql-container {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    min-height: 300px;
    font-size: 1rem;
}

/* Toolbar background and border */
.dark .ql-toolbar.ql-snow {
     border-color: #d1d5db !important;
     background-color: #f9fafb !important; /* Light gray */
}
/* Toolbar icons */
.dark .ql-toolbar.ql-snow .ql-stroke { stroke: #374151 !important; }
.dark .ql-toolbar.ql-snow .ql-fill { fill: #374151 !important; }
.dark .ql-toolbar.ql-snow .ql-picker-label { color: #374151 !important; }
/* Toolbar active/selected icon color */
.dark .ql-toolbar.ql-snow .ql-active .ql-stroke,
.dark .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke,
.dark .ql-toolbar.ql-snow .ql-picker-item.ql-selected .ql-stroke {
    stroke: var(--primary-color) !important;
}
.dark .ql-toolbar.ql-snow .ql-active .ql-fill {
    fill: var(--primary-color) !important;
}

/* Editor content area background and border */
.dark .ql-container.ql-snow {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}
/* Editor content text color */
.dark .ql-editor {
    color: #111827 !important; /* Dark text */
}

/* Editor placeholder text color */
.dark .ql-editor.ql-blank::before {
    color: #9ca3af !important; /* Medium gray */
}

/* === ADMIN PANEL: MEDIA MODAL STYLES === */
.modal-overlay {
    transition: opacity 0.3s ease;
}
.modal-container {
    transition: transform 0.3s ease;
}

/* Add a smooth transition to the jumbotron slides */
.jumbotron-slide {
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

/* Custom scrollbar styling for dark mode */
.dark::-webkit-scrollbar {
    width: 8px;
}
.dark::-webkit-scrollbar-track {
    background: #374151;
}
.dark::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}
.dark::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}