:root {
    --color-toggle-btn: hsl(0, 0%, 65%);
    --color-toggle-btn-hover: hsl(0, 0%, 55%);
    --color-toggle-btn-active: hsl(0, 0%, 45%);
    --color-toggle-btn-text: white;
    --color-container-summary: #ddd;
    --copy-btn-color: hsl(209, 100%, 65%);
    --copy-btn-color-hover: hsl(209, 100%, 55%);
    --copy-btn-color-active: hsl(209, 100%, 45%);
    --copy-all-btn-color: hsl(209, 100%, 75%);
    --color-task-card-title: hsl(210, 40%, 90%);
    --color-task-card-shadow: gray;
}
.task-list  h3 {
    background-color: lightgray;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    margin-top: 1em;
}

.category[open] {
    padding-bottom: 2em;
}

#cat_container > details > summary {
    font-weight: bold;
    background-color: var(--color-container-summary);
    padding: 0.1em 0.5em;
    border-radius: 5px;
    margin-bottom: 0.7em;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 2em;
    position:relative;
}

#cat_container > details > summary::before {
    content: '▶';
    position: absolute;
    left: 16px;
    top: 6px;
    font-size: 12px;
}

#cat_container > details[open] summary::before {
    top: 8px;
    transform: rotate(90deg);
}

.task-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.task-card {
    margin-left: 2em;
    /* border: 1px solid gray; */
    border-radius: 10px;
    padding: 5px;
    box-shadow: 2px 2px 5px 2px var(--color-task-card-shadow);
    max-width: 90%;
}

.task-card details {
    margin-left: 1em;
}

.task-card-title {
    font-size: 1rem;
    font-weight: bold;
    background-color: var(--color-task-card-title);
    padding: 0.2rem 1rem;
    border-radius: 10px;
}

.task-card summary {
    font-size: 0.9rem;
}

.task-card-item {
    /* border: 1px solid green; */
    display: grid;
    grid-template-columns: auto 80px;
    gap: 5px 20px;
    margin-left: 1em;
}

.task-card-item-text {
    background-color: #eee;
    padding: 0.5rem;
}

.task-card-depends .task-card-item-text {
    font-size: 0.9rem;
}

.task-copy-btn {
    background-color: var(--copy-btn-color);
    color: white;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 0 2em;
    height: 2em;
}

.task-copy-btn:hover {
    background-color: var(--copy-btn-color-hover);
}

.task-copy-btn:active {
    background-color: var(--copy-btn-color-active);
}

.task-tools {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.copy-all {
    background-color: var(--copy-all-btn-color);
}

.task-hide {
    display: none;
}

#filter {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 1em;
}

#task_tools {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 1em;
}

.task-tool-btn {
    background-color: var(--color-toggle-btn);
    color: var(--color-toggle-btn-text);
    font-weight: 700;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 0 2em;
    height: 2em;   
}

.task-tool-btn:hover {
    background-color: var(--color-toggle-btn-hover);
}

.task-tool-btn:active {
    background-color: var(--color-toggle-btn-active);
}

.task-form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    width: 90%;
}

.tool-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90%
}