/* ============================================================================
   STYLES POUR LES DATES
   ============================================================================ */
@media (min-width: 768px) {
    .date-mobile {
        display: none;
    }
}

@media (max-width: 767px) {
    .date-desktop {
        display: none;
    }
    .date-mobile {
        display: inline;
        line-height: 1.3;
    }
}

/* ============================================================================
   STYLES POUR LE TABLEAU
   ============================================================================ */
.col-center {
    text-align: center;
}

.col-actions-header {
    width: 25%;
}

.col-date,
.col-taille,
.col-vues {
    text-align: center;
}

.col-actions {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

/* ============================================================================
   STYLES POUR LE FORMULAIRE D'UPLOAD
   ============================================================================ */
.upload-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.upload-title {
    margin-top: 0;
    margin-bottom: 15px;
}

.drop-zone {
   
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

body[data-theme="green"] .drop-zone {
    border: 2px dashed var(--jabs) !important;
	
}

/* Thème Orange */
body[data-theme="orange"] .drop-zone {
    border: 2px dashed var(--jabs) !important;
}

/* Thème Red */
body[data-theme="red"] .drop-zone {
   border: 2px dashed var(--jabs) !important;
}

/* Thème Bleu */
body[data-theme="blue"] .drop-zone{
     border: 2px dashed var(--jabs) !important;
}

/* Thème Purple */
body[data-theme="purple"] .drop-zone {
    border: 2px dashed var(--jabs) !important;
}
/* Thème Black */
body[data-theme="black"] .drop-zone {
    border: 2px dashed var(--jabs) !important;
}

.drop-zone.drag-active {
    border-color: #1a6b1a;
    background-color: #e8f5e9;
    transform: scale(1.02);
}

.upload-icon {
    margin-bottom: 10px;
}

.drop-text-main {
    margin: 10px 0;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.drop-text-or {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.file-label {
    display: inline-block;
    padding: 10px 30px;

    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
   box-shadow: 0 3px 6px #0000003d;
    margin-top: 10px;
}
body[data-theme="green"] .file-label {
    background: var(--backg) !important;
	
}

/* Thème Orange */
body[data-theme="orange"] .file-label {
    background:var(--backg) !important;
}

/* Thème Red */
body[data-theme="red"] .file-label {
    background:var(--backg) !important;
}

/* Thème Bleu */
body[data-theme="blue"] .file-label{
     background: var(--backg) !important;
}

/* Thème Purple */
body[data-theme="purple"] .file-label {
    background:var(--backg) !important;
}
/* Thème Black */
body[data-theme="black"] .file-label {
    background: var(--backg) !important;
}




.file-label:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px #0000003d;
}

.file-input {
    display: none;
}

.selected-files {
    margin-top: 15px;
    font-size: 13px;
    color: #666;
}

.submit-button {
    width: 100%;
    padding: 12px;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px #0000003d;
}
body[data-theme="green"] .submit-button {
    background: var(--backg) !important;
	
}

/* Thème Orange */
body[data-theme="orange"] .submit-button {
    background:var(--backg) !important;
}

/* Thème Red */
body[data-theme="red"] .submit-button {
    background:var(--backg) !important;
}

/* Thème Bleu */
body[data-theme="blue"] .submit-button {
     background: var(--backg) !important;
}

/* Thème Purple */
body[data-theme="purple"] .submit-button {
    background:var(--backg) !important;
}
/* Thème Black */
body[data-theme="black"] .submit-button {
    background: var(--backg) !important;
}


body[data-theme="green"] .submit-button:hover {
     box-shadow: 0 5px 10px  var(--backg) !important;
}

/* Thème Orange */
body[data-theme="orange"] .submit-button:hover {
    box-shadow: 0 5px 10px var(--backg) !important;
}

/* Thème Red */
body[data-theme="red"] .submit-button:hover {
     box-shadow: 0 5px 10px var(--backg) !important;
}

/* Thème Bleu */
body[data-theme="blue"] .submit-button:hover {
     box-shadow: 0 5px 10px  var(--backg) !important;
}

/* Thème Purple */
body[data-theme="purple"] .submit-button:hover {
     box-shadow: 0 5px 10px var(--backg) !important;
}
/* Thème Black */
body[data-theme="black"] .submit-button:hover {
     box-shadow: 0 5px 10px  var(--backg) !important;
}

.submit-button:hover {
    transform: translateY(-2px);
    
}

.message-container {
    margin-top: 15px;
}

/* ============================================================================
   STYLES POUR LES MESSAGES
   ============================================================================ */
.message {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid;
}

.message-warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeaa7;
}

.message-info {
    background-color: #cfe2ff;
    color: #084298;
    border-color: #b6d4fe;
}

.message-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

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

.error-label {
    color: #856404;
}

$cssMobile = '<style>
.table { width:100%; }
@media (max-width: 600px) {
    /* tableau défilable horizontalement au lieu d\'écraser les colonnes */
    .jabs-content, .jabs-panel, .lab-content, [class*="lab"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table {
        table-layout: auto !important;
        min-width: 520px;
    }
    .table th, .table td {
        padding: 6px 4px !important;
        font-size: 13px !important;
    }
    .table th { font-size: 14px !important; white-space: nowrap; }
    .table td.col-nom {
        white-space: normal;
        min-width: 160px;
        word-break: break-word;
    }
    /* cacher la colonne Date sur mobile */
    .table th:nth-child(3), .table td.col-date { display:none; }
    .table td img { width: 26px !important; height: 26px !important; }
}
</style>' . "\n";