/* Extra styles for No Dates ToDo */

/* SVG Icon Classes */
/* XS: 16px, SM: 24px, MD: 32px, LG: 48px */

/* Abstract Triangle */
.icon-triangle-xs {
    background-image: url('../icons/abstract-triangle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.icon-triangle-sm {
    background-image: url('../icons/abstract-triangle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon-triangle-md {
    background-image: url('../icons/abstract-triangle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.icon-triangle-lg {
    background-image: url('../icons/abstract-triangle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 48px;
    height: 48px;
}

/* Abstract Circle */
.icon-circle-xs {
    background-image: url('../icons/abstract-circles.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.icon-circle-sm {
    background-image: url('../icons/abstract-circles.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon-circle-md {
    background-image: url('../icons/abstract-circles.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.icon-circle-lg {
    background-image: url('../icons/abstract-circles.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 48px;
    height: 48px;
}

/* Abstract Square */
.icon-square-xs {
    background-image: url('../icons/abstract-square.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.icon-square-sm {
    background-image: url('../icons/abstract-square.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon-square-md {
    background-image: url('../icons/abstract-square.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.icon-square-lg {
    background-image: url('../icons/abstract-square.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 48px;
    height: 48px;
}

/* Abstract Star */
.icon-star-xs {
    background-image: url('../icons/abstract-stars.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.icon-star-sm {
    background-image: url('../icons/abstract-stars.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon-star-md {
    background-image: url('../icons/abstract-stars.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.icon-star-lg {
    background-image: url('../icons/abstract-stars.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 48px;
    height: 48px;
}

/* Abstract Leaf */
.icon-leaf-xs {
    background-image: url('../icons/abstract-leaf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.icon-leaf-sm {
    background-image: url('../icons/abstract-leaf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon-leaf-md {
    background-image: url('../icons/abstract-leaf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.icon-leaf-lg {
    background-image: url('../icons/abstract-leaf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 48px;
    height: 48px;
}

/* Abstract Sun */
.icon-sun-xs {
    background-image: url('../icons/abstract-sun.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.icon-sun-sm {
    background-image: url('../icons/abstract-sun.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon-sun-md {
    background-image: url('../icons/abstract-sun.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.icon-sun-lg {
    background-image: url('../icons/abstract-sun.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 48px;
    height: 48px;
}

/* Abstract Home */
.icon-home-xs {
    background-image: url('../icons/abstract-home.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.icon-home-sm {
    background-image: url('../icons/abstract-home.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon-home-md {
    background-image: url('../icons/abstract-home.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.icon-home-lg {
    background-image: url('../icons/abstract-home.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 48px;
    height: 48px;
}

/* Cute Star Emoji */
.icon-star-emoji-xs {
    background-image: url('../icons/cute-cartoon-star-emoji-smiling-black-outline-18021.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.icon-star-emoji-sm {
    background-image: url('../icons/cute-cartoon-star-emoji-smiling-black-outline-18021.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon-star-emoji-md {
    background-image: url('../icons/cute-cartoon-star-emoji-smiling-black-outline-18021.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.icon-star-emoji-lg {
    background-image: url('../icons/cute-cartoon-star-emoji-smiling-black-outline-18021.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 48px;
    height: 48px;
}

/* Task Card Styles */
.task-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.25rem 1rem 0.5rem 1rem; /* Reduced top and bottom padding by half */
    margin-bottom: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: white;
    position: relative;
    min-height: 80px; /* Ensure minimum height for the card */
}

/* Task Icon (Left) */
.task-icon {
    flex: 0 0 40px;
    margin-right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
}

.task-icon i {
    font-size: 1.5rem;
    color: #4a4a4a;
}

/* Task Content (Middle) */
.task-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    order: 2;
}

.task-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: #363636;
}

.task-subtitle {
    font-size: 0.9rem;
    color: #7a7a7a;
}

/* Task Menu (Right) */
.task-menu {
    flex: 0 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 3;
}

.task-menu i {
    font-size: 1.2rem;
    color: #7a7a7a;
    cursor: pointer;
}

.task-menu i:hover {
    color: #363636;
}


/* Task Card Hover Effect */
.task-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

/* Task Card with Bulma Colors */
.task-card.is-primary {
    border-color: var(--bulma-primary);
    border-width: 2px;
}

.task-card.is-info {
    border-color: var(--bulma-info);
    border-width: 2px;
}

.task-card.is-success {
    border-color: var(--bulma-success);
    border-width: 2px;
}

.task-card.is-warning {
    border-color: var(--bulma-warning);
    border-width: 2px;
}

.task-card.is-danger {
    border-color: var(--bulma-danger);
    border-width: 2px;
}

.task-card.is-dark {
    border-color: var(--bulma-dark);
    border-width: 2px;
}

.task-card.is-light {
    border-color: var(--bulma-light);
    border-width: 2px;
}

/* Task Card with Custom Colors */
.task-card.is-tea-rose {
    border-color: var(--tea-rose);
    border-width: 2px;
}

.task-card.is-paynes-grey {
    border-color: var(--paynes-grey);
    border-width: 2px;
}

.task-card.is-auburn {
    border-color: var(--auburn);
    border-width: 2px;
}

.task-card.is-flax {
    border-color: var(--flax);
    border-width: 2px;
}

.task-card.is-cream {
    border-color: var(--cream);
    border-width: 2px;
}

/* Icon Color Classes */
/* Bulma Colors */
.icon.is-primary {
    color: var(--bulma-primary);
}

.icon.is-info {
    color: var(--bulma-info);
}

.icon.is-success {
    color: var(--bulma-success);
}

.icon.is-warning {
    color: var(--bulma-warning);
}

.icon.is-danger {
    color: var(--bulma-danger);
}

.icon.is-dark {
    color: var(--bulma-dark);
}

.icon.is-light {
    color: var(--bulma-light);
}

/* Custom Colors */
.icon.is-tea-rose {
    color: var(--tea-rose);
}

.icon.is-paynes-grey {
    color: var(--paynes-grey);
}

.icon.is-auburn {
    color: var(--auburn);
}

.icon.is-flax {
    color: var(--flax);
}

.icon.is-cream {
    color: var(--cream);
}

/* Utility Classes */
.level-no-margin-bottom {
    margin-bottom: 0 !important;
}

/* Task Card with Bulma Colors */
.modal-content.is-primary {
    border-color: var(--bulma-primary);
    border-width: 2px;
}

.modal-content.is-info {
    border-color: var(--bulma-info);
    border-width: 2px;
}

.modal-content.is-success {
    border-color: var(--bulma-success);
    border-width: 2px;
}

.modal-content.is-warning {
    border-color: var(--bulma-warning);
    border-width: 2px;
}

.modal-content.is-danger {
    border-color: var(--bulma-danger);
    border-width: 2px;
}

.modal-content.is-dark {
    border-color: var(--bulma-dark);
    border-width: 2px;
}

.modal-content.is-light {
    border-color: var(--bulma-light);
    border-width: 2px;
}

/* Task Card with Custom Colors */
.modal-content.is-tea-rose {
    border-color: var(--tea-rose);
    border-width: 2px;
}

.modal-content.is-paynes-grey {
    border-color: var(--paynes-grey);
    border-width: 2px;
}

.modal-content.is-auburn {
    border-color: var(--auburn);
    border-width: 2px;
}

.modal-content.is-flax {
    border-color: var(--flax);
    border-width: 2px;
}

.modal-content.is-cream {
    border-color: var(--cream);
    border-width: 2px;
}