/* Bootstrap 5 Compatibility Update - 2025-07-08 */
/* Define colors using Bootstrap 5 default palette */
:root {
  /* Base colors mapped to Bootstrap 5 equivalents */
  --sakura-pink: #ffdee5;
  /* More obvious sakura pink for background */
  --fuji-blue: #cfe2ff;
  /* Similar to bootstrap primary-subtle */
  --pastel-yellow: #fff3cd;
  /* Similar to bootstrap warning-subtle */
  --pastel-brown: #e9ecef;
  /* Similar to bootstrap gray-200 */
  --pastel-green: #d1e7dd;
  /* Similar to bootstrap success-subtle */
  --pastel-purple: #e2d9f3;
  /* Custom light purple */
  --cloud-white: #f8f9fa;
  /* Similar to bootstrap gray-100 */
  --accent-gray: #6c757d;
  /* Similar to bootstrap secondary */

  /* Darker versions */
  --dark-sakura: #dc3545;
  /* Bootstrap danger */
  --dark-fuji: #0d6efd;
  /* Bootstrap primary */
  --dark-brown: #6c757d;
  /* Bootstrap secondary */
  --dark-green: #198754;
  /* Bootstrap success */
  --ninja-dark: #212529;
  /* Bootstrap gray-900 */
  --text-dark: #212529;
  /* Bootstrap gray-900 */
  --muted-text: #6c757d;
  /* Bootstrap secondary */
}

body {
  background: var(--sakura-pink);
  font-family:
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'Yu Gothic UI', 'Yu Gothic', 'Meiryo UI', 'Meiryo',
    'BIZ UDPGothic', 'BIZ UDGothic',
    'Noto Sans CJK JP', 'Noto Sans JP',
    'Source Han Sans JP', 'Source Han Sans',
    'Roboto', 'Helvetica Neue', Arial,
    sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.8;
  /* Increased for furigana accommodation */
}

/* Enhanced line spacing for text elements */
p,
.card-text,
.lead,
.text-muted {
  line-height: 1.9;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Specific spacing for Japanese text */
.japanese-text,
.jp-text {
  line-height: 2.2;
  margin-bottom: 1.2rem;
}

/* Ruby text improvements */
ruby {
  ruby-align: center;
  ruby-position: over;
}

rt {
  font-size: 0.6em;
  color: #666;
  font-weight: 400;
  line-height: 1;
}

/* Japanese text specific styling */
.jp-text {
  font-family:
    'Hiragino Mincho ProN', 'Hiragino Mincho Pro',
    'Yu Mincho', 'YuMincho', 'Meiryo',
    'BIZ UDPMincho', 'BIZ UDMincho',
    'Noto Serif CJK JP', 'Noto Serif JP',
    'Source Han Serif JP', 'Source Han Serif',
    'Times New Roman', serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

.navbar {
  background: var(--fuji-blue) !important;
  font-family:
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'Yu Gothic UI', 'Yu Gothic', 'Meiryo UI', 'Meiryo',
    'BIZ UDPGothic', 'BIZ UDGothic',
    'Noto Sans CJK JP', 'Noto Sans JP',
    'Source Han Sans JP', 'Source Han Sans',
    'Roboto', 'Helvetica Neue', Arial,
    sans-serif;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.navbar,
.navbar .navbar-brand,
.navbar .nav-link {
  color: #333 !important;
  font-family: inherit;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #111 !important;
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--sakura-pink) !important;
  border-color: var(--sakura-pink) !important;
  color: var(--bs-dark) !important;
}

.btn-secondary {
  background: var(--fuji-blue) !important;
  border-color: var(--fuji-blue) !important;
  color: var(--bs-dark) !important;
}

.alert-warning {
  background: var(--pastel-yellow) !important;
  color: var(--bs-dark) !important;
}

.card {
  background: var(--cloud-white);
  border-color: var(--pastel-brown);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.a4-width {
  max-width: 621px;
  /* Increased by 15% from 540px */
  margin-left: auto;
  margin-right: auto;
}

/* Footer Styling - Full width with navbar consistency */
.footer-full-width {
  background: var(--fuji-blue) !important;
  color: #333 !important;
  margin-top: auto;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.footer-content {
  padding: 2rem 0;
  /* Increased from 1.5rem */
  text-align: center;
}

.footer-text {
  font-size: 0.85rem;
  /* Increased from 0.75rem */
  line-height: 1.5;
  /* Increased from 1.4 */
  margin-bottom: 0.75rem;
  /* Increased from 0.5rem */
  color: #333 !important;
  font-family:
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'Yu Gothic UI', 'Yu Gothic', 'Meiryo UI', 'Meiryo',
    'BIZ UDPGothic', 'BIZ UDGothic',
    'Noto Sans CJK JP', 'Noto Sans JP',
    'Source Han Sans JP', 'Source Han Sans',
    'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.footer-text.jp-text {
  font-family:
    'Hiragino Mincho ProN', 'Hiragino Mincho Pro',
    'Yu Mincho', 'YuMincho', 'Meiryo',
    'BIZ UDPMincho', 'BIZ UDMincho',
    'Noto Serif CJK JP', 'Noto Serif JP',
    'Source Han Serif JP', 'Source Han Serif',
    'Times New Roman', serif;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.footer-text a,
.footer-text a:visited,
.footer-text a:active {
  color: var(--dark-sakura) !important;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  border-bottom: 1px dotted var(--dark-sakura);
}

.footer-text a:hover,
.footer-text a:focus {
  color: var(--ninja-dark) !important;
  border-bottom: 1px solid var(--ninja-dark);
  transform: translateY(-1px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Japanese Typography Enhancements */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'Yu Gothic UI', 'Yu Gothic', 'Meiryo UI', 'Meiryo',
    'BIZ UDPGothic', 'BIZ UDGothic',
    'Noto Sans CJK JP', 'Noto Sans JP',
    'Source Han Sans JP', 'Source Han Sans',
    'Roboto', 'Helvetica Neue', Arial,
    sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Enhanced button styling with Japanese aesthetic */
.btn {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Emoji styling for better rendering */
.emoji {
  font-family:
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji', 'Android Emoji', 'EmojiSymbols',
    sans-serif;
  font-size: 1.1em;
  vertical-align: middle;
}

/* Global text color enhancements for better readability */
.text-muted {
  color: var(--muted-text) !important;
}

.text-secondary {
  color: var(--accent-gray) !important;
}

/* Small text elements with better contrast */
small,
.small {
  color: var(--muted-text);
}

/* Badge and label enhancements */
.badge-secondary {
  background-color: var(--accent-gray) !important;
  color: white !important;
}

/* Form helper text */
.form-text {
  color: var(--muted-text) !important;
}

/* Enhanced readability for all text elements */
.card-text,
.card-body p {
  color: var(--text-dark);
}

/* List elements with better contrast */
.list-group-item {
  color: var(--text-dark);
}

/* Dropdown and navigation text */
.dropdown-item {
  color: var(--text-dark);
}

.nav-link {
  color: var(--muted-text);
}

/* Alert text improvements */
.alert {
  color: var(--text-dark);
}

/* Table text improvements */
.table {
  color: var(--text-dark);
}

.table-secondary {
  background-color: var(--fuji-blue);
  color: var(--text-dark);
}

/* Breadcrumb improvements */
.breadcrumb-item {
  color: var(--muted-text);
}

.breadcrumb-item.active {
  color: var(--text-dark);
}

/* Modal and offcanvas text */
.modal-body,
.offcanvas-body {
  color: var(--text-dark);
}

/* Responsive footer adjustments */
@media (max-width: 768px) {
  .footer-text {
    font-size: 0.7rem;
    line-height: 1.3;
    margin-bottom: 0.4rem;
  }

  .footer-content {
    padding: 1rem 0;
  }
}

@media (max-width: 480px) {
  .footer-text {
    font-size: 0.65rem;
    line-height: 1.2;
  }
}

.bg-sakura-pink {
  background-color: var(--sakura-pink) !important;
}

/* Footer ninja-style content */
.footer-ninja-credits {
  font-size: 0.85rem;
  color: var(--muted-text);
  /* Using darker muted text variable */
  text-align: center;
  margin-top: 2rem;
  padding: 1.5rem;
  border-top: 2px solid var(--pastel-brown);
  font-style: italic;
}

.footer-ninja-credits::before {
  content: "🥷 ";
  font-size: 1.2em;
}

.footer-ninja-credits .ninja-text {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ninja-dark);
  font-weight: 500;
}

.footer-ninja-credits .license-text {
  font-size: 0.8rem;
  opacity: 0.9;
  /* Slightly more opaque for better readability */
  color: var(--text-dark);
  /* Darker color for license text */
}

/* ASCII Art Styling */
.ascii-art {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  color: var(--dark-sakura);
  background: none;
  border: none;
  margin: 1rem 0;
  line-height: 1.2;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Banner ninja text styling */
.ninja-text {
  color: var(--ninja-dark);
  font-weight: 500;
  line-height: 1.6;
}

/* Emphasis text in banner */
.ninja-text em {
  color: var(--dark-sakura);
  font-style: italic;
  font-weight: 600;
}

/* Repository link styling */
.repo-link {
  color: var(--ninja-dark);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.repo-link a {
  color: var(--dark-sakura);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.repo-link a:hover {
  color: var(--dark-fuji);
  text-decoration: underline;
}

/* LinkedIn Section Styling */
.linkedin-section {
  background: linear-gradient(135deg, var(--sakura-pink) 0%, var(--cloud-white) 50%, var(--sakura-pink) 100%);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--dark-sakura);
}

.btn-linkedin {
  background: linear-gradient(135deg, #0077B5 0%, #005885 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 119, 181, 0.3);
}

.btn-linkedin:hover {
  background: linear-gradient(135deg, #005885 0%, #003d5c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 119, 181, 0.4);
  color: white;
  text-decoration: none;
}

.btn-linkedin i {
  font-size: 1.2rem;
}

/* Homepage Banner and Jumbotron Styling - Unified Pink Sakura Style */
.homepage-banner {
  background: linear-gradient(135deg, var(--sakura-pink) 0%, var(--cloud-white) 50%, var(--sakura-pink) 100%);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--dark-sakura);
  margin: 2rem 0;
}

.homepage-jumbotron {
  background: linear-gradient(135deg, var(--sakura-pink) 0%, var(--cloud-white) 50%, var(--sakura-pink) 100%);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--dark-sakura);
  margin: 2rem 0;
}

/* Homepage Banner Display Title */
.homepage-banner .Display-1 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ninja-dark);
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for banner and jumbotron */
@media (max-width: 768px) {

  .homepage-banner,
  .homepage-jumbotron {
    padding: 1.5rem;
    margin: 1rem 0;
  }

  .homepage-banner h1 {
    font-size: 2rem;
  }
}

/* Journal Entry Styling */
.journal-entry {
  background: var(--cloud-white);
  border: 2px solid var(--pastel-green);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.journal-entry:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--dark-green);
}

.journal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.journal-title {
  color: var(--ninja-dark);
  font-weight: 600;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.journal-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.journal-title a:hover {
  color: var(--dark-green);
}

.journal-text {
  color: var(--ninja-dark);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 1rem;
}

.journal-entry .badge {
  background-color: var(--dark-green) !important;
  color: white;
}

.journal-entry .text-muted {
  color: var(--muted-text) !important;
  font-size: 0.85rem;
  margin-top: auto;
}

/* Purpose Description Styling */
.purpose-description {
  background: linear-gradient(135deg, var(--pastel-yellow) 0%, var(--cloud-white) 50%, var(--pastel-purple) 100%);
  border-left: 4px solid var(--dark-sakura);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.purpose-description .ninja-text {
  margin-bottom: 0.75rem;
  font-style: italic;
  line-height: 1.6;
}

.purpose-description .ninja-text:last-child {
  margin-bottom: 0;
}

/* Noto Garden (Zettelkasten) Styling */
.noto-garden-header {
  background: linear-gradient(135deg, var(--pastel-purple) 0%, var(--cloud-white) 50%, var(--pastel-yellow) 100%);
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.note-card {
  background: var(--cloud-white);
  border: 2px solid var(--pastel-purple);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin-bottom: 1rem;
}

.note-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--dark-fuji);
}

.note-id {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--muted-text);
  background: var(--pastel-yellow);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.note-title {
  color: var(--ninja-dark);
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-decoration: none;
}

.note-title:hover {
  color: var(--dark-fuji);
  text-decoration: none;
}

.note-content {
  color: var(--ninja-dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.note-link {
  color: var(--dark-fuji);
  text-decoration: none;
  font-weight: 500;
  padding: 2px 6px;
  background-color: var(--pastel-yellow);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.note-link:hover {
  background-color: var(--sakura-pink);
  color: var(--ninja-dark);
  text-decoration: none;
}

.missing-link {
  color: var(--dark-sakura);
  font-style: italic;
  padding: 2px 6px;
  background-color: var(--pastel-brown);
  border-radius: 4px;
  opacity: 0.7;
}

.connection-count {
  background-color: var(--dark-fuji);
  color: white;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-block;
}

.tag-badge {
  background-color: var(--pastel-green);
  color: var(--ninja-dark);
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 15px;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  font-weight: 500;
}

.zettelkasten-stats {
  background: linear-gradient(135deg, var(--fuji-blue) 0%, var(--pastel-purple) 100%);
  border-radius: 10px;
  padding: 1rem;
  color: white;
  text-align: center;
  margin-bottom: 1rem;
}

.zettelkasten-stats .stat-value {
  font-size: 2rem;
  font-weight: bold;
  display: block;
}

.zettelkasten-stats .stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.graph-container {
  background: var(--cloud-white);
  border: 2px solid var(--pastel-purple);
  border-radius: 12px;
  min-height: 500px;
  position: relative;
}

.graph-node {
  cursor: pointer;
  transition: all 0.3s ease;
}

.graph-node:hover {
  stroke: var(--dark-sakura);
  stroke-width: 3px;
}

.graph-legend {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-result {
  padding: 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 0.5rem;
  border: 1px solid var(--pastel-purple);
  transition: all 0.3s ease;
}

.search-result:hover {
  background-color: var(--pastel-yellow);
  border-color: var(--dark-fuji);
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "🌸";
  color: var(--dark-sakura);
}

.btn-zettel {
  background: linear-gradient(135deg, var(--pastel-purple) 0%, var(--fuji-blue) 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-zettel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  color: white;
}

.form-control-zettel {
  border: 2px solid var(--pastel-purple);
  border-radius: 8px;
  padding: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-control-zettel:focus {
  border-color: var(--dark-fuji);
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

/* Access Control Styling */
.access-indicator {
  text-align: center;
  margin-top: 1rem;
}

.access-indicator .badge {
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 500;
}

.access-indicator .badge i {
  margin-right: 6px;
}

/* Admin-only elements styling */
.admin-only {
  position: relative;
}

.admin-only.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.admin-only.disabled::after {
  content: "🔒 Admin Only";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 10;
}

/* Login prompt styling */
.login-prompt {
  background: linear-gradient(135deg, var(--pastel-yellow) 0%, var(--cloud-white) 100%);
  border: 2px solid var(--dark-sakura);
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
}

.login-prompt .btn {
  margin-top: 0.5rem;
}

/* Zen Landscape Section */
.zen-landscape-section {
  margin: 2rem 0;
}

.zen-image-container {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, var(--sakura-pink) 0%, var(--cloud-white) 100%);
  padding: 1rem;
}

.zen-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform 0.3s ease;
}

.zen-image:hover {
  transform: scale(1.02);
}

.zen-caption {
  padding: 1.5rem 1rem 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0 0 10px 10px;
  margin-top: -5px;
}

.zen-caption .ninja-text {
  color: var(--ninja-dark);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  text-shadow: none;
}

.zen-caption .ninja-text.jp-text {
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0.9;
}

.image-source {
  display: block;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--muted-text);
  font-style: italic;
}

.image-source a {
  color: var(--dark-sakura);
  text-decoration: none;
  font-weight: 500;
}

.image-source a:hover {
  text-decoration: underline;
  color: var(--ninja-dark);
}

.image-source i {
  margin-right: 0.5rem;
  opacity: 0.7;
}

/* Responsive adjustments for zen landscape */
@media (max-width: 768px) {
  .zen-image {
    height: 200px;
  }

  .zen-caption {
    padding: 1rem 0.75rem 0.75rem;
  }

  .zen-caption .ninja-text {
    font-size: 0.85rem;
  }

  .zen-caption .ninja-text.jp-text {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .zen-image {
    height: 180px;
  }

  .zen-caption .ninja-text {
    font-size: 0.8rem;
  }

  .zen-caption .ninja-text.jp-text {
    font-size: 0.75rem;
  }
}

/* Responsive adjustments for Noto Garden */
@media (max-width: 768px) {
  .noto-garden-header {
    padding: 1.5rem;
  }

  .note-card {
    padding: 1rem;
  }

  .zettelkasten-stats {
    margin-bottom: 1rem;
  }

  .zettelkasten-stats .stat-value {
    font-size: 1.5rem;
  }
}

/* A4-width responsive adjustments */
@media (max-width: 720px) {
  .a4-width {
    max-width: 95%;
    padding: 0 1rem;
  }
}

@media (max-width: 576px) {
  .a4-width {
    max-width: 100%;
    padding: 0 0.75rem;
  }
}

/* Ensure tables and forms fit within a4-width */
.a4-width .table-responsive {
  margin: 0 -0.5rem;
}

.a4-width .table {
  width: 100%;
  table-layout: fixed;
}

.a4-width .form-control {
  max-width: 100%;
}

.a4-width .btn-group {
  flex-wrap: wrap;
}

.a4-width .btn-group .btn {
  flex: 1 1 auto;
  min-width: 0;
}

/* Improved mobile navigation for filter buttons */
@media (max-width: 576px) {
  .a4-width .btn-group {
    flex-direction: column;
  }

  .a4-width .btn-group .btn {
    margin-bottom: 0.25rem;
  }

  .a4-width .d-flex {
    flex-direction: column;
  }

  .a4-width .d-flex>* {
    margin-bottom: 0.5rem;
  }
}

/* Content Arsenal Cards - Enhanced for Bootstrap 5 */
.content-arsenal .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-width: 2px;
}

.content-arsenal .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.content-arsenal .card .card-title {
  font-size: 2rem;
  font-weight: bold;
}

/* Bootstrap 5 color adjustments for better readability */
.text-primary {
  color: #0d6efd !important;
}

.text-success {
  color: #198754 !important;
}

.text-info {
  color: #0dcaf0 !important;
}

.border-primary {
  border-color: #0d6efd !important;
}

.border-success {
  border-color: #198754 !important;
}

.border-info {
  border-color: #0dcaf0 !important;
}

/* Body styling */