/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root {
  /* New FLB Brand Colors */
  --flb-cyan: #0086cb;
  --flb-blue: #00255e;

  /* Semantic Variables - Default (Dark Mode) */
  --bg-color: var(--flb-blue);
  --text-main: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.7);
  --primary: var(--flb-cyan);
  --secondary: #10b981;
  --card-bg: rgba(255, 255, 255, 0.1);
  --card-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

/* Light Mode Overrides */
body.light-mode {
  --bg-color: #ffffff;
  --text-main: var(--flb-blue);
  --text-muted: rgba(0, 37, 94, 0.75);
  --card-bg: rgba(0, 134, 203, 0.05);
  --card-border: rgba(0, 40, 94, 0.15);
  --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Calibri', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  /* Prevent body scroll, we scroll content */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* App Header */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-color);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  z-index: 1001;
  /* backdrop-filter: blur(10px); Removed for solidity */
}

.header-toggle-btn {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.5rem;
  cursor: pointer;
  margin-right: 1rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  font-size: 1.25rem;
  margin: 0;
  font-weight: 700;
}

/* Sidebar */
.sidebar {
  width: 280px;
  background: var(--card-bg);
  border-right: 1px solid var(--card-border);
  padding: 1.5rem;
  padding-bottom: 2rem;
  /* Ensure bottom content is not cut off */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-shrink: 0;
  height: calc(100vh - 60px);
  position: fixed;
  top: 60px;
  left: -280px;
  z-index: 1000;
  transition: transform 0.3s ease-in-out, left 0.3s ease-in-out;
  backdrop-filter: blur(10px);
  overflow-y: auto;
}

.sidebar.open {
  left: 0;
}

@media (min-width: 769px) {
  .sidebar {
    left: 0;
    padding-top: 1.5rem;
    /* Reset, since it's just a flex child in some layouts, but here it's fixed */
    transform: translateX(0);
  }

  body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
  }

  body.sidebar-collapsed .main-content {
    margin-left: 0;
  }

  .main-content {
    margin-left: 280px;
    /* Sidebar width */
    transition: margin-left 0.3s ease-in-out;
  }

  .sidebar-header-mobile {
    display: none;
  }
}

.sidebar-header-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.close-sidebar-btn {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 2rem;
  cursor: pointer;
}

.logo-area h1 {
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.control-group label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Nav Buttons */
.nav-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-btn {
  width: 100%;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  padding: 0.8rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-btn.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

body.light-mode .nav-btn {
  background: #f1f5f9;
  color: var(--flb-blue);
  border: 1px solid #e2e8f0;
}

body.light-mode .nav-btn.active {
  background: var(--flb-cyan);
  color: white;
  border-color: var(--flb-cyan);
}

body.light-mode .nav-btn:hover:not(.active) {
  background: #e2e8f0;
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

body.light-mode .nav-btn:disabled {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted);
  border-color: transparent;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 1.5rem;
  padding-top: 70px;
  /* Increased to 70px to ensure clearance under header */
  position: relative;
  /* width: 100%; Removed to prevent overflow with margin-left */
  overflow-y: auto;
  height: 100vh;
  /* Ensure it fills the vertical space explicitly */
  max-height: 100vh;
  /* Force constraint */
}

/* Toolbar Hidden State */
body.toolbar-hidden .toolbar {
  display: none !important;
}

body.toolbar-hidden .main-content {
  padding-top: 60px;
  /* Ensure consistency */
}

.section {
  display: none;
  max-width: 100%;
  margin: 0 auto;
  animation: fadeIn 0.5s ease-out;
}

.section.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toolbar */
.toolbar {
  margin-top: 0;
  /* Removed negative margin to prevent overlap */
  margin-bottom: 1rem;
  display: flex;
  align-items: center; /* Prevent stretching */
  gap: 0.5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
  width: 100%;
}

/* Buttons */
.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  border: 1px solid var(--card-border);
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

body.light-mode .btn-secondary {
  background: #f1f5f9;
  color: var(--flb-blue);
  border-color: #e2e8f0;
}

/* Impressum & Cards */
.card {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--card-border);
}

/* --- Mindmap Styles --- */

#mindmap-viewport {
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#mindmap-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

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

.connection-group {
  cursor: pointer;
  pointer-events: all;
}

.connection-group:hover .visual-line {
  stroke: var(--primary) !important;
  stroke-width: 3;
  filter: drop-shadow(0 0 3px var(--primary));
}

.visual-line {
  transition: stroke 0.2s, stroke-width 0.2s, filter 0.2s;
}

.hit-area {
  stroke: var(--text-muted);
  stroke-width: 25;
  /* Larger hit area for touch */
  opacity: 0;
}

.connection-label {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  pointer-events: auto;
  user-select: none;
  backdrop-filter: blur(4px);
  border: 1px solid transparent;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s;
  text-align: center;
}

.connection-label:hover {
  border-color: var(--text-muted);
  background: var(--bg-color);
  color: var(--text-main);
  z-index: 20;
}

.connection-label:empty {
  /* define min size for empty label so it can be hovered if needed, or maybe hide it until hovered? */
  /* actually, let's keep it invisible if empty unless hovered? No, difficult to hover invisible. */
  /* We will give it a placeholder in JS if empty? Or just depend on line hover context menu -> rename */
  display: none;
}

.connection-label.visible {
  display: block;
}

.connection-label:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-color);
  color: var(--text-main);
  z-index: 20;
  min-width: 60px;
  /* Sligthly larger min-width */
  min-height: 30px;
  /* Touch target */
  display: flex;
  align-items: center;
  justify-content: center;
}

.mindmap-node {
  position: absolute;
  width: 120px;
  height: 60px;
  background: var(--bg-color);
  /* Opaque background */
  border: 2px solid var(--primary);
  border-radius: 8px;
  /* backdrop-filter: blur(10px); Removed blur since it's opaque now */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: border-color 0.2s, box-shadow 0.2s;
  pointer-events: auto;
}

body.light-mode .mindmap-node {
  background: #ffffff;
  /* Opaque white */
  border-color: var(--flb-cyan);
  color: black;
}

.mindmap-node:active {
  cursor: grabbing;
}

/* Resize Handles */
.resize-handle {
  position: absolute;
  width: 15px;
  height: 15px;
  z-index: 20;
  /* Higher than text */
}

.handle-tl {
  top: -2px;
  left: -2px;
  border-top: 4px solid var(--primary);
  border-left: 4px solid var(--primary);
  cursor: nwse-resize;
  border-top-left-radius: 6px;
}

.handle-tr {
  top: -2px;
  right: -2px;
  border-top: 4px solid var(--primary);
  border-right: 4px solid var(--primary);
  cursor: nesw-resize;
  border-top-right-radius: 6px;
}

.handle-bl {
  bottom: -2px;
  left: -2px;
  border-bottom: 4px solid var(--primary);
  border-left: 4px solid var(--primary);
  cursor: nesw-resize;
  border-bottom-left-radius: 6px;
}

.handle-br {
  bottom: -2px;
  right: -2px;
  border-bottom: 4px solid var(--primary);
  border-right: 4px solid var(--primary);
  cursor: nwse-resize;
  border-bottom-right-radius: 6px;
}

/* Adjust colors for light mode */
body.light-mode .handle-tl,
body.light-mode .handle-tr,
body.light-mode .handle-bl,
body.light-mode .handle-br {
  border-color: var(--flb-cyan);
}

/* Custom color overrides handled via inline styles usually, but for handles 
   we might want them to match the node border color if custom. 
   We will handle that in JS by applying border color to handles too. */

.mindmap-node.linking {
  border-color: var(--secondary);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.node-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px;
  outline: none;
  font-size: 0.9rem;
  overflow: hidden;
  word-break: break-word;
}

.node-port {
  position: absolute;
  bottom: -10px;
  /* Larger offset */
  right: -10px;
  width: 24px;
  /* Larger size for touch */
  height: 24px;
  background: var(--text-main);
  border-radius: 50%;
  cursor: crosshair;
  border: 4px solid var(--bg-color);
  /* Thicker border to separate from node */
  transition: transform 0.2s, background-color 0.2s;
  z-index: 25;
  /* Ensure above node border AND resize handles (20) */
}

.node-port:hover {
  transform: scale(1.2);
  background-color: var(--secondary);
}

/* Slider (Theme Toggle) */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: var(--primary);
}

input:checked+.slider:before {
  transform: translateX(20px);
}

/* Printing styles */
@media print {

  .app-header,
  .sidebar,
  .toolbar {
    display: none !important;
  }

  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  #mindmap-container {
    border: none !important;
    height: 100vh !important;
    width: 100vw !important;
    position: static !important;
  }

  .mindmap-node {
    border-color: black !important;
    color: black !important;
    background: white !important;
  }

  svg line {
    stroke: black !important;
  }
}

/* Context Menu */
.context-menu {
  position: fixed;
  background: var(--card-bg);
  /* Use card bg for glass effect */
  border: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 0.5rem 0;
  z-index: 2000;
  min-width: 150px;
  display: none;
  /* hidden by default */
}

body.light-mode .context-menu {
  background: white;
  border-color: #e2e8f0;
  color: var(--flb-blue);
}

.menu-item {
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.light-mode .menu-item:hover {
  background: #f1f5f9;
}

.menu-item.delete {
  color: #ef4444;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(5px);
}

.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  min-width: 300px;
  backdrop-filter: blur(12px);
}

body.light-mode .modal-content {
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-content h3 {
  margin-bottom: 1rem;
  color: var(--primary);
}

/* Help Modal Specifics */
.help-modal {
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.help-content ul {
  margin-left: 1.5rem;
  margin-bottom: 0.8rem;
}

.help-content p {
  margin-bottom: 0.5rem;
}

/* Icon Button */
.btn-icon {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Optional: make it round */
  font-size: 1.2rem;
}

/* --- Kanban Board Styles --- */

.kanban-board {
  display: flex;
  gap: 1.5rem;
  /* overflow-x: auto; Removed for full width desktop */
  height: calc(100vh - 180px);
  padding-bottom: 1rem;
  width: 100%;
  /* Full width */
  overflow: hidden;
  /* Hide overflow on desktop usually */
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .kanban-board {
    flex-direction: column;
    overflow-y: auto;
    height: auto;
    /* Allow growth */
    min-height: calc(100vh - 180px);
  }
}

.kanban-board::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  /* Added width for vertical scrollbar */
}

.kanban-board::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-board::-webkit-scrollbar-thumb {
  background-color: var(--card-border);
  border-radius: 4px;
}

.kanban-column {
  flex: 1;
  /* Equal full width */
  min-width: 0;
  /* Allow flex shrinking if needed */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  transition: background 0.2s, border-color 0.2s;
  max-height: 100%;
}

@media (max-width: 768px) {
  .kanban-column {
    min-width: 100%;
    /* Full width on mobile */
    min-height: 400px;
    /* Min height for usability */
  }
}

/* Constrain height to parent */

/* Card Controls (Arrows) */
.card-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0.5;
  transition: opacity 0.2s;
  margin-right: 4px;
  /* Space between arrows and text */
}

.kanban-card:hover .card-controls {
  opacity: 1;
}

.card-arrow {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  /* Visible arrow size */
  transition: background 0.1s, color 0.1s;
}

.card-arrow:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary);
}

body.light-mode .card-arrow:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.light-mode .kanban-column {
  background: rgba(255, 255, 255, 0.5);
  border-color: #e2e8f0;
}

.kanban-column.drag-over {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(0, 134, 203, 0.2);
}

body.light-mode .kanban-column.drag-over {
  background: rgba(0, 134, 203, 0.1);
}

.column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--card-border);
}

.column-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary);
}

.column-count {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

body.light-mode .column-count {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted);
}

.column-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 0.2rem;
  /* Space for scrollbar */
}

/* Kanban Card */
.kanban-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--primary);
  /* Default accent */
  border-radius: 0.5rem;
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  /* For absolute positioning of resize handle, etc. */
  display: flex;
  /* Flex for content + arrows */
  justify-content: space-between;
  /* Ensure spacing */
  gap: 8px;
  align-items: flex-start;
}

body.light-mode .kanban-card {
  background: white;
  border-color: #e2e8f0;
}

.kanban-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: var(--primary);
}

.kanban-card.dragging {
  cursor: grabbing;
  opacity: 0.9;
  z-index: 1000;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  position: fixed;
  /* Fixed when dragging via mouse/touch specifically in our custom implementation */
  pointer-events: none;
  /* so we can detect drop target underneath */
}

/* Placeholder shown in the column while dragging */
.kanban-card-placeholder {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--text-muted);
  border-radius: 0.5rem;
  height: 80px;
  /* Or dynamic based on dragged card */
  margin-bottom: 1rem;
}

body.light-mode .kanban-card-placeholder {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.2);
}

/* Card Content Area - Editable */
.kn-card-content {
  outline: none;
  min-height: 1.5em;
  /* Ensure at least one line */
  cursor: text;
}

/* Resizing Corners for Cards */
.kanban-resize-handle {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 10;
  cursor: s-resize;
  /* Vertical only */
  /* Add visual cue */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.kanban-card:hover .kanban-resize-handle {
  opacity: 1;
}

.kanban-resize-handle::after {
  content: '';
  width: 40px;
  height: 4px;
  background-color: var(--text-muted);
  border-radius: 2px;
  opacity: 0.5;
}

/* Text Format Toolbar Styles (if needed specific overrides) */
#text-format-menu .menu-item b {
  font-weight: bold;
  margin-right: 0.5rem;
}

#text-format-menu .menu-item i {
  font-style: italic;
  margin-right: 0.5rem;
}

#text-format-menu .menu-item u {
  text-decoration: underline;
  margin-right: 0.5rem;
}

/* Mobile specific for Kanban */
@media (max-width: 768px) {

  /* Enable Body Scroll */
  body {
    overflow-y: auto !important;
    /* Force scroll */
    height: auto !important;
  }

  .main-content {
    height: auto !important;
    overflow: visible !important;
  }

  .kanban-board {
    flex-direction: column;
    height: auto;
    overflow-y: visible;
    /* Let page scroll */
    padding-right: 0;
  }

  .kanban-column {
    min-width: 100%;
    max-width: 100%;
    height: auto;
    /* Let content dictate height or limit it */
    min-height: 200px;
    /* Ensure some height */
    max-height: none;
    /* Allow full expansion */
    margin-bottom: 1rem;
  }
}

/* Card Menu Button */
.card-menu-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.card-menu-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-color);
}

/* --- Flashcard Styles --- */

/* Mode Toggle */
.btn-mode {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.btn-mode.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-mode:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

body.light-mode .btn-mode:hover:not(.active) {
  background: #e2e8f0;
}

/* Flashcard Scene (3D) */
.flashcard-scene {
  perspective: 1000px;
  width: 100%;
  max-width: 750px;
  /* Responsive sizing: 
     - Max height depends on viewport (subtracting header/footer/padding space)
     - Maintain aspect ratio (approx 5:3 like index cards)
  */
  height: auto;
  aspect-ratio: 5 / 3;
  /* Relaxed height constraint to allow scrolling if needed */
  max-height: 60vh;
  /* was calc(100vh - 400px) which forced no-scroll */
  min-height: 250px;
  /* Prevent too small */
  margin: 0 auto;
}

.flashcard {
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

.flashcard-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  flex-direction: column;
}

.flashcard-front {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.flashcard-back {
  background: var(--bg-color);
  border: 1px solid var(--primary);
  transform: rotateY(180deg);
}

.fc-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

#fc-term {
  font-size: 1.5rem;
}

.fc-hint {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

#fc-definition {
  font-size: 1.1rem;
  line-height: 1.5;
}

/* Edit Mode List Container */
#fc-list {
  overflow-y: auto;
  max-height: 60vh;
  padding-right: 0.5rem;
}

/* List Item in Edit Mode */
.fc-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  transition: background 0.2s;
  flex-shrink: 0;
}

.fc-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.light-mode .fc-list-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

.fc-list-item .fc-content {
  flex: 1;
}

.fc-list-item .fc-term {
  font-weight: bold;
  font-size: 1rem;
  color: var(--primary);
}

.fc-list-item .fc-def {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.fc-list-item .fc-actions {
  display: flex;
  gap: 0.5rem;
}

/* Edit Mode Responsive Input */
@media (max-width: 600px) {
  .card h3+div {
    flex-direction: column;
  }

  .flashcard-scene {
    height: 400px !important;
  }
}

/* --- Leitner System Styles --- */
.leitner-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: nowrap;
  width: 100%;
}

.leitner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  flex: 1;
  min-width: 0;
  max-width: 120px;
}

.leitner-box:hover {
  transform: translateY(-5px);
}

.leitner-box.active .box-visual {
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(0, 134, 203, 0.5);
  background: rgba(0, 134, 203, 0.1);
}

.leitner-box.inactive {
  opacity: 0.6;
}

.box-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  font-weight: bold;
}

.box-visual {
  width: 100%;
  height: 75px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 0.5rem;
  position: relative;
  transition: all 0.3s;
}

/* Stack effect for boxes with cards */
.leitner-box.has-cards .box-visual {
  background: var(--card-bg);
  box-shadow:
    0 2px 0 var(--text-muted),
    0 4px 0 var(--card-bg),
    0 6px 0 var(--text-muted);
}

.box-label {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-main);
  text-align: center;
}

/* Tablet / Landscape Mobile Responsive */
/* Tablet / Landscape Mobile Responsive */
/* Tablet / Landscape Mobile Responsive */
/* Tablet / Landscape Mobile Responsive */
/* Targeted specifically for iPad Landscape (approx 1024px - 1180px) and smaller */
@media (max-height: 900px),
(max-width: 1180px) {

  /* Slightly larger breakpoint */
  .main-content {
    padding-top: 100px;
    /* INCREASED to prevent overlap */
    padding-bottom: 1rem;
    /* Allow some bottom space for scrolling */
  }

  .flashcard-scene {
    /* Critical: Ensure space for Leitner row + Header + Toolbar */
    /* Reduced scale for better fit on iPad Landscape */
    max-height: 50vh;
    max-width: 500px;
    /* Reduced from 600px */
    margin-bottom: 1rem;
  }

  .flashcard-face {
    padding: 1rem;
  }

  #fc-term {
    font-size: 1.3rem;
  }

  #fc-active-box-view {
    margin-bottom: 5px !important;
    /* Overriding inline style */
  }

  #fc-active-box-label {
    margin-bottom: 2px !important;
  }

  /* Leitner Row adjustments for tablet/landscape */
  .leitner-row {
    margin-top: 5px;
    gap: 5px;
  }

  .leitner-box {
    max-width: 100px;
    min-width: 60px;
    /* Ensure visibility */
  }

  .box-visual {
    height: 50px;
    display: block;
    /* Ensure it renders */
  }
}

/* Small Mobile / Landscape Phone */
/* Small Mobile / Landscape Phone */
@media (max-height: 600px),
(max-width: 600px) {
  .main-content {
    padding: 0.5rem;
    padding-top: 85px;
    /* Reduced to fit content better */
  }

  .flashcard-scene {
    max-height: 50vh;
    /* Relaxed */
    /* Very aggressive constraint */
    min-height: 180px;
    margin-bottom: 0.5rem;
  }

  #fc-term {
    font-size: 1.1rem;
  }

  #fc-definition {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .leitner-row {
    gap: 2px;
    margin-top: 5px;
  }

  .leitner-box {
    /* No fixed width, relying on flex */
    min-width: 40px;
    /* Ensure it doesn't collapse */
  }

  .box-visual {
    height: 30px;
    /* Significantly smaller */
    border-width: 1px;
    border-radius: 4px;
    display: block;
  }

  .box-label {
    display: none;
    /* Hide label */
  }

  .box-count {
    font-size: 0.7rem;
    margin-bottom: 0;
  }

  /* Hide active box label and progress bar if really small? */
  #fc-active-box-view>div:first-child {
    margin-bottom: 2px !important;
  }

  #fc-active-box-label {
    font-size: 1rem;
    margin-bottom: 0 !important;
  }

  .progress-bar-bg {
    height: 4px !important;
    margin: 2px auto !important;
  }

  /* Compact Toolbar */
  .toolbar {
    gap: 5px;
    margin-bottom: 5px;
    flex-wrap: wrap;
    /* Ensure buttons wrap if needed */
  }

  .btn-primary,
  .btn-secondary {
    padding: 4px 8px;
    font-size: 0.8rem;
  }
}

/* Burger Menu Dropdown */
.burger-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 0.5rem 0;
  z-index: 2000;
  min-width: 220px;
  display: none;
  flex-direction: column;
}

body.light-mode .burger-dropdown {
  background: white;
  border-color: #e2e8f0;
  color: var(--flb-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.burger-dropdown .menu-item {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  font-family: inherit;
  justify-content: flex-start;
}

.burger-dropdown label.menu-item {
  font-weight: normal;
  margin-bottom: 0;
}

.menu-separator {
  height: 1px;
  background: var(--card-border);
  margin: 0.5rem 0;
  width: 100%;
}

body.light-mode .menu-separator {
  background: #e2e8f0;
}

/* Flashcards Menu specific alignment */
#flashcards-menu {
  left: auto;
  right: 0;
}
/* --- Questionnaire Styles --- */

.question-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.question-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.answer-btn {
    width: 100%;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    border: 1px solid var(--card-border);
}

.answer-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.answer-btn.selected {
    /* Styles are also set inline in JS but defining here as well */
    border-color: var(--primary);
    background: rgba(0, 134, 203, 0.1);
    color: var(--text-main);
}

body.light-mode .answer-btn.selected {
    background: rgba(0, 134, 203, 0.1);
    border-color: var(--primary);
}

.form-input {
    width: 100%;
    padding: 0.8rem;
    border-radius: 0.5rem;
    border: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
}

body.light-mode .form-input {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--text-main);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 134, 203, 0.2);
}

#result-section {
    animation: fadeIn 0.5s ease-out;
}