* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}








/* -------------------------------------------------------------------------------- */
/*                            Top nav/title bar                                     */
/* -------------------------------------------------------------------------------- */


.title-bar 
{
    height: 60px;
    /*border-bottom: 1px solid #e9ecef;*/

    background-color: #f4f4f4;

    display: flex;
    flex-direction: row;

    width: 100%;
}


    .title-bar-toggle-cell
    {
        width: auto;
        flex-grow: 0;
        padding-left: 5px;
    }


    .title-bar-title-cell
    {
        width: auto;
        flex-grow: 0;
    }

        .title-bar-title-cell h1
        {
            font-size: 2em;
            margin-bottom: 0;
            color: navy;
        }


    .title-bar-options-cell
    {
        width: auto;
        flex-grow: 1;
    }


    .title-bar-search-cell
    {
        width: auto;
        flex-grow: 1;

        padding-right: 5px;
    }


    .title-bar-cell
    {
        /* Hack: push the content towards centre */
        padding-top: 10px;
    }






.nav.nav-tabs.top-nav-bar 
{
    border-bottom: none;
}






.sidebar-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-bottom 
{
    flex: 1;
}





    /* -------------------------------------------------------------------------------- */
    /*                  Title bar sidenav toggle with options                           */
    /* -------------------------------------------------------------------------------- */


    .sidebar-toggle-btn,
    .sidebar-toggle-drop-btn
    {
        /*background-color: #2196F3;*/
        color: white;
        font-size: 1.3em;
        border: none;
        outline: none;
    }

    /*.sidebar-toggle-drop-btn
    {
        border-left: 1px solid navy;
    }*/



    /* The container <div> - needed to position the dropdown content */
    .sidebar-toggle-dropdown 
    {
        /* position: absolute; */
        display: inline-block;
    }

    /* Dropdown Content (Hidden by Default) */
    .sidebar-toggle-dropdown-content 
    {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 300px;
        border: 1px solid #cccccc;

        color: black;

        z-index: 5000;  /** Ensure above TinyMCE */
    
        /* These are just initial hacky values */
        top: 45px;
        right: 5px;
        left: auto;
    }

    /* Group header */
    .sidebar-toggle-dropdown-content div.group-header
    {
        color: black;
        font-weight: bold;
        padding: 6px 6px;
        text-decoration: none;
        display: block;
    }

    /* Links inside the dropdown */
    .sidebar-toggle-dropdown-content a 
    {
        color: black;
        padding: 6px 16px;
        text-decoration: none;
        display: block;
    }

    /* Change color of dropdown links on hover */
    .sidebar-toggle-dropdown-content a:hover
    {
        background-color: #eeeeee;
    }


    .sidebar-toggle-dropdown-content hr
    {
        border-color: #cccccc;
    }


    .sidebar-toggle-dropdown.open .sidebar-toggle-dropdown-content
    {
        display: block;
    }




    /* Top hamburger button and dropdown toggle button */
    .title-bar-sidebar-btn-group button 
    {
        background-color: inherit;
        color: black;

        cursor: pointer;
    }

    .title-bar-sidebar-btn-group button:hover 
    {
        /* Add a background color on hover */
        background-color: #e6e5e5;
    }


    /* Clear floats (clearfix hack) */
    .title-bar-sidebar-btn-group:after 
    {
        content: "";
        clear: both;
        display: table;
    }













































/* -------------------------------------------------------------------------------- */
/*                         Main content area + Sidebar                              */
/* -------------------------------------------------------------------------------- */

.layout {
    display: flex;
    height: calc(100% - 60px); /* Assuming title bar is 60px */
    /* V2 */
    position: relative;
}







.sidebar {
    width: 400px;
    background-color: #f4f4f4;
    /* padding: 1em; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    /* Custom */
    /* overflow-y: auto; */
}


.sidebar-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-top {
    padding: 1em;
    padding-top: 0;
    padding-bottom: 0;
    /* background-color: #f0f0f0; */
}

.sidebar-bottom {
    flex: 1;
    overflow-y: auto;
    /* background-color: #e0e0ff; */

    padding: 1em;
    padding-top: 0;
}


/* .sidebar #fullIndexContentTree
{
    overflow-y: auto;
} */


/* V2 */
.sidebar.visible {
    transform: translateX(0);
}

/* 
    When the sidebar is hidden, ensure the content margin (inline style) is overridden 
    so teh content pane returns to full available width.
 */
.layout.sidebar-hidden .content {
    /* transform: translateX(-100%); */
    margin-left: 0 !important;
}


/* //TODO: Disabled for the moment. Dragging highlights items in the nav. I don't really know if I like this anyway. */
/* .resizer
{
    width: 5px;
    cursor: ew-resize;
    background-color: #ccc;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
} */













.content {
    /* V1 */
    /* flex-grow: 1;
    padding: 1em;
    overflow: auto; */
    /* V2 */
    flex-grow: 1;
    padding: 1em;
    /* margin-left: 0;
    transition: margin-left 0.3s ease; */
    /* Custom */
    overflow-y: auto;
}

/* Hide sidebar by default when loading on small screens */
@media (max-width: 800px) {
    .sidebar {
        position: absolute;
        /* top: 60px; */
        bottom: 0;
        left: 0;
        transform: translateX(-100%); /* Sidebar closed/hidden */
        z-index: 1000;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
        /* On mobile, just make it full width when it is open */
        width: 100%;
    }

        .sidebar.visible {
            transform: translateX(0); /* Sidebar open/visible */
        }


    /* Hide the sidebar width toggle button. Not needed, and wraps on small screens */
    .sidebar-toggle-drop-btn
    {
        display: none;
    }

    /*//TODO::Obsolete*/
    ./*title-bar-sidebar-btn-group .sidebar-toggle-btn
    {
        border-right: 1px solid #616060;
    }*/
}

/* V1 */
/* Always visible sidebar on large screens */
/* @media (min-width: 801px) 
{
    .sidebar {
        transform: translateX(0) !important;
        position: relative;
    }
} */


/* Large screen (non-mobile)*/
/* Push content right when sidebar is visible on wide screens */
@media (min-width: 801px) {
    /* Normal width */
    .sidebar.visible ~ .content,
    .sidebar.width-normal.visible ~ .content {
        margin-left: 400px;
    }

    .sidebar.width-normal {
        width: 400px
    }


    /* 'Large' width */
    .sidebar.width-large.visible ~ .content {
        margin-left: 600px;
    }

    .sidebar.width-large {
        width: 600px
    }


    /* 'Largest' width */
    .sidebar.width-largest.visible ~ .content {
        margin-left: 800px;
    }

    .sidebar.width-largest {
        width: 800px
    }
}



































































.content-page .flex-container {
    display: flex;
    gap: 20px;
}

.content-page .item:nth-child(1),
.content-page .item:nth-child(2),
.content-page .item:nth-child(3)
{
    flex-grow: 1;
    width: 33%;
}



a
{
    text-decoration: none;
}


/*
* No indent on bullet lists
*/
ul.reset
{
    padding-left: 0px;
}
ul.reset li
{
    margin-left: 18px;
}


/*
* Add some more space
*/

li
{
    margin-bottom: 5px;
}



/*
* Sidebar nav
*/
.page-index .sidebar ul
{
    list-style-type: none;
}
.page-index .sidebar li
{
    margin-left: 0;
    font-weight: 600;
}



/*
* Let's just turn off bullet icons for all lists.
*/
.content-page ul
{
    list-style-type: none;
}
.content-page li
{
    margin-left: 0;
    margin-bottom: 8px;
}




.blog-post-page .container .by-line
{
    border-bottom: 1px solid #cccccc;
    margin-bottom: 40px;
}






.page-blog-index h1,
.blog-post-page h1
{
    margin-bottom: 20px;
}





.hidden
{
    display: none;
    visibility: hidden;
}
.fade-out {
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    visibility: visible;
}
.fade-out.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.text-right
{
    text-align: right;
}










/* -------------------------------------------------------------------------------- */









/* These are some initial values from ChatGPT. Review and update as needed. */
/* body { font-family: sans-serif; margin: auto; padding: 1em; } */
body { font-family: sans-serif; margin: auto; }
input[type=text], 
select {
    margin-top: 0.5em;
    display: block;
    width: 100%;
}

textarea { width: 100%; height: 300px; font-family: monospace; }
ul { list-style: none; padding-left: 0; }
ul li { margin: 5px 0; }

#markdownPreview { border: 1px solid #ccc; padding: 1em; background: #f9f9f9; }


#save-button
{ margin-top: 0.5em; display: block; width: 100%; }

#version-button
{ margin-top: 0.5em; display: block; width: 100%; }

#new-content-button 
{ display: block; width: 100%; }








/* -------------------------------------------------------------------------------- */




#filesTree ul,
#fullIndexContentTree ul
{
    list-style: disc;
    
    /* 
        This will end up being only for sub-ULs (the root UL is zeroed out later).
        Align the icon of each sub-LI (document or sub-folder) with the text of the parent UL (folder).
    */
    padding-left: 30px;
    
}


/* Resets, as we now show file/folder icons in each node. Should probably merge with preceding code. */
#fullIndexContentTree ul
{
    list-style: none;
}
#fullIndexContentTree>ul
{
    padding-left: 0;
}

#filesTree ul li,
#fullIndexContentTree ul li
{
    cursor: pointer;
}


#fullIndexContentTree ul li.file::before
{
    content: '📄 ';
}




/* 
These 3: Replicate the usual list indents, 
but when want the text on wrapping lines NOT to go directly 
below the file icon in ::before
So we do some creative pokey-jiggery with make it work
*/
#filesTree ul,
#fullIndexContentTree ul
{
    margin-left: 25px;
}

#fullIndexContentTree li.folder
{
   margin-left: -25px;
}

#fullIndexContentTree ul li.file::before
{
    content: '📄 ';
    margin-left: -25px;
}





#filesTree ul li.folder > span,
#fullIndexContentTree ul li.folder > span
{
    font-weight: bold;
}
/*
#filesTree ul li.folder > span::after,
#fullIndexContentTree ul li.folder > span::after
{
    content: '/'
} 
*/

#filesTree .file .item-text:hover,
#fullIndexContentTree .file .item-text:hover
{
    border-bottom: 1px #ec3838 dotted;
}




/* NOTE: The order of the following 4 blocks is important. `display: none` needs to be defined after the padding. */


/*#fullIndexContentTree ul li.folder.closed .item-toggle-down,
#fullIndexContentTree ul li.folder.open .item-toggle-right
{
    display: inline-block;
    padding-right: 10px
}

#fullIndexContentTree ul li.folder.closed .item-folder-closed,
#fullIndexContentTree ul li.folder.open .item-folder-open
{
    display: inline-block;
    padding-right: 5px
}


#fullIndexContentTree ul li.folder.open > .item-toggle-down,
#fullIndexContentTree ul li.folder.open > .item-folder-closed
{
    display: none;
}

#fullIndexContentTree ul li.folder.closed > .item-toggle-right,
#fullIndexContentTree ul li.folder.closed > .item-folder-open
{
    display: none;
}*/


/* --- "Open" folder --- */
/*#fullIndexContentTree ul li.folder.open .item-toggle-right*/
#fullIndexContentTree ul li.folder.open .item-toggle-down
{
    display: inline-block;
    padding-right: 10px
}

#fullIndexContentTree ul li.folder.open .item-folder-open
{
    display: inline-block;
    padding-right: 5px
}

/*#fullIndexContentTree ul li.folder.open > .item-toggle-down*/
#fullIndexContentTree ul li.folder.open > .item-toggle-right
{
    display: none;
}
#fullIndexContentTree ul li.folder.open > .item-folder-closed
{
    display: none;
}


/* --- "Closed" closed --- */
/*#fullIndexContentTree ul li.folder.closed .item-toggle-down*/
#fullIndexContentTree ul li.folder.closed .item-toggle-right
{
    display: inline-block;
    padding-right: 10px
}


#fullIndexContentTree ul li.folder.closed .item-folder-closed
{
    display: inline-block;
    padding-right: 5px
}


/*#fullIndexContentTree ul li.folder.closed > .item-toggle-right*/
#fullIndexContentTree ul li.folder.closed > .item-toggle-down
{
    display: none;
}

#fullIndexContentTree ul li.folder.closed > .item-folder-open
{
    display: none;
}







#fileContent
{
    height: 800px;
}



.flex-container-document-header
{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .flex-container-document-header .flex-item.flex-grow
    {
        flex-grow: 1;
    }



.file-tree-header
{
    font-size: 1.25em;
    font-weight: bold;
    color:rgb(47, 47, 192)
}













#dirty-save-state
{
    color: green;
    font-family: 'Courier New', Courier, monospace;
}


#save-button
{
    color: #fff; 
    background: #1a5fe1; 
    font-weight: bold;
    padding: 10px; 
    border: 0; 
    cursor: pointer;
    border-radius: 8px;
}
#save-button:hover
{
    background: rgba(26, 95, 225, .75);
}


#version-button
{
    color: #fff; 
    background: #85878d; 
    font-weight: bold;
    padding: 10px; 
    border: 0; 
    cursor: pointer;
    border-radius: 8px;
}
#version-button:hover
{
    background: rgba(133, 135, 141, .75);
}




#new-content-button
{
    color: #fff; 
    background: rgba(0, 128, 0, 1);
    padding: 10px; 
    border: 0; 
    cursor: pointer;
    border-radius: 8px;
}
#new-content-button:hover
{
    background: rgba(0, 128, 0, .75);
}



#html-preview-button
{
    border-radius: 8px;
}

#html-preview
{

}
#html-preview ul { list-style: disc; padding-left: 20px; }
#html-preview ul ul { list-style: circle; padding-left: 20px; }
#html-preview ul ul ul { list-style: square; padding-left: 20px; }
#html-preview ul ul ul ul { list-style: circle; padding-left: 20px; }
#html-preview ul li { margin: 5px 0; }




/* ----- Content Tree ----- */

/* #content-tree #16191327-ebcb-41ba-a597-5ac81a91ed89 */
/* #content-tree [data-content-id='16191327-ebcb-41ba-a597-5ac81a91ed89'] */
.selected-tree-item
{
    color:#d53746;
    font-weight: bold;
    border-bottom: 1px dotted #ccc;
}




#content-title-read-only:empty
{
    display: none;
}
#content-title-read-only
{
    display: block;

    color: navy;
    margin-bottom: 1em;
    border-bottom: 1px dotted #cccccc;

    padding-bottom: 15px;
}


.text-end
{
    padding-top: 15px;
}












/* -------------------------------------------------------------------------------- */







.add-folder-button
{
    border-radius: 4px;
}




/*//TODO: Version 1 of "Closed folder state". Obsolete. See the update Version 2 below */
/*
When a folder item is marked as "closed", hide all child folders and documents.
*/
li.folder.closed ul
{
    display: none;
    visibility: hidden;
}


/*//TODO: Not working yet. Actually, not a great idea. When a parent is "closed" (and sub-folders visible) we still need to food UX for re-displaying the documents in the closed parent. And when it is later collapsed again, only hiding the documents in that one folder (not any "open" sub-folders where docs are visible) */
/*//TODO: Version 2 of "Closed folder state". */
/*
When a folder item is marked as "closed", hide all child DOCUMENTS, but leave the sub-folders visible.
*/
/*li.folder.closed > ul li.file
{
    display: none;
    visibility: hidden;
}*/







.show-actions-icon
{
    cursor: pointer;
}














/* -------------------------------------------------------------------------------- */
/*                           Drop down actions                                      */
/* -------------------------------------------------------------------------------- */


.c-dropdown {
    position: relative;
    display: inline-block;
}

.c-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 5000;  /** Ensure above TinyMCE */
    right: 0;

    border: 1px solid black;

    box-shadow: 3px 8px 5px 0px rgba(0,0,0,0.19);
    -webkit-box-shadow: 3px 8px 5px 0px rgba(0,0,0,0.19);
    -moz-box-shadow: 3px 8px 5px 0px rgba(0,0,0,0.19);
}

/* .c-dropdown:hover .c-dropdown-content {
    display: block;
} */

.c-dropdown.open .c-dropdown-content {
    display: block;
}

















    /* -------------------------------------------------------------------------------- */
    /*                              Folder select list                                  */
    /* -------------------------------------------------------------------------------- */




.folder-content-document
{
    padding: 5px;
}
    .folder-content-document:hover
    {
        background-color: #f3f3f3;
    }
    .folder-content-document.status-Archived
    {
        color: blue;
    }


    .folder-content-document .folder-content-document-title
    {
        cursor: pointer;

        /* So we don't have jumping when adding a border in the :hover state */
        /*border-bottom: 1px solid white;*/
    }

    .folder-content-document .folder-content-document-title:hover
    {
        /*border-bottom: 1px solid #ccc;*/
    }

    .folder-content-document .folder-content-document-status
    {

    }






#content-folder-path-selection
{

}

    /* //-- Folder select: "Tom Select" component upgrade */
    /* Option group header */
    /*.ts-dropdown .optgroup-header
    {
        font-weight: bold;
    }*/


    /* A selectable item within the option group */
    /*.ts-dropdown [data-selectable].option
    {
        padding-left: 20px;
    }*/





    /* //-- Folder select: "Choices" component upgrade */
    #content-folder-path-container .choices__list--dropdown, 
    #content-folder-path-container .choices__list[aria-expanded]
    {
        /* Ensure the Choices options list appears above TinyMCE */
        z-index: 1000;
    }

























/* -------------------------------------------------------------------------------- */
/*                              Workspaces manager                                  */
/* -------------------------------------------------------------------------------- */

.workspace-manager-id-column
{

}
.workspace-manager-name-column
{
    width: 100%;
}
.workspace-manager-selected-column
{

}
.workspace-manager-save-column
{

}


#workspace-manager__create-workspace-name
{
    width: 95%;
}