/* --- Base Styles --- */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f0f2f5; color: #333; padding-top: 120px; padding-bottom: 40px; }
.container { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; max-width: 1200px; margin: 0 auto; }
.layout-grid { display: flex; gap: 20px; align-items: stretch; margin-top: 20px; }
.main-col { flex: 1; min-width: 0; }
.sidebar-col { width: 320px; flex-shrink: 0; background: #f8f9fa; border: 1px solid #ddd; border-radius: 6px; padding: 15px; display: flex; flex-direction: column; height: calc(100vh - 200px); position: sticky; top: 120px; }
h1 { margin-top: 0; }
textarea { width: 100%; padding: 10px; border: 1px solid #dddfe2; border-radius: 6px; font-size: 16px; box-sizing: border-box; min-height: 300px; font-family: "Courier New", Courier, monospace; resize: vertical; margin-bottom: 15px; }
.button-group { display: flex; gap: 10px; }
button { border: none; padding: 12px 20px; border-radius: 6px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.btn-primary { background-color: #1877f2; color: white; }
.btn-primary:hover { background-color: #166fe5; }
.btn-secondary { background-color: #e4e6eb; color: #4b4f56; }
.btn-secondary:hover { background-color: #d8dbdf; }
.btn-small { padding: 5px 10px; font-size: 14px; }

/* --- Backup Sidebar Styles --- */
.backup-list { overflow-y: auto; flex: 1; margin-top: 15px; display: flex; flex-direction: column; gap: 10px; padding-right: 5px; }
.backup-item { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.backup-item-header { display: flex; justify-content: space-between; align-items: center; color: #888; font-size: 11px; margin-bottom: 6px; }
.backup-item-note { font-weight: 500; font-size: 13px; margin-bottom: 12px; word-wrap: break-word; color: #333; line-height: 1.4; }

/* --- Codebase File Tree --- */
.file-tree { background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 4px; padding: 15px; max-height: 400px; overflow-y: auto; }
.file-tree ul { list-style: none; padding-left: 20px; margin: 0; }
.file-tree > ul { padding-left: 0; }
.file-tree li { padding: 4px 0; }
.file-tree label { cursor: pointer; display: inline-flex; align-items: center; font-size: 14px; }
.file-tree input[type="checkbox"] { margin-right: 8px; width: 14px; height: 14px; margin-top: 0; }
.folder-label { font-weight: 600; }
.folder-item > ul { display: none; }
.folder-item.expanded > ul { display: block; }
.tree-toggle { cursor: pointer; display: inline-block; width: 20px; text-align: center; transition: transform 0.2s; user-select: none; font-size: 12px; color: #555; }
.folder-item.expanded > label .tree-toggle { transform: rotate(90deg); }

/* --- Result/Message Blocks --- */
.hidden { display: none !important; }
.ai-message, .ai-instructions { padding: 15px; background-color: #e7f3ff; border-left: 4px solid #0d6efd; border-radius: 4px; margin-bottom: 20px; }
.ai-instructions { background-color: #fffbe6; border-color: #ffc107; }
.ai-message pre, .ai-instructions pre { background: rgba(0,0,0,0.05); padding: 10px; border-radius: 4px; overflow-x: auto; white-space: pre-wrap; }
.ai-message code, .ai-instructions code { background: rgba(0,0,0,0.05); padding: 2px 4px; border-radius: 3px; font-family: "Courier New", Courier, monospace; font-size: 14px; }
.ai-message p:last-child, .ai-instructions p:last-child { margin-bottom: 0; }
h3 { margin-top: 0; }
.messages { border-left: 4px solid #ccc; padding: 15px; background-color: #f8f9fa; }
.messages p { margin: 0 0 5px 0; font-family: "Courier New", Courier, monospace; }
p.info strong { color: #0a58ca; }
p.success { color: #198754; }
p.warning { color: #997404; }
p.error { color: #dc3545; }
p.final { font-weight: bold; }

/* --- Execution Plan --- */
.execution-plan { padding: 15px; background-color: #f8f9fa; border-left: 4px solid #6c757d; border-radius: 4px; }
.execution-plan ul { list-style: none; padding-left: 0; margin: 0; font-family: "Courier New", Courier, monospace; }
.execution-plan li { padding: 4px 0; border-bottom: 1px solid #e9ecef; }
.execution-plan li:last-child { border-bottom: none; }
.plan-item-create::before { content: '+ '; color: #198754; font-weight: bold; }
.plan-item-patch::before { content: 'Δ '; color: #ffc107; font-weight: bold; }
.plan-item-delete::before { content: '- '; color: #dc3545; font-weight: bold; }
#initial-button-group button:disabled { background-color: #a0c3ed; cursor: not-allowed; }
#confirmation-button-group { margin-top: 25px; }

/* --- Layout Navigation --- */
.top-nav, .project-folder-bar { background-color: #fff; color: #333; padding: 0 20px; position: fixed; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.top-nav { top: 0; border-bottom: 1px solid #ddd; }
.project-folder-bar { top: 51px; background-color: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.05) inset; border-bottom: 1px solid #ddd;}
.nav-container, .project-folder-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 20px; height: 50px; align-items: center; }
.project-folder-container { height: 40px; }
.top-nav a { color: #0d6efd; text-decoration: none; font-weight: 500; font-size: 15px; }
.top-nav a:hover { text-decoration: underline; }
.project-folder-container label { font-weight: 500; font-size: 14px; white-space: nowrap; }
.project-folder-container input { flex-grow: 1; padding: 5px 8px; border-radius: 4px; border: 1px solid #ccc; font-size: 14px; }

/* --- Auth / Spinners --- */
.auth-container { max-width: 400px; margin: 80px auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; }
.auth-container h2 { margin-top: 0; color: #333; }
.auth-form { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.auth-form input { padding: 10px; border: 1px solid #dddfe2; border-radius: 6px; font-size: 16px; }
.auth-alert { background-color: #f8d7da; color: #721c24; padding: 10px; border-radius: 4px; margin-bottom: 15px; font-size: 14px; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; margin-right: 10px; vertical-align: text-bottom; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Modals --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 2000; }
.modal-content { background: white; padding: 25px; border-radius: 8px; width: 90%; max-width: 750px; max-height: 85vh; overflow-y: auto; position: relative; display: flex; flex-direction: column; }
.modal-close { position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; cursor: pointer; color: #888; }
.modal-close:hover { color: #000; }
.modal-content pre { background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 4px; padding: 15px; white-space: pre-wrap; word-wrap: break-word; flex-grow: 1; overflow-y: auto; }
.modal-content .copy-btn { margin-top: 15px; flex-shrink: 0; }

/* --- Project Explorer --- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-top: 15px; }
.project-card { background: #f8f9fa; border: 1px solid #ddd; border-radius: 6px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.2s, box-shadow 0.2s; }
.project-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.project-card h4 { margin: 0 0 10px 0; font-size: 16px; color: #0d6efd; word-break: break-all; }
.project-card p { margin: 0 0 8px 0; font-size: 13px; color: #555; }
.project-card .btn-primary { margin-top: 10px; align-self: flex-start; }
.pagination-controls { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee; }
.pagination-controls button { padding: 8px 15px; font-size: 14px; }