/* ===========================================
   ANIMATED FOLDER ICON - Enhanced Version
   =========================================== */
.category-card-icon-animated {
    position: relative;
    width: 100px !important;
    height: 80px !important;
    background: #eee;
    box-sizing: border-box;
    border-style: solid;
    border-radius: 0 5px 5px 5px !important;
    transition: border-top-width 0.3s ease, transform 0.2s ease;
    transform-origin: 0% 100%;
    cursor: pointer;
    flex-shrink: 0;
    display: block !important;
}

/* Tab on top */
.category-card-icon-animated:before {
    content: '';
    position: absolute;
    border-radius: 3px 3px 0 0;
}

/* Foldover effect */
.category-card-icon-animated:after {
    content: '';
    position: absolute;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    transition: transform 0.2s ease, background 0.2s ease;
    transform-origin: 0% 100%;
}

/* Icon positioning */
.category-card-icon-animated .ri {
    position: absolute !important;
    z-index: 2;
    width: 100px;
    height: 73px;
    line-height: 73px !important;
    text-align: center;
    bottom: -7px;
    left: -7px;

    transition: transform 0.2s ease;
    transform-origin: 0% 100%;
    font-size: 45px !important;
}

/* Hover Animation */
.category-card-large:hover .category-card-icon-animated {
    border-top-width: 7px !important;
}

.category-card-large:hover .category-card-icon-animated:after,
.category-card-large:hover .category-card-icon-animated .ri {
    transform: scaleY(0.85) skewX(-15deg);
}

/* Color Variants - Blue */
.category-card-icon-animated.blue {
    border-width: 7px;
    border-color: rgb(130, 190, 250);
    border-top-width: 28px;
}
.category-card-icon-animated.blue:before {
    background: rgb(130, 190, 250);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.blue:after {
    background: rgb(110, 170, 230);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.blue .ri {
    color: rgb(70, 130, 190);
}
.category-card-large:hover .category-card-icon-animated.blue:after {
    background: rgb(95, 155, 215);
}

/* Color Variants - Green */
.category-card-icon-animated.green {
    border-width: 7px;
    border-color: rgb(134, 239, 172);
    border-top-width: 28px;
}
.category-card-icon-animated.green:before {
    background: rgb(134, 239, 172);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.green:after {
    background: rgb(110, 215, 148);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.green .ri {
    color: rgb(74, 175, 108);
}
.category-card-large:hover .category-card-icon-animated.green:after {
    background: rgb(95, 195, 133);
}

/* Color Variants - Purple */
.category-card-icon-animated.purple {
    border-width: 7px;
    border-color: rgb(216, 180, 254);
    border-top-width: 28px;
}
.category-card-icon-animated.purple:before {
    background: rgb(216, 180, 254);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.purple:after {
    background: rgb(196, 160, 234);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.purple .ri {
    color: rgb(146, 110, 184);
}
.category-card-large:hover .category-card-icon-animated.purple:after {
    background: rgb(176, 145, 214);
}

/* Color Variants - Orange */
.category-card-icon-animated.orange {
    border-width: 7px;
    border-color: rgb(253, 186, 116);
    border-top-width: 28px;
}
.category-card-icon-animated.orange:before {
    background: rgb(253, 186, 116);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.orange:after {
    background: rgb(233, 166, 96);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.orange .ri {
    color: rgb(193, 126, 56);
}
.category-card-large:hover .category-card-icon-animated.orange:after {
    background: rgb(213, 151, 81);
}

/* Color Variants - Red */
.category-card-icon-animated.red {
    border-width: 7px;
    border-color: rgb(252, 165, 165);
    border-top-width: 28px;
}
.category-card-icon-animated.red:before {
    background: rgb(252, 165, 165);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.red:after {
    background: rgb(232, 145, 145);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.red .ri {
    color: rgb(192, 105, 105);
}
.category-card-large:hover .category-card-icon-animated.red:after {
    background: rgb(212, 130, 130);
}

/* Color Variants - Indigo */
.category-card-icon-animated.indigo {
    border-width: 7px;
    border-color: rgb(165, 180, 252);
    border-top-width: 28px;
}
.category-card-icon-animated.indigo:before {
    background: rgb(165, 180, 252);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.indigo:after {
    background: rgb(145, 160, 232);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.indigo .ri {
    color: rgb(105, 120, 192);
}
.category-card-large:hover .category-card-icon-animated.indigo:after {
    background: rgb(130, 145, 212);
}

/* Color Variants - Yellow */
.category-card-icon-animated.yellow {
    border-width: 7px;
    border-color: rgb(253, 224, 71);
    border-top-width: 28px;
}
.category-card-icon-animated.yellow:before {
    background: rgb(253, 224, 71);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.yellow:after {
    background: rgb(233, 204, 51);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.yellow .ri {
    color: rgb(193, 164, 11);
}
.category-card-large:hover .category-card-icon-animated.yellow:after {
    background: rgb(213, 184, 36);
}

/* Color Variants - Cyan */
.category-card-icon-animated.cyan {
    border-width: 7px;
    border-color: rgb(103, 232, 249);
    border-top-width: 28px;
}
.category-card-icon-animated.cyan:before {
    background: rgb(103, 232, 249);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.cyan:after {
    background: rgb(83, 212, 229);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.cyan .ri {
    color: rgb(43, 172, 189);
}
.category-card-large:hover .category-card-icon-animated.cyan:after {
    background: rgb(68, 197, 214);
}

/* Color Variants - Pink */
.category-card-icon-animated.pink {
    border-width: 7px;
    border-color: rgb(249, 168, 212);
    border-top-width: 28px;
}
.category-card-icon-animated.pink:before {
    background: rgb(249, 168, 212);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.pink:after {
    background: rgb(229, 148, 192);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.pink .ri {
    color: rgb(189, 108, 152);
}
.category-card-large:hover .category-card-icon-animated.pink:after {
    background: rgb(209, 133, 177);
}

/* Color Variants - Gray */
.category-card-icon-animated.gray {
    border-width: 7px;
    border-color: rgb(209, 213, 219);
    border-top-width: 28px;
}
.category-card-icon-animated.gray:before {
    background: rgb(209, 213, 219);
    width: 35px;
    height: 5px;
    bottom: 66px;
    left: -7px;
}
.category-card-icon-animated.gray:after {
    background: rgb(189, 193, 199);
    width: 100px;
    height: 73px;
    bottom: -7px;
    left: -7px;
}
.category-card-icon-animated.gray .ri {
    color: rgb(139, 143, 149);
}
.category-card-large:hover .category-card-icon-animated.gray:after {
    background: rgb(174, 178, 184);
}


/* ===========================================
   TENDER FOLDER CARDS - Grid View
   =========================================== */
.tender-card-folder {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tender-card-folder:hover {
    border-color: #3b82f6;

    transform: translateY(-2px);
}

.folder-icon-animated-small {
    position: relative;
    width: 80px !important;
    height: 64px !important;
    background: #eee;
    box-sizing: border-box;
    border-style: solid;
    border-radius: 0 4px 4px 4px !important;
    transition: border-top-width 0.3s ease, transform 0.2s ease;
    transform-origin: 0% 100%;
    flex-shrink: 0;
    margin-bottom: 16px;
}

.folder-icon-animated-small:before {
    content: '';
    position: absolute;
    border-radius: 2px 2px 0 0;
}

.folder-icon-animated-small:after {
    content: '';
    position: absolute;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    transition: transform 0.2s ease, background 0.2s ease;
    transform-origin: 0% 100%;
}

.folder-icon-animated-small .ri {
    position: absolute !important;
    z-index: 2;
    width: 80px;
    height: 58px;
    line-height: 58px !important;
    text-align: center;
    bottom: -6px;
    left: -6px;

    transition: transform 0.2s ease;
    transform-origin: 0% 100%;
    font-size: 36px !important;
}

.folder-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
    z-index: 3;

}

.tender-card-folder:hover .folder-icon-animated-small {
    border-top-width: 6px !important;
}

.tender-card-folder:hover .folder-icon-animated-small:after,
.tender-card-folder:hover .folder-icon-animated-small .ri {
    transform: scaleY(0.85) skewX(-15deg);
}

.tender-card-info {
    width: 100%;
}

.tender-card-number {
    font-size: 12px;
    color: #3b82f6;
    font-weight: 600;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tender-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tender-card-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

/* Color variants for small folders - Blue */
.folder-icon-animated-small.blue {
    border-width: 6px;
    border-color: rgb(130, 190, 250);
    border-top-width: 22px;
}
.folder-icon-animated-small.blue:before {
    background: rgb(130, 190, 250);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.blue:after {
    background: rgb(110, 170, 230);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.blue .ri {
    color: rgb(70, 130, 190);
}
.tender-card-folder:hover .folder-icon-animated-small.blue:after {
    background: rgb(95, 155, 215);
}

/* Similar variants for other colors - Green */
.folder-icon-animated-small.green {
    border-width: 6px;
    border-color: rgb(134, 239, 172);
    border-top-width: 22px;
}
.folder-icon-animated-small.green:before {
    background: rgb(134, 239, 172);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.green:after {
    background: rgb(110, 215, 148);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.green .ri {
    color: rgb(74, 175, 108);
}
.tender-card-folder:hover .folder-icon-animated-small.green:after {
    background: rgb(95, 195, 133);
}

/* Purple */
.folder-icon-animated-small.purple {
    border-width: 6px;
    border-color: rgb(216, 180, 254);
    border-top-width: 22px;
}
.folder-icon-animated-small.purple:before {
    background: rgb(216, 180, 254);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.purple:after {
    background: rgb(196, 160, 234);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.purple .ri {
    color: rgb(146, 110, 184);
}
.tender-card-folder:hover .folder-icon-animated-small.purple:after {
    background: rgb(176, 145, 214);
}

/* Orange */
.folder-icon-animated-small.orange {
    border-width: 6px;
    border-color: rgb(253, 186, 116);
    border-top-width: 22px;
}
.folder-icon-animated-small.orange:before {
    background: rgb(253, 186, 116);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.orange:after {
    background: rgb(233, 166, 96);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.orange .ri {
    color: rgb(193, 126, 56);
}
.tender-card-folder:hover .folder-icon-animated-small.orange:after {
    background: rgb(213, 151, 81);
}

/* Add other colors (cyan, pink, indigo, yellow, red, gray) following same pattern */
.folder-icon-animated-small.cyan {
    border-width: 6px;
    border-color: rgb(103, 232, 249);
    border-top-width: 22px;
}
.folder-icon-animated-small.cyan:before {
    background: rgb(103, 232, 249);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.cyan:after {
    background: rgb(83, 212, 229);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.cyan .ri {
    color: rgb(43, 172, 189);
}
.tender-card-folder:hover .folder-icon-animated-small.cyan:after {
    background: rgb(68, 197, 214);
}

.folder-icon-animated-small.pink {
    border-width: 6px;
    border-color: rgb(249, 168, 212);
    border-top-width: 22px;
}
.folder-icon-animated-small.pink:before {
    background: rgb(249, 168, 212);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.pink:after {
    background: rgb(229, 148, 192);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.pink .ri {
    color: rgb(189, 108, 152);
}
.tender-card-folder:hover .folder-icon-animated-small.pink:after {
    background: rgb(209, 133, 177);
}

.folder-icon-animated-small.indigo {
    border-width: 6px;
    border-color: rgb(165, 180, 252);
    border-top-width: 22px;
}
.folder-icon-animated-small.indigo:before {
    background: rgb(165, 180, 252);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.indigo:after {
    background: rgb(145, 160, 232);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.indigo .ri {
    color: rgb(105, 120, 192);
}
.tender-card-folder:hover .folder-icon-animated-small.indigo:after {
    background: rgb(130, 145, 212);
}

.folder-icon-animated-small.yellow {
    border-width: 6px;
    border-color: rgb(253, 224, 71);
    border-top-width: 22px;
}
.folder-icon-animated-small.yellow:before {
    background: rgb(253, 224, 71);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.yellow:after {
    background: rgb(233, 204, 51);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.yellow .ri {
    color: rgb(193, 164, 11);
}
.tender-card-folder:hover .folder-icon-animated-small.yellow:after {
    background: rgb(213, 184, 36);
}

.folder-icon-animated-small.red {
    border-width: 6px;
    border-color: rgb(252, 165, 165);
    border-top-width: 22px;
}
.folder-icon-animated-small.red:before {
    background: rgb(252, 165, 165);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.red:after {
    background: rgb(232, 145, 145);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.red .ri {
    color: rgb(192, 105, 105);
}
.tender-card-folder:hover .folder-icon-animated-small.red:after {
    background: rgb(212, 130, 130);
}

.folder-icon-animated-small.gray {
    border-width: 6px;
    border-color: rgb(209, 213, 219);
    border-top-width: 22px;
}
.folder-icon-animated-small.gray:before {
    background: rgb(209, 213, 219);
    width: 28px;
    height: 4px;
    bottom: 52px;
    left: -6px;
}
.folder-icon-animated-small.gray:after {
    background: rgb(189, 193, 199);
    width: 80px;
    height: 58px;
    bottom: -6px;
    left: -6px;
}
.folder-icon-animated-small.gray .ri {
    color: rgb(139, 143, 149);
}
.tender-card-folder:hover .folder-icon-animated-small.gray:after {
    background: rgb(174, 178, 184);
}