/* ============================================================================
   Public document-preview surfaces (contract / invoice / proposal / estimate
   public links). The views use daybreak's native dashboard chrome:
   .page-section (outer) → .content-section (inner subsections) →
   .section-header / .section-subtitle. Everything below is a thin layer
   of feature-specific support that the dashboard chrome doesn't already
   ship.
   ============================================================================ */

/* Single-column public preview wrapper (the index.php public-preview-area
   already adds .container > .row around this). */
.doc-preview-wrap {
    padding: 1.5rem 0 3rem;
}

/* Page-section internal spacing. Applies to every daybreak customer view
   that wraps its body in .card-element.page-section — both the rebuilt
   document-preview pages (under .doc-preview-wrap) and the inexxus-25-
   ported project / task views (under .page-container > .page-main-row).
   The .content-section blocks get 2rem of top spacing between each so
   sub-headers don't bump into the content above them. */
.card-element.page-section .content-section {
    margin-top: 2rem;
}
.card-element.page-section .content-section:first-child,
.card-element.page-section > .doc-stats-row + .content-section,
.card-element.page-section .page-content > .content-section:first-child {
    margin-top: 1.75rem;
}
.card-element.page-section > .doc-stats-row:first-child {
    margin-top: .25rem;
}

/* The .section-header at the top of a page-section gets a divider so the
   page title separates from the body content. */
.card-element.page-section .section-header {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Section subtitles get a small underline gap so the sub-header doesn't
   bleed into the content below it. */
.card-element.page-section .section-subtitle {
    margin-bottom: 1.25rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--border-color);
}

/* Outer page wrappers used by the inexxus-25-ported views get the same
   breathing room as .doc-preview-wrap so they're consistent. */
.page-container {
    padding: 1.5rem 0 3rem;
}
.page-container > .container {
    padding-left: 0;
    padding-right: 0;
}
.page-container .page-main-row {
    margin-left: 0;
    margin-right: 0;
}

/* Header strip: logo + title + status + action buttons, all inline */
.doc-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.doc-preview-head .doc-head-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}
.doc-preview-head .doc-head-logo img {
    max-height: 56px;
    max-width: 180px;
    width: auto;
    height: auto;
}
.doc-preview-head .doc-head-title h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    line-height: 1.2;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.doc-preview-head .doc-head-title h2 i {
    color: var(--accent-color);
    font-size: 1.25rem;
}
.doc-preview-head .doc-head-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: .95rem;
}
.doc-preview-head .doc-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    flex-shrink: 0;
}

/* Inline stats row inside .content-section. Used on invoice/estimate to
   show Status / Date / Due / Total in a compact strip rather than
   separate cards. */
.doc-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.doc-stat {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--accent-color) 4%, var(--card-color));
    border: 1px solid var(--border-color);
    border-radius: .75rem;
}
.doc-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    flex-shrink: 0;
}
.doc-stat-text {
    min-width: 0;
}
.doc-stat-label {
    display: block;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: .15rem;
}
.doc-stat-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Two-column info grid (Bill-to / Ship-to / Company) */
.doc-info-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.doc-info-col h4 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.doc-info-col h4 i {
    color: var(--accent-color);
    font-size: .9rem;
}
.doc-info-col address,
.doc-info-col .doc-info-body {
    margin: 0;
    font-style: normal;
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.6;
}

/* Label/value rows (Contract Info card, Proposal sidebar) */
.doc-info-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.doc-info-rows .doc-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px dashed var(--border-color);
}
.doc-info-rows .doc-info-row:last-child { border-bottom: none; }
.doc-info-rows .doc-info-label {
    color: var(--text-secondary);
    font-size: .85rem;
}
.doc-info-rows .doc-info-value {
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 500;
    text-align: right;
}

/* Totals table (right-aligned, light) */
.doc-totals {
    margin-bottom: 0;
}
.doc-totals td {
    padding: .55rem .85rem !important;
    border-top: 1px solid var(--border-color);
}
.doc-totals tr:first-child td { border-top: none; }
.doc-totals .doc-totals-label {
    color: var(--text-secondary);
    text-align: right;
}
.doc-totals .doc-totals-value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    width: 38%;
    white-space: nowrap;
}
.doc-totals tr.doc-totals-grand td {
    border-top: 2px solid var(--accent-color);
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

/* Signature pad canvas (contract sign flow) */
.doc-sign-pad {
    width: 100%;
    height: 200px;
    border: 2px dashed var(--border-color);
    border-radius: .5rem;
    background: var(--card-color);
    cursor: crosshair;
    display: block;
    touch-action: none;
}
.doc-sign-pad-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .5rem;
}
.doc-sign-image img {
    max-width: 320px;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: .5rem;
    background: var(--bg-card);
    padding: .5rem;
}

/* Attachment list */
.doc-attachments {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.doc-attachment {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    background: color-mix(in srgb, var(--accent-color) 4%, var(--card-color));
    border: 1px solid var(--border-color);
    border-radius: .5rem;
}
.doc-attachment .doc-att-icon {
    font-size: 1.4rem;
    color: var(--accent-color);
    flex-shrink: 0;
}
.doc-attachment .doc-att-meta {
    flex: 1;
    min-width: 0;
}
.doc-attachment .doc-att-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: .15rem;
    word-break: break-word;
}
.doc-attachment .doc-att-name a {
    color: inherit;
    text-decoration: none;
}
.doc-attachment .doc-att-name a:hover { color: var(--accent-color); }
.doc-attachment .doc-att-sub {
    font-size: .8rem;
    color: var(--text-secondary);
}

/* Discussion thread (proposal) */
.doc-comment {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.doc-comment:last-child { border-bottom: none; }
.doc-comment-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--text-secondary);
    margin-bottom: .35rem;
}
.doc-comment-head strong { color: var(--text-primary); }
.doc-comment-body {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   Responsive (matches daybreak's announcement_detail.css breakpoints).
   - ≤992px: tablet — proposal sidebar already stacks under main content via
     Bootstrap's col-md-* breakpoint.
   - ≤768px: phone landscape — header strip stacks vertically, action buttons
     wrap to full width, padding shrinks, stat tiles compress.
   - ≤480px: phone portrait — drop nonessentials (logo shrinks more, info
     rows stack label-above-value).
   ---------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .doc-preview-head .doc-head-title h2 {
        font-size: 1.35rem;
    }
}

@media (max-width: 768px) {
    .doc-preview-wrap {
        padding: 1rem 0 2rem;
    }

    /* Header strip stacks vertically and actions flow full-width */
    .doc-preview-head {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .doc-preview-head .doc-head-left {
        flex-wrap: wrap;
        gap: .75rem;
    }
    .doc-preview-head .doc-head-logo img {
        max-height: 48px;
        max-width: 140px;
    }
    .doc-preview-head .doc-head-title h2 {
        font-size: 1.2rem;
    }
    .doc-preview-head .doc-head-subtitle {
        font-size: .9rem;
    }
    .doc-preview-head .doc-head-actions {
        width: 100%;
        justify-content: flex-start;
        gap: .4rem;
    }
    .doc-preview-head .doc-head-actions .btn,
    .doc-preview-head .doc-head-actions .action-button {
        flex: 1 1 calc(50% - .4rem);
        min-width: 0;
    }
    .doc-preview-head .doc-head-actions .action-button .btn {
        width: 100%;
    }
    .doc-preview-head .doc-head-actions form.action-button {
        margin: 0;
    }

    /* Stats tiles get tighter */
    .doc-stats-row {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: .6rem;
    }
    .doc-stat {
        padding: .75rem;
        gap: .6rem;
    }
    .doc-stat-icon {
        width: 34px;
        height: 34px;
        font-size: .9rem;
    }
    .doc-stat-value {
        font-size: .9rem;
    }

    /* Info columns and rows */
    .doc-info-cols {
        gap: 1.25rem;
    }
    .doc-info-col h4 {
        font-size: .9rem;
    }
    .doc-info-col address,
    .doc-info-col .doc-info-body {
        font-size: .85rem;
    }

    /* Totals goes full-width (.col-md-6.col-md-offset-6 already stacks via
       Bootstrap, this just tightens the table itself) */
    .doc-totals td {
        padding: .45rem .65rem !important;
        font-size: .9rem;
    }
    .doc-totals .doc-totals-value {
        width: 45%;
    }
    .doc-totals tr.doc-totals-grand td {
        font-size: 1rem;
    }

    /* Items table - allow horizontal scroll without breaking the page */
    .page-section .table-responsive,
    .content-section .table-responsive {
        margin-left: -.5rem;
        margin-right: -.5rem;
        border-radius: 0;
    }

    /* Attachments and comments compress */
    .doc-attachment {
        padding: .6rem .75rem;
        gap: .6rem;
        flex-wrap: wrap;
    }
    .doc-attachment .doc-att-meta {
        flex: 1 1 60%;
    }
    .doc-attachment .doc-att-name {
        font-size: .9rem;
    }
    .doc-attachment .doc-att-sub {
        font-size: .75rem;
    }

    /* Signature pad scales down */
    .doc-sign-pad {
        height: 160px;
    }

    /* Modal: phone-friendly margins (Bootstrap's modal-lg is 900px+ which
       overflows on phones — let the dialog be the full viewport) */
    .modal-dialog.modal-lg {
        width: auto;
        margin: .75rem;
    }
}

@media (max-width: 480px) {
    .doc-preview-wrap {
        padding: .75rem 0 1.5rem;
    }
    /* Tighten the outer card padding so small phones (≤360px) don't lose
       a third of their viewport width to padding. Only applies inside
       the document-preview wrapper so other daybreak cards keep their
       default 1.5rem padding. */
    .doc-preview-wrap > .card-element.page-section {
        padding: 1rem;
    }
    .doc-preview-head .doc-head-left {
        flex-direction: column;
        align-items: flex-start;
    }
    .doc-preview-head .doc-head-logo img {
        max-height: 42px;
        max-width: 120px;
    }
    .doc-preview-head .doc-head-title h2 {
        font-size: 1.05rem;
    }
    /* Action buttons stack to a single column */
    .doc-preview-head .doc-head-actions .btn,
    .doc-preview-head .doc-head-actions .action-button {
        flex: 1 1 100%;
    }

    /* Stats become single column with tighter padding */
    .doc-stats-row {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    /* Label/value rows stack vertically so long values don't crash into labels */
    .doc-info-rows .doc-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
    }
    .doc-info-rows .doc-info-value {
        text-align: left;
    }

    /* Totals row labels + values stay side-by-side but tighter */
    .doc-totals td {
        padding: .4rem .5rem !important;
        font-size: .85rem;
    }

    /* Sign-pad shorter on small portrait phones */
    .doc-sign-pad {
        height: 140px;
    }

    /* Comments tighter */
    .doc-comment {
        padding-bottom: .75rem;
        margin-bottom: .75rem;
    }
    .doc-comment-head {
        flex-wrap: wrap;
    }
}