/* Sitemap Planner - Concept/Sketch Style */

:root {
  --bg-color: #F3F4F6;
  --text-color: #111827;
  --border-color: #000000;
  --accent-color: #0D9488;
  --highlight-color: #F97316;
}

/* View switching – only one section visible at a time */
.view-section {
  display: none;
}
.view-section.active {
  display: block;
}

/* Global Styles */
body {
  color: var(--text-color);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.03em;
}

/* Dotted Background - More subtle */
.dotted-bg {
  background-color: var(--bg-color);
  background-image: radial-gradient(#D1D5DB 1.5px, transparent 1.5px);
  background-size: 32px 32px;
}

/* Borders & Shapes – consistent 4px radius (circles/pills keep rounded-full) */
.rounded-sm, .rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl {
  border-radius: 4px !important;
}

/* Enforce 2px borders and transitions (exclude tree items – styled below) */
button:not(.tree-item-content *), input, textarea, .card-base, .border {
  border-width: 2px !important;
  border-style: solid !important;
  transition: all 0.15s ease-out !important;
}

/* 
   Smart Border Color Overrides 
   This allows us to keep the logic in JS (swapping classes) 
   while enforcing our "Sketch" look (black default borders).
*/

/* Default gray borders -> Black */
.border-gray-100, .border-gray-200, .border-gray-300, .border-gray-400, .border-slate-200 {
  border-color: var(--border-color) !important;
}

/* Active/Selected borders -> Accent Color */
.border-architect-blue, .hover\:border-architect-blue:hover {
  border-color: var(--accent-color) !important;
}

.border-architect-orange {
  border-color: var(--highlight-color) !important;
}

/* Hover States with Hard Shadows – exclude tree editor rows */
button:hover, 
#templates-content button:hover,
#view-home button:hover,
#saved-projects-list > div:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px 0px var(--border-color) !important;
  z-index: 10;
  border-color: var(--accent-color) !important;
  background-color: #fff;
}

/* Tree row hover: subtle, no heavy shadow */
.tree-item-content:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.12) !important;
  background-color: #fff !important;
}
.tree-item-content.tree-item-nested:hover {
  background-color: #F0FDFA !important;
}

/* Active/Selected states */
button:active, .tree-item-content:active {
  transform: translate(0, 0);
  box-shadow: none !important;
}

/* Specific component overrides */

/* Navbar */
#navbar {
  border-bottom: 2px solid var(--border-color) !important;
  background: rgba(255, 255, 255, 0.95);
}

/* Cards (Templates, etc) */
#templates-content button, 
#view-home button {
  box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.1) !important;
  background-image: none; /* Remove gradient for cleaner look */
  background-color: #fff;
}

/* Saved Projects List Items */
#saved-projects-list > div {
  border: 2px solid var(--border-color) !important;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  background: white;
}

/* Badge Styles */
.badge-essential, .badge-recommended, .badge-optional {
  border-width: 2px !important;
  font-weight: 700;
  box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1);
}

.badge-essential { border-color: #166534 !important; }
.badge-recommended { border-color: #1e40af !important; }
.badge-optional { border-color: #4b5563 !important; }


/* ─── Tree Editor: clean, scannable sitemap ─── */
.tree-item-content {
  border: 1px solid #E5E7EB !important;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: #fff;
  padding: 0.625rem 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Sub-items: light background + left border for clear hierarchy */
.tree-item-content.tree-item-nested {
  background: #F8FAFC !important;
  border-left: 3px solid var(--accent-color) !important;
}

/* Connectors: thin, subtle */
.tree-list .tree-list {
  border-left: 1px solid #E2E8F0;
  position: relative;
  margin-left: 0.75rem;
  padding-left: 1rem;
}

.tree-list .tree-list .tree-item {
  position: relative;
}

.tree-list .tree-list .tree-item::before {
  content: '';
  position: absolute;
  top: 1rem;
  left: -1rem;
  width: 1rem;
  height: 1px;
  background: #E2E8F0;
}

.tree-list > .tree-item::before {
  display: none;
}

/* Drag handle & actions: always visible, good contrast */
.tree-item-content .drag-handle,
.tree-item-content .toggle-btn {
  color: #64748B !important;
}
.tree-item-content .drag-handle:hover,
.tree-item-content .toggle-btn:hover {
  color: var(--accent-color) !important;
}
.tree-item-content .add-child-btn,
.tree-item-content .edit-btn,
.tree-item-content .view-desc-btn {
  color: #64748B !important;
  background: #F1F5F9;
  padding: 0.375rem;
  border-radius: 4px;
}
.tree-item-content .add-child-btn:hover,
.tree-item-content .edit-btn:hover,
.tree-item-content .view-desc-btn:hover {
  color: var(--accent-color) !important;
  background: #E0F2F1 !important;
}
.tree-item-content .delete-btn {
  color: #64748B !important;
  background: #F1F5F9;
  padding: 0.375rem;
  border-radius: 4px;
}
.tree-item-content .delete-btn:hover {
  color: #DC2626 !important;
  background: #FEE2E2 !important;
}

/* Description text: readable, no distracting outline */
.tree-item-content .page-desc {
  color: #64748B !important;
  font-style: normal;
}

.tree-item-content .inline-edit {
  border: none !important;
  box-shadow: none !important;
}

/* Priority dots: keep colored borders (don’t override to black) */
.tree-item-content .priority-dot[data-priority="essential"] { border-color: #22C55E !important; background: #DCFCE7 !important; }
.tree-item-content .priority-dot[data-priority="recommended"] { border-color: #3B82F6 !important; background: #DBEAFE !important; }
.tree-item-content .priority-dot[data-priority="optional"] { border-color: #94A3B8 !important; background: #F1F5F9 !important; }

/* Tree area container: soft background, no heavy border */
.tree-container {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.stats-bar {
  border-bottom: 1px solid #E2E8F0;
}


/* Wizard Progress */
.wizard-progress-bar {
  border: 2px solid var(--border-color);
  background: white;
  height: 12px;
}

.wizard-progress-fill {
  background: var(--accent-color);
  border-right: 2px solid var(--border-color);
}

/* Step Dots */
.step-dot {
  border: 2px solid var(--border-color);
  background: white;
  font-weight: 800;
}

.step-dot.active {
  background: var(--accent-color);
  color: white;
  box-shadow: 2px 2px 0px 0px var(--border-color);
}

.step-dot.completed {
  background: var(--text-color);
  color: white;
}

/* Modal */
.modal-content {
  background: #fff;
  border: 3px solid var(--border-color);
  box-shadow: 8px 8px 0px 0px var(--border-color);
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  max-width: 28rem;
  width: 90%;
}

/* Modal buttons: no global hover override, so priority colors stay correct */
.modal-content button:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: unset !important;
}

/* Actieve prioriteit-knoppen: bij hover donkerdere tint, nooit wit */
.modal-content .priority-btn.bg-green-500:hover,
.modal-content .priority-btn.bg-green-600:hover {
  background-color: #16a34a !important;
  color: white !important;
  border-color: #16a34a !important;
}
.modal-content .priority-btn.bg-blue-500:hover,
.modal-content .priority-btn.bg-blue-600:hover {
  background-color: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}
.modal-content .priority-btn.bg-gray-500:hover,
.modal-content .priority-btn.bg-gray-600:hover {
  background-color: #4b5563 !important;
  color: white !important;
  border-color: #4b5563 !important;
}

.modal-content #modal-cancel:hover {
  background-color: #E5E7EB !important;
  color: #374151 !important;
}
.modal-content #modal-save:hover {
  background-color: #0f766e !important;
  color: white !important;
}

.modal-content input,
.modal-content textarea,
.modal-content button {
  border-radius: 4px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

/* Inputs focus */
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-color) !important;
  box-shadow: 4px 4px 0px 0px var(--accent-color) !important;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out both;
}

/* Checkbox/Radio custom style */
input[type="radio"], input[type="checkbox"] {
  accent-color: var(--accent-color);
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border-color);
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-left: 2px solid var(--border-color);
}
::-webkit-scrollbar-thumb {
  background: white;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* Drop zones for nesting via drag */
.drop-zone-empty {
  height: 0;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden;
  transition: all 0.15s ease;
}

/* During drag: show all zones as subtle thin indicators */
body.is-dragging .drop-zone-empty {
  height: 6px;
  min-height: 6px;
  padding: 0 !important;
  margin-left: 2rem !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  border: 1px dashed rgba(13, 148, 136, 0.25) !important;
  border-radius: 4px;
  background: transparent;
}

/* Only the hovered drop zone expands and shows text */
body.is-dragging .drop-zone-empty.drag-hover {
  height: auto;
  min-height: 44px;
  padding: 4px !important;
  border: 2px dashed var(--accent-color) !important;
  background: rgba(13, 148, 136, 0.06);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.08);
}

body.is-dragging .drop-zone-empty.drag-hover::before {
  content: 'Sleep hier om te nesten';
  display: block;
  text-align: center;
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 0;
  opacity: 0.8;
}

/* SortableJS ghost: clear placeholder for sibling drops */
.sortable-ghost > .tree-item-content {
  opacity: 0.35;
  border: 2px dashed var(--accent-color) !important;
  background: rgba(13, 148, 136, 0.04) !important;
  box-shadow: none !important;
}

.sortable-chosen > .tree-item-content {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--accent-color) !important;
}

/* Print Overrides */
@media print {
  .dotted-bg { background: white; }
  button, .drag-handle, .add-child-btn, .edit-btn, .view-desc-btn, .delete-btn { display: none !important; }
  .tree-item-content { box-shadow: none !important; border: 1px solid #000 !important; }
  .tree-list .tree-list { border-left: 1px solid #000; }
}