/* General Body & Font */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #f4f7f6;
margin: 0;
padding: 20px;
color: #333;
font-size: 12px;
overflow-y: scroll;
}
.container {
max-width: 1600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* ---------------------------------------------------------------------
Stats Dashboard — compact KPI strip above the job table.
------------------------------------------------------------------- */
.job-stats-dashboard {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
margin-bottom: 16px;
align-items: stretch;
}
@media (max-width: 1280px) {
.job-stats-dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.job-stats-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
.job-stats-dashboard { grid-template-columns: 1fr; }
}
.stat-card {
background: #fff;
padding: 8px 10px 8px 12px;
border-radius: 6px;
border: 1px solid #e5e7eb;
border-left-width: 3px;
text-align: left;
transition: box-shadow 0.15s, border-color 0.15s;
min-height: 0;
display: flex;
flex-direction: column;
}
.stat-card:hover {
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
.stat-card .stat-label {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #9ca3af;
margin-bottom: 0;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
}
.stat-card .stat-main {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 1px;
margin-top: auto;
min-height: 34px;
min-width: 0;
}
.stat-card .stat-value {
font-size: 18px;
font-weight: 700;
line-height: 1.1;
color: #111827;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.stat-card .stat-sub {
font-size: 10px;
line-height: 1.2;
min-height: 12px;
color: #9ca3af;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-card .stat-sub--empty {
visibility: hidden;
}
.stat-card--total { border-left-color: #6366f1; background: linear-gradient(135deg, #fafaff 0%, #fff 100%); }
.stat-card--total .stat-value { color: #4338ca; }
.stat-card--live-value { border-left-color: #10b981; background: linear-gradient(135deg, #f0fdf8 0%, #fff 100%); }
.stat-card--live-value .stat-value { color: #047857; }
.stat-card--quotes-chasing { border-left-color: #f59e0b; background: linear-gradient(135deg, #fffbeb 0%, #fff 100%); }
.stat-card--quotes-chasing .stat-value { color: #b45309; }
.stat-card--enquiry { border-left-color: #ef4444; background: linear-gradient(135deg, #fef7f7 0%, #fff 100%); }
.stat-card--enquiry .stat-value { color: #b91c1c; }
.stat-card--live-count { border-left-color: #14b8a6; background: linear-gradient(135deg, #f0fdfa 0%, #fff 100%); }
.stat-card--live-count .stat-value { color: #0f766e; }
.stat-card--avg { border-left-color: #a855f7; background: linear-gradient(135deg, #faf5ff 0%, #fff 100%); }
.stat-card--avg .stat-value { color: #7e22ce; }
/* Login Form */
#login-container {
max-width: 400px;
margin-top: 50px;
font-size: 14px;
}
#login-container .form-group input {
padding: 8px;
}
#login-container button {
padding: 8px 12px;
font-size: 14px;
}
.form-group {
margin-bottom: 12px;
}
.form-group label {
display: block;
margin-bottom: 4px;
font-weight: 600;
}
.form-group input {
width: calc(100% - 18px);
padding: 7px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
padding: 7px 11px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
button:hover {
background-color: #0056b3;
}
/* View / unarchive — base (jobs table overrides below) */
.view-button {
padding: 4px 12px !important;
font-size: 11px !important;
border-radius: 3px !important;
}
.unarchive-button {
padding: 4px 12px !important;
font-size: 11px !important;
border-radius: 3px !important;
}
/* Jobs table — row actions: single line, compact (archived = View + Unarchive) */
#jobs-table .jobs-actions-inner {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 4px;
max-width: 100%;
}
#jobs-table .view-button,
#jobs-table .unarchive-button,
#jobs-table .invoice-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 2px 8px !important;
font-size: 10px !important;
font-weight: 500;
line-height: 1.2;
border-radius: 3px;
border: none;
cursor: pointer;
box-sizing: border-box;
vertical-align: middle;
font-family: inherit;
white-space: nowrap;
flex-shrink: 0;
}
#jobs-table .view-button {
background-color: #007bff;
color: #fff;
}
#jobs-table .view-button:hover {
background-color: #0069d9;
}
#jobs-table .unarchive-button {
background-color: #28a745;
color: #fff;
}
#jobs-table .unarchive-button:hover {
background-color: #218838;
}
#jobs-table .invoice-button {
background-color: #6c757d;
color: #fff;
white-space: nowrap;
max-width: 100%;
}
#jobs-table .invoice-button.invoice-button--done {
background-color: #28a745;
font-size: 9px !important;
padding: 0 5px !important;
letter-spacing: -0.02em;
line-height: 1.15;
}
#jobs-table .invoice-button:hover {
filter: brightness(1.06);
}
#login-error {
color: red;
font-weight: 600;
}
/* App Container */
header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
border-bottom: 1px solid #e3e6ea;
padding-bottom: 12px;
margin-bottom: 12px;
}
header h1 {
margin: 0;
font-size: 20px;
line-height: 32px;
flex-shrink: 0;
}
/* Header — user email + action buttons (two aligned rows, above nav tabs) */
#user-info {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
margin-left: auto;
min-width: 0;
}
.header-top-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
#user-email {
font-size: 12px;
color: #6b7280;
white-space: nowrap;
}
.header-actions,
.header-job-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.header-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
border: 1px solid transparent;
border-radius: 5px;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
text-decoration: none;
font-family: inherit;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.header-action-btn--primary {
background-color: #1f3a5f;
border-color: #1f3a5f;
color: #ffffff;
}
.header-action-btn--primary:hover {
background-color: #16304f;
border-color: #16304f;
color: #ffffff;
}
.header-action-btn--secondary {
background-color: #ffffff;
border-color: #d1d5db;
color: #374151;
}
.header-action-btn--secondary:hover {
background-color: #f9fafb;
border-color: #9ca3af;
color: #1f2937;
}
.header-action-btn--danger {
background-color: #ffffff;
border-color: #fca5a5;
color: #b91c1c;
}
.header-action-btn--danger:hover {
background-color: #fef2f2;
border-color: #b91c1c;
color: #991b1b;
}
.header-action-btn--signout {
background-color: #dc3545;
border-color: #dc3545;
color: #ffffff;
}
.header-action-btn--signout:hover {
background-color: #b02a37;
border-color: #b02a37;
color: #ffffff;
}
#toggle-archive-view-button.viewing-archived {
background-color: #fef3c7;
border-color: #fbbf24;
color: #92400e;
}
/* View Navigation Toolbar */
.toolbar {
margin-top: 15px;
margin-bottom: 15px;
}
.view-navigation {
display: flex;
gap: 2px;
align-items: flex-end;
border-bottom: 1px solid #e3e6ea;
padding-bottom: 0;
margin-bottom: 20px;
flex-wrap: wrap;
}
/* Tab-style nav buttons — plain text labels with a coloured underline on
the active item. No filled backgrounds, no margin tricks. */
.view-nav-button {
background-color: transparent;
color: #6b7280;
padding: 10px 14px;
border: none;
border-radius: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-weight: 500;
font-size: 12px;
transition: color 0.15s, border-color 0.15s;
box-shadow: none;
}
.view-nav-button:hover {
background-color: transparent;
color: #1f2937;
}
.view-nav-button.active {
background-color: transparent;
color: #1f3a5f;
font-weight: 600;
border-bottom: 2px solid #1f3a5f;
}
.view-nav-button.active:hover {
background-color: transparent;
color: #1f3a5f;
}
/* Toolbar action buttons — primary blue for the headline action,
secondary outline for everything else, danger outline for destructive. */
.toolbar-actions {
margin-left: auto;
display: flex;
gap: 8px;
align-items: center;
}
.btn-toolbar {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
border: 1px solid transparent;
background-color: transparent;
color: #1f2937;
}
.btn-toolbar--primary {
background-color: #1f3a5f;
border-color: #1f3a5f;
color: #ffffff;
}
.btn-toolbar--primary:hover {
background-color: #16304f;
border-color: #16304f;
color: #ffffff;
}
.btn-toolbar--secondary {
background-color: #ffffff;
border-color: #d1d5db;
color: #374151;
}
.btn-toolbar--secondary:hover {
background-color: #f9fafb;
border-color: #9ca3af;
color: #1f2937;
}
.btn-toolbar--danger {
background-color: #ffffff;
border-color: #fca5a5;
color: #b91c1c;
}
.btn-toolbar--danger:hover {
background-color: #fef2f2;
border-color: #b91c1c;
color: #991b1b;
}
#toggle-archive-view-button.viewing-archived {
background-color: #fef3c7;
border-color: #fbbf24;
color: #92400e;
}
/* ---------------------------------------------------------------------
Search + filter strip — flat row, no tinted box. Inputs share a single
visual language so the bar reads as one cohesive control.
------------------------------------------------------------------- */
.job-list-controls {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid #eef0f3;
}
.search-container {
flex: 0 1 320px;
min-width: 240px;
}
#job-search-input {
width: 100%;
padding: 7px 10px;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 12px;
background-color: #ffffff;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
#job-search-input:focus {
outline: none;
border-color: #1f3a5f;
box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.08);
}
#job-filters-container {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.filter-group {
display: flex;
align-items: center;
gap: 6px;
}
.filter-group label {
font-size: 11px;
font-weight: 600;
color: #6b7280;
}
.filter-sep {
font-size: 11px;
color: #9ca3af;
}
#job-filters-container select,
#job-filters-container input[type="number"],
#job-filters-container input[type="date"] {
padding: 5px 8px;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 11px;
background-color: #ffffff;
color: #1f2937;
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
#job-filters-container select:focus,
#job-filters-container input[type="number"]:focus,
#job-filters-container input[type="date"]:focus {
outline: none;
border-color: #1f3a5f;
box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.08);
}
.filter-input-narrow {
width: 70px;
}
#job-list-title {
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
color: #1f2937;
letter-spacing: -0.01em;
}
/* Main Jobs Table */
#jobs-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
table-layout: fixed;
background: #ffffff;
border: 1px solid #e9ebef;
border-radius: 6px;
overflow: hidden;
}
/* Horizontal-only separation between rows — kills the Excel-grid look.
Vertical separators are reserved for the group-header rules (which
have their own coloured left-borders to anchor the macro groups). */
#jobs-table th,
#jobs-table td {
border: none;
border-bottom: 1px solid #eef0f3;
padding: 5px 9px;
text-align: left;
vertical-align: middle;
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 11px;
line-height: 1.3;
}
/* Edge breathing room — first/last columns get extra outer padding so
the data isn't glued to the table border. */
#jobs-table th:first-child,
#jobs-table td:first-child {
padding-left: 14px;
}
#jobs-table th:last-child,
#jobs-table td:last-child {
padding-right: 14px;
}
#jobs-table tbody tr:last-child td {
border-bottom: none;
}
/* Subtle row hover keeps the eye locked to the active line without
redrawing the row chrome. */
#jobs-table tbody tr:not(.job-group-header):not(.job-group-spacer):hover td {
background-color: #f7f9fc;
}
#jobs-table thead th {
background-color: #ffffff;
border-bottom: 2px solid #e3e6ea;
font-weight: 600;
font-size: 9.5px;
padding: 8px 6px;
letter-spacing: 0.08em;
color: #6b7280;
text-transform: uppercase;
}
/* Status pill — flatter, tighter, consistent height across statuses */
#jobs-table td:nth-child(6) .status {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 20px;
box-sizing: border-box;
padding: 2px 8px;
font-size: 8.5px;
letter-spacing: 0.05em;
box-shadow: none !important;
font-weight: 600;
}
/* ---------------------------------------------------------------------
Per-column rules
---------------------------------------------------------------------
Width + alignment apply to both | and | so column widths stay
locked (table-layout: fixed reads first-row widths) and the header
alignment matches its body cells. Body-cell typography (font-size,
weight, colour) is scoped to | only so every header keeps the
single shared `thead th` style — i.e. all column titles look identical.
------------------------------------------------------------------- */
/* JN — narrow, centred title + values; owner chip stacks beneath as subtitle */
#jobs-table th:nth-child(1),
#jobs-table td:nth-child(1) {
width: 3.5%;
min-width: 3.75rem;
max-width: 5rem;
text-align: center;
}
#jobs-table td:nth-child(1) {
font-weight: 600;
color: #1f2937;
}
#jobs-table td:nth-child(1) .job-owner-chip {
display: block;
margin: 2px auto 0;
}
/* Customer */
#jobs-table th:nth-child(2),
#jobs-table td:nth-child(2) {
width: 13%;
}
#jobs-table td:nth-child(2) {
line-height: 1.25;
color: #1f2937;
}
/* Site — shows short internal site name (e.g. "Acme Southwark");
full address available via tooltip and on the job detail page */
#jobs-table th:nth-child(3),
#jobs-table td:nth-child(3) {
width: 11%;
}
#jobs-table td:nth-child(3) {
color: #6b7280;
line-height: 1.25;
}
/* Job Description — primary content column. Trimmed from 39% to 34% to
make room for the split Enquiry Date / Quote Sent columns. */
#jobs-table th:nth-child(4),
#jobs-table td:nth-child(4) {
width: 34%;
min-width: 180px;
}
#jobs-table td:nth-child(4) {
color: #1f2937;
}
/* Notes — fixed narrow column so badges align on every row */
#jobs-table th:nth-child(5),
#jobs-table td:nth-child(5) {
width: 2.75rem;
min-width: 2.75rem;
max-width: 3rem;
padding: 4px 2px;
text-align: center;
vertical-align: middle;
}
#jobs-table td.job-notes-cell {
line-height: 1;
}
/* Status column */
#jobs-table th:nth-child(6),
#jobs-table td:nth-child(6) {
width: 7%;
min-width: 4.5rem;
text-align: center;
}
/* Enquiry Date — single DD/MM/YY pill, centred. Yellow/orange/red age
pill applied to the inner .date-pill span (see further down). */
#jobs-table th:nth-child(7),
#jobs-table td:nth-child(7) {
width: 5.5%;
min-width: 4.75rem;
max-width: 5.5rem;
padding: 4px 4px;
text-align: center;
}
/* Quote Sent — single DD/MM/YY pill (light green when set), centred */
#jobs-table th:nth-child(8),
#jobs-table td:nth-child(8) {
width: 5.5%;
min-width: 4.75rem;
max-width: 5.5rem;
padding: 4px 4px;
text-align: center;
}
/* Pack (Y/N) — centred badge */
#jobs-table th:nth-child(9),
#jobs-table td:nth-child(9) {
width: 2rem;
max-width: 2.25rem;
padding: 4px 2px;
white-space: nowrap;
text-align: center;
}
/* Quote Value — centred title + values; tabular figures keep digits aligned */
#jobs-table th:nth-child(10),
#jobs-table td:nth-child(10) {
width: 6%;
min-width: 4.5rem;
text-align: center;
}
#jobs-table td:nth-child(10) {
color: #1f2937;
font-variant-numeric: tabular-nums;
}
/* Invoice — centred button or date */
#jobs-table th:nth-child(11),
#jobs-table td:nth-child(11) {
width: 6%;
min-width: 4.5rem;
text-align: center;
}
/* Actions — fits "View" tightly; floor of 7.5rem keeps "Restore" + "View"
on one line in the archive view (buttons have flex-shrink: 0). */
#jobs-table th:nth-child(12),
#jobs-table td:nth-child(12) {
width: 5.5%;
min-width: 7.5rem;
max-width: 9.5rem;
padding: 3px 4px;
vertical-align: middle;
text-align: center;
}
/* Status group headers in the Job List — uniform height */
#jobs-table tr.job-group-header td {
background: #f1f5f9;
border-left: 3px solid #6c757d;
border-right: 1px solid #e5e7eb;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
padding: 0 10px;
height: 32px;
text-align: left;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #495057;
vertical-align: middle;
}
#jobs-table tr.job-group-header[data-macro="prequote"] td { border-left-color: #ffc107; }
#jobs-table tr.job-group-header[data-macro="live"] td { border-left-color: #28a745; }
#jobs-table tr.job-group-header[data-macro="closed"] td { border-left-color: #6c757d; }
#jobs-table .job-group-header__inner {
display: flex;
align-items: center;
gap: 8px;
height: 100%;
}
#jobs-table .job-group-header__label {
display: inline-flex;
align-items: center;
line-height: 1;
}
#jobs-table .job-group-header__count {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 7px;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
color: #555;
letter-spacing: 0;
text-transform: none;
line-height: 1;
}
/* Macro-group spacer row: purely visual gap between Pre-quote / Live / Closed */
#jobs-table tr.job-group-spacer td {
border: none;
background: transparent;
padding: 0;
height: 10px;
}
/* Job Details View */
#job-details-container {
font-size: 14px;
}
#back-to-list-button {
font-size: 14px;
padding: 10px 20px;
background-color: #6c757d;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
margin-bottom: 20px;
transition: background-color 0.2s;
}
#back-to-list-button:hover {
background-color: #5a6268;
}
.job-details-layout {
display: grid;
grid-template-columns: 1fr 400px;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #e9ecef;
}
@media (max-width: 1200px) {
.job-details-layout {
grid-template-columns: 1fr;
}
}
.job-left-column,
.job-right-column {
display: flex;
flex-direction: column;
gap: 20px;
align-items: stretch;
}
.job-left-column > .detail-section:last-child,
.job-right-column > .detail-section:last-child {
flex: 1;
}
.detail-section {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 18px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid #eef0f3;
}
.section-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #1f2937;
letter-spacing: 0.01em;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.form-row:last-child {
margin-bottom: 0;
}
.form-field {
display: flex;
flex-direction: column;
}
.form-field.full-width {
grid-column: 1 / -1;
}
.form-field label {
font-size: 11px;
font-weight: 600;
color: #6b7280;
margin-bottom: 5px;
text-transform: none;
letter-spacing: 0;
}
.form-field input,
.form-field textarea,
.form-field select {
padding: 10px 12px;
border: 1px solid #ced4da;
border-radius: 6px;
font-size: 14px;
transition: all 0.2s;
font-family: inherit;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.form-field input[readonly] {
background-color: #f8f9fa;
cursor: not-allowed;
}
.form-field textarea {
resize: vertical;
min-height: 100px;
}
.form-field select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
padding-right: 35px;
appearance: none;
}
.inline-input-group {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
min-width: 0;
}
.inline-input-group > input:not([type="date"]),
.inline-input-group > select {
flex: 1 1 auto;
min-width: 0;
}
/* Date picker: intrinsic width so Save / Upload PO stay on one row */
.inline-input-group > input[type="date"] {
flex: 0 0 auto;
width: auto;
max-width: min(100%, 11.5rem);
min-width: 0;
}
.inline-input-group__actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
/* PO row: primary control stays left; actions align to the right (matches quote/status rhythm) */
.inline-input-group--po-row .inline-input-group__actions {
margin-left: auto;
}
/* ----- Quote & Status tile: same scale as Quote Details header Save (.btn-save) ----- */
.quote-status-tile .form-row {
align-items: start;
}
.quote-status-tile .inline-input-group {
align-items: center;
}
/* Tighter fields (aligned with Quote Details input density: 8px / 13px) */
.quote-status-tile .inline-input-group > input:not([type="date"]),
.quote-status-tile .inline-input-group > select {
box-sizing: border-box;
height: auto;
min-height: 0;
padding: 8px 12px;
font-size: 13px;
line-height: 1.35;
}
.quote-status-tile .inline-input-group > select {
padding-right: 34px;
background-position: right 12px center;
}
.quote-status-tile .inline-input-group > input[type="date"] {
box-sizing: border-box;
height: auto;
min-height: 0;
max-height: none;
padding: 7px 10px;
font-size: 13px;
line-height: 1.25;
}
/* Inherit global .btn-save / .btn-secondary; only fix optical text centre */
.quote-status-tile .inline-input-group__actions .btn-save {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
white-space: nowrap;
margin: 0;
-webkit-appearance: none;
appearance: none;
}
.btn-save {
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.btn-save:hover {
background-color: #0056b3;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Action buttons inside the Actions / Site Tools tiles on the detail page.
Aligned with the toolbar button palette (navy primary, white outline
secondary, soft tints for success/warning/danger). Flat, no hover lift —
keeps the page calm and matches the rest of the new design language. */
.btn-action {
padding: 9px 14px;
font-size: 13px;
font-weight: 600;
border: 1px solid transparent;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
text-align: center;
line-height: 1.2;
}
.btn-action.btn-primary {
background-color: #1f3a5f;
border-color: #1f3a5f;
color: #ffffff;
}
.btn-action.btn-primary:hover {
background-color: #16304f;
border-color: #16304f;
color: #ffffff;
}
.btn-action.btn-success {
background-color: #047857;
border-color: #047857;
color: #ffffff;
}
.btn-action.btn-success:hover {
background-color: #036249;
border-color: #036249;
color: #ffffff;
}
.btn-action.btn-secondary {
background-color: #ffffff;
border-color: #d1d5db;
color: #374151;
}
.btn-action.btn-secondary:hover {
background-color: #f9fafb;
border-color: #9ca3af;
color: #1f2937;
}
.btn-action.btn-danger {
background-color: #ffffff;
border-color: #fca5a5;
color: #b91c1c;
}
.btn-action.btn-danger:hover {
background-color: #fef2f2;
border-color: #b91c1c;
color: #991b1b;
}
.btn-action.btn-warning {
background-color: #fffbeb;
border-color: #fcd34d;
color: #92400e;
}
.btn-action.btn-warning:hover {
background-color: #fef3c7;
border-color: #f59e0b;
color: #78350f;
}
.btn-action:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.job-info-card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
box-sizing: border-box;
gap: 4px;
}
.job-info-card .button-group-title {
margin: 0;
padding-bottom: 0;
}
.job-info-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 12px;
align-items: center;
}
.job-info-grid label {
font-size: 12px;
font-weight: 600;
color: #495057;
}
.job-info-grid input {
padding: 4px 8px;
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 13px;
width: 100%;
box-sizing: border-box;
background-color: #ffffff;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.job-info-grid input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.job-info-grid input[readonly] {
background-color: #e9ecef !important;
cursor: not-allowed;
}
.job-actions-card {
display: flex;
flex-direction: column;
gap: 8px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
}
.quote-actions-group,
.job-actions-group {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0;
}
/* Input Fields Card */
.job-input-fields {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
box-sizing: border-box;
}
.quote-value-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 12px;
align-items: center;
}
.quote-value-grid label {
font-size: 12px;
font-weight: 600;
color: #495057;
}
.quote-value-grid input,
.quote-value-grid select {
padding: 4px 8px;
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 13px;
flex: 1;
min-width: 0;
box-sizing: border-box;
background-color: #ffffff;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.quote-value-grid input:focus,
.quote-value-grid select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.quote-value-grid select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 12px;
padding-right: 28px;
appearance: none;
}
.quote-value-grid button {
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #007bff;
color: white;
white-space: nowrap;
transition: background-color 0.15s ease-in-out;
}
.quote-value-grid button:hover {
background-color: #0056b3;
}
.job-input-fields .action-item {
display: flex;
align-items: center;
gap: 8px;
}
.job-input-fields .action-item input,
.job-input-fields .action-item select {
padding: 4px 8px;
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 13px;
flex: 1;
min-width: 0;
max-width: 220px;
box-sizing: border-box;
background-color: #ffffff;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.action-item {
display: flex;
align-items: center;
gap: 12px;
}
.action-item label {
font-size: 12px;
font-weight: 600;
color: #495057;
min-width: 150px;
text-align: right;
white-space: nowrap;
}
.action-item input,
.action-item select {
padding: 8px 10px;
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 13px;
flex: 1;
min-width: 0;
max-width: 220px;
box-sizing: border-box;
background-color: #ffffff;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.action-item input:focus,
.action-item select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.action-item select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 12px;
padding-right: 28px;
appearance: none;
}
.action-item button {
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #007bff;
color: white;
white-space: nowrap;
width: 120px;
min-width: 120px;
max-width: 120px;
box-sizing: border-box;
transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}
.action-item button:hover {
background-color: #0056b3;
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3);
}
.action-item button:active {
transform: translateY(0);
}
.button-group-title {
font-size: 11px;
font-weight: 700;
color: #6c757d;
margin: 0 0 6px 0;
text-transform: uppercase;
letter-spacing: 0.8px;
border-bottom: 1px solid #e9ecef;
padding-bottom: 4px;
}
.button-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.button-row button,
.button-row a {
flex: 1;
min-width: 140px;
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-primary {
background-color: #17a2b8;
color: white;
}
.btn-primary:hover {
background-color: #138496;
box-shadow: 0 4px 6px rgba(0,0,0,0.15);
transform: translateY(-1px);
}
.btn-success {
background-color: #28a745;
color: white;
}
.btn-success:hover {
background-color: #218838;
box-shadow: 0 4px 6px rgba(0,0,0,0.15);
transform: translateY(-1px);
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #5a6268;
box-shadow: 0 4px 6px rgba(0,0,0,0.15);
transform: translateY(-1px);
}
.btn-link {
background-color: #ffc107;
color: #333;
display: inline-block;
}
.btn-link:hover {
background-color: #e0a800;
box-shadow: 0 4px 6px rgba(0,0,0,0.15);
transform: translateY(-1px);
}
.make-live-btn {
background-color: #007bff !important;
}
.make-live-btn:hover {
background-color: #0056b3 !important;
}
.make-live-btn {
background-color: #28a745;
font-weight: bold;
padding: 8px 15px;
margin-top: 5px;
}
.make-live-btn:hover {
background-color: #1e7e34;
}
/* Per-job tab navigation — uses the same visual language as the top-level
view-nav (transparent buttons with a navy underline for the active tab)
so the two tab bars feel like one family rather than two eras. */
.tab-nav {
border-bottom: 1px solid #e5e7eb;
margin-bottom: 20px;
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.tab-link {
background-color: transparent;
border: none;
padding: 9px 13px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
margin-bottom: -1px;
color: #6b7280;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-link:hover {
background-color: transparent;
color: #1f2937;
}
.tab-link.active {
font-weight: 600;
color: #1f3a5f;
border-bottom: 2px solid #1f3a5f;
}
.tab-link.active:hover {
color: #1f3a5f;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Documents Tab */
.documents-section {
padding: 20px;
}
.documents-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.documents-header h3 {
margin: 0;
font-size: 18px;
color: #333;
}
.documents-list-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.document-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 6px;
transition: background-color 0.2s, border-color 0.2s;
}
.document-item:hover {
background-color: #f8f9fa;
border-color: #d0d0d0;
}
.document-info {
flex: 1;
min-width: 0;
}
.document-name {
display: block;
font-weight: 600;
color: #0066cc;
text-decoration: none;
margin-bottom: 4px;
font-size: 14px;
word-break: break-word;
}
.document-name:hover {
text-decoration: underline;
}
.document-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #666;
flex-wrap: wrap;
}
.document-meta span:not(:last-child) {
margin-right: 0;
}
.btn-delete-document {
padding: 6px 12px;
background-color: #dc3545;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: background-color 0.2s;
margin-left: 12px;
}
.btn-delete-document:hover {
background-color: #c82333;
}
#upload-document-button {
padding: 8px 16px;
font-size: 13px;
}
/* --- Quote Scope & Details --- */
/* Quote Scope & Details Card */
.quote-scope-section {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.quote-scope-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid #e9ecef;
}
.quote-scope-header .button-group-title {
margin: 0;
padding-bottom: 0;
}
.btn-save-details {
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #007bff;
color: white;
white-space: nowrap;
transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}
.btn-save-details:hover {
background-color: #0056b3;
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3);
}
.btn-save-details:active {
transform: translateY(0);
}
.quote-details-inputs {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.quote-details-inputs .form-group {
flex: 1;
margin-bottom: 0;
}
.quote-details-inputs .form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: #495057;
margin-bottom: 4px;
}
.quote-details-inputs .form-group input {
width: 100%;
padding: 8px 10px;
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 13px;
box-sizing: border-box;
background-color: #ffffff;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.quote-details-inputs .form-group input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.quote-scope-textarea {
width: 100%;
min-height: 80px;
padding: 8px;
border: 1px solid #ced4da;
border-radius: 5px;
font-family: inherit;
font-size: 13px;
line-height: 1.4;
box-sizing: border-box;
resize: vertical;
background-color: #ffffff;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.quote-scope-textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.quote-scope-textarea::placeholder {
color: #adb5bd;
}
/* --- End New Styles --- */
/* ----------------------------------------------------------------------
Costing V2 — preview shell
--------------------------
Phase (a) placeholder styling. Sits inside the existing .detail-section
shell so it reads as part of the same design language as the rest of
the detail page. Roadmap list + status row make the WIP nature obvious.
---------------------------------------------------------------------- */
/* V2 tab — consistent vertical rhythm between cards (flex only when tab active;
otherwise #costing-v2 { display:flex } overrode .tab-content { display:none }) */
#costing-v2.tab-content.active {
display: flex;
flex-direction: column;
gap: 16px;
}
#costing-v2 > .detail-section,
#costing-v2 > #costing-v2-lock-indicator,
#costing-v2 > #costing-v2-sections-container {
margin: 0;
}
.costing-v2-card {
margin-bottom: 0;
}
.costing-v2-card .section-header {
display: flex;
align-items: center;
gap: 10px;
}
.costing-v2-intro-card .costing-v2-intro-header {
margin-bottom: 8px;
padding-bottom: 8px;
}
.costing-v2-badge {
display: inline-block;
background-color: #fef3c7;
color: #78350f;
border: 1px solid #fcd34d;
font-size: 10.5px;
font-weight: 600;
padding: 3px 8px;
border-radius: 10px;
letter-spacing: 0.03em;
margin-left: auto;
}
.costing-v2-badge--live {
background-color: #d1fae5;
color: #065f46;
border-color: #6ee7b7;
}
.costing-v2-materials-hint {
margin: 0 0 12px;
padding: 8px 12px;
font-size: 12.5px;
line-height: 1.45;
color: #4b5563;
background: #f9fafb;
border-left: 3px solid #d1d5db;
border-radius: 0 4px 4px 0;
}
.costing-v2-coatings-hint {
margin-top: 8px;
color: #1e3a5f;
background: #eff6ff;
border-left-color: #60a5fa;
}
.costing-v2-coatings-hint strong { color: #1e40af; }
.costing-v2-coatings-decision {
margin: 8px 0 12px;
padding: 10px 12px;
font-size: 12.5px;
line-height: 1.5;
color: #1e3a5f;
background: #eff6ff;
border-left: 3px solid #60a5fa;
border-radius: 0 4px 4px 0;
}
.costing-v2-coatings-decision-lead { margin: 0 0 8px; }
.costing-v2-coatings-decision-list {
margin: 0 0 8px 1.1em;
padding: 0;
}
.costing-v2-coatings-decision-list li { margin-bottom: 4px; }
.costing-v2-coatings-decision-note {
color: #475569;
font-weight: normal;
}
.costing-v2-coatings-decision-foot {
margin: 0;
font-size: 12px;
color: #475569;
}
.costing-v2-subcontractor-hint {
color: #78350f;
background: #fffbeb;
border-left-color: #fbbf24;
}
.costing-v2-subcontractor-hint strong { color: #92400e; }
.v2-coatings-subcon-link {
display: inline-flex;
align-items: center;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 600;
color: #92400e;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
}
.v2-coatings-subcon-link:hover {
background: #fef3c7;
border-color: #f59e0b;
}
.costing-v2-coatings-decision .v2-coatings-subcon-link {
margin: 0 2px;
padding: 2px 8px;
font-size: inherit;
vertical-align: baseline;
}
.costing-v2-section-actions .v2-coatings-subcon-link {
flex-shrink: 0;
}
.v2-coating-work-type { margin-bottom: 14px; }
.v2-coating-work-option {
display: flex;
gap: 8px;
align-items: flex-start;
margin: 8px 0 0;
padding: 8px 10px;
border: 1px solid #e5e7eb;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
line-height: 1.45;
}
.v2-coating-work-option:hover { background: #f9fafb; }
.v2-coating-work-option input { margin-top: 3px; flex-shrink: 0; }
.v2-coating-external-panel {
padding: 12px;
margin-bottom: 12px;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 6px;
font-size: 13px;
line-height: 1.45;
color: #78350f;
}
.v2-coating-go-sub-btn { margin-top: 10px; width: 100%; }
.v2-coating-keyword-warning {
margin-top: 8px;
padding: 8px 10px;
font-size: 12.5px;
line-height: 1.45;
color: #92400e;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 4px;
}
.v2-flat-subcontractor-note {
margin-bottom: 14px;
padding: 10px 12px;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 6px;
}
.v2-flat-subcontractor-note-lead {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: #78350f;
}
.rates-row-footnote--lead {
margin: 0 0 12px;
padding: 8px 10px;
background: #eff6ff;
border-radius: 4px;
color: #1e3a5f;
}
.rates-row-footnote--lead strong { color: #1e40af; }
.v2-modal-lead {
margin: 0 0 14px;
font-size: 13px;
line-height: 1.45;
color: #4b5563;
}
.costing-v2-badge--notes {
background-color: #fef3c7;
color: #92400e;
border-color: #fcd34d;
margin-left: auto;
}
/* Internal notes — prominent amber card for coster → design office */
.costing-v2-internal-notes {
border-color: #fcd34d;
background: linear-gradient(180deg, #fffbeb 0%, #ffffff 48px);
}
.costing-v2-internal-notes-header {
margin-bottom: 6px;
}
.costing-v2-internal-notes-intro {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.5;
color: #78350f;
}
#costing-v2-internal-notes {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid #fde68a;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
line-height: 1.5;
color: #1f2937;
background: #fff;
min-height: 96px;
resize: vertical;
}
#costing-v2-internal-notes:focus {
outline: none;
border-color: #f59e0b;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.costing-v2-internal-notes-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
}
.costing-v2-internal-notes-status {
font-size: 12px;
color: #6b7280;
}
.costing-v2-internal-notes-status.is-success { color: #047857; }
.costing-v2-internal-notes-status.is-error { color: #b91c1c; }
.costing-v2-intro {
margin: 4px 0 14px;
font-size: 13px;
line-height: 1.5;
color: #4b5563;
}
.costing-v2-status-row {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
padding: 10px 12px;
background-color: #fafbfc;
border: 1px solid #eef0f3;
border-radius: 6px;
margin-bottom: 14px;
}
.costing-v2-status {
font-size: 13px;
font-weight: 600;
color: #1f2937;
}
.costing-v2-meta {
font-size: 11.5px;
color: #9ca3af;
font-variant-numeric: tabular-nums;
}
.costing-v2-roadmap {
font-size: 12.5px;
color: #6b7280;
line-height: 1.6;
}
.costing-v2-roadmap strong {
color: #1f2937;
display: block;
margin-bottom: 4px;
}
.costing-v2-roadmap ul {
margin: 0;
padding-left: 20px;
}
.costing-v2-roadmap li {
margin: 2px 0;
}
.costing-v2-roadmap li strong {
display: inline;
margin-right: 4px;
color: #1f3a5f;
}
/* ----------------------------------------------------------------------
Costing V2 — phase (b) materials surfaces
------------------------------------------
The materials section is the first piece of "real" V2 UI. It mirrors
the polished design language of V1 Costing Sheet (flat white cards,
tabular numerals on money, soft borders) so they sit naturally next
to each other while the parity work runs. Two row sources — Steel
(catalogue-driven) and Manual — are visually distinguished by a small
pill on the description so the user always knows where a number came
from.
---------------------------------------------------------------------- */
.costing-v2-banner {
margin-top: 4px;
padding: 10px 12px;
border-radius: 6px;
font-size: 12.5px;
line-height: 1.5;
}
.costing-v2-banner--warn {
background-color: #fff8e6;
border: 1px solid #fcd34d;
color: #78350f;
}
.costing-v2-banner--warn strong { color: #78350f; }
.costing-v2-banner--info {
margin-top: 8px;
background-color: #eef2ff;
border: 1px solid #c7d2fe;
color: #1e293b;
}
.costing-v2-banner--info strong { color: #1e293b; }
/* ============================================================
Phase (d.3 + d.4 + d.5) — Publish / Lock / Unlock styling
============================================================ */
/* Lock indicator: sits above the materials section on the V2 tab
when a quote is locked. Green palette to signal "published, good
state" — clearly distinct from the warning/info banners above. */
.costing-v2-lock-indicator {
background: #ecfdf5;
border: 1px solid #6ee7b7;
border-radius: 8px;
padding: 12px 16px;
margin: 0;
}
.costing-v2-lock-indicator-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.costing-v2-lock-indicator-main {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.costing-v2-lock-badge {
display: inline-block;
padding: 3px 10px;
background: #065f46;
color: #ecfdf5;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.costing-v2-lock-total {
font-size: 17px;
font-weight: 700;
color: #064e3b;
font-variant-numeric: tabular-nums;
}
.costing-v2-lock-indicator-meta {
margin-top: 6px;
font-size: 12px;
color: #047857;
}
.costing-v2-lock-indicator-rates-hint {
margin-top: 4px;
font-size: 11.5px;
color: #059669;
font-style: italic;
}
.costing-v2-unlock-btn {
border-color: #6ee7b7 !important;
color: #065f46 !important;
}
.costing-v2-unlock-btn:hover {
background: #d1fae5 !important;
}
/* Publish button in the grand-total footer — big and primary so it
reads as the obvious next action once you've reviewed the figures. */
.costing-v2-publish-row {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #e5e7eb;
}
.costing-v2-publish-row .costing-v2-clear-btn {
margin-left: 0;
}
.costing-v2-publish-btn {
font-size: 14px !important;
padding: 9px 22px !important;
font-weight: 600;
}
/* Clear quote — deliberately low-prominence (ghost button) so it
never competes with Publish for attention. Lives next to Publish
but the double-confirm modal does the real safety work. */
.costing-v2-clear-btn {
background: transparent;
color: #6b7280;
border: 1px solid #d1d5db;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.costing-v2-clear-btn:hover:not(:disabled) {
background: #fef2f2;
color: #991b1b;
border-color: #fecaca;
}
.costing-v2-clear-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Clear-quote modal — red-tinted warning, type-CLEAR gate. */
.costing-v2-clear-warning {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 6px;
padding: 14px 16px;
margin-bottom: 14px;
}
.costing-v2-clear-warning strong {
color: #991b1b;
font-size: 14.5px;
display: block;
margin-bottom: 8px;
}
.costing-v2-clear-warning p {
margin: 0 0 6px;
font-size: 13px;
color: #7f1d1d;
}
.costing-v2-clear-warning ul {
margin: 0;
padding-left: 20px;
font-size: 13px;
color: #7f1d1d;
}
.costing-v2-clear-warning li { padding: 2px 0; }
.costing-v2-clear-explainer {
font-size: 12.5px;
color: #6b7280;
margin: 0 0 14px;
line-height: 1.5;
}
.costing-v2-clear-status-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
margin-bottom: 12px;
background: #f8f9fb;
border: 1px solid #e5e7eb;
border-radius: 5px;
cursor: pointer;
font-size: 13.5px;
color: #1f2937;
line-height: 1.5;
}
.costing-v2-clear-status-row input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
cursor: pointer;
}
.costing-v2-clear-status-hint {
color: #6b7280;
font-weight: 400;
font-size: 12.5px;
}
#costing-v2-clear-typed {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 15px;
padding: 8px 12px;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid #d1d5db;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
#costing-v2-clear-typed:focus {
outline: none;
border-color: #991b1b;
box-shadow: 0 0 0 2px rgba(153, 27, 27, 0.12);
}
.costing-v2-clear-confirm-btn {
background: #b91c1c;
color: #fff;
border: 1px solid #991b1b;
padding: 9px 20px;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.12s;
}
.costing-v2-clear-confirm-btn:hover:not(:disabled) { background: #991b1b; }
.costing-v2-clear-confirm-btn:disabled {
background: #e5e7eb;
color: #9ca3af;
border-color: #d1d5db;
cursor: not-allowed;
}
/* V1 lock banner — calm blue, lives at the top of the V1 Costing
Sheet tab. Same palette as the existing V1 divergence banner so
it reads as part of the V1/V2 transitional family. */
.costing-v1-lock-banner {
background: #eef2ff;
border: 1px solid #c7d2fe;
color: #1e293b;
padding: 10px 14px;
border-radius: 6px;
font-size: 13px;
line-height: 1.4;
margin-bottom: 16px;
}
.costing-v1-lock-banner strong { color: #1e293b; }
/* ============================================================
Phase (f) — Cost Rates Admin view
Admin-friendly: large inputs, generous spacing, one card per
category, per-card save button, clear stamps + statuses.
============================================================ */
#costing-rates-admin-view {
max-width: 920px;
margin: 0 auto;
padding: 20px 24px 60px;
}
.rates-admin-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #e5e7eb;
}
.rates-admin-header h2 {
margin: 0;
font-size: 22px;
color: #1f3a5f;
}
.rates-admin-subheading {
margin: 4px 0 0;
color: #6b7280;
font-size: 13.5px;
}
.rates-admin-rule-missing {
background: #fef3c7;
border: 1px solid #fcd34d;
color: #78350f;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 18px;
font-size: 13px;
line-height: 1.5;
}
.rates-admin-rule-missing strong { color: #78350f; }
.rates-admin-rule-missing code {
background: #fde68a;
padding: 1px 5px;
border-radius: 3px;
font-size: 12px;
}
/* --- Card ---
Outer container matches the app-wide card recipe (.detail-section):
#e5e7eb border, 8px radius, same soft shadow. Keeps its own
margin/overflow since the header/body/footer split is structural. */
.rates-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 18px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
overflow: hidden;
}
.rates-card-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 14px 20px 10px;
border-bottom: 1px solid #f1f3f7;
flex-wrap: wrap;
}
.rates-card-header h3 {
margin: 0;
font-size: 17px;
color: #1f3a5f;
}
.rates-unit {
font-size: 13px;
font-weight: 500;
color: #6b7280;
}
.rates-card-stamp {
font-size: 12px;
color: #9ca3af;
font-variant-numeric: tabular-nums;
}
.rates-card-body {
padding: 12px 20px 14px;
}
/* --- Input row --- */
.rates-row {
display: grid;
grid-template-columns: 1fr 220px;
align-items: center;
gap: 12px 18px;
padding: 8px 0;
}
.rates-row label {
font-size: 14px;
color: #1f2937;
font-weight: 500;
line-height: 1.35;
}
.rates-row-footnote {
margin: 10px 0 0;
padding: 8px 10px;
background: #f9fafb;
border-radius: 4px;
color: #6b7280;
}
.rates-row-detail {
display: block;
font-size: 11.5px;
font-weight: 400;
color: #6b7280;
margin-top: 2px;
text-transform: none;
letter-spacing: 0;
}
/* Simple marker-pen highlight on helper text — same position as other
rates-row-detail hints, pink background only behind the words */
.rates-row-detail--highlight {
display: block;
width: fit-content;
max-width: 100%;
background: #fbcfe8;
color: #831843;
padding: 2px 5px;
border-radius: 2px;
font-weight: 500;
}
.rates-subsection-header {
margin: 14px 0 6px;
padding-top: 12px;
border-top: 1px solid #e5e7eb;
font-size: 12px;
font-weight: 600;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.rates-subsection-header .rates-row-detail {
display: inline;
margin-top: 0;
margin-left: 4px;
font-weight: 400;
text-transform: none;
}
.rates-input-wrap {
display: flex;
align-items: stretch;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #fff;
overflow: hidden;
transition: border-color 0.12s, box-shadow 0.12s;
}
.rates-input-wrap:focus-within {
border-color: #1f3a5f;
box-shadow: 0 0 0 2px rgba(31, 58, 95, 0.12);
}
.rates-input-wrap.is-dirty {
border-color: #f59e0b;
background: #fffbeb;
}
.rates-input-wrap.is-dirty:focus-within {
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.rates-currency {
background: #f9fafb;
color: #6b7280;
padding: 0 12px;
display: flex;
align-items: center;
font-size: 15px;
font-weight: 600;
border-right: 1px solid #e5e7eb;
}
.rates-currency--mult {
font-size: 17px;
color: #1f3a5f;
}
.rates-input {
flex: 1;
border: none;
outline: none;
padding: 10px 12px;
font-size: 16px;
font-variant-numeric: tabular-nums;
background: transparent;
width: 100%;
min-width: 0;
}
.rates-unit-suffix {
background: #f9fafb;
color: #6b7280;
padding: 0 10px;
display: flex;
align-items: center;
font-size: 13px;
border-left: 1px solid #e5e7eb;
}
/* --- Footer (save row) --- */
.rates-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 12px 20px 14px;
background: #fafbfc;
border-top: 1px solid #f1f3f7;
}
.rates-save-status {
font-size: 13px;
color: #6b7280;
}
.rates-save-status.is-success { color: #047857; font-weight: 600; }
.rates-save-status.is-error { color: #b91c1c; font-weight: 600; }
.rates-save-status.is-saving { color: #9ca3af; }
.rates-save-btn {
padding: 9px 18px !important;
font-size: 14px !important;
font-weight: 600;
}
.rates-save-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* --- Customer overrides (site labour) --- */
.rates-customer-overrides {
margin-top: 18px;
padding-top: 18px;
border-top: 1px dashed #e5e7eb;
}
.rates-customer-overrides h4 {
margin: 0 0 12px;
font-size: 14.5px;
color: #1f3a5f;
}
.rates-customer-overrides-hint {
font-weight: 400;
color: #6b7280;
font-size: 12.5px;
}
.rates-customer-override-row {
display: grid;
grid-template-columns: 1fr 220px auto;
align-items: center;
gap: 10px 16px;
padding: 8px 0;
border-bottom: 1px solid #f3f4f6;
}
.rates-customer-override-row:last-of-type { border-bottom: none; }
.rates-customer-override-name {
font-size: 14px;
color: #1f2937;
font-weight: 500;
}
.rates-customer-override-remove {
border: 1px solid #fecaca;
background: #fef2f2;
color: #991b1b;
padding: 5px 11px;
border-radius: 5px;
font-size: 12.5px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.12s;
}
.rates-customer-override-remove:hover { background: #fee2e2; }
.rates-customer-add-row {
display: grid;
grid-template-columns: 1fr 220px auto;
align-items: center;
gap: 10px 16px;
margin-top: 14px;
padding: 14px 12px;
background: #f8f9fb;
border: 1px dashed #d1d5db;
border-radius: 6px;
}
.rates-customer-add-row--three {
grid-template-columns: 1.2fr 1.2fr 200px auto;
}
.rates-site-sep {
color: #9ca3af;
margin: 0 6px;
font-weight: 400;
}
.rates-site-any {
color: #6b7280;
font-style: italic;
font-weight: 500;
}
.rates-customer-select:disabled {
background: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
}
.rates-customer-select {
padding: 9px 12px;
font-size: 14px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #fff;
width: 100%;
box-sizing: border-box;
}
.rates-empty-customers {
color: #9ca3af;
font-size: 13px;
font-style: italic;
padding: 6px 0;
}
/* Responsive — single column for narrow viewports */
@media (max-width: 720px) {
.rates-row,
.rates-customer-override-row,
.rates-customer-add-row,
.rates-customer-add-row--three {
grid-template-columns: 1fr;
}
}
/* Publish confirmation modal — Brief 8 design pass. Wider than the line
modals because it shows a full totals preview; given more vertical room
than the shared .v2-modal-body default so the table, explainer, and
confirm tick fit without an inner scrollbar on a normal-height window.
Scoped to this modal only — the Unlock modal and the line-item modals
keep the shared defaults. */
#costing-v2-publish-modal.modal { max-width: 760px; }
#costing-v2-publish-modal .v2-modal-body { max-height: 82vh; }
#costing-v2-unlock-modal.modal { max-width: 520px; }
/* --- Alignment fix (the specific bug Brief 8 was opened for) ---
Every block in the body — the table and the summary rows below it — is a
direct child of the same padded container (.v2-modal-body), so as long as
none of them add their OWN extra horizontal inset, their right-hand edges
land on the exact same pixel. Before this fix the table's money cells had
10px of their own right padding while the summary rows had none, so the
two blocks' numbers sat 10px apart. Fix: give both the table's outer
columns and every summary row the same small, deliberate 4px inset —
enough for the row highlight (below) to not look flush against the modal
wall, not enough to break the shared edge. */
.v2-grand-total-table--publish th:first-child,
.v2-grand-total-table--publish td:first-child { padding-left: 4px; }
.v2-grand-total-table--publish th:last-child,
.v2-grand-total-table--publish td:last-child { padding-right: 4px; }
/* The 3-column publish preview table (Category / Cost / Sale price) reuses
.v2-grand-total-table from the 4-column Costing tab card, where the 3rd
column is a centered "Markup" column. Here the 3rd column is another
money column, so its header needs to match its (right-aligned) data
instead of inheriting the centered header style. */
.v2-grand-total-table--publish th:nth-child(3) { text-align: right; }
/* Sale price is the number that matters here; Cost recedes so the eye
goes to the right column without needing a second look. */
.v2-grand-total-table--publish td.v2-cell-money:not(.v2-cell-sale) { color: #9ca3af; }
.costing-v2-publish-v1-block {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 6px;
padding: 14px 16px;
color: #7f1d1d;
font-size: 13px;
line-height: 1.5;
}
.costing-v2-publish-v1-block strong { color: #7f1d1d; }
.costing-v2-publish-v1-block .v2-block-detail {
margin-top: 8px;
font-size: 12.5px;
color: #991b1b;
}
.costing-v2-publish-preview {
margin-bottom: 16px;
}
.costing-v2-publish-preview .v2-grand-total-table {
margin-bottom: 0;
}
/* Summary rows (Lines being published / Optional fees / Markup being
frozen / Net total to customer) sit directly under the table with a
tight 2px rhythm between them — they read as one continuous list, not
four separate paragraphs — then a clear border breaks before the total. */
.costing-v2-publish-totals-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 4px;
font-size: 13px;
color: #6b7280;
font-variant-numeric: tabular-nums;
}
.costing-v2-publish-totals-row + .costing-v2-publish-totals-row {
margin-top: 2px;
}
.costing-v2-publish-totals-row strong {
color: #1f2937;
font-weight: 600;
}
/* The one number in this whole modal that actually matters to the person
about to click Publish — sized and coloured to read as the headline,
not just the last row of a list. */
.costing-v2-publish-totals-row--grand {
margin-top: 10px;
padding: 12px 4px;
background: #f0faf5;
border-radius: 6px;
font-size: 14px;
color: #065f46;
}
.costing-v2-publish-totals-row--grand strong {
color: #065f46;
font-size: 21px;
font-weight: 700;
}
.v2-publish-line-count {
color: #9ca3af;
font-size: 11.5px;
font-weight: 400;
}
.costing-v2-publish-confirm-label {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 16px;
padding: 12px 14px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 13px;
color: #374151;
line-height: 1.4;
cursor: pointer;
}
.costing-v2-publish-confirm-label input {
margin-top: 3px;
cursor: pointer;
}
.costing-v2-unlock-current {
margin: 0 0 8px;
font-size: 13.5px;
color: #1f2937;
}
.costing-v2-unlock-warn {
margin: 0 0 12px;
}
.costing-v2-unlock-explainer,
.costing-v2-publish-explainer {
margin: 0 0 14px;
padding: 10px 12px;
background: #f9fafb;
border-left: 3px solid #d1d5db;
border-radius: 0 4px 4px 0;
font-size: 12.5px;
color: #374151;
line-height: 1.5;
}
.costing-v2-unlock-explainer strong,
.costing-v2-publish-explainer strong {
display: block;
margin-bottom: 6px;
color: #111827;
}
.costing-v2-unlock-explainer ul,
.costing-v2-publish-explainer ul {
margin: 0;
padding-left: 18px;
}
.costing-v2-unlock-explainer li,
.costing-v2-publish-explainer li {
margin-bottom: 4px;
}
/* Publish modal only — a distinct "info" tint so this reads as contextual
explanation rather than another grey box indistinguishable from the
confirm-checkbox below it (both were the same flat grey before this
pass). Overrides the shared rule above; the Unlock modal keeps it. */
#costing-v2-publish-modal .costing-v2-publish-explainer {
margin: 16px 0;
padding: 12px 14px;
background: #f2f6ff;
border: 1px solid #d7e3fc;
border-left: 3px solid #7c9ee8;
border-radius: 6px;
font-size: 12.5px;
}
#costing-v2-publish-modal .costing-v2-publish-explainer strong {
color: #1e3a5f;
}
.costing-v2-unlock-explainer li:last-child,
.costing-v2-publish-explainer li:last-child {
margin-bottom: 0;
}
#costing-v2-unlock-reason {
width: 100%;
padding: 8px 10px;
font-size: 13px;
border: 1px solid #d1d5db;
border-radius: 5px;
font-family: inherit;
box-sizing: border-box;
resize: vertical;
}
.costing-v2-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #eef0f3;
}
.costing-v2-section-header h3 {
margin: 0;
flex: 1 1 auto;
min-width: 120px;
font-size: 15px;
line-height: 1.35;
}
.costing-v2-section-pricing-hint {
font-size: 11px;
font-weight: 400;
font-style: italic;
color: #9ca3af;
letter-spacing: normal;
text-transform: none;
white-space: normal;
}
.costing-v2-section-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-left: auto;
justify-content: flex-end;
}
.costing-v2-section-actions .add-item-button,
.costing-v2-section-actions .v2-add-secondary-btn {
min-height: 30px;
padding: 6px 12px;
}
/* Small secondary that visually pairs with .add-item-button (navy primary).
Outline navy, white background, same size — designed to sit next to
.add-item-button in section headers without being louder. */
.v2-add-secondary-btn {
background-color: #ffffff;
border: 1px solid #1f3a5f;
color: #1f3a5f;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
padding: 5px 11px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.v2-add-secondary-btn:hover {
background-color: #1f3a5f;
color: #ffffff;
}
.costing-v2-empty {
padding: 22px 16px;
text-align: center;
color: #9ca3af;
font-size: 13px;
background-color: #fafbfc;
border: 1px dashed #e5e7eb;
border-radius: 6px;
margin-top: 4px;
}
.costing-v2-table {
margin-top: 4px;
table-layout: fixed;
width: 100%;
}
/* Shared column grid — every V2 table uses the same pixel widths on
cols 2–4 so Hours / Qty / Weight / Rate / Cost / Markup line up
vertically across section cards regardless of header label length. */
.costing-v2-table col.v2-col-desc { width: auto; }
.costing-v2-table col.v2-col-qty { width: 92px; }
.costing-v2-table col.v2-col-weight { width: 92px; }
.costing-v2-table col.v2-col-rate { width: 112px; }
.costing-v2-table col.v2-col-total { width: 120px; }
.costing-v2-table col.v2-col-markup { width: 84px; }
.costing-v2-table col.v2-col-sale { width: 120px; }
.costing-v2-table col.v2-col-actions { width: 120px; }
.costing-v2-table th,
.costing-v2-table td { vertical-align: middle; }
.costing-v2-table .v2-cell-desc {
word-break: break-word;
line-height: 1.4;
}
/* Spacer cells (Transport / Sundries / Accommodation) — colspan 2
across the qty+rate slots. Thead keeps the normal grey header bar;
tbody stays empty but participates in row hover. */
.costing-v2-table thead th.v2-th-spacer {
padding: 9px 0;
border-bottom: 1px solid #e5e7eb;
background-color: #fafbfc;
}
.costing-v2-table tbody .v2-cell-spacer {
padding: 8px 0;
border-bottom: 1px solid #f1f3f6;
}
.costing-v2-table thead th.v2-th-num,
.costing-v2-table thead th.v2-th-money {
white-space: normal;
line-height: 1.25;
}
.costing-v2-table thead th.v2-th-desc { text-align: left; }
.costing-v2-table thead th.v2-th-num,
.costing-v2-table thead th.v2-th-money,
.costing-v2-table thead th.v2-th-actions { text-align: right; }
.costing-v2-table thead th.v2-th-num,
.costing-v2-table thead th.v2-th-money,
.costing-v2-table thead th.v2-th-actions,
.costing-v2-table .v2-cell-num,
.costing-v2-table .v2-cell-money {
padding-left: 14px;
padding-right: 14px;
}
.costing-v2-table .v2-cell-num,
.costing-v2-table .v2-cell-money {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.costing-v2-table .v2-cell-sale { color: #1f3a5f; font-weight: 600; }
.costing-v2-table .v2-cell-actions {
white-space: nowrap;
text-align: right;
}
.costing-v2-table tbody tr:hover td {
background-color: #f7f9fc;
}
.v2-source-pill {
display: inline-block;
margin-left: 8px;
padding: 1px 6px;
border-radius: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
}
.v2-source-pill--steel { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.v2-source-pill--hardox { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }
.v2-source-pill--manual { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.v2-source-pill--galv { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.v2-source-pill--inhouse { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.v2-source-pill--special { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
/* Dim style for em-dash weight cells (manual materials have no known weight). */
.v2-cell-num-dim { color: #9ca3af; font-weight: normal; }
/* Transport flat-cost modal — when to charge guidance for designers */
.v2-modal-content--transport {
max-width: 520px;
}
.v2-flat-transport-note {
margin: 0 0 16px;
padding: 12px 14px;
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 6px;
font-size: 13px;
color: #0c4a6e;
line-height: 1.5;
}
.v2-flat-transport-note-title {
margin: 0 0 8px;
font-size: 13.5px;
font-weight: 600;
color: #075985;
}
.v2-flat-transport-note-lead {
margin: 0 0 10px;
}
.v2-flat-transport-note-subhead {
margin: 0 0 6px;
font-weight: 600;
color: #075985;
}
.v2-flat-transport-note-list {
margin: 0;
padding-left: 20px;
}
.v2-flat-transport-note-list li {
margin-bottom: 4px;
}
.v2-flat-transport-note-list li:last-child {
margin-bottom: 0;
}
/* ---- Add Galvanising modal ---- */
.v2-galv-intro {
margin: 0 0 14px;
padding: 10px 12px;
background: #f0f9ff;
border-left: 3px solid #7dd3fc;
border-radius: 0 4px 4px 0;
font-size: 13px;
color: #075985;
line-height: 1.45;
}
.v2-galv-mode-toggle {
display: flex;
gap: 18px;
margin: 0 0 12px;
padding: 8px 10px;
background: #f9fafb;
border-radius: 4px;
font-size: 13px;
}
.v2-galv-mode-toggle label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: #374151;
}
.v2-galv-lines-list {
max-height: 220px;
overflow-y: auto;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 4px;
margin: 0 0 12px;
}
.v2-galv-line-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 3px;
font-size: 13px;
cursor: pointer;
}
.v2-galv-line-row:hover { background: #f3f4f6; }
.v2-galv-line-row input[type="checkbox"] { margin: 0; }
.v2-galv-line-desc { flex: 1; color: #1f2937; }
.v2-galv-line-kg {
font-variant-numeric: tabular-nums;
color: #075985;
font-weight: 600;
min-width: 70px;
text-align: right;
}
.v2-galv-empty {
padding: 12px;
color: #6b7280;
font-size: 12.5px;
text-align: center;
font-style: italic;
}
.v2-galv-fasteners-row {
margin-top: 6px;
}
.v2-galv-rate-display {
margin: 12px 0 6px;
padding: 8px 12px;
background: #f9fafb;
border-left: 3px solid #d1d5db;
border-radius: 0 3px 3px 0;
font-size: 13px;
color: #374151;
}
.v2-galv-rate-display strong {
font-variant-numeric: tabular-nums;
color: #111827;
}
.v2-galv-rate-source {
margin-left: 8px;
font-size: 11.5px;
color: #9ca3af;
}
.v2-galv-desc-hint {
font-size: 11.5px;
font-weight: 400;
color: #9ca3af;
margin-left: 4px;
}
.v2-galv-min-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
background: #fef3c7;
color: #92400e;
font-size: 11px;
font-weight: 600;
vertical-align: middle;
}
.v2-galv-min-note {
color: #b45309;
font-size: 12px;
font-weight: 500;
}
.v2-preview-row--galv-min strong {
color: #b45309;
}
/* Total-steel-weight pill above the materials subtotal. Sits as an
informational row, distinct from the £ subtotals beneath it. */
.costing-v2-materials-total-weight {
padding: 6px 12px;
margin: 0 0 4px;
background: #eff6ff;
border-left: 3px solid #93c5fd;
border-radius: 0 3px 3px 0;
font-size: 12.5px;
color: #1e40af;
}
.costing-v2-materials-total-weight strong {
color: #1e3a8a;
font-variant-numeric: tabular-nums;
}
.v2-row-btn {
display: inline-block;
padding: 3px 9px;
margin-left: 4px;
font-size: 11.5px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
background-color: #fff;
transition: background-color 0.15s, border-color 0.15s;
}
.v2-row-btn--edit { color: #1f3a5f; border: 1px solid #c7d2fe; background: #eef2ff; }
.v2-row-btn--edit:hover { background: #e0e7ff; }
.v2-row-btn--delete { color: #991b1b; border: 1px solid #fecaca; background: #fef2f2; }
.v2-row-btn--delete:hover { background: #fee2e2; }
.costing-v2-materials-footer,
.v2-section-footer,
.costing-v2-grand-total-footer {
margin-top: 10px;
margin-left: auto;
max-width: 440px;
padding: 10px 14px;
background-color: #fafbfc;
border: 1px solid #eef0f3;
border-radius: 6px;
}
.costing-v2-subtotal-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13px;
padding: 2px 0;
}
.costing-v2-subtotal-row--sale {
border-top: 1px solid #eef0f3;
margin-top: 6px;
padding-top: 8px;
font-weight: 700;
color: #1f3a5f;
font-size: 14px;
}
.costing-v2-contingency-override {
margin: 0 0 10px;
padding: 8px 10px;
border-radius: 4px;
background: #f9fafb;
border: 1px solid #e5e7eb;
}
.costing-v2-contingency-override__label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: #374151;
cursor: pointer;
user-select: none;
}
.costing-v2-contingency-override__label input {
margin: 0;
}
.costing-v2-contingency-override__hint {
display: block;
margin-top: 4px;
margin-left: 22px;
font-size: 11.5px;
}
.costing-v2-rate-override {
margin: 0 0 10px;
padding: 8px 10px;
border-radius: 4px;
background: #f9fafb;
border: 1px solid #e5e7eb;
}
.costing-v2-rate-override__label {
display: block;
margin-bottom: 6px;
font-size: 12.5px;
font-weight: 600;
color: #374151;
}
.costing-v2-rate-override__label-detail {
font-weight: 400;
color: #6b7280;
}
.costing-v2-rate-override__inputs {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.costing-v2-rate-override__rate {
display: inline-flex;
align-items: center;
gap: 4px;
}
.costing-v2-rate-override__currency,
.costing-v2-rate-override__suffix {
font-size: 12px;
color: #6b7280;
}
.costing-v2-rate-override__rate input[type="number"] {
width: 5.5rem;
padding: 4px 6px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 13px;
}
.costing-v2-rate-override__note {
flex: 1 1 160px;
min-width: 140px;
padding: 4px 8px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 12.5px;
}
.costing-v2-rate-override__hint {
display: block;
margin-top: 6px;
font-size: 11.5px;
}
.costing-v2-rate-override-notice {
margin: 0 0 10px;
padding: 8px 10px;
border-radius: 4px;
background: #eff6ff;
border-left: 3px solid #3b82f6;
color: #1e40af;
font-size: 12.5px;
line-height: 1.45;
}
.costing-v2-rate-override-notice em {
font-style: italic;
color: #1e3a8a;
}
.costing-v2-subtotal-row--contingency {
color: #6b7280;
font-style: italic;
font-size: 13px;
}
.costing-v2-subtotal-row--contingency .costing-v2-subtotal-label {
color: #6b7280;
}
.v2-grand-contingency-hint {
font-size: 11.5px;
color: #6b7280;
font-weight: 400;
font-style: italic;
}
.costing-v2-subtotal-label { color: #4b5563; }
.costing-v2-subtotal-value { font-variant-numeric: tabular-nums; }
/* --- Legend panel ---
Two-column per-item grid: a fixed-width code pill on the left so every
description lands at the same x position, with the pill itself
matching the light-blue palette of .v2-source-pill--steel for visual
continuity with the table source badges. */
.costing-v2-legend-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 6px 16px;
margin-top: 8px;
}
.v2-legend-item {
display: grid;
grid-template-columns: 130px 1fr;
align-items: center;
gap: 10px;
font-size: 12.5px;
color: #4b5563;
padding: 5px 10px 5px 5px;
background-color: #fafbfc;
border: 1px solid #eef0f3;
border-radius: 5px;
min-height: 30px;
}
.v2-legend-item strong {
display: inline-block;
box-sizing: border-box;
width: 100%;
text-align: center;
padding: 3px 6px;
background: #e0f2fe;
border: 1px solid #bae6fd;
color: #075985;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 4px;
line-height: 1.35;
}
.v2-legend-item span {
line-height: 1.35;
}
/* --- Add Steel / Add Manual modals --- */
#costing-v2-add-steel-modal.modal { max-width: 720px; }
#costing-v2-add-hardox-modal.modal { max-width: 520px; }
#costing-v2-add-manual-modal.modal { max-width: 480px; }
.v2-select-input {
width: 100%;
padding: 8px 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
background: #fff;
}
/* Override default .modal-content padding so the V2 modals can manage
their own header / body / footer spacing (same approach as the
customer digest modal). */
.v2-modal-content {
padding: 0;
}
.v2-modal-content .modal-header {
padding: 14px 22px;
margin-bottom: 0;
border-bottom: 1px solid #eef0f3;
}
.v2-modal-content .modal-header h2 {
font-size: 17px;
color: #1f2937;
margin: 0;
}
.v2-modal-body {
padding: 18px 22px;
max-height: 65vh;
overflow-y: auto;
}
.v2-modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 12px 22px;
background-color: #fafbfc;
border-top: 1px solid #eef0f3;
}
.v2-modal-error {
margin-top: 10px;
font-size: 12.5px;
color: #991b1b;
min-height: 1em;
}
.v2-steel-search-row { margin-bottom: 10px; }
.v2-steel-search-row label {
display: block;
font-size: 12px;
font-weight: 600;
color: #6b7280;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.v2-steel-search-row input {
width: 100%;
padding: 9px 11px;
font-size: 14px;
border: 1px solid #d1d5db;
border-radius: 6px;
box-sizing: border-box;
}
.v2-steel-search-row input:focus {
outline: none;
border-color: #1f3a5f;
box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}
.v2-steel-results {
list-style: none;
margin: 0 0 14px;
padding: 4px 0;
max-height: 220px;
overflow-y: auto;
border: 1px solid #eef0f3;
border-radius: 6px;
background-color: #fafbfc;
}
.v2-steel-result {
padding: 7px 12px;
font-size: 13px;
color: #1f2937;
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
font-variant-numeric: tabular-nums;
}
.v2-steel-result:last-child { border-bottom: none; }
.v2-steel-result:hover { background-color: #eef2ff; }
.v2-steel-result.is-selected {
background-color: #1f3a5f;
color: #ffffff;
font-weight: 600;
}
.v2-steel-results-hint {
padding: 14px 12px;
font-size: 12.5px;
color: #9ca3af;
text-align: center;
}
.v2-steel-results-hint--error {
color: #991b1b;
background-color: #fef2f2;
}
.v2-steel-form {
padding: 14px;
background-color: #ffffff;
border: 1px solid #eef0f3;
border-radius: 6px;
}
.v2-steel-form-label {
font-size: 13px;
font-weight: 600;
color: #1f3a5f;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #eef0f3;
}
.v2-steel-form-row {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.v2-steel-form-row label {
font-size: 11.5px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.v2-steel-form-row input {
padding: 8px 10px;
font-size: 14px;
border: 1px solid #d1d5db;
border-radius: 5px;
box-sizing: border-box;
font-variant-numeric: tabular-nums;
}
.v2-steel-form-row input:focus {
outline: none;
border-color: #1f3a5f;
box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}
.v2-steel-area-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: end;
gap: 8px;
margin-bottom: 6px;
}
.v2-steel-area-grid label {
font-size: 11.5px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.03em;
display: block;
margin-bottom: 4px;
}
.v2-steel-area-grid input {
padding: 8px 10px;
font-size: 14px;
border: 1px solid #d1d5db;
border-radius: 5px;
box-sizing: border-box;
width: 100%;
font-variant-numeric: tabular-nums;
}
.v2-steel-area-times {
align-self: end;
padding-bottom: 9px;
font-size: 16px;
color: #9ca3af;
text-align: center;
}
.v2-steel-area-or {
text-align: center;
font-size: 11px;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 6px 0 4px;
}
/* Engineer × Days grid (site labour qty input) — mirrors the steel area
grid so the visual rhythm is consistent between modals. */
.v2-engineer-days-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: end;
gap: 8px;
}
.v2-engineer-days-grid label {
font-size: 11.5px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.03em;
display: block;
margin-bottom: 4px;
}
.v2-engineer-days-grid input {
padding: 8px 10px;
font-size: 14px;
border: 1px solid #d1d5db;
border-radius: 5px;
box-sizing: border-box;
width: 100%;
font-variant-numeric: tabular-nums;
}
.v2-engineer-days-times {
align-self: end;
padding-bottom: 9px;
font-size: 16px;
color: #9ca3af;
text-align: center;
}
/* Locked rate display — used when a section's rate is set by globals and
the user can't edit it directly. Looks distinct from an input so it's
clear at a glance that this value is not user-controlled. */
.v2-locked-rate {
display: flex;
align-items: baseline;
gap: 10px;
padding: 9px 12px;
background-color: #f3f4f6;
border: 1px dashed #d1d5db;
border-radius: 5px;
font-variant-numeric: tabular-nums;
}
.v2-locked-rate > span:first-child {
font-size: 15px;
font-weight: 600;
color: #1f2937;
}
.v2-locked-rate-hint {
font-size: 11.5px;
color: #6b7280;
font-style: italic;
}
.v2-line-preview {
margin-top: 12px;
padding: 12px 14px;
background-color: #f7f9fc;
border: 1px solid #e5e7eb;
border-radius: 6px;
}
.v2-preview-row {
display: flex;
justify-content: space-between;
font-size: 12.5px;
color: #4b5563;
padding: 3px 0;
font-variant-numeric: tabular-nums;
}
.v2-preview-row strong { color: #1f2937; }
.v2-preview-row--sale {
border-top: 1px solid #e5e7eb;
margin-top: 6px;
padding-top: 8px;
color: #1f3a5f;
font-size: 13.5px;
font-weight: 600;
}
.v2-preview-row--sale strong { color: #1f3a5f; }
.v2-preview-note {
margin-top: 6px;
font-size: 11.5px;
color: #6b7280;
font-style: italic;
text-align: right;
}
/* ----------------------------------------------------------------------
Costing V2 — phase (c) additions
---------------------------------
Section shells for the 9 categories beyond materials, hire-markup
toggle, grand-total preview card. Reuses the same .costing-v2-card
surface so the visual rhythm of the V2 tab is consistent: white card
stack with subtle borders, navy accents, tabular money columns.
---------------------------------------------------------------------- */
/* Grand-total preview card */
.costing-v2-grand-total .section-header h3 { color: #1f3a5f; }
.costing-v2-badge--info {
background-color: #e0f2fe;
color: #075985;
border-color: #bae6fd;
}
.v2-grand-total-table {
width: 100%;
border-collapse: collapse;
margin-top: 4px;
}
.v2-grand-total-table th {
text-align: left;
font-size: 10.5px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 6px 10px;
border-bottom: 1px solid #eef0f3;
background-color: #fafbfc;
}
.v2-grand-total-table th:nth-child(2),
.v2-grand-total-table th:nth-child(4) { text-align: right; }
.v2-grand-total-table th:nth-child(3) { text-align: center; }
.v2-grand-total-table td {
padding: 7px 10px;
font-size: 13px;
color: #1f2937;
border-bottom: 1px solid #f3f4f6;
}
.v2-grand-total-table td.v2-cell-money {
text-align: right;
font-variant-numeric: tabular-nums;
}
.v2-grand-total-table td.v2-cell-num {
text-align: center;
color: #6b7280;
font-size: 11.5px;
}
.v2-grand-total-table tr.is-zero td { color: #9ca3af; }
.v2-grand-total-table tr.is-zero .v2-cell-sale { color: #9ca3af; }
.v2-grand-total-table tbody tr:last-child td { border-bottom: none; }
.costing-v2-grand-total-sale-row {
font-size: 16px;
padding-top: 10px;
}
.costing-v2-grand-total-sale-row .costing-v2-subtotal-value {
font-size: 18px;
}
/* Optional: subtle visual difference between section cards so the
stack of 10 doesn't feel monotonous. We use the existing soft borders
and let the section headers do the visual work. */
.costing-v2-section { margin-top: 16px; }
.costing-v2-section:first-of-type { margin-top: 0; }
.costing-v2-section-extras {
display: flex;
flex-direction: column;
gap: 8px;
margin: 12px 0 4px;
padding: 12px 14px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.costing-v2-extra-option {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px 12px;
align-items: center;
font-size: 13px;
color: #374151;
cursor: pointer;
}
.costing-v2-extra-option input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
}
.costing-v2-extra-label { font-weight: 600; }
.costing-v2-extra-amount {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: #1f3a5f;
}
.costing-v2-extra-hint {
grid-column: 2 / -1;
font-size: 12px;
color: #6b7280;
}
.v2-extra-fee-row td { background: #fafafa; }
.costing-v2-admin-section { margin-top: 16px; }
/* ----------------------------------------------------------------------
Costing Sheet
--------------
Each cost category (Materials, Design, Workshop, ...) sits in its own
card. Cards stack vertically. Design goals:
- Cards read as flat white panels with a soft border + shadow, matching
the rest of the new design language (.detail-section / .stat-card).
- Header label sits flush-left at 15px (consistent with section
headers elsewhere); the "+ Add" button is a small navy primary that
matches the toolbar buttons.
- Tables: tighter padding, uppercase header labels with a thin
bottom border, tabular numerals for money columns, soft #f7f9fc
hover (same as the jobs table), and no zebra striping — the design
stays calm regardless of how many rows the user adds.
- Edit / Delete in-row buttons are soft-tinted pills matching the
btn-toolbar palette, not the old bright Bootstrap colours.
- Summary block is a white card with a navy total row.
---------------------------------------------------------------------- */
.costing-section {
margin-bottom: 18px;
background-color: #ffffff;
border: 1px solid #e8eaef;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
overflow: hidden;
}
.costing-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
border-bottom: 1px solid #eef0f3;
padding: 12px 16px;
}
.costing-header h3 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #1f2937;
letter-spacing: -0.005em;
}
.add-item-button {
background-color: #1f3a5f;
border: 1px solid #1f3a5f;
color: #ffffff;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
padding: 5px 11px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.add-item-button:hover {
background-color: #16304f;
border-color: #16304f;
}
.costing-table {
width: 100%;
border-collapse: collapse;
border: none;
table-layout: auto;
}
.costing-table th,
.costing-table td {
border: none;
border-bottom: 1px solid #f1f3f6;
padding: 8px 10px;
text-align: left;
vertical-align: middle;
font-size: 13px;
color: #1f2937;
}
.costing-table th {
background-color: #fafbfc;
font-size: 10.5px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid #e5e7eb;
padding: 9px 10px;
}
/* Edge padding so first/last columns aren't flush with the card sides */
.costing-table th:first-child,
.costing-table td:first-child {
padding-left: 16px;
}
.costing-table th:last-child,
.costing-table td:last-child {
padding-right: 16px;
}
/* Column alignment — V1 Costing Sheet only. V2 uses .v2-th-* / .v2-cell-*
classes so the extra Weight column and mixed coating units don't fight
nth-child rules. */
.costing-table:not(.costing-v2-table) thead th:nth-child(2),
.costing-table:not(.costing-v2-table) tbody td:nth-child(2) {
text-align: center;
}
.costing-table:not(.costing-v2-table) thead th:nth-child(3),
.costing-table:not(.costing-v2-table) thead th:nth-child(4),
.costing-table:not(.costing-v2-table) thead th:nth-child(5),
.costing-table:not(.costing-v2-table) thead th:nth-child(6),
.costing-table:not(.costing-v2-table) tbody td:nth-child(3),
.costing-table:not(.costing-v2-table) tbody td:nth-child(4),
.costing-table:not(.costing-v2-table) tbody td:nth-child(5),
.costing-table:not(.costing-v2-table) tbody td:nth-child(6) {
text-align: right;
}
.costing-table:not(.costing-v2-table) thead th:last-child,
.costing-table:not(.costing-v2-table) tbody td:last-child {
text-align: right;
}
/* Tabular numerals on every non-Desc, non-Actions cell so columns of
numbers line up cleanly regardless of digit width. */
.costing-table:not(.costing-v2-table) tbody td:nth-child(n+2):not(:last-child) {
font-variant-numeric: tabular-nums;
}
.costing-table:not(.costing-v2-table) tbody tr:hover {
background-color: #f7f9fc;
}
.costing-table tbody tr:last-child td {
border-bottom: none;
}
/* Empty-state filler row when a section has no items yet */
.costing-table tbody tr.empty-row td {
color: #9ca3af;
font-style: italic;
text-align: center !important;
padding: 14px 10px;
}
/* Column widths — Desc flexes; numeric / actions are fixed and narrow */
.costing-table .col-qty { width: 64px; }
.costing-table .col-price { width: 105px; }
.costing-table .col-actions { width: 96px; }
/* In-row action buttons (Edit / Delete) inside the Actions cell */
.costing-table td.col-actions {
white-space: nowrap;
}
.costing-table td.col-actions button {
font-size: 11px;
font-weight: 600;
padding: 4px 9px;
margin: 0 0 0 4px;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
vertical-align: middle;
line-height: 1.2;
}
.costing-table td.col-actions button:first-child {
margin-left: 0;
}
.edit-item-button {
background-color: #fffbeb;
border-color: #fcd34d !important;
color: #92400e;
}
.edit-item-button:hover {
background-color: #fef3c7;
border-color: #f59e0b !important;
color: #78350f;
}
.delete-item-button {
background-color: #ffffff;
border-color: #fca5a5 !important;
color: #b91c1c;
}
.delete-item-button:hover {
background-color: #fef2f2;
border-color: #b91c1c !important;
color: #991b1b;
}
/* Costing summary block — white card with a navy-emphasised total row */
.costing-summary {
background-color: #ffffff;
padding: 16px 20px;
border: 1px solid #e8eaef;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
margin-top: 24px;
}
.costing-summary h4 {
margin-top: 0;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #eef0f3;
font-size: 15px;
font-weight: 600;
color: #1f2937;
}
#cost-summary-details p {
display: flex;
justify-content: space-between;
margin: 6px 0;
font-size: 13px;
color: #4b5563;
font-variant-numeric: tabular-nums;
}
#cost-summary-details p span:first-child {
color: #6b7280;
}
#cost-summary-details p span:last-child {
font-weight: 600;
color: #1f2937;
}
.summary-total {
display: flex;
justify-content: space-between;
font-weight: 700;
font-size: 16px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #e5e7eb;
color: #1f3a5f;
font-variant-numeric: tabular-nums;
}
/* Costing notes — same card shell as a costing-section */
.costing-notes-section {
margin-top: 24px;
background-color: #ffffff;
border: 1px solid #e8eaef;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
overflow: hidden;
}
#costing-notes-textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
border: none;
border-bottom: 1px solid #eef0f3;
border-radius: 0;
font-family: inherit;
font-size: 13px;
line-height: 1.5;
color: #1f2937;
margin-bottom: 0;
background-color: #ffffff;
}
#costing-notes-textarea:focus {
outline: none;
background-color: #fafbfc;
}
/* Global default for .form-actions — used by lots of modals and inline
forms across the app. Preserves the right-aligned action row with a
subtle tinted footer; specific containers override below if they
need a different look. */
.form-actions {
text-align: right;
padding: 10px 12px;
background-color: #fafbfc;
}
/* Save-Notes row — soft footer matching the header bar visually */
.costing-notes-section .form-actions {
text-align: right;
padding: 10px 16px;
background-color: #fafbfc;
border-top: none;
}
#save-notes-button {
background-color: #1f3a5f;
border: 1px solid #1f3a5f;
color: #ffffff;
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
#save-notes-button:hover {
background-color: #16304f;
border-color: #16304f;
}
/* Status Badge */
.status {
padding: 3px 8px;
border-radius: 12px;
font-weight: 600;
font-size: 8px;
text-transform: uppercase;
line-height: 1.3;
display: inline-block;
word-wrap: break-word;
max-width: 100%;
}
.status.enquiry {
background-color: #fee2e2;
color: #b91c1c;
font-weight: 600;
}
.status.quoted {
background-color: #e1f5ff;
color: #0066cc;
}
.status.live-unscheduled {
background-color: #fffbe6;
color: #8a6d3b;
}
.status.live-progress {
background-color: #ffe8cc;
color: #ff6600;
}
.status.live-hold {
background-color: #f4f4f4;
color: #555;
}
.status.ready-invoice {
background-color: #e6f7ea;
color: #28a745;
}
.status.completed {
background-color: #e6f0ff;
color: #004085;
}
.status.invoiced {
background-color: #e9ecef;
color: #495057;
}
.status.cancelled {
background-color: #fbe6e6;
color: #dc3545;
}
/* Additional status colors */
.status.being-checked {
background-color: #fff4e6;
color: #e67e22;
}
.status.approved-ready {
background-color: #d4edda;
color: #155724;
}
.status.quote-sent-waiting {
background-color: #cfe2ff;
color: #084298;
}
/* Modal Styles */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
z-index: 20;
width: 90%;
max-width: 600px;
font-size: 13px;
}
.modal-content {
padding: 20px 30px;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 20px;
}
.modal-header h2 {
margin: 0;
font-size: 18px;
}
.close-button {
font-size: 28px;
font-weight: bold;
color: #aaa;
cursor: pointer;
}
.close-button:hover {
color: #333;
}
/* =========================================================================
Customer Quote Digest modal
---------------------------
Three-pane modal: filters at top, jobs-with-checkboxes in the middle,
live preview underneath. Wider than the default modal because the
preview shows a table. Footer is a sticky-feeling action row.
========================================================================= */
.customer-digest-modal-content {
padding: 0;
width: 90vw;
max-width: 880px;
max-height: 90vh;
display: flex;
flex-direction: column;
}
/* Override the .modal max-width specifically for this dialog */
#customer-digest-modal.modal {
max-width: 880px;
}
#customer-digest-modal .modal-header {
padding: 14px 22px;
margin-bottom: 0;
border-bottom: 1px solid #eef0f3;
}
#customer-digest-modal .modal-header h2 {
font-size: 17px;
color: #1f2937;
font-weight: 600;
}
.customer-digest-body {
padding: 16px 22px;
overflow-y: auto;
flex: 1;
}
.customer-digest-intro {
margin: 0 0 14px;
font-size: 12.5px;
color: #6b7280;
line-height: 1.45;
}
.customer-digest-filters {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.customer-digest-filter {
flex: 1 1 180px;
display: flex;
flex-direction: column;
gap: 4px;
}
.customer-digest-filter label {
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.customer-digest-filter select {
padding: 7px 10px;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 13px;
background-color: #ffffff;
color: #1f2937;
}
.customer-digest-jobs {
margin-bottom: 16px;
border: 1px solid #e8eaef;
border-radius: 6px;
overflow: hidden;
}
.customer-digest-jobs__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background-color: #fafbfc;
border-bottom: 1px solid #eef0f3;
}
.customer-digest-jobs__count {
font-size: 12px;
color: #6b7280;
font-weight: 600;
}
.customer-digest-jobs__bulk {
display: flex;
gap: 4px;
}
.customer-digest-linkbtn {
background: transparent;
border: none;
padding: 4px 8px;
font-size: 11.5px;
color: #1f3a5f;
cursor: pointer;
border-radius: 4px;
font-weight: 500;
}
.customer-digest-linkbtn:hover {
background-color: #eef2ff;
color: #16304f;
}
.customer-digest-jobs-list {
max-height: 260px;
overflow-y: auto;
background-color: #ffffff;
}
.customer-digest-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 12px;
border-bottom: 1px solid #f1f3f6;
cursor: pointer;
transition: background-color 0.12s ease;
}
.customer-digest-row:last-child {
border-bottom: none;
}
.customer-digest-row:hover {
background-color: #f7f9fc;
}
.customer-digest-row input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
}
.customer-digest-row__main {
flex: 1;
min-width: 0;
}
.customer-digest-row__head {
display: flex;
gap: 14px;
align-items: baseline;
margin-bottom: 2px;
font-variant-numeric: tabular-nums;
}
.customer-digest-row__jn {
font-weight: 600;
color: #1f3a5f;
font-size: 13px;
min-width: 60px;
}
.customer-digest-row__date {
font-size: 12px;
color: #6b7280;
}
.customer-digest-row__value {
margin-left: auto;
font-size: 12.5px;
font-weight: 600;
color: #1f2937;
}
.customer-digest-row__desc {
font-size: 12.5px;
color: #374151;
line-height: 1.35;
word-wrap: break-word;
}
.customer-digest-row__site {
font-size: 11.5px;
color: #9ca3af;
margin-top: 2px;
}
.customer-digest-empty {
margin: 0;
padding: 20px 12px;
text-align: center;
color: #9ca3af;
font-size: 12.5px;
font-style: italic;
}
.customer-digest-preview-wrap {
border: 1px solid #e8eaef;
border-radius: 6px;
overflow: hidden;
}
.customer-digest-preview-header {
padding: 8px 12px;
background-color: #fafbfc;
border-bottom: 1px solid #eef0f3;
font-size: 12px;
font-weight: 600;
color: #374151;
}
.customer-digest-preview-hint {
font-weight: 400;
color: #9ca3af;
margin-left: 6px;
}
.customer-digest-preview {
padding: 14px;
background-color: #ffffff;
max-height: 260px;
overflow-y: auto;
font-size: 13px;
color: #1f2937;
}
.customer-digest-preview p {
margin: 0 0 12px;
color: #4b5563;
}
.customer-digest-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.customer-digest-table th {
text-align: left;
padding: 6px 9px;
background-color: #f3f4f6;
border: 1px solid #d1d5db;
font-weight: 600;
color: #1f2937;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.customer-digest-table td {
padding: 6px 9px;
border: 1px solid #e5e7eb;
vertical-align: top;
color: #1f2937;
}
.customer-digest-table tbody tr:nth-child(even) td {
background-color: #fafbfc;
}
.customer-digest-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 22px;
border-top: 1px solid #eef0f3;
background-color: #fafbfc;
}
#customer-digest-copy-button.copied {
background-color: #047857;
border-color: #047857;
}
/* =========================================================================
Job Notes panel — sticky-note style block, sits above the tabs on each
job detail page. Designed to be visible and inviting without being garish.
========================================================================= */
.job-notes-panel {
margin: 0 0 16px 0;
padding: 14px 18px;
background: #fff8d6; /* soft amber sticky-note */
border: 1px solid #f0d97a;
border-left: 4px solid #e0b400; /* heavier accent on the left */
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
font-size: 13px;
}
.job-notes-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.job-notes-title {
margin: 0;
font-size: 15px;
color: #4a3a00;
}
.job-notes-count {
font-size: 12px;
color: #6a5400;
background: rgba(224, 180, 0, 0.18);
padding: 2px 8px;
border-radius: 10px;
}
.job-notes-view-all {
margin-left: auto;
padding: 4px 10px !important;
font-size: 12px !important;
}
.job-notes-list {
margin-bottom: 12px;
}
.job-notes-empty {
margin: 0;
font-size: 12px;
color: #6a5400;
font-style: italic;
}
.job-note-item {
background: #fffdf0;
border: 1px solid #ecdb8a;
border-radius: 4px;
padding: 8px 10px;
margin-bottom: 6px;
}
.job-note-item:last-child { margin-bottom: 0; }
.job-note-body {
margin: 0 0 4px 0;
white-space: pre-wrap;
word-wrap: break-word;
line-height: 1.45;
color: #2c2200;
}
.job-note-meta {
display: flex;
gap: 10px;
align-items: center;
font-size: 11px;
color: #6a5400;
}
.job-note-meta .job-note-author { font-weight: 600; }
.job-note-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
.job-note-actions button {
background: none;
border: 0;
padding: 0;
font-size: 11px;
color: #8a6f00;
cursor: pointer;
text-decoration: underline;
}
.job-note-actions button:hover { color: #594900; }
.job-note-actions button.job-note-delete { color: #a8431e; }
.job-note-actions button.job-note-delete:hover { color: #6f2c14; }
.job-notes-composer {
display: flex;
gap: 8px;
align-items: flex-end;
}
.job-notes-composer textarea {
flex: 1;
min-height: 38px;
padding: 7px 9px;
border: 1px solid #d8c977;
border-radius: 4px;
font-family: inherit;
font-size: 13px;
background: #fffdf0;
resize: vertical;
}
.job-notes-composer textarea:focus {
outline: none;
border-color: #b8980a;
background: #fff;
}
.job-notes-composer button {
flex-shrink: 0;
padding: 8px 14px !important;
font-size: 13px !important;
}
/* Notes thread modal — shown by "View all" button. */
.job-notes-thread {
max-height: 60vh;
overflow-y: auto;
padding-right: 4px;
}
.job-notes-thread .job-note-item {
margin-bottom: 8px;
}
#jobs-table td:nth-child(6) {
vertical-align: middle;
}
/* PO pending — red PO/REQ chip nested inside the status pill background */
.status.status--po-pending {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 3px 5px 3px 7px;
max-width: 100%;
}
.status.status--po-pending .status__text {
flex: 1 1 auto;
min-width: 0;
line-height: 1.25;
}
.status-po-flag {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 1px 3px;
border-radius: 4px;
background: #dc2626;
color: #fff;
font-size: 6px;
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
cursor: help;
}
.status-po-flag span {
display: block;
}
.job-po-pending-banner {
margin: 10px 0 0;
padding: 10px 12px;
border-radius: 6px;
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 4px solid #dc2626;
color: #991b1b;
font-size: 12.5px;
line-height: 1.45;
}
.job-po-pending-banner__label {
display: block;
margin-bottom: 3px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #b91c1c;
}
.job-po-pending-banner__detail {
display: block;
color: #7f1d1d;
}
/* Notes badge — fixed Notes column on the job list. Click opens modal to
view thread or add a chase note without opening the job. */
.job-notes-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
padding: 1px 7px 2px;
background: #fff8d6;
border: 1px solid #f0d97a;
border-radius: 9px;
color: #6a5400;
font-size: 11px;
line-height: 1.4;
cursor: pointer;
white-space: nowrap;
user-select: none;
font-family: inherit;
}
.job-notes-badge:hover {
background: #fff0a8;
border-color: #e0b400;
color: #4a3a00;
}
.job-notes-badge:active {
background: #ffe680;
}
.job-notes-badge--empty {
background: #f9fafb;
border-color: #e5e7eb;
color: #9ca3af;
}
.job-notes-badge--empty:hover {
background: #fff8d6;
border-color: #f0d97a;
color: #6a5400;
}
.job-notes-list-modal .modal-content {
max-width: 520px;
}
.job-notes-modal-composer {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e5e7eb;
}
.form-group textarea,
.form-group select {
width: calc(100% - 18px);
padding: 7px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
font-size: 13px;
}
/* Ensure modal inputs are sized correctly */
.modal .form-group input[type="text"],
.modal .form-group input[type="email"],
.modal .form-group input[type="password"],
.modal .form-group input[type="time"],
.modal .form-group textarea,
.modal .form-group select {
width: 100%;
box-sizing: border-box; /* Include padding in width */
}
/* Add Job modal — compact vertical rhythm (less scroll, easier manual screenshots) */
#add-job-modal .add-job-modal-header h2 {
font-size: 16px;
}
#add-job-modal .add-job-modal-body .form-group {
margin-bottom: 8px;
}
#add-job-modal .add-job-modal-body .form-group label {
margin-bottom: 2px;
font-size: 12.5px;
}
#add-job-modal .add-job-modal-body .form-group input,
#add-job-modal .add-job-modal-body .form-group select,
#add-job-modal .add-job-modal-body .form-group textarea {
padding: 5px 8px;
font-size: 13px;
}
#add-job-modal .add-job-modal-body .form-group textarea#jobDescription {
min-height: 44px;
resize: vertical;
}
#add-job-modal .add-job-modal-body .form-group small {
display: block;
margin-top: 2px;
line-height: 1.25;
}
#add-job-modal .add-job-form-actions {
padding: 8px 0 0;
margin-top: 2px;
background: transparent;
}
#save-job-button {
background-color: #28a745;
}
#save-job-button:hover {
background-color: #1e7e34;
}
/* Activity Log Styles */
.log-form {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
#new-log-entry-text {
width: 100%;
box-sizing: border-box;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
font-size: 13px;
margin-bottom: 10px;
}
#save-log-entry-button {
font-size: 11px;
padding: 4px 8px;
}
#activity-log-list {
border-top: 1px solid #eee;
padding-top: 15px;
max-height: 400px;
overflow-y: auto;
}
.log-entry {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px dashed #eee;
}
.log-entry:last-child {
border-bottom: none;
margin-bottom: 0;
}
.log-entry-header {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #666;
margin-bottom: 5px;
}
.log-entry-user {
font-weight: bold;
}
.log-entry-text {
white-space: pre-wrap;
word-wrap: break-word;
}
/* Site Tools Tab Styles */
.site-tools-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.site-tools-item {
padding: 12px 16px;
background-color: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 6px;
}
.site-tools-item-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-size: 13px;
margin-bottom: 6px;
}
.site-tools-item-body {
font-size: 13px;
color: #333;
line-height: 1.4;
margin-bottom: 6px;
}
.site-tools-item-meta {
font-size: 11px;
color: #666;
}
.site-tools-urgency-high {
background-color: #fee2e2;
color: #b91c1c;
}
.site-tools-urgency-medium {
background-color: #fef3c7;
color: #b45309;
}
.site-tools-urgency-low {
background-color: #d1fae5;
color: #047857;
}
.site-tools-photos-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.site-tools-photo-item {
background-color: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 6px;
overflow: hidden;
}
.site-tools-photo-link {
display: block;
line-height: 0;
}
.site-tools-photo-thumb {
width: 100%;
height: 140px;
object-fit: cover;
display: block;
}
.site-tools-photo-meta {
padding: 8px 12px;
font-size: 11px;
color: #666;
}
.site-tools-photo-item p {
padding: 0 12px 12px;
margin: 0;
}
/* Planner Tab Styles (Job Details) */
.planner-dates {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px 30px;
}
.planner-section h4 {
margin-top: 0;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
font-size: 14px;
}
.planner-item {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 8px;
}
.planner-item label {
width: 130px;
text-align: right;
white-space: nowrap;
flex-shrink: 0;
}
.planner-item input[type="date"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
flex-grow: 1;
min-width: 120px;
max-width: 150px;
}
/* Master Planner Visual Styles */
#visual-planner {
width: 100%;
overflow-x: auto;
border: 1px solid #ccc;
position: relative;
margin-top: 10px;
}
#timeline-header {
display: flex;
background-color: #f9f9f9;
border-bottom: 1px solid #ccc;
position: sticky;
top: 0;
z-index: 5;
}
.timeline-info-header {
min-width: 250px;
max-width: 250px;
flex-shrink: 0;
border-right: 1px solid #ccc;
padding: 8px;
font-weight: bold;
box-sizing: border-box;
position: sticky;
left: 0;
background-color: #f9f9f9;
z-index: 6;
}
.timeline-dates {
display: flex;
flex-grow: 1;
}
.timeline-date-cell {
flex: 1 0 50px;
min-width: 50px;
border-left: 1px solid #eee;
padding: 5px;
text-align: center;
font-size: 10px;
box-sizing: border-box;
}
.timeline-date-cell span {
display: block;
}
.timeline-date-cell .day-name {
font-weight: bold;
}
.timeline-date-cell .day-num {
color: #666;
}
.timeline-date-cell.today {
background-color: #fffbe6 !important;
}
.timeline-date-cell.weekend {
background-color: #fdfdfd;
}
#planner-rows {
position: relative;
z-index: 1;
}
.planner-job-row {
display: flex;
border-bottom: 1px solid #eee;
min-height: 100px;
position: relative;
}
.planner-job-row:hover {
background-color: #f9f9f9;
}
.planner-job-info {
min-width: 250px;
max-width: 250px;
flex-shrink: 0;
padding: 8px;
border-right: 1px solid #ccc;
font-size: 11px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
left: 0;
background-color: #fff;
z-index: 4;
}
.planner-job-row:hover .planner-job-info {
background-color: #f9f9f9;
}
.planner-job-info span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.planner-job-info .job-num {
font-weight: bold;
}
.planner-job-info .job-cust {
color: #555;
}
.planner-job-info button {
font-size: 10px;
padding: 2px 5px;
margin-left: 5px;
}
.planner-job-bars {
flex-grow: 1;
position: relative;
background-image: linear-gradient(to right, #eee 1px, transparent 1px);
background-size: 50px 100%;
}
.process-bar {
position: absolute;
height: 18px;
border-radius: 3px;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.2);
overflow: hidden;
white-space: nowrap;
font-size: 10px;
color: white;
padding: 1px 5px;
z-index: 2;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.bar-drawing {
background-color: #007bff;
border-color: #0056b3;
top: 3px;
}
.bar-fab {
background-color: #ffc107;
border-color: #d39e00;
color: #333;
top: 22px;
}
.bar-install {
background-color: #28a745;
border-color: #1e7e34;
top: 41px;
}
.bar-laser {
background-color: #dc3545;
border-color: #a71d2a;
top: 60px;
}
.bar-paint {
background-color: #6f42c1;
border-color: #5a32a3;
top: 79px;
}
/* Planner View Selector */
.view-select-button {
font-size: 11px;
padding: 3px 8px;
background-color: #e9ecef;
color: #495057;
border: 1px solid #ced4da;
}
.view-select-button:hover {
background-color: #d1d9e1;
}
.view-select-button.active {
background-color: #007bff;
color: white;
border-color: #0056b3;
font-weight: bold;
}
.planner-toolbar.nav-disabled #planner-prev-week,
.planner-toolbar.nav-disabled #planner-next-week,
.planner-toolbar.nav-disabled #planner-today {
opacity: 0.5;
cursor: not-allowed;
background-color: #6c757d;
}
/* Archive Toggle Button Styling */
#toggle-archive-view-button {
background-color: #6c757d;
color: white;
padding: 6px 12px;
font-size: 12px;
border-radius: 4px;
}
#toggle-archive-view-button:hover {
background-color: #5a6268;
}
#toggle-archive-view-button.viewing-archived {
background-color: #ffc107;
color: #333;
font-weight: bold;
border: 1px solid #d39e00;
}
#toggle-archive-view-button.viewing-archived:hover {
background-color: #e0a800;
}
/* --- Workshop Scheduler Styles --- */
.scheduler-container {
margin-top: 20px;
}
.scheduler-toolbar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
flex-wrap: wrap;
}
.scheduler-print-controls {
display: flex;
gap: 8px;
}
.scheduler-print-controls button {
border: none;
color: #fff;
padding: 6px 14px;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
}
.scheduler-print-controls button:hover {
opacity: 0.9;
}
@media print {
body.ws-print-mode {
background-color: #fff;
}
body.ws-print-mode header,
body.ws-print-mode nav,
body.ws-print-mode #login-container,
body.ws-print-mode #app-header,
body.ws-print-mode #app-toolbar,
body.ws-print-mode .main-nav,
body.ws-print-mode .top-bar,
body.ws-print-mode .footer {
display: none !important;
}
body.ws-print-mode #app-container {
padding: 0 !important;
margin: 0 !important;
}
body.ws-print-mode #app-container > *:not(#workshop-scheduler-view) {
display: none !important;
}
body.ws-print-mode #workshop-scheduler-view {
display: block !important;
}
body.ws-print-mode .scheduler-container {
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
body.ws-print-mode .scheduler-toolbar,
body.ws-print-mode #resource-utilization-panel {
display: none !important;
}
body.ws-print-mode .scheduler-grid {
border: 1px solid #444 !important;
page-break-inside: avoid;
}
body.ws-print-mode .schedule-area {
overflow: visible !important;
}
body.ws-print-mode .resource-column,
body.ws-print-mode .schedule-row-placeholder,
body.ws-print-mode .task-block {
page-break-inside: avoid;
}
body.ws-print-mode .task-block {
font-size: 11px;
box-shadow: none;
}
body.ws-print-mode.ws-print-a0 .task-block {
font-size: 13px;
}
}
.scheduler-toolbar input[type="date"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
#scheduler-current-date-display {
margin: 0 0 0 auto; /* Push to the right */
font-size: 16px;
font-weight: 600;
}
.scheduler-grid {
border: 1px solid #ccc;
overflow-x: auto; /* Allow horizontal scrolling for time slots */
position: relative; /* Needed for positioning later */
}
.grid-header {
display: flex;
background-color: #f8f9fa;
border-bottom: 1px solid #ccc;
position: sticky; /* Make header sticky */
top: 0;
z-index: 10;
}
.resource-header-cell {
min-width: 120px; /* Width of the resource column */
max-width: 120px;
padding: 8px;
font-weight: bold;
border-right: 1px solid #ccc;
box-sizing: border-box;
position: sticky; /* Make resource header sticky */
left: 0;
background-color: #f8f9fa; /* Ensure background */
z-index: 11; /* Above time header */
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.time-header-cells {
display: flex;
flex-grow: 1;
/* No left border - schedule area below provides it */
}
.time-header-cell {
flex: 1; /* Equal width columns that fill available space */
min-width: 0; /* Allow flex to shrink if needed */
padding: 8px 4px;
text-align: center; /* Centered time labels - clean and standard */
font-size: 11px;
font-weight: 600;
border-right: 1px solid #ddd;
box-sizing: border-box;
}
.time-header-cell:last-child {
border-right: none; /* No right border on last cell - schedule area provides it */
}
/* First cell doesn't need left border - container provides it */
.day-header-cell {
flex: 1 1 0;
min-width: 0;
padding: 6px 8px; /* Reduced vertical padding */
text-align: center;
font-size: 12px;
font-weight: 600;
border-left: 1px solid #ccc;
box-sizing: border-box;
background-color: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
}
.day-header-cell:first-child {
border-left: none;
}
.grid-body {
display: flex;
}
.resource-column {
min-width: 120px;
max-width: 120px;
background-color: #fff; /* Ensure background */
border-right: 1px solid #ccc;
position: sticky; /* Make resource column sticky */
left: 0;
z-index: 9; /* Below header */
}
.resource-cell {
padding: 8px; /* Reduced padding for better space usage */
border-bottom: 1px solid #eee;
font-size: 12px;
font-weight: 500;
text-align: center;
box-sizing: border-box;
height: 40px; /* Reduced row height for better space usage */
display: flex;
align-items: center;
justify-content: center;
}
.schedule-area {
flex-grow: 1;
position: relative; /* Container for task blocks */
/* No left border - resource column provides it */
/* No right border - scheduler-grid container provides it */
border-bottom: 1px solid #eee; /* Bottom border for entire schedule */
}
/* Schedule row with column backgrounds */
.schedule-row-placeholder {
height: 40px; /* Reduced height for better space usage */
border-bottom: 1px solid #eee;
box-sizing: border-box;
cursor: pointer;
position: relative;
/* Default to 12 columns for day view */
background: repeating-linear-gradient(
to right,
transparent 0,
transparent calc((100% / 12) - 1px),
#ddd calc((100% / 12) - 1px),
#ddd calc(100% / 12),
transparent calc(100% / 12)
);
}
/* Week view rows - 5 columns for days */
.schedule-row-placeholder.week-row {
/* Create column dividers for 5 days */
background: repeating-linear-gradient(
to right,
transparent 0,
transparent calc((100% / 5) - 1px),
#ddd calc((100% / 5) - 1px),
#ddd calc(100% / 5),
transparent calc(100% / 5)
);
}
.schedule-row-placeholder:hover {
background:
repeating-linear-gradient(
to right,
rgba(240, 248, 255, 0.5) 0,
rgba(240, 248, 255, 0.5) calc((100% / 12) - 1px),
#ddd calc((100% / 12) - 1px),
#ddd calc(100% / 12),
rgba(240, 248, 255, 0.5) calc(100% / 12)
);
}
.schedule-row-placeholder.week-row:hover {
/* Week view hover - 5 columns */
background:
repeating-linear-gradient(
to right,
rgba(240, 248, 255, 0.5) 0,
rgba(240, 248, 255, 0.5) calc((100% / 5) - 1px),
#ddd calc((100% / 5) - 1px),
#ddd calc(100% / 5),
rgba(240, 248, 255, 0.5) calc(100% / 5)
);
}
.schedule-row-placeholder:last-child {
border-bottom: none; /* No bottom border on last row - schedule area provides it */
}
/* --- Workshop Task Block Styles --- */
.task-block {
position: absolute;
background-color: #007bff;
color: white;
border: 1px solid #0056b3;
border-radius: 2px; /* Smaller border radius for tighter rows */
box-sizing: border-box;
padding: 1px 4px; /* Reduced padding for better fit in smaller rows */
font-size: 9px; /* Slightly smaller font for better fit */
line-height: 1.2; /* Tighter line height */
overflow: hidden;
/* Removed white-space: nowrap; to allow wrapping */
cursor: pointer; /* Indicate it's clickable for editing */
z-index: 15; /* Above grid lines */
box-shadow: 1px 1px 2px rgba(0,0,0,0.15); /* Lighter shadow */
margin: 0; /* Ensure no margin affects alignment */
}
.task-block:hover {
background-color: #0056b3;
z-index: 16; /* Bring to front on hover */
}
/* Add styles for inner spans */
.task-block span {
display: block; /* Each span on its own line */
white-space: nowrap; /* Prevent individual lines from wrapping */
overflow: hidden;
text-overflow: ellipsis; /* Add ellipsis if a single line overflows */
line-height: 1.2; /* Tighter line height for inner spans */
}
.task-block .job-number {
font-weight: bold;
}
.task-block .task-customer {
font-style: italic;
color: #e0e0e0; /* Lighter color for customer */
}
.task-block .task-duration {
font-weight: 600;
font-size: 9px;
opacity: 0.9;
margin-left: 3px;
}
/* --- Workshop Task Block Overlap Highlight --- */
.task-block.overlap-error {
background-color: #dc3545 !important; /* Bright red */
border-color: #a71d2a !important;
animation: flash-error 0.8s 3; /* Flash 3 times */
z-index: 17; /* Ensure it's visible */
}
@keyframes flash-error {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* --- End Overlap Highlight --- */
/* =================================================================
SITE SCHEDULER STYLES
================================================================= */
.site-scheduler-container {
margin-top: 20px;
}
.site-scheduler-toolbar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.site-scheduler-toolbar button {
padding: 7px 11px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
cursor: pointer;
font-size: 12px;
}
.site-scheduler-toolbar button:hover {
background-color: #0056b3;
}
.site-scheduler-toolbar input[type="date"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.site-scheduler-toolbar select {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.site-scheduler-toolbar h3 {
margin: 0 0 0 auto;
font-size: 16px;
font-weight: 600;
}
.site-scheduler-grid {
border: 1px solid #ccc;
overflow-x: hidden;
overflow-y: auto;
position: relative;
width: 100%;
box-sizing: border-box;
}
.site-grid-header {
display: flex;
background-color: #f8f9fa;
border-bottom: 1px solid #ccc;
position: sticky;
top: 0;
z-index: 10;
}
.site-staff-header-cell {
min-width: 150px;
max-width: 150px;
padding: 8px;
font-weight: bold;
border-right: 1px solid #ccc;
box-sizing: border-box;
position: sticky;
left: 0;
background-color: #f8f9fa;
z-index: 11;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.site-day-header-cells {
display: flex;
flex: 1;
min-width: 0;
}
.site-day-header-cell {
flex: 1 1 0;
min-width: 0;
padding: 8px;
text-align: center;
font-size: 12px;
font-weight: 600;
border-left: 1px solid #ccc;
box-sizing: border-box;
background-color: #e9ecef;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
white-space: normal;
line-height: 1.3;
}
.site-day-header-cell:first-child {
border-left: none;
}
.site-grid-body {
display: flex;
overflow: hidden;
width: 100%;
}
.site-staff-column {
min-width: 150px;
max-width: 150px;
background-color: #fff;
border-right: 1px solid #ccc;
position: sticky;
left: 0;
z-index: 9;
}
.site-staff-cell {
padding: 8px;
border-bottom: 1px solid #eee;
font-size: 13px;
font-weight: 500;
text-align: center;
box-sizing: border-box;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.site-schedule-area {
flex: 1;
position: relative;
background-color: #fff;
min-height: 400px;
height: auto;
}
.site-schedule-row-placeholder {
border-bottom: 1px solid #eee;
box-sizing: border-box;
position: relative;
}
.site-task-block {
position: absolute;
background-color: #007bff;
border: 2px solid #0056b3;
border-radius: 4px;
padding: 4px 6px;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
z-index: 15;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 0.1s, box-shadow 0.1s;
}
.site-task-block:hover {
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
z-index: 16;
}
.site-task-block .site-job-number {
font-weight: 600;
font-size: 11px;
color: #fff;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.site-task-block .site-task-customer {
font-size: 10px;
color: rgba(255,255,255,0.9);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.site-task-block .site-task-desc {
font-size: 10px;
color: rgba(255,255,255,0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.site-task-block .site-task-travel {
font-size: 9px;
color: rgba(255,255,255,0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =========================================================================
Job List — Owner chip, Dates column, status-age highlight
------------------------------------------------------------------------- */
/* Owner chip — appears as a quiet subtitle under the JN. Always block
so it doesn't compete with the JN itself for horizontal space, and
the JN column can stay narrow regardless of whether an owner is set. */
.job-owner-chip {
display: inline-block;
min-width: 20px;
padding: 0 5px;
font-size: 9px;
font-weight: 700;
line-height: 13px;
text-align: center;
color: #4a5666;
background-color: #eef2f7;
border: 1px solid #d8dee7;
border-radius: 8px;
letter-spacing: 0.4px;
cursor: help;
}
/* ----------------------------------------------------------------------
Date pills — used in the Enquiry Date and Quote Sent columns of the
job list. Each cell contains a single with
a DD/MM/YY value. The pill is a small rounded background behind the
date, leaving the rest of the cell white so the table stays calm.
Variants:
.age-yellow / .age-orange / .age-red — Enquiry-date age (only on
jobs still in Enquiry status; days 0-4 / 5-6 / 7+ respectively).
.date-pill--sent — light green; applied to Quote Sent dates.
For jobs past the Enquiry stage, the Enquiry Date pill has no age
class — it just renders as a plain text date with no fill.
---------------------------------------------------------------------- */
.date-pill {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
line-height: 1.25;
color: #4a5666;
font-variant-numeric: tabular-nums;
white-space: nowrap;
cursor: help;
}
/* Enquiry-age pills: yellow (fresh) → orange (5d) → red (7d+) */
.date-pill.age-yellow {
background-color: #fef9c3;
color: #854d0e;
}
.date-pill.age-orange {
background-color: #fed7aa;
color: #9a3412;
font-weight: 600;
}
.date-pill.age-red {
background-color: #fecaca;
color: #991b1b;
font-weight: 700;
}
/* Quote Sent — light green */
.date-pill--sent {
background-color: #d1fae5;
color: #065f46;
font-weight: 600;
}
/* ----------------------------------------------------------------------
Job detail page — compact dates strip at the top of the Quote & Status
tile. Mirrors the Enquiry Date / Quote Sent columns on the job list so
the colour cues stay consistent across list ↔ detail.
---------------------------------------------------------------------- */
.job-dates-strip {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
padding: 8px 0 12px;
margin-bottom: 8px;
border-bottom: 1px solid #eef0f3;
}
.job-dates-strip__item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.job-dates-strip__label {
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.job-dates-strip__value {
font-size: 12px;
color: #6b7280;
font-variant-numeric: tabular-nums;
}
/* When the value is also a .date-pill, drop the muted dash colour so the
pill's own colour palette takes over. */
.job-dates-strip__value.date-pill {
color: inherit;
} |