/* Custom UI Components */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400&display=swap');

/* Base Overrides */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar - Make it look a bit more classic */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border: 1px solid #f1f1f1; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
.dark ::-webkit-scrollbar-track { background: #2d3748; }
.dark ::-webkit-scrollbar-thumb { background: #4a5568; border-color: #2d3748; }

/* Editor Typography & Spacing */
#editor {
    line-height: 1.5; /* Tighter line height for classic look */
    overflow-wrap: break-word;
    tab-size: 4;
    transition: padding 0.3s ease;
}

#editor.no-wrap {
    white-space: pre;
    overflow-x: auto;
    overflow-wrap: normal;
}

/* Line Numbering Mode */
#editor.show-line-numbers {
    padding-left: 3rem; 
    counter-reset: line-number;
}

#editor.show-line-numbers > * {
    position: relative;
}

#editor.show-line-numbers > *::before {
    counter-increment: line-number;
    content: counter(line-number);
    position: absolute;
    left: -3.5rem;
    top: 0;
    width: 2.5rem;
    text-align: right;
    color: #94a3b8;
    font-size: 0.75rem;
    line-height: inherit;
    font-family: 'Courier New', monospace;
    user-select: none;
    pointer-events: none;
    opacity: 0.6;
}

/* Comments */
.comment-marker {
    background-color: #ffff00; /* Classic bright yellow */
    color: black;
    cursor: pointer;
    border-bottom: 1px dotted #999;
}
.comment-marker:hover {
    background-color: #ffcc00;
}
.dark .comment-marker {
    background-color: #854d0e;
    color: white;
}

/* Comment Cards - Classic Style */
.comment-card {
    background: #ffffff;
    border: 1px solid #999;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}
.dark .comment-card {
    background: #2d3748;
    border-color: #4a5568;
}
.comment-card.active {
    border-color: #000;
    background-color: #ffffe0;
}
.dark .comment-card.active {
    background-color: #4a5568;
}

/* Headings - Distinct Styles with !important to override Tailwind */
#editor h1 { font-size: 2em !important; font-weight: bold !important; margin: 0.67em 0; border-bottom: 1px solid #eee; padding-bottom: 0.2em; line-height: 1.2; }
#editor h2 { font-size: 1.5em !important; font-weight: bold !important; margin: 0.83em 0; border-bottom: 1px solid #eee; padding-bottom: 0.1em; line-height: 1.25; }
#editor h3 { font-size: 1.17em !important; font-weight: bold !important; margin: 1em 0; line-height: 1.3; }
#editor h4 { font-size: 1em !important; font-weight: bold !important; margin: 1.33em 0; text-decoration: underline; }
.dark #editor h1, .dark #editor h2 { border-color: #4a5568; }

/* Text Elements */
#editor p { margin-bottom: 1em; }
#editor a { color: blue; text-decoration: underline; cursor: pointer; }
.dark #editor a { color: #63b3ed; }

/* Lists */
#editor ul { list-style-type: disc; padding-left: 40px; margin: 1em 0; }
#editor ol { list-style-type: decimal; padding-left: 40px; margin: 1em 0; }

/* Quotes */
#editor blockquote { 
    margin: 1em 40px;
    padding-left: 10px;
    border-left: 3px solid #ccc;
    color: #666;
    font-style: italic;
}

/* Tables - Robust Borders */
#editor table { width: 100%; border-collapse: collapse; margin: 1em 0; }
#editor td, #editor th { border: 1px solid #999 !important; padding: 4px; }
#editor th { background: #eee; font-weight: bold; text-align: left; }
.dark #editor th { background: #4a5568; }
.dark #editor td, .dark #editor th { border-color: #718096 !important; }

/* Code Blocks */
#editor pre {
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
    font-family: 'Courier New', monospace;
    margin: 1em 0;
    white-space: pre-wrap;
}
.dark #editor pre {
    background-color: #2d3748;
    border-color: #4a5568;
}

/* Checkboxes */
#editor .task-item { display: flex; align-items: center; gap: 8px; }
#editor input[type="checkbox"] { margin: 0; }

/* Horizontal Rule */
#editor hr { border: 0; border-top: 1px solid #ccc; margin: 1em 0; }

/* Toolbar Buttons - Classic Look */
.tool-btn {
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 2px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none; /* No smooth transition for classic feel */
    cursor: pointer;
    position: relative; /* For tooltip */
}
.dark .tool-btn { color: #e2e8f0; }

.tool-btn:hover {
    background-color: #e8e8e8;
    border-color: #dcdcdc;
}
.dark .tool-btn:hover {
    background-color: #4a5568;
    border-color: #718096;
}

.tool-btn:active, .tool-btn.active {
    background-color: #dcdcdc;
    border-color: #bfbfbf;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
}
.dark .tool-btn:active, .dark .tool-btn.active {
    background-color: #2d3748;
    border-color: #1a202c;
}

/* Custom Tooltip */
.tool-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Dropdowns */
.tool-select {
    font-size: 13px;
    color: #333;
    background-color: white;
}
.dark .tool-select {
    background-color: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}

/* Custom Dropdown Items */
.font-item {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}
.dark .font-item { color: #e2e8f0; }

.font-item:hover {
    background-color: #f3f4f6;
}
.dark .font-item:hover {
    background-color: #4a5568;
}

/* Print Overrides */
@media print {
    body { background: white !important; }
    .bg-classic-bg, nav, .bg-white, footer, aside, .title-bar { display: none !important; }
    #workspace { padding: 0 !important; margin: 0 !important; background: white !important; }
    #editor { border: none !important; box-shadow: none !important; padding: 0 !important; min-height: auto !important; }
}