/* ==========================================================================
   MOBILE / TABLET
   ========================================================================== */

#mobile-nav {
    display: none;
}

/* ==========================================================================
   SMARTPHONE
   ========================================================================== */

@media (max-width: 768px) {

    body {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        padding: 4px;
    }

    /* GRUNDLAYOUT */

    #nbtitel,
    #nbname,
    #nbsuch,
    #nbfand,
    #nbnotiz,
    #nbvorschau,
    #nbkmdo,
    #nbkat,
    #nbtag,
    #nbcopy,
    #nbinfo {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        margin: 0 0 4px 0;
    }

    /* KOPF */

    #nbtitel {
        justify-content: flex-start;
        padding: 1px 3px;
        margin-bottom: 1px;
    }

    #nbtitel h1 {
        font-size: 1rem;
    }

    #nbname {
        min-height: 32px;
        padding: 5px 7px;
        font-size: 0.88rem;
        margin-bottom: 4px;
    }

    /* MOBILE NAVIGATION */

    #mobile-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
        width: 100%;
        margin-bottom: 4px;
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: var(--bg-main);
        padding-bottom: 3px;
    }

    /*
     * Bei Markdown-Bearbeitung gibt es:
     * Übersicht | MD | Speichern | Abbrechen
     */
    #mobile-nav.editor-nav {
        grid-template-columns: repeat(4, 1fr);
    }

    #mobile-nav button {
        min-height: 32px;
        padding: 4px;
        font-size: 0.78rem;
        border: 2px solid var(--border-color);
        border-radius: 6px;
    }

    #mobile-nav.editor-nav button {
        padding-left: 2px;
        padding-right: 2px;
        font-size: 0.72rem;
    }

    #mobile-nav button.active {
        background-color: var(--accent-hover);
    }

    .mobile-toggle {
        display: none !important;
    }

    /* NOTIZ */

    #nbnotiz,
    #nbvorschau {
        height: calc(100vh - 118px);
        min-height: 0;
        max-height: none;
        overflow-x: auto;
        overflow-y: auto;
        padding: 6px 7px;
        font-size: 0.82rem;
        line-height: 1.25;
    }

    /* MARKDOWN */

    #nbvorschau h1 {
        font-size: 1.15rem;
        margin: 0.3em 0 0.2em;
    }

    #nbvorschau h2 {
        font-size: 1.05rem;
        margin: 0.3em 0 0.2em;
    }

    #nbvorschau h3 {
        font-size: 0.95rem;
        margin: 0.3em 0 0.2em;
    }

    #nbvorschau h4,
    #nbvorschau h5,
    #nbvorschau h6 {
        margin: 0.3em 0 0.2em;
    }

    #nbvorschau p {
        margin: 0.25em 0;
        line-height: 1.25;
    }

    #nbvorschau ul,
    #nbvorschau ol {
        margin: 0.25em 0 0.25em 1.1em;
    }

    #nbvorschau li {
        margin: 0.08em 0;
    }

    #nbvorschau blockquote {
        margin: 0.3em 0;
        padding: 3px 6px;
    }

    #nbvorschau pre {
        margin: 0.3em 0;
        padding: 5px;
        overflow-x: auto;
        font-size: 0.76rem;
        line-height: 1.2;
    }

    #nbvorschau code {
        font-size: 0.82em;
    }

    #nbvorschau table {
        display: block;
        width: 100%;
        overflow-x: auto;
        margin: 0.3em 0;
        font-size: 0.76rem;
    }

    #nbvorschau th,
    #nbvorschau td {
        padding: 3px 4px;
        white-space: nowrap;
    }

    /* INFO */

    #nbinfo {
        display: flex;
        flex-wrap: wrap;
        min-height: auto;
        gap: 2px 6px;
        padding: 4px 6px;
        font-size: 0.65rem;
    }

    .info-item {
        gap: 2px;
    }

    .info-label {
        font-size: 0.65rem;
    }

    .info-divider {
        display: none;
    }

    /* SUCHE / ÜBERSICHT */

    #nbsuch {
        padding: 5px 6px;
        overflow: visible;
    }

    #nbsuch input {
        width: 100%;
        padding: 5px 6px;
        font-size: 0.84rem;
    }

    #search-filters {
        margin-top: 4px;
    }

    #filter-kategorie {
        margin-bottom: 3px;
        padding: 4px;
        font-size: 0.78rem;
    }

    #filter-tags-details {
        margin-bottom: 3px;
    }

    #filter-tags-details summary {
        padding: 3px 4px;
        font-size: 0.76rem;
    }

    #filter-tags {
        max-height: 120px;
        padding: 3px 4px;
        font-size: 0.76rem;
    }

    #btn-filter-reset {
        min-height: 30px;
        padding: 3px 5px;
        font-size: 0.74rem;
    }

    /* ERGEBNISSE */

    #nbfand {
        max-height: 45vh;
        overflow-y: auto;
        padding: 5px 6px;
        font-size: 0.78rem;
    }

    #nbfand .kmdo-title {
        margin-bottom: 2px;
        font-size: 0.8rem;
    }

    .search-item {
        margin-bottom: 1px;
        padding: 4px 5px;
        font-size: 0.82rem;
    }

    /* AKTIONEN */

    #nbkmdo {
        padding: 5px 6px;
    }

    #nbkmdo .kmdo-title {
        margin-bottom: 3px;
        font-size: 0.8rem;
    }

    .kmdo-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }

    .kmdo-buttons button {
        width: 100%;
        min-height: 30px;
        padding: 3px 4px;
        font-size: 0.72rem;
    }

    #btn-preview-mode,
    #btn-delete {
        grid-column: auto;
    }

    /* Im Mehr-Bereich ist "Neue Notiz" doppelt vorhanden */

    #nbkmdo #btn-new {
        display: none;
    }

    /* KATEGORIEN UND SCHLAGWÖRTER */

    #nbkat,
    #nbtag {
        max-height: 145px;
        overflow-y: auto;
        padding: 4px 6px;
    }

    #nbkat .box-title,
    #nbtag .box-title {
        margin-bottom: 2px;
        padding-bottom: 2px;
        font-size: 0.8rem;
    }

    #nbkat .box-content div,
    #nbtag .box-content div {
        padding: 3px 4px;
        font-size: 0.78rem;
    }

    /* COPYRIGHT */

    #nbcopy {
        padding: 2px 3px 5px;
        font-size: 0.64rem;
    }

    /* POPOVER */

    .nb-popover {
        position: fixed;
        top: 50% !important;
        left: 50% !important;
        width: calc(100% - 20px);
        max-width: 330px;
        padding: 7px;
        transform: translate(-50%, -50%);
    }

    .popover-title {
        font-size: 0.78rem;
    }

    .popover-actions {
        gap: 3px;
    }

    .popover-actions button {
        min-height: 32px;
        padding: 4px;
        font-size: 0.7rem;
    }

    /* BUTTONS */

    button {
        min-height: 30px;
    }
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1100px) {

    #nbtitel {
        width: 18%;
    }

    #nbname {
        left: 18%;
        width: 82%;
    }

    #nbsuch,
    #nbfand {
        width: 18%;
    }

    #nbnotiz,
    #nbvorschau {
        left: 18%;
        width: 62%;
    }

    #nbkmdo,
    #nbkat,
    #nbtag {
        left: 80%;
        width: 20%;
    }

    #nbcopy {
        width: 18%;
    }

    #nbinfo {
        left: 18%;
        width: 62%;
    }

    .kmdo-buttons button {
        padding: 5px 6px;
        font-size: 0.75rem;
    }
}