@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import './variable.css';

/* Global Styles for Zyndrx */

:root {
    --sidebar-width: 16rem;
    --sidebar-collapsed-width: 5rem;
}

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

/* Global Dark Mode Inputs */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #374151; /* Tailwind gray-700 */
    color: #f3f4f6; /* Tailwind gray-100 */
    border-color: #4b5563; /* Tailwind gray-600 */
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #9ca3af; /* Tailwind gray-400 */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Sidebar Specifics */
#sidebar-container.w-20 .sidebar-text {
    opacity: 0;
    pointer-events: none;
}

/* Mobile Sidebar behavior */
@media (max-width: 768px) {
    #sidebar-container {
        width: 16rem !important;
    }
}

/* Page Transitions */
#app {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Stats Cards */
.stats-card {
    @apply bg-white p-6 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all;
}

/* Hide CKEditor Branding */
.ck-powered-by, 
.ck-powered-by-balloon,
.ck.ck-balloon-panel.ck-powered-by-balloon[class*=position_border] {
    display: none !important;
}

/* CKEditor Height Limit & Scroll
   The editable itself is the scroll container (CKEditor's recommended approach),
   so the toolbar stays pinned and long content scrolls inside a fixed box.
   Override per editor with --zx-editor-min-height / --zx-editor-max-height. */
/* !important because CKEditor injects its own stylesheet at runtime, i.e. after
   this file, and its .ck.ck-editor__editable_inline rule has equal specificity. */
.ck.ck-editor__main > .ck-editor__editable {
    min-height: var(--zx-editor-min-height, 160px) !important;
    max-height: var(--zx-editor-max-height, 400px) !important;
    overflow-y: auto !important;
}

/* Source editing mode: its textarea is absolutely positioned at height:100%,
   so clamp the wrapper instead of the area itself. */
.ck.ck-editor__main:has(> .ck-source-editing-area) {
    max-height: var(--zx-editor-max-height, 400px) !important;
    overflow-y: auto !important;
}

/* Dark Mode Global Overrides */
html.dark body {
    background-color: #0b0f19; /* Sleek deep navy dark background */
    color: #f3f4f6;
}

/* Backgrounds */
html.dark .bg-white {
    background-color: #111827 !important; /* gray-900 */
}
html.dark .bg-gray-50 {
    background-color: #0f172a !important; /* gray-900/slate-900 */
}
html.dark .bg-gray-100 {
    background-color: #1f2937 !important; /* gray-800 */
}
html.dark .bg-gray-200 {
    background-color: #374151 !important; /* gray-700 */
}

/* Text Colors */
html.dark .text-gray-900 {
    color: #f9fafb !important; /* gray-50 */
}
html.dark .text-gray-800 {
    color: #f3f4f6 !important; /* gray-100 */
}
html.dark .text-gray-700 {
    color: #e5e7eb !important; /* gray-200 */
}
html.dark .text-gray-600 {
    color: #d1d5db !important; /* gray-300 */
}
html.dark .text-gray-500 {
    color: #9ca3af !important; /* gray-400 */
}
html.dark .text-gray-400 {
    color: #9ca3af !important; /* gray-400 */
}

/* Primary Color overrides (since primary-600+ are deep navy/black) */
html.dark .text-primary-900 {
    color: #f3f4f6 !important;
}
html.dark .text-primary-700 {
    color: #e5e7eb !important;
}
html.dark .text-primary-600 {
    color: #38bdf8 !important; /* Sky Blue/Secondary-400 for links/buttons */
}
html.dark .bg-primary-50 {
    background-color: rgba(115, 125, 145, 0.15) !important;
}
html.dark .bg-primary-100 {
    background-color: rgba(115, 125, 145, 0.25) !important;
}

/* Borders */
html.dark .border-gray-50 {
    border-color: #1f2937 !important; /* gray-800 */
}
html.dark .border-gray-100 {
    border-color: #1f2937 !important; /* gray-800 */
}
html.dark .border-gray-200 {
    border-color: #374151 !important; /* gray-700 */
}
html.dark .border-gray-300 {
    border-color: #4b5563 !important; /* gray-600 */
}

/* Hover effects */
html.dark .hover\:bg-gray-50:hover {
    background-color: #1f2937 !important;
}
html.dark .hover\:bg-white:hover {
    background-color: #1f2937 !important;
}
html.dark .hover\:border-primary-300:hover {
    border-color: #4b5563 !important;
}
html.dark .hover\:border-gray-300:hover {
    border-color: #4b5563 !important;
}
html.dark .group:hover .group-hover\:text-primary-600 {
    color: #38bdf8 !important;
}
html.dark .group\/row:hover .group-hover\/row\:text-primary-600 {
    color: #38bdf8 !important;
}

/* CKEditor Dark Mode UI Styles */
html.dark .ck-reset_all,
html.dark .ck-reset_all * {
    color: #f3f4f6 !important;
}
html.dark .ck.ck-editor__main>.ck-editor__editable {
    background: #111827 !important; /* gray-900 */
    color: #f3f4f6 !important;
    border-color: #374151 !important; /* gray-700 */
}
html.dark .ck.ck-editor__main>.ck-editor__editable.ck-focused {
    border-color: #38bdf8 !important; /* sky blue primary focus */
}
html.dark .ck.ck-toolbar {
    background: #1f2937 !important; /* gray-800 */
    border-color: #374151 !important;
}
html.dark .ck.ck-toolbar * {
    color: #f3f4f6 !important;
}
html.dark .ck.ck-button {
    background: transparent !important;
}
html.dark .ck.ck-button:hover {
    background: #374151 !important;
}
html.dark .ck.ck-button.ck-on {
    background: #111827 !important;
}
html.dark .ck.ck-dropdown__panel {
    background: #1f2937 !important;
    border-color: #374151 !important;
}
html.dark .ck.ck-list {
    background: #1f2937 !important;
}
html.dark .ck.ck-list__item .ck-button:hover {
    background: #374151 !important;
}

/* CKEditor Rendered Content Dark Mode Overrides */
html.dark .ck-content {
    color: #f3f4f6 !important;
}
html.dark .ck-content blockquote {
    border-color: #374151 !important;
    color: #9ca3af !important;
}
html.dark .ck-content pre {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
}
html.dark .ck-content table td, 
html.dark .ck-content table th {
    border-color: #374151 !important;
}