@import "fontstyles.css";
:root {
    --shadow-default: 1px 1px 4px -2px rgba(0,0,0,0.3), 0 0 12px 0 rgba(0,0,0,0.06);
    --shadow-alternative: 0 0 16px -2px rgba(47,72,85,0.4);
    --color-table-header: #e1e4e5;
    --color-even: rgb(235 237 239);
    --color-dark1: #536a76;
    --color-dark2: #3c5461;
    --color-dark3: #2f4855;
    --color-dark4: #344b57;
    --color-dark5: #1c2327;
    --color-dark-ci1: #3e0751;
    --color-dark-ci3: #312237;
    --color-text: #333;
    --color-neutral00: #f4f4f4;
    --color-neutral0: #ddd;
    --color-neutral1: #ccc;
    --color-neutral2: #bbb;
    --color-neutral3: #aaa;
    --color-neutral4: #999;
    --color-bright1: white;
    --color-bright2: #f9f4f4;
    --color-bright3: #f2ecec;
    --color-bright4: #fefefe;
    --color-bright5: #fcf8f8; /* dark inputs */
    --color-bright6: #eceaea; /* borders #e9e4e4; */
    --color-bright-background: #f8f4f4;
    --color-bright-background-transparent: #f8f4f4cf;
    --color-alert: #dc4180;
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-committed: #4d9390;
    --color-requested: #eaba61;
    --color-considered: #819de7;
    --color-canceled: #e96565;
    --color-cta: darkorange;
    --color-ci1: rgba(93, 0, 99, 1);
    --color-ci2: rgba(0, 49, 99, 1);
    --color-ci3: rgb(64 52 64);
    --color-ci4: rgb(55 64 73);
    --background-ci1: linear-gradient(45deg, var(--color-ci2), var(--color-ci1));
    --background-ci2: linear-gradient(45deg, var(--color-ci1), var(--color-ci2));
    --background-ci3: linear-gradient(45deg, var(--color-ci4), var(--color-ci3));
    --card-padding-side: 12px;
    --card-padding-heigth: 8px;
    --border-radius-less: 5px;
    --border-radius-more: 12px;

}
/*
    --shadow-1: rgba(0, 0, 0, .1);
    --shadow-2: rgba(0, 0, 0, .2);
    --shadow-5: rgba(0, 0, 0, .5);
    --shadow-8: rgba(0, 0, 0, .8);
    --shadow-base: 0 1px 2px var(--shadow-2);
    --shadow-elevated: 0 8px 20px 0 rgba(0, 0, 0, .2), 0 2px 4px 0 rgba(0, 0, 0, .1);
    --shadow-emphasis: 0 2px 12px var(--shadow-2);
    --shadow-inset: rgba(255, 255, 255, .5);
    --shadow-on-media: 0px 0px 1px rgba(0, 0, 0, .62);
    --shadow-persistent: 0px 0px 12px rgba(52, 72, 84, .05);
    --shadow-primary: 0px 5px 12px rgba(52, 72, 84, .2);
    --shadow-responsive: 0px 8px 16px 0px rgba(0, 0, 0, .1);
    --shadow-inset: rgba(255, 255, 255, .5);
box-shadow: 0 12px 28px 0 var(--shadow-2),0 2px 4px 0 var(--shadow-1),inset 0 0 0 1px var(--shadow-inset)
*/
* {
    font-family: "Chivo", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--color-bright-background);
    color: var(--color-dark5);
    padding: 20px 20px 40px;
    padding: 0;
    margin: 0;
    font-weight: 100;
}


/*
** iOS and field reset
*/
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
/*    border: 1px solid #ccc;*/
    padding: 3.5px;
/*    border-radius: 4px;*/
    background-color: var(--color-bright1) !important;
}
/* Für Select-Elemente ein Dropdown-Pfeil hinzufügen */
select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ccc" d="M2 0L0 2h4zM2 5L0 3h4z"/></svg>'); /* Optional: Eigenes SVG-Symbol */
    background-repeat: no-repeat;
    background-position: right 0.5em top 50%;
    background-size: 0.65em auto;
    padding-right: 1.4em !important;
    position: relative;
}

/* Optional: Hinzufügen von spezifischen Stilen für Fokuszustände */
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
select:focus {
    border-color: var(--color-alert);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
textarea {
    transition: none;
    resize: vertical;
    height: 80px;
}
input {
    flex-grow: 100;
}
input:focus {
    outline-style: solid;
}
select, input, textarea {
    margin: 0;
    padding: 0.2em;
}
input, select {
/*    height: 1.6rem;*/
}
input[type="radio"],
input[type="checkbox"] {
    outline: none;
    align-self: start;
}
.radio-group, .checkbox-group {
    display: flex;
    column-gap: 1em;
    margin: 0;
    flex-wrap: wrap;
}
.radio-group>span, .checkbox-group>span, .checkbox-group>span>label {
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 0.4em;
    margin: 0;
}
input[type="submit"] {
    height: unset;
}
input:not([type="checkbox"]), select, textarea {
    font-size: 14px;
    border: 1px solid #f2ecec;
    padding: 5px;
    box-shadow: 0 0 3px -2px rgba(0,0,0,0.4);
    border-radius: 5px;
}

/*
** BASIC
*/
header.default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    position: relative;
    z-index: 100;
    background: var(--color-bright2);
    color: var(--color-text);
    margin: 0;
}
header.default a {
    color: var(--color-text);
}
header.default div {
    flex-grow: 1;
    flex-basis: 5%;
}
header.minimal {}
header.minimal a {}
header.minimal div {}
main {
/*    padding: 0 10px;*/
/*    width: 100vw;*/
}
p, div, li, span, input, textarea, select, label, td, a, svg, button {
    font-weight: 100;
    outline-color: rgba(0,0,0,0.1);
    outline-width: 1px;
}
p, div, li, input, textarea, select, label, td, a, svg, button {
    margin: 3px 0;
}
button, svg, a, i {
    transition: all 0.3s ease-in-out;
    }
label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-dark4);
    margin-bottom: 0;
}
label.html-editor-label div,
label.html-editor-label p {
    text-transform: none;
}
a {
    text-decoration: none;
    font-weight: bolder;
    color: #333;
}
a:hover {
    text-decoration: underline;
}
button.small, checkbox {
    outline-width: 0;
}
div {
/*    margin: 0.2em 0 0.8em;*/
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    margin: 0.2em 0;
}
h1 {
    font-size: 32px;
    line-height: 1.4em;
}
header h1 {
    flex-grow: 100;
    flex-basis: 100%;
    margin: 0.4em 10px 0.4em;
}
h2 {
    font-size: 22px;
    margin: 0.4em 0 0.8em;
}
h3 {
    font-size: 20px;
}
h4 {
    font-size: 18px;
    margin: 1em 0 0.4em;
}
h5 {
    font-size: 15px;
}
h6 {
    font-size: 12px;
}
ul, ol {
    padding-inline-start: 1.2em;
}
li {
    margin-bottom: 0.8em;
}
table {
    table-layout: auto;
    width: 100%;
}
th {
    text-align: left;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-inline-start: 0;
    gap: 10px;
    align-items: center;
    justify-content: end;
}

.body {
    display: flex;
    width: 100vw;
}
.content {
    flex-grow: 1;
    min-height: 90vh;
}
.centered {
    text-align: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    justify-self: center;
}
.bigmargin {
    margin: 2em 4em;
}
#error {
}
.error a {
    color: var(--color-bright1);
    text-decoration: underline;
}
.alert,
.alert a {
    color: var(--color-alert);
}
.fullwidth {
    width: 100%;
}
.haserror {
    padding: 0.4em;
    margin: 0.8em 0;
    background: #ff000078;
    color: var(--color-bright1);
}
.description {
    font-size: 0.8em;
    margin: 0 0 0.4em 0;
}
.text-with-icon {
    display: flex;
    justify-content: start;
    align-items: center;
}
.dissolve {
    display: block;
}
.fade {
    opacity: 0.3;
}
.pointer {
    cursor: pointer;
}
.hidden {
    display: none;
}
.form-group {
    flex-grow: 1;
}
.strong {
    font-weight: bold;
}
.strong span {
    font-weight: 400;
}
.one-third {
    flex-grow: 1;
}
.two-thirds {
    flex-grow: 2;
}
.has-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.has-icon i {
    font-size: 1.2em;
    margin: 0;
    padding-right: 0.4em;
}
.pseudo-link {
    cursor: pointer;
    font-weight: bolder;
}
.pseudo-link:hover {
    text-decoration: underline;
}
.is-button:not(a) {
    cursor: pointer;
    border: 1px solid var(--color-neutral1);
    font-size: 0.85em;
    border-radius: var(--border-radius-less);
    padding: 2px 4px;
}
.like-input-field {
    border: 1px solid #f2ecec;
    padding: 5px;
    box-shadow: 0 0 3px -2px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    background: var(--color-bright1);
    min-height: 28px;
    max-height: 1em;
    white-space: pre;
    max-width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
}
.divider {
    background: var(--color-bright3);
    height: 1px;
    white-space: pre;
    width: 100%;
    margin: 10px 10%;
}
.bright, .bright a {
    color: var(--color-neutral1);
}
.top-of-page {
    position: absolute;
    top: 0;
}

.disabled,
.disabled input,
.disabled textarea,
.disabled select {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

form, fieldset {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: scroll;
    max-width: 100%;
}
fieldset {
    border-radius: 8px;
    border: 1px solid var(--color-bright3);
    padding: 1em 1em 1.2em;
    margin: 0.6em 0;
    box-shadow: 0 0.25rem 1.875rem rgba(42,53,79,.05);
}
legend {
    font-size: 12px;
    /* opacity: 0.6; */
    padding: 0 5px;
    background: #e2e2e2;
    color: #5c5b5b;
    font-size: 13px;
    border-radius: 3px;
    padding: 3px 12px;
    font-style: italic;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    cursor: default;
}
input[type="submit"], button[type="submit"], button {
    color: var(--color-bright1);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    padding: 6px 12px;
    background: var(--color-neutral3);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: 2px solid var(--color-neutral1);
}
input[type="submit"]:hover, button[type="submit"]:hover, button:hover {
    background: var(--color-neutral1);
    color: var(--color-bright1);
}
[type="submit"]:disabled,
[type="submit"]:disabled:hover,
button:disabled,
button:disabled:hover {
    letter-spacing: 1px;
    cursor: not-allowed;
}
input[type="submit"].fullwidth,
button.fullwidth {
    font-size: 20px;
    min-height: 2.8em;
}
.fullwidth label {
    width: 100%;
}
.cta {
    margin-top: 2em;
/*    margin-bottom: 2em;*/
}

a.is-button,
a.is-button:hover {
    text-decoration: none;
    font-weight: unset;
}
button.fancy-cta {
    background: -webkit-linear-gradient(45deg, #680aca, #ff897e);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    -webkit-animation: animatedgradient 6s ease infinite alternate;
    animation: animatedgradient 6s ease infinite alternate;
    background-size: 300% 300%;
    font-weight: 400;
    font-size: 17px;
    border-color: var(--color-bright4);
}


/*
** FOOTER
*/
footer {
    border-top: 1px solid var(--color-bright6);
}
footer .copyright {
    text-align: center;
    padding: 40px 10px 5px;
    font-size: 12px;
}

button.big,
input[type="submit"].big {
    padding: 0.8em 3em;
    font-size: 20px;
}
.fancy {
    background: rgb(2,0,36);
    background: -moz-linear-gradient(12deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background: -webkit-linear-gradient(12deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background: linear-gradient(12deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);
    letter-spacing: 1px;
}
.fancy:hover {
    background: rgb(2,0,36);
    background: -moz-linear-gradient(188deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background: -webkit-linear-gradient(188deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background: linear-gradient(188deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);
    letter-spacing: 1px;
}




/*
** DRAG HANDLE
*/
.handle {
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    padding: 8px !important;
}
.handle i {
    opacity: 0;
    width: 20px;
    height: auto;
    fill: grey;
    display: block;
}
tr:hover .handle i {
    opacity: 1;
}
.speaker-list tr.dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.speaker-list tr.chosen {
    background-color: var(--color-bright1);
}
.speaker-list tr.ghost {
    background-color: transparent;
    border-bottom: 5px solid blue;
    height: 0;
    overflow: hidden;
}

/*
** PREVENT TEXT SELECTION
*/

.speaker-list img {
    pointer-events: none;
}

.speaker-list tbody {
    user-select: auto;
}
.speaker-list tr {
    touch-action: manipulation;
}

.status-select {
    pointer-events: auto; /* Interaktionen erlauben */
    user-select: auto; /* Auswahl von Text oder Optionen erlauben */
    touch-action: auto; /* Normales Touch-Verhalten */
}





/*
** MODAL
*/
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-bright-background-transparent);
    margin: 0;
    padding: 0;
}
.modal.open {
    display: block;
}
.modal-content {
    background-color: var(--color-bright1);
    margin: auto;
    padding: 15px 25px;
    /* border: 1px solid var(--color-neutral0); */
    /* width: 95%; */
    max-width: 950px;
    height: auto;
    max-height: 96vh;
    overflow-y: auto;
    /* box-shadow: var(--shadow-default); */
    border-radius: 5px;
}
.modal.second {
    z-index: 1001;
}
.modal.third {
    z-index: 1002;
}
.modal.second .modal-content {
    width: 66%;
    max-width: 800px;
}
.modal.third .modal-content {
    width: 50%;
    max-width: 650px;
}
body.modal-open {
    overflow: hidden;
}

.close {
    color: var(--color-dark1);
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: var(--color-dark6);
    text-decoration: none;
    cursor: pointer;
}

@media(min-width: 950px) {
    .modal {
        padding: 10px;
    }
    .modal-content {
        padding: 15px 25px;
         border: 1px solid var(--color-neutral0); 
         width: 95%; 
         box-shadow: var(--shadow-default); 
    }
}





/*
** SPEAKER LIST BULK EDIT
*/
.bulk-edit {
    opacity: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    top: 0;
    z-index: 999;
    background: var(--color-bright1);
    opacity: 0;
    border: 1px solid var(--color-neutral1);
    padding: 6px 10px;
    transition: 0.3s all ease-in-out;
/*    min-height: 65px;*/
}
.bulk-edit.active {
    opacity: 1;
    position: sticky;
}
.bulk-edit label {
    opacity: 1;
    flex-direction: row;
    align-items: center;
    gap: 0.4em;
    margin: 0;
}
.bulk-single {
    background: var(--color-neutral00);
    border: 1px solid var(--color-table-header);
    border-radius: var(--border-radius-more);
    padding: 2px 15px;
    align-items: center;
/*    display: none;*/
    pointer-events: none;
}
.bulk-edit.active .bulk-single {
/*    display: flex;*/
    pointer-events: auto;
}
.bulk-single i {
    pointer-events: auto;
}

/* Job Details Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.job-details-modal {
    background: white;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.job-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.job-details-header h3 {
    margin: 0;
    color: #333;
}

.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal:hover {
    color: #333;
}

.job-details-content {
    padding: 20px;
}

.job-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 15px;
    background: #fafafa;
}

.job-item.success {
    border-left: 4px solid #28a745;
    background: #f8fff9;
}

.job-item.error {
    border-left: 4px solid #dc3545;
    background: #fff8f8;
}

.job-item.warning {
    border-left: 4px solid #ffc107;
    background: #fffef8;
}

.job-item.info {
    border-left: 4px solid #17a2b8;
    background: #f8fdff;
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.job-status {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
}

.job-status.success {
    background: #d4edda;
    color: #155724;
}

.job-status.error {
    background: #f8d7da;
    color: #721c24;
}

.job-status.warning {
    background: #fff3cd;
    color: #856404;
}

.job-status.info {
    background: #d1ecf1;
    color: #0c5460;
}

.job-date {
    color: #666;
    font-size: 14px;
}

.job-completed {
    color: #28a745;
    font-size: 14px;
    margin-bottom: 8px;
}

.job-error {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 4px;
    margin: 8px 0;
    font-size: 14px;
}

.job-attempts {
    color: #666;
    font-size: 14px;
    margin-top: 8px;
}

.job-payload {
    background: #e9ecef;
    color: #495057;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 8px;
    font-family: monospace;
}