/* ============================================================================
   BILLING PAGE STYLES - Premium Visual Design
   Polished, addictive UI with 3D effects, smooth animations, and rich tooltips
   ============================================================================ */

/* ============================================================================
   PAGE CONTAINER
   ============================================================================ */

.billing {
    /* Break out of parent padding to align with sidebar */
    display: flex;
    flex-direction: column;
    height: calc(100% + 2 * var(--spacing-xl));
    width: calc(100% + 2 * var(--spacing-xl));
    margin: calc(-1 * var(--spacing-xl));
    background: var(--color-bg);
    color: var(--color-text);
    overflow: hidden;
    box-sizing: border-box;
}

.billing__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ============================================================================
   PAGE HEADER - Aligned with sidebar (matches task screen)
   ============================================================================ */

.billing__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-card-bg);
    padding: 0 var(--spacing-xl);
    position: sticky;
    top: 0;
    z-index: 100;
    /* Match sidebar header height */
    height: var(--sidebar-header-height);
    min-height: var(--sidebar-header-height);
    box-sizing: border-box;
}

.billing__header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.billing__page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.billing__page-title i {
    color: var(--color-primary);
    font-size: 22px;
}

.billing__header-right {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.billing__totals {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    font-size: 13px;
    padding: 6px 12px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.billing__total-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.billing__total-label {
    font-weight: 500;
    font-size: 12px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.billing__total-value {
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 14px;
    color: var(--color-primary);
    min-width: 120px;
    text-align: right;
    letter-spacing: 0.02em;
}

/* ============================================================================
   NO ACCESS STATE
   ============================================================================ */

.billing__no-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    color: var(--color-text-secondary);
}

.billing__no-access i {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-muted);
    opacity: 0.5;
}

/* ============================================================================
   TABS - Matching Task Screen Design
   ============================================================================ */

.billing__tabs {
    display: flex;
    gap: 2px;
    padding: 0 var(--spacing-xl);
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
    flex-shrink: 0;
    position: sticky;
    top: var(--sidebar-header-height);
    z-index: 99;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.billing__tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.billing__tab i {
    font-size: 12px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.billing__tab:hover {
    color: var(--color-primary);
    background: transparent;
}

.billing__tab:hover i {
    opacity: 1;
}

.billing__tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.billing__tab--active i {
    opacity: 1;
}

/* Tab count badge - matching task screen */
.billing__tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-border);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.billing__tab--active .billing__tab-badge {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.billing__tab:hover .billing__tab-badge {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.billing__tab--active:hover .billing__tab-badge {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* ============================================================================
   TOOLBAR - Clean filter bar
   ============================================================================ */

.billing__toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-card-bg);
    border-bottom: 1px solid var(--color-border);
    gap: var(--spacing-lg);
}

.billing__filters {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.billing__filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.billing__filter-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-left: 2px;
}

/* Filter tags showing selected count */
.billing__filter-tags {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: var(--spacing-sm);
}

.billing__filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
}

.billing__filter-tag-clear {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: flex;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.billing__filter-tag-clear:hover {
    opacity: 1;
}

.billing__toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.billing__clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.billing__clear-filters:hover {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-dark);
}

/* ============================================================================
   BULK ACTIONS BAR - Professional selection indicator
   ============================================================================ */

.billing__bulk-actions {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-xl);
    background: linear-gradient(
        to right,
        rgba(var(--color-primary-rgb), 0.08),
        rgba(var(--color-primary-rgb), 0.04)
    );
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.2);
}

.billing__bulk-actions--visible {
    display: flex;
    animation: bulkBarSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bulkBarSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.billing__bulk-selection {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px 5px 8px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--white);
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.3);
}

.billing__bulk-selection-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.billing__bulk-selection-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.billing__bulk-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.billing__bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.billing__bulk-btn:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-dark);
}

.billing__bulk-btn--submit {
    background: var(--color-primary);
    color: var(--white);
    border-color: var(--color-primary);
}

.billing__bulk-btn--submit:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.billing__bulk-btn--approve {
    background: var(--color-success);
    color: var(--white);
    border-color: var(--color-success);
}

.billing__bulk-btn--approve:hover {
    filter: brightness(1.1);
}

.billing__bulk-btn--invoice {
    background: var(--color-info);
    color: var(--white);
    border-color: var(--color-info);
}

.billing__bulk-btn--invoice:hover {
    filter: brightness(1.1);
}

/* ============================================================================
   BUTTONS - Premium button styles
   ============================================================================ */

.billing__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.billing__btn:hover:not(:disabled) {
    background: var(--color-surface-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.billing__btn:active:not(:disabled) {
    transform: translateY(0);
}

.billing__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.billing__btn--primary {
    background: var(--color-primary);
    color: var(--white);
    border-color: var(--color-primary);
}

.billing__btn--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.billing__btn--success {
    background: var(--color-success);
    color: var(--white);
    border-color: var(--color-success);
}

.billing__btn--success:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.billing__btn--small {
    padding: 5px 10px;
    font-size: 11px;
}

.billing__btn--icon-only {
    padding: 6px 8px;
}

.billing__btn--text {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
    padding: 6px 10px;
}

.billing__btn--text:hover:not(:disabled) {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    transform: none;
    box-shadow: none;
}

/* ============================================================================
   CONTENT AREA
   ============================================================================ */

.billing__content {
    flex: 1;
    overflow: auto;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-bg);
}

.billing__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xxl);
    color: var(--color-text-secondary);
    font-size: 14px;
}

.billing__loading i {
    animation: spin 1s linear infinite;
}

.billing__grid {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.02);
}

.billing__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxl) var(--spacing-lg);
    color: var(--color-text-muted);
    gap: var(--spacing-md);
}

.billing__empty i {
    font-size: 2.5rem;
    opacity: 0.25;
}

.billing__empty p {
    margin: 0;
    font-size: 14px;
}

/* ============================================================================
   TABLE - Clean, readable design
   ============================================================================ */

/* Table header bar with select all */
.billing__table-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.billing__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.billing__table thead {
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}

.billing__table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border-light);
    white-space: nowrap;
}

.billing__table th:last-child {
    border-right: none;
}

.billing__table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
    transition: all 0.15s ease;
}

/* Subtle alternating rows */
.billing__table tbody tr:nth-child(even) {
    background: var(--color-row-alt, rgba(0, 0, 0, 0.015));
}

.billing__table tbody tr:hover {
    background: var(--color-surface);
}

.billing__table tbody tr:last-child {
    border-bottom: none;
}

.billing__table td {
    padding: 12px 16px;
    color: var(--color-text);
    vertical-align: middle;
    border-right: 1px solid var(--color-border-light);
}

.billing__table td:last-child {
    border-right: none;
}

/* Checkbox column */
.billing__th--checkbox,
.billing__td--checkbox {
    width: 48px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-sm);
}

/* ============================================================================
   CUSTOM CHECKBOXES - Select All & Row Checkboxes
   ============================================================================ */

/* Select All in table header */
.billing__select-all {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.billing__select-all-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.billing__select-all-box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border-dark);
    border-radius: 4px;
    background: var(--color-input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.billing__select-all-checkbox:checked + .billing__select-all-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.billing__select-all-checkbox:checked + .billing__select-all-box::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.billing__select-all-checkbox:focus + .billing__select-all-box {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}

.billing__select-all-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Row checkbox */
.billing__row-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.billing__row-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.billing__row-checkbox-box {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.billing__row-checkbox-input:checked + .billing__row-checkbox-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.billing__row-checkbox-input:checked + .billing__row-checkbox-box::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.billing__row-checkbox:hover .billing__row-checkbox-box {
    border-color: var(--color-primary);
}

/* Selected row highlight */
.billing__row--selected {
    background: rgba(var(--color-primary-rgb), 0.06);
}

.billing__row--selected:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
}

/* ============================================================================
   CELL TYPES
   ============================================================================ */

.billing__task-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.billing__task-link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.billing__task-link:hover {
    color: var(--color-primary);
}

.billing__child-badge {
    font-size: 10px;
    padding: 2px 7px;
    background: var(--color-surface);
    border-radius: 10px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Period badge */
.billing__period-badge {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* ============================================================================
   ACCOUNTING-STYLE AMOUNTS
   ============================================================================ */

/* Amount cells - uniform width for alignment */
.billing__td--amount {
    text-align: right;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 500;
    min-width: 120px;
    padding-right: var(--spacing-md);
    color: var(--color-text);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}

.billing__th--amount {
    text-align: right;
    min-width: 120px;
    padding-right: var(--spacing-md);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 10px;
    letter-spacing: 0.05em;
}

.billing__amount {
    display: inline-block;
    min-width: 100px;
    text-align: right;
    letter-spacing: 0.02em;
}

.billing__amount--placeholder {
    color: var(--color-text-muted);
}

.billing__amount--na {
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: 400;
}

.billing__td--amount:hover {
    color: var(--color-primary);
}

/* Remove the underline animation, keep it subtle */
.billing__td--amount::after {
    display: none;
}

.billing__td--amount:hover::after {
    transform: scaleX(1);
}

/* Info button for breakdown tooltips */
.billing__info-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
    vertical-align: middle;
}

.billing__info-btn:hover {
    opacity: 1;
    color: var(--color-primary);
}

.billing__info-btn:focus {
    outline: none;
    opacity: 1;
    color: var(--color-primary);
}

.billing__info-btn--loading {
    opacity: 0.5;
    pointer-events: none;
}

.billing__info-btn--loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Actions column */
.billing__td--actions {
    text-align: right;
    white-space: nowrap;
}

/* ============================================================================
   3D ORB STATUS BADGES - Premium visual effect
   ============================================================================ */

.billing__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: relative;
    background: var(--color-status-badge-bg, rgba(0, 0, 0, 0.04));
}

/* 3D Orb indicator */
.billing__status::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Draft status - gray orb */
.billing__status--draft {
    color: var(--color-text-muted);
}

.billing__status--draft::before {
    background: radial-gradient(circle at 30% 30%,
        #a8a8a8,
        #888888 50%,
        #666666);
    box-shadow:
        0 0 4px rgba(136, 136, 136, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Pending review status - amber/orange orb */
.billing__status--pending_review {
    color: var(--color-warning);
}

.billing__status--pending_review::before {
    background: radial-gradient(circle at 30% 30%,
        #fcd34d,
        #f59e0b 50%,
        #d97706);
    box-shadow:
        0 0 6px rgba(245, 158, 11, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Approved status - green orb */
.billing__status--approved {
    color: var(--color-success);
}

.billing__status--approved::before {
    background: radial-gradient(circle at 30% 30%,
        #86efac,
        #22c55e 50%,
        #16a34a);
    box-shadow:
        0 0 6px rgba(34, 197, 94, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Invoiced status - blue orb */
.billing__status--invoiced {
    color: var(--color-info);
}

.billing__status--invoiced::before {
    background: radial-gradient(circle at 30% 30%,
        #93c5fd,
        #3b82f6 50%,
        #2563eb);
    box-shadow:
        0 0 6px rgba(59, 130, 246, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Paid status - emerald orb */
.billing__status--paid {
    color: var(--color-success);
}

.billing__status--paid::before {
    background: radial-gradient(circle at 30% 30%,
        #6ee7b7,
        #10b981 50%,
        #059669);
    box-shadow:
        0 0 6px rgba(16, 185, 129, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Rejected status - red orb */
.billing__status--rejected {
    color: var(--color-danger);
}

.billing__status--rejected::before {
    background: radial-gradient(circle at 30% 30%,
        #fca5a5,
        #ef4444 50%,
        #dc2626);
    box-shadow:
        0 0 6px rgba(239, 68, 68, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Status hover - orb glow intensifies */
.billing__status:hover::before {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* ============================================================================
   INLINE INPUTS - Final Amount & Invoice fields
   ============================================================================ */

.billing__input,
.billing__select {
    padding: 6px 10px;
    background: var(--color-input-bg);
    color: var(--color-input-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.billing__input:focus,
.billing__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 3px rgba(var(--color-primary-rgb), 0.1),
        0 2px 8px rgba(var(--color-primary-rgb), 0.15);
}

/* Final Amount Input - With R prefix */
.billing__td--final-amount {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
}

.billing__final-amount-input {
    display: flex;
    align-items: center;
    background: var(--color-input-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.15s ease;
    width: 100%;
}

.billing__final-amount-input:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}

.billing__final-amount-prefix {
    padding: 7px 8px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.billing__final-amount-field {
    flex: 1;
    padding: 7px 8px;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-input-text);
    text-align: right;
    width: 100%;
    min-width: 0;
}

.billing__final-amount-field::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.billing__final-amount-field--saved {
    animation: finalAmountSaved 0.3s ease;
}

@keyframes finalAmountSaved {
    0% { background: rgba(var(--color-success-rgb, 34, 197, 94), 0.2); }
    100% { background: transparent; }
}

/* Invoice number input */
.billing__input--invoice,
.billing__inline-input--invoice {
    width: 100px;
    padding: 6px 10px;
    background: var(--color-input-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    transition: all 0.15s ease;
}

.billing__inline-input--invoice:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

/* Entity select */
.billing__select--entity {
    width: 85px;
    padding: 6px 8px;
    background: var(--color-input-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.billing__select--entity:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Input group for invoice row */
.billing__invoice-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* ============================================================================
   BILLING TOOLTIP - Rich hover tooltip
   ============================================================================ */

.billing-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 8px 40px rgba(0, 0, 0, 0.1);
    min-width: 280px;
    max-width: 400px;
    padding: var(--spacing-md);
    pointer-events: auto;
    animation: tooltipFadeIn 0.15s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.billing-tooltip__section {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.billing-tooltip__section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.billing-tooltip__section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.billing-tooltip__section-title i {
    font-size: 12px;
    opacity: 0.7;
}

.billing-tooltip__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.billing-tooltip__table thead th {
    padding: 4px 8px;
    text-align: left;
    font-weight: 500;
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--color-border-light);
}

.billing-tooltip__th--right,
.billing-tooltip__td--right {
    text-align: right;
}

.billing-tooltip__table tbody td {
    padding: 6px 8px;
    color: var(--color-text);
}

.billing-tooltip__table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.billing-tooltip__person {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Role label (for budget items showing role when person is assigned) */
.billing-tooltip__role {
    display: inline-block;
    font-size: 9px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

.billing-tooltip__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    border-top: 1px dashed var(--color-border-light);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.billing-tooltip__subtotal strong {
    font-weight: 600;
    color: var(--color-text);
}

.billing-tooltip__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0 0 0;
    margin-top: var(--spacing-sm);
    border-top: 2px solid var(--color-border);
    font-size: 13px;
}

.billing-tooltip__total strong {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 14px;
}

.billing-tooltip__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    color: var(--color-text-muted);
    text-align: center;
}

.billing-tooltip__empty i {
    font-size: 18px;
    opacity: 0.4;
}

/* ============================================================================
   HISTORY INDICATOR
   ============================================================================ */

.billing__history-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    cursor: help;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.billing__history-icon:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}

.billing__history-icon i {
    font-size: 13px;
}

.billing__history-count {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Row loading state */
.billing__row--loading {
    animation: pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

/* ============================================================================
   VARIANCE INDICATOR
   ============================================================================ */

.billing__variance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.billing__variance--positive {
    color: var(--color-success);
    background: rgba(34, 197, 94, 0.1);
}

.billing__variance--negative {
    color: var(--color-danger);
    background: rgba(239, 68, 68, 0.1);
}

.billing__variance--warning {
    color: var(--color-warning);
    background: rgba(245, 158, 11, 0.1);
}

/* ============================================================================
   PERIOD BADGE
   ============================================================================ */

.billing__period {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 1200px) {
    .billing__tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .billing__tabs::-webkit-scrollbar {
        display: none;
    }

    .billing__tab {
        padding: 12px 16px;
    }
}

@media (max-width: 768px) {
    .billing__toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .billing__filters {
        width: 100%;
        flex-wrap: wrap;
    }

    .billing__bulk-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
    }

    .billing__bulk-btns {
        flex-wrap: wrap;
    }

    .billing__table {
        font-size: 12px;
    }

    .billing__table th,
    .billing__table td {
        padding: 10px 12px;
    }

    .billing-tooltip {
        min-width: 240px;
        max-width: calc(100vw - 32px);
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .billing__tabs,
    .billing__toolbar,
    .billing__bulk-actions,
    .billing__td--checkbox,
    .billing__th--checkbox,
    .billing__td--actions {
        display: none;
    }

    .billing__content {
        padding: 0;
    }

    .billing__grid {
        border: 1px solid #ccc;
        box-shadow: none;
    }

    .billing__table tbody tr {
        page-break-inside: avoid;
    }

    .billing__status::before {
        box-shadow: none;
    }
}