:root {
	--color: #4080d3;
	--bg-color: #e7edf0;
	--dark-bg-color: #333;
	--dark-color: #eee;
	}

* {
	padding: 0;
	margin: 0;
	}


body {
	height: 100dvh;

	display: grid;

	grid-template-rows: auto 1fr auto;

	font: normal 16px arial;
	}


header {
	position: sticky;
	top:0;
	}

footer {
	position: sticky;
	bottom:0;
	}


html.busy .hide-when-busy {display: none !important;}
html:not(.busy) .hide-when-not-busy {display: none !important;}

.drag-over {
    outline: 2px dashed #4080d3;
    background-color: rgba(64, 128, 211, 0.1);
	}

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

/* SVG Icon Styling */
.icon {
  width: 24px;
  height: 24px;
  stroke: var(--icon-color); /* Use the CSS variable */
  transition: fill 0.3s ease; /* Smooth transition */
}

/* Optional: Add hover effects */
.icon:hover {
  stroke: var(--icon-color-hover, gray); /* Define a hover color variable if needed */
}

.item, .widget, .display {
	user-select: text;

}

.item {
    display: flex;
    position: absolute;
    --icon-color: black;

    /* Left and top positions will be applied dynamically */
}

.item .widget {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.item .control {
    display: flex;
    gap: 3px;
}

.item .control svg {
    width: 25px;
}

.item .control textarea {
    width: auto;
    min-height: 1em;
    padding: 5px;
    resize: vertical;
    width: 100%;
/*    width: calc(100% - 30px);*/
}

/* Styles for media elements within widgets */
.item .display img,
.item .display iframe,
.item .display video,
.item .display audio {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: auto;
    xuser-drag: none;
    xuser-select: none;
    xpointer-events: none;

    x-webkit-user-drag: none;
    x-moz-user-select: none;
    x-webkit-user-select: none;
    x-ms-user-select: none;

}

/*
.item .display {
    height: 100%;
}
*/

.item .display {
    flex-grow: 1;
    display: flex;
    width: 100%;
}

/* Highlight selected text */
.item .display textarea::selection {
    background-color: rgba(173, 216, 230, 0.5); /* Light blue background */
    color: #000; /* Text color during selection */
}


.item .display textarea:focus {
	outline: none;
}

.item .display textarea {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    resize: none;
    overflow: auto;
    box-sizing: border-box;
}


.item .footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

.item .footer svg {
    width: 25px;
}

.item .footer .se-resize {
    cursor: se-resize;
}

/* Styling for different item types */
.pdf-item {
    width: 100%;
    height: 100%; /* Set explicit height for PDFs */
    border: none;
}

.image-item {
    width: 100%;
    aspect-ratio: 16/9; /* Example aspect ratio for images */
    object-fit: contain; /* Fit image without distortion */
}

.text-item {
    width: 100%;
    height: 100%; /* Set height only for text items */
    font-size: var(--font-size, 16px);
    resize: vertical;
}

.item .header {
    display: flex;
    justify-content: flex-end;
    padding: 5px;
}

.item .delete-button {
    background: none;
    border: none;
    cursor: pointer;
}

.item .delete-button svg {
    width: 16px;
    height: 16px;
}

/* ----------- Text Editor Widget Styles ----------------*/
.editor-widget {
  position: relative;
  width: 100%;
  height: 300px; /* Adjust as needed */
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  background-color: #ffffff; /* Default background color */
}

/* Custom Text Editor Styles */
.custom-text-editor {
  width: 100%;
  height: 100%;
  resize: none;
  overflow: auto;
  font-size: 16px;
  font-family: 'mono', sans-serif;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none; /* Remove default outline */
  background-color: inherit;
  color: #ddd;
}

/* Focus State */
.custom-text-editor:focus {
  border-color: #66afe9;
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

/* Optional: Placeholder Styling */
.custom-text-editor::placeholder {
  color: #999999;
}