/* =============================================
   SHARED DATA-ENTRY TABLE STYLES
   Used by: project-estimate.html, project-planning.html
   For the .line-item-list editable table pattern
   List data tables (sticky thead/columns) live at the bottom of this file
   ============================================= */

.intro-helper {
    padding-bottom: var(--primary-radius-and-padding-half);
    margin-bottom: var(--primary-radius-and-padding);
    border-bottom: var(--border-divider);
}

/* Base table font sizing */
.line-item-list {font-size: var(--font-size-small);}
.line-item-list th {font-size: var(--font-size-smallest);}

/* Card layout when containing a data-entry table */
.card:has(.line-item-list) {padding-left: 0; padding-right: 0;}
.card:has(.line-item-list):not(.kpi) h2,
.card:has(.line-item-list) h3 {padding-left: var(--primary-radius-and-padding)}

/* Base cell padding */
.line-item-list td,
.line-item-list th {
    padding: .3125rem;
    vertical-align: middle;
}
th.actions-cell {padding-right: .75rem;}

.line-item-list td.planning-sub-cell,
.line-item-list th.planning-sub-cell {
    padding-left: 0;
}

/* specific cell padding */
td.actions-cell,
td.price-cell,
td.unit-total-cell,
td.total-cell,
td.po-total-cell,
td.po-qty-cell,
td.po-est-total-cell,
td.tax-cell {padding-top: .6rem;}

/* Shared column widths */
.checkbox-cell {width: 2rem; min-width: 2rem}

.expand-row-cell {width: 3.5rem; min-width: 3.5em}

/* Alert column—only takes up as much space as we need for the occasional alert icon, while maintaining ADA touch targets */
.line-item-list td.alert-col,
.line-item-list th.alert-col { width: 1.75rem; min-width: 1.75rem; padding: 0;}
.alert-col button {margin-top: .55rem; margin-left: -.4rem;}

/* Give an indent to nested tables to account for the expand button and visually look a bit better */


.line-item-list.nested {width: 100%}
/* Leading selection column. The space that used to be pure first-cell indent now holds
   the bulk-actions checkbox, so the name column still starts at the same 3rem. */
.line-item-list.nested tr td:first-child {width: 3rem; min-width: 3rem; padding-left: .75rem;}
.line-item-list.nested tr th:first-child {padding-left: .75rem;}
/* Name column takes the remaining width. Moved off :first-child when the checkbox column
   was added, otherwise the checkbox cell stretches and the rest of the table collapses. */
.line-item-list.nested tr td:nth-child(2) {width: 100%;}

/* Expand/collapse icon rotates 180deg to reflect parent row state.
   Rotation lives on a wrapper span (not the icon or button) so we don't
   inherit the icon's positioning offsets (`left: 4px` + `bulk-misaligned-8`)
   and so the button's tooltip pseudo-elements stay upright. Scoped to
   `.line-item-list .expand-row-cell` (and the #list data tables, e.g. tasks.html) so it can't affect
   other action-btn uses. */
.line-item-list .expand-row-cell .action-btn .icon-rotator,
#list .expand-row-cell .action-btn .icon-rotator {
    display: inline-flex;
    transform: rotate(180deg);
}
.line-item-list .expand-row-cell .action-btn.expanded .icon-rotator,
#list .expand-row-cell .action-btn.expanded .icon-rotator {
    transform: rotate(0deg);
}

/* Shared text alignment */
.checkbox-cell {text-align: left}
.actions-cell {text-align: right}

/* Table header styling */
.line-item-list thead tr {
    background-color: oklch(from var(--color-DB-fifteen) l c h / 60%);
}

/* Sticky thead — sticks below pinned dashboard when visible */
.line-item-list thead th {
    position: sticky;
    top: var(--pinned-header-height, 0px);
    z-index: 10;
    background-color: var(--color-none);
}

/* Seamless input styling — inputs fill cells */
.line-item-list td .form-field {
    margin: 0;
    gap: 0;
}

.line-item-list td .form-input,
.line-item-list td .select-trigger {
    border: none;
    background: transparent;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    min-height: 1.85rem; /* ADA touch target */
}

.line-item-list input[type="number"] {text-align: right;}

/* Add item & section button row */
.add-section-control {
    width: calc(100% - (var(--primary-radius-and-padding)*2));
    display: flex;
    justify-content: center;
    align-items: center;
    color: oklch(from var(--color-dark-blue) l c h / 80%);
    margin: 2rem var(--primary-radius-and-padding) 2rem var(--primary-radius-and-padding);
    padding: 1rem;
    border-radius: var(--radius-secondary);
    background-color: var(--color-faded-teal);
    border: 2px dashed oklch(from var(--color-dark-blue) l c h / 50%);
    transition: all 0.2s ease;
}
.add-section-control .btn.secondary {
    color: oklch(from var(--color-dark-blue) l c h / 80%);
    border-color: var(--color-blue)
}
.add-section-control span {margin-top: .25rem;}

/* Add item & section button row */
.add-item-row {
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.add-item-row button {
    transition: transform 0.2s ease;
}

/* Editable cells get subtle background tint.
   The border affordance (resting dotted + desktop dashed hover) is shared
   with the inline status pickers and lives in main.css (editable-cell
   affordance block) so it is defined once, not duplicated here. */
.line-item-list .form-field:not(:has(.toggle-wrapper)) .form-input,
.line-item-list .form-field:not(:has(.toggle-wrapper)) .select-trigger {
    background-color: var(--color-faded-teal);
}
.line-item-list tr.row-expandable .form-field:not(:has(.toggle-wrapper)) .form-input {/* need to override for cells with background colors */
    border: 1px solid oklch(from var(--color-none) l c h / 99%);
}

/* Expandable parent rows — pressing anywhere outside an interactive child
   toggles expand/collapse. State stays in sync with the toggle button via
   row.expanded + re-render. */
.line-item-list tr.row-expandable {cursor: pointer;}

/* Editable-cell hover affordance (desktop) is defined once in main.css,
   shared by line items and the inline status pickers. */

/* Error state — override seamless border for validation feedback */
.line-item-list .form-field.error {
    border: 1px solid var(--color-red);
    background-color: oklch(from var(--color-red) l c h / 10%);
}

/* Center toggle in tax cell */
.line-item-list td.tax-cell .form-field {
    justify-content: center;
    align-items: center;
}

/* Search icon positioning for table context */
.line-item-list .search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.line-item-list .search-icon {
    position: absolute;
    top: 10%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--color-row-headers);
    pointer-events: none;
}

.line-item-list .form-input.search {
    padding-left: 2rem;
}

/* =============================================
   LINE ITEM NOTES
   Shared note editor + display for table rows
   ============================================= */

/* Note display row — sits directly below its parent item row */
.note-display-row td {
    border-bottom: none !important;
    padding-top: 0 !important;
}

/* Remove bottom border from parent row when note follows */
tr[data-item-id]:has(+ .note-display-row) td {
    border-bottom: none !important;
}

/* Restore border on last note row before next item */
.note-display-row:not(:has(+ tr)) td,
.note-display-row:has(+ tr:not(.note-display-row)) td {
    border-bottom: var(--border-divider) !important;
}

/* Editor + display animations */
.line-item-note-editor,
.line-item-note-display {
    animation: notesFadeIn 0.2s ease-out;
}

@keyframes notesFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Note display cell */
.note-display-cell {
    padding: 0.75rem 1rem;
}

.note-display-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 10px;
    margin-left: 32%;
    margin-bottom: .25rem;
    border-top: 1px dotted oklch(from var(--color-khaki) l c h / 30%)
}
.po.note-display-container {margin-left: 0; padding-left: var(--primary-radius-and-padding-half);}

.note-content {
    flex: 1;
    min-width: 0;
}

.note-meta {
    font-size: var(--font-size-smallest);
    margin-bottom: 0.5rem;
    color: var(--color-row-headers);
}

.note-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.note-actions-buttons {
    display: flex;
    gap: .9rem;
}

/* Compact the note display */
.line-item-note-display {
    font-size: var(--font-size-small);
    line-height: 1.4;
}

/* Override main.css note-text for compact table context */
.line-item-list .note-text {
    font-size: var(--font-size-small);
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Smooth transitions */
.note-display-row {
    transition: all 0.2s ease;
}

/* Ensure note rows follow their parent on reorder */
tr[data-item-id] ~ .note-display-row {
    order: inherit;
}

/* Visual indicator for items with notes */
.action-btn.has-note {
    color: var(--color-blue);
    background-color: oklch(from var(--color-blue) l c h / 15%);
}


/* =============================================
   LIST DATA TABLES: VIEWPORT-STICKY TABLE SYSTEM
   Used by: inbox, opportunities, project-wip, follow-up-list, job-gantt,
   materials, team-performance, wip-report
   Page-specific column widths, :root width overrides & each page's
   scroll breakpoint (@container max-width) stay in the page <style> block
   ============================================= */

/* Remove card container constraints - let table breathe */
#list.card,
#list {
    overflow: visible !important;
    background: transparent;
    box-shadow: none;
    margin-bottom: 0;
}

#list,
#list-header {
    box-shadow: var(--shadows-multi);
    background-color: var(--color-none);
}

/* Single sticky wrapper for section header + pagination/filter pills */
#list-header {
    position: sticky;
    top: 0;
    z-index: 12;
}

#list-header > .section-header {
    padding: calc(var(--primary-radius-and-padding) / 2) var(--primary-radius-and-padding) calc(var(--primary-radius-and-padding) / 2) var(--primary-radius-and-padding);
    margin-bottom: 0;
}

#list-header > #pagination-header {
    padding-left: var(--primary-radius-and-padding);
    padding-right: var(--primary-radius-and-padding);
    margin-bottom: 0;
    padding-bottom: calc(var(--primary-radius-and-padding) / 2);
}

/*
   STICKY THEAD STRATEGY:
   The thead lives inside #list-header (above .data-table-wrapper) so it sticks
   natively with the rest of the header. JS syncs horizontal scroll and column
   widths between the sticky thead and the tbody table.
*/
#sticky-thead {
    overflow-x: auto;
    overflow-y: clip;
    scrollbar-width: none;
}

#sticky-thead::-webkit-scrollbar {
    display: none;
}

/* Header tooltips: overflow-x:auto (needed for scroll sync) forces overflow-y to hidden, which cut off
   anything hanging below the header. Extend the clip area below the header (padding) without changing
   layout (matching negative margin), and let clicks/hovers pass through that empty area to the rows. */
#sticky-thead {
    padding-bottom: 10rem;
    margin-bottom: -10rem;
    pointer-events: none;
}
#sticky-thead table {
    pointer-events: auto;
}
#list-header {
    display: flow-root; /* keeps the negative margin inside the header so it doesn't grow */
}

#sticky-thead table {
    margin: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

#sticky-thead th {
    background-color: var(--color-none);
}

/* Sticky columns in thead need same pinning as tbody */
#sticky-thead th:first-child,
#sticky-thead th:last-child {
    position: sticky;
    background-color: var(--color-none);
    z-index: 5;
}

#sticky-thead th:first-child {
    left: 0;
}

#sticky-thead th:last-child {
    right: 0;
}

/* Default table size is for very large screens; sizes are handled in media queries to create the scrollable table (as-needed), and stacked (800px wide)
   Always set the table width according to its contents */
.scrolling-table {
    width: 100%;
}

.data-table-content th {white-space: nowrap}

.data-table-content {
    container-type: inline-size;
    width: 100%;
    max-width: 100%;
    background-color: var(--color-none);
    box-shadow: var(--shadows-multi)
}

/* Table wrapper handles horizontal scroll only */
.data-table-wrapper {
    overflow-x: auto;
    overflow-y: clip;
    max-height: none !important;
    position: relative;
    scroll-behavior: auto; /* Override main.css smooth - needed for floating scrollbar drag */
    /* Hide native horizontal scrollbar - we'll use a custom floating one */
    scrollbar-width: none; /* Firefox */
}

.data-table-wrapper::-webkit-scrollbar {
    height: 0;
    display: none; /* Chrome, Safari, Edge */
}

.data-table-content {
    overflow: visible !important;
}

/* =============================================
   FLOATING HORIZONTAL SCROLLBAR
   ============================================= */
.floating-scrollbar {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 12px;
    background-color: var(--color-DB-fifteen);
    border-top: 1px solid oklch(from var(--color-dark-blue) l c h / 10%);
    z-index: 1000;
    display: none; /* Hidden by default, JS shows when needed */
    transition: right 0.3s ease; /* Smooth transition when panel opens/closes */
}

/* Adjust for right panel when open */
body:has(.right-panel[aria-hidden="false"]) .floating-scrollbar {
    right: var(--right-panel-width);
}

.floating-scrollbar-track {
    position: relative;
    height: 100%;
    margin: 0 var(--primary-radius-and-padding);
}

.floating-scrollbar-thumb {
    position: absolute;
    top: 2px;
    height: 8px;
    min-width: 40px;
    background-color: oklch(from var(--color-dark-blue) l c h / 35%);
    border-radius: 4px;
    cursor: grab;
    transition: background-color 0.15s ease;
}

.floating-scrollbar-thumb:hover,
.floating-scrollbar-thumb.dragging {
    background-color: oklch(from var(--color-dark-blue) l c h / 55%);
}

.floating-scrollbar-thumb.dragging {
    cursor: grabbing;
}

/* Adjust main content to account for floating scrollbar when visible */
body.has-floating-scrollbar .main-container {
    padding-bottom: 12px;
}

/* =============================================
   FILTER PILLS OVERFLOW (+N MORE)
   ============================================= */
#filter-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    gap: calc(var(--primary-radius-and-padding) / 4);
}

#filter-pills .selected-tag {
    flex-shrink: 0;
}

#filter-pills .pills-overflow {
    flex-shrink: 0;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-dark-blue);
    opacity: 0.7;
    padding: 0.25rem 0.5rem;
    background: var(--color-DB-fifteen);
    border-radius: var(--primary-radius-and-padding);
    cursor: pointer;
    white-space: nowrap;
}

#filter-pills .pills-overflow:hover {
    opacity: 1;
    background: oklch(from var(--color-blue) l c h / 15%);
}

.data-table-wrapper::before,
.data-table-wrapper::after {
content: "";
position: absolute;
top: 0;
width: 24px;
height: 100%;
pointer-events: none;
z-index: 10;
}

.responsive-table {
min-width: 100%;
overflow-x: auto;
position: relative;
}

/* When table scrolls, be sure we don't get overlapping text */
.scrolling-table th,
.scrolling-table td {background: var(--color-none);}

/* First & last column widths; in data tables, first should always have a select box and last should have the actions */
.scrolling-table th:nth-child(1),
.scrolling-table td:nth-child(1) { left: 0; width: var(--table-checkbox-col-width); min-width:var(--table-checkbox-col-width)} /* checkbox column */

.scrolling-table th:last-child,
.scrolling-table td:last-child {right:0;text-align: right}

/* settings for sticky/pinned columns */
.scrolling-table th:nth-child(1),
.scrolling-table td:nth-child(1),
.scrolling-table th:last-child,
.scrolling-table td:last-child {
position: sticky;
z-index: 5;
}

/* Sticky right column using :last-child */
.scrolling-table th:last-child,
.scrolling-table td:last-child {
width: var(--table-sticky-table-col-far-right-width); min-width: var(--table-sticky-table-col-far-right-width);
}

@container main-content (max-width: 800px) {
    /* Disable viewport-sticky behavior on mobile */
    #list-header {
        position: static;
    }
    /* Hide floating scrollbar on mobile */
    .floating-scrollbar {
        display: none !important;
    }
    /* Allow filter pills to wrap on mobile */
    #filter-pills {
        flex-wrap: wrap;
    }
    #filter-pills .pills-overflow {
        display: none;
    }
    /* make rows look like individual cards on mobile */
    table.responsive-table {
            border-collapse: separate;
            border-spacing: 0 var(--primary-radius-and-padding); /* horizontal - vertical spacing between rows */
            }
    .card:has(.responsive-table) {
        background-color: transparent;
        box-shadow: none;
        padding: 0;
    }
    .card:has(.responsive-table) .section-header {
        padding-left: 0;
        padding-right: 0;
    }
    .responsive-table tr {
        box-shadow: var(--shadows-multi);
        border-radius: var(--primary-radius-and-padding);
    }
    .responsive-table tr td:first-child {
        border-top-right-radius: var(--primary-radius-and-padding);
        border-top-left-radius: var(--primary-radius-and-padding);
        overflow: hidden;
    }
    .responsive-table tr td:last-child {
        border-bottom-right-radius: var(--primary-radius-and-padding);
        border-bottom-left-radius: var(--primary-radius-and-padding);
    }
    .responsive-table thead {display: block;}
    .responsive-table th:not(:first-child) {display: none;}
    .responsive-table th,
    .responsive-table td,
    .responsive-table th:first-child {
        position:static;
        z-index: auto ;
        white-space: normal;
        display: block;
    }
    /* reset z-index for previously sticky/pinned columns */
    .scrolling-table th:nth-child(1),
    .scrolling-table td:nth-child(1),
    .scrolling-table th:last-child,
    .scrolling-table td:last-child {
    z-index:unset;
    }
    /* Let full page scroll, not just the table wrapper */
    .data-table-wrapper {
        max-height: none !important;
        overflow: visible !important;
    }
    /* Remove artificial min-width overflow */
        .responsive-table {
            min-width: auto !important;
            overflow: visible !important;
        }
    /* Remove unnecessary shadows & borders */
    .responsive-table thead,
    .responsive-table th:last-child,
    .responsive-table td:last-child,
    .responsive-table th:first-child:has(.checkbox-wrapper), 
    .responsive-table td:first-child:has(.checkbox-wrapper) {
        box-shadow: none;
    }
    .responsive-table tr:not(:last-child) td {
        border-bottom: none;
        padding: calc(var(--primary-radius-and-padding) / 2);
    }
    .responsive-table td::before {display: block;font-size: var(--font-size-small);font-weight: 600;opacity: .7;}
    .responsive-table .priority-col::before { content:'Priority'}
    .responsive-table .source-col::before { content:'Source'; padding-bottom: .25rem;}
    .responsive-table .trade-col::before { content:'Trade'; padding-bottom: .25rem;}
    .responsive-table .date-col::before { content:'Due'}
    .responsive-table .date-col:nth-of-type(2):before { content:'Date Created'}
    .responsive-table .activity-col::before { content:'Activity'}
    .responsive-table .project-col::before { content:'Project Name & Location'}
    .responsive-table .prospect-col::before { content:'Prospect'}
    /* Actions at bottom - no label, full width */
    .responsive-table td:last-child {
        padding-top: 0.5rem;
    }
    .responsive-table .table-actions-buttons {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .responsive-table .actions-left {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    td.status.duplicate + td:has(.badge), 
    td.status.needs-review + td:has(.badge), 
    td.status.expiring + td:has(.badge) {
        padding-top: inherit;
    }
    /* Checkbox cell - no grid layout needed */
    .responsive-table td:nth-child(1) {
        padding-bottom: 0.75rem;
        width: 100%;
    }
    .responsive-table td:nth-child(1) .checkbox-wrapper {
        width: 100%;
        justify-content: flex-start;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
        font-size: var(--font-size-small);
    }
    .scrolling-table td:last-child,
    .dropdown-small {
        width: 100%;
    }
    .bulk-actions-btn {
        width: 100%;
        justify-content: space-between;
    }
}