/* Style pour la page de gestion des documents - Style CNEJI */
:root {
	--bleu:#4865AB;
	--gris:#D0D3D8;
}
.lbs-documents-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Message de connexion requis */
.documents-login-required {
    text-align: center;
    padding: 3rem;
    background: #f3f4f6;
    border-radius: 8px;
    margin: 2rem auto;
    max-width: 600px;
}

.documents-login-required p {
    font-size: 1.125rem;
    color: #374151;
    margin-bottom: 1.5rem;
}

.btn-login {
    display: inline-block;
    background: var(--bleu);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-login:hover {
    background: #4a5a87;
}


/* Container principal */
.documents-container {
    display: flex;
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2rem 3rem;
}

/* Sidebar gauche */
.documents-sidebar {
    width: 373px;;
    flex-shrink: 0;
    height: fit-content;
    position: sticky;
}

.colbleue {
	background: #d0d3d8;
	border-radius: 29px;
	padding: 40px;
}

/* Bouton ajouter document */
.btn-add-document {
    display: flex;
    align-items: center;
    gap: 20px;
	padding: 0 25px;
    background: var(--bleu);
    color: white;
    border: none;
    border-radius: 29px;
    cursor: pointer;
	font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s;
    margin-bottom: 40px;
	height: 56px;
	text-transform: none;
    letter-spacing: normal;
    width: 100%;
}

.btn-add-document:hover {
    background: #4a5a87;
	color: #FFFFFF;
}

.btn-add-document svg {
    flex-shrink: 0;
}

/* Navigation des filtres */
.documents-nav a {
    display: block;
    padding: 12px 9px;
    color: var(--bleu);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.2s;
}

.documents-nav a:hover, .documents-nav a.current {
    color: #fff;
	background-color: var(--bleu);
}

.colbleue hr {
	margin-bottom: 40px;
    padding-bottom: 30px;
    border: 0;
    border-bottom: 2px solid #fff;
    margin-top: 0;
}

/* Sections de filtres */
.filter-section {
    margin-bottom: 2rem;
}

.filter-section h3 {
    font-size: 20px;
    color: var(--bleu);
    margin: 0 0 20px 0;
}

.filter-checkboxes {
    margin-bottom: 20px;
    position: relative;

    &.limited-height {
        /*limité à 30 items pour éviter que la sidebar devienne trop longue*/
        max-height: 775px;
        overflow: hidden;

        #show-more-tags {
            display: block;
        }
    }

    #show-more-tags {
        height: 20px;
        display: none;
        position: absolute;
        bottom: 0;
        width: 100%;
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-0.5,-1249.5)"><g transform="matrix(0.1,0,0,-0.1,0,1280)"><g transform="matrix(0.023458,0,0,0.023453,4.882712,4.882735)"><path d="M6095,12794C4851,12728 3687,12324 2690,11614C1447,10728 561,9429 191,7952C114,7646 57,7307 23,6955C-1,6703 -1,6097 23,5845C104,5011 305,4292 661,3569C1491,1885 3025,647 4848,191C5154,114 5493,57 5845,23C6097,-1 6703,-1 6955,23C7789,104 8508,305 9231,661C11015,1540 12300,3217 12679,5160C12765,5599 12794,5915 12794,6400C12794,6803 12783,6971 12734,7310C12518,8820 11769,10202 10624,11207C9593,12111 8342,12647 6965,12775C6803,12790 6249,12802 6095,12794ZM6858,11754C8737,11601 10416,10445 11239,8738C11529,8137 11695,7532 11756,6858C11776,6628 11776,6172 11756,5942C11641,4661 11101,3501 10200,2600C9299,1700 8139,1159 6858,1044C6628,1024 6172,1024 5942,1044C5269,1105 4662,1271 4062,1561C2459,2334 1334,3867 1080,5627C1010,6115 1010,6685 1080,7173C1334,8930 2456,10462 4055,11236C4937,11662 5871,11835 6858,11754Z" style="fill:rgb(72,101,171);fill-rule:nonzero;"/></g></g><g transform="matrix(0.1,0,0,-0.1,0,1280)"><g transform="matrix(0.023458,0,0,0.023453,4.882712,4.882735)"><path d="M5235,10216C5180,10190 5141,10156 5107,10101L5085,10065L5075,5835L4555,5830C4186,5826 4027,5822 4009,5813C3884,5757 3830,5583 3897,5451C3915,5415 4325,4915 5074,4015C5706,3256 6232,2627 6244,2617C6331,2542 6469,2542 6556,2617C6568,2627 7094,3256 7726,4015C8475,4915 8885,5415 8903,5451C8970,5583 8916,5757 8791,5813C8773,5822 8614,5826 8245,5830L7725,5835L7715,10065L7693,10101C7659,10156 7620,10190 7565,10216L7515,10240L5285,10240L5235,10216Z" style="fill:rgb(72,101,171);fill-rule:nonzero;"/></g></g></g></svg>');
        background-repeat: no-repeat no-repeat;
        background-position: center center;
        background-size: 20px;
        background-color: #d0d3d8;
        border: 0;
        margin:0;
    }
    #show-more-tags.expanded {
        transform: rotate(180deg);
        position: relative;
        display: block;
    }
    
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--bleu);
	font-weight: normal;
	font-size: 16px;
	margin-bottom: 8px;
}

.filter-checkbox input[type="checkbox"] {
    width: 12px;
	height: 12px;
	border: 1px solid var(--bleu);
	border-radius: 3px;
    cursor: pointer;
	margin-bottom: 0;
}

/* Contenu principal */
.documents-main {
    flex: 1;
    min-width: 0;
    position: relative;

	& > .row:first-child {
		padding-top: 0;
	}
}

/* Barre de recherche */
.documents-search-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-content: center;
    margin-bottom: 40px;
    background: white;
    border: 1px solid var(--bleu);
    border-radius: 29px;
    padding: 0 24px;
    height: 54px;
}

#document-search {
    flex: 1;
    border: none;
    font-size: 16px;
    outline: none;
	margin: 0;
}

#document-search::placeholder {
    color: #9ca3af;
}

.btn-search {
    padding: 0;
    color: var(--bleu);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-bottom: 0;
	height: 38px;
	width: 30px;
}

.btn-search:hover {
    background: #4a5a87;
}

.btn-search svg {
    display: block;
}

/* Section documents */
.documents-main .documents-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bleu);
	text-transform: none;
	margin: 0 0 40px 0;
}

/* Liste des documents */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Item de document */
.document-item {
    display: flex;
    gap: 1.5rem;
    background: white;
    transition: all 0.2s;
	margin-bottom: 25px;
}

.document-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.document-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.document-icon svg {
    stroke: currentColor;
}

.document-content {
    flex: 1;
    min-width: 0;
}

.document-title {
    margin: 0 0 0.75rem 0;
    font-size: 18px;
    font-weight: 600;
	text-decoration: underline;
}

.document-title a {
    color: var(--bleu);
    text-decoration: none;
    transition: color 0.2s;
}

.document-title a:hover {
    color: #4a5a87;
}

.document-meta {
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--bleu);
}

.meta-item {
	display: block;
	margin-bottom: 5px;
}

.meta-item strong {
    font-weight: bold;
}

.document-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: var(--gris);
    color: var(--bleu);
    border-radius: 18px;
    font-size: 14px;
    font-weight: normal;
}

/* Pagination */
.documents-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border: 1px solid var(--bleu);
    border-radius: 50%;
    color: var(--bleu);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s;
}

.page-link:hover, .page-link.active {
    background: var(--bleu);
    color: #FFF;
}

.page-dots {
    color: var(--bleu);
    padding: 0 0.5rem;
}

/* Formulaire d'ajout de document */
.document-upload-form {
    background: #4865AB1A;
    padding: 40px;
    border-radius: 29px;
    position: relative;
}

#btn-ferme-form {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-1249.85228,-1249.862742)"><g transform="matrix(0.1,0,0,-0.1,0,1280)"><g transform="matrix(0.023449,0,0,0.023447,12498.405555,1.340393)"><path d="M1545,12784C1460,12765 1378,12733 1302,12689C1233,12648 213,11640 145,11545C44,11404 5,11282 5,11105C5,10936 41,10812 130,10678C159,10635 835,9952 2279,8508L4385,6400L2274,4288C918,2930 150,2155 127,2119C39,1982 6,1870 6,1700C5,1519 43,1398 145,1255C213,1160 1233,152 1302,111C1575,-48 1906,-32 2155,153C2177,170 3141,1129 4298,2284L6400,4385L8503,2284C9659,1129 10623,170 10645,153C10714,102 10775,71 10869,40C11077,-30 11300,-4 11498,111C11567,152 12587,1160 12655,1255C12756,1396 12795,1518 12795,1695C12795,1861 12759,1985 12674,2117C12649,2156 11928,2884 10526,4288L8415,6400L10522,8508C12729,10716 12684,10669 12741,10811C12816,10998 12818,11203 12745,11383C12692,11515 12671,11540 12130,12083C11841,12374 11578,12631 11545,12655C11404,12756 11282,12795 11105,12795C10939,12795 10816,12760 10685,12675C10644,12649 9961,11973 8513,10526L6400,8415L4288,10526C2834,11978 2156,12649 2115,12676C2051,12717 1966,12754 1885,12777C1806,12799 1627,12803 1545,12784Z" style="fill:rgb(72,101,171);fill-rule:nonzero;"/></g></g></g></svg>');    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px;
    padding:0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: var(--bleu);
    margin-bottom: 10px;
}

.form-group label.filter-checkbox {
    font-weight: normal;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--bleu);
    border-radius: 6px;
    font-size: 16px;
}

.form-group input[type="date"] {
	width: 150px;
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #5b6fa8;
    box-shadow: 0 0 0 3px rgba(91, 111, 168, 0.1);
}

.form-group textarea {
    resize: vertical;
	height: 180px;
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    font-size: 14px;
    color: #6b7280;
    font-style: italic;
}

/* Upload de fichier personnalisé */
.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3px;
}

.file-upload-wrapper input[type="file"] {
    display: none;
}

.btn-browse {
    padding: 4px 10px;
    background: #585965;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 14px;
    margin-bottom: 0;
    height: auto;
    text-transform: none;
    letter-spacing: normal;
}

.btn-browse:hover {
    background: #4b5563;
}

.file-name {
    font-size: 14px;
    color: #6b7280;
}

/* Ligne avec deux colonnes */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 20px;
}

.form-col {
    margin-bottom: 0;
}

.form-group .checkbox-group {
    display: flex;
    flex-wrap: wrap;
}
.form-group label {
    width: calc(33.3333% - 10px);
}
.col-tags #show-more-tags{
    display: none;
}

/* Groupes de checkboxes */
.form-group.form-col > label {
	font-size: 18px;
}
.checkbox-group {
	background: none;
}

.form-group .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
	font-weight: normal;
	margin-bottom: 2px;
}

.checkbox-label input[type="checkbox"] {
    width: 12px;
    height: 12px;
	border-radius: 3px;
	border: 1px solid var(--bleu);
    cursor: pointer;
	margin: 0 5px 0 0;
}

/* Messages du formulaire */
.form-message {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 14px;
}

.form-message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.form-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Actions du formulaire */
.form-actions {
    display: flex;
    justify-content: flex-end;
}

.btn-submit {
    padding: 4px 10px;
    background: var(--bleu);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 22px;
    text-transform: none;
}

.btn-submit:hover {
    background: #4a5a87;
}

.btn-submit:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Responsive pour le formulaire */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Message "Aucun document" */
.no-documents {
    text-align: center;
    padding: 3rem;
    background: var(--gris);
    border-radius: 8px;
    color: var(--bleu);
}

.no-documents p {
    font-size: 18px;
    margin: 0;
}

/* Loader */
.documents-loader {
    text-align: center;
    padding: 2rem;
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
}

.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top-color: #5b6fa8;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .documents-container {
        flex-direction: column;
    }
    
    .documents-sidebar {
        width: 100%;
        position: static;
    }
    
    .documents-banner h1 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .documents-container {
        padding: 0 1rem 2rem;
    }
    
    .documents-banner {
        padding: 2rem 1rem;
    }
    
    .documents-banner h1 {
        font-size: 1.75rem;
        padding-left: 0;
    }
    
    .document-item {
        flex-direction: column;
        gap: 1rem;
    }
    
    .document-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .documents-search-bar {
        border-radius: 8px;
    }
}