/* Budget Page Styles - CSP Compliant */

/* Sticky positioning */
.sticky-top-offset {
    top: 20px;
}

/* Modal backdrop */
.modal-backdrop-visible {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Grid View - Category Card */
.category-card-header-content {
    overflow: hidden;
}

.category-card-add-envelope {
    white-space: nowrap;
}

/* List View - Table columns */
.budget-table-col-category {
    width: 35%;
}

.budget-table-col-budget {
    width: 15%;
}

.budget-table-col-spent {
    width: 15%;
}

.budget-table-col-remaining {
    width: 15%;
}

.budget-table-col-actions {
    width: 20%;
}

/* Category spacer */
.category-spacer td {
    height: 8px;
    padding: 0;
    border: none;
    background-color: transparent;
}

/* Dynamic category indentation using CSS variables */
.category-indent {
    padding-left: var(--category-indent-px);
}

/* Modal scrollable content */
.modal-content-scrollable {
    max-height: 400px;
    overflow-y: auto;
}

/* Transaction assignment amount column */
.transaction-amount-input {
    width: 180px;
}

/* Transaction description truncate */
.transaction-description-truncate {
    max-width: 70%;
}

/* Envelope row container */
.envelope-row-min-height {
    min-height: 49px;
}

/* Envelope name column - Grid View */
.envelope-name-col-grid {
    flex-grow: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-right: 0.5rem;
}

/* Envelope name column - List View with indentation */
.envelope-name-col-list {
    width: 35%;
    padding-right: 0.5rem;
    padding-left: var(--envelope-indent-px);
}

/* Envelope budget column */
.envelope-budget-col-grid {
    width: 100px;
    min-width: 100px;
    padding-right: 0.5rem;
}

.envelope-budget-col-list {
    width: 15%;
    padding-right: 0.5rem;
}

/* Envelope spent column (List only) */
.envelope-spent-col-list {
    width: 15%;
    padding-right: 0.5rem;
}

/* Envelope remaining column */
.envelope-remaining-col-grid {
    width: 90px;
    min-width: 90px;
    padding-right: 0.5rem;
}

.envelope-remaining-col-list {
    width: 15%;
    padding-right: 0.5rem;
}

/* Envelope actions column */
.envelope-actions-col-grid {
    width: 100px;
    min-width: 100px;
}

.envelope-actions-col-list {
    width: 20%;
    padding-right: 0.5rem;
}

/* Budget input container */
.envelope-budget-input-container {
    width: 120px;
}

/* Drag handle cursor */
.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Sidebar scrollable */
.budget-sidebar-scrollable {
    overflow-y: auto;
    max-height: calc(100vh - 250px);
}

/* Transaction item clickable */
.transaction-item-clickable {
    cursor: pointer;
}

/* Transaction dragging styles */
.transaction-draggable {
    cursor: move;
    transition: opacity 0.2s ease;
}

.transaction-draggable:active {
    cursor: grabbing;
    opacity: 0.7;
}

/* Envelope drop zone styles */
.envelope-drop-zone-active {
    background-color: rgba(25, 135, 84, 0.1);
    border-left: 3px solid #198754;
    box-shadow: inset 0 0 8px rgba(25, 135, 84, 0.2);
}

.envelope-row-container {
    transition: all 0.2s ease;
}

/* Utility classes for dynamic indentation */
[data-indent-depth="0"] { --category-indent-px: 10px; --envelope-indent-px: 40px; }
[data-indent-depth="1"] { --category-indent-px: 40px; --envelope-indent-px: 70px; }
[data-indent-depth="2"] { --category-indent-px: 70px; --envelope-indent-px: 100px; }
[data-indent-depth="3"] { --category-indent-px: 100px; --envelope-indent-px: 130px; }
[data-indent-depth="4"] { --category-indent-px: 130px; --envelope-indent-px: 160px; }
[data-indent-depth="5"] { --category-indent-px: 160px; --envelope-indent-px: 190px; }