/* ============================================================================ 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; } /* Light / dark logo swap. Both s render into the DOM (the PHP template emits whichever variants the admin uploaded) and CSS hides the wrong one based on . Falls back gracefully when only one variant is configured. */ .doc-preview-head .doc-head-logo .doc-head-logo-dark { display: none; } html[data-theme="dark"] .doc-preview-head .doc-head-logo .doc-head-logo-light { display: none; } html[data-theme="dark"] .doc-preview-head .doc-head-logo .doc-head-logo-dark { display: inline-block; } /* Proposal / estimate / contract body content. Customers paste HTML from the admin's TinyMCE editor, and that HTML almost always carries hard-coded inline text colors (TinyMCE wraps the copy in color:#000000 / rgb(...) spans). Those saved colors ignore the page theme, so dark text disappears on the dark surface and light text disappears on the light surface. Force the body copy to follow the active theme in BOTH directions — black-on-light, white-on-dark — with !important so it overrides the inline colors. --text-main flips with the theme on its own (#333 light / #f1f5f9 dark), so a single rule covers both. Links keep the brand color so they stay distinguishable from body text. */ .proposal-html-content, .proposal-html-content * { color: var(--text-main) !important; } .proposal-html-content a, .proposal-html-content a * { color: var(--primary-700, #00B872) !important; } html[data-theme="dark"] .proposal-html-content a, html[data-theme="dark"] .proposal-html-content a * { color: var(--primary-color, #00E58D) !important; } .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; } }