/*
    Document   : fristenrechner
    Description: Specific styles for Fristenrechner page.
*/

input[type="date"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

#calculator article {
    border-top: 5px solid #61B0FF;
}

#calculator header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: #f8fbff;
}

#calculator label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 400px;
    font-weight: bold;
}

table.rechner {
    margin-top: 1rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

table.rechner tbody tr:nth-child(odd) td,
table.rechner tbody tr:nth-child(odd) th {
    background-color: #def;
}

table.rechner tbody tr:nth-child(even) td,
table.rechner tbody tr:nth-child(even) th {
    background-color: #b3d9ff;
}

table.rechner thead th,
table.rechner thead td {
    background-color: #61B0FF;
    color: white;
    border-bottom: 2px solid black;
}

table.rechner th[scope="row"] {
    width: 15%;
    text-align: right;
    padding-right: 1rem;
    color: black;
    border-right: 2px solid #004d99;
}

table.rechner td {
    text-align: center;
    width: 20%;
    border-right: 2px solid rgba(0,0,0,0.1);
}

table.rechner td:last-child {
    border-right: none;
}

#slider {
    margin-top: 0.5rem;
    width: 100%;
}

#dauer {
    font-weight: bold;
    display: block;
    color: white;
}

#hinweis {
    background-color: #fff1f0;
    color: #cf1322;
    border: 1px solid #ffa39e;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

/* Legal Basis styling */
details {
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
}

summary {
    color: #004d99;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary::before {
    content: "▶ ";
    font-size: 0.8em;
}

details[open] summary::before {
    content: "▼ ";
}

.gl-content {
    padding: 1rem 0;
}

.para-item {
    display: flex;
    margin-bottom: 1rem;
    gap: 1rem;
}

.para-num, .art-num, .anl-num {
    font-weight: bold;
    min-width: 4rem;
    flex-shrink: 0;
    color: #0066cc;
}

.para-num::before { content: "§ "; }
.para-num::after { content: "."; }

.art-num::before { content: "Art. "; }
.anl-num::before { content: "Anl. "; }

.para-item p {
    margin-bottom: 0;
}

span.abs {
    font-weight: bold;
    margin-right: 0.5ch;
    color: #004d99;
}
span.abs::before { content: "("; }
span.abs::after { content: ")"; }

@media (max-width: 600px) {
    .para-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .para-num, .art-num, .anl-num {
        min-width: auto;
    }
}