/* --- Import Component Styles --- */
@import url('./components/app-header.css');
@import url('./components/app-sidebar.css');
@import url('./components/notes-list.css');
@import url('./components/note-editor.css');
@import url('./components/modals.css');
@import url('./components/notice-board.css');
@import url('./components/help-modal.css'); 
@import url('./components/ai-response-modal.css');
@import url('./components/toast.css');


/* --- Global Styles --- */
:root {
  --sidebar-width: 280px;
  --sidebar-compact-width: 68px;
  --header-height: auto;
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  overflow-x: hidden;
  background-color: var(--bg-secondary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.is-resizing {
    cursor: col-resize;
    user-select: none;
}

/* --- Keyframe Animations --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); } }
@keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); } }

/* --- Main Layout --- */
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-layout > .d-flex {
  flex: 1;
  overflow: hidden;
}

.main-content-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  background-color: var(--bg-primary);
}

/* Main flex container for content and editor */
.main-content-wrapper > .d-flex {
    flex-grow: 1;
    min-height: 0;
    width: 100%;
}

/* Left column containing Notice Board and Notes List */
.main-content-left {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-primary);
}

.main-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  background-color: var(--bg-primary);
  overflow: hidden;
}

/* --- Utilities --- */
.line-clamp-1, .line-clamp-2, .line-clamp-3 {
    display: -webkit-box; display: box; -webkit-box-orient: vertical;
    box-orient: vertical; overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.transition-all { transition: all 0.2s ease; }

/* --- Responsive Layout --- */
@media (max-width: 992px) {
  .main-content-wrapper.editor-visible .main-content { width: 100%; }
}
@media (max-width: 768px) {
    :root { --sidebar-width: 0px; --header-height: 110px; }
    .main-content-wrapper, body.sidebar-collapsed .main-content-wrapper { padding-left: 0 !important; }
}

/* --- Custom Scrollbar --- */
.sidebar-nav::-webkit-scrollbar, .tag-list-sidebar::-webkit-scrollbar, .tag-list-wrapper::-webkit-scrollbar, .notes-list-container::-webkit-scrollbar, .notice-board-content::-webkit-scrollbar, .help-modal-content::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track, .tag-list-sidebar::-webkit-scrollbar-track, .tag-list-wrapper::-webkit-scrollbar-track, .notes-list-container::-webkit-scrollbar-track, .notice-board-content::-webkit-scrollbar-track, .help-modal-content::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb, .tag-list-sidebar::-webkit-scrollbar-thumb, .tag-list-wrapper::-webkit-scrollbar-thumb, .notes-list-container::-webkit-scrollbar-thumb, .notice-board-content::-webkit-scrollbar-thumb, .help-modal-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover, .tag-list-sidebar::-webkit-scrollbar-thumb:hover, .tag-list-wrapper::-webkit-scrollbar-thumb:hover, .notes-list-container::-webkit-scrollbar-thumb:hover, .notice-board-content::-webkit-scrollbar-thumb:hover, .help-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}