/* Search highlight (CSS Custom Highlight API) */
::highlight(search-results) {
    background-color: #fff176;
    color: #000;
}

.item-group {
    margin-bottom: 20px;
}

.item-group-header {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.item-group-header:hover {
    background-color: #d5dfec;
}

.item-group.active .item-group-header {
    background-color: transparent; /* Fundal transparent */
    color:  var(--iw-blue-purple-black); 
    font-weight: bold; /* Face textul mai proeminent */
}

.item-group.active .item-group-header {
    background-color: transparent; /* Fundal transparent */
    color:  var(--iw-blue-purple-black); /* Culoarea textului mov pentru a indica activarea */
    position: relative; /* Necesită pentru pseudo-element */
    font-weight: bold; /* Face textul mai proeminent */
}


.item-group.active .item-group-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color:  var(--iw-blue-purple-black); 
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.item-group.active .item-group-header:hover::after {
    transform: scaleX(1); /* Extinde linia de subliniere la hover */
}


.item-group .item-group-header {
    position: relative; /* Necesită pentru pseudo-element */
    font-weight: bold; /* Face textul mai proeminent */
}

.item-group .item-group-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* Aplicația animatiei la hover sau când este activ */
.item-group .item-group-header:hover::after,
.item-group.active .item-group-header::after {
    transform: scaleX(1); /* Extinde linia de subliniere la hover sau când este activ */
}


.item-group-icon {
    font-size: 24px;
    margin-right: 10px;
}

.item-group-details {
    flex: 1;
}

.item-group-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.item-group-count {
    font-size: 14px;
    background-color:  var(--iw-blue-purple-black);
}

.item-group-content {
    padding-left: 1px;
    padding-right: 1px;
    background-color: #fff;
}

.item-group-item {
    margin-bottom: 3px;
    border-radius: 8px;
    overflow: hidden;
} 

/* Active Item Color */
.active {
    background-color:  var(--iw-blue-purple-black);
    color: white;
}

/* Pinned Item Color */
.emerald-light {
    background-color: #00bcd4;
    color: white;
}

/* Task In Progress Color */
.mocha-smooth {
    background-color: #ffc107;
    color: black;
}

.action-item-pinned,
.list-group-item.active.action-item-pinned {
    border-left: 11px solid var(--iw-blue-purple-black) !important; /* Mov pentru "Pinned" */
}

.ags-task-ui-done,
.list-group-item.active.ags-task-ui-done {
    border-left: 11px solid #25ec98 !important;
}

/* Task In Progress Color */
.action-item-in-progress,
.list-group-item.active.action-item-in-progress {
    border-left: 11px solid #ffc107 !important;
}

/* Task In Progress Color */
.action-item-border-only,
.list-group-item.active.action-item-border-only {
    border-left: 11px solid #f5f5f5 !important;
}

.active {
    background-color: #f0f0f0;
    color:  var(--iw-blue-purple-black);
}

.item-icon {
    font-size: 1.2rem;
    width: 30px;
    text-align: center;
}

.item-content {
    flex-grow: 1;
    min-width: 0;
}

.item-content h6 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: normal;
}