/* Uploaid Projects Overlay – DRAIWN-style, fits between header and footer */

.projects-overlay-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1100; display: none; }
.projects-overlay-backdrop.show { display: block; }

.projects-overlay {
    position: fixed; left: 0; right: 0;
    top: calc(var(--header-height, 48px) + 25px);
    bottom: var(--footer-strip-height, 110px);
    background: #fff; z-index: 1101; display: none;
    flex-direction: column; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.projects-overlay.show { display: flex; }
html[data-theme="night"] .projects-overlay { background: #111; color: #e8e8e8; }

.projects-overlay-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; background: #000; color: #fff; flex-shrink: 0;
}
html[data-theme="night"] .projects-overlay-header { background: #222; color: #fff; }
.projects-overlay-header h2 { margin: 0; font-size: 16px; font-weight: 700; }
.projects-overlay-header-actions { display: flex; gap: 10px; align-items: center; }

.projects-overlay-btn-new {
    padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 6px;
    border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer;
}
.projects-overlay-btn-new:hover { background: #fff; color: #000; }

.projects-overlay-close {
    background: transparent; color: #fff; border: 1px solid #fff;
    width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 0;
}
.projects-overlay-close:hover { background: #333; }

.projects-overlay-filter { padding: 10px 20px; border-bottom: 2px solid #000; flex-shrink: 0; }
html[data-theme="night"] .projects-overlay-filter { border-color: #333; }

.projects-overlay-search {
    width: 100%; padding: 8px 12px; font-size: 14px;
    border: 2px solid #000; border-radius: 6px; background: #fff; color: #000;
    box-sizing: border-box; outline: none;
}
.projects-overlay-search:focus { border-color: #555; }
html[data-theme="night"] .projects-overlay-search { border-color: #444; background: #222; color: #e8e8e8; }

.projects-overlay-login-hint {
    padding: 8px 20px; font-size: 12px; color: #888;
    border-bottom: 1px solid #eee; flex-shrink: 0; display: none;
}
html[data-theme="night"] .projects-overlay-login-hint { color: #aaa; border-color: #333; }
.projects-overlay-login-hint.show { display: block; }

.projects-overlay-body {
    flex: 1; overflow-y: auto; padding: 20px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px; align-content: start;
}

.project-card {
    background: #fff; border: 2px solid #000; border-radius: 10px;
    padding: 16px; cursor: pointer; transition: background 0.15s, color 0.15s;
    display: flex; flex-direction: column; gap: 6px; position: relative;
}
.project-card:hover { background: #000; color: #fff; }
.project-card:hover .project-card-meta { color: #aaa; }
.project-card:hover .project-card-tag { background: #333; color: #fff; border-color: #555; }
html[data-theme="night"] .project-card { background: #1a1a1a; border-color: #444; }
html[data-theme="night"] .project-card:hover { background: #222; color: #fff; }

.project-card--new {
    border: 2px dashed #999; display: flex; align-items: center; justify-content: center;
    min-height: 120px; font-size: 14px; font-weight: 600; color: #999;
    gap: 8px; flex-direction: column;
}
.project-card--new:hover { border-color: #000; color: #000; background: #f5f5f5; }
html[data-theme="night"] .project-card--new { color: #888; border-color: #555; }
html[data-theme="night"] .project-card--new:hover { border-color: #888; color: #e8e8e8; background: #222; }
.project-card--new .project-card-plus { font-size: 28px; line-height: 1; }

.project-card--active { border-color: var(--theme-color, #00f5ff); border-width: 3px; }
.project-card-title { font-size: 15px; font-weight: 700; margin: 0; }
.project-card-desc { font-size: 12px; color: #666; margin: 0; line-height: 1.3; }
html[data-theme="night"] .project-card-desc { color: #aaa; }
.project-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.project-card-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; border: 1px solid #ddd; background: #f5f5f5; color: #555; }
html[data-theme="night"] .project-card-tag { border-color: #444; background: #333; color: #aaa; }
.project-card-meta { font-size: 11px; color: #999; margin-top: auto; padding-top: 6px; }
.projects-overlay-empty { grid-column: 1 / -1; color: #888; font-size: 14px; padding: 20px; text-align: center; }

/* Create Project Modal */
.projects-create-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1200; display: none; align-items: center; justify-content: center; }
.projects-create-modal-overlay.show { display: flex; }
.projects-create-modal {
    background: #fff; border: 2px solid #000; border-radius: 12px; padding: 24px;
    max-width: 420px; width: 90%; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
html[data-theme="night"] .projects-create-modal { background: #1a1a1a; border-color: #444; }
.projects-create-modal h2 { margin: 0 0 16px; font-size: 18px; }
.projects-create-modal .form-group { margin-bottom: 14px; }
.projects-create-modal label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.projects-create-modal input, .projects-create-modal textarea {
    width: 100%; padding: 8px 12px; font-size: 14px; border: 2px solid #000; border-radius: 6px; box-sizing: border-box;
}
html[data-theme="night"] .projects-create-modal input,
html[data-theme="night"] .projects-create-modal textarea { border-color: #444; background: #222; color: #e8e8e8; }
.projects-create-modal textarea { min-height: 60px; resize: vertical; }
.projects-create-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.projects-create-modal-actions button { flex: 1; padding: 10px; font-weight: 600; border-radius: 6px; cursor: pointer; border: 2px solid; }
.projects-create-modal-actions .btn-cancel { background: #fff; color: #000; border-color: #000; }
.projects-create-modal-actions .btn-create { background: #000; color: #fff; border-color: #000; }
.projects-create-modal-actions .btn-create:hover { background: #333; border-color: #333; }
.projects-create-modal-actions .btn-create:disabled { opacity: 0.5; cursor: not-allowed; }
.projects-create-modal .tag-hint { font-size: 11px; color: #888; margin-top: 2px; }