body { margin:0; padding:20px;  padding-top: 70px; /* höjden på navbaren, justera vid behov */font-family:Arial; background:#f5f5f5 !important; color:#333 !important; animation: none !important; }

/*this settles the space left and right*/
.container {
    display:flex;
    gap:20px;
    align-items:stretch;
    margin-top: 11px;
    height: calc(100vh - 85px);
    overflow: hidden;
    /*flex-direction: row-reverse; /* <-- lägg till denna */
}

@media (max-width: 1100px) { /* små skärmar */
    body, .container {
        margin-top: 20px;
        padding-top: 30px !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        max-width: 100% !important;
        gap:4px;
    }
    .left, .right {
        padding: 0 5px; /* valfri liten padding */
    }
}

@media (max-width: 991px) { /* under navbar-breakpoint */
    body {
        padding-top: 10px !important;
    }
}

@media (max-width: 800px) { /* små skärmar */
    body, .container {
        margin-top: 16px;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        max-width: 100% !important;
        gap:2px;
    }
    .left, .right {
        padding: 0 5px; /* valfri liten padding */
    }
}

.left {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.center {
    max-width: 800px;
    margin: auto;
}

.center > div {
    width: 100%;
}

.left,
.right {
    min-width: 0;
}

#sortable {
	margin-left: -30px;
}

#sortable li { list-style:none; margin-bottom:10px; padding:10px; border-radius:6px; background:#fff; border:1px solid #ccc; }
#sortable li.slide-inactive { background-color: #c2bfbf; }
#sortable li.slide-selected { background-color: #dff0d8; }
#sortable li.slide-inactive.slide-selected { background-color: #c8e6c8; }
.zone-frame-item.slide-inactive { background-color: #c2bfbf; }
.drag-handle { cursor:move; font-weight:bold; display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.delete a { font-size:12px; }
input[type=text], input[type=number], select, input[type=file], input[type=range] { width:100%; margin-top:3px; margin-bottom:5px; padding:4px 6px; border-radius:6px; border:1px solid #ccc; font-size:14px; }
button { margin-top:5px; font-size:14px; }
img { max-width:100px; display:block; margin-bottom:5px; }
video { max-width:150px; display:block; margin-bottom:5px; }

.field-row { display:flex; gap:5px; align-items:center; margin-top:3px; overflow-x:hidden; }
.field-row label { margin-bottom:0; font-size:13px; }
.field-row input { width:60px; }

#preview {
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    background: #000;
    color: #000;
    padding: 10px;
    width:auto;          /* tar samma bredd som högerkolumnen via JS */
    height:100px;        /* du kan justera höjd eller sätta max-height */
    overflow: auto;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 1000;
    margin-bottom: 100px;
}

.right {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slides-list-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.right-editors {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    margin-top: -7px;
}

#preview img,#preview video,#preview iframe {
	max-width:100%; 
	max-height:100%; 
	object-fit:contain; 
	transform-origin:center center; }

#preview-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* centrerar bild och namn */
    gap: 5px;            /* lite mellanrum mellan bild och namn */
}

#preview-name {
    font-size: 14px;
    color: #333;         /* valfri färg */
    text-align: center;
}

.preview-box {
    width: 100%;
    max-width: 400px; /* kontrollera storlek */
    margin: auto;
}

.preview-screen .slide img,
.preview-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-screen {
    width: 100%;
    aspect-ratio: 16 / 9; /* dynamisk senare */
    position: relative;
    overflow: hidden;
    background: black;
}

.preview-inner {
    width: 1920px;
    height: 1080px;
    transform-origin: top left;
}

.slides {
    position: absolute;
    inset: 0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

input.image-scale-slider { width:50%; }

.font-row {
    display: flex;
    align-items: center;
    gap: 6px;  /* lite mellanrum mellan elements */
}

/* Längre slider */
.font-size-slider {
    flex: 1;       /* tar all återstående bredd */
    min-width: 80px; /* garanterad längd */
}

/* Kortare dropdown */
.font-select {
    flex: 0 0 180px;  /* fast bredd på 180px */
    font-size: 13px;
    padding: 2px 4px;
}

.first-slide {
    position: relative;
}

.playlist-title-inline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    color: #666;
}
    
.form-row {
    margin-bottom: 1rem; /* vertikalt mellanrum mellan rader */
}

#new-field-container { border:1px solid #ccc; background:#fff; padding:15px; border-radius:8px; }
#new-field-wrapper { border:0px solid #ccc; background: transparent; padding:0px; border-radius:8px; }

.btn-saved { background-color: #4CAF50 !important; border-color: #4CAF50 !important; color: white !important; }
.save-notice { position: fixed; top: 80px; left: 10px; background-color: #4CAF50; color: white; padding: 8px 12px; border-radius: 6px; font-weight: bold; display: none; z-index: 1000; }

.help-box {
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    padding:12px;
    font-size:14px;
}

.help-box h5 {
    margin-top:0;
    font-size:15px;
}

.help-box ul {
    padding-left:18px;
    margin-bottom:0;
}

.help-box li {
    margin-bottom:6px;
}

.active-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    gap: 0px;           /* avstånd mellan text och checkbox */
    font-size: 14px;
}

.active-toggle input[type="checkbox"] {
    transform: scale(1.5);  /* större checkbox */
    margin-left: -5px;
    cursor: pointer;
}

.image-scale-row {
    display: flex;
    align-items: center;
    gap: 8px;           /* mellan label, slider och % */
    flex-wrap: nowrap;   /* tvingar allt på samma rad */
}

.image-scale-row .choose-file {
    margin-left: auto;       /* längst ut till höger */
    white-space: nowrap;     /* texten bryts inte */
    padding: 0.25rem 0.75rem; /* lite bredare */
    flex-shrink: 0;          /* krymper inte */
}

.scale-percent {
    font-size: 0.8rem;
}

.image-scale-slider + .scale-percent {
    margin-left: 4px;  /* liten marginal direkt efter slider */
    margin-right: auto; /* knuffar knappen till höger */
}

.playlist-center {
    position: relative;
}

.playlist-title-center {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: #000;
    pointer-events: none;
}

.slide-text h1,
.slide-text h2,
.slide-text h3,
.slide-text h4,
.slide-text h5,
.slide-text h6,
.slide-text p,
.slide-text span,
.slide-text div {
    font-size: inherit !important;
    color: inherit;
}

.slide-row  { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 5px; }
.slide-meta { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
#rightColumn { position: relative; padding: 0 10px 10px; }

/* Box för NY textslide: håller storlek/border/bakgrund */
#slideEditorNewBox {
    position: relative;
    width: 100%;
    background: #000;
    border: 8px solid #28a745;
    overflow: hidden;
}

/* Innehållet (contenteditable) absolut inuti boxen — skalas med zoom */
#slideEditorNew {
    position: absolute;
    inset: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
    outline: none;
    overflow: hidden;
    font-size: 72px;
    text-align: center;
}

/* Box för uppdaterings-editorn */
#slideEditorBox {
    position: relative;
    width: 100%;
    background: #000;
    outline: 8px solid #28a745;
    overflow: hidden;
}

#slideEditorBox.img-drag-mode,
#filePreview.img-drag-mode {
    cursor: grab;
}
#slideEditorBox.img-drag-mode.dragging,
#filePreview.img-drag-mode.dragging {
    cursor: grabbing;
}
#slideEditorBox.img-drag-mode #imageTextOverlay {
    pointer-events: none;
}

/* Innehållet absolut inuti boxen */
#slideEditor {
    position: absolute;
    inset: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
    outline: none;
    overflow: hidden;
}

/* aspect ratio via padding trick */
.ratio-box {
    width: 100%;
    max-width: 500px; /* justera efter smak */
    margin: auto;
}

#filePreview {
    width: 100%;
    aspect-ratio: 16/9;
    border: 8px solid #28a745;
    border-radius: 10px;
    background: #000;
    position: relative;
    overflow: hidden;
}

#imageTextOverlay:empty {
    text-align: center;
}

#imageTextOverlay:empty::before {
    content: "Klicka och skriv text på bilden...";
    color: rgba(255,255,255,0.85);
    font-style: italic;
    pointer-events: none;
}

#previewImg,
#previewVideo {
    /*width: 100%;
    height: 100%;
    object-fit: contain;*/
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

/*---------- slides left column -----------------*/
.image-field-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 15px;
}

.image-container {
    flex: 0 0 100px; /* bredd på vänsterbild */
    margin-right: 15px;
}

.image-container img {
    max-width: 100%;
    display: block;
}

.image-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.file-name-wrapper {
    font-weight: bold;
    margin-bottom: 8px;
}

.scale-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.scale-wrapper label {
    min-width: 70px;
}

.extra-info {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    align-items: center;
}

.extra-info input[type="number"] {
    width: 60px;
}

/*----------- delete --------------*/
.delete {
    position: relative;            
}

.delete-slide {
    position: relative;
    padding: 2px 4px;
    left: -22px;
    transition: transform 0.2s ease; /* mjuk animation */
}

.delete-slide:hover {
    transform: scale(1.4);
}

#slideEditor img,
#slideEditor video,
#slideEditor iframe,
#slideEditorNew img,
#slideEditorNew video,
#slideEditorNew iframe {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    max-width: 100%;
    max-height: 100%;
}

/* Mer marginal mellan gröna rutorna vid mindre skärmar */
@media (max-width: 1500px) {
    .center > .mb-3 {
        margin-bottom: 1.8rem !important;
    }
}

/*---------- screens.php ------------------------*/
/* Ovald radioknapp — tydligare ring */
.form-check-input[type="radio"] {
    border: 2px solid #666;
}

/* Vald radioknapp */
.form-check-input:checked + .form-check-label {
    background-color: #bff2db;
    border-radius: 6px;
    padding: 2px 6px;
}


/*---------- Zone frames ------------------------*/
.zone-frame-item {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
    cursor: default;
}

.zone-frame-item .drag-handle {
    background: transparent;
    border-radius: 4px;
    cursor: grab;
}

img.zone-img-preview {
    max-width: none;
    display: block;
    margin: 0;
}

.zone-cell:hover {
    border-color: #4488cc !important;
    filter: brightness(1.15);
}

.zone-cell.zone-empty:hover {
    background: rgba(255,255,255,0.08);
}

.layout-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 10px;
}

.layout-btn.btn-primary .layout-thumb div {
    background: #7ab !important;
}

.zone-cell-editor {
    transition: border-color 0.15s;
}

.zone-cell-editor:hover {
    border-color: #ff8c00 !important;
}

.zone-cell-editor.zone-img-drag-mode {
    cursor: grab !important;
}

.zone-cell-editor.zone-img-drag-mode:active {
    cursor: grabbing !important;
}

.zone-selection-ring {
    pointer-events: none;
}


#zoneFramePreviewArea {
    user-select: none;
}