/* /Layout/AuthLayout.razor.rz.scp.css */
.auth-page[b-ajjfaixys0] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.auth-page[b-ajjfaixys0]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 40%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    animation: float-b-ajjfaixys0 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float-b-ajjfaixys0 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(1deg); }
    66% { transform: translate(-20px, 20px) rotate(-1deg); }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-qhsavbj0sd] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-qhsavbj0sd] {
    flex: 1;
}

.sidebar[b-qhsavbj0sd] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-qhsavbj0sd] {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1a0533 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* User info area */
.user-info[b-qhsavbj0sd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-profile-link[b-qhsavbj0sd] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    transition: all 0.25s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.user-profile-link:hover[b-qhsavbj0sd] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(139, 92, 246, 0.25);
}

.user-profile-link:hover .user-name[b-qhsavbj0sd] {
    color: #c4b5fd;
}

.user-avatar[b-qhsavbj0sd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

.user-name[b-qhsavbj0sd] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.btn-logout[b-qhsavbj0sd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-logout:hover[b-qhsavbj0sd] {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.btn-logout:active[b-qhsavbj0sd] {
    transform: translateY(0);
}

@media (max-width: 640.98px) {
    .top-row[b-qhsavbj0sd] {
        justify-content: space-between;
    }
}

@media (min-width: 641px) {
    .page[b-qhsavbj0sd] {
        flex-direction: row;
    }

    .sidebar[b-qhsavbj0sd] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-qhsavbj0sd] {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .top-row[b-qhsavbj0sd],
    article[b-qhsavbj0sd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-6e8bl84l84] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-6e8bl84l84] {
    min-height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
}

.navbar-brand[b-6e8bl84l84] {
    font-size: 1.1rem;
}

.bi[b-6e8bl84l84] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-6e8bl84l84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-6e8bl84l84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z'/%3E%3Cpath d='M15 6.5a1.5 1.5 0 0 0-1.5-1.5H13v4h1.5A1.5 1.5 0 0 0 15 7.5v-1zM13 6h.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H13V6z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-6e8bl84l84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-bar-chart-nav-menu[b-6e8bl84l84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5h-2v12h2V2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zM1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z'/%3E%3C/svg%3E");
}

.bi-box-nav-menu[b-6e8bl84l84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z'/%3E%3C/svg%3E");
}

.bi-cart-nav-menu[b-6e8bl84l84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

.bi-bag-nav-menu[b-6e8bl84l84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z'/%3E%3C/svg%3E");
}

.bi-clipboard-nav-menu[b-6e8bl84l84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}

.bi-check2-square-nav-menu[b-6e8bl84l84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z'/%3E%3C/svg%3E");
}

.nav-item[b-6e8bl84l84] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type[b-6e8bl84l84] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-6e8bl84l84] {
    padding-bottom: 1rem;
}

.nav-item[b-6e8bl84l84]  a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.nav-item[b-6e8bl84l84]  a.active {
    background-color: rgba(255, 255, 255, 0.37);
    color: white;
}

.nav-item[b-6e8bl84l84]  a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-6e8bl84l84] {
        display: none;
    }

    .collapse[b-6e8bl84l84] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-6e8bl84l84] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/ActivityLog.razor.rz.scp.css */
.log-container[b-m4voh3owqw] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.log-header[b-m4voh3owqw] {
    margin-bottom: 2rem;
}

.log-header h1[b-m4voh3owqw] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.log-subtitle[b-m4voh3owqw] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-m4voh3owqw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: slideDown-b-m4voh3owqw 0.3s ease;
}

.alert-success[b-m4voh3owqw] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-error[b-m4voh3owqw] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

@keyframes slideDown-b-m4voh3owqw {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Summary Cards */
.summary-cards[b-m4voh3owqw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.summary-card[b-m4voh3owqw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.summary-card:hover[b-m4voh3owqw] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-icon[b-m4voh3owqw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
}

.total-card .card-icon[b-m4voh3owqw] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.add-card .card-icon[b-m4voh3owqw] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.update-card .card-icon[b-m4voh3owqw] {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.delete-card .card-icon[b-m4voh3owqw] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.card-content[b-m4voh3owqw] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.card-label[b-m4voh3owqw] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value[b-m4voh3owqw] {
    font-size: 1.35rem;
    font-weight: 700;
}

.total-value[b-m4voh3owqw] {
    color: #6366f1;
}

.add-value[b-m4voh3owqw] {
    color: #16a34a;
}

.update-value[b-m4voh3owqw] {
    color: #0ea5e9;
}

.delete-value[b-m4voh3owqw] {
    color: #ef4444;
}

/* Content Section */
.content-section[b-m4voh3owqw] {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.section-header[b-m4voh3owqw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.section-header h2[b-m4voh3owqw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

/* Filter Row */
.filter-row[b-m4voh3owqw] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.filter-group[b-m4voh3owqw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-m4voh3owqw] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

/* Status Filters */
.status-filters[b-m4voh3owqw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-chip[b-m4voh3owqw] {
    padding: 0.4rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-m4voh3owqw] {
    border-color: #cbd5e1;
    color: #475569;
}

.filter-chip-active[b-m4voh3owqw] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

/* Search Bar */
.search-bar[b-m4voh3owqw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
    color: #94a3b8;
}

.search-bar:focus-within[b-m4voh3owqw] {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-input[b-m4voh3owqw] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: #334155;
    outline: none;
}

.search-input[b-m4voh3owqw]::placeholder {
    color: #94a3b8;
}

/* Log Table */
.log-table-wrapper[b-m4voh3owqw] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}

.log-table[b-m4voh3owqw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.log-table thead[b-m4voh3owqw] {
    background: #f8fafc;
}

.log-table th[b-m4voh3owqw] {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.log-table td[b-m4voh3owqw] {
    padding: 0.85rem 1rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.log-table tbody tr[b-m4voh3owqw] {
    transition: all 0.2s ease;
}

.log-table tbody tr:hover[b-m4voh3owqw] {
    background: #f8fafc;
}

.log-table tbody tr:last-child td[b-m4voh3owqw] {
    border-bottom: none;
}

.text-center[b-m4voh3owqw] {
    text-align: center;
}

/* User Info */
.user-info[b-m4voh3owqw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.user-avatar[b-m4voh3owqw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.user-name[b-m4voh3owqw] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.85rem;
}

/* Action Badges */
.action-badge[b-m4voh3owqw] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.action-add[b-m4voh3owqw] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.action-update[b-m4voh3owqw] {
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
}

.action-delete[b-m4voh3owqw] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Entity Badges */
.entity-badge[b-m4voh3owqw] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}

.entity-sale[b-m4voh3owqw] {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
}

.entity-purchase[b-m4voh3owqw] {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
}

.entity-stock[b-m4voh3owqw] {
    background: rgba(14, 165, 233, 0.08);
    color: #0ea5e9;
}

/* Description */
.description-text[b-m4voh3owqw] {
    font-size: 0.85rem;
    color: #475569;
    max-width: 350px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Date Info */
.date-info[b-m4voh3owqw] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.date-text[b-m4voh3owqw] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.time-text[b-m4voh3owqw] {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Empty State */
.empty-state[b-m4voh3owqw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-m4voh3owqw] {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h3[b-m4voh3owqw] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.35rem 0;
}

.empty-state p[b-m4voh3owqw] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    max-width: 300px;
}

/* Responsive */
@media (max-width: 768px) {
    .log-container[b-m4voh3owqw] {
        padding: 1rem;
    }

    .summary-cards[b-m4voh3owqw] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-row[b-m4voh3owqw] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-group[b-m4voh3owqw] {
        flex-direction: column;
        align-items: flex-start;
    }

    .description-text[b-m4voh3owqw] {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .summary-cards[b-m4voh3owqw] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Budget.razor.rz.scp.css */
.budget-container[b-er81yciakm] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.budget-header[b-er81yciakm] {
    margin-bottom: 2rem;
}

.budget-header h1[b-er81yciakm] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.budget-subtitle[b-er81yciakm] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: slideDown-b-er81yciakm 0.3s ease;
}

.alert-success[b-er81yciakm] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-error[b-er81yciakm] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

@keyframes slideDown-b-er81yciakm {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Summary Cards */
.summary-cards[b-er81yciakm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.summary-card[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.summary-card:hover[b-er81yciakm] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-icon[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
}

.income-card .card-icon[b-er81yciakm] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.expense-card .card-icon[b-er81yciakm] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.balance-card .card-icon[b-er81yciakm] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.card-content[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.card-label[b-er81yciakm] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value[b-er81yciakm] {
    font-size: 1.35rem;
    font-weight: 700;
}

.income-value[b-er81yciakm] {
    color: #16a34a;
}

.expense-value[b-er81yciakm] {
    color: #dc2626;
}

.balance-value[b-er81yciakm] {
    color: #6366f1;
}

/* Sections */
.content-section[b-er81yciakm] {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.recurring-section[b-er81yciakm] {
    margin-bottom: 1.5rem;
}

.income-expense-section[b-er81yciakm] {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.transactions-section[b-er81yciakm] {
    margin-top: 1rem;
}

/* Date Filter Chips */
.ie-date-filter[b-er81yciakm] {
    display: flex;
    gap: 0.4rem;
}

.date-chip[b-er81yciakm] {
    padding: 0.35rem 0.75rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.date-chip:hover[b-er81yciakm] {
    border-color: #cbd5e1;
    color: #475569;
}

.date-chip-active[b-er81yciakm] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

/* Income/Expense Type Tabs */
.ie-type-tabs[b-er81yciakm] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ie-tab[b-er81yciakm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
}

.ie-tab:hover[b-er81yciakm] {
    border-color: #cbd5e1;
    color: #475569;
}

.ie-tab-active.ie-tab-income[b-er81yciakm] {
    border-color: #16a34a;
    background: rgba(34, 197, 94, 0.06);
    color: #16a34a;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

.ie-tab-active.ie-tab-expense[b-er81yciakm] {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.06);
    color: #dc2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

/* Total Bar */
.ie-total-bar[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    margin-bottom: 1rem;
}

.ie-total-label[b-er81yciakm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

.ie-total-value[b-er81yciakm] {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Custom Date Range */
.ie-custom-dates[b-er81yciakm] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}

.ie-date-input[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.ie-date-input label[b-er81yciakm] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.ie-date-input .form-input[b-er81yciakm] {
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
}

.ie-date-separator[b-er81yciakm] {
    color: #94a3b8;
    font-weight: 600;
    padding-bottom: 0.5rem;
}

/* Pagination */
.pagination[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.pagination-btn[b-er81yciakm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled)[b-er81yciakm] {
    border-color: #6366f1;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.04);
}

.pagination-btn:disabled[b-er81yciakm] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info[b-er81yciakm] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.section-header[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.section-header-left[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.section-header h2[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

/* Toggle Button */
.btn-toggle[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.btn-toggle:hover[b-er81yciakm] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.btn-toggle.toggle-open[b-er81yciakm] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.btn-toggle.toggle-open:hover[b-er81yciakm] {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

/* Collapsible Transactions Body */
.transactions-body[b-er81yciakm] {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}

.transactions-body-open[b-er81yciakm] {
    max-height: 2000px;
    opacity: 1;
}

.transactions-body-closed[b-er81yciakm] {
    max-height: 0;
    opacity: 0;
}

/* Add Button */
.btn-add[b-er81yciakm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.btn-add:hover[b-er81yciakm] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

/* Category Filters */
.category-filters[b-er81yciakm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.filter-chip[b-er81yciakm] {
    padding: 0.4rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-er81yciakm] {
    border-color: #cbd5e1;
    color: #475569;
}

.filter-chip-active[b-er81yciakm] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

/* Transactions List */
.transactions-list[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.transaction-item[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.transaction-item:hover[b-er81yciakm] {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.transaction-left[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.transaction-type-icon[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.type-income[b-er81yciakm] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.type-expense[b-er81yciakm] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.transaction-details[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.transaction-desc[b-er81yciakm] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}

.transaction-meta[b-er81yciakm] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.transaction-right[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.transaction-amount[b-er81yciakm] {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.btn-delete[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete:hover[b-er81yciakm] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Empty State */
.empty-state[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-er81yciakm] {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h3[b-er81yciakm] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.35rem 0;
}

.empty-state p[b-er81yciakm] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    max-width: 300px;
}

/* Modal */
.modal-overlay[b-er81yciakm] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-er81yciakm 0.2s ease;
}

@keyframes fadeIn-b-er81yciakm {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content[b-er81yciakm] {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    animation: modalSlide-b-er81yciakm 0.3s ease;
}

@keyframes modalSlide-b-er81yciakm {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.modal-header h2[b-er81yciakm] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.modal-close[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-er81yciakm] {
    background: #f1f5f9;
    color: #475569;
}

.modal-body[b-er81yciakm] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.modal-footer[b-er81yciakm] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
}

/* Type Selector */
.type-selector[b-er81yciakm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.type-btn[b-er81yciakm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-btn:hover[b-er81yciakm] {
    border-color: #cbd5e1;
}

.type-btn-active.income-active[b-er81yciakm] {
    border-color: #16a34a;
    background: rgba(34, 197, 94, 0.05);
    color: #16a34a;
}

.type-btn-active.expense-active[b-er81yciakm] {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.05);
    color: #dc2626;
}

/* Form elements */
.form-group[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group label[b-er81yciakm] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.form-input[b-er81yciakm] {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #334155;
    background: #f8fafc;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.form-input:focus[b-er81yciakm] {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-select[b-er81yciakm] {
    appearance: none;
    cursor: pointer;
}

.category-row[b-er81yciakm] {
    display: flex;
    gap: 0.5rem;
}

.category-row .form-input[b-er81yciakm] {
    flex: 1;
}

.btn-new-category[b-er81yciakm] {
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #6366f1;
    border-radius: 10px;
    background: transparent;
    color: #6366f1;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-new-category:hover[b-er81yciakm] {
    background: rgba(99, 102, 241, 0.05);
}

.btn-cancel-category[b-er81yciakm] {
    border-color: #94a3b8;
    color: #94a3b8;
}

.btn-cancel-category:hover[b-er81yciakm] {
    background: rgba(148, 163, 184, 0.05);
}

/* Buttons */
.btn-primary[b-er81yciakm],
.btn-secondary[b-er81yciakm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-er81yciakm] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover[b-er81yciakm] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

.btn-primary:disabled[b-er81yciakm] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-er81yciakm] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-er81yciakm] {
    background: #e2e8f0;
}

/* Pie Chart Section */
.chart-section[b-er81yciakm] {
    margin-bottom: 1.5rem;
}

.chart-container[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.pie-chart[b-er81yciakm] {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.pie-chart[b-er81yciakm]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pie-chart:hover[b-er81yciakm] {
    transform: scale(1.03);
}

.chart-legend[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.legend-item[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.legend-item:hover[b-er81yciakm] {
    background: #f8fafc;
}

.legend-color[b-er81yciakm] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.legend-info[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.legend-name[b-er81yciakm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.legend-detail[b-er81yciakm] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

/* ===== Monthly Line Chart ===== */
.monthly-chart-section[b-er81yciakm] {
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.line-chart-wrapper[b-er81yciakm] {
    position: relative;
    padding: 1rem 0;
}

.line-chart-container[b-er81yciakm] {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.y-axis[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0.75rem 28px 0;
    min-width: 60px;
    text-align: right;
}

.y-label[b-er81yciakm] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1;
}

.chart-area[b-er81yciakm] {
    flex: 1;
    position: relative;
    min-height: 250px;
}

.chart-grid[b-er81yciakm],
.chart-svg[b-er81yciakm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 28px);
}

.chart-svg[b-er81yciakm] {
    z-index: 2;
}

.chart-grid[b-er81yciakm] {
    z-index: 1;
}

.x-axis[b-er81yciakm] {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 8px;
}

.x-label[b-er81yciakm] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
    flex: 1;
}

/* Data Points */
.data-point[b-er81yciakm] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.data-point:hover[b-er81yciakm] {
    r: 8;
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.5));
}

/* Tooltip */
.chart-tooltip[b-er81yciakm] {
    position: absolute;
    z-index: 10;
    background: #1e293b;
    color: #fff;
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    pointer-events: none;
    transform: translateX(-50%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: tooltipFade-b-er81yciakm 0.15s ease;
    white-space: nowrap;
}

.chart-tooltip[b-er81yciakm]::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1e293b;
}

@keyframes tooltipFade-b-er81yciakm {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.tooltip-month[b-er81yciakm] {
    font-size: 0.72rem;
    font-weight: 500;
    color: #94a3b8;
}

.tooltip-amount[b-er81yciakm] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 768px) {
    .budget-container[b-er81yciakm] {
        padding: 1rem;
    }

    .chart-container[b-er81yciakm] {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .pie-chart[b-er81yciakm] {
        width: 160px;
        height: 160px;
    }

    .pie-chart[b-er81yciakm]::after {
        width: 80px;
        height: 80px;
    }

    .y-axis[b-er81yciakm] {
        min-width: 45px;
    }

    .y-label[b-er81yciakm],
    .x-label[b-er81yciakm] {
        font-size: 0.6rem;
    }

    .chart-area[b-er81yciakm] {
        min-height: 200px;
    }

    .recurring-tabs[b-er81yciakm] {
        flex-direction: column;
    }

    .recurring-card-header[b-er81yciakm] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .recurring-card-right[b-er81yciakm] {
        align-self: flex-end;
    }
}

/* ===== Recurring Payments Section ===== */
.recurring-section[b-er81yciakm] {
    margin-top: 1.5rem;
}

/* Tabs */
.recurring-tabs[b-er81yciakm] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.recurring-tab[b-er81yciakm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
}

.recurring-tab:hover[b-er81yciakm] {
    border-color: #cbd5e1;
    color: #475569;
    background: #f8fafc;
}

.recurring-tab-active[b-er81yciakm] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

.recurring-tab-active:hover[b-er81yciakm] {
    background: linear-gradient(135deg, #5558e6, #7c4fe0);
    color: #fff;
    border-color: transparent;
}

.tab-count[b-er81yciakm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
    line-height: 1;
}

.recurring-tab-active .tab-count[b-er81yciakm] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Recurring Payment Cards */
.recurring-list[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recurring-card[b-er81yciakm] {
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: all 0.25s ease;
}

.recurring-card:hover[b-er81yciakm] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.recurring-card-inactive[b-er81yciakm] {
    opacity: 0.6;
}

.recurring-card-header[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.recurring-card-left[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.recurring-icon[b-er81yciakm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    flex-shrink: 0;
}

.recurring-info[b-er81yciakm] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.recurring-name[b-er81yciakm] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.recurring-meta[b-er81yciakm] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.recurring-card-right[b-er81yciakm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.recurring-amount[b-er81yciakm] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #dc2626;
}

.recurring-badge[b-er81yciakm] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-active[b-er81yciakm] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.badge-inactive[b-er81yciakm] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

/* Card Actions */
.recurring-card-actions[b-er81yciakm] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid #e2e8f0;
}

.btn-cancel-recurring[b-er81yciakm],
.btn-delete-recurring[b-er81yciakm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-recurring[b-er81yciakm] {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.btn-cancel-recurring:hover[b-er81yciakm] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.5);
}

.btn-delete-recurring[b-er81yciakm] {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-delete-recurring:hover[b-er81yciakm] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Recurring Modal Type Active */
.type-btn-active.recurring-type-active[b-er81yciakm] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
    color: #6366f1;
}
/* /Pages/Home.razor.rz.scp.css */
.home-container[b-7n7lfzpat3] {
    padding: 2rem;
}

.dashboard-row[b-7n7lfzpat3] {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

/* Ortak Kart Stili */
.dashboard-card[b-7n7lfzpat3] {
    flex: 1;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dashboard-card:hover[b-7n7lfzpat3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Hoş Geldiniz Kartı */
.welcome-card[b-7n7lfzpat3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.welcome-icon[b-7n7lfzpat3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    color: #6366f1;
    margin-bottom: 1.25rem;
}

.welcome-card h1[b-7n7lfzpat3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.6rem;
}

.username-highlight[b-7n7lfzpat3] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-text[b-7n7lfzpat3] {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

/* Bütçe Özet Kartı */
.budget-summary-card[b-7n7lfzpat3] {
    display: flex;
    flex-direction: column;
}

.budget-card-header[b-7n7lfzpat3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.15rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.budget-card-icon[b-7n7lfzpat3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.budget-card-title[b-7n7lfzpat3] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: -0.01em;
}

.budget-card-body[b-7n7lfzpat3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.budget-stat[b-7n7lfzpat3] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.stat-icon[b-7n7lfzpat3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
}

.stat-income[b-7n7lfzpat3] {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.stat-expense[b-7n7lfzpat3] {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.stat-balance[b-7n7lfzpat3] {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.stat-info[b-7n7lfzpat3] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
}

.stat-label[b-7n7lfzpat3] {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-value[b-7n7lfzpat3] {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.income-color[b-7n7lfzpat3] {
    color: #059669;
}

.expense-color[b-7n7lfzpat3] {
    color: #dc2626;
}

.budget-divider[b-7n7lfzpat3] {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 0.1rem 0;
}

.budget-stat-balance[b-7n7lfzpat3] {
    padding-top: 0.1rem;
}

.budget-card-link[b-7n7lfzpat3] {
    display: block;
    text-align: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.82rem;
    font-weight: 600;
    color: #6366f1;
    text-decoration: none;
    transition: color 0.2s ease;
}

.budget-card-link:hover[b-7n7lfzpat3] {
    color: #4f46e5;
}

/* İkinci Satır: Stok, Satış, Alış */
.summary-row[b-7n7lfzpat3] {
    margin-top: 1.5rem;
}

.summary-mini-card[b-7n7lfzpat3] {
    display: flex;
    flex-direction: column;
}

/* Stok Kartı Renkleri */
.stock-icon[b-7n7lfzpat3] {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
}

.stock-color[b-7n7lfzpat3] {
    color: #ea580c;
}

.stock-link[b-7n7lfzpat3] {
    color: #f97316 !important;
}

.stock-link:hover[b-7n7lfzpat3] {
    color: #ea580c !important;
}

.stat-stock-total[b-7n7lfzpat3] {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}

.stat-stock-value[b-7n7lfzpat3] {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}

.stat-stock-warning[b-7n7lfzpat3] {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

/* Satış Kartı Renkleri */
.sales-icon[b-7n7lfzpat3] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}

.sales-color[b-7n7lfzpat3] {
    color: #6366f1;
}

.sales-link[b-7n7lfzpat3] {
    color: #6366f1 !important;
}

.sales-link:hover[b-7n7lfzpat3] {
    color: #4f46e5 !important;
}

.stat-sales-total[b-7n7lfzpat3] {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.stat-sales-pending[b-7n7lfzpat3] {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

/* Alış Kartı Renkleri */
.purchases-icon[b-7n7lfzpat3] {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
}

.purchases-color[b-7n7lfzpat3] {
    color: #14b8a6;
}

.purchases-link[b-7n7lfzpat3] {
    color: #14b8a6 !important;
}

.purchases-link:hover[b-7n7lfzpat3] {
    color: #0d9488 !important;
}

.stat-purchases-total[b-7n7lfzpat3] {
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
}

.stat-purchases-pending[b-7n7lfzpat3] {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

/* Uyarı Rengi */
.warning-color[b-7n7lfzpat3] {
    color: #d97706;
}

/* Responsive — Küçük Ekranlarda Alt Alta */
@media (max-width: 768px) {
    .dashboard-row[b-7n7lfzpat3] {
        flex-direction: column;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* ===== Auth Card ===== */
.auth-card[b-mj2iqz8r5t] {
    width: 100%;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    animation: slideUp-b-mj2iqz8r5t 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp-b-mj2iqz8r5t {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Alerts ===== */
.alert[b-mj2iqz8r5t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    animation: slideUp-b-mj2iqz8r5t 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.alert svg[b-mj2iqz8r5t] {
    flex-shrink: 0;
}

.alert-success[b-mj2iqz8r5t] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

.alert-error[b-mj2iqz8r5t] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* ===== Header ===== */
.auth-header[b-mj2iqz8r5t] {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-icon[b-mj2iqz8r5t] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.auth-header h1[b-mj2iqz8r5t] {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-mj2iqz8r5t] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.925rem;
    margin: 0;
}

/* ===== Form ===== */
.auth-form[b-mj2iqz8r5t] {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.form-group[b-mj2iqz8r5t] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-mj2iqz8r5t] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-left: 0.25rem;
}

/* ===== Input Wrapper ===== */
.input-wrapper[b-mj2iqz8r5t] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom:0.5rem;
}

.input-icon[b-mj2iqz8r5t] {
    position: absolute;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.input-wrapper:focus-within .input-icon[b-mj2iqz8r5t] {
    color: #818cf8;
}

[b-mj2iqz8r5t] .form-input {
    width: 100% !important;
    padding: 1rem 1rem 1rem 3rem !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
    box-sizing: border-box;
    height: auto !important;
}

[b-mj2iqz8r5t] .form-input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    font-weight: 300;
}

[b-mj2iqz8r5t] .form-input:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

[b-mj2iqz8r5t] .form-input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15),
        0 0 30px rgba(99, 102, 241, 0.1) !important;
}

/* ===== Validation ===== */
[b-mj2iqz8r5t] .validation-message {
    color: #f87171;
    font-size: 0.78rem;
    margin-top: 0.125rem;
    padding-left: 0.5rem;
    font-weight: 500;
}

/* ===== Button ===== */
.btn-auth[b-mj2iqz8r5t] {
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0.5rem;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    letter-spacing: 0.02em;
}

.btn-auth:hover[b-mj2iqz8r5t] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
    background: linear-gradient(135deg, #818cf8, #a78bfa);
}

.btn-auth:active[b-mj2iqz8r5t] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* ===== Footer ===== */
.auth-footer[b-mj2iqz8r5t] {
    text-align: center;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-footer p[b-mj2iqz8r5t] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin: 0;
}

.auth-footer a[b-mj2iqz8r5t] {
    color: #818cf8;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.auth-footer a:hover[b-mj2iqz8r5t] {
    color: #a78bfa;
    text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
    .auth-card[b-mj2iqz8r5t] {
        padding: 2rem 1.5rem;
        border-radius: 20px;
        margin: 0.5rem;
    }

    .auth-header h1[b-mj2iqz8r5t] {
        font-size: 1.5rem;
    }

    .auth-icon[b-mj2iqz8r5t] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }

    .form-input[b-mj2iqz8r5t] {
        padding: 0.8rem 0.9rem;
    }
}
/* /Pages/Profile.razor.rz.scp.css */
.profile-container[b-1urj88xfs3] {
    display: flex;
    justify-content: center;
    padding: 2rem;
    min-height: calc(100vh - 3.5rem);
    background: #f8fafc;
}

.profile-card[b-1urj88xfs3] {
    width: 100%;
    max-width: 600px;
}

.profile-header[b-1urj88xfs3] {
    text-align: center;
    margin-bottom: 2rem;
}

.profile-avatar[b-1urj88xfs3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.profile-header h1[b-1urj88xfs3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.profile-subtitle[b-1urj88xfs3] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

/* Alerts */
.alert[b-1urj88xfs3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: slideDown-b-1urj88xfs3 0.3s ease;
}

.alert-success[b-1urj88xfs3] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-error[b-1urj88xfs3] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

@keyframes slideDown-b-1urj88xfs3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Sections */
.form-section[b-1urj88xfs3] {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.section-title[b-1urj88xfs3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.optional-badge[b-1urj88xfs3] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    margin-left: 0.25rem;
}

/* Form fields */
.form-group[b-1urj88xfs3] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-1urj88xfs3] {
    margin-bottom: 0;
}

.form-group label[b-1urj88xfs3] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.4rem;
}

.input-wrapper[b-1urj88xfs3] {
    position: relative;
    display: flex;
    align-items: center;
}

[b-1urj88xfs3] .input-icon {
    position: absolute;
    left: 0.875rem;
    display: flex;
    align-items: center;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

[b-1urj88xfs3] .form-input {
    width: 100%;
    padding: 0.7rem 0.875rem 0.7rem 2.75rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #334155;
    background: #f8fafc;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

[b-1urj88xfs3] .form-input:focus {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Info field (non-editable) */
.info-field[b-1urj88xfs3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-value[b-1urj88xfs3] {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

/* Loading */
.loading-state[b-1urj88xfs3] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
    font-size: 0.95rem;
}

/* Actions */
.form-actions[b-1urj88xfs3] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.btn-primary[b-1urj88xfs3],
.btn-secondary[b-1urj88xfs3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-1urj88xfs3] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover[b-1urj88xfs3] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

.btn-primary:disabled[b-1urj88xfs3] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-1urj88xfs3] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-1urj88xfs3] {
    background: #e2e8f0;
}

/* Validation */
[b-1urj88xfs3] .validation-message {
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.35rem;
}
/* /Pages/Purchases.razor.rz.scp.css */
.purchases-container[b-zcd95e274u] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.purchases-header[b-zcd95e274u] {
    margin-bottom: 2rem;
}

.purchases-header h1[b-zcd95e274u] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.purchases-subtitle[b-zcd95e274u] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-zcd95e274u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: slideDown-b-zcd95e274u 0.3s ease;
}

.alert-success[b-zcd95e274u] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-error[b-zcd95e274u] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

@keyframes slideDown-b-zcd95e274u {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Summary Cards */
.summary-cards[b-zcd95e274u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.summary-card[b-zcd95e274u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.summary-card:hover[b-zcd95e274u] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-icon[b-zcd95e274u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
}

.total-card .card-icon[b-zcd95e274u] {
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}

.expense-card .card-icon[b-zcd95e274u] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.completed-card .card-icon[b-zcd95e274u] {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.pending-card .card-icon[b-zcd95e274u] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.card-content[b-zcd95e274u] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.card-label[b-zcd95e274u] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value[b-zcd95e274u] {
    font-size: 1.35rem;
    font-weight: 700;
}

.total-value[b-zcd95e274u] {
    color: #14b8a6;
}

.expense-value[b-zcd95e274u] {
    color: #ef4444;
}

.completed-value[b-zcd95e274u] {
    color: #0ea5e9;
}

.pending-value[b-zcd95e274u] {
    color: #d97706;
}

/* Content Section */
.content-section[b-zcd95e274u] {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.section-header[b-zcd95e274u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.section-header h2[b-zcd95e274u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

/* Add Button */
.btn-add[b-zcd95e274u] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

.btn-add:hover[b-zcd95e274u] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.35);
}

/* Status Filters */
.status-filters[b-zcd95e274u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-chip[b-zcd95e274u] {
    padding: 0.4rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-zcd95e274u] {
    border-color: #cbd5e1;
    color: #475569;
}

.filter-chip-active[b-zcd95e274u] {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

/* Search Bar */
.search-bar[b-zcd95e274u] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
    color: #94a3b8;
}

.search-bar:focus-within[b-zcd95e274u] {
    border-color: #14b8a6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.search-input[b-zcd95e274u] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: #334155;
    outline: none;
}

.search-input[b-zcd95e274u]::placeholder {
    color: #94a3b8;
}

/* Purchases Table */
.purchases-table-wrapper[b-zcd95e274u] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}

.purchases-table[b-zcd95e274u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.purchases-table thead[b-zcd95e274u] {
    background: #f8fafc;
}

.purchases-table th[b-zcd95e274u] {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.purchases-table td[b-zcd95e274u] {
    padding: 0.85rem 1rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.purchases-table tbody tr[b-zcd95e274u] {
    transition: all 0.2s ease;
}

.purchases-table tbody tr:hover[b-zcd95e274u] {
    background: #f8fafc;
}

.purchases-table tbody tr:last-child td[b-zcd95e274u] {
    border-bottom: none;
}

.text-center[b-zcd95e274u] {
    text-align: center;
}

.text-right[b-zcd95e274u] {
    text-align: right;
}

.font-bold[b-zcd95e274u] {
    font-weight: 700;
    color: #1e293b;
}

.item-name[b-zcd95e274u] {
    font-weight: 600;
    color: #1e293b;
}

.supplier-name[b-zcd95e274u] {
    color: #475569;
    font-size: 0.85rem;
}

.quantity-value[b-zcd95e274u] {
    font-weight: 700;
    font-size: 0.95rem;
}

.date-text[b-zcd95e274u] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Payment Badges */
.payment-badge[b-zcd95e274u] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}

.payment-cash[b-zcd95e274u] {
    background: rgba(34, 197, 94, 0.08);
    color: #15803d;
}

.payment-card[b-zcd95e274u] {
    background: rgba(20, 184, 166, 0.08);
    color: #14b8a6;
}

.payment-transfer[b-zcd95e274u] {
    background: rgba(14, 165, 233, 0.08);
    color: #0ea5e9;
}

/* Status Badges */
.status-badge[b-zcd95e274u] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.status-completed[b-zcd95e274u] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.status-pending[b-zcd95e274u] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-cancelled[b-zcd95e274u] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Row highlight */
.row-pending[b-zcd95e274u] {
    background: rgba(245, 158, 11, 0.03) !important;
}

.row-pending:hover[b-zcd95e274u] {
    background: rgba(245, 158, 11, 0.08) !important;
}

.row-cancelled[b-zcd95e274u] {
    background: rgba(239, 68, 68, 0.03) !important;
}

.row-cancelled:hover[b-zcd95e274u] {
    background: rgba(239, 68, 68, 0.08) !important;
}

/* Action Buttons */
.action-buttons[b-zcd95e274u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.btn-edit[b-zcd95e274u],
.btn-delete[b-zcd95e274u],
.btn-complete[b-zcd95e274u],
.btn-note[b-zcd95e274u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-zcd95e274u] {
    color: #94a3b8;
}

.btn-edit:hover[b-zcd95e274u] {
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}

.btn-delete[b-zcd95e274u] {
    color: #cbd5e1;
}

.btn-delete:hover[b-zcd95e274u] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-complete[b-zcd95e274u] {
    color: #64748b;
    gap: 0.35rem;
    width: auto;
    min-width: 32px;
    height: 30px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.btn-complete:hover[b-zcd95e274u] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.btn-note[b-zcd95e274u] {
    color: #94a3b8;
}

.btn-note:hover[b-zcd95e274u] {
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
}

/* Açıklama kartı */
.note-card-overlay[b-zcd95e274u] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn-b-zcd95e274u 0.2s ease;
}

.note-card[b-zcd95e274u] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    min-width: 280px;
    max-width: 400px;
    animation: noteCardIn-b-zcd95e274u 0.2s ease;
}

.note-card-header[b-zcd95e274u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.note-card-title[b-zcd95e274u] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.note-card-close[b-zcd95e274u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.note-card-close:hover[b-zcd95e274u] {
    background: #f1f5f9;
    color: #475569;
}

.note-card-body[b-zcd95e274u] {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.note-card-text[b-zcd95e274u] {
    display: block;
}

.note-card-empty[b-zcd95e274u] {
    color: #94a3b8;
    font-style: italic;
}

@keyframes fadeIn-b-zcd95e274u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes noteCardIn-b-zcd95e274u {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-6px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Empty State */
.empty-state[b-zcd95e274u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-zcd95e274u] {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h3[b-zcd95e274u] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.35rem 0;
}

.empty-state p[b-zcd95e274u] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    max-width: 300px;
}

/* Modal */
.modal-overlay[b-zcd95e274u] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-zcd95e274u 0.2s ease;
}

.modal-content[b-zcd95e274u] {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    animation: modalSlide-b-zcd95e274u 0.3s ease;
}

@keyframes modalSlide-b-zcd95e274u {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-zcd95e274u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.modal-header h2[b-zcd95e274u] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.modal-close[b-zcd95e274u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-zcd95e274u] {
    background: #f1f5f9;
    color: #475569;
}

.modal-body[b-zcd95e274u] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-zcd95e274u] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
}

/* Form */
.form-group[b-zcd95e274u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.form-group label[b-zcd95e274u] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.form-row[b-zcd95e274u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-input[b-zcd95e274u] {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #334155;
    background: #f8fafc;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.form-input:focus[b-zcd95e274u] {
    border-color: #14b8a6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.form-textarea[b-zcd95e274u] {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.form-select[b-zcd95e274u] {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* Buttons */
.btn-primary[b-zcd95e274u],
.btn-secondary[b-zcd95e274u] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-zcd95e274u] {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

.btn-primary:hover[b-zcd95e274u] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.35);
}

.btn-primary:disabled[b-zcd95e274u] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-zcd95e274u] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-zcd95e274u] {
    background: #e2e8f0;
}

/* Category Badge */
.category-badge[b-zcd95e274u] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: rgba(20, 184, 166, 0.08);
    color: #14b8a6;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Selected Product Info */
.selected-product-info[b-zcd95e274u] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.05), rgba(13, 148, 136, 0.05));
    border: 1.5px solid rgba(20, 184, 166, 0.15);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.product-info-row[b-zcd95e274u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
}

.info-label[b-zcd95e274u] {
    color: #64748b;
    font-weight: 500;
}

.info-value[b-zcd95e274u] {
    font-weight: 600;
    color: #334155;
}

.info-price[b-zcd95e274u] {
    color: #14b8a6;
    font-size: 0.9rem;
}

/* Calculated Total */
.calculated-total[b-zcd95e274u] {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.875rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(220, 38, 38, 0.08));
    border: 1.5px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #dc2626;
}

/* Disabled Select */
.form-select:disabled[b-zcd95e274u] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f1f5f9;
}

/* Responsive */
@media (max-width: 768px) {
    .purchases-container[b-zcd95e274u] {
        padding: 1rem;
    }

    .summary-cards[b-zcd95e274u] {
        grid-template-columns: 1fr 1fr;
    }

    .form-row[b-zcd95e274u] {
        grid-template-columns: 1fr;
    }

    .purchases-table[b-zcd95e274u] {
        font-size: 0.8rem;
    }

    .purchases-table th[b-zcd95e274u],
    .purchases-table td[b-zcd95e274u] {
        padding: 0.6rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .summary-cards[b-zcd95e274u] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Register.razor.rz.scp.css */
/* ===== Auth Card ===== */
.auth-card[b-wmtewntj9z] {
    width: 100%;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    animation: slideUp-b-wmtewntj9z 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp-b-wmtewntj9z {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Alerts ===== */
.alert[b-wmtewntj9z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    animation: slideUp-b-wmtewntj9z 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.alert svg[b-wmtewntj9z] {
    flex-shrink: 0;
}

.alert-success[b-wmtewntj9z] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

.alert-error[b-wmtewntj9z] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* ===== Header ===== */
.auth-header[b-wmtewntj9z] {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-icon[b-wmtewntj9z] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.auth-header h1[b-wmtewntj9z] {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-wmtewntj9z] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.925rem;
    margin: 0;
}

/* ===== Form ===== */
.auth-form[b-wmtewntj9z] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.form-group[b-wmtewntj9z] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-wmtewntj9z] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-left: 0.25rem;
}

/* ===== Input Wrapper ===== */
.input-wrapper[b-wmtewntj9z] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.input-icon[b-wmtewntj9z] {
    position: absolute;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.input-wrapper:focus-within .input-icon[b-wmtewntj9z] {
    color: #818cf8;
}

[b-wmtewntj9z] .form-input {
    width: 100% !important;
    padding: 1rem 1rem 1rem 3rem !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
    box-sizing: border-box;
    height: auto !important;
}

[b-wmtewntj9z] .form-input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    font-weight: 300;
}

[b-wmtewntj9z] .form-input:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

[b-wmtewntj9z] .form-input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15),
        0 0 30px rgba(99, 102, 241, 0.1) !important;
}

/* ===== Validation ===== */
[b-wmtewntj9z] .validation-message {
    color: #f87171;
    font-size: 0.78rem;
    margin-top: 0.125rem;
    padding-left: 0.5rem;
    font-weight: 500;
}

.password-error[b-wmtewntj9z] {
    color: #f87171;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 8px;
}

/* ===== Button ===== */
.btn-auth[b-wmtewntj9z] {
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0.5rem;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    letter-spacing: 0.02em;
}

.btn-auth:hover[b-wmtewntj9z] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
    background: linear-gradient(135deg, #818cf8, #a78bfa);
}

.btn-auth:active[b-wmtewntj9z] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* ===== Footer ===== */
.auth-footer[b-wmtewntj9z] {
    text-align: center;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-footer p[b-wmtewntj9z] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin: 0;
}

.auth-footer a[b-wmtewntj9z] {
    color: #818cf8;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.auth-footer a:hover[b-wmtewntj9z] {
    color: #a78bfa;
    text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
    .auth-card[b-wmtewntj9z] {
        padding: 2rem 1.5rem;
        border-radius: 20px;
        margin: 0.5rem;
    }

    .auth-header h1[b-wmtewntj9z] {
        font-size: 1.5rem;
    }

    .auth-icon[b-wmtewntj9z] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }

    .form-input[b-wmtewntj9z] {
        padding: 0.8rem 0.9rem;
    }
}
/* /Pages/Reports.razor.rz.scp.css */
.reports-container[b-133bndvvdu] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.reports-header[b-133bndvvdu] {
    margin-bottom: 2rem;
}

.reports-header h1[b-133bndvvdu] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.reports-subtitle[b-133bndvvdu] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Time Filters */
.time-filters[b-133bndvvdu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

/* Export Section */
.export-section[b-133bndvvdu] {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

.export-date-range[b-133bndvvdu] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex: 1;
    min-width: 280px;
}

.date-field[b-133bndvvdu] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.date-field label[b-133bndvvdu] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.date-input[b-133bndvvdu] {
    padding: 0.6rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #334155;
    background: #f8fafc;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.date-input:focus[b-133bndvvdu] {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.date-separator[b-133bndvvdu] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    padding-bottom: 0.5rem;
    flex-shrink: 0;
}

.btn-export[b-133bndvvdu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.35rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-export:hover[b-133bndvvdu] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.btn-export:disabled[b-133bndvvdu] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.time-chip[b-133bndvvdu] {
    padding: 0.5rem 1.1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
}

.time-chip:hover[b-133bndvvdu] {
    border-color: #cbd5e1;
    color: #475569;
    background: #f8fafc;
}

.time-chip-active[b-133bndvvdu] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

.time-chip-active:hover[b-133bndvvdu] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

/* Summary Cards */
.report-summary-cards[b-133bndvvdu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.report-card[b-133bndvvdu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.report-card:hover[b-133bndvvdu] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.report-card-icon[b-133bndvvdu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex-shrink: 0;
}

.income-card .report-card-icon[b-133bndvvdu] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.expense-card .report-card-icon[b-133bndvvdu] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.balance-card .report-card-icon[b-133bndvvdu] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.count-card .report-card-icon[b-133bndvvdu] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.report-card-content[b-133bndvvdu] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.report-card-label[b-133bndvvdu] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-card-value[b-133bndvvdu] {
    font-size: 1.3rem;
    font-weight: 700;
}

.income-value[b-133bndvvdu] {
    color: #16a34a;
}

.expense-value[b-133bndvvdu] {
    color: #dc2626;
}

.balance-value[b-133bndvvdu] {
    color: #6366f1;
}

.count-value[b-133bndvvdu] {
    color: #d97706;
}

/* Sections */
.content-section[b-133bndvvdu] {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
}

.section-header[b-133bndvvdu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.section-header h2[b-133bndvvdu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

/* Comparison Bar */
.comparison-bar-container[b-133bndvvdu] {
    padding: 0.5rem 0;
}

.comparison-bar[b-133bndvvdu] {
    display: flex;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.bar-income[b-133bndvvdu] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease;
    min-width: 40px;
}

.bar-expense[b-133bndvvdu] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease;
    min-width: 40px;
}

.bar-label[b-133bndvvdu] {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.comparison-legend[b-133bndvvdu] {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.comparison-legend-item[b-133bndvvdu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
}

.legend-dot[b-133bndvvdu] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.income-dot[b-133bndvvdu] {
    background: #22c55e;
}

.expense-dot[b-133bndvvdu] {
    background: #ef4444;
}

/* Category Breakdown */
.category-breakdown-section[b-133bndvvdu] {
    margin-bottom: 1.5rem;
}

.category-breakdown-content[b-133bndvvdu] {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
}

.pie-chart[b-133bndvvdu] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.pie-chart[b-133bndvvdu]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pie-chart:hover[b-133bndvvdu] {
    transform: scale(1.03);
}

.category-list[b-133bndvvdu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.category-row-item[b-133bndvvdu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.category-row-item:hover[b-133bndvvdu] {
    background: #f8fafc;
}

.category-row-left[b-133bndvvdu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 100px;
}

.category-color-dot[b-133bndvvdu] {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.category-name[b-133bndvvdu] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.category-row-right[b-133bndvvdu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    justify-content: flex-end;
}

.category-bar-track[b-133bndvvdu] {
    flex: 1;
    max-width: 200px;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.category-bar-fill[b-133bndvvdu] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.category-amount[b-133bndvvdu] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #dc2626;
    min-width: 90px;
    text-align: right;
}

.category-pct[b-133bndvvdu] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    min-width: 40px;
    text-align: right;
}

/* Table */
.table-section[b-133bndvvdu] {
    overflow: hidden;
}

.report-table-wrapper[b-133bndvvdu] {
    overflow-x: auto;
}

.report-table[b-133bndvvdu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.report-table thead[b-133bndvvdu] {
    background: #f8fafc;
}

.report-table th[b-133bndvvdu] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.th-amount[b-133bndvvdu] {
    text-align: right !important;
}

.report-table td[b-133bndvvdu] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.report-table tbody tr[b-133bndvvdu] {
    transition: background 0.15s ease;
}

.report-table tbody tr:hover[b-133bndvvdu] {
    background: #f8fafc;
}

.td-date[b-133bndvvdu] {
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}

.td-amount[b-133bndvvdu] {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.category-badge[b-133bndvvdu] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 16px;
    background: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.type-badge[b-133bndvvdu] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 700;
}

.type-badge-income[b-133bndvvdu] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.type-badge-expense[b-133bndvvdu] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Empty State */
.empty-state[b-133bndvvdu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-133bndvvdu] {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h3[b-133bndvvdu] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.35rem 0;
}

.empty-state p[b-133bndvvdu] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    max-width: 300px;
}

.empty-state-mini[b-133bndvvdu] {
    padding: 2rem;
    text-align: center;
}

.empty-state-mini p[b-133bndvvdu] {
    color: #94a3b8;
    font-size: 0.875rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .reports-container[b-133bndvvdu] {
        padding: 1rem;
    }

    .report-summary-cards[b-133bndvvdu] {
        grid-template-columns: 1fr 1fr;
    }

    .category-breakdown-content[b-133bndvvdu] {
        flex-direction: column;
        align-items: center;
    }

    .comparison-legend[b-133bndvvdu] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .category-row-right[b-133bndvvdu] {
        flex-wrap: wrap;
    }

    .category-bar-track[b-133bndvvdu] {
        display: none;
    }
}

@media (max-width: 480px) {
    .report-summary-cards[b-133bndvvdu] {
        grid-template-columns: 1fr;
    }

    .time-filters[b-133bndvvdu] {
        gap: 0.4rem;
    }

    .time-chip[b-133bndvvdu] {
        padding: 0.4rem 0.8rem;
        font-size: 0.78rem;
    }
}
/* /Pages/Sales.razor.rz.scp.css */
.sales-container[b-033r5qysjp] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.sales-header[b-033r5qysjp] {
    margin-bottom: 2rem;
}

.sales-header h1[b-033r5qysjp] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.sales-subtitle[b-033r5qysjp] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-033r5qysjp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: slideDown-b-033r5qysjp 0.3s ease;
}

.alert-success[b-033r5qysjp] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-error[b-033r5qysjp] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

@keyframes slideDown-b-033r5qysjp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Summary Cards */
.summary-cards[b-033r5qysjp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.summary-card[b-033r5qysjp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.summary-card:hover[b-033r5qysjp] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-icon[b-033r5qysjp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
}

.total-card .card-icon[b-033r5qysjp] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.revenue-card .card-icon[b-033r5qysjp] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.completed-card .card-icon[b-033r5qysjp] {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.pending-card .card-icon[b-033r5qysjp] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.card-content[b-033r5qysjp] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.card-label[b-033r5qysjp] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value[b-033r5qysjp] {
    font-size: 1.35rem;
    font-weight: 700;
}

.total-value[b-033r5qysjp] {
    color: #6366f1;
}

.revenue-value[b-033r5qysjp] {
    color: #16a34a;
}

.completed-value[b-033r5qysjp] {
    color: #0ea5e9;
}

.pending-value[b-033r5qysjp] {
    color: #d97706;
}

/* Content Section */
.content-section[b-033r5qysjp] {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.section-header[b-033r5qysjp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.section-header h2[b-033r5qysjp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

/* Add Button */
.btn-add[b-033r5qysjp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.btn-add:hover[b-033r5qysjp] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

/* Status Filters */
.status-filters[b-033r5qysjp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-chip[b-033r5qysjp] {
    padding: 0.4rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-033r5qysjp] {
    border-color: #cbd5e1;
    color: #475569;
}

.filter-chip-active[b-033r5qysjp] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

/* Search Bar */
.search-bar[b-033r5qysjp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
    color: #94a3b8;
}

.search-bar:focus-within[b-033r5qysjp] {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-input[b-033r5qysjp] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: #334155;
    outline: none;
}

.search-input[b-033r5qysjp]::placeholder {
    color: #94a3b8;
}

/* Sales Table */
.sales-table-wrapper[b-033r5qysjp] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}

.sales-table[b-033r5qysjp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.sales-table thead[b-033r5qysjp] {
    background: #f8fafc;
}

.sales-table th[b-033r5qysjp] {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.sales-table td[b-033r5qysjp] {
    padding: 0.85rem 1rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.sales-table tbody tr[b-033r5qysjp] {
    transition: all 0.2s ease;
}

.sales-table tbody tr:hover[b-033r5qysjp] {
    background: #f8fafc;
}

.sales-table tbody tr:last-child td[b-033r5qysjp] {
    border-bottom: none;
}

.text-center[b-033r5qysjp] {
    text-align: center;
}

.text-right[b-033r5qysjp] {
    text-align: right;
}

.font-bold[b-033r5qysjp] {
    font-weight: 700;
    color: #1e293b;
}

.item-name[b-033r5qysjp] {
    font-weight: 600;
    color: #1e293b;
}

.customer-name[b-033r5qysjp] {
    color: #475569;
    font-size: 0.85rem;
}

.quantity-value[b-033r5qysjp] {
    font-weight: 700;
    font-size: 0.95rem;
}

.date-text[b-033r5qysjp] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Payment Badges */
.payment-badge[b-033r5qysjp] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}

.payment-cash[b-033r5qysjp] {
    background: rgba(34, 197, 94, 0.08);
    color: #15803d;
}

.payment-card[b-033r5qysjp] {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
}

.payment-transfer[b-033r5qysjp] {
    background: rgba(14, 165, 233, 0.08);
    color: #0ea5e9;
}

/* Status Badges */
.status-badge[b-033r5qysjp] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.status-completed[b-033r5qysjp] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.status-pending[b-033r5qysjp] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-cancelled[b-033r5qysjp] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Row highlight */
.row-pending[b-033r5qysjp] {
    background: rgba(245, 158, 11, 0.03) !important;
}

.row-pending:hover[b-033r5qysjp] {
    background: rgba(245, 158, 11, 0.08) !important;
}

.row-cancelled[b-033r5qysjp] {
    background: rgba(239, 68, 68, 0.03) !important;
}

.row-cancelled:hover[b-033r5qysjp] {
    background: rgba(239, 68, 68, 0.08) !important;
}

/* Action Buttons */
.action-buttons[b-033r5qysjp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.btn-edit[b-033r5qysjp],
.btn-delete[b-033r5qysjp],
.btn-complete[b-033r5qysjp],
.btn-note[b-033r5qysjp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-033r5qysjp] {
    color: #94a3b8;
}

.btn-edit:hover[b-033r5qysjp] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.btn-delete[b-033r5qysjp] {
    color: #cbd5e1;
}

.btn-delete:hover[b-033r5qysjp] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-complete[b-033r5qysjp] {
    color: #64748b;
    gap: 0.35rem;
    width: auto;
    min-width: 32px;
    height: 30px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.btn-complete:hover[b-033r5qysjp] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.btn-note[b-033r5qysjp] {
    color: #94a3b8;
}

.btn-note:hover[b-033r5qysjp] {
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
}

/* Açıklama kartı */
.note-card-overlay[b-033r5qysjp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn-b-033r5qysjp 0.2s ease;
}

.note-card[b-033r5qysjp] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    min-width: 280px;
    max-width: 400px;
    animation: noteCardIn-b-033r5qysjp 0.2s ease;
}

.note-card-header[b-033r5qysjp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.note-card-title[b-033r5qysjp] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.note-card-close[b-033r5qysjp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.note-card-close:hover[b-033r5qysjp] {
    background: #f1f5f9;
    color: #475569;
}

.note-card-body[b-033r5qysjp] {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.note-card-text[b-033r5qysjp] {
    display: block;
}

.note-card-empty[b-033r5qysjp] {
    color: #94a3b8;
    font-style: italic;
}

@keyframes fadeIn-b-033r5qysjp {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes noteCardIn-b-033r5qysjp {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Empty State */
.empty-state[b-033r5qysjp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-033r5qysjp] {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h3[b-033r5qysjp] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.35rem 0;
}

.empty-state p[b-033r5qysjp] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    max-width: 300px;
}

/* Modal */
.modal-overlay[b-033r5qysjp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-033r5qysjp 0.2s ease;
}

@keyframes fadeIn-b-033r5qysjp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content[b-033r5qysjp] {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    animation: modalSlide-b-033r5qysjp 0.3s ease;
}

@keyframes modalSlide-b-033r5qysjp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-033r5qysjp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.modal-header h2[b-033r5qysjp] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.modal-close[b-033r5qysjp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-033r5qysjp] {
    background: #f1f5f9;
    color: #475569;
}

.modal-body[b-033r5qysjp] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-033r5qysjp] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
}

/* Form */
.form-group[b-033r5qysjp] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.form-group label[b-033r5qysjp] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.form-row[b-033r5qysjp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-input[b-033r5qysjp] {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #334155;
    background: #f8fafc;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.form-input:focus[b-033r5qysjp] {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-textarea[b-033r5qysjp] {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.form-select[b-033r5qysjp] {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* Buttons */
.btn-primary[b-033r5qysjp],
.btn-secondary[b-033r5qysjp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-033r5qysjp] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover[b-033r5qysjp] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

.btn-primary:disabled[b-033r5qysjp] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-033r5qysjp] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-033r5qysjp] {
    background: #e2e8f0;
}

/* Category Badge */
.category-badge[b-033r5qysjp] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Selected Product Info */
.selected-product-info[b-033r5qysjp] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border: 1.5px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.product-info-row[b-033r5qysjp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
}

.info-label[b-033r5qysjp] {
    color: #64748b;
    font-weight: 500;
}

.info-value[b-033r5qysjp] {
    font-weight: 600;
    color: #334155;
}

.info-price[b-033r5qysjp] {
    color: #6366f1;
    font-size: 0.9rem;
}

.info-ok[b-033r5qysjp] {
    color: #16a34a;
}

.info-warning[b-033r5qysjp] {
    color: #d97706;
}

/* Calculated Total */
.calculated-total[b-033r5qysjp] {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.875rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(16, 185, 129, 0.08));
    border: 1.5px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #15803d;
}

/* Form Error */
.form-error[b-033r5qysjp] {
    font-size: 0.72rem;
    color: #dc2626;
    font-weight: 600;
    margin-top: 0.15rem;
}

/* Disabled Select */
.form-select:disabled[b-033r5qysjp] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f1f5f9;
}

/* Responsive */
@media (max-width: 768px) {
    .sales-container[b-033r5qysjp] {
        padding: 1rem;
    }

    .summary-cards[b-033r5qysjp] {
        grid-template-columns: 1fr 1fr;
    }

    .form-row[b-033r5qysjp] {
        grid-template-columns: 1fr;
    }

    .sales-table[b-033r5qysjp] {
        font-size: 0.8rem;
    }

    .sales-table th[b-033r5qysjp],
    .sales-table td[b-033r5qysjp] {
        padding: 0.6rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .summary-cards[b-033r5qysjp] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/StockTracking.razor.rz.scp.css */
.stock-container[b-nkh6rkzjpm] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.stock-header[b-nkh6rkzjpm] {
    margin-bottom: 2rem;
}

.stock-header h1[b-nkh6rkzjpm] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.stock-subtitle[b-nkh6rkzjpm] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: slideDown-b-nkh6rkzjpm 0.3s ease;
}

.alert-success[b-nkh6rkzjpm] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-error[b-nkh6rkzjpm] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

@keyframes slideDown-b-nkh6rkzjpm {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Summary Cards */
.summary-cards[b-nkh6rkzjpm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.summary-card[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.summary-card:hover[b-nkh6rkzjpm] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-icon[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
}

.total-card .card-icon[b-nkh6rkzjpm] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.value-card .card-icon[b-nkh6rkzjpm] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.warning-card .card-icon[b-nkh6rkzjpm] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.danger-card .card-icon[b-nkh6rkzjpm] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.card-content[b-nkh6rkzjpm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.card-label[b-nkh6rkzjpm] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value[b-nkh6rkzjpm] {
    font-size: 1.35rem;
    font-weight: 700;
}

.total-value[b-nkh6rkzjpm] {
    color: #6366f1;
}

.value-amount[b-nkh6rkzjpm] {
    color: #16a34a;
}

.warning-value[b-nkh6rkzjpm] {
    color: #d97706;
}

.danger-value[b-nkh6rkzjpm] {
    color: #dc2626;
}

/* Content Section */
.content-section[b-nkh6rkzjpm] {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.section-header[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.section-header h2[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

/* Add Button */
.btn-add[b-nkh6rkzjpm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.btn-add:hover[b-nkh6rkzjpm] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

/* Category Filters */
.category-filters[b-nkh6rkzjpm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-chip[b-nkh6rkzjpm] {
    padding: 0.4rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-nkh6rkzjpm] {
    border-color: #cbd5e1;
    color: #475569;
}

.filter-chip-active[b-nkh6rkzjpm] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

/* Search Bar */
.search-bar[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
    color: #94a3b8;
}

.search-bar:focus-within[b-nkh6rkzjpm] {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-input[b-nkh6rkzjpm] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: #334155;
    outline: none;
}

.search-input[b-nkh6rkzjpm]::placeholder {
    color: #94a3b8;
}

/* Stock Table */
.stock-table-wrapper[b-nkh6rkzjpm] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}

.stock-table[b-nkh6rkzjpm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.stock-table thead[b-nkh6rkzjpm] {
    background: #f8fafc;
}

.stock-table th[b-nkh6rkzjpm] {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.stock-table td[b-nkh6rkzjpm] {
    padding: 0.85rem 1rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.stock-table tbody tr[b-nkh6rkzjpm] {
    transition: all 0.2s ease;
}

.stock-table tbody tr:hover[b-nkh6rkzjpm] {
    background: #f8fafc;
}

.stock-table tbody tr:last-child td[b-nkh6rkzjpm] {
    border-bottom: none;
}

.text-center[b-nkh6rkzjpm] {
    text-align: center;
}

.text-right[b-nkh6rkzjpm] {
    text-align: right;
}

.font-bold[b-nkh6rkzjpm] {
    font-weight: 700;
    color: #1e293b;
}

.item-name[b-nkh6rkzjpm] {
    font-weight: 600;
    color: #1e293b;
}

.quantity-value[b-nkh6rkzjpm] {
    font-weight: 700;
    font-size: 0.95rem;
}

/* Category Badge */
.category-badge[b-nkh6rkzjpm] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Status Badges */
.status-badge[b-nkh6rkzjpm] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.status-ok[b-nkh6rkzjpm] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.status-warning[b-nkh6rkzjpm] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-danger[b-nkh6rkzjpm] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Row highlight */
.row-warning[b-nkh6rkzjpm] {
    background: rgba(245, 158, 11, 0.03) !important;
}

.row-warning:hover[b-nkh6rkzjpm] {
    background: rgba(245, 158, 11, 0.08) !important;
}

.row-danger[b-nkh6rkzjpm] {
    background: rgba(239, 68, 68, 0.03) !important;
}

.row-danger:hover[b-nkh6rkzjpm] {
    background: rgba(239, 68, 68, 0.08) !important;
}

/* Action Buttons */
.action-buttons[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.btn-edit[b-nkh6rkzjpm],
.btn-delete[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-nkh6rkzjpm] {
    color: #94a3b8;
}

.btn-edit:hover[b-nkh6rkzjpm] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.btn-delete[b-nkh6rkzjpm] {
    color: #cbd5e1;
}

.btn-delete:hover[b-nkh6rkzjpm] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Empty State */
.empty-state[b-nkh6rkzjpm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-nkh6rkzjpm] {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h3[b-nkh6rkzjpm] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.35rem 0;
}

.empty-state p[b-nkh6rkzjpm] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    max-width: 300px;
}

/* Modal */
.modal-overlay[b-nkh6rkzjpm] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-nkh6rkzjpm 0.2s ease;
}

@keyframes fadeIn-b-nkh6rkzjpm {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content[b-nkh6rkzjpm] {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 520px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    animation: modalSlide-b-nkh6rkzjpm 0.3s ease;
}

@keyframes modalSlide-b-nkh6rkzjpm {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.modal-header h2[b-nkh6rkzjpm] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.modal-close[b-nkh6rkzjpm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-nkh6rkzjpm] {
    background: #f1f5f9;
    color: #475569;
}

.modal-body[b-nkh6rkzjpm] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.modal-footer[b-nkh6rkzjpm] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
}

/* Form */
.form-group[b-nkh6rkzjpm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.form-group label[b-nkh6rkzjpm] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.form-row[b-nkh6rkzjpm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-input[b-nkh6rkzjpm] {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #334155;
    background: #f8fafc;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.form-input:focus[b-nkh6rkzjpm] {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-select[b-nkh6rkzjpm] {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* Buttons */
.btn-primary[b-nkh6rkzjpm],
.btn-secondary[b-nkh6rkzjpm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-nkh6rkzjpm] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover[b-nkh6rkzjpm] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

.btn-primary:disabled[b-nkh6rkzjpm] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-nkh6rkzjpm] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-nkh6rkzjpm] {
    background: #e2e8f0;
}

/* Responsive */
@media (max-width: 768px) {
    .stock-container[b-nkh6rkzjpm] {
        padding: 1rem;
    }

    .summary-cards[b-nkh6rkzjpm] {
        grid-template-columns: 1fr 1fr;
    }

    .form-row[b-nkh6rkzjpm] {
        grid-template-columns: 1fr;
    }

    .stock-table[b-nkh6rkzjpm] {
        font-size: 0.8rem;
    }

    .stock-table th[b-nkh6rkzjpm],
    .stock-table td[b-nkh6rkzjpm] {
        padding: 0.6rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .summary-cards[b-nkh6rkzjpm] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Tasks.razor.rz.scp.css */
.tasks-container[b-9wkldopa6l] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.tasks-header[b-9wkldopa6l] {
    margin-bottom: 2rem;
}

.tasks-header h1[b-9wkldopa6l] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.tasks-subtitle[b-9wkldopa6l] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: slideDown-b-9wkldopa6l 0.3s ease;
}

.alert-success[b-9wkldopa6l] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-error[b-9wkldopa6l] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

@keyframes slideDown-b-9wkldopa6l {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Summary Cards */
.summary-cards[b-9wkldopa6l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.summary-card[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.summary-card:hover[b-9wkldopa6l] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-icon[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
}

.total-card .card-icon[b-9wkldopa6l] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.pending-card .card-icon[b-9wkldopa6l] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.completed-card .card-icon[b-9wkldopa6l] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.card-content[b-9wkldopa6l] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.card-label[b-9wkldopa6l] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value[b-9wkldopa6l] {
    font-size: 1.35rem;
    font-weight: 700;
}

.total-value[b-9wkldopa6l] {
    color: #6366f1;
}

.pending-value[b-9wkldopa6l] {
    color: #f59e0b;
}

.completed-value[b-9wkldopa6l] {
    color: #16a34a;
}

/* Content Section */
.content-section[b-9wkldopa6l] {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.add-section[b-9wkldopa6l] {
    margin-bottom: 1.5rem;
}

.section-header[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.section-header h2[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

/* Add Form */
.add-form[b-9wkldopa6l] {
    padding: 0;
}

.form-row[b-9wkldopa6l] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.form-group[b-9wkldopa6l] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group-title[b-9wkldopa6l] {
    flex: 2;
}

.form-group-desc[b-9wkldopa6l] {
    flex: 3;
}

.form-group label[b-9wkldopa6l] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-input[b-9wkldopa6l] {
    padding: 0.65rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #334155;
    background: #f8fafc;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus[b-9wkldopa6l] {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-input[b-9wkldopa6l]::placeholder {
    color: #94a3b8;
}

.btn-add[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-add:hover[b-9wkldopa6l] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

.btn-add:disabled[b-9wkldopa6l] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Tab Bar */
.tab-bar[b-9wkldopa6l] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tab-btn[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
}

.tab-btn:hover[b-9wkldopa6l] {
    border-color: #cbd5e1;
    color: #475569;
}

.tab-active[b-9wkldopa6l] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.tab-active:hover[b-9wkldopa6l] {
    color: #fff;
}

.tab-count[b-9wkldopa6l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
}

.tab-active .tab-count[b-9wkldopa6l] {
    background: rgba(255, 255, 255, 0.25);
}

/* Todo List */
.todo-list[b-9wkldopa6l] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.todo-item[b-9wkldopa6l] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    animation: fadeIn-b-9wkldopa6l 0.3s ease;
}

.todo-item:last-child[b-9wkldopa6l] {
    border-bottom: none;
}

.todo-item:hover[b-9wkldopa6l] {
    background: #f8fafc;
}

@keyframes fadeIn-b-9wkldopa6l {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Check Circle */
.todo-check[b-9wkldopa6l] {
    cursor: pointer;
    padding-top: 2px;
    flex-shrink: 0;
}

.check-circle[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    color: transparent;
    transition: all 0.25s ease;
}

.check-circle:hover[b-9wkldopa6l] {
    border-color: #6366f1;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

.check-circle.checked[b-9wkldopa6l] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: transparent;
    color: #fff;
}

.completed-check[b-9wkldopa6l] {
    cursor: default;
}

/* Todo Content */
.todo-content[b-9wkldopa6l] {
    flex: 1;
    min-width: 0;
}

.todo-title[b-9wkldopa6l] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.completed-title[b-9wkldopa6l] {
    text-decoration: line-through;
    color: #94a3b8;
}

.todo-description[b-9wkldopa6l] {
    font-size: 0.835rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    word-break: break-word;
}

.todo-meta[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.todo-date[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

.completed-date-info[b-9wkldopa6l] {
    color: #16a34a;
}

/* Status Badges */
.status-badge[b-9wkldopa6l] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.status-pending[b-9wkldopa6l] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-completed[b-9wkldopa6l] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

/* Todo Actions */
.todo-actions[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.btn-icon[b-9wkldopa6l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #94a3b8;
}

.btn-edit:hover[b-9wkldopa6l] {
    background: rgba(14, 165, 233, 0.08);
    color: #0ea5e9;
    border-color: rgba(14, 165, 233, 0.15);
}

.btn-delete:hover[b-9wkldopa6l] {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.15);
}

.btn-reopen:hover[b-9wkldopa6l] {
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.15);
}

/* Inline Edit */
.edit-inline[b-9wkldopa6l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 220px;
}

.edit-input[b-9wkldopa6l] {
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
}

.edit-buttons[b-9wkldopa6l] {
    display: flex;
    gap: 0.4rem;
}

.btn-save[b-9wkldopa6l] {
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save:hover[b-9wkldopa6l] {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}

.btn-cancel[b-9wkldopa6l] {
    padding: 0.35rem 0.85rem;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-9wkldopa6l] {
    background: #e2e8f0;
    color: #475569;
}

/* Todo Completed Style */
.todo-completed[b-9wkldopa6l] {
    opacity: 0.75;
}

.todo-completed:hover[b-9wkldopa6l] {
    opacity: 1;
}

/* Empty State */
.empty-state[b-9wkldopa6l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-9wkldopa6l] {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h3[b-9wkldopa6l] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.35rem 0;
}

.empty-state p[b-9wkldopa6l] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    max-width: 300px;
}

/* Responsive */
@media (max-width: 768px) {
    .tasks-container[b-9wkldopa6l] {
        padding: 1rem;
    }

    .summary-cards[b-9wkldopa6l] {
        grid-template-columns: 1fr;
    }

    .form-row[b-9wkldopa6l] {
        flex-direction: column;
    }

    .tab-bar[b-9wkldopa6l] {
        flex-direction: column;
    }

    .todo-item[b-9wkldopa6l] {
        flex-wrap: wrap;
    }

    .todo-actions[b-9wkldopa6l] {
        margin-left: auto;
    }

    .edit-inline[b-9wkldopa6l] {
        min-width: 100%;
    }
}