@keyframes fadeDown {
    0%{
        display: none;
        transform: translateY(-1.25em);
    }
    100%{
        display: block;
        transform: translateY(0);
    }
}
@keyframes fadeUp {
    0%{
        display: block;
        transform: translateY(0);
    }
    100%{
        display: none;
        transform: translateY(-1.25em);
    }
}
#mediaLibraryModal .modal-dialog {
    width: 99% !important;
    min-width: 99% !important;
    max-width: 99% !important;
}
#mediaLibraryModal .modal-dialog .container {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: unset !important;
    padding: 0px;
    margin: 0px;
}
#mediaLibraryModal .modal-dialog .modal-header .container {
    width: calc(100% - 50px) !important;
    min-width: calc(100% - 50px) !important;
    max-width: calc(100% - 50px) !important;
    max-height: unset !important;
    padding: 0px;
    margin: 0px;
}

/* start selected media */
.form-1-box { padding-top: 20px; text-align: left; }
.form-1-box legend {
    font-size: inherit;
    line-height: 30px;
    font-weight: 600;
    text-transform: uppercase;
    color: #555;
}
.form-1-box .form-check-label {
    line-height: 1.5;
    vertical-align: top;
}
.form-1-box input[type="text"],
.form-1-box textarea {
    background: none;
    border: 1px solid #ddd;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #888;
    box-shadow: none;
}
.form-1-box input[type="text"]:focus,
.form-1-box textarea:focus {
    outline: 0;
    background: none;
    border: 1px solid #db5d50;
    box-shadow: none;
}
.form-1-box input[type="text"]::-moz-placeholder,
.form-1-box textarea::-moz-placeholder {
    color: #bbb;
    font-style: italic;
}
.form-1-box input[type="text"]:-ms-input-placeholder,
.form-1-box textarea:-ms-input-placeholder {
    color: #bbb;
    font-style: italic;
}
.form-1-box input[type="text"]::-webkit-input-placeholder,
.form-1-box textarea::-webkit-input-placeholder {
    color: #bbb;
    font-style: italic;
}
.form-1-box button.btn-customized {
    margin-top: 1rem;
    padding: .75rem 1.5rem;
    background: #db5d50;
    border: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    box-shadow: none;
}
.form-1-box button.btn-customized:hover, 
.form-1-box button.btn-customized:active, 
.form-1-box button.btn-customized:focus, 
.form-1-box button.btn-customized:active:focus, 
.form-1-box button.btn-customized.active:focus,
.form-1-box button.btn.btn-primary:not(:disabled):not(.disabled):active,
.form-1-box button.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    outline: 0;
    background: #ca594d;
    border: 0;
    color: #fff;
    box-shadow: none;
}
.form-1-box textarea {
    height: 80px !important;
}
/* end selected media */

.media-library-modal .height-100vh, .media-library-modal.height-100vh{
    min-height: 100vh !important;
}
.upload-section{
    display: none;
    animation-name: fadeDown;
    animation-duration: 0.5s;
}
.show-upload-section{
    display: block !important;
    margin-bottom: 20px;
    /* animation-name: fadeUp;
    animation-duration: 0.5s; */
    
}
.modal-open{
    overflow: hidden !important;
}
.media-library-modal{
    font-weight: 400;
    padding-right: 0 !important;
}
#mediaLibraryModal .modal-dialog {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
    margin: 0 !important;
}
.media-library-modal .modal-content{
    border-radius: unset;
    min-height: 100vh;
}
.media-library-modal .modal-header{
    border-bottom: none;
    padding: 32px 34px 0;
    /* background-color: red; */
}
.media-library-modal .modal-body{
    padding: 30px 34px;
    /* background-color: green; */
}
.media-library-modal .searchbar{
    /* background-color: red; */
    height: 40px;
    margin-bottom: 32px;
}
.media-library-modal .search-input{
    height: 100% !important;
    display: flex;
    align-items: center;
    padding-inline: 20px;
    border-radius: unset !important;
    margin-inline-end: 17px;
    width: calc(100% - 243px);
    color: #707070;
    border: 1px solid #e2e5ec !important;
}
.media-library-modal .search-input:focus{
    border-color: #061222 !important;
}
.media-library-modal .blue-button,
.media-library-modal .red-button,
.media-library-modal .header-title button,
.media-library-modal .update-btn-container button{
    min-width: 107px;
    text-transform: uppercase !important;
    border: none;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
}
.media-library-modal .blue-button{
    background-color: #344767 !important;
}
.media-library-modal .red-button{
    background-color: #061222 !important;
}
.media-library-modal .blue-button:hover, .media-library-modal .red-button:hover{
    box-shadow: 0 2px 3px #cacaca;
    border: none;
}
.media-library-modal .no-hover-effect:hover{
    box-shadow: none;
}
.media-library-modal .searchbar button{
    text-transform: uppercase;
    width: 107px;
    transition: all 0.2s ease;
    box-shadow: none !important;
}
.media-library-modal .searchbar button:hover{
    box-shadow: 0 2px 3px #cacaca !important;
}
.media-library-modal .searchbar button:first-of-type{
    margin-inline-end: 12px;
    border: none;
}
.media-library-modal #media_library_left_section{
    padding-inline-end: 12px !important;
}
.media-library-modal .folders-title, .media-library-modal .modal-title{
   color: #707070 !important;
   font-weight: 400 !important;
}
.media-library-modal .modal-title{
    font-size: 28px !important;
}
.media-library-modal .folders-title{
    margin-bottom: 7px;
    font-size: 20px;
    line-height: 24px;
}
.media-library-modal .new-folder-container{

}
.media-library-modal .new-folder-text{
    font-size: 15px;
    line-height: 20px;
    color: #707070;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.media-library-modal .new-folder-input{
    height: 0;
    padding-block: 0;
    transition: all 0.2s linear;
}
.media-library-modal .new-folder-input.show{
    height: 25px;
    padding-block: 1px;
    transition: all 0.2s linear;
}
.media-library-modal .new-folder-text span{
    margin-inline-start: 8px;
}
.media-library-modal .new-folder-input:focus{
    border: none;
    outline: none;
}
.media-library-modal .new-folder-input{
    width: calc(100% - 32px);
    border: none;
    display: flex;
    align-items: center;
    padding-inline: 5px;
    margin-inline: auto 0;
    color: #707070;
    font-weight: 400 !important;
}
.media-library-modal .media_folders li{
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #707070;
}
.media-library-modal .media_folders li img{
    margin-inline-end: 15px;
}
.media-library-modal .media_folders .mediaFolder{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.media-library-modal .all-medias-container{
    padding: 0;
}
.media-library-modal .medias-inner-container{
    width: calc(100% - 17px);
    height: 100%;
    background-color:#F8F8F8;
    margin-inline-start: 17px;
}
.media-library-modal .medias-inner-container center{
    color: #707070;
}
.media-library-modal #media_library_right_section{
    background-color: #35424D;
}
.media-library-modal .selected-media-container .card{
    border: none;
    border-radius: unset;
    color: #FFF;
}
.media-library-modal .selected-media-container .card-body{
    color: #FFF;
    padding: 25px 0;
    border-bottom: 1px solid #707070;
    margin-bottom: 20px;
}
.media-library-modal .selected-media-container .card-title{
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 20px;
    max-width: 100%;
    word-wrap: break-word;
    color: #FFF;
}
.media-library-modal .imageOfLibrary{
    background-color: #c1c1c1;
    position: relative;
    border-radius: 3px;
}
.media-library-modal .imageOfLibrary.active{
    border-color: #f85454 !important;
}
.selected-media-container p button{
    text-transform: uppercase;
    min-width: 107px;
    margin-inline-end: 8px;
    margin-bottom: 6px;
}
.selected-media-container .card-body .card-text{
    color: #FFFFFF80;
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 18px;
}
.selected-media-container .media-path{
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.selected-media-container .media-path a{
    width: calc(100% - 75px);
    margin-inline-start: 11px;
    background-color: #FFF;
    min-height: 37px;
    display: flex;
    align-items: center;
    padding-inline: 5px;
    color: #35424D;
}
.selected-media-container .metadata-form h3{
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 27px;
    text-transform: uppercase;
    color: #FFF;
}
.selected-media-container .metadata-form .form-group{
    margin-bottom: 22px;
}
.selected-media-container .metadata-form label{
    color: #FFFFFF80;
    text-transform: capitalize;
    margin-bottom: 9px;
    font-size: 15px;
}
.selected-media-container .metadata-form .update-btn-container label{
    margin-bottom: 0;
}
.selected-media-container .metadata-form input{
    color: #35424D;
    min-height: 37px;
    background-color: #FFF;
    border-radius: unset;
    width: 100%;
    padding-inline: 5px;
    font-family: Poppins, Helvetica, sans-serif;
    font-size: 14px;
    border: none;
}
.selected-media-container .metadata-form textarea{
    color: #35424D;
    background-color: #FFF;
    border-radius: unset;
    width: 100%;
    padding-inline: 5px;
    resize: none;
    font-family: Poppins, Helvetica, sans-serif;
    font-size: 14px;
    border: none;
}
.selected-media-container .metadata-form input:focus,
.selected-media-container .metadata-form textarea:focus
{
    border: none;
    background-color: #FFF;
    color: #35424D;
}
.selected-media-container .update-metadata-btn{
    font-family: Poppins, Helvetica, sans-serif;
}
.selected-media-container .update-btn-container{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /*border-bottom: 1px solid #707070;*/
    /*padding-bottom: 22px;*/
}
.media-library-modal #mediaLibrarySetMedia{
    min-width: 107px;
    font-weight: 400 !important;
    min-height: 45px;
    font-size: 16px;
    /*background: transparent linear-gradient(310deg, rgb(251, 99, 64), rgb(251, 177, 64)) !important;*/
    background: #000000 !important;
}
.dropzone.dropzone-default.dropzone-primary,
.dropzone.dropzone-default .dropzone-msg-title,
.dropzone.dropzone-default .dropzone-msg-desc ,
.dropzone .dz-preview .dz-remove,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-results__option,
.select2-container--default .select2-results__option:hover,
.select2-container--default .select2-results__option[aria-selected="true"] {
	border-color: #707070;
    color: #707070;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
    color: #707070;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus{
    border-color: #70707080;
}
.media-library-modal .form-control::placeholder {
	color: #707070;
	/* opacity: 1; */
}
.media-library-modal .card-img-top {
    background: #C1C1C1;
}
@media screen and (max-width:600px) {
    .media-library-modal .modal-header {
        padding: 25px 15px 0;
    }
    .header-title{
        /* background-color: red; */
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;

    }
    .header-title > div{
        width: max-content;
    }
    .header-title > div:last-child{
        padding-inline-end: 0 !important;
    }
    .media-library-modal .modal-title {
        font-size: 20px !important;
    }
    .media-library-modal .search-input {
        margin-inline-end: 0;
        width: 100%;
        margin-bottom: 15px;
    }
    .media-library-modal #media_library_left_section {
        padding-inline-end: 0 !important;
    }
    .media-library-modal .modal-body {
        padding: 30px 15px;
    }
    .media-library-modal .searchbar {
        height: auto;
        margin-bottom: 30px;
    }
    .media-library-modal .medias-inner-container {
        width: 100%;
        margin-inline-start: 0;
        margin-top: 25px;
        border-radius: 5px;
    }
    .media-library-modal #all_folders{
        border-radius: 5px;
    }
    .media-library-modal .folders-title {
        font-size: 18px;
    }
    
    .media-library-modal .new-folder-text {
        font-size: 14px;
        cursor: pointer;
    }
    .media-library-modal .imageOfLibrary {
        width: 90px !important;
        height: 90px !important;
    }
    .media-library-modal #media_library_right_section {
        background-color: #35424D;
        margin-top: 25px;
        border-radius: 5px;
    }
    .selected-media-container .metadata-form label {
        margin-bottom: 7px;
        font-size: 13px;
    }
    .selected-media-container .card-body .card-text {
        font-size: 14px;
        line-height: 18px;
    }
    .media-library-modal .selected-media-container .card-title {
        font-size: 16px;
        line-height: 20px;
        margin-top: 20px;
    }
}

#show_image_popup_cont {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: none;
}
#show_image_popup_cont .popup-inner-container{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;   
}
#image_preview_opacity {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: #000000;
    opacity: 0.8;
}
#show_image_popup {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding: 10px 100px;
}

#show_image_popup .close-btn-area {
    position: absolute;
    top: 70px;
    inset-inline-end: 60px;
    float: unset;
}
#show_image_popup #image-show-area{
    max-width: 50%;
    width: 100%;
    height: auto;
}
#show_image_popup img {
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    height: auto;
    max-height: 100%;
}
@media screen and (max-width:900px) {
    #show_image_popup {
        padding: 70px 50px;
    }
    #show_image_popup #image-show-area {
        max-width: 70%;
    }
    #show_image_popup .close-btn-area {
        inset-inline-end: 40px;
    }
}
@media screen and (max-width:600px) {
    #show_image_popup {
        padding: 70px 20px;
    }
    #show_image_popup #image-show-area {
        max-width: 80%;
    }
    #show_image_popup .close-btn-area {
        inset-inline-end: 10px;
    }
}
/* @media screen and (max-width:800px) {
    #show_image_popup {
        top: 25%;
        left: 25%;
        transform: translate(-25%, -25%);
    }
}
@media screen and (max-width:600px) {
    #show_image_popup {
        top: 10%;
        left: 10%;
        transform: translate(-10%, -10%);
    }
} */
.small-image .image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}
.small-image .preview-icon-cont {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
.small-image .preview-icon-cont .preview-icon {
    color: #FFFFFF;
    font-size: 30px;
    padding: 16px 32px;
}
.small-image:hover {
    opacity: 0.3;
}
.small-image:hover .preview-icon-cont {
    opacity: 1;
}
.active-preview {
    filter: blur(5px);
}
.pt-ml-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pt-ml-detail-close {
    background: none;
    border: none;
    padding: 0 2px;
    line-height: 1;
    font-size: 20px;
    color: #FFFFFF80;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}
.pt-ml-detail-close:hover {
    color: #fff;
}
#close-btn {
    border: none;
    border-radius: 15px;
    padding-inline: 10px;
    padding-block: 5px;
    background-color: #888888;
    color: #FFFFFF;
}


/* ============================================================================
   Media library popup styles — migrated here from admin/css/premium-theme.css.
   Loaded before premium-theme.css; uses the global --pt-* design tokens (resolved at
   computed-value time) and wins over the legacy rules above (later in the file).
   ============================================================================ */
.media-library-modal .search-input:focus,
.media-library-modal .input-group .search-input:focus {
    border-color: #e2e5ec !important;
    border-left: 1px solid #e2e5ec !important;
    border-right: 1px solid #e2e5ec !important;
    box-shadow: none !important;
    outline: none !important;
}
.media-library-modal .blue-button { background-color: var(--tri-grey) !important; }
.media-library-modal .red-button  { background-color: var(--tri-red) !important; }
/* Right detail panel → flat LIGHT surface (TriangleCMS spec) with dark text */
.media-library-modal #media_library_right_section {
    background-color: var(--pt-surface-2) !important;
    border-inline-start: 1px solid var(--pt-border) !important;
    color: var(--pt-text) !important;
}
.media-library-modal #media_library_right_section .card,
.media-library-modal .selected-media-container .card {
    background: var(--pt-surface) !important;
    border: 1px solid var(--pt-border) !important;
}
.media-library-modal #media_library_right_section .card-title,
.media-library-modal #media_library_right_section .card-text,
.media-library-modal #media_library_right_section .metadata-title,
.media-library-modal #media_library_right_section label,
.media-library-modal #media_file_name,
.media-library-modal #media_date,
.media-library-modal #media_size,
.media-library-modal #media_dimensions,
.media-library-modal .media-path,
.media-library-modal #media_file_path { color: var(--pt-text) !important; }

/* Media GRID + scroll: #all_medias is a flex column so the grid scrolls inside it
   (fixes the last item being clipped); the <ul> is the responsive grid. */
.media-library-modal #all_medias { display: flex; flex-direction: column; }
.media-library-modal #all_medias .ml-grid-toolbar { flex: 0 0 auto; }
.media-library-modal #all_medias .medias-inner-container { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 12px; }
.media-library-modal #all_medias .medias-inner-container > ul {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px;
    list-style: none; padding: 0 !important; margin: 0;
}
/* Media TILE → flat card (thumbnail + name + dimensions), like the TriangleCMS design */
.media-library-modal li.imageOfLibrary {
    float: none !important; width: auto !important; height: auto !important; margin: 0 !important;
    display: flex; flex-direction: column; background: var(--pt-surface) !important;
    border: 1px solid var(--pt-border) !important; border-radius: var(--r-sm) !important; overflow: hidden;
    cursor: pointer; transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.media-library-modal li.imageOfLibrary:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-2px); }
.media-library-modal .imageOfLibrary.active { border-color: var(--tri-red) !important; box-shadow: 0 0 0 2px var(--tri-red) !important; }
.media-library-modal .ml-tile__thumb {
    position: relative;
    aspect-ratio: 1 / 1; inline-size: 100%; background-color: var(--pt-surface-2);
    background-repeat: no-repeat; background-position: center; background-size: cover;
}
.media-library-modal .ml-tile__meta { padding: 7px 9px; min-width: 0; }
.media-library-modal .ml-tile__name { font-size: 12px; font-weight: 600; color: var(--pt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-library-modal .ml-tile__sub { font-size: 11px; color: var(--pt-text-soft); margin-top: 1px; }
/* File-type badge on the thumbnail (TriangleCMS design) */
.media-library-modal .pt-ml-type-badge {
    position: absolute; inset-block-end: 7px; inset-inline-end: 7px;
    padding: 2px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); color: #fff;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.25;
    text-transform: uppercase; pointer-events: none;
}
/* List view: keep the badge anchored to the small thumb */
.media-library-modal #all_medias.ml-list .pt-ml-type-badge { inset-block-end: 3px; inset-inline-end: 3px; padding: 1px 4px; font-size: 8px; }

/* Folder rail → flat; active folder (inline font-weight:bold) gets accent tint */
.media-library-modal #all_folders { background-color: var(--pt-surface-2) !important; }
.media-library-modal li.mediaFolder { border-radius: var(--r-sm); padding: 8px 10px; }
.media-library-modal li.mediaFolder[style*="bold"] { background: var(--pt-accent-soft); color: var(--tri-red-700); }

/* Dropzone (light) → flat dashed */
.media-library-modal .dropzone.dropzone-default {
    background-color: var(--pt-surface-2) !important;
    border: 1.5px dashed var(--pt-border-strong) !important;
    border-radius: var(--r-lg) !important;
}
.media-library-modal .dropzone.dropzone-default:hover { border-color: var(--pt-accent) !important; }
.media-library-modal .dropzone .dropzone-msg-title { color: var(--pt-text) !important; }
.media-library-modal .dropzone .dropzone-msg-desc { color: var(--pt-text-muted) !important; }

.media-library-modal #mediaLibrarySetMedia { background: var(--tri-red) !important; }
.media-library-modal #mediaLibrarySetMedia:hover { background: var(--tri-red-600) !important; }

/* Detail-panel segmented control (Metadata | Crop & edit) + grid/list toggle — flat seg */
.media-library-modal .seg {
    display: inline-flex; background: var(--pt-surface-2); border: 1px solid var(--pt-border);
    border-radius: var(--r-sm); padding: 3px; gap: 2px;
}
.media-library-modal .seg button {
    height: 30px; padding: 0 13px; border: 0; background: transparent; font-family: var(--pt-font);
    font-size: 12.5px; font-weight: 600; color: var(--pt-text-muted); border-radius: 6px; cursor: pointer;
}
.media-library-modal .seg button.on { background: var(--pt-surface); color: var(--pt-text); box-shadow: var(--shadow-sm); }
.media-library-modal .ml-detail-seg { display: flex; width: 100%; margin-bottom: var(--sp-3); }
.media-library-modal .ml-detail-seg button { flex: 1; }
.media-library-modal .ml-grid-toolbar { display: flex; align-items: center; gap: 10px; padding: 0 0 var(--sp-3); }
/* "Load more" paginate control — refined ghost pill matching the redesigned modal
   controls (replaces the legacy uppercase grey .blue-button look). #loadMoreSection
   keeps its inline text-align:center to center the inline-flex button; a subtle hairline
   separates it from the grid. The chevron is a CSS mask (currentColor) so it survives
   the JS .text() label resets, recolors with the text, and nudges down on hover. */
.media-library-modal #loadMoreSection {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--pt-border);
}
.media-library-modal #nextMediaPage {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 0 !important; height: 38px; padding: 0 22px !important;
    font-family: var(--pt-font); font-size: 12.5px !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0.01em;
    color: var(--pt-text) !important;
    background: var(--pt-surface) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--r-pill) !important;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}
.media-library-modal #nextMediaPage::before {
    content: ""; flex: 0 0 auto; inline-size: 14px; block-size: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
    transition: transform var(--dur) var(--ease-out);
}
.media-library-modal #nextMediaPage:hover {
    color: var(--pt-accent) !important;
    background: var(--pt-accent-soft) !important;
    border-color: var(--pt-accent) !important;
    box-shadow: 0 4px 12px rgba(237, 26, 47, 0.12);
    transform: translateY(-1px);
}
.media-library-modal #nextMediaPage:hover::before { transform: translateY(2px); }
.media-library-modal #nextMediaPage:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.media-library-modal #nextMediaPage:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--pt-accent-soft); }
.media-library-modal #nextMediaPage .fa-spinner { margin: 0 !important; }
/* Search box — single pill with magnifier icon inside (TriangleCMS .search-box) */
.media-library-modal .ml-grid-toolbar .pt-ml-search {
    display: flex; align-items: center; gap: 9px; flex: 1 1 auto; max-width: 360px;
    height: 40px; padding: 0 13px; background: var(--pt-surface-3);
    border: 1px solid transparent; border-radius: var(--r-sm);
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.media-library-modal .ml-grid-toolbar .pt-ml-search:focus-within {
    border-color: var(--pt-accent); background: var(--pt-surface);
    box-shadow: 0 0 0 4px var(--pt-accent-soft), 0 2px 8px rgba(15, 15, 20, 0.07);
}
.media-library-modal .ml-grid-toolbar .pt-ml-search__icon { flex: 0 0 auto; color: var(--pt-text-soft); font-size: 0.9rem; cursor: pointer; transition: color var(--dur) var(--ease-out); }
.media-library-modal .ml-grid-toolbar .pt-ml-search:focus-within .pt-ml-search__icon { color: var(--pt-accent); }
.media-library-modal .ml-grid-toolbar .pt-ml-search input,
.media-library-modal .ml-grid-toolbar .pt-ml-search .form-control {
    flex: 1 1 auto; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
    outline: none; min-height: 0 !important; height: auto !important; padding: 0 !important;
    font-size: 0.84rem; color: var(--pt-text);
}
/* clear (×) — only visible when the field has text (added by JS .has-text) */
.media-library-modal .ml-grid-toolbar .pt-ml-search__clear {
    flex: 0 0 auto; display: none; align-items: center; justify-content: center;
    inline-size: 18px; block-size: 18px; border-radius: 50%; cursor: pointer;
    font-size: 1.05rem; line-height: 1; color: var(--pt-text-soft);
}
.media-library-modal .ml-grid-toolbar .pt-ml-search.has-text .pt-ml-search__clear { display: inline-flex; }
.media-library-modal .ml-grid-toolbar .pt-ml-search__clear:hover { background: var(--pt-surface-hover); color: var(--pt-accent); }
.media-library-modal .ml-grid-toolbar .pt-ml-upload-btn { flex: 0 0 auto; white-space: nowrap; background: var(--tri-red) !important; }
.media-library-modal .ml-grid-toolbar .pt-ml-upload-btn:hover { background: var(--tri-red-600) !important; }
.media-library-modal .ml-view-toggle button { width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ── Upload dropzone bar (TriangleCMS): HIDDEN by default (.upload-section),
   shown as a flex bar only when the Upload button toggles .show-upload-section ── */
.media-library-modal .pt-ml-uploadbar { align-items: stretch; gap: 10px; margin-bottom: var(--sp-3); }
.media-library-modal #upload_files_section.show-upload-section { display: flex !important; }
/* hidden upload-target folder <select> + its select2 widget — uploads follow the browsed folder */
.media-library-modal #upload_files_section .pt-ml-folderselect,
.media-library-modal #upload_files_section .select2-container { display: none !important; }
.media-library-modal .pt-ml-uploadbar .pt-ml-dropzone {
    flex: 1 1 auto; min-height: 66px; margin: 0 !important;
    display: flex; align-items: center; padding: 12px 16px !important;
}
.media-library-modal .pt-ml-uploadbar .pt-ml-dropzone .dropzone-msg {
    display: flex; align-items: center; gap: 14px; margin: 0; text-align: left; width: 100%;
}
.media-library-modal .pt-ml-dz-icon {
    flex: 0 0 auto; inline-size: 42px; block-size: 42px; border-radius: 10px;
    background: var(--pt-accent-soft); color: var(--pt-accent); display: grid; place-items: center; font-size: 1.1rem;
}
.media-library-modal .pt-ml-dz-textwrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.media-library-modal .pt-ml-uploadbar .dropzone-msg-title { font-size: 0.85rem; font-weight: 600; color: var(--pt-text) !important; margin: 0; }
.media-library-modal .pt-ml-uploadbar .dropzone-msg-desc { font-size: 0.74rem; color: var(--pt-text-soft) !important; }
.media-library-modal .pt-ml-genai {
    flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    background: var(--pt-surface) !important; border: 1px solid var(--pt-border-strong) !important;
    color: var(--pt-text) !important; border-radius: var(--r-sm) !important;
}
.media-library-modal .pt-ml-genai:hover { background: var(--pt-surface-hover) !important; border-color: var(--pt-accent) !important; color: var(--pt-accent) !important; }
.media-library-modal .pt-ml-genai i { color: var(--pt-accent); }

/* Folders rail header — small uppercase label (TriangleCMS) */
.media-library-modal #all_folders .folders-title {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--pt-text-soft); margin: 4px 0 10px; padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   GENERATE WITH AI panel — flat TriangleCMS card (header + labeled fields)
   ───────────────────────────────────────────────────────────────────── */
.media-library-modal .pt-ml-genpanel {
    background: var(--pt-surface); border: 1px solid var(--pt-border);
    border-radius: var(--r-lg); padding: 16px; margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-sm);
}
.media-library-modal .pt-ml-genpanel__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.media-library-modal .pt-ml-genpanel__icon {
    flex: 0 0 auto; inline-size: 38px; block-size: 38px; border-radius: 10px;
    background: var(--pt-accent-soft); color: var(--pt-accent);
    display: grid; place-items: center; font-size: 1.05rem;
}
.media-library-modal .pt-ml-genpanel__titles { display: flex; flex-direction: column; min-width: 0; }
.media-library-modal .pt-ml-genpanel__title { font-size: 0.95rem; font-weight: 700; color: var(--pt-text); line-height: 1.2; }
.media-library-modal .pt-ml-genpanel__sub { font-size: 0.76rem; color: var(--pt-text-soft); margin-top: 2px; }

.media-library-modal .pt-ml-genform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.media-library-modal .pt-ml-genform__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 130px; }
.media-library-modal .pt-ml-genform__field--prompt { flex: 3 1 240px; }
.media-library-modal .pt-ml-genform__field--provider { flex: 1.4 1 170px; }
.media-library-modal .pt-ml-genform__field--sm { flex: 0 1 110px; }
.media-library-modal .pt-ml-genform__field--xs { flex: 0 1 86px; }
.media-library-modal .pt-ml-genlabel { font-size: 0.72rem; font-weight: 600; color: var(--pt-text-soft); margin: 0; }
.media-library-modal .pt-ml-genform .form-control { width: 100%; margin: 0; }
.media-library-modal .pt-ml-genform .select2-container { width: 100% !important; }
.media-library-modal .pt-ml-genform__action { flex: 0 0 auto; display: flex; align-items: flex-end; }
.media-library-modal .pt-ml-genbtn {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; min-height: 40px;
    background: var(--tri-red) !important; border: 0 !important;
}
.media-library-modal .pt-ml-genbtn:hover { background: var(--tri-red-600) !important; }
.media-library-modal .pt-ml-genbtn i { color: #fff; }

/* Generated results — flat surface with a tidy card grid */
.media-library-modal .pt-ml-genresults.dropzone.dropzone-default {
    background: var(--pt-surface-2) !important; border: 1px solid var(--pt-border) !important;
    border-radius: var(--r-md) !important; padding: 12px !important; min-height: 0 !important;
}
.media-library-modal #generated_images_div { flex-wrap: wrap; gap: 12px; }
.media-library-modal #generated_images .ToBeRemoved {
    width: auto !important; height: auto !important; margin: 0 !important;
    display: flex; flex-direction: column; gap: 8px;
}
.media-library-modal #generated_images .small-image {
    border-radius: var(--r-sm) !important; border: 1px solid var(--pt-border) !important; overflow: hidden; cursor: pointer;
    transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.media-library-modal #generated_images .small-image:hover { box-shadow: var(--shadow-md); }
.media-library-modal #generated_images .small-image.active-preview { border-color: var(--tri-red) !important; box-shadow: 0 0 0 2px var(--tri-red) !important; }
.media-library-modal #generated_images .save_img_from_url_or_base64 { width: 100%; background: var(--tri-red) !important; border: 0 !important; border-radius: var(--r-sm) !important; }
.media-library-modal #generated_images .save_img_from_url_or_base64:hover { background: var(--tri-red-600) !important; }

/* LIST view (#all_medias.ml-list): one row per asset — small thumb + name + dimensions. */
.media-library-modal #all_medias.ml-list .medias-inner-container > ul { display: flex; flex-direction: column; gap: 4px; }
.media-library-modal #all_medias.ml-list li.imageOfLibrary { flex-direction: row; align-items: center; gap: 12px; padding: 6px 10px; }
.media-library-modal #all_medias.ml-list li.imageOfLibrary:hover {
    transform: none !important; box-shadow: none !important; background-color: var(--pt-surface-hover) !important;
}
.media-library-modal #all_medias.ml-list .ml-tile__thumb { inline-size: 40px; block-size: 40px; aspect-ratio: auto; flex: 0 0 auto; border-radius: 6px; }
.media-library-modal #all_medias.ml-list .ml-tile__meta { padding: 0; display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; }
.media-library-modal #all_medias.ml-list .ml-tile__name { flex: 0 1 auto; }
.media-library-modal #all_medias.ml-list .ml-tile__sub { margin-top: 0; flex: 0 0 auto; }

/* Media-library modal: constrain to the TriangleCMS centered dialog. On desktop the
   dialog is wider (~1440px) for a roomier asset grid; tablet/mobile are unaffected
   because below ~1120px the width is driven by calc(100% - 40px) (always under the cap)
   and the responsive layouts kick in at ≤860px / ≤600px.
   Replaces media-library.css's full-width 99%/100% + full-height. */
#mediaLibraryModal .modal-dialog {
    max-width: 1440px !important;
    width: calc(100% - 40px) !important;
    min-width: 0 !important;            /* beat media-library.css min-width:100% (kept it full-width) */
    margin: 1.6rem auto !important;
    height: auto !important;
    min-height: 0 !important;           /* beat the .height-100vh class's min-height:100vh (min beats max → forced full height) */
    max-height: 92vh !important;
}
#mediaLibraryModal .modal-content {
    height: auto !important;
    max-height: 92vh !important;
    min-height: 0 !important;           /* beat media-library.css min-height:100vh (forced full height) */
    border-radius: var(--r-lg) !important;
    overflow: hidden;
}
#mediaLibraryModal #mediaLibraryModalForm { height: auto !important; }
#mediaLibraryModal .modal-body { overflow-y: auto !important; }

/* Panel proportions to match the design: folder rail ~206px · flexible grid ·
   detail panel ~320px. Overrides the Bootstrap col-* widths on the modal panels. */
#mediaLibraryModal #modal_body_medias > .container,
#mediaLibraryModal #modal_body_medias > .container > .row,
#mediaLibraryModal #media_library_left_section > .container,
#mediaLibraryModal #media_library_left_section > .container > .row { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
#mediaLibraryModal #modal_body_medias > .container > .row { display: flex !important; flex-wrap: nowrap !important; }
#mediaLibraryModal #media_library_left_section {
    flex: 1 1 auto !important; max-width: none !important; width: auto !important; min-width: 0 !important;
}
#mediaLibraryModal #media_library_left_section > .container > .row { display: flex !important; flex-wrap: nowrap !important; }
#mediaLibraryModal #all_folders {
    flex: 0 0 206px !important; max-width: 206px !important; width: 206px !important;
    height: 62vh !important; padding: 12px !important;
    border-inline-end: 1px solid var(--pt-border) !important;
}
#mediaLibraryModal #all_medias {
    flex: 1 1 auto !important; max-width: none !important; width: auto !important; min-width: 0 !important;
    height: 62vh !important; padding: 14px 16px !important;
}
#mediaLibraryModal #media_library_right_section {
    flex: 0 0 320px !important; max-width: 320px !important; width: 320px !important;
    display: none !important;   /* hidden until an asset is selected (or one is pre-selected on open) */
}
#mediaLibraryModal.ml-detail-open #media_library_right_section { display: block !important; }
/* Slide-in keyframe for the mobile/tablet asset-details drawer */
@keyframes pt-ml-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Responsive: tablet + mobile (≤ 860px) ──────────────────────────────────
   Strategy:
   • Folders rail collapses to a horizontal pill strip (scrollable) above the grid
   • Grid fills the remaining height
   • Asset-details panel becomes a slide-in drawer from the right (open state only)
   • A semi-transparent scrim covers the grid while the drawer is open
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {

    /* 1 ─ Outer row: left section fills full width */
    #mediaLibraryModal #modal_body_medias > .container > .row {
        flex-wrap: nowrap !important;
    }
    #mediaLibraryModal #media_library_left_section {
        flex: 1 1 auto !important; max-width: 100% !important; width: 100% !important;
        padding-inline-end: 0 !important;
    }

    /* 2 ─ Inner left row: column (folder strip on top, grid below) */
    #mediaLibraryModal #media_library_left_section > .container > .row {
        flex-direction: column !important; flex-wrap: nowrap !important;
        height: 100%;
    }

    /* 3 ─ Folder strip: horizontal scrollable pill row */
    #mediaLibraryModal #all_folders {
        flex: 0 0 auto !important; max-width: 100% !important; width: 100% !important;
        height: auto !important; min-height: 0 !important;
        overflow-x: auto !important; overflow-y: visible !important;
        border-inline-end: none !important;
        border-bottom: 1px solid var(--pt-border) !important;
        padding: 10px 14px !important;
        scrollbar-width: none;
    }
    #mediaLibraryModal #all_folders::-webkit-scrollbar { display: none; }
    #mediaLibraryModal #all_folders .pt-ml-folders-head { display: none !important; }
    #mediaLibraryModal #all_folders > ul { display: contents !important; }
    #mediaLibraryModal #all_folders .media_folders { position: static !important; }
    #mediaLibraryModal #all_folders .media_folders ul {
        display: flex !important; flex-direction: row !important;
        flex-wrap: nowrap !important; align-items: center !important;
        gap: 6px !important; padding: 0 !important; margin: 0 !important;
        visibility: visible !important; overflow-y: visible !important;
        width: max-content !important;
    }
    #mediaLibraryModal #all_folders .media_folders .loader { display: none !important; }
    #mediaLibraryModal #all_folders li.mediaFolder {
        white-space: nowrap; flex-shrink: 0;
        padding: 4px 11px 4px 8px !important;
        border-radius: 20px !important; margin-bottom: 0 !important;
        font-size: 12.5px !important; font-weight: 500 !important;
        background: var(--pt-surface) !important;
        border: 1px solid var(--pt-border) !important;
    }
    #mediaLibraryModal #all_folders li.mediaFolder[style*="bold"] {
        background: var(--pt-accent-soft) !important;
        border-color: var(--pt-accent) !important;
        color: var(--tri-red-700, var(--pt-accent)) !important;
    }
    #mediaLibraryModal #all_folders li.mediaFolder:hover { background: var(--pt-surface-hover) !important; }
    #mediaLibraryModal #all_folders .pt-ml-folder-ico { display: none !important; }
    #mediaLibraryModal #all_folders .pt-ml-newfolder { flex-shrink: 0; }
    #mediaLibraryModal #all_folders .pt-ml-folders-head + li,
    #mediaLibraryModal #ptNewFolderBtn { flex-shrink: 0; }

    /* 4 ─ Grid fills remaining height */
    #mediaLibraryModal #all_medias {
        flex: 1 1 auto !important; max-width: 100% !important; width: 100% !important;
        min-height: 50vh !important; height: auto !important;
        padding: 12px 14px !important;
    }

    /* 5 ─ Asset details = FULL-SCREEN FIXED OVERLAY, painted on top of everything (z-index
          approach). position:fixed + a very high z-index guarantees the panel shows above the
          grid AND the modal, independent of flex / overflow:hidden / stacking-context behaviour
          (the earlier in-flow approaches hit a flexbox reflow glitch and stayed invisible until
          a window resize). The action footer is floated ABOVE the overlay so Use selected /
          Cancel stay tappable; the X in the detail head returns to the grid. */
    #mediaLibraryModal.ml-detail-open #media_library_left_section { display: none !important; }
    #mediaLibraryModal.ml-detail-open #media_library_right_section {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: auto !important; max-width: none !important; min-width: 0 !important;
        height: auto !important; max-height: none !important;
        margin: 0 !important; flex: none !important; float: none !important;
        display: block !important; visibility: visible !important;
        z-index: 2147483000 !important;
        background: var(--pt-surface) !important;
        overflow-y: auto !important; -webkit-overflow-scrolling: touch;
        border: none !important;
        padding: 16px 16px 88px !important; /* bottom clears the floating footer */
    }
    #mediaLibraryModal.ml-detail-open #media_library_right_section .selected-media-container {
        visibility: visible !important; height: auto !important; overflow-y: visible !important;
    }
    #mediaLibraryModal.ml-detail-open #media_library_right_section #selected_image { height: auto !important; }
    /* The detail-head X is the way back to the grid on mobile — make it prominent. */
    #mediaLibraryModal.ml-detail-open .pt-ml-detail-close { font-size: 24px !important; }

    /* 6 ─ Action footer floats ABOVE the details overlay so Use selected / Cancel stay tappable. */
    #mediaLibraryModal.ml-detail-open .modal-footer.pt-ml-foot {
        position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        z-index: 2147483001 !important; margin: 0 !important;
        background: var(--pt-surface) !important; border-top: 1px solid var(--pt-border) !important;
    }

    /* 7 ─ Footer tweaks */
    .media-library-modal .modal-footer.pt-ml-foot { padding: 10px 16px !important; }
    .media-library-modal .pt-ml-foot__hint { display: none !important; }
}

@media (max-width: 600px) {
    .media-library-modal .modal-header { padding: 16px 14px 0 !important; }
    .media-library-modal .modal-body   { padding: 12px 14px !important; }
    #mediaLibraryModal #all_medias .ml-grid-toolbar { gap: 6px !important; }
    /* Tighter tile grid on small phones */
    .media-library-modal #all_medias .medias-inner-container > ul {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
        gap: 10px !important;
    }
}

/* Modal header → design "icon tile + title + subtitle" lockup */
#mediaLibraryModal .modal-header .pt-ml-headicon {
    flex: 0 0 auto; inline-size: 34px; block-size: 34px; border-radius: 9px;
    background: var(--pt-accent-soft); color: var(--pt-accent);
    display: inline-grid; place-items: center; font-size: 1rem; margin-inline-end: 12px;
}
#mediaLibraryModal .modal-header .header-title { display: flex; align-items: center; }
#mediaLibraryModal #mediaLibraryModalLabel { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--pt-text); }

/* Detail panel "Asset details" header (design) */
#mediaLibraryModal .pt-ml-detail-head {
    display: flex; align-items: center; gap: 8px;
    justify-content: space-between;
    padding: 0 0 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--pt-border);
    font-size: 13.5px; font-weight: 700; color: var(--pt-text);
}
#mediaLibraryModal .pt-ml-detail-close {
    background: none; border: none; padding: 0 2px;
    line-height: 1; font-size: 18px; cursor: pointer; flex-shrink: 0;
    color: var(--pt-text-soft);
    transition: color var(--dur) var(--ease-out);
    margin-inline-start: auto;
}
#mediaLibraryModal .pt-ml-detail-close:hover { color: var(--pt-text); }
html[data-theme="dark"] #mediaLibraryModal .pt-ml-detail-close { color: rgba(255,255,255,0.45); }
html[data-theme="dark"] #mediaLibraryModal .pt-ml-detail-close:hover { color: #fff; }

/* Crop & edit tab: container is content-driven (JS forces a fixed vh height that
   clipped the buttons) and the image is capped so the Edit/crop buttons ALWAYS
   sit under it — incl. tall/portrait images (object-fit:contain centres them). */
#mediaLibraryModal #selected_image { height: auto !important; }
#mediaLibraryModal #ml-tab-crop { display: flex; flex-direction: column; gap: 10px; }
#mediaLibraryModal #ml-tab-crop > p { margin: 0; }
#mediaLibraryModal .pt-ml-cropimg {
    width: 100%; max-height: 46vh !important; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--pt-border); border-radius: var(--r-md); background: var(--pt-surface-2);
}
#mediaLibraryModal .pt-ml-cropimg img#selected-image {
    width: auto !important; max-width: 100% !important; height: auto !important; max-height: 44vh !important;
    object-fit: contain; display: block; margin: 0;
}
.pt-media-preview__thumb img.imageViewer { display: block; inline-size: 100%; height: auto; max-height: 200px; object-fit: cover; margin: 0; padding: 0; border: 0; border-radius: 0; }

/* Media modal: header subtitle + footer (Selected X · Cancel · Use selected) + folder rows */
.media-library-modal .pt-ml-subtitle { display: block; font-size: 0.78rem; color: var(--pt-text-soft); margin-top: 2px; }
.media-library-modal .modal-footer.pt-ml-foot { display: flex; align-items: center; gap: 10px; }
.media-library-modal .pt-ml-foot__selected { flex: 1 1 auto; min-width: 0; font-size: 0.8rem; color: var(--pt-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-library-modal .pt-ml-foot__selected b { color: var(--pt-text); font-family: var(--pt-font-mono); font-weight: 600; }
.media-library-modal .pt-ml-foot__hint { flex: 1 1 auto; min-width: 0; font-size: 0.8rem; color: var(--pt-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-library-modal .pt-ml-cancel { background: var(--pt-surface) !important; border: 1px solid var(--pt-border-strong) !important; color: var(--pt-text) !important; border-radius: var(--r-sm) !important; }
.media-library-modal .pt-ml-cancel:hover { background: var(--pt-surface-hover) !important; }
.media-library-modal li.mediaFolder { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--pt-text); transition: background-color var(--dur) var(--ease-out); }
.media-library-modal li.mediaFolder:hover { background: var(--pt-surface-hover); }

/* ── Dark mode overrides for media library modal ── */
html[data-theme="dark"] .media-library-modal #media_library_right_section {
    background-color: var(--tri-grey-2) !important;
    border-inline-start: 1px solid rgba(255,255,255,0.08);
}
html[data-theme="dark"] .media-library-modal #all_folders {
    background-color: var(--pt-surface-2) !important;
}
html[data-theme="dark"] .media-library-modal .medias-inner-container {
    background-color: var(--pt-surface) !important;
}
html[data-theme="dark"] .media-library-modal .medias-inner-container center {
    color: var(--pt-text-muted) !important;
}
html[data-theme="dark"] .media-library-modal .dropzone.dropzone-default {
    background-color: var(--pt-surface-2) !important;
    border-color: var(--pt-border) !important;
}
html[data-theme="dark"] .media-library-modal .dropzone .dropzone-msg-title,
html[data-theme="dark"] .media-library-modal .dropzone .dropzone-msg-desc {
    color: var(--pt-text-muted) !important;
}
html[data-theme="dark"] .media-library-modal .search-input {
    background-color: var(--pt-surface-2) !important;
    border-color: var(--pt-border) !important;
    color: var(--pt-text) !important;
}
html[data-theme="dark"] .media-library-modal .search-input:focus,
html[data-theme="dark"] .media-library-modal .input-group .search-input:focus {
    border-color: var(--pt-border-strong) !important;
    border-left: 1px solid var(--pt-border-strong) !important;
    border-right: 1px solid var(--pt-border-strong) !important;
}

/* ── Media library modal: suppress accent shadow on search buttons ── */
.media-library-modal .searchbar .btn-primary,
.media-library-modal .searchbar .btn-danger {
    box-shadow: none !important;
}
.media-library-modal .searchbar .btn-primary:hover,
.media-library-modal .searchbar .btn-danger:hover {
    box-shadow: 0 2px 3px #cacaca !important;
}

/* ── Media library modal: suppress all shadows on searchbar buttons (incl. .focused state) ── */
.media-library-modal .searchbar.focused .btn,
.media-library-modal .searchbar.focused .btn-primary,
.media-library-modal .searchbar.focused .btn-danger,
.media-library-modal .searchbar .btn:focus,
.media-library-modal .searchbar .btn-primary:focus,
.media-library-modal .searchbar .btn-danger:focus,
.media-library-modal .input-group.focused .btn,
.media-library-modal .input-group.focused .btn-primary,
.media-library-modal .input-group.focused .btn-danger {
    box-shadow: none !important;
    outline: none !important;
}

/* ── Dark mode: image preview container (getMediaBtn + generator relation tabs) ── */
html[data-theme="dark"] .img-preview-container,
html[data-theme="dark"] .imageViewerContainer > div[style*="background-color:#EFEFEF"],
html[data-theme="dark"] .imageViewerContainer > div[style*="background-color: #EFEFEF"] {
    background-color: var(--pt-surface-2) !important;
}

/* =====================================================================
   §33b — MEDIA LIBRARY · folder rail header + inline "Create new folder"
   (TriangleCMS design: FOLDERS label + folder-plus icon → inline create row)
   + dark-mode polish for the picker.
   ===================================================================== */
.media-library-modal .pt-ml-folders-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin: 4px 0 10px;
}
.media-library-modal .pt-ml-folders-head .folders-title { margin: 0; }
.media-library-modal .pt-ml-newfolder-btn {
    flex: 0 0 auto; inline-size: 26px; block-size: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--pt-text-soft);
    border-radius: 7px; cursor: pointer; padding: 0;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.media-library-modal .pt-ml-newfolder-btn:hover { background: var(--pt-surface-hover); color: var(--pt-accent); }
.media-library-modal .pt-ml-newfolder-btn svg { display: block; }

/* Inline create-folder row (revealed by the + button) */
.media-library-modal .pt-ml-newfolder { display: block; list-style: none; margin: 0 0 10px; padding: 0; }
.media-library-modal .pt-ml-newfolder[hidden] { display: none; }
.media-library-modal .pt-ml-newfolder__row { display: flex; align-items: center; gap: 5px; }
.media-library-modal .pt-ml-newfolder__input {
    flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; font-size: 0.82rem;
    border: 1px solid var(--pt-border-strong); border-radius: var(--r-sm);
    background: var(--pt-surface); color: var(--pt-text); outline: none;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.media-library-modal .pt-ml-newfolder__input::placeholder { color: var(--pt-text-soft); }
.media-library-modal .pt-ml-newfolder__input:focus { border-color: var(--pt-accent); box-shadow: 0 0 0 3px var(--pt-accent-soft); }
.media-library-modal .pt-ml-newfolder__ok,
.media-library-modal .pt-ml-newfolder__cancel {
    flex: 0 0 auto; inline-size: 30px; block-size: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-sm); cursor: pointer; padding: 0;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.media-library-modal .pt-ml-newfolder__ok { background: var(--tri-red); color: #fff; }
.media-library-modal .pt-ml-newfolder__ok:hover { background: var(--tri-red-600); }
.media-library-modal .pt-ml-newfolder__cancel { background: var(--pt-surface-3); color: var(--pt-text-muted); }
.media-library-modal .pt-ml-newfolder__cancel:hover { background: var(--pt-surface-hover); color: var(--pt-text); }
.media-library-modal .pt-ml-newfolder__ok svg,
.media-library-modal .pt-ml-newfolder__cancel svg { display: block; }
.media-library-modal .pt-ml-newfolder__err { display: block; font-size: 0.7rem; color: var(--tri-red); margin: 5px 2px 0; }
.media-library-modal .pt-ml-newfolder__err:empty { display: none; }

/* Folder list rows — design row (currentColor stroke-icon + name). The icon is an
   inline SVG (not a baked <img>) so it inherits the row's text colour → visible in
   dark mode and red when active. */
.media-library-modal li.mediaFolder { display: flex; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; gap: 10px; color: var(--pt-text); }
.media-library-modal li.mediaFolder .pt-ml-folder-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: 0.85; }
.media-library-modal li.mediaFolder .pt-ml-folder-ico svg { inline-size: 18px; block-size: 18px; display: block; }
.media-library-modal li.mediaFolder .pt-ml-folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-library-modal li.mediaFolder .pt-ml-folder-count {
    flex: 0 0 auto; padding-inline-start: 6px; font-size: 11px; font-weight: 600;
    color: var(--pt-text-soft); font-variant-numeric: tabular-nums;
}
.media-library-modal li.mediaFolder[style*="bold"] .pt-ml-folder-count { color: var(--pt-accent-600); }
/* "All media" (folder 1) keeps an accented picture glyph to distinguish it from real folders */
.media-library-modal li.mediaFolder.is-all-media .pt-ml-folder-ico { color: var(--pt-accent); opacity: 1; }
.media-library-modal li.mediaFolder:hover { background: var(--pt-surface-hover); }
.media-library-modal li.mediaFolder[style*="bold"] .pt-ml-folder-ico { opacity: 1; }
/* legacy baked folder <img> fallback (older render path) */
.media-library-modal li.mediaFolder img { inline-size: 17px; block-size: 17px; opacity: 0.8; flex: 0 0 auto; margin: 0; }

/* ── Dark-mode polish for the picker ───────────────────────────────── */
/* Active folder: subtle red tint + a LIGHTER red text/icon (was dark --tri-red-700,
   nearly invisible on the dark rail). */
html[data-theme="dark"] .media-library-modal li.mediaFolder[style*="bold"] {
    background: var(--pt-accent-soft) !important;
    color: var(--tri-red-300) !important;
}
html[data-theme="dark"] .media-library-modal li.mediaFolder { color: var(--pt-text); }
html[data-theme="dark"] .media-library-modal li.mediaFolder:hover { background: var(--pt-surface-hover); }
html[data-theme="dark"] .media-library-modal .pt-ml-newfolder__input { background: var(--pt-surface-2); }
html[data-theme="dark"] .media-library-modal .pt-ml-newfolder__cancel { background: var(--pt-surface-2); }
html[data-theme="dark"] .media-library-modal .folders-title { color: var(--pt-text-soft); }
/* Light-mode active folder text bumped from --tri-red-700 to --accent-600 for a cleaner look */
.media-library-modal li.mediaFolder[style*="bold"] { background: var(--pt-accent-soft); color: var(--pt-accent-600); }