/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background-color: #475569; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
.dark ::-webkit-scrollbar-thumb:hover { background-color: #64748b; }

/* Base */
body { transition: background-color 0.3s ease, color 0.3s ease; }

/* Animations */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   LAYOUT
   ———————————————————————————
   PROBLEM: main has overflow-y:auto. In modern Chrome,
   height:100% on children of an overflow container
   resolves to the CONTENT height, not the CSS height.
   So h-full on view sections doesn't fill the screen.
   
   FIX: Use a concrete calc(100vh - ...) so the height
   is always definite, regardless of scroll context.
   nav=56px, main padding: 64px desktop / 24px mobile.
*/
.view-section:not(#view-home):not(.hidden) {
  height: calc(100vh - 56px - 64px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 767px) {
  .view-section:not(#view-home):not(.hidden) {
    height: calc(100vh - 56px - 24px);
  }
}

/* Home view: natural height, scrollable — no display override so hidden class works */
#view-home {
  height: auto;
  overflow: visible;
}


/* =============================================
   MINDMAP
   ============================================= */
#mindmap-container {
  position: relative;
  overflow: hidden;
  touch-action: none;
  flex: 1;
  min-height: 300px;
}

#mindmap-svg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 10;
}

.mindmap-node {
  position: absolute;
  min-width: 100px; max-width: 220px;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  cursor: grab; user-select: none; z-index: 20;
  border: 2px solid transparent;
  transition: transform 0.1s;
}
.mindmap-node:active { cursor: grabbing; transform: scale(1.02); }
.mindmap-node.selected {
  border-color: #ff6f59;
  box-shadow: 0 0 0 4px rgba(255,111,89,.2), 0 10px 15px -3px rgba(0,0,0,.1);
  z-index: 30;
}
.mindmap-node .node-content { outline: none; word-wrap: break-word; min-height: 22px; }
.mindmap-node .node-content[contenteditable="true"] { cursor: text; }

.mindmap-path {
  fill: none; stroke: #cbd5e1; stroke-width: 3px;
  stroke-linecap: round; transition: stroke 0.3s ease;
}
.dark .mindmap-path { stroke: #334155; }

/* Mindmap two-pane — stack vertically on small screens */
@media (max-width: 640px) {
  #view-mindmap > .flex.flex-1.gap-4 {
    flex-direction: column;
  }
  #view-mindmap .w-56.flex-shrink-0 {
    width: 100%;
    max-height: 160px;
  }
  #view-mindmap #mm-canvas-wrapper {
    min-height: 300px;
  }
  #view-mindmap .flex.gap-2#mm-canvas-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
  #view-mindmap .flex.gap-2#mm-canvas-actions button {
    font-size: 0.7rem;
    padding: 4px 8px;
  }
}

/* =============================================
   POMODORO TIMER
   ============================================= */
@media (max-width: 640px) {
  #view-pomodoro .relative.w-64.h-64 {
    width: 200px; height: 200px;
  }
  #view-pomodoro .text-6xl { font-size: 2.5rem; }
}

/* =============================================
   NOTEBOOK — responsive two-pane
   ============================================= */
@media (max-width: 768px) {
  #view-notebook .flex.h-full.gap-4 {
    flex-direction: column;
    gap: 8px;
  }
  #view-notebook .w-48.flex-shrink-0,
  #view-notebook .w-52.flex-shrink-0 {
    width: 100%;
    max-height: 140px;
    flex-shrink: 1;
  }
  #view-notebook .flex-1.flex.flex-col {
    min-height: 0;
  }
  #nb-editor {
    min-height: 200px;
  }
}

/* =============================================
   AGENDA — responsive two-pane
   ============================================= */
@media (max-width: 768px) {
  #view-agenda > .flex.gap-6 {
    flex-direction: column;
    gap: 12px;
  }
  #view-agenda .w-80.flex-shrink-0 {
    width: 100%;
  }
}

/* =============================================
   CALCULATOR — responsive grid
   ============================================= */
.calc-btn {
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  border: 1px solid #d1d5db; border-radius: 4px; color: #1f2937;
  font-size: 1rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  user-select: none; cursor: pointer; transition: all 0.1s;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); min-height: 44px;
}
.calc-btn:hover { background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%); }
.calc-btn:active { background: #e5e7eb; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); }
.dark .calc-btn { background: linear-gradient(180deg, #374151 0%, #1f2937 100%); border-color: #4b5563; color: #f3f4f6; }
.dark .calc-btn:hover { background: linear-gradient(180deg, #4b5563 0%, #374151 100%); }
.dark .calc-btn:active { background: #1f2937; }

.calc-btn-op { background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%); font-weight: 500; }
.dark .calc-btn-op { background: linear-gradient(180deg, #374151 0%, #293444 100%); }

.calc-btn-equals { background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%); border-color: #7dd3fc; font-weight: bold; }
.dark .calc-btn-equals { background: linear-gradient(180deg, #0369a1 0%, #075985 100%); border-color: #0284c7; }

.calc-sub { font-size: 0.6rem; color: #6b7280; line-height: 1; }
.dark .calc-sub { color: #9ca3af; }

.calc-grid-sci  { display: grid; grid-template-columns: repeat(10, 1fr); }
.calc-grid-prog { display: grid; grid-template-columns: repeat(10, 1fr); }

@media (max-width: 640px) {
  .calc-grid-sci,
  .calc-grid-prog { grid-template-columns: repeat(5, 1fr); }
  .calc-btn { font-size: 0.85rem; min-height: 36px; padding: 2px; }
  .calc-sub  { font-size: 0.55rem; }
}

/* Custom input */
.calc-inner-input { background: white; border: 1px solid #d1d5db; border-radius: 4px; padding: 4px 8px; outline: none; }
.calc-inner-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
.dark .calc-inner-input { background: #1a2233; border-color: #4b5563; color: white; }

/* =============================================
   RANGE SLIDER
   ============================================= */
input[type=range] { -webkit-appearance: none; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; }
input[type=range]:focus { outline: none; }

/* =============================================
   SPELL CHECKER
   ============================================= */
.spell-error {
  border-bottom: 2px wavy #ef4444;
  background-color: rgba(239,68,68,.1);
  cursor: pointer; border-radius: 2px; position: relative;
}
.spell-error:hover { background-color: rgba(239,68,68,.2); }
.spell-suggestion-item { cursor: pointer; padding: 6px 12px; border-radius: 6px; font-weight: 500; transition: background-color 0.15s; }
.spell-suggestion-item:hover { background-color: #f1f5f9; }
.dark .spell-suggestion-item:hover { background-color: #334155; }

/* =============================================
   TOOL GRID — 2 cols on phone, 3 on desktop
   ============================================= */
#tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  #tools-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  #tools-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* Smaller card padding on mobile */
@media (max-width: 640px) {
  #tools-grid > div { padding: 16px; border-radius: 16px; }
  #tools-grid h3 { font-size: 0.95rem; margin-bottom: 4px; }
  #tools-grid p  { font-size: 0.75rem; }
  #tools-grid .w-14 { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 10px; }
}

/* =============================================
   MOBILE — general tool view padding
   ============================================= */
@media (max-width: 640px) {
  /* Top headings in tool views */
  .view-section h2.text-3xl,
  .view-section h2.text-2xl {
    font-size: 1.3rem;
  }
  /* Shrink toolbar buttons on mobile */
  .view-section .flex.gap-2 button,
  .view-section .flex.gap-3 button {
    font-size: 0.72rem;
    padding: 5px 8px;
  }
}

/* =============================================
   MODAL — full width on small screens
   ============================================= */
@media (max-width: 480px) {
  #custom-modal-content {
    margin: 12px;
    border-radius: 16px;
  }
}

/* =============================================
   SIDEBAR — smooth slide on mobile
   ============================================= */
#sidebar.flex {
  display: flex !important;
}