body
{
    background-color: #ccc;
}


.template-editor {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

/*
li::before {
  content: ' ';
  opacity: 0;
}*/

.editor-sidebar 
{
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1em 2em;
    border: 1px sold #ccc;
    background: #ccc;

    align-self: flex-start;
    max-width: 140px;
    max-width: 220px;

    border-radius: 4px;
    background-color: transparent;
    border: none;
    padding: 0;
}

.editor-sidebar button {
    width: 100%;
}

.editor-container {
    position: relative;
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.tte-editor-workspace {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    max-width: 100%;
}

.tte-editor-workspace .editor-viewport {
    height: clamp(420px, 70dvh, 900px);
}



#editor-message-box
{
    display:none;
}

#tte-add-image-filepicker {
    display: none;
}

.editor-viewport 
{
    position: relative;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    background-color: #666;
    width: 100%;
    padding: 25px 35px;
}

#tte-viewport-scrollhelper {
    position: relative;
    width: 100%;
    margin: 0 auto; /* this one centers the page */
}

.editor-viewport-inner {
    overflow: visible;
}


        .paper-container {
            --tte-inverse-zoom: 1;
            position: relative;
            margin: 0px auto;
            background: #fff;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
            transform-origin: top left;
            box-sizing: border-box;

            display: block;;
            overflow: visible;
        }

        

        .editor-canvas {
            background: white;
            border: 1px solid rgba(255, 255, 255, 0);
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 100;
        }

        .editor-canvas.show-border {
            border: 1px dotted grey;
        }

        .template-node {
            cursor: move;
            user-select: none;
            position: absolute;

            min-width: 32px;
            min-height: 32px;
        }

        .editor-container .template-node {
            touch-action: pinch-zoom;
        }

        .editor-container .handle {
            touch-action: none;
        }

        .template-node.selected {
            outline: 2px solid #007bff;
            outline-offset: 2px;
        }

        .template-node > img {
            pointer-events: none;
        }

        .handle {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #007bff;
            border: 1px solid white;
            z-index: 100;
            cursor: pointer;
            display: none;
        }

        .handle.resize-nw { top: -10px; left: -10px; cursor: nwse-resize; }
        .handle.resize-ne { top: -10px; right: -10px; cursor: nesw-resize; }
        .handle.resize-sw { bottom: -10px; left: -10px; cursor: nesw-resize; }
        .handle.resize-se { bottom: -10px; right: -10px; cursor: nwse-resize; }
        .handle.resize-n { top: -10px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
        .handle.resize-s { bottom: -10px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
        .handle.resize-w { left: -10px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
        .handle.resize-e { right: -10px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }



        .text-container {
            width: 100%;
            height: 100%;
            pointer-events: none;
            padding: 0px;
            position: relative;
            display: block;

            overflow: hidden;
            overflow: visible;
            
            overflow-wrap: normal;
            word-break: normal;
        }

        .text-container.placeholder-text {
            white-space: nowrap;
        }

        .text-container.editing {
            pointer-events: auto;
            border: 1px dashed #007bff;
            cursor: text;
            user-select: text;
            -moz-user-select: text;
            outline: 0px solid transparent;
            background: white;
        }

        .text-container span{
            white-space: pre-wrap;
            white-space-collapse: preserve;

            /*border-bottom: 1px solid red;*/
            dominant-baseline: text-bottom;
        }

        .text-container ul {
            list-style-image: url("/static/images/accm/template-editor/list_marker_0.png");
        }
        .text-container ul li {
            padding-left: 3mm;
        }

 

        .coord-box {
            position: absolute;
            top: -3em;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(128, 128, 128, 0.8);
            color: white;
            padding: 2px 6px;
            font-size: 10px;
            border-radius: 3px;
            z-index: 100;
            pointer-events: none;
            display: none;
            text-wrap-mode: nowrap;
            white-space: pre;
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
            font-weight: lighter;
        }


        .tte-toolbar {
            background: #f6f6f6;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 8px;
            text-align: left;
            font-size: 11px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: row;
            gap: 8px;
        }

        .tte-toolbar button {
            background-color: #eee;
            color: #333;
            width: unset;
            height: unset;
            padding: 0.2em 1em;
            border: 1px solid #aaa;
        }
        .tte-toolbar button, .tte-toolbar select, .tte-toolbar input {
            font-size: 12px;
            border-radius: 4px;
            box-shadow: none;
        }

        .tte-nodetoolbar,
        .node-alignment-toolbar {
            flex-direction: column;
        }

        .tte-toolbar-button-fontstyle-italic {
            font-style: italic;
        }

        .tte-toolbar-button-fontstyle-bold {
            font-weight: bold;
        }

        .tte-toolbar-button-fontstyle-underline {
            text-decoration: underline;
        }

        .side-toolbar {
            display:flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 4px;
            background-color: transparent;
            background-color: #ccc;
            border:1px solid #fff;
            border-radius: 5px;
            padding: 1em 2em;
        }


        .tte-toolbar-separator {
            height: 2em;
        }



        #document-settings-dialog .tool-window-content
        {
            box-sizing: border-box;
            width: min(480px, calc(100vw - 32px));
        }

        .document-settings
        {
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin: 1em;
            max-width: none;
            border: 1px solid #ccc;
            padding: 1em;
        }

        .page-settings-preset {
            display: flex;
            gap: 4px;
            flex-direction: column;
        }

        #tte-page-size-preset {
            box-sizing: border-box;
            max-width: 100%;
            width: 100%;
        }

        .page-settings2 {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: center;
            gap: 12px;
            margin-top: 1em;
        }

        .page-dimension {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .page-dimension-control {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }

        .page-settings2 input[type="number"] {
            box-sizing: border-box;
            min-width: 0;
            width: 100%;
        }

        .border-settings {
            gap: 1em;
            display: flex;
            flex-direction: column;
        }

        .border-settings-div label {
            margin: 0px 0px 2px 0px;
            display: block;
        }

        .border-settings-div input {
            width: 42px;
        }

        /* spinners always visible */
        .border-settings-div input::-webkit-inner-spin-button,
        .border-settings-div input::-webkit-outer-spin-button  {
            opacity: 1;
            -webkit-appearance: auto;
        }        

.border-settings-table {
    gap: 10px 5px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
    margin: 0em 0em 1em 0em;
}

.border-settings-div {
    text-align: center;
}


/* Overlay styles */
#editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
  }

  #editor-overlay.editor-overlay-local
  {
    position: absolute !important;
  }
  
  /* Spinner styles */
  .loader {
    border: 8px solid #f3f3f3; /* Light gray */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }
  
  /* Spinner animation */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Optional: Disable content interaction */
  #content.disabled {
    pointer-events: none;
    opacity: 0.6;
  }


  button.tte-sidebar-button {
    background-color: var(--button-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    width: 100%;
    box-shadow: 0 2px 4px #666666aa;
  }


  .tte-sidebar-nav-list {
    display: flex;
    flex-direction: column;
    gap: .5em;
    width: 100%;
}

@media (max-width: 900px) {
    .tte-main-toolbar {
        flex-wrap: wrap;
        align-items: center;
    }

    .tte-main-toolbar > #tte-text-format-controls {
        order: 3;
        flex: 1 0 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .tte-main-toolbar > .tte-sub-toolbar:first-child,
    .tte-main-toolbar > .tte-sub-toolbar:last-child {
        flex: 1 1 auto;
    }

    #tte-font-family-selector {
        max-width: min(15rem, 100%);
    }

    .tte-editor-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .tte-nodetoolbar,
    .node-alignment-toolbar {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .tte-editor-workspace > .tte-nodetoolbar button {
        flex: 1 1 7rem;
        min-width: 0;
        height: auto;
        min-height: 48px;
    }

    .tte-editor-workspace > .tte-nodetoolbar button.tte-delete-node-button {
        margin-top: 0;
    }

    .tte-editor-workspace > .node-alignment-toolbar button {
        flex: 1 1 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 6px;
    }

    .tte-editor-workspace .editor-viewport {
        height: clamp(340px, 62dvh, 720px);
        padding: 16px;
    }
}

@media (max-width: 520px) {
    #document-settings-dialog .tool-window-content {
        width: min(480px, calc(100vw - 18px));
    }

    .document-settings {
        gap: 14px;
        margin: 0;
        padding: 12px;
    }

    .page-settings2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .border-settings-table {
        display: grid;
        grid-template-columns: repeat(2, minmax(64px, 1fr));
        justify-content: stretch;
    }

    .border-settings-div input {
        width: 64px;
    }

    .tte-main-toolbar > .tte-sub-toolbar:first-child,
    .tte-main-toolbar > .tte-sub-toolbar:last-child {
        justify-content: flex-start !important;
    }

    .tte-main-toolbar .tte-save-button {
        min-width: 72px;
    }

    .tte-editor-workspace .editor-viewport {
        height: max(320px, 58dvh);
        padding: 10px;
    }
}

@media (pointer: coarse) {
    .tte-toolbar button,
    .tte-toolbar select,
    .tte-toolbar input {
        min-height: 44px;
    }

    .handle {
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        transform: scale(var(--tte-inverse-zoom, 1));
        transform-origin: center;
    }

    .handle::before {
        content: '';
        position: absolute;
        inset: -11px;
    }

    .handle.resize-nw,
    .handle.resize-ne,
    .handle.resize-sw,
    .handle.resize-se,
    .handle.resize-n,
    .handle.resize-s,
    .handle.resize-w,
    .handle.resize-e {
        transform: scale(var(--tte-inverse-zoom, 1));
    }

    .handle.resize-nw { top: -12px; left: -12px; }
    .handle.resize-ne { top: -12px; right: -12px; }
    .handle.resize-sw { bottom: -12px; left: -12px; }
    .handle.resize-se { bottom: -12px; right: -12px; }
    .handle.resize-n { top: -12px; left: calc(50% - 12px); }
    .handle.resize-s { bottom: -12px; left: calc(50% - 12px); }
    .handle.resize-w { left: -12px; top: calc(50% - 12px); }
    .handle.resize-e { right: -12px; top: calc(50% - 12px); }
}

@media (pointer: coarse), (max-width: 520px) {
    .editor-container input:not([type="color"]),
    .editor-container select,
    .editor-container textarea,
    .tool-window input:not([type="color"]),
    .tool-window select,
    .tool-window textarea {
        font-size: 16px;
    }
}