/* client/public/themes/w5g/Library.css */

/* Main View */
html:not([data-theme="giacngo"]) .library-view-container { flex-grow: 1; display: flex; flex-direction: column; padding: 1.5rem; overflow-y: auto; background-color: var(--color-background-main); }
html:not([data-theme="giacngo"]) .library-search-bar { position: relative; margin-bottom: 1.5rem; }
html:not([data-theme="giacngo"]) .library-search-bar .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--color-text-light); }
html:not([data-theme="giacngo"]) .library-search-bar input { width: 100%; padding: 0.75rem 1rem 0.75rem 3rem; border-radius: 0.5rem; border: 1px solid var(--color-border-color); background-color: var(--color-background-panel); font-size: 1rem; }
html:not([data-theme="giacngo"]) .library-search-bar input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); }
html:not([data-theme="giacngo"]) .library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
html:not([data-theme="giacngo"]) .doc-card { background-color: var(--color-background-panel); border: 1px solid var(--color-border-color); border-radius: 0.75rem; overflow: hidden; text-decoration: none; color: inherit; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
html:not([data-theme="giacngo"]) .doc-card:hover { transform: translateY(-4px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); border-color: var(--color-primary); }
html:not([data-theme="giacngo"]) .doc-card-thumb { width: 100%; aspect-ratio: 4 / 3; background-color: var(--color-background-light); display: flex; align-items: center; justify-content: center; color: var(--color-text-light); }
html:not([data-theme="giacngo"]) .doc-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
html:not([data-theme="giacngo"]) .doc-card-thumb svg { width: 3rem; height: 3rem; }
html:not([data-theme="giacngo"]) .doc-card-content { padding: 1rem; }
html:not([data-theme="giacngo"]) .doc-card-type { font-size: 0.75rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; }
html:not([data-theme="giacngo"]) .doc-card-title { font-size: 1.125rem; font-weight: 600; margin-top: 0.25rem; color: var(--color-text-main); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  overflow: hidden; }
html:not([data-theme="giacngo"]) .doc-card-author { font-size: 0.875rem; color: var(--color-text-light); margin-top: 0.5rem; }
html:not([data-theme="giacngo"]) .no-results-message { grid-column: 1 / -1; text-align: center; padding: 4rem 0; color: var(--color-text-light); }

/* New Library Menu Styles */
html:not([data-theme="giacngo"]) .library-menu {
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

html:not([data-theme="giacngo"]) .library-menu-toggles {
    display: inline-flex;
    border: 1px solid var(--color-border-color);
    border-radius: 9999px;
    padding: 0.25rem;
    background-color: var(--color-background-light);
    width: 90%;
}

html:not([data-theme="giacngo"]) .library-menu-toggles button {
    flex: 1;
    padding: 0.5rem;
    border: none;
    background: transparent;
    color: var(--color-text-light);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 9999px;
    font-size: 0.9rem;
}

html:not([data-theme="giacngo"]) .library-menu-toggles button.active {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

html:not([data-theme="giacngo"]) .library-menu-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-main);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

html:not([data-theme="giacngo"]) .library-menu-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

html:not([data-theme="giacngo"]) .library-topic-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 90%;
}

html:not([data-theme="giacngo"]) .library-topic-list button {
    background-color: transparent;
    color: var(--color-text-main);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

html:not([data-theme="giacngo"]) .library-topic-list button:hover {
    background-color: var(--color-background-light);
}

html:not([data-theme="giacngo"]) .library-topic-list button.active {
    font-weight: 700;
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

/* Skeleton Styles */
html:not([data-theme="giacngo"]) .skeleton-doc-thumb { width: 100%; aspect-ratio: 4 / 3; }
html:not([data-theme="giacngo"]) .doc-card.skeleton-card { border-color: transparent; box-shadow: none; }
html:not([data-theme="giacngo"]) .doc-card.skeleton-card .doc-card-content { display: flex; flex-direction: column; gap: 0.5rem; }
html:not([data-theme="giacngo"]) .doc-card.skeleton-card .skeleton-title { margin-bottom: 0; }
html:not([data-theme="giacngo"]) .doc-card.skeleton-card .skeleton-text { margin-bottom: 0; }


/* Styles from DocumentDetailPage.css */
html:not([data-theme="giacngo"]) .document-detail-page {
    background-color: var(--color-background-main);
    padding: 2rem 1.5rem;
    min-height: 100vh;
}

html:not([data-theme="giacngo"]) .document-detail-container {
    max-width: 800px;
    margin: 0 auto;
}

html:not([data-theme="giacngo"]) .document-content-card {
    background-color: var(--color-background-panel);
    border: 1px solid var(--color-border-color);
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}

html:not([data-theme="giacngo"]) .document-thumbnail {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

html:not([data-theme="giacngo"]) .document-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 1rem;
    line-height: 1.2;
}

html:not([data-theme="giacngo"]) .document-meta {
    display: flex;
    gap: 1.5rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-border-color);
    padding-bottom: 1.5rem;
}
html:not([data-theme="giacngo"]) .document-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

html:not([data-theme="giacngo"]) .document-body.prose {
    line-height: 1.7;
    color: var(--color-text-main);
}
html:not([data-theme="giacngo"]) .document-body.prose h1,
html:not([data-theme="giacngo"]) .document-body.prose h2,
html:not([data-theme="giacngo"]) .document-body.prose h3 {
    font-weight: 600;
    color: var(--color-text-main);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
html:not([data-theme="giacngo"]) .document-body.prose p {
    margin-bottom: 1em;
}