/* Main Styles */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
}

/* Editor Styles */
#editor {
  min-height: 300px;
  overflow-y: auto;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.5rem;
}

#editor:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#editor[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: #6c757d;
}

/* Whiteboard Styles */
#whiteboard {
  cursor: crosshair;
}

.btn.active {
  background-color: #6c757d;
  color: white;
}

/* Card Styles */
.card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Print Styles */
@media print {
  .navbar,
  .btn-toolbar,
  .card-header,
  footer,
  .no-print {
    display: none !important;
  }

  .card {
    border: none !important;
    box-shadow: none !important;
  }

  .card-body {
    padding: 0 !important;
  }

  #editor,
  #whiteboard {
    border: none !important;
  }
}

/* Dark Theme */
body.dark-theme {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-theme .card {
  background-color: #1e1e1e;
  border-color: #333;
}

body.dark-theme .card-header {
  background-color: #252525;
  border-color: #333;
}

body.dark-theme .navbar {
  background-color: #1e1e1e !important;
  border-color: #333;
}

body.dark-theme .navbar-light .navbar-brand,
body.dark-theme .navbar-light .nav-link {
  color: #e0e0e0;
}

body.dark-theme .form-control,
body.dark-theme .form-select {
  background-color: #2d2d2d;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-theme .btn-light {
  background-color: #2d2d2d;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-theme #editor {
  background-color: #2d2d2d;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-theme .text-muted {
  color: #adb5bd !important;
}

/* Font Sizes */
body.font-small {
  font-size: 0.875rem;
}

body.font-medium {
  font-size: 1rem;
}

body.font-large {
  font-size: 1.125rem;
}