/* ========================================
ROCKETMEDIA EXPLORER - CSS ORGANIZZATO
======================================== */

/* === VARIABILI CSS === */
.rocketmedia-explorer {
font-family: Arial, sans-serif;
--primary-color: #2271b1;
--bg-color: #ffffff;
--border-radius: 8px;
--hover-transform: translateY(-2px);
box-sizing: border-box;
position: relative;
transition: all 0.3s ease;
}

/* === LAYOUT E DIMENSIONI CONTAINER === */
/* Tipi di larghezza */
.rme-width-full {
width: 100%;
max-width: none;
}

.rme-width-boxed,
.rme-width-custom {
width: 100%;
box-sizing: border-box;
}

/* Allineamenti */
.rme-align-left {
margin-left: 0;
margin-right: auto;
}

.rme-align-center {
margin-left: auto;
margin-right: auto;
}

.rme-align-right {
margin-left: auto;
margin-right: 0;
}

/* Container con altezza fissa */
.rocketmedia-explorer[style*="height"] {
overflow: hidden;
display: flex;
flex-direction: column;
}

.rocketmedia-explorer[style*="height"] .rme-explorer {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}

.rocketmedia-explorer[style*="height"] .rme-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}

/* Stili per container con sfondo personalizzato */
.rocketmedia-explorer[style*="background"] {
backdrop-filter: blur(10px);
}

/* === STATI GENERALI === */
.rme-loading,
.rme-error {
padding: 20px;
text-align: center;
border: 1px solid #ddd;
border-radius: 4px;
margin: 10px 0;
}

.rme-error {
background-color: #f8d7da;
color: #721c24;
border-color: #f5c6cb;
}

.rme-loading {
background-color: #d1ecf1;
color: #0c5460;
border-color: #bee5eb;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
flex: 1;
}

/* === EXPLORER PRINCIPALE === */
.rme-explorer {
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}

/* === BREADCRUMB === */
.rme-breadcrumb {
background: #f8f9fa;
padding: 10px 15px;
border-bottom: 1px solid #ddd;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
overflow: hidden;
}

.rme-breadcrumb * {
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.rme-back-btn {
    background: #007cba;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rme-back-btn:hover {
    background: #005a87;
}

.rme-back-btn:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Stili per l'icona personalizzata */
.rme-custom-back-icon {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1); /* Rende l'icona bianca */
}

.rme-custom-back-icon[src$=".svg"] {
    width: 16px;
    height: 16px;
}

/* Stati di caricamento per icone */
.rme-custom-back-icon[src=""],
.rme-custom-back-icon:not([src]) {
    opacity: 0;
    display: none;
}

.rme-custom-back-icon:not([src=""]) {
    opacity: 1;
}

.rme-path {
font-weight: bold;
color: #333;
}

/* === GRID LAYOUT === */
.rme-content {
padding: 15px;
display: grid;
gap: 15px;
}

.rme-content:not([style*="grid-template-columns"]) {
grid-template-columns: repeat(4, 1fr);
}

/* === ITEMS BASE === */
.rme-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
width: 100%;
min-width: 0;
box-sizing: border-box;
}

.rme-item:hover {
background-color: #f0f0f0;
border-color: #007cba;
transform: var(--hover-transform, translateY(-2px));
}

.rme-item:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}

/* Tipi di item */
.rme-folder {
background-color: #fff8dc;
}

.rme-image,
.rme-video {
background-color: #f0f8ff;
}

.rme-empty {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: #666;
font-style: italic;
}

/* === ICONE === */
.rme-icon {
font-size: 32px;
margin-bottom: 8px;
}

.rme-name {
font-size: 12px;
word-break: break-word;
color: #333;
}

/* === ICONE PERSONALIZZATE === */
.rme-icon-container {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin-bottom: 8px;
animation: rme-icon-appear 0.3s ease-out;
}

.rme-custom-folder-icon {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: all 0.3s ease;
filter: brightness(0) saturate(100%);
}

.rme-custom-folder-icon[src$=".svg"] {
width: 32px;
height: 32px;
}

/* Stati di caricamento per icone */
.rme-custom-folder-icon[src=""],
.rme-custom-folder-icon:not([src]) {
opacity: 0;
display: none;
}

.rme-custom-folder-icon:not([src=""]) {
opacity: 1;
}

/* Fallback per icone */
.rme-icon-fallback {
display: none;
font-size: 32px;
}

.rme-custom-folder-icon:not([src]) + .rme-icon-fallback,
.rme-custom-folder-icon[src=""] + .rme-icon-fallback {
display: block;
}

/* Effetti hover per icone personalizzate */
.rme-folder:hover .rme-icon-container {
transform: scale(1.1);
}

.rme-folder:hover .rme-custom-folder-icon {
filter: brightness(0) saturate(100%) hue-rotate(15deg);
}

/* === PREVIEW E THUMBNAILS === */
.rme-preview {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 4px;
margin-bottom: 8px;
background: #f9f9f9;
padding: 0;
}

.rme-item.rme-image .rme-preview,
.rme-item.rme-video .rme-preview {
background: #f0f8ff;
}

.rme-item[style*="aspect-ratio"] .rme-preview {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}

/* Thumbnails */
.rme-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
transition: all 0.3s ease;
}

.rme-thumbnail[src=""] {
opacity: 0;
}

.rme-preview img,
.rme-preview canvas {
width: 100%;
height: 100%;
object-fit: inherit;
}

/* === VIDEO THUMBNAILS === */
.rme-video-thumbnail {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}

.rme-video-canvas {
width: 100% !important;
height: 100% !important;
max-width: 100%;
max-height: 100%;
border-radius: 4px;
object-fit: cover;
}

.rme-play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
pointer-events: none;
transition: background-color 0.3s ease;
}

.rme-video-thumbnail:hover .rme-play-overlay {
background: rgba(0, 0, 0, 0.9);
}

/* === LIGHTBOX === */
.rme-lightbox {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.9) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
z-index: 9999 !important;
padding: 20px !important;
box-sizing: border-box !important;
cursor: pointer;
}

/* Contenitore principale lightbox */
.rme-lightbox > * {
display: block !important;
width: 100% !important;
text-align: center !important;
}

.rme-lightbox > div:first-child,
.rme-lightbox-content {
position: relative !important;
max-width: 90% !important;
max-height: 80% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 20px auto !important;
cursor: default;
}

.rme-lightbox img,
.rme-lightbox video {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
border-radius: 8px !important;
cursor: default;
}

/* Titolo lightbox */
.rme-lightbox span:not(.rme-player-close):not([onclick]):not([style*="position: absolute"]),
.rme-lightbox p:not([onclick]):not([style*="position: absolute"]),
.rme-lightbox div:last-child:not([onclick]):not([style*="position: absolute"]) {
color: white !important;
text-align: center !important;
font-size: 16px !important;
font-weight: 500 !important;
margin: 20px auto 0 auto !important;
padding: 0 !important;
max-width: 90% !important;
word-wrap: break-word !important;
position: static !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
box-shadow: none !important;
transform: none !important;
display: block !important;
clear: both !important;
}

/* Nascondi pulsanti di chiusura */
.rme-lightbox button,
.rme-lightbox .rme-lightbox-close,
.rme-lightbox [class*="close"],
.rme-lightbox [onclick*="close"],
.rme-lightbox input[type="button"],
.rme-lightbox input[type="submit"],
.rme-lightbox .rme-player-close,
.rme-lightbox span.rme-player-close {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}

/* === LOADING ANIMATIONS === */
.rme-loading-spinner::after {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #333;
border-radius: 50%;
animation: rme-spin 1s linear infinite;
margin-left: 10px;
}

.rme-loading-dots::after {
content: '...';
animation: rme-dots 1.5s steps(4, end) infinite;
}

.rme-loading-pulse {
animation: rme-pulse 2s ease-in-out infinite;
}

/* === SCROLLBAR PERSONALIZZATA === */
.rocketmedia-explorer[style*="height"] .rme-content::-webkit-scrollbar {
width: 8px;
}

.rocketmedia-explorer[style*="height"] .rme-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}

.rocketmedia-explorer[style*="height"] .rme-content::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}

.rocketmedia-explorer[style*="height"] .rme-content::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}

/* === ANIMAZIONI === */
@keyframes rme-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@keyframes rme-dots {
0%, 20% { content: '.'; }
40% { content: '..'; }
60% { content: '...'; }
80%, 100% { content: ''; }
}

@keyframes rme-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

@keyframes rme-icon-appear {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}

/* === RESPONSIVE DESIGN === */
/* Desktop Large */
@media (max-width: 1024px) {
.rme-content:not([style*="grid-template-columns"]) {
grid-template-columns: repeat(3, 1fr);
}
}

/* Tablet */
@media (max-width: 768px) {
.rme-content:not([style*="grid-template-columns"]) {
grid-template-columns: repeat(2, 1fr);
}

.rme-content {
gap: 10px;
}

.rme-preview {
height: 60px;
}

.rme-custom-folder-icon {
width: 24px;
height: 24px;
}

/* Container responsive */
.rme-width-boxed,
.rme-width-custom {
margin-left: 10px !important;
margin-right: 10px !important;
width: calc(100% - 20px) !important;
}

/* Lightbox responsive */
.rme-lightbox {
padding: 10px !important;
}

.rme-lightbox > div:first-child,
.rme-lightbox-content {
max-height: 70% !important;
margin-bottom: 15px !important;
}

.rme-lightbox span:not(.rme-player-close):not([onclick]),
.rme-lightbox p:not([onclick]) {
font-size: 14px !important;
margin-top: 15px !important;
}
}

/* Mobile */
@media (max-width: 480px) {
.rme-content:not([style*="grid-template-columns"]) {
grid-template-columns: repeat(1, 1fr);
}

.rme-breadcrumb {
gap: 5px;
}

.rme-custom-folder-icon {
width: 20px;
height: 20px;
}

/* Container responsive */
.rme-width-boxed,
.rme-width-custom {
margin-left: 5px !important;
margin-right: 5px !important;
width: calc(100% - 10px) !important;
}

.rme-lightbox span:not(.rme-player-close):not([onclick]),
.rme-lightbox p:not([onclick]) {
font-size: 12px !important;
}
}