/* ─────────────────────────────────────────────────────────────────────────────
   library.css  —  Module 7: Template Library
   Design system for the library browse page, card grid, preview drawer,
   category tabs and pagination.
───────────────────────────────────────────────────────────────────────────── */

/* ── Featured section ──────────────────────────────────────────────────────── */

.lib-featured {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.lib-section-heading {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-text);
    margin-bottom: .75rem;
}

.lib-section-heading .material-symbols-outlined {
    font-size: 1.1rem;
    color: #f59e0b;
}

/* ── Filter bar ────────────────────────────────────────────────────────────── */

.lib-filter-bar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.25rem;
}

.lib-tabs {
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
}

.lib-tab {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .375rem .85rem;
    border-radius: 20px;
    border: 1px solid var(--color-border, #2e2e3e);
    background: transparent;
    color: var(--color-text-muted, #9ca3af);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.lib-tab:hover {
    border-color: var(--color-primary, #6366f1);
    color: var(--color-primary, #6366f1);
}

.lib-tab--active {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    color: #fff;
}

.lib-tab .material-symbols-outlined {
    font-size: .95rem;
}

.lib-filter-controls {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Search input */
.lib-search-wrap {
    position: relative;
    flex: 1 1 220px;
    max-width: 320px;
}

.lib-search-icon {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--color-text-muted, #9ca3af);
    pointer-events: none;
}

.lib-search-input {
    width: 100%;
    padding: .45rem .75rem .45rem 2.1rem;
    border: 1px solid var(--color-border, #2e2e3e);
    border-radius: 8px;
    background: var(--color-surface, #1a1a2e);
    color: var(--color-text, #e2e8f0);
    font-size: .85rem;
}

.lib-search-input:focus {
    outline: none;
    border-color: var(--color-primary, #6366f1);
}

/* Purpose select */
.lib-select {
    padding: .45rem .75rem;
    border: 1px solid var(--color-border, #2e2e3e);
    border-radius: 8px;
    background: var(--color-surface, #1a1a2e);
    color: var(--color-text, #e2e8f0);
    font-size: .85rem;
    cursor: pointer;
    flex: 0 1 180px;
}

.lib-select:focus {
    outline: none;
    border-color: var(--color-primary, #6366f1);
}

/* ── Results bar ────────────────────────────────────────────────────────────── */

.lib-results-bar {
    margin-top: .75rem;
    margin-bottom: .5rem;
    min-height: 1.4rem;
}

.lib-count {
    font-size: .8rem;
    color: var(--color-text-muted, #9ca3af);
}

/* ── Error banner ────────────────────────────────────────────────────────────── */

.lib-error-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: 8px;
    color: #ef4444;
    font-size: .875rem;
    margin-bottom: 1rem;
}

.lib-retry-btn {
    margin-left: auto;
    padding: .3rem .7rem;
    border: 1px solid #ef4444;
    border-radius: 6px;
    background: transparent;
    color: #ef4444;
    font-size: .8rem;
    cursor: pointer;
}

/* ── Card grid ──────────────────────────────────────────────────────────────── */

.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: .5rem;
}

.lib-grid--featured {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* ── Card ────────────────────────────────────────────────────────────────────── */

.lib-card {
    background: var(--color-surface, #1a1a2e);
    border: 1px solid var(--color-border, #2e2e3e);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative;
}

.lib-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    border-color: var(--color-primary, #6366f1);
}

.lib-card--featured {
    border-color: rgba(245, 158, 11, .4);
}

.lib-card--featured:hover {
    border-color: #f59e0b;
    box-shadow: 0 8px 24px rgba(245, 158, 11, .25);
}

/* Card thumbnail */
.lib-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg, #0f0f1a);
}

.lib-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lib-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e1e30 0%, #252535 100%);
    color: var(--color-text-muted, #9ca3af);
}

.lib-thumb-placeholder .material-symbols-outlined {
    font-size: 2.5rem;
    opacity: .4;
}

/* Live Fabric.js canvas in card thumbnails */
.lib-card-canvas-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e1e30 0%, #252535 100%);
    overflow: hidden;
}

.lib-card-canvas-wrap canvas {
    display: block;
    flex-shrink: 0;
}

/* Featured badge overlay */
.lib-featured-badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    background: rgba(245, 158, 11, .9);
    color: #000;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.lib-featured-badge .material-symbols-outlined {
    font-size: .85rem;
}

/* Hover overlay with action buttons */
.lib-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    opacity: 0;
    transition: opacity .15s;
}

.lib-card:hover .lib-card-overlay {
    opacity: 1;
}

.lib-preview-btn,
.lib-clone-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: none;
}

.lib-preview-btn {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
}

.lib-preview-btn:hover {
    background: rgba(255, 255, 255, .25);
}

.lib-clone-btn {
    background: var(--color-primary, #6366f1);
    color: #fff;
}

.lib-clone-btn:hover:not(:disabled) {
    background: #4f46e5;
}

.lib-clone-btn:disabled,
.lib-clone-btn--loading {
    opacity: .7;
    cursor: not-allowed;
}

/* Card body */
.lib-card-body {
    padding: .75rem;
}

.lib-card-title {
    font-weight: 600;
    font-size: .88rem;
    color: var(--color-text, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .35rem;
}

.lib-card-desc {
    font-size: .78rem;
    color: var(--color-text-muted, #9ca3af);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .4rem;
}

.lib-card-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}

.lib-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lib-author {
    font-size: .73rem;
    color: var(--color-text-muted, #9ca3af);
}

.lib-clone-count {
    display: flex;
    align-items: center;
    gap: .2rem;
    font-size: .73rem;
    color: var(--color-text-muted, #9ca3af);
}

.lib-clone-count .material-symbols-outlined {
    font-size: .85rem;
}

.lib-size {
    font-size: .73rem;
    color: var(--color-text-muted, #9ca3af);
    white-space: nowrap;
}

/* ── Badges ──────────────────────────────────────────────────────────────────── */

.lib-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.lib-badge--social {
    background: rgba(99, 102, 241, .15);
    color: #a5b4fc;
}

.lib-badge--marketing {
    background: rgba(245, 158, 11, .15);
    color: #fcd34d;
}

.lib-badge--docs {
    background: rgba(16, 185, 129, .15);
    color: #6ee7b7;
}

.lib-badge--custom {
    background: rgba(156, 163, 175, .15);
    color: #d1d5db;
}

/* ── Skeleton loading ────────────────────────────────────────────────────────── */

@keyframes lib-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.lib-card--skeleton {
    pointer-events: none;
}

.lib-thumb-skeleton {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(90deg, #1e1e30 25%, #2a2a40 50%, #1e1e30 75%);
    background-size: 800px 100%;
    animation: lib-shimmer 1.4s infinite linear;
}

.lib-body-skeleton {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.lib-line-skeleton {
    border-radius: 4px;
    background: linear-gradient(90deg, #1e1e30 25%, #2a2a40 50%, #1e1e30 75%);
    background-size: 800px 100%;
    animation: lib-shimmer 1.4s infinite linear;
}

.lib-line--title {
    height: 14px;
    width: 70%;
}

.lib-line--sub {
    height: 11px;
    width: 45%;
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */

.lib-empty {
    text-align: center;
    padding: 4rem 1rem;
}

.lib-empty-icon {
    font-size: 3.5rem;
    color: var(--color-text-muted, #9ca3af);
    opacity: .5;
    margin-bottom: .75rem;
}

.lib-empty-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text, #e2e8f0);
    margin-bottom: .4rem;
}

.lib-empty-desc {
    font-size: .85rem;
    color: var(--color-text-muted, #9ca3af);
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */

.lib-pagination {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: 2rem;
    padding-bottom: 1rem;
}

.lib-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 .6rem;
    border: 1px solid var(--color-border, #2e2e3e);
    border-radius: 8px;
    background: var(--color-surface, #1a1a2e);
    color: var(--color-text, #e2e8f0);
    font-size: .85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.lib-page-btn:hover:not(:disabled) {
    border-color: var(--color-primary, #6366f1);
    color: var(--color-primary, #6366f1);
}

.lib-page-btn--active {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    color: #fff;
}

.lib-page-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Toast notifications ─────────────────────────────────────────────────────── */

.lib-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.25rem;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    animation: lib-slide-in .25s ease;
}

@keyframes lib-slide-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.lib-toast--success {
    background: rgba(16, 185, 129, .15);
    border: 1px solid rgba(16, 185, 129, .4);
    color: #6ee7b7;
}

.lib-toast--error {
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #fca5a5;
}

/* ── Spin animation ──────────────────────────────────────────────────────────── */

.lib-spin {
    animation: lib-rotate .7s linear infinite;
    display: inline-block;
}

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

/* ── Preview Modal ───────────────────────────────────────────────────────────── */

/* Full-screen overlay — click outside modal to close */
.lib-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

/* Two-column dialog */
.lib-modal {
    display: flex;
    width: 100%;
    max-width: 1100px;
    max-height: 88vh;
    background: var(--color-surface, #1a1a2e);
    border: 1px solid var(--color-border, #2e2e3e);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
    animation: lib-modal-in .2s ease;
}

@keyframes lib-modal-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1);  }
}

/* Left pane — canvas fills all available space, centered */
.lib-modal-canvas-pane {
    flex: 1 1 0;
    background: var(--color-bg, #0f0f1a);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
    min-height: 400px;
    position: relative;
}

.lib-modal-canvas-loading,
.lib-modal-canvas-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    color: var(--color-text-muted, #9ca3af);
    font-size: .875rem;
}

.lib-modal-canvas-error { color: #ef4444; }

/* Thumbnail image fallback */
.lib-modal-thumb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    padding: 1rem;
    box-sizing: border-box;
}

/* Live Fabric.js canvas preview */
.lib-preview-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
}

.lib-preview-canvas-wrap canvas {
    display: block;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
    max-width: 100%;
    max-height: 100%;
}

/* Right pane — scrollable detail panel */
.lib-modal-detail-pane {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border, #2e2e3e);
    max-height: 88vh;
    overflow: hidden;
    background: var(--color-surface, #1a1a2e);
}

.lib-modal-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #2e2e3e);
    flex-shrink: 0;
}

.lib-modal-detail-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text, #e2e8f0);
}

.lib-modal-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

/* Close button (shared) */
.lib-drawer-close {
    background: none;
    border: none;
    color: var(--color-text-muted, #9ca3af);
    cursor: pointer;
    padding: .25rem;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: color .15s, background .15s;
}

.lib-drawer-close:hover {
    color: var(--color-text, #e2e8f0);
    background: rgba(255, 255, 255, .07);
}

/* Loading / error state inside detail pane */
.lib-drawer-loading,
.lib-drawer-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    flex: 1;
    font-size: .875rem;
    color: var(--color-text-muted, #9ca3af);
}

.lib-drawer-error { color: #ef4444; }

/* Drawer name / description */
.lib-drawer-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text, #e2e8f0);
    margin: 0 0 .3rem;
}

.lib-drawer-desc {
    font-size: .85rem;
    color: var(--color-text-muted, #9ca3af);
    line-height: 1.5;
    margin: 0 0 .75rem;
}

/* Chips row */
.lib-drawer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}

.lib-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    border: 1px solid var(--color-border, #2e2e3e);
    border-radius: 20px;
    font-size: .73rem;
    color: var(--color-text-muted, #9ca3af);
}

/* Section label */
.lib-drawer-section-label {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
}

.lib-drawer-section-label .material-symbols-outlined {
    font-size: .9rem;
}

/* Variables list */
.lib-drawer-vars-section {
    margin-bottom: .75rem;
}

.lib-drawer-vars {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.lib-var-chip {
    display: inline-block;
    padding: .2rem .55rem;
    background: rgba(99, 102, 241, .12);
    border: 1px solid rgba(99, 102, 241, .3);
    border-radius: 6px;
    font-size: .75rem;
    font-family: monospace;
    color: #a5b4fc;
}

/* Tags */
.lib-drawer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .75rem;
}

.lib-tag {
    display: inline-block;
    padding: .18rem .5rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--color-border, #2e2e3e);
    border-radius: 20px;
    font-size: .72rem;
    color: var(--color-text-muted, #9ca3af);
}

/* Author line */
.lib-drawer-author {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--color-text-muted, #9ca3af);
    margin-top: .5rem;
    margin-bottom: 1rem;
}

.lib-drawer-author .material-symbols-outlined {
    font-size: .95rem;
}

/* Feedback messages */
.lib-drawer-feedback {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    border-radius: 8px;
    font-size: .83rem;
    margin-bottom: .75rem;
}

.lib-drawer-feedback--success {
    background: rgba(16, 185, 129, .1);
    border: 1px solid rgba(16, 185, 129, .3);
    color: #6ee7b7;
}

.lib-drawer-feedback--error {
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .3);
    color: #fca5a5;
}

/* CTA button */
.lib-drawer-cta {
    margin-top: auto;
    padding-top: 1rem;
}

.lib-cta-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.25rem;
    font-size: .9rem;
}