/* ========================================
   Card Component Styles
   ======================================== */

:root {
    --card-header-height: 42px; /* Fixed height for alignment calculations */
}

.card {
    width: 100%;
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0px 10px 0px; /* No horizontal padding - sits outside card */
    width: 100%;
    box-sizing: border-box;
    height: var(--card-header-height); /* Fixed height for consistent alignment */
}

/* Collapsible card header styling */
.card.collapsible .card-header {
    cursor: default !important;  /* Override GSAP Draggable inline cursor: grab */
    border-radius: 6px;
    transition: background-color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}

/* Hover only on title area, not full header width */

.card.collapsible .card-title-wrapper:focus-visible {
    outline: 2px solid var(--blue-primary);
    outline-offset: 2px;
}

/* Dragging state */
.card.is-dragging {
    z-index: 1000;
    opacity: 0.9;
}

.card.is-dragging .card-header,
.card.is-dragging .card-title-wrapper {
    cursor: grabbing !important;
}

/* Title wrapper for chevron + title + badge (clickable area for collapse) */
.card-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* Allow text truncation */
    flex: 0 1 auto; /* Don't stretch to fill header */
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.card.collapsible .card-title-wrapper {
    cursor: pointer;
}

.card.collapsible .card-title:hover {
    background: var(--interactive-hover);
    border-radius: 4px;
}

/* Chevron positioning in card header */
.card-header .btn-chevron {
    flex-shrink: 0;
    color: var(--text-secondary);
}

/* Collapsed state - hide body */
.card.collapsed .card-table-container {
    display: none;
}

/* Row count badge (shown when collapsed or on hover) */
.card-collapse-badge {
    display: inline;
    opacity: 0;  /* Hidden by default, animated via GSAP on hover */
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    align-self: flex-end;
    margin-bottom: 2px;
}

.card.collapsed .card-collapse-badge,
.card.collapsed .workflow-graph-filter {
    display: none;  /* Hide badge and filter when collapsed */
}

/* Groups container for reordering */
.groups-container {
    display: flex;
    flex-direction: column;
}

/* Cards need position relative for GSAP Draggable transforms */
.groups-container .card {
    position: relative;
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.edit-btn {
    background: transparent;
    border: none;
    color: var(--blue-primary);
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    transition: opacity 0.2s;
}

.edit-btn:hover {
    opacity: 0.6;
}

.edit-btn.delete-mode {
    color: var(--red-primary);
}

.edit-btn:active {
    opacity: 0.3;
}

.add-random-btn {
    background: transparent;
    border: none;
    color: var(--red-primary);
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    padding: 0;
    margin-left: 15px;
    transition: opacity 0.2s;
}

.add-random-btn:hover {
    opacity: 0.6;
}

.add-random-btn:active {
    opacity: 0.3;
}

.card-table-container {
    background: var(--bg-gradient-elevated, var(--bg-elevated));
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding-block-start: 0px;
    padding-block-end: 10px;
    padding-inline-start: 25px; /* Room for checkboxes in edit mode */
    padding-inline-end: 50px; /* Room for dot menu and last column resize handle */
    box-shadow: var(--shadow-small);
    position: relative;
    width: 100%;
    margin-bottom: 5px;
    box-sizing: border-box; /* Include padding/border in height calculations */
    /* Height animation handled via FLIP in card.js */
    overflow: auto; /* Enable height control for vertical resize */
}

/* Dot menu - absolutely positioned on card container */
.card-dot-menu {
    position: absolute;
    inset-inline-end: 12px;
    top: 8px;
    z-index: 20; /* Above thead (z-index: 10) */
    opacity: 0; /* Hidden by default */
    transition: opacity 200ms ease;
}

/* Show dot menu on card hover or focus-within (for keyboard/popup interaction) */
.card:hover .card-dot-menu,
.card:focus-within .card-dot-menu,
.card-dot-menu:focus-within {
    opacity: 1;
}

/* Spacer cells removed - dot menu now absolutely positioned */

/* NEW: Resize handle - bottom-right corner (RTL-compatible) */
.card-resize-handle {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;  /* RTL-compatible: right in LTR, left in RTL */
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    pointer-events: auto;
    z-index: 10;
    user-select: none;
}

/* NEW: Card resizing state */
.card-table-container.card-resizing {
    outline: 2px solid var(--accent-color);
    outline-offset: -1px;
    transition: outline 150ms ease;
}

/* NEW: Disable interactions during resize */
.card.card-resizing * {
    user-select: none !important;
    pointer-events: none !important;
}

/* NEW: Keep resize handle interactive during resize */
.card.card-resizing .card-resize-handle {
    pointer-events: auto !important;
    opacity: 1;
    color: var(--accent-color);
}

/* Locked columns (cannot be reordered) */
.card-table th[data-locked="true"] {
    cursor: default !important;
}

/* Active entity row highlighting */
.card-table tbody tr.active-entity {
    background: var(--surface-hover);
    font-weight: 500;
}

/* Action link - compact clickable text for action columns */
.card-action-link {
    color: var(--blue-primary);
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.card-action-link:hover {
    opacity: 0.7;
}

.card-action-link:active {
    opacity: 0.5;
}

/* Action column - takes remaining space */
.card-table th[data-column-type="action"],
.card-table td[data-column-type="action"] {
    width: auto;
    min-width: 150px;
    text-align: end;
    padding-inline-end: 20px;
}

/* CTA Button - centered below card */
.card-cta-button {
    display: block;
    margin: 15px auto 0 auto;
    padding: 10px 24px;
    background: var(--blue-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    min-width: 120px;
}

.card-cta-button:hover {
    background: var(--blue-hover);
}

.card-cta-button:active {
    background: var(--blue-active);
}

.card-cta-button:disabled {
    background: var(--text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Popup Modal Overlay - Glassmorphism style */
.card-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: background 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease;
}

.card-popup-overlay.show {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.card-popup-wrapper {
    /* No background - backdrop IS the visual container */
    padding: 15px 10px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.card-popup-overlay.show .card-popup-wrapper {
    opacity: 1;
    transform: scale(1);
}

.card-table-container.full-width {
    width: 100%;
}

.card-table {
    width: auto; /* Allow columns to control table width */
    min-width: 100%; /* But fill container at minimum */
    border-collapse: collapse;
    table-layout: fixed; /* Required for column resize - widths controlled by header row */
    /* Direction inherited from document root - supports both LTR and RTL */
}

/* First column - padding and left alignment */
.card-table td:first-child,
.card-table th:first-child {
    padding-inline-start: 15px;
    text-align: start;
}

.card-table tr {
    border: none;
    transition: background-color 0.2s;
}

.card-table tbody tr {
    position: relative;
}

.card-table tbody tr::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    inset-inline-start: var(--divider-start, 20px);
    height: 1px;
    background: var(--border-default);
    opacity: 0.15;
}

.card-table tbody tr:last-child::after {
    display: none;
}

/* Row hover handled by GSAP in card.js */

.card-table tbody tr {
    cursor: default;
}

.card-table td {
    padding: 8px 6px;
    border: none;
    position: relative;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 14px;
    font-weight: normal;
    color: var(--text-primary);
    min-height: 36px; /* Prevents layout bounce during table rebuilds */
    box-sizing: border-box;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Clip content at cell boundary */
    text-overflow: ellipsis; /* Show ... for truncated text */
}

.card-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    position: relative;
}

.card-table thead::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -25px; /* Extend to card's left edge */
    right: -50px; /* Extend to card's right edge (matches padding-inline-end) */
    background: var(--header-gradient);
    border-radius: 8px 8px 0 0; /* Match card's top rounded corners */
    z-index: -1;
}

.card-table thead th {
    padding: 6px 6px 10px 6px;
    padding-inline-end: 28px; /* Reserve space for dot menu (RTL-compatible) */
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    text-align: center;
    background: transparent;
    vertical-align: middle;
    height: 46px; /* 30px content + 16px padding (6+10) */
    box-sizing: border-box; /* Required for column resize - width includes padding */
    white-space: nowrap; /* Prevent column header text wrapping */
    overflow: hidden; /* Clip content at cell boundary */
    text-overflow: ellipsis; /* Show ... for truncated text */
    position: relative; /* For absolute positioning of column menu */
}

/* Override inline-editable padding inside table headers to prevent height shift */
.card-table thead th .inline-editable {
    padding: 0;
}

/* Center non-first columns - headers and data cells */
.card-table th:not(:first-child),
.card-table td:not(:first-child) {
    text-align: center;
}
.card-table thead th:not(:first-child) .inline-editable {
    display: inline-block;
    width: auto;
}

.card-table thead th.part-name-cell {
    /* Text alignment set dynamically by JS based on locale */
}

/* Part name column */
.part-name-cell {
    /* Text alignment set dynamically by JS based on locale */
    width: 200px;
    max-width: 200px;
    cursor: text;
    transition: background 0.2s;
    position: relative;
}

.part-name-cell > span {
    /* Display and alignment set dynamically by JS based on locale and column position */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    vertical-align: middle;
}

.part-name-cell:hover {
    background: transparent;
}

/* Editable cell hover affordance - for "type-in" columns (text, number) */
.editable-cell {
    cursor: text;
    padding: 2px 0; /* No horizontal padding - keeps alignment */
    border-radius: 4px;
    transition: background 0.2s;
    display: inline-block; /* Shrink to content width */
    width: fit-content; /* Explicitly shrink to content */
    max-width: 100%; /* Don't overflow parent */
    line-height: 1.4; /* Match td line-height */
    position: relative;
}

/* Empty editable cells - fill cell proportionally */
.editable-cell.editable-cell--empty {
    display: block;
    width: 100%;
    min-height: 1.2em;
}

.editable-cell.editable-cell--empty:hover {
    margin-inline: 0; /* Override the -15px from .editable-cell:hover */
    padding: 2px 8px;
    border-radius: 4px; /* Smaller radius for short/wide empty cells */
}

.editable-cell:hover {
    padding: 2px 15px; /* Add padding only on hover for wider background */
    margin-inline: -15px; /* Offset padding to maintain text position */
    background: var(--interactive-hover);
    border-radius: 8px;
}

/* Suppress hover when cell is being edited */
.editable-cell.editing {
    background: transparent;
    padding: 2px 15px; /* Maintain padding during edit */
    margin-inline: -15px; /* Maintain alignment during edit */
}

/* Generic cell edit input */
.cell-edit-input {
    border: none;
    background: transparent;
    box-sizing: border-box;
    /* padding, display inherited from inline style to match span */
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--text-primary); /* Use theme text color */
    text-align: inherit; /* Inherit from parent cell */
    outline: none;
    /* line-height, display set by JS to match span exactly */
    vertical-align: middle; /* Match th alignment */
    /* Direction inherited from document root - supports both LTR and RTL */
}

/* Input in table header - must fit within fixed th height */
thead th .cell-edit-input {
    max-height: 30px; /* Match th height */
    overflow: hidden;
}

.cell-edit-input:focus {
    outline: none;
    background: transparent;
    color: var(--text-primary); /* Maintain color on focus */
}

/* Column cells */
.part-status-cell,
.part-estimate-cell,
.part-supplier-cell,
.part-type-cell,
.part-billable-cell,
.work-name-cell,
.work-price-cell,
.work-discount-cell,
.work-net-cell,
.work-billable-cell,
.external-name-cell,
.external-supplier-cell,
.external-price-cell,
.external-discount-cell,
.external-net-cell,
.external-billable-cell,
.external-status-cell,
.labor-name-cell,
.labor-unit-cell,
.labor-quantity-cell,
.labor-price-per-unit-cell,
.labor-discount-cell,
.labor-net-cell,
.labor-billable-cell {
    text-align: center;
    white-space: nowrap;
}

.part-status-cell { min-width: 120px; }
.part-estimate-cell { min-width: 100px; }
.part-supplier-cell { min-width: 100px; }
.part-price-cell { min-width: 80px; }
.part-discount-cell { min-width: 80px; }
.part-net-cell { min-width: 90px; }
.part-type-cell { min-width: 100px; }
.part-billable-cell { min-width: 80px; }

.work-name-cell,
.external-name-cell,
.labor-name-cell {
    /* Text alignment set dynamically by JS based on locale */
    min-width: 200px;
    cursor: text;
}

.work-price-cell,
.external-price-cell,
.labor-price-per-unit-cell { min-width: 80px; }

.work-discount-cell,
.external-discount-cell,
.labor-discount-cell { min-width: 80px; }

.work-net-cell,
.external-net-cell,
.labor-net-cell { min-width: 90px; }

.work-billable-cell,
.external-billable-cell,
.labor-billable-cell { min-width: 80px; }

.external-supplier-cell { min-width: 120px; }
.external-status-cell { min-width: 100px; }
.labor-unit-cell { min-width: 100px; }
.labor-quantity-cell { min-width: 80px; }


.price-input,
.discount-input {
    width: 50px;
    padding: 4px;
    border: none;
    border-bottom: 1px solid transparent;
    text-align: center;
    background: transparent;
}

/* Remove spinner arrows from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.price-input:focus,
.discount-input:focus {
    outline: none;
    border-bottom: 1px solid #2196F3;
    background: var(--bg-secondary);
}

.price-input[readonly],
.discount-input[readonly] {
    background: transparent;
    color: var(--text-tertiary) !important;
    cursor: default;
    border-bottom: 1px solid transparent;
}

.net-price {
    text-align: center;
    display: inline-block;
}

.net-price.readonly {
    color: var(--text-tertiary);
}

/* Checkboxes - positioned before first column using logical properties */
.card-checkbox-header,
.card-row-checkbox {
    display: none;
    position: absolute;
    inset-inline-start: -15px; /* Appears before first column in both LTR and RTL */
    top: 50%;
    transform: translateY(-50%);
}

.card-table-container.edit-mode .card-checkbox-header,
.card-table-container.edit-mode .card-row-checkbox {
    display: inline-block;
}

/* Allow checkbox to overflow its cell (needed because td has overflow:hidden) */
.card-table-container.edit-mode .card-table td:first-child,
.card-table-container.edit-mode .card-table th:first-child {
    overflow: visible;
}

/* New row */
.new-row {
    display: table-row;
}

.new-row:hover {
    background-color: transparent !important;
}

.new-row td:first-child {
    font-style: italic;
    color: var(--text-secondary); /* Subtle placeholder color */
}

#new-row-cell:focus {
    outline: none !important;
    background: transparent !important;
    color: var(--text-primary) !important; /* Only when typing - use bright color */
    font-style: normal; /* Remove italic when typing */
}

.edit-mode .new-row {
    display: none;
}

/* Status styling */
.part-status {
    cursor: pointer;
    transition: color 0.2s;
    display: inline-block;
}

.part-status:hover {
    color: var(--blue-primary);
}

.part-status.arrived {
    color: var(--text-secondary);
}

.part-status.waiting {
    color: var(--text-primary);
}

.part-estimate {
    cursor: pointer;
    transition: color 0.2s;
    display: inline-block;
}

.part-estimate:hover {
    color: var(--blue-primary);
}

.part-supplier {
    cursor: pointer;
    transition: color 0.2s;
    display: inline-block;
}

.part-supplier:hover {
    color: var(--blue-primary);
}

.part-supplier.client-supply {
    color: var(--text-tertiary);
}

.part-type {
    cursor: pointer;
    transition: color 0.2s;
    display: inline-block;
}

.part-type:hover {
    color: var(--blue-primary);
}

.part-type.missing {
    color: var(--red-hover);
    font-weight: bold;
}

.billable-yes {
    color: var(--text-primary);
    cursor: pointer;
}

.billable-yes:hover {
    color: var(--blue-primary);
}

.billable-no {
    color: var(--text-tertiary);
    cursor: pointer;
}

.billable-no:hover {
    color: var(--blue-primary);
}

.external-status {
    cursor: pointer;
    transition: color 0.2s;
    display: inline-block;
}

.external-status:hover {
    color: var(--blue-primary);
}

.external-status.completed {
    color: var(--text-secondary);
}

.external-status.waiting {
    color: var(--text-primary);
}

.unit-hours,
.unit-price {
    cursor: pointer;
    transition: color 0.2s;
    display: inline-block;
}

.unit-hours:hover,
.unit-price:hover {
    color: var(--blue-primary);
}

/* Action column */
.action-cell {
    cursor: pointer;
    color: var(--blue-primary);
    font-weight: 500;
    transition: color 0.2s;
}

.action-cell:hover {
    color: var(--blue-primary);
}

/* Row hover effect with rounded corners */
.card-table tbody tr.hoverable:hover {
    background-color: var(--interactive-hover);
}

.card-table tbody tr.hoverable:hover td:first-child {
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
}

.card-table tbody tr.hoverable:hover td:last-child {
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
}

/* Custom Tooltip */
.custom-tooltip {
    position: fixed;
    background: rgba(33, 33, 33, 0.95);
    color: var(--text-inverse);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: normal;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    word-wrap: break-word;
    white-space: normal;
}

/* Column Dividers - seamless vertical lines between columns */
/* Uses --column-divider-opacity CSS variable for GSAP hover animation */
.card-table th,
.card-table td {
    border-inline-end: 1px solid rgba(128, 128, 128, calc(0.15 * var(--column-divider-opacity, 1)));
}

/* No vertical dividers on add-new row */
.card-table .new-row td {
    border-inline-end: none;
}

/* Keep position relative on th for resize handle */
.card-table th {
    position: relative;
}

/* Column Resize Handle - invisible hover zone on header border */
.col-resize-handle {
    position: absolute;
    inset-inline-end: -4px;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 100;
    background: transparent;
    pointer-events: auto;
}

/* Resize handle hover - highlight the divider */
.card-table th .col-resize-handle:hover::after {
    content: '';
    position: absolute;
    inset-inline-start: 2px;
    top: 10%;
    height: 80%;
    width: 2px;
    background: var(--blue-primary);
    border-radius: 1px;
}

/* Active resize state */
.card-table th.col-resizing {
    user-select: none;
}

.card-table.col-resizing {
    cursor: col-resize !important;
    user-select: none;
}

.card-table.col-resizing * {
    cursor: col-resize !important;
}

/* Column Reordering - Cursor on headers */
.card-table th {
    cursor: grab;
}

.card-table th:active {
    cursor: grabbing;
}

/* Column Reordering - Dragging State */
.is-dragging {
    opacity: 0.5;
    will-change: transform;
}

/* Column header dot menu - positioned at far right edge, hover reveal */
.column-header-menu {
    position: absolute;
    inset-inline-end: 2px; /* Near the column separator line */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.card-table th:hover .column-header-menu {
    opacity: 1;
    pointer-events: auto;
}

/* ========================================
   Cell Flash Highlight Animation
   Scale + glow effect animated by GSAP
   ======================================== */
.cell-flash-highlight {
    display: inline-block;
    border-radius: 4px;
    /* Scale and box-shadow animated by GSAP */
}