/* protocollen en beleid overzicht */

/* eigen fade-in/uit (zie _set_fade in protocol-pages.js): zelfde waarden als de
   app-brede .fadein/.fadeout in index.css, maar niet gevoelig voor de globale
   class-strip die switch_screen_by_id() bij elke schermwissel uitvoert */
.pp-fadeout{
    transition: 0.7s;
    opacity: 0% !important;
    z-index: 1;
}
.pp-fadein{
    transition: 1s;
    opacity: 100% !important;
    z-index: 10;
}

.pp-protocol-intro{
    font-size: 0.85em;
    color: #666;
    margin-bottom: 0.6em;
    margin-left:-2.5em;
    width:95%;
}
#pp-protocol-wrapper{
    position: relative;
    width: 90%;
}
.pp-protocol-row-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5em;
}
.pp-protocol-title{
    font-weight: bold;
    padding-right: 1em;
    word-break: break-word;
    font-size: 0.95em;
    margin-bottom: 0.2em;
    margin-left: -1em;
}

/* icoontjes rechts van de titel */
.pp-protocol-actions{
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-shrink: 0;
    margin-right: 1.5em;
}
.pp-protocol-status,
.pp-protocol-trash{
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
    flex-shrink: 0;
    opacity: 0;
}
.pp-protocol-status{
    background-image: url("../../img/setactive-active-icon-removebg-preview.png");
}
.pp-protocol-trash{
    background-image: url("../../img/trash-icon-removebg.png");
    cursor: pointer;
}

.pp-protocol-collapse{
    background-image: url("../../img/btn-arrow-right-removebg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
    height: 25px;
    position: relative;
    margin-top: -1.6em;
    margin-left: -3.5em;
    filter: var(--theme-icon-filter);
    cursor: pointer;
    transition: transform 0.35s ease;
}
.pp-protocol-expand{
    transform: rotate(90deg);
}

/* uitgeklapte beschrijving - faded in/uit met de app-brede .fadein / .fadeout classes */
.pp-protocol-body{
    position: relative;
    margin-top: 0.9em;
    margin-left: 0.2em;
    min-height: 50px;
    opacity: 0;
}
.pp-protocol-text{
    font-size: 0.88em;
    line-height: 1.5em;
    white-space: normal;
    cursor: pointer;
}
/* document-cirkel links van de uitgeklapte tekst, zelfde vormgeving als .inout-file-add */
.pp-protocol-doc{
    position: absolute;
    left: -3.7em;
    top: 0;
    width: 50px;
    height: 50px;
    border: 1px solid var(--theme-color);
    border-radius: 50%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    cursor: pointer;
    opacity: 0;
}
.pp-protocol-doc-themed{
    filter: var(--theme-icon-filter);
}

/* plusje onderaan de lijst om eigen beleid toe te voegen */
.pp-protocol-add-holder{
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-top: 1em;
    margin-left: -1em;
}
.pp-protocol-add-btn{
    background-image: url("../../img/plus-icon-removebg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
}
.pp-protocol-add-input{
    flex: 1;
    padding: 0.3em 0.4em;
    font-size: 0.9em;
}

.pp-protocol-hidden{
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* protocol-detail: cirkel + gegevens, robot / review / upload-acties  */
/* (class-namen zijn nog "popup-protocol-*", zie block onderaan)       */
/* ------------------------------------------------------------------ */
/* de .section-header blijft kort/vast ("Protocol"); de eigenlijke (soms
   lange) protocolnaam staat los eronder en mag gewoon afbreken */
.pd-titel{
    font-weight: bold;
    font-size: 1.15em;
    color: var(--theme-color);
    word-break: break-word;
    margin-bottom: 0.6em;
}
/* bovenaan: cirkel links + gegevens ernaast */
.popup-protocol-container{
    display: flex;
    align-items: flex-start;
    gap: 0.9em;
    margin-top: 0.5em;
    padding: 0 1em;
}
.popup-protocol-circle{
    position: relative;
    border: 1px solid var(--theme-color);
    border-radius: 50%;
    overflow: hidden;
    height: 64px;
    width: 64px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    cursor: pointer;
}
.pp-popup-circle-themed{
    filter: var(--theme-icon-filter);
}
.popup-protocol-info{
    flex: 1;
    min-width: 0;
    font-size: 0.82em;
    line-height: 1.5em;
}
.popup-protocol-info > div{
    margin-bottom: 0.1em;
}
.pp-popup-info-label{
    color: #666;
}
.pp-popup-info-value{
    overflow-wrap: anywhere;
}
/* status "Afgekeurd"/"Goedgekeurd" wordt een link zodra er een reviewer-opmerking is;
   klik toont die in een popup (zie protocol-detail-page.js) */
.pd-status-link{
    color: var(--theme-color);
    text-decoration: underline;
    cursor: pointer;
}

/* eronder: acties als lijst, icoon links / label rechts (in de popup stond dit nog
   rechts-uitgelijnd, maar op de pagina liep het icoon dan van het scherm af) */
.popup-protocol-options{
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    margin-top: 1.1em;
    padding: 0 1em;
}
.pp-popup-option-row{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8em;
    cursor: pointer;
}
.pp-popup-option-label{
    font-size: 0.85em;
    color: var(--theme-color);
}
.pp-popup-option{
    width: 26px;
    height: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--theme-icon-filter);
    flex-shrink: 0;
}
.pp-popup-option-ai{
    background-image: url("../../img/ai-icon-removebg-preview.png");
}
.pp-popup-option-review{
    background-image: url("../../img/icon-share-link-removebg-preview.png");
}
.pp-popup-option-upload{
    background-image: url("../../img/outbox-icon-removebg.png");
}
.pp-popup-option-versies{
    background-image: url("../../img/date-icon-removebg-preview.png");
}
.popup-protocol-review-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7em;
    margin-top: 1.2em;
    padding: 0 1em;
}
.popup-protocol-review-form input[type="email"]{
    width: 100%;
    max-width: 20em;
    padding: 0.4em 0.5em;
    font-size: 0.9em;
    box-sizing: border-box;
}
.popup-protocol-review-datumrow{
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.85em;
}
.popup-protocol-date-display{
    display: inline-block;
    min-width: 8em;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.35em 0.7em;
    cursor: pointer;
    background: white;
}
.popup-protocol-picker-anchor{
    position: absolute;
    left: 50%;
    transform: translateX(calc(-50% - 6.5em));
    bottom: 100%;
    z-index: 100;
    cursor: pointer;
}
.popup-protocol-picker-anchor:empty{
    display: none;
}
.popup-protocol-picker-anchor input{
    display: none; /* de kalender toont de datum al; het losse tekstveld hoeft niet zichtbaar */
}
.popup-protocol-review-ok{
    color: var(--theme-color);
    border: 1px solid var(--theme-color);
    border-radius: 12px;
    padding: 0.4em 1em;
    font-size: 0.85em;
    cursor: pointer;
    white-space: nowrap;
}
.pp-popup-hidden{
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* protocol-detail-page (voorheen popup-protocol.js / popup-protocol-  */
/* versies.js; de meeste .popup-protocol-* / .pp-popup-* / .ppv-row*   */
/* classes hierboven zijn ongewijzigd hergebruikt voor de pagina)      */
/* ------------------------------------------------------------------ */
#pd-file-input{
    display: none;
}
.popup-protocol-versies-wrapper{
    margin-top: 1.2em;
    padding: 0 1em;
    max-height: 60vh;
    overflow-y: auto;
}
/* op de pagina scrolt de hele pagina al mee - geen eigen scrollbox/padding nodig */
.pd-versies-wrapper{
    max-height: none;
    overflow-y: visible;
    padding: 0;
    margin-top: 0.4em;
}
.popup-protocol-versies-loading{
    font-size: 0.85em;
    color: #666;
    text-align: center;
    padding: 1em 0;
}
.ppv-row{
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.6em 0;
    border-bottom: 1px solid rgb(235, 235, 235);
}
.ppv-row:last-child{
    border-bottom: none;
}
.ppv-row-clickable{
    cursor: pointer;
}
.ppv-row-circle{
    width: 34px;
    height: 34px;
    border: 1px solid var(--theme-color);
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    flex-shrink: 0;
}
.ppv-row-circle-leeg{
    background-image: url("../../img/outbox-icon-removebg.png");
    background-size: 45%;
    filter: var(--theme-icon-filter);
    opacity: 0.6;
}
.ppv-row-info{
    flex: 1;
    min-width: 0;
}
.ppv-row-titel{
    font-weight: bold;
    font-size: 0.88em;
    word-break: break-word;
}
.ppv-row-meta{
    font-size: 0.78em;
    color: #666;
    margin-top: 0.1em;
}
#protocol-page-section-content{
    margin-left:-2.5em;
}