/* PhD Assistant Dashboard - Custom Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
}

.serif {
    font-family: 'Merriweather', serif;
}

/* Editor List Restoration */
#editor-content ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 1em; }
#editor-content ol { list-style-type: decimal; padding-left: 1.5em; margin-bottom: 1em; }
#editor-content li { margin-bottom: 0.25em; }

/* When content is imported from Google Docs, hide default bullets to avoid double markers */
#editor-content.gdoc-import ul { list-style: none; padding-left: 1.2em; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Animations */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Chat Bubble */
.chat-bubble {
    position: relative;
    background: #ffffff;
    border-radius: .4em;
}

.chat-bubble:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #ffffff;
    border-left: 0;
    margin-top: -10px;
    margin-left: -10px;
}

/* Calendar Interaction */
.calendar-day:hover {
    background-color: #f8fafc;
    border-color: #6366f1;
    cursor: pointer;
}

/* Glass Effect */
.glass {
    backdrop-filter: blur(4px);
}

/* Loading Spinner */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Editor Typography - Match Google Docs Defaults */
#editor-content {
    font-family: 'Times New Roman', serif; /* Default body to serif */
    font-size: 11pt;
    line-height: 1.15;
    color: #000;
    font-weight: normal; /* Ensure text is not bold by default */
}

#editor-content h1 { /* Title */
    font-family: Arial, sans-serif;
    font-size: 26pt;
    padding-top: 12pt;
    padding-bottom: 6pt;
    font-weight: 700; /* Bold */
    line-height: 1.15;
}

#editor-content h2 { /* Heading 1 */
    font-family: Arial, sans-serif;
    font-size: 20pt;
    padding-top: 12pt;
    padding-bottom: 6pt;
    font-weight: 700; /* Bold */
    line-height: 1.15;
}

#editor-content h3 { /* Heading 2 */
    font-family: Arial, sans-serif;
    font-size: 16pt;
    padding-top: 12pt;
    padding-bottom: 4pt;
    font-weight: 700; /* Bold */
    line-height: 1.15;
}

#editor-content h4 { /* Heading 3 */
    font-family: Arial, sans-serif;
    font-size: 14pt;
    padding-top: 12pt;
    padding-bottom: 4pt;
    font-weight: 700; /* Bold */
    color: #000;
    line-height: 1.15;
}

#editor-content p {
    font-size: 11pt;
    margin-bottom: 8pt;
    margin-top: 0;
}

/* Google Docs List Fix */
.gdoc-import ul, .gdoc-import ol {
    margin-left: 0;
    padding-left: 3rem;
}

/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Dark mode transition */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode base */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0f172a; /* slate-900 */
    color: #e2e8f0; /* slate-200 */
}

/* Sidebar */
html.dark #sidebar {
    background-color: #1e293b; /* slate-800 */
}

html.dark .nav-item {
    color: #94a3b8; /* slate-400 */
}

html.dark .nav-item:hover {
    background-color: #334155; /* slate-700 */
}

html.dark .nav-item.bg-slate-800 {
    background-color: #4f46e5 !important; /* indigo-600 */
    color: white !important;
}

/* Main content area */
html.dark #main-content {
    background-color: #1e293b; /* slate-800 */
}

html.dark header {
    background-color: #1e293b; /* slate-800 */
    border-color: #334155; /* slate-700 */
}

html.dark #page-title {
    color: #f1f5f9; /* slate-100 */
}

/* Cards and containers */
html.dark .bg-white {
    background-color: #1e293b !important; /* slate-800 */
}

html.dark .bg-slate-50 {
    background-color: #0f172a !important; /* slate-900 */
}

html.dark .bg-slate-100 {
    background-color: #1e293b !important; /* slate-800 */
}

html.dark .border-slate-100,
html.dark .border-slate-200 {
    border-color: #334155 !important; /* slate-700 */
}

/* Text colors */
html.dark .text-slate-800 {
    color: #f1f5f9 !important; /* slate-100 */
}

html.dark .text-slate-700 {
    color: #e2e8f0 !important; /* slate-200 */
}

html.dark .text-slate-600 {
    color: #cbd5e1 !important; /* slate-300 */
}

html.dark .text-slate-500 {
    color: #94a3b8 !important; /* slate-400 */
}

html.dark .text-slate-400 {
    color: #64748b !important; /* slate-500 */
}

/* Shadows */
html.dark .shadow-sm,
html.dark .shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3) !important;
}

/* Buttons */
html.dark .bg-indigo-50 {
    background-color: #312e81 !important; /* indigo-900 */
}

html.dark .hover\:bg-indigo-100:hover {
    background-color: #3730a3 !important; /* indigo-800 */
}

html.dark #dark-mode-toggle {
    background-color: #312e81;
}

html.dark #dark-mode-toggle:hover {
    background-color: #3730a3;
}

/* Tables */
html.dark table {
    background-color: #1e293b;
}

html.dark th {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
}

html.dark tr:hover {
    background-color: #334155 !important;
}

html.dark .hover\:bg-slate-50:hover {
    background-color: #334155 !important;
}

/* Inputs */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #6366f1 !important;
    outline-color: #6366f1 !important;
}

/* Modals */
html.dark .bg-slate-900\/90 {
    background-color: rgba(2, 6, 23, 0.95) !important; /* slate-950 */
}

html.dark #input-modal .bg-white,
html.dark #reference-modal .bg-white,
html.dark #download-modal .bg-white,
html.dark #storage-modal .bg-white,
html.dark #doi-modal .bg-white {
    background-color: #1e293b !important;
}

/* Editor - keep light background for readability */
html.dark #editor-content {
    background-color: #f8fafc; /* Keep light background */
    color: #1e293b; /* Dark text */
}

html.dark #editor-content h1,
html.dark #editor-content h2,
html.dark #editor-content h3,
html.dark #editor-content h4 {
    color: #0f172a; /* Very dark headings */
}

html.dark #editor-content p,
html.dark #editor-content li,
html.dark #editor-content span {
    color: #334155; /* Dark body text */
}

/* Editor toolbar */
html.dark .bg-slate-50 button,
html.dark #view-writing button {
    color: #94a3b8;
}

html.dark .bg-slate-50 button:hover {
    background-color: #334155 !important;
    color: #e2e8f0;
}

/* Calendar */
html.dark .calendar-day {
    background-color: #1e293b;
    border-color: #334155;
}

html.dark .calendar-day:hover {
    background-color: #334155;
}

html.dark .bg-indigo-50\/30 {
    background-color: rgba(79, 70, 229, 0.15) !important;
}

/* Charts - handled by Chart.js config */

/* Scrollbar dark mode */
html.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* File tree */
html.dark #file-tree-root li {
    color: #94a3b8;
}

html.dark #file-tree-root li:hover {
    background-color: #334155;
}

html.dark #file-tree-root .bg-indigo-100 {
    background-color: #312e81 !important;
    color: #a5b4fc !important;
}

/* Chat */
html.dark .chat-bubble {
    background-color: #1e293b;
}

html.dark .chat-bubble:after {
    border-right-color: #1e293b;
}

/* Gradient backgrounds */
html.dark .bg-gradient-to-br.from-indigo-600 {
    background: linear-gradient(to bottom right, #4338ca, #312e81) !important;
}

/* Tags and badges */
html.dark .bg-indigo-100 {
    background-color: #312e81 !important;
}

html.dark .text-indigo-700 {
    color: #a5b4fc !important;
}

html.dark .bg-red-100 {
    background-color: #7f1d1d !important;
}

html.dark .text-red-700 {
    color: #fca5a5 !important;
}

/* ============================================
   NEWSREADER STYLES
   ============================================ */

/* Newspaper masthead styling */
#view-newsreader .font-serif {
    font-family: 'Merriweather', 'Georgia', serif;
}

#view-newsreader h1 {
    font-family: 'Merriweather', 'Georgia', serif;
    letter-spacing: -0.02em;
}

/* Article cards */
#view-newsreader article {
    transition: all 0.2s ease;
}

#view-newsreader article:hover {
    transform: translateY(-2px);
}

/* Line clamp utilities */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category tabs */
#view-newsreader .category-tab {
    transition: all 0.2s ease;
}

/* Dark mode newsreader */
html.dark #view-newsreader {
    color: #e2e8f0;
}

html.dark #view-newsreader h1,
html.dark #view-newsreader h2,
html.dark #view-newsreader h3,
html.dark #view-newsreader h4 {
    color: #f1f5f9;
}

html.dark #view-newsreader .border-double {
    border-color: #64748b;
}

html.dark #view-newsreader article {
    background-color: #1e293b;
    border-color: #334155;
}

html.dark #view-newsreader article:hover {
    border-color: #4f46e5;
}

html.dark #view-newsreader .category-tab {
    background-color: #334155;
    color: #94a3b8;
}

html.dark #view-newsreader .category-tab:hover {
    background-color: #475569;
}

html.dark #view-newsreader .bg-slate-800 {
    background-color: #4f46e5 !important;
}