@charset "UTF-8";
/* ============================================
   DOCUMENT UPLOAD FIELD ON GRID ADD ELEMENT 
   ============================================ */

/* Container principal */
.document-upload-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* ========================================
   SECTION 1 : Field File
   ======================================== */

.document-upload-container > .x-form-file-wrap:first-child {
    position: relative !important;
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    border: 1px solid #D1D5DB !important;
    box-sizing: border-box !important;
}

.document-upload-container > .x-form-file-wrap:first-child input[type="text"].x-form-file-text {
    flex: 1 !important;
    width: 1px !important;
    min-width: 0 !important;
    height: 38px !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 10px 44px 10px 12px !important;
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}

.document-upload-container > .x-form-file-wrap:first-child input[type="text"].x-form-file-text:hover,
.document-upload-container > .x-form-file-wrap:first-child input[type="text"].x-form-file-text:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.document-upload-container > .x-form-file-wrap:first-child input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
}

.document-upload-container > .x-form-file-wrap:first-child .document-delete-btn {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

.document-upload-container > .x-form-file-wrap:first-child .document-delete-btn,
.document-upload-container > .x-form-file-wrap:first-child .document-delete-btn .lib span,
.document-upload-container > .x-form-file-wrap:first-child .document-delete-btn .halflings {
    color: #DC2626 !important;
}

.document-upload-container > .x-form-file-wrap:first-child .document-delete-btn:hover {
    background-color: #FEE2E2 !important;
}

.document-upload-container > .x-form-file-wrap:first-child .document-delete-btn button {
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.document-upload-container .document-download-row {
    margin-top: -10px !important;
}
.document-upload-container .document-download-row .document-download-btn,
.ls-file-viewmode .document-download-btn {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    cursor: pointer !important;
    background-color: rgba(255,255,255,0.9) !important;
    border: 1px solid #93C5FD !important;
    border-radius: 8px !important;
}

.document-upload-container .document-download-row .document-download-btn:hover,
.ls-file-viewmode .document-download-btn:hover {
    border-color: #3B82F6 !important;
    background-color: #EFF6FF !important;
}

.document-upload-container .document-download-row .document-download-btn button,
.ls-file-viewmode .document-download-btn button {
    background: url("../gxt/themes/legalsuite/images/legalsuite/button/glyphicon-download.png") no-repeat scroll 8px center transparent !important;
    background-size: 16px 16px !important;
    padding-left: 28px !important;
    color: #1E40AF !important;
}

.ls-file-viewmode .document-download-btn {
    margin-left: 10px !important;
    margin-top: -40px !important;
}

/* ========================================
   SECTION 2 : UPLOAD Zone under the document field
   ======================================== */

/* Zone d'upload : [ drag-drop | GDrive et Gmail ] */
.document-upload-zone {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 98% !important;
    border: 2px dashed #304287 !important;
    border-radius: 8px;
    align-items: stretch !important;
    background-color: white !important;
    padding: 10px !important;
    position: relative !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.document-upload-zone .document-upload-drop-zone {
    pointer-events: auto !important;
}

.document-upload-zone .document-upload-drop-zone .document-add-file-btn {
    pointer-events: auto !important;
}

/* Zone "Ajouter document" (drop) : blue Background */
.document-upload-drop-zone {
    flex: 1 !important;
    min-height: 120px !important;
    background-color: #EEF4FF !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px !important;
}

.document-upload-drop-zone.document-drag-over {
    border-color: #2563EB !important;
    background-color: #93C5FD !important;
}

.document-upload-drop-hint {
    font-size: 12px !important;
    color: rgb(140, 140, 140) !important;
}

.document-upload-drop-zone .document-add-file-btn {
    background-color: rgba(255,255,255,0.9) !important;
    border: 1px solid #93C5FD !important;
    border-radius: 8px !important;
}

.document-upload-drop-zone .document-add-file-btn button {
    background: url("../gxt/themes/legalsuite/images/legalsuite/button/glyphicon-upload.png") no-repeat scroll 10px center transparent !important;
    background-size: 16px 16px !important;
    padding-left: 34px !important;
    color: #1E40AF !important;
}

.document-upload-drop-zone .document-add-file-btn:hover {
    border-color: #3B82F6 !important;
    background-color: #EFF6FF !important;
}

/* External buttons row (GDrive, Gmail) - displayed below the dashed upload zone */
.document-upload-container .document-external-row {
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    margin-top: 4px !important;
}

.document-upload-container .document-external-row .document-siblings-wrap {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 12px !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.document-upload-container .document-external-row .document-siblings-wrap[style] {
    height: auto !important;
}

.document-upload-container .document-external-row .document-siblings-wrap table {
    width: 100% !important;
}

.document-upload-container .document-external-row .document-siblings-wrap td {
    width: 100% !important;
}

.document-upload-container .document-external-row .document-siblings-wrap .x-form-group {
    width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.document-upload-container .document-siblings-wrap .x-form-group table,
.document-upload-container .document-siblings-wrap .x-form-group tbody,
.document-upload-container .document-siblings-wrap .x-form-group tr,
.document-upload-container .document-siblings-wrap .x-form-group td {
    height: auto !important;
    min-height: 0 !important;
    border: none !important;
}

.document-upload-container .document-siblings-wrap .x-form-group td:first-child {
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.document-upload-container .document-siblings-wrap .x-form-group input[type="hidden"] {
    display: none !important;
}

.document-upload-container .document-external-row .document-siblings-wrap .ls-button,
.document-upload-container .document-external-row .document-siblings-wrap .document-gdrive-button .ls-button,
.document-upload-container .document-external-row .document-siblings-wrap .document-gmail-button .ls-button {
    width: 100% !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.document-upload-container .document-external-row .document-siblings-wrap .ls-button:hover,
.document-upload-container .document-external-row .document-siblings-wrap .document-gdrive-button .ls-button:hover,
.document-upload-container .document-external-row .document-siblings-wrap .document-gmail-button .ls-button:hover {
    border-color: #3B82F6 !important;
    background-color: #EFF6FF !important;
    box-shadow: none !important;
}

.document-upload-container .document-external-row .document-siblings-wrap .ls-button button {
    background-color: rgba(255,255,255,0.9) !important;
    border: 1px solid #93C5FD !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

/* Icônes GDrive / Gmail */
.document-upload-container .document-siblings-wrap .ls-button .lib {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
}

.document-upload-container .document-siblings-wrap .ls-button .lib span {
    font-size: 16px !important;
}

.document-upload-container .document-external-row .document-siblings-wrap .ls-button button.ls-google-drive,
.document-upload-container .document-external-row .document-siblings-wrap .document-gdrive-button .ls-button button.ls-google-drive {
    background: url("../gxt/themes/legalsuite/images/legalsuite/pictos/gdrive.png") no-repeat scroll 4px center transparent !important;
    background-size: 20px 20px;
    padding-left: 26px !important;
}
.document-upload-container .document-external-row .document-siblings-wrap .ls-button button.ls-gmail,
.document-upload-container .document-external-row .document-siblings-wrap .document-gmail-button .ls-button button.ls-gmail {
    background: url("../gxt/themes/legalsuite/images/legalsuite/pictos/gmail.png") no-repeat scroll 4px center transparent !important;
    background-size: 20px 20px;
    padding-left: 26px !important;
}

.document-upload-container .document-external-row .document-siblings-wrap .ls-button button.ls-google-drive .lib,
.document-upload-container .document-external-row .document-siblings-wrap .ls-button button.ls-gmail .lib {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.document-upload-container .document-external-row .document-siblings-wrap .document-external-label {
    margin-left: 6px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* ========================================
   OVERRIDE DES STYLES INLINE DE GXT
   ======================================== */


.document-upload-container .document-siblings-wrap[style*="height"] {
    height: auto !important;
    min-height: 0 !important;
}

.document-upload-container .document-siblings-wrap .x-form-group[style*="height"] {
    height: auto !important;
    min-height: 0 !important;
}

.document-upload-container .document-siblings-wrap .ls-button[style*="width"],
.document-upload-container .document-siblings-wrap .ls-button[style*="height"] {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

.document-upload-container .document-external-row .document-siblings-wrap .ls-button[style*="width"],
.document-upload-container .document-external-row .document-siblings-wrap .ls-button[style*="height"] {
    width: 100% !important;
    height: auto !important;
}


.x-form-item:has(.document-upload-container) > .x-form-item-label {
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
}


.document-upload-container .x-form-readonly input[type="text"].x-form-file-text {
    background-color: #F3F4F6 !important;
    cursor: not-allowed !important;
    color: #6B7280 !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .document-upload-zone {
        flex-direction: column !important;
    }
    .document-upload-container .document-external-row .document-siblings-wrap {
        flex-direction: column !important;
    }
}

.document-upload-container .document-siblings-wrap .ls-button button::after {
    font-size: 14px !important;
    color: #374151 !important;
    font-weight: 500 !important;
}