html, body {
  height: 100%;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  background-color: #f9fafb;
}

body {
  font-family: system-ui, sans-serif;
  padding: 1.5rem;
  color: #333;
  box-sizing: border-box;
}

.container {
  max-width: 768px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.box {
  background: white;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  box-sizing: border-box;
}

.content {
  margin-bottom: 2rem;
}

.content h1, .content h2, .content h3,
.content h4, .content h5 {
  margin-left: 0;
  margin-right: 0;
}

.content h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #222;
}

.content h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #2a2a2a;
}

.content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #333;
}

.content h4, .content h5 {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #444;
}

.content h4 { font-size: 1.25rem; }
.content h5 { font-size: 1.125rem; }

.content a {
  color: #3273dc;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.content a:hover,
.content a:focus {
  color: #1d4ed8;
  text-decoration-thickness: 2px;
}

.markdown-content img,
.markdown-content video,
.markdown-content audio {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
}

/* MOBILE overrides */
@media (max-width: 768px) {
  html, body {
    padding: 0 !important;
    margin: 0 !important;
  }

  body {
    padding: 0.5rem !important;
  }

  .container {
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  .box {
    padding: 1rem !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .content {
    margin-bottom: 1rem !important;
  }
}


/* Footer  */
/* crud/css/epview.css additions for footer */

.app-footer {
    background-color: #212121; /* Coal background */
    color: #cccccc; /* Light gray text for contrast */
    padding: 1.5rem 1rem; /* Padding top/bottom and left/right */
    text-align: center;
    font-size: 0.9rem; /* Slightly smaller font size */
    margin-top: 2rem; /* Space above the footer */
}

.app-footer .footer-content {
    max-width: 960px; /* Match Bulma's max-desktop container width */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center; /* Center items */
    gap: 1rem 2rem; /* Gap between rows and columns */
}

.app-footer a {
    color: #4CAF50; /* A shade of green for links, stands out well */
    text-decoration: none;
    transition: color 0.3s ease;
}

.app-footer a:hover,
.app-footer a:focus {
    color: #66BB6A; /* Lighter green on hover */
    text-decoration: underline;
}

.app-footer .legal-links,
.app-footer .navigation-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1.5rem; /* Gap between individual links */
}

.app-footer .footer-divider {
    color: #555555;
    margin: 0 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .app-footer .footer-content {
        flex-direction: column; /* Stack columns on small screens */
        align-items: center; /* Center content when stacked */
        gap: 1rem;
    }
    .app-footer .legal-links,
    .app-footer .navigation-links {
        flex-direction: column;
        gap: 0.5rem;
    }
    .app-footer .footer-divider {
        display: none; /* Hide divider when stacking */
    }
}

@media print {
  .page-break {
    page-break-before: always;
    break-before: page; /* modern spec */
  }
}


/* Documentation style (active when category=docs) */
body.docs-style {
  background-color: #fdfcfb; /* very light warm white */
  font-family: "Inter", "Segoe UI", sans-serif;
  line-height: 1.7;
  color: #2d2d2d;
}

/* Header titles bigger and friendlier */
body.docs-style .content h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: #1a1a1a;
}

body.docs-style .content h2 {
  font-size: 1.9rem;
  margin-top: 2rem;
  border-left: 6px solid #4f46e5; /* indigo accent */
  padding-left: 0.75rem;
}

body.docs-style .content h3 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  color: #374151;
}

/* Canva-like info cards */
.docs-box {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.docs-box.tip {
  border-left: 6px solid #10b981; /* green accent */
}

.docs-box.warning {
  border-left: 6px solid #f59e0b; /* amber accent */
}

.docs-box.example {
  border-left: 6px solid #3b82f6; /* blue accent */
}

/* Media */
body.docs-style .markdown-content img,
body.docs-style .markdown-content video {
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: 2rem auto;
}

/* Minimal docs theme */
body.docs-style {
  background: #fdfcfb;
  color: #2d2d2d;
  padding: 2rem;          /* replaces p-8 */
  line-height: 1.7;
}

/* Friendlier headings */
body.docs-style .content h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.25rem; }
body.docs-style .content h2 { font-size: 1.9rem; margin-top: 1.75rem; border-left: 6px solid #4f46e5; padding-left: .75rem; }

/* Lightweight “card” for tips/examples (optional) */
.docs-box { background:#fff; border-radius:1rem; padding:1rem 1.25rem; margin:1.25rem 0; box-shadow:0 4px 12px rgba(0,0,0,.05); }
.docs-box.tip { border-left:6px solid #10b981; }
.docs-box.warning { border-left:6px solid #f59e0b; }

/* Media polish */
body.docs-style .markdown-content img,
body.docs-style .markdown-content video { border-radius:.75rem; box-shadow:0 2px 8px rgba(0,0,0,.08); margin:1.5rem auto; }

/* Mobile padding tweak */
@media (max-width: 768px) {
  body.docs-style { padding: 1rem; }
}