/* Design Book page — palettes, fonts, design files for one business. */

.design-book-page {
    padding: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
}

.db-back-bar {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-md);
}
.db-back-bar .dashboard-link::before { content: '⌂  '; }

.db-header {
    margin-bottom: var(--space-lg);
}
.db-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0 0 4px;
}
.db-business-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Three-column-ish stack: palettes top (full width — they're wide
   visually), then fonts + files side-by-side on wider screens. Stacks
   to single column under 900px. */
.db-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}
@media (min-width: 900px) {
    .db-grid {
        grid-template-columns: 1fr 1fr;
    }
    #dbPalettesSection { grid-column: 1 / -1; }
}

.db-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: var(--space-md);
}
.db-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}
.db-section-head h2 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}
.db-empty {
    padding: 18px 4px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}
.db-empty-inline {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
}
/* Native file inputs hidden behind a label; the label looks like a button. */
.db-upload-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* ── Palettes ─────────────────────────────────────────────────────── */
.db-palettes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.db-palette-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-palette-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.db-palette-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.db-palette-meta {
    font-size: 11px;
    color: var(--text-secondary);
}
.db-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-swatch {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 15%, transparent);
}
.db-palette-actions {
    display: flex;
    justify-content: flex-end;
}

/* ── Palette editor modal ────────────────────────────────────────── */

/* Slightly wider modal so the Pantone grid fits a useful number of
   swatches per row without horizontal scrolling. */
.db-palette-modal {
    max-width: 720px;
    width: 92vw;
}

/* Selected colour chips. Each chip shows the Pantone swatch + name and
   a remove button. Wraps to multiple rows for big palettes. */
.db-selected-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 38px;
    padding: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.db-selected-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-size: 12px;
    color: var(--text-primary);
}
.db-selected-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
}
.db-selected-remove {
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
}
.db-selected-remove:hover {
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
    color: var(--text-primary);
}

/* Pantone search input takes the full row above the grid. */
.db-pantone-search {
    width: 100%;
    margin-bottom: 6px;
}

/* Loading / no-results status line above the grid. */
.db-pantone-status {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    min-height: 14px;
}

/* The Pantone grid. Auto-fills as many 24px swatches as fit, scrolls
   vertically inside the modal so the rest of the form stays visible.
   The full library is 3,200+ colours; 320px max-height keeps the modal
   manageable while letting the user scan quickly. */
.db-pantone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
    gap: 3px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* Individual Pantone swatch. The background colour is set inline using
   CSS lab() — accurate (in supporting browsers) and avoids the rgb gamut
   compression that lossy hex would impose. Selected swatches get an
   outline so the user can see which Pantones are already in the palette. */
.db-pantone-swatch {
    aspect-ratio: 1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.08s ease, outline-color 0.08s ease;
    outline: 2px solid transparent;
    outline-offset: 1px;
}
.db-pantone-swatch:hover {
    transform: scale(1.18);
    z-index: 1;
    position: relative;
}
.db-pantone-swatch.selected {
    outline-color: var(--text-primary);
}

/* ── Asset cards (fonts + files share styling) ───────────────────── */
.db-fonts-list,
.db-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-asset-card {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.db-asset-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.db-asset-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.db-asset-sub {
    font-size: 11px;
    color: var(--text-secondary);
}
.db-asset-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* In-flight upload card — same shape as the regular asset card so the
   layout doesn't jump when the upload completes and the real card
   replaces it. Reuses the existing @keyframes spin from widgets.css. */
.db-asset-card.db-uploading {
    opacity: 0.85;
}
.db-uploading .db-asset-name {
    color: var(--text-secondary);
    font-style: italic;
}
.db-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--bg-tertiary);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* Font preview — just shows "Aa Bb Cc" rendered in the uploaded font.
   font-family is set inline via the @font-face injected at runtime. */
.db-font-preview {
    font-size: 22px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* File thumb — image previews for image files, generic icon otherwise. */
.db-file-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.db-file-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.db-file-icon {
    font-size: 28px;
    color: var(--text-secondary);
}