/* ── Markdown Vault — main stylesheet ── */

body {
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.container { flex: 1; }

/* ── Navigation ── */
.navbar-brand { font-weight: 700; }

/* Compact nav on smaller screens */
@media (max-width: 1024px) {
    .navbar .form-control { max-width: 160px; }
}
@media (max-width: 768px) {
    .navbar .form-control { max-width: 120px; font-size: 0.875rem; }
    .navbar .btn { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
}

/* ── Cards ── */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    transition: transform 0.2s;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
.list-group-item-action:hover { background-color: #f8f9fa; }

/* ── Markdown body typography ── */
.markdown-body {
    font-size: 0.9375rem; /* 15px — down from browser/Bootstrap default 16px */
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 600;
    line-height: 1.25;
}
.markdown-body h1 {
    font-size: 1.9em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eaecef;
}
.markdown-body h2 {
    font-size: 1.45em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eaecef;
}
.markdown-body h3 { font-size: 1.2em; }
.markdown-body blockquote {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
    margin: 0 0 16px;
}
.markdown-body ul,
.markdown-body ol { padding-left: 2em; }
.markdown-body li { margin-bottom: 0.25em; }

/* ── Buttons — larger tap targets on touch ── */
@media (max-width: 1024px) {
    .btn { min-height: 36px; }
    .btn-sm { min-height: 30px; padding: 0.25rem 0.6rem; }
}

/* ── CodeMirror ── */
.CodeMirror {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
}

/* ── Badges & alerts ── */
.badge { font-weight: 500; }
.alert { border-radius: 0.375rem; animation: slideDown 0.3s ease-out; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Footer ── */
footer { margin-top: auto; }

/* ── Responsive grid ── */
@media (max-width: 768px) {
    .card { margin-bottom: 1rem; }
    /* Stack button groups vertically */
    .btn-group { display: flex; flex-direction: column; }
    .btn-group .btn { margin-bottom: 0.4rem; border-radius: 0.375rem !important; }

    /* Narrower container padding on small screens */
    .container, .container-fluid { padding-left: 10px; padding-right: 10px; }

    /* Table scroll on small screens */
    .markdown-body table { display: block; overflow-x: auto; }
}

/* iPad — medium breakpoint refinements */
@media (min-width: 768px) and (max-width: 1024px) {
    .container { max-width: 98%; padding-left: 12px; padding-right: 12px; }

    /* Tighter margins on action bars */
    .d-flex.gap-1 { gap: 0.4rem !important; }

    /* Slightly smaller headings for compact feel */
    h3 { font-size: 1.25rem; }
    h5 { font-size: 1rem; }

    /* Compact breadcrumb */
    .breadcrumb { font-size: 0.85rem; }
    .breadcrumb-item + .breadcrumb-item::before { padding: 0 4px; }

    /* Cards less shadow on iPad (no hover) */
    .card:hover { transform: none; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075); }
}

/* ── TOC re-open button ── */
.toc-reopen-btn {
    position: sticky;
    top: 70px;
    align-self: flex-start;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    z-index: 10;
}

/* ── Diff view — responsive ── */
/* Ensure the Python-generated HtmlDiff table scrolls rather than overflows */
.diff-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* On iPad portrait and smaller, default the compare page to the unified tab */
@media (max-width: 820px) {
    /* Switch default active tab to unified on narrow screens via JS,
       but also make the side-by-side table scrollable as a fallback */
    table.diff {
        min-width: 600px; /* allow horizontal scroll rather than wrapping */
    }
    /* Tighten unified diff padding */
    .unified-diff {
        padding: 12px;
        font-size: 12px;
    }
}