/* Define CSS variables inside .oc-template-list for isolation */
.oc-template-list {
    --color-border: #ddd;
    --color-background: #eee;
    --color-title: #888;
    --color-text: black;

    --color-error: #d00;
    --error-message: "--- Folder / template not Found! ---";

    --padding-cell: 0.5rem;
    --padding-buttons: 0.5em;
    --padding-accordion: 1em;

    --font-size-title: 1em;
    --line-height-title: 120%;

    --transition-speed: 0.4s;
    --accordion-max-height: 1000px;
}

/* General styles for the template list */
.oc-template-list table {
    border-collapse: collapse;
    width: 100%;
}

.oc-template-list .buttons {
    padding-bottom: var(--padding-buttons);
    text-align: right;
}

.oc-template-list .btn {
    cursor: pointer;
    background: var(--color-background);
    padding: var(--padding-buttons);
}

/* Wrapper styles */
.oc-template-list .oc-template-wrapper {
    margin: 2em 0 3em;
}



.oc-template-list .folder-exists-false .oc-template-name:after{
    content: var(--error-message);
    padding-top: 0.5em;
    display:block;
    width: 100%;
    color: var(--color-error);
}

/* Header styles */
.oc-template-list .oc-template-header {
    display: flex;
    border-bottom: solid 1px var(--color-border);
    align-items: flex-end;
    margin-bottom: 1em;
}

.oc-template-list .oc-template-title {
    flex-grow: 1;
    margin: 0;
    line-height: var(--line-height-title);
    font-size: var(--font-size-title);
}

.oc-template-list .oc-template-title .oc-title {
    color: var(--color-title);
    display: block;
    margin: 0;
}

.oc-template-list .oc-template-name {
    color: var(--color-text);
    display: block;
    margin: 0.4em 0;
}

/* Table styles */
.oc-template-list th,
.oc-template-list td {
    padding: var(--padding-cell);
    text-align: left;
    border: none;
    border-bottom: solid 1px var(--color-border);
}

.oc-template-list th {
    font-weight: bold;
}


.row-deleted-true{
    text-decoration: line-through;
    text-decoration-color: #000000dd;
}

.row-deleted-true:hover{
    text-decoration-color: #00000044;
}
.oc-template-list .col-p-id,
.oc-template-list .col-t-id,
.oc-template-list .col-m-id,
.oc-template-list .col-t-del,
.oc-template-list .col-m-del,
.oc-template-list .col-change {
    width: 4em;
}

.oc-template-list .col-t-name {
    width: 50%;
}


#Body .oc-icon{
    max-width: 1.5em;
    border: none;
}
/* Accordion trigger styles */
.oc-template-list .oc-accordion-trigger.oc-open .oc-show-text {
    display: none;
}

.oc-template-list .oc-accordion-trigger.oc-closed .oc-hide-text {
    display: none;
}

/* Accordion content styles */
.oc-template-list .oc-accordion-content {
    transition: max-height var(--transition-speed) ease, opacity var(--transition-speed) ease;
    overflow: hidden;
    padding: 0 var(--padding-accordion);
}

.oc-template-list .oc-accordion-content.oc-acc-open {
    opacity: 1;
    max-height: var(--accordion-max-height); /* fallback if JS doesn't set it */
}

.oc-template-list .oc-accordion-content.oc-acc-closed {
    opacity: 0;
    max-height: 0;
}