/* Custom dark theme colors using CSS variables */
:root {
  --dark-theme-bg: #0d1117;
  --dark-theme-canvas: #161b22;
  --dark-theme-border: #30363d;
  --dark-theme-text: #f0f6fc;
  --dark-theme-muted: #8b949e;
  --dark-theme-accent: #58a6ff;
  --dark-theme-success: #3fb950;
  --dark-theme-attention: #f85149;

}

/* Apply dark theme colors using standard classes */
.dark .bg-dark-theme-bg { background-color: var(--dark-theme-bg) !important; }
.dark .bg-dark-theme-canvas { background-color: var(--dark-theme-canvas) !important; }
.dark .border-dark-theme-border { border-color: var(--dark-theme-border) !important; }
.dark .text-dark-theme-text { color: var(--dark-theme-text) !important; }
.dark .text-dark-theme-muted { color: var(--dark-theme-muted) !important; }
.dark .text-dark-theme-accent { color: var(--dark-theme-accent) !important; }

/* Light mode variants */
.bg-dark-theme-accent { background-color: var(--dark-theme-accent); }
.text-dark-theme-accent { color: var(--dark-theme-accent); }
.border-dark-theme-accent { border-color: var(--dark-theme-accent); }

/* Hover states */
.dark .hover\:bg-dark-theme-accent:hover { background-color: var(--dark-theme-accent) !important; }
.dark .hover\:text-dark-theme-accent:hover { color: var(--dark-theme-accent) !important; }
.dark .hover\:text-dark-theme-text:hover { color: var(--dark-theme-text) !important; }
.dark .hover\:border-dark-theme-accent:hover { border-color: var(--dark-theme-accent) !important; }

/* Focus states */
.dark .focus\:ring-dark-theme-accent:focus { --tw-ring-color: var(--dark-theme-accent) !important; }
.dark .focus\:border-dark-theme-accent:focus { border-color: var(--dark-theme-accent) !important; }

/* Custom markdown content styles */
.markdown-content h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.markdown-content h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.markdown-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}
.markdown-content p {
    margin-bottom: 1rem;
    color: #374151;
    line-height: 1.625;
}
.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1rem;
    margin-left: 1.5rem;
    padding-left: 1.25rem;
    list-style-position: outside;
}
.markdown-content ul {
    list-style-type: disc !important;
}
.markdown-content ol {
    list-style-type: decimal !important;
}
.markdown-content li {
    margin-bottom: 0.5rem;
    color: #374151;
}
.markdown-content strong {
    font-weight: 600;
    color: #111827;
}

/* Dark mode styles for markdown content */
.dark .markdown-content h1,
.dark .markdown-content h2,
.dark .markdown-content h3,
.dark .markdown-content strong {
    color: #f0f6fc;
}
.dark .markdown-content p,
.dark .markdown-content li {
    color: #8b949e;
}

/* Search dropdown highlight */
.search-result-active {
    background-color: rgba(88, 166, 255, 0.18);
    color: #0b3f81;
}
.search-result-active h3,
.search-result-active p,
.search-result-active .search-result-url {
    color: inherit;
}
.search-result-active .search-result-type {
    background-color: rgba(255, 255, 255, 0.3);
    color: inherit;
}
.dark .search-result-active {
    background-color: rgba(88, 166, 255, 0.22);
    color: #d7e9ff;
}
.dark .search-result-active .search-result-type {
    background-color: rgba(255, 255, 255, 0.18);
    color: inherit;
}

/* HTMX indicator styles */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline;
}
.htmx-request.htmx-indicator {
    display: inline;
}

.document-row-highlight {
    animation: document-row-flash 2.5s ease-out;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
    border-color: rgba(59, 130, 246, 0.6) !important;
}

@keyframes document-row-flash {
    0% {
        background-color: rgba(191, 219, 254, 0.7);
    }
    50% {
        background-color: rgba(191, 219, 254, 0.35);
    }
    100% {
        background-color: transparent;
    }
}

.dark .document-row-highlight {
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5);
    border-color: rgba(96, 165, 250, 0.7) !important;
}

/* ========================================
   MODERN UI ENHANCEMENTS
   ======================================== */

/* Premium Card System */
.content-card {
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.content-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Colored accent bars */
.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
}

/* Content type variations */
.card-meeting {
    --accent-start: #3B82F6;
    --accent-end: #2563EB;
}

.card-news {
    --accent-start: #10B981;
    --accent-end: #059669;
}

.card-document {
    --accent-start: #8B5CF6;
    --accent-end: #7C3AED;
}

/* Dark mode cards */
.dark .content-card {
    background: var(--dark-theme-canvas);
    border-color: var(--dark-theme-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
                0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.dark .content-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
                0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Gradient Badge Styles */
.badge-gradient {
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.badge-scheduled {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: white;
}

.badge-completed {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
}

.badge-cancelled {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
}

.dark .badge-gradient {
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Section Backgrounds */
.section-light {
    background: linear-gradient(to bottom, #ffffff, #f9fafb);
}

.section-feature {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pattern-dots {
    background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.dark .pattern-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* File Type Icons */
.file-icon-pdf {
    color: #EF4444;
}

.file-icon-word {
    color: #2563EB;
}

.file-icon-excel {
    color: #10B981;
}

.file-icon-default {
    color: #6B7280;
}

.dark .file-icon-default {
    color: #9CA3AF;
}

/* Icon Containers */
.icon-container-gradient {
    display: flex;
    align-items: center;
    justify-center: center;
    border-radius: 9999px;
}

.icon-container-meeting {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.icon-container-news {
    background: linear-gradient(135deg, #10B981, #059669);
}

.icon-container-document {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

/* HTMX Loading Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.htmx-settling {
    animation: fadeIn 0.3s ease;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.htmx-swapping {
    animation: pulse 0.5s ease-in-out;
}

/* Enhanced Search Results */
.search-result-item {
    transition: all 0.2s ease;
}

.search-result-item:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.dark .search-result-item:hover {
    background-color: rgba(88, 166, 255, 0.1);
}

.search-result-icon {
    flex-shrink: 0;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navigation Icon Animations */
.nav-icon {
    transition: transform 0.2s ease;
}

a:hover .nav-icon {
    transform: translateY(-2px);
}

/* Gradient Text (Optional) */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Prevent iOS Safari auto-zoom on form inputs (triggered when font-size < 16px).
   Uses hover:none to target devices without a mouse (phones/tablets) so
   desktop styling stays untouched. */
@media screen and (hover: none) and (pointer: coarse) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Extra horizontal padding for admin inputs only (avoids
       overriding pl-10 on the public site search icon layout) */
    #content input,
    #content select,
    #content textarea {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}