/**
 * Dashboard Styles
 * ================
 *
 * Custom CSS for the dashboard page including:
 * - Modern card-based layout
 * - Gradient headers and professional styling
 * - Table expand/collapse functionality
 * - Enhanced stat cards with hover effects
 * - Form transitions
 * - Scrollbar styling
 */

/* Import consolidated animations */
@import url('./animations/core-animations.css');
@import url('./animations/table-animations.css');

/* Dashboard Header — flat, edge-to-edge banner (Task .8).
   Lives OUTSIDE .container (see base.html page_header block); the
   element spans the viewport naturally as a full-width in-flow block.
   Vertical padding only — the inner .container supplies side gutters
   and keeps the header content aligned with the page body. */
.dashboard-header {
    background: var(--primary-color);
    color: white;
    padding: var(--banner-pad-y) 0;
    margin-bottom: var(--banner-margin-bottom);
}

/* Mobile: View Map (left) + Clear demo data (right) share one row instead of
   stacking. Buttons grow to fill the row but never shrink below their label
   (no min-width:0), so the text can't overflow the button. The PWA install
   button, when present, drops to its own full-width row below. */
@media (max-width: 767px) {
    .dashboard-header-actions > form,
    .dashboard-header-actions > .btn {
        flex: 1 1 0;
    }

    .dashboard-header-actions > .btn {
        order: 1;  /* View Map on the left */
    }

    .dashboard-header-actions > form {
        order: 2;  /* Clear demo data on the right */
    }

    .dashboard-header-actions > form .btn {
        width: 100%;
    }

    .dashboard-header-actions .btn-lg {
        font-size: 1rem;
        white-space: nowrap;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .dashboard-header-actions > #pwa-install-container-inline {
        order: 3;
        flex: 1 1 100%;
    }
}

/* Enhanced Section Cards */
/* Timeline (.inv-tl-*) — shared by the invoice payment timeline and the
   entity-activity timeline on quote/job/client detail pages. Lives here so
   every detail page (all bundles @import dashboard.css) can use it. */
.inv-timeline { padding: 1rem 1.25rem; }
.inv-tl-item {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 1.25rem;
    border-left: 2px solid #dee2e6;
}
.inv-tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.inv-tl-dot {
    position: absolute;
    left: -5px;
    top: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.inv-tl-current .inv-tl-dot {
    width: 10px;
    height: 10px;
    left: -6px;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}
.inv-tl-body { line-height: 1.4; }

/* Section icon colors - using CSS variables from entity_colors */
#quotes .section-header > span > i.bi {
    color: var(--entity-color-quotes);
}

#jobs .section-header > span > i.bi {
    color: var(--entity-color-jobs);
}

#invoices .section-header > span > i.bi {
    color: var(--entity-color-invoices);
}

#clients .section-header > span > i.bi {
    color: var(--entity-color-clients);
}


/* Entity ID badge colors (mobile) - subtle background on the Quote #/Job #/etc section */
@media (max-width: 767px) {
    #quotes .mobile-card-id {
        background: color-mix(in srgb, var(--entity-color-quotes) 15%, transparent);
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }

    #jobs .mobile-card-id {
        background: color-mix(in srgb, var(--entity-color-jobs) 15%, transparent);
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }

    #invoices .mobile-card-id {
        background: color-mix(in srgb, var(--entity-color-invoices) 15%, transparent);
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }

    #clients .mobile-card-id {
        background: color-mix(in srgb, var(--entity-color-clients) 15%, transparent);
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }

}

/* Table search input */
.table-search {
    position: relative;
    display: flex;
    align-items: center;
    /* list_search_controller.js scrolls a focused search box to the top of the
       viewport on mobile. Keep it clear of the top edge. */
    scroll-margin-top: 0.5rem;
}

.table-search i {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.table-search input {
    padding-left: 32px;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-base);
    width: 180px;
    font-weight: 400;
    background: var(--input-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.table-search input:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.12);
}

.table-search input::placeholder {
    color: var(--text-muted);
}

[data-page="dashboard"] tr[data-search-priority="secondary"] {
    opacity: 0.62;
}

[data-page="dashboard"] tr[data-search-priority="secondary"]:hover {
    opacity: 0.82;
}

/* Mobile: Make tables full width */
@media (max-width: 767px) {
    /* Pull table containers out to section edges with negative margins.
       Descendant, not child: the list views wrap their table in a <turbo-frame>,
       which is a real element and would break a child combinator. */
    .section-body .table-responsive {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    /* Re-add padding to table cells for proper spacing */
    .table th:first-child,
    .table td:first-child {
        padding-left: 1rem;
    }
    
    .table th:last-child,
    .table td:last-child {
        padding-right: 1rem;
    }

    /* Tighten the buffer above the list: smaller Quick Actions card and
       gaps between cards. Loads after themes/skin.css, so equal-specificity
       [data-theme] selectors win on source order (no !important needed). */
    [data-theme] .action-section {
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
    }

    [data-theme] .section-card {
        margin-bottom: 1rem;
    }

    /* Entity-list cards should float individually, not be linked by the wrapper's
       frame. On mobile the cards bleed to the section edges, so the section-card's
       border/shadow draws one continuous line down the whole list. Drop the frame
       (border + shadow + fill) on list section-cards only — scoped via :has() to a
       contained list table so non-list section-cards keep theirs. Each <tr> card
       keeps its own border/shadow and now stands alone on the page background. */
    [data-theme] .section-card:has(> .section-body .table-responsive) {
        border: none;
        box-shadow: none;
        background: transparent;
        /* skin.css clips .section-card to its rounded corners so sticky table
           headers can't escape them. The full-bleed puts each <tr> card flush
           against that boundary with zero side clearance, so tr.expanded's drop
           shadow gets sliced flat down both edges. No corners left to protect
           here -- the frame is gone, and mobile hides the thead entirely. */
        --section-card-overflow: visible;
    }

    /* Without the wrapper frame the header reads as a second floating panel,
       detached from its cards by a hard bottom edge. Keep it card-like (fill +
       top/side definition + rounded top) but FADE the fill out at the bottom and
       drop the bottom border, so the header dissolves down toward the first card
       instead of boxing itself off. The fill lives on a ::before so the mask fade
       never clips the title or search input (those stay on the z-index:1 layer).
       List section-cards only. */
    [data-theme] .section-card:has(> .section-body .table-responsive) > .section-header {
        position: relative;
        background: transparent;
        border: none;
        /* Modest room below the content so the bottom edge has space to dissolve,
           without pushing the header away from the list. */
        padding-bottom: 1.5rem;
    }
    [data-theme] .section-card:has(> .section-body .table-responsive) > .section-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        /* Same recipe as the entity cards below (mobile-cards.css), so the header
           reads as the first card in the stack — fill, border, radius all matched.
           Only the bottom is open: no bottom border, and the mask dissolves just
           the lower third so the top + sides stay crisp while the bottom melts
           into the list. */
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
                mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    }
    [data-theme] .section-card:has(> .section-body .table-responsive) > .section-header > * {
        position: relative;
        z-index: 1;
    }
    /* Pull the first card up close so the dissolved header sits on top of the
       stack, not floating above it. */
    [data-theme] .section-card:has(> .section-body .table-responsive) > .section-body {
        padding-top: 0;
    }

    /* Keep the search inline with the section title instead of wrapping
       below it (mobile.css wraps all .justify-content-between rows). */
    [data-theme] .section-header {
        flex-wrap: nowrap;
        padding: 1rem 1.25rem;
    }

    .table-search input {
        width: 180px;
    }
}

/* Enhanced Stat Cards */
.enhanced-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,123,255,0.15);
}

.stat-item-enhanced {
    text-align: center;
    padding: 1.5rem;
    background: var(--card-bg);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.stat-number-enhanced {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label-enhanced {
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Enhanced Form Container */
.form-body {
    padding: 1.5rem;
}

/* NOTE: Animation keyframes moved to animations/core-animations.css
 * Using consolidated animations to reduce duplication
 */

/* Table expand functionality has been removed for cleaner design */

/* Clickable stat cards */
.stat-card-link {
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-link:hover {
    transform: translateY(-2px);
    text-decoration: none !important;
}

.stat-card-link:hover .stat-card {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.stat-card-link:active {
    transform: translateY(0);
}

.stat-card {
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

/* Ensure text colors remain correct on hover */
.stat-card-link:hover .text-white {
    color: white !important;
}

.stat-card-link:hover .text-dark {
    color: var(--bs-dark) !important;
}

/* Smooth scrolling - only for anchor links, not Turbo navigation */
/* Removed: html { scroll-behavior: smooth; } - causes slow Turbo navigation */

/* Scrollable table containers */
.table-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
}

/* The dashboard tables carry BOTH .table-responsive and
   .table-scroll-container. base.css forces `.table-responsive` to
   `overflow: visible !important` so row dropdowns aren't clipped — but
   that !important shorthand also overrides this scroll box's
   `overflow-y: auto`. The box keeps its 400px max-height while its
   content stays `overflow: visible`, so a table taller than 400px
   spills out and is painted over the section below it. Re-assert the
   scroll box with matching (0,3,0) specificity + !important so it wins.
   Desktop only — the max-width:767px block below intentionally reverts
   to a natural-height table (mobile has no 400px scroll box). */
.section-body .table-responsive.table-scroll-container {
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Mobile view - remove scroll container limit for collapsible sections.

   Both axes must be visible, not just overflow-y. CSS resolves a `visible`
   axis to `auto` whenever the other axis is not `visible`, so pairing
   `overflow-y: visible` with `overflow-x: auto` silently made this a scroll
   container that clips on BOTH axes at its padding box. The rows are cards
   here (mobile-cards.css), each filling the container's full width, so there
   was no horizontal room and tr.expanded's drop shadow was sliced flat down
   the left and right edges.

   Nothing scrolls sideways at this width to lose: mobile-cards.css hides the
   thead and turns tbody/tr into blocks, so the table cannot exceed the
   container's width. */
@media (max-width: 767px) {
    .table-scroll-container,
    .section-body .table-responsive,
    .section-body .table-responsive.table-scroll-container {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }
}

/* ==========================================================================
   MOBILE COLLAPSIBLE SECTIONS
   ========================================================================== */

/* Collapsible section header - tappable on mobile */
@media (max-width: 767px) {
    .section-header-collapsible {
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .section-header-collapsible:active {
        background: #e9ecef;
    }

    /* Collapse indicator chevron */
    .collapse-indicator {
        transition: transform 0.25s ease;
        font-size: 0.875rem;
        opacity: 0.6;
        display: inline-block;
    }

    /* Rotate chevron when collapsed (point right) */
    .section-header-collapsible[aria-expanded="false"] .collapse-indicator {
        transform: rotate(-90deg);
    }

    /* Chevron points down when expanded (default state) */
    .section-header-collapsible[aria-expanded="true"] .collapse-indicator {
        transform: rotate(0deg);
    }

    /* Visual feedback that section is collapsed */
    .section-header-collapsible[aria-expanded="false"] {
        border-radius: 10px;
    }

    /* Collapse animation - isolate reflow and use GPU */
    .section-body {
        contain: layout style;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .section-body.collapsing {
        overflow: hidden;
        transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Same easing both directions */
        will-change: height, contents;
    }

    /* Collapsed state */
    .section-body.collapse:not(.show) {
        padding: 0;
    }
}

.table-header-sticky th {
    position: sticky;
    top: 0;
    /* Opaque, theme-aware: floats over scrolling rows (skin.css mirrors this) */
    background-color: var(--surface);
    z-index: 10;
    border-bottom: 1px solid var(--border-color);
}

/* Custom scrollbar styling */
.table-scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* NOTE: Form and table animation keyframes moved to animations/core-animations.css
 * and animations/table-animations.css for consolidation
 */

/* Form animation classes - using consolidated animations */
.form-slide-in {
    animation: fadeInUp 0.3s ease-out;
}

.form-slide-out {
    animation: fadeOutScale 0.3s ease-out;
}

/* NOTE: Table row animation classes now use consolidated animations
 * from animations/table-animations.css - these classes are now defined there
 */

/* Loading state for tables */
.table-loading {
    position: relative;
    pointer-events: none;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.8);
    backdrop-filter: blur(1px);
    z-index: 10;
}

/* Smooth transitions for status badges */
.status-badge {
    transition: all 0.3s ease;
}

/* Clickable status badge (macros/status_badge.html) — desktop + mobile variants
   share this class; .status-badge-desktop adds the desktop-only layout rules,
   mirroring .mobile-card-status-badge in mobile-cards.css. */
.status-badge-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.status-badge-clickable:hover {
    opacity: 0.85;
}

.status-badge-clickable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.35);
}

.status-badge-desktop {
    white-space: normal;
    word-wrap: break-word;
    max-width: 140px;
    display: inline-block;
}

.status-badge-desktop .custom-status {
    display: block;
    font-size: 0.85em;
    margin-top: 2px;
    pointer-events: none;
}

/* Edit Quote Modal Fixes - Let modal expand naturally */
#editQuoteModal .modal-dialog {
    max-height: none;
    margin: 2rem auto;
}

#editQuoteModal .modal-content {
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
}

#editQuoteModal .modal-body {
    padding: 1.5rem;
    /* Remove overflow constraints - let the modal-content handle scrolling */
}

#editQuoteModal .modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    /* Footer stays at the bottom of the modal content */
}

/* Ensure notes section expands smoothly with Bootstrap collapse */
#editNotesSection {
    overflow: hidden;
}

/* Let Bootstrap handle the collapse animation */
#editNotesSection.collapsing {
    transition: height 0.35s ease;
}

/* Ensure modal backdrop covers expanded content */
#editQuoteModal .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Ensure modal content stays above backdrop */
#editQuoteModal .modal-content {
    position: relative;
    z-index: 1050;
}

/* Mobile-specific modal adjustments */
@media (max-width: 768px) {
    #editQuoteModal .modal-dialog {
        margin: 0;
        max-height: 100vh;
        max-height: 100dvh;
    }

    #editQuoteModal .modal-content {
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
    
    #editQuoteModal .modal-body {
        padding: 1rem;
    }
    
    #editQuoteModal .modal-footer {
        padding: 0.75rem 1rem;
    }
}

/* =========================================================================
   Row Truncation (mobile "Show more" feature)
   ========================================================================= */

.truncate-row {
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.truncate-row.row-hidden {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}
.truncate-row.row-visible {
    opacity: 1;
    transform: translateY(0);
}
.truncate-row.row-appearing {
    animation: rowFadeIn 0.3s ease forwards;
}
@keyframes rowFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================================
   First-Run Onboarding (hero card + getting-started checklist)
   Rendered by templates/components/dashboard_first_run.html for businesses
   with no quotes yet; replaces the stat grid until there is data behind it.
   ========================================================================= */

.first-run-hero {
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.first-run-hero-title {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.first-run-hero-subtitle {
    max-width: 34rem;
    margin: 0 auto 1.5rem;
}

.first-run-hero-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.first-run-checklist {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.first-run-checklist-header {
    margin-bottom: 0.75rem;
}

.first-run-checklist-items li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.35rem 0;
}

.first-run-checklist-items li.is-done {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: line-through;
}

.first-run-checklist-items li.is-done .bi-check-circle-fill {
    color: var(--bs-success, #198754);
}