/* ============================================================
   docpanel.css
   Widget "Documenti" dello Smart Panel: anteprima documento IDM del record
   corrente + pager + scarica/apri/upload. Stessa cornice grafica del widget
   chat (vp-chatsidebar): pannello a sinistra del rail, larghezza unica
   --vp-smart-panel-width, header 12/16, iconbtn 30x30.
   Le regole trasversali dello Smart Panel (push body in pinned, display:none
   quando nascosto, offset popup header) sono centralizzate in side-rail.css.
   ============================================================ */

.vp-docpanel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1080;
}

.vp-docpanel {
    position: fixed;
    top: 0;
    right: var(--vp-rail-width, 48px);
    bottom: 0;
    width: 100%;
    max-width: var(--vp-smart-panel-width, 420px);
    background: #ffffff;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.18);
    z-index: 1081;
    display: flex;
    flex-direction: column;
}

.vp-docpanel-pinned {
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.12);
    border-left: 3px solid #0078d4;
}

/* Il widget Documenti si apre senza animazione (uniforme agli altri widget). */

.vp-docpanel-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e1e1e1;
}

.vp-docpanel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.vp-docpanel-actions {
    display: flex;
    gap: 4px;
}

.vp-docpanel-iconbtn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.vp-docpanel-iconbtn:hover {
    background: #f3f4f6;
    color: #111;
}

.vp-docpanel-iconbtn.is-active {
    background: #0078d4;
    color: #ffffff;
    border-color: #0078d4;
}

.vp-docpanel-iconbtn.is-active:hover {
    background: #0064b3;
    color: #ffffff;
}

.vp-docpanel-body {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.vp-docpanel-status {
    padding: 24px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.vp-docpanel-status-error {
    color: #b91c1c;
}

.vp-docpanel-preview {
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    background: #f8f9fa;
    min-height: 0;
}

.vp-docpanel-preview img {
    max-width: 100%;
    height: auto;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.vp-docpanel-preview-fallback {
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.vp-docpanel-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #e1e1e1;
}

.vp-docpanel-fileinfo {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vp-docpanel-filename {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 230px;
}

.vp-docpanel-filesize {
    font-size: 11px;
    color: #6b7280;
}

.vp-docpanel-fileactions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.vp-docpanel-btn {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.vp-docpanel-btn:hover {
    background: #f3f4f6;
}

.vp-docpanel-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.vp-docpanel-btn-primary {
    background: #0078d4;
    border-color: #0078d4;
    color: #ffffff;
}

.vp-docpanel-btn-primary:hover {
    background: #0064b3;
}

.vp-docpanel-btn-primary:disabled {
    background: #0078d4;
}

.vp-docpanel-pager {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid #e1e1e1;
}

.vp-docpanel-pagerbtn {
    min-width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    font-size: 13px;
}

.vp-docpanel-pagerbtn:hover {
    background: #f3f4f6;
}

.vp-docpanel-pagerbtn:disabled {
    opacity: 0.4;
    cursor: default;
}

.vp-docpanel-pagerlabel {
    font-size: 13px;
    color: #374151;
    padding: 0 6px;
}

/* ---- Upload inline ---- */
.vp-docpanel-body.is-dragover {
    outline: 2px dashed #0078d4;
    outline-offset: -8px;
    background: rgba(0, 120, 212, 0.04);
}

.vp-docpanel-upload {
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.vp-docpanel-upload-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.vp-docpanel-select {
    width: 100%;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 13px;
    background: #ffffff;
    color: #111827;
}

.vp-docpanel-droparea {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 12px;
    border: 1px dashed #c7ccd1;
    border-radius: 8px;
    background: #f8f9fa;
    color: #6b7280;
    text-align: center;
}

.vp-docpanel-drophint {
    font-size: 13px;
}

/* InputFile sovrapposto trasparente: gestisce il click (file picker). */
.vp-docpanel-fileinput {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.vp-docpanel-pendingfile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background: #f8f9fa;
}

.vp-docpanel-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

[data-vp-theme="dark"] .vp-docpanel-upload-label,
[data-bs-theme="dark"] .vp-docpanel-upload-label {
    color: #b8c1cf;
}

[data-vp-theme="dark"] .vp-docpanel-select,
[data-bs-theme="dark"] .vp-docpanel-select {
    background: #15181e;
    border-color: #353a45;
    color: #e5e9f0;
}

[data-vp-theme="dark"] .vp-docpanel-droparea,
[data-bs-theme="dark"] .vp-docpanel-droparea,
[data-vp-theme="dark"] .vp-docpanel-pendingfile,
[data-bs-theme="dark"] .vp-docpanel-pendingfile {
    background: #0f1115;
    border-color: #353a45;
    color: #b8c1cf;
}

/* ============================================================
   DARK MODE (coerente con chatsidebar.css)
   ============================================================ */

[data-vp-theme="dark"] .vp-docpanel,
[data-bs-theme="dark"] .vp-docpanel {
    background: #1e293b;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.55);
}

[data-vp-theme="dark"] .vp-docpanel-overlay,
[data-bs-theme="dark"] .vp-docpanel-overlay {
    background: rgba(0, 0, 0, 0.55);
}

[data-vp-theme="dark"] .vp-docpanel-pinned,
[data-bs-theme="dark"] .vp-docpanel-pinned {
    border-left-color: #4dabf7;
}

[data-vp-theme="dark"] .vp-docpanel-header,
[data-bs-theme="dark"] .vp-docpanel-header,
[data-vp-theme="dark"] .vp-docpanel-footer,
[data-bs-theme="dark"] .vp-docpanel-footer,
[data-vp-theme="dark"] .vp-docpanel-pager,
[data-bs-theme="dark"] .vp-docpanel-pager {
    border-color: #334155;
}

[data-vp-theme="dark"] .vp-docpanel-title,
[data-bs-theme="dark"] .vp-docpanel-title,
[data-vp-theme="dark"] .vp-docpanel-filename,
[data-bs-theme="dark"] .vp-docpanel-filename {
    color: #e5e9f0;
}

[data-vp-theme="dark"] .vp-docpanel-iconbtn,
[data-bs-theme="dark"] .vp-docpanel-iconbtn,
[data-vp-theme="dark"] .vp-docpanel-btn,
[data-bs-theme="dark"] .vp-docpanel-btn,
[data-vp-theme="dark"] .vp-docpanel-pagerbtn,
[data-bs-theme="dark"] .vp-docpanel-pagerbtn,
[data-vp-theme="dark"] .vp-docpanel-pagerlabel,
[data-bs-theme="dark"] .vp-docpanel-pagerlabel {
    color: #b8c1cf;
}

[data-vp-theme="dark"] .vp-docpanel-btn,
[data-bs-theme="dark"] .vp-docpanel-btn,
[data-vp-theme="dark"] .vp-docpanel-pagerbtn,
[data-bs-theme="dark"] .vp-docpanel-pagerbtn {
    background: #15181e;
    border-color: #353a45;
}

[data-vp-theme="dark"] .vp-docpanel-iconbtn:hover,
[data-bs-theme="dark"] .vp-docpanel-iconbtn:hover,
[data-vp-theme="dark"] .vp-docpanel-btn:hover,
[data-bs-theme="dark"] .vp-docpanel-btn:hover,
[data-vp-theme="dark"] .vp-docpanel-pagerbtn:hover,
[data-bs-theme="dark"] .vp-docpanel-pagerbtn:hover {
    background: #334155;
    color: #ffffff;
}

[data-vp-theme="dark"] .vp-docpanel-btn-primary,
[data-bs-theme="dark"] .vp-docpanel-btn-primary,
[data-vp-theme="dark"] .vp-docpanel-iconbtn.is-active,
[data-bs-theme="dark"] .vp-docpanel-iconbtn.is-active {
    background: #1971c2;
    border-color: #1971c2;
    color: #ffffff;
}

[data-vp-theme="dark"] .vp-docpanel-preview,
[data-bs-theme="dark"] .vp-docpanel-preview {
    background: #0f1115;
}

[data-vp-theme="dark"] .vp-docpanel-preview img,
[data-bs-theme="dark"] .vp-docpanel-preview img {
    background: #15181e;
}