#topnav {
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
    flex-shrink: 0;

    &.logo {
        font-family: var(--font-serif);
        font-size: 18px;
        color: #3a6200;
        font-style: italic;
        margin-right: 12px;
        letter-spacing: -0.01em;
    }

    .nav-tab {
        padding: 6px 14px;
        border-radius: var(--radius);
        color: var(--text2);
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        border: none;
        background: transparent;
        transition: background var(--transition), color var(--transition);
    }

    .nav-tab:hover {
        background: var(--surface2);
        color: var(--text);
    }

    .nav-tab.active {
        background: var(--accent-dim);
        color: var(--accent);
    }

    .nav-spacer {
        flex: 1;
    }

    .nav-search {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0 12px;
        height: 34px;
    }

    .nav-search svg {
        color: var(--text3);
        flex-shrink: 0;
    }

    .nav-search input {
        background: transparent;
        border: none;
        outline: none;
        color: var(--text);
        font-family: var(--font);
        font-size: 13px;
        width: 180px;
    }

    .nav-search input::placeholder {
        color: var(--text3);
    }

    .nav-search-button {
        background: transparent;
        border: none;
        color: var(--text3);
    }
}



/* DESKTOP VIEW */

/*  if the total screen width is less than 850, the right part gets cut off; I should then define a "small bit screen" with redust widht of the list and the details in a column instad of next to one another */

@media (min-width: 501px) {
    main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        overflow: hidden;

        section {
            /* Does not always work since #section is more specific */
            display: none
        }

        &[data-view="list"] {

            #sectionList,
            #sectionDetails {
                display: flex;
            }

            #sectionManageData,
            #sectionSettings {
                display: none;
            }
        }

        &[data-view="details"] {

            #sectionList,
            #sectionDetails {
                display: flex;
            }
        }

        &[data-view="manage"] {
            #sectionManageData {
                display: flex;
            }

            #sectionList,
            #sectionDetails,
            #sectionSettings {
                display: none;
            }
        }

        &[data-view="settings"] {
            #sectionSettings {
                display: flex;
            }

            #sectionList,
            #sectionDetails,
            #sectionManageData {
                display: none;
            }
        }
    }

    #topnav {
        max-width: 1300px;
        ;
    }

    #sectionList {
        width: 400px;
        flex-shrink: 0;
    }

    #sectionDetails {
        max-width: 900px;
        flex-grow: 1;
    }
}

/* MOBILE VIEW */
/* screen width <400 */

@media (max-width: 500px) {
    main {
        &[data-view="list"] {

            #sectionList {
                display: flex;
            }

            #sectionDetails,
            #sectionManageData,
            #sectionSettings {
                display: none !important;
            }
        }


        &[data-view="details"] {
            #sectionDetails {
                display: flex;
            }

            #sectionList,
            #sectionManageData,
            #sectionSettings {
                display: none !important;
            }
        }

        &[data-view="manage"] {
            #sectionManageData {
                display: flex;
            }

            #sectionList,
            #sectionDetails,
            #sectionSettings {
                display: none !important;
            }
        }

        &[data-view="settings"] {
            #sectionSettings {
                display: flex;
            }

            #sectionList,
            #sectionDetails,
            #sectionManageData {
                display: none !important;
            }
        }
    }



    #sectionDetails {

        overflow-y: scroll;

        #detailsProcessTrack {
            display: none;
        }

        .main {
            display: flex;
            flex-direction: column;
        }

        .displaystock-state header {
            position: sticky;
            top: 0;
            /* because of sticky */
            background-color: var(--bg);
        }
    }

    #topnav .nav-tab {
        display: none;
        /* need to make it to drop down */
    }
}