/* =================================================================
PDZ Platform — Stylesheet v1.0.0
Dark/light themes via [data-theme] on .
================================================================= */
/* ── Design tokens ─────────────────────────────────────────────── */
[data-theme="dark"] {
--bg: #0d1a10;
--surface: #111f14;
--surface2: #172118;
--surface3: #1d2a1e;
--surface4: #243025;
--border: #253027;
--border2: #2e3c30;
--green: #2e8b57;
--green-hi: #4dbb7a;
--green-dim: #162a1c;
--amber: #d4a843;
--amber-dim: #3a2c0e;
--red: #c95252;
--red-dim: #361515;
--blue: #3d7eba;
--blue-dim: #122238;
--text: #ddeae0;
--text2: #a8c5ae;
--text3: #7a9e80;
--shadow: 0 4px 24px rgba(0,0,0,0.45);
}
[data-theme="light"] {
--bg: #f4f7f4;
--surface: #ffffff;
--surface2: #f0f5f1;
--surface3: #e8f0ea;
--surface4: #ddeae0;
--border: #d0ddd2;
--border2: #bfcec2;
--green: #2e8b57;
--green-hi: #217a47;
--green-dim: #d6f0e2;
--amber: #b8860b;
--amber-dim: #fef3cd;
--red: #c0392b;
--red-dim: #fde8e8;
--blue: #2563a8;
--blue-dim: #dbeafe;
--text: #1a2e1d;
--text2: #3d5c42;
--text3: #7a9e80;
--shadow: 0 4px 24px rgba(0,0,0,0.08);
}
/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
font-family: 'DM Sans', system-ui, sans-serif;
background: var(--bg); color: var(--text);
font-size: 14px; line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
input, textarea, select, button { font-family: inherit; }
/* ── Layout ─────────────────────────────────────────────────────── */
.plt-layout { display: flex; height: 100vh; overflow: hidden; }
.plt-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.plt-content { flex: 1; overflow-y: auto; padding: 1.5rem; background: var(--bg); }
/* ── Sidebar ────────────────────────────────────────────────────── */
.plt-sidebar {
width: 210px; min-width: 210px;
background: var(--surface); border-right: 1px solid var(--border);
display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
.plt-sidebar-logo {
padding: 1.25rem 1.1rem 0.9rem;
border-bottom: 1px solid var(--border);
}
.plt-logo-mark {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.325rem; color: var(--text); letter-spacing: -0.01em;
}
.plt-logo-mark sup { color: var(--green-hi); font-size: 0.65em; }
.plt-logo-sub {
font-size: 0.725rem; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--text3); margin-top: 3px;
}
.plt-nav { padding: 0.9rem 0.65rem; flex: 1; }
.plt-nav-item {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.5rem 0.7rem; border-radius: 20px; cursor: pointer;
color: var(--text2); font-size: 0.925rem; font-weight: 400;
transition: all 0.12s; margin-bottom: 14px;
text-decoration: none;
}
.plt-nav-item:hover { background: var(--surface2); color: var(--text); }
.plt-nav-item.active { background: var(--green-dim); color: var(--green-hi); font-weight: 500; }
.plt-nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
.plt-nav-badge {
margin-left: auto; background: var(--green-dim); color: var(--green-hi);
font-size: 0.725rem; font-weight: 600; padding: 1px 6px; border-radius: 100px;
}
.plt-sidebar-footer {
padding: 0.9rem 0.65rem; border-top: 1px solid var(--border);
}
.plt-user-pill {
display: flex; align-items: center; gap: 0.65rem;
padding: 0.5rem 0.7rem; border-radius: 20px; cursor: pointer;
}
.plt-user-pill:hover { background: var(--surface2); }
.plt-user-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: var(--green-dim); color: var(--green-hi);
display: flex; align-items: center; justify-content: center;
font-size: 0.72rem; font-weight: 600; flex-shrink: 0;
}
.plt-user-name { font-size: 0.905rem; font-weight: 500; color: var(--text); }
.plt-user-role { font-size: 0.745rem; color: var(--text3); }
.plt-logout-link {
display: block; text-align: center; font-size: 0.845rem;
color: var(--text3); padding: 0.35rem; margin-top: 6px;
border-radius: 10px; transition: color 0.15s;
}
.plt-logout-link:hover { color: var(--red); }
/* ── Topbar ─────────────────────────────────────────────────────── */
.plt-topbar {
height: 52px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 1.4rem;
background: var(--surface); gap: 1rem; flex-shrink: 0;
}
.plt-topbar-title { font-size: 0.88rem; font-weight: 600; }
.plt-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.plt-topbar-user { font-size: 0.72rem; color: var(--text3); }
.plt-topbar-divider { width: 1px; height: 16px; background: var(--border); }
.plt-theme-toggle {
background: none; border: 1px solid var(--border2); border-radius: 10px;
padding: 5px; cursor: pointer; color: var(--text2); display: flex;
align-items: center; transition: all 0.15s;
}
.plt-theme-toggle:hover { background: var(--surface2); color: var(--text); }
/* ── Page header ────────────────────────────────────────────────── */
.plt-page-header {
display: flex; justify-content: space-between;
align-items: flex-start; margin-bottom: 1.25rem;
}
.plt-page-title {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.5rem; font-weight: 400; color: var(--text);
}
.plt-page-sub { font-size: 0.78rem; color: var(--text3); margin-top: 3px; }
/* ── Buttons ────────────────────────────────────────────────────── */
.plt-btn {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.45rem 1rem; border-radius: 20px; font-size: 0.78rem;
font-weight: 500; cursor: pointer; border: none; transition: all 0.12s;
text-decoration: none;
}
.plt-btn-primary { background: var(--green); color: #fff; }
.plt-btn-primary:hover { background: var(--green-hi); }
.plt-btn-ghost {
background: var(--surface2); color: var(--text2);
border: 1px solid var(--border2);
}
.plt-btn-ghost:hover { background: var(--surface3); color: var(--text); }
.plt-btn-sm { padding: 0.3rem 0.7rem; font-size: 0.72rem; }
.plt-btn-full { width: 100%; justify-content: center; }
.plt-btn-danger { background: var(--red-dim); color: var(--red); border: 1px solid rgba(201,82,82,0.2); }
/* ── Stats row ──────────────────────────────────────────────────── */
.plt-stats-row {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 0.75rem; margin-bottom: 1.25rem;
}
.plt-stat-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 24px; padding: 1rem;
}
.plt-stat-card--accent { border-color: var(--green-dim); }
.plt-stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); margin-bottom: 0.35rem; }
.plt-stat-value { font-family: 'DM Serif Display', serif; font-size: 1.6rem; line-height: 1; color: var(--text); }
.plt-stat-green { color: var(--green-hi); }
.plt-stat-sub { font-size: 0.68rem; color: var(--text3); margin-top: 0.35rem; }
/* ── Panel ──────────────────────────────────────────────────────── */
.plt-panel {
background: var(--surface); border: 1px solid var(--border);
border-radius: 24px; overflow: hidden; margin-bottom: 1rem;
}
.plt-panel-head {
display: flex; align-items: center; justify-content: space-between;
padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border);
}
.plt-panel-title { font-size: 0.8rem; font-weight: 600; }
.plt-panel-action { font-size: 0.7rem; color: var(--green-hi); cursor: pointer; font-weight: 500; }
.plt-panel-body { padding: 1.1rem; }
/* ── Table ──────────────────────────────────────────────────────── */
.plt-table { width: 100%; border-collapse: collapse; }
.plt-table th {
padding: 0.6rem 0.9rem; font-size: 0.66rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3);
text-align: left; border-bottom: 1px solid var(--border);
}
.plt-table td {
padding: 0.7rem 0.9rem; font-size: 0.78rem; color: var(--text2);
border-bottom: 1px solid var(--border); vertical-align: middle;
}
.plt-table tr:last-child td { border-bottom: none; }
.plt-table-row { cursor: pointer; transition: background 0.1s; }
.plt-table-row:hover td { background: var(--surface2); }
.plt-td-name { font-weight: 500; color: var(--text); }
.plt-td-sub { font-size: 0.68rem; color: var(--text3); margin-top: 1px; }
.plt-td-muted { color: var(--text3); }
.plt-td-truncate { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Pills ──────────────────────────────────────────────────────── */
.plt-pill {
font-size: 0.64rem; font-weight: 600; padding: 2px 9px;
border-radius: 100px; white-space: nowrap; display: inline-block;
}
.plt-pill-new { background: var(--blue-dim); color: var(--blue); }
.plt-pill-amber { background: var(--amber-dim); color: var(--amber); }
.plt-pill-blue { background: var(--blue-dim); color: var(--blue); }
.plt-pill-green { background: var(--green-dim); color: var(--green-hi); }
.plt-pill-done { background: rgba(77,187,122,0.12); color: var(--green-hi); }
.plt-pill-ghost { background: var(--surface3); color: var(--text3); }
.plt-pill-red { background: var(--red-dim); color: var(--red); }
.plt-covered { color: var(--green-hi); font-size: 0.76rem; }
/* ── Filter bar ─────────────────────────────────────────────────── */
.plt-filter-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.plt-search-box {
display: flex; align-items: center; gap: 0.5rem;
background: var(--surface); border: 1px solid var(--border2);
border-radius: 22px; padding: 0.45rem 0.8rem;
flex: 1; min-width: 200px; max-width: 340px;
}
.plt-search-input {
background: none; border: none; outline: none;
color: var(--text); font-size: 0.78rem; width: 100%;
}
.plt-search-input::placeholder { color: var(--text3); }
.plt-filter-tabs { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 3px; flex-wrap: wrap; }
.plt-ftab {
padding: 0.28rem 0.7rem; border-radius: 10px; font-size: 0.7rem;
font-weight: 500; cursor: pointer; color: var(--text3); background: none;
border: none; transition: all 0.12s; white-space: nowrap;
}
.plt-ftab:hover { color: var(--text2); }
.plt-ftab.active { background: var(--surface3); color: var(--text); }
.plt-ftab-count {
display: inline-block; background: var(--surface3); color: var(--text3);
font-size: 0.6rem; padding: 0 5px; border-radius: 100px; margin-left: 3px;
}
/* ── Auth pages ─────────────────────────────────────────────────── */
.plt-auth-body {
display: flex; align-items: center; justify-content: center;
min-height: 100vh; background: var(--bg);
}
.plt-auth-wrap { width: 100%; max-width: 420px; padding: 1.5rem; }
.plt-auth-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 22px; padding: 2rem 2rem 1.75rem;
}
.plt-auth-logo { margin-bottom: 1.5rem; }
.plt-auth-title { font-family: 'DM Serif Display', serif; font-size: 1.6rem; margin-bottom: 6px; }
.plt-auth-sub { font-size: 0.82rem; color: var(--text3); margin-bottom: 1.5rem; }
.plt-auth-error {
background: var(--red-dim); color: var(--red);
border-radius: 20px; padding: 0.6rem 0.9rem; font-size: 0.78rem; margin-bottom: 1rem;
}
.plt-auth-form { display: flex; flex-direction: column; gap: 1rem; }
.plt-auth-hint { font-size: 0.68rem; color: var(--text3); margin-top: 1.25rem; line-height: 1.5; }
.plt-auth-hint code { background: var(--surface2); padding: 1px 5px; border-radius: 4px; }
/* ── Forms / inputs ─────────────────────────────────────────────── */
.plt-field { display: flex; flex-direction: column; gap: 5px; }
.plt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plt-label { font-size: 0.76rem; font-weight: 500; color: var(--text2); }
.plt-input {
width: 100%; padding: 0.55rem 0.8rem;
background: var(--surface2); border: 1px solid var(--border2);
border-radius: 20px; color: var(--text); font-size: 0.82rem;
transition: border-color 0.2s; outline: none; -webkit-appearance: none;
}
.plt-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,139,87,0.1); }
.plt-input-sm { max-width: 360px; }
.plt-textarea {
width: 100%; padding: 0.55rem 0.8rem;
background: var(--surface2); border: 1px solid var(--border2);
border-radius: 20px; color: var(--text); font-size: 0.8rem;
resize: vertical; outline: none; line-height: 1.5;
}
.plt-textarea:focus { border-color: var(--green); }
/* ── Drawer ─────────────────────────────────────────────────────── */
.plt-drawer-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.55);
z-index: 200; display: none; align-items: stretch; justify-content: flex-end;
padding: 4px 0 4px 12px; /* 12px gap on left, 4px top and bottom */
}
.plt-drawer-overlay.open { display: flex; }
.plt-drawer {
width: 500px; max-width: 95vw;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px 0 0 20px; /* curved on the left-facing edges only */
display: flex; flex-direction: column;
height: 100%; /* fills the padded overlay, not the full viewport */
overflow: hidden; animation: pltDrawerIn 0.25s ease;
}
@keyframes pltDrawerIn { from { transform: translateX(30px); opacity:0; } to { transform:translateX(0); opacity:1; } }
.plt-drawer-head {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.plt-drawer-identity { display: flex; align-items: center; gap: 0.75rem; }
.plt-drawer-avatar {
width: 42px; height: 42px; border-radius: 50%;
background: var(--green-dim); color: var(--green-hi);
display: flex; align-items: center; justify-content: center;
font-family: 'DM Serif Display', serif; font-size: 1.1rem; flex-shrink: 0;
}
.plt-drawer-name { font-size: 1rem; font-weight: 600; color: var(--text); }
.plt-drawer-meta { font-size: 0.72rem; color: var(--text3); margin-top: 2px; }
.plt-drawer-close {
background: none; border: none; cursor: pointer;
color: var(--text3); padding: 4px; border-radius: 10px; transition: color 0.15s;
}
.plt-drawer-close:hover { color: var(--text); }
.plt-drawer-actions {
display: flex; gap: 0.5rem; padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.plt-status-select {
background: var(--surface2); border: 1px solid var(--border2);
border-radius: 20px; color: var(--text); font-size: 0.76rem;
padding: 0.3rem 0.6rem; cursor: pointer; outline: none;
}
.plt-drawer-tabs {
display: flex; border-bottom: 1px solid var(--border);
padding: 0 1.25rem; flex-shrink: 0; gap: 0;
}
.plt-dtab {
padding: 0.6rem 0.85rem; font-size: 0.76rem; font-weight: 500;
cursor: pointer; color: var(--text3); background: none; border: none;
border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s;
}
.plt-dtab:hover { color: var(--text2); }
.plt-dtab.active { color: var(--green-hi); border-bottom-color: var(--green-hi); }
.plt-drawer-tab-content {
display: none; padding: 1.1rem 1.25rem;
overflow-y: auto; flex: 1;
}
.plt-drawer-tab-content.active { display: block; }
/* ── Drawer detail grid ─────────────────────────────────────────── */
.plt-detail-grid { display: flex; flex-direction: column; gap: 0; }
.plt-detail-row {
display: flex; padding: 0.55rem 0;
border-bottom: 1px solid var(--border); font-size: 0.78rem;
}
.plt-detail-row:last-child { border-bottom: none; }
.plt-detail-key { width: 130px; flex-shrink: 0; color: var(--text3); font-size: 0.72rem; padding-top: 2px; }
.plt-detail-val { flex: 1; color: var(--text); line-height: 1.5; }
/* ── Photo grid ─────────────────────────────────────────────────── */
.plt-photo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.plt-photo-thumb {
width: 120px; height: 120px; border-radius: 22px; object-fit: cover;
border: 1px solid var(--border2); cursor: pointer; transition: opacity 0.2s;
}
.plt-photo-thumb:hover { opacity: 0.85; }
.plt-photo-empty { font-size: 0.78rem; color: var(--text3); }
/* ── Notes ──────────────────────────────────────────────────────── */
.plt-notes-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.plt-note-item {
background: var(--surface2); border: 1px solid var(--border);
border-radius: 22px; padding: 0.75rem;
}
.plt-note-meta { font-size: 0.65rem; color: var(--text3); margin-bottom: 5px; }
.plt-note-text { font-size: 0.78rem; color: var(--text2); line-height: 1.55; }
.plt-note-form { display: flex; flex-direction: column; gap: 0.5rem; }
/* ── Timeline ───────────────────────────────────────────────────── */
.plt-timeline { display: flex; flex-direction: column; gap: 0; }
.plt-tl-item {
display: flex; gap: 0.75rem; padding: 0.7rem 0;
border-bottom: 1px solid var(--border); align-items: flex-start;
}
.plt-tl-item:last-child { border-bottom: none; }
.plt-tl-icon { font-size: 1rem; flex-shrink: 0; width: 24px; text-align: center; margin-top: 1px; }
.plt-tl-title { font-size: 0.78rem; font-weight: 500; color: var(--text); }
.plt-tl-detail { font-size: 0.72rem; color: var(--text3); margin-top: 2px; }
.plt-tl-time { font-size: 0.65rem; color: var(--text3); margin-top: 3px; }
/* ── Estimate in drawer ─────────────────────────────────────────── */
.plt-estimate-box {
background: var(--surface2); border: 1px solid var(--border2);
border-radius: 24px; padding: 1.1rem; margin-bottom: 1rem; text-align: center;
}
.plt-estimate-range {
font-family: 'DM Serif Display', serif; font-size: 2rem;
color: var(--green-hi); line-height: 1;
}
.plt-estimate-note { font-size: 0.72rem; color: var(--text3); margin-top: 6px; }
.plt-estimate-status { font-size: 0.72rem; color: var(--text2); margin-top: 8px; }
/* ── Gordon's estimate approval page ────────────────────────────── */
.plt-estimate-wrap { max-width: 560px; }
.plt-estimate-card { width: 100%; }
.plt-estimate-summary {
background: var(--surface2); border: 1px solid var(--border);
border-radius: 24px; overflow: hidden; margin-bottom: 1rem;
}
.plt-estimate-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border);
font-size: 0.78rem;
}
.plt-estimate-row:last-child { border-bottom: none; }
.plt-estimate-row span { color: var(--text3); }
.plt-estimate-row strong { color: var(--text); text-align: right; max-width: 60%; }
.plt-estimate-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; }
.plt-estimate-thumb {
width: 100px; height: 100px; border-radius: 22px; object-fit: cover;
border: 1px solid var(--border2);
}
.plt-estimate-ai-notice {
display: flex; align-items: flex-start; gap: 8px;
background: var(--amber-dim); color: var(--amber);
border-radius: 14px; padding: 0.65rem 0.9rem;
font-size: 0.76rem; margin-bottom: 1rem; line-height: 1.5;
}
.plt-estimate-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.plt-success-icon {
width: 60px; height: 60px; border-radius: 50%;
background: var(--green-dim); color: var(--green-hi);
display: flex; align-items: center; justify-content: center;
margin: 0 auto;
}
/* ── Placeholder modules ────────────────────────────────────────── */
.plt-placeholder-module {
background: var(--surface); border: 1px solid var(--border);
border-radius: 24px; padding: 2.5rem; text-align: center; max-width: 600px;
}
.plt-placeholder-icon {
font-size: 2rem; margin-bottom: 1rem;
width: 60px; height: 60px; border-radius: 50%;
background: var(--surface2); border: 1px solid var(--border2);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1rem; font-family: 'DM Serif Display', serif;
color: var(--text3);
}
.plt-placeholder-title { font-family: 'DM Serif Display', serif; font-size: 1.3rem; margin-bottom: 0.75rem; }
.plt-placeholder-desc { font-size: 0.82rem; color: var(--text2); line-height: 1.6; margin-bottom: 1.25rem; }
.plt-placeholder-items { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.plt-placeholder-item {
background: var(--surface2); border: 1px solid var(--border);
border-radius: 14px; padding: 0.55rem 0.9rem;
font-size: 0.78rem; color: var(--text2); text-align: left;
}
.plt-placeholder-phase { font-size: 0.7rem; color: var(--text3); font-style: italic; }
/* Placeholder in dashboard panels */
.plt-placeholder-body { padding: 1.1rem; }
.plt-placeholder-body p { font-size: 0.78rem; color: var(--text2); line-height: 1.6; }
/* ── Settings ───────────────────────────────────────────────────── */
.plt-settings-panel { margin-bottom: 1rem; }
.plt-settings-row {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border);
}
.plt-settings-row:last-child { border-bottom: none; }
.plt-settings-label { flex: 1; }
.plt-settings-label strong { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.plt-settings-label span { font-size: 0.7rem; color: var(--text3); line-height: 1.4; display: block; }
.plt-settings-submit { padding: 1rem 0; }
/* ── Misc ───────────────────────────────────────────────────────── */
.plt-empty { padding: 2.5rem; text-align: center; }
.plt-empty-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.plt-empty-text { font-size: 0.82rem; color: var(--text3); line-height: 1.6; max-width: 360px; margin: 0 auto; }
.plt-alert { padding: 0.7rem 1rem; border-radius: 14px; font-size: 0.78rem; margin-bottom: 1rem; }
.plt-alert-success { background: var(--green-dim); color: var(--green-hi); }
.plt-muted { color: var(--text3); }
.plt-small { font-size: 0.72rem; }
.plt-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.plt-toasts { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 500; display: flex; flex-direction: column; gap: 0.5rem; }
.plt-toast {
background: var(--surface); border: 1px solid var(--border2);
border-radius: 22px; padding: 0.65rem 1rem; font-size: 0.78rem;
color: var(--text); box-shadow: var(--shadow);
display: flex; align-items: center; gap: 0.5rem; min-width: 220px;
animation: pltToastIn 0.25s ease;
}
@keyframes pltToastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
/* ── Job type pills (contacts table + drawer meta) ──────────── */
.plt-jt-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 100px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
}
.plt-jt-maintenance {
background: rgba(29, 160, 100, 0.12);
color: #1da064;
border: 1px solid rgba(29, 160, 100, 0.2);
}
.plt-jt-restoration {
background: rgba(100, 160, 60, 0.12);
color: #64a03c;
border: 1px solid rgba(100, 160, 60, 0.2);
}
.plt-jt-landscaping {
background: rgba(196, 136, 74, 0.12);
color: #c4884a;
border: 1px solid rgba(196, 136, 74, 0.2);
}
.plt-jt-newbuild {
background: rgba(100, 130, 200, 0.12);
color: #6482c8;
border: 1px solid rgba(100, 130, 200, 0.2);
}
.plt-jt-unknown {
background: var(--surface2);
color: var(--text3);
border: 1px solid var(--border);
}
/* ── Contacts table Summary column ──────────────────────────── */
.plt-td-summary {
font-size: 0.72rem;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Detail section headers in drawer overview ───────────────── */
.plt-detail-section-head {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text3);
padding: 0.6rem 0 0.25rem;
margin-top: 0.25rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.1rem;
}
.plt-detail-section-head:first-child {
padding-top: 0;
margin-top: 0;
}
/* ── Consultation estimate box variant ───────────────────────── */
.plt-estimate-box--consult {
border-left: 3px solid var(--amber, #c4884a);
}
.plt-estimate-label {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text3);
margin-bottom: 0.4rem;
}
.plt-estimate-row-detail {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.78rem;
padding: 0.3rem 0;
border-bottom: 1px solid var(--border);
gap: 1rem;
}
.plt-estimate-row-detail:last-of-type { border-bottom: none; }
.plt-estimate-row-detail span { color: var(--text3); }
.plt-estimate-row-detail strong { color: var(--text); text-align: right; }
/* ── Job type filter tab row ─────────────────────────────────── */
.plt-filter-tabs--jt {
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
}
/* ── Covered tick in table (compact) ────────────────────────── */
.plt-covered {
color: var(--green-hi, #1da064);
font-size: 0.85rem;
}
// ---- FILE: platform.js ----
/* PDZ Platform — platform.js v2.0.0
Branch-aware: overview fields, estimate tab, and status select
all adapt to the contact's job_type. */
(function () {
'use strict';
/* ── Branch config ────────────────────────────────────────── */
var BRANCH_STATUS_OPTIONS = {
maintenance: [
{ value: 'new', label: 'New enquiry' },
{ value: 'estimate_pending', label: 'Estimate pending' },
{ value: 'estimate_sent', label: 'Estimate sent' },
{ value: 'deposit_paid', label: 'Deposit paid' },
{ value: 'active', label: 'Active job' },
{ value: 'complete', label: 'Complete' },
{ value: 'cold', label: 'Gone cold' },
{ value: 'lost', label: 'Lost' },
],
restoration: [
{ value: 'new', label: 'New enquiry' },
{ value: 'estimate_pending', label: 'Estimate pending' },
{ value: 'estimate_sent', label: 'Estimate sent' },
{ value: 'deposit_paid', label: 'Deposit paid' },
{ value: 'active', label: 'Active job' },
{ value: 'complete', label: 'Complete' },
{ value: 'cold', label: 'Gone cold' },
{ value: 'lost', label: 'Lost' },
],
landscaping: [
{ value: 'new', label: 'New enquiry' },
{ value: 'consultation_pending', label: 'Consultation pending' },
{ value: 'consultation_booked', label: 'Consultation booked' },
{ value: 'proposal_sent', label: 'Proposal sent' },
{ value: 'active', label: 'Active job' },
{ value: 'complete', label: 'Complete' },
{ value: 'cold', label: 'Gone cold' },
{ value: 'lost', label: 'Lost' },
],
newbuild: [
{ value: 'new', label: 'New enquiry' },
{ value: 'consultation_pending', label: 'Consultation pending' },
{ value: 'consultation_booked', label: 'Consultation booked' },
{ value: 'proposal_sent', label: 'Proposal sent' },
{ value: 'active', label: 'Active job' },
{ value: 'complete', label: 'Complete' },
{ value: 'cold', label: 'Gone cold' },
{ value: 'lost', label: 'Lost' },
],
};
var JOB_TYPE_LABELS = {
maintenance: 'Maintenance',
restoration: 'Restoration',
landscaping: 'Landscaping',
newbuild: 'New build',
};
var JOB_TYPE_ICONS = {
maintenance: '🌿',
restoration: '🌱',
landscaping: '✏️',
newbuild: '🏗️',
};
/* ── Helpers ──────────────────────────────────────────────── */
function apiGet(path) {
return fetch(PLT_API_BASE + path, {
headers: {
'X-WP-Nonce': PLT_NONCE,
'X-PDZ-Token': PLT_TOKEN
}
}).then(function(r) { return r.json(); });
}
function apiPost(path, data) {
return fetch(PLT_API_BASE + path, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': PLT_NONCE,
'X-PDZ-Token': PLT_TOKEN
},
body: JSON.stringify(data)
}).then(function(r) { return r.json(); });
}
function toast(msg, type) {
var c = document.getElementById('plt-toasts');
if (!c) return;
var el = document.createElement('div');
el.className = 'plt-toast';
el.innerHTML = (type === 'ok' ? '✓ ' : '') + msg;
c.appendChild(el);
setTimeout(function() {
el.style.opacity = '0';
el.style.transition = 'opacity 0.3s';
setTimeout(function() { el.remove(); }, 300);
}, 3000);
}
function escHtml(str) {
if (!str) return '—';
return String(str)
.replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');
}
function fmtDate(str) {
if (!str) return '—';
var d = new Date(str);
return d.toLocaleDateString('en-GB', {day:'numeric',month:'short',year:'numeric'});
}
function fmtTime(str) {
if (!str) return '';
var d = new Date(str);
return d.toLocaleString('en-GB', {day:'numeric',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'});
}
function detailRow(key, val) {
if (!val) return '';
return '' +
'' + escHtml(key) + ' ' +
'' + escHtml(val) + ' ' +
'
';
}
function isDesignBranch(jobType) {
return jobType === 'landscaping' || jobType === 'newbuild';
}
/* ── Theme toggle ─────────────────────────────────────────── */
var themeBtn = document.getElementById('plt-theme-toggle');
var iconDark = document.getElementById('plt-theme-icon-dark');
var iconLight = document.getElementById('plt-theme-icon-light');
function applyTheme(t) {
document.documentElement.setAttribute('data-theme', t);
if (iconDark && iconLight) {
iconDark.style.display = t === 'dark' ? 'block' : 'none';
iconLight.style.display = t === 'light' ? 'block' : 'none';
}
}
applyTheme(PLT_THEME);
if (themeBtn) {
themeBtn.addEventListener('click', function() {
var current = document.documentElement.getAttribute('data-theme');
var next = current === 'dark' ? 'light' : 'dark';
applyTheme(next);
fetch(PLT_BASE + '/settings?theme=' + next, { method: 'HEAD', credentials: 'same-origin' });
});
}
/* ── Contact rows → open drawer ───────────────────────────── */
document.querySelectorAll('.plt-contact-row, .plt-table-row[data-contact-id]').forEach(function(row) {
row.addEventListener('click', function() {
var id = row.getAttribute('data-contact-id');
if (id) openDrawer(parseInt(id, 10));
});
});
/* ── Drawer ───────────────────────────────────────────────── */
var overlay = document.getElementById('plt-drawer-overlay');
var drawer = document.getElementById('plt-drawer');
var closeBtn = document.getElementById('plt-drawer-close');
var currentId = null;
var currentContact = null;
function openDrawer(id) {
currentId = id;
if (overlay) overlay.classList.add('open');
loadDrawerData(id);
}
function closeDrawer() {
if (overlay) overlay.classList.remove('open');
currentId = null;
currentContact = null;
}
if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
if (overlay) overlay.addEventListener('click', function(e) {
if (e.target === overlay) closeDrawer();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeDrawer();
});
function loadDrawerData(id) {
setDrawerTab('overview');
var nameEl = document.getElementById('plt-drawer-name');
var metaEl = document.getElementById('plt-drawer-meta');
if (nameEl) nameEl.textContent = 'Loading…';
if (metaEl) metaEl.textContent = '';
apiGet('/contacts/' + id).then(function(c) {
currentContact = c;
populateOverview(c);
populatePhotos(c);
populateStatusSelect(c);
updateEstimateTabLabel(c.job_type);
// Load async tabs
apiGet('/contacts/' + id + '/estimate').then(function(est) { populateEstimate(est, c.job_type); });
apiGet('/contacts/' + id + '/notes').then(populateNotes);
apiGet('/contacts/' + id + '/activity').then(populateTimeline);
}).catch(function() {
toast('Failed to load contact.');
});
}
/* ── Drawer tabs ──────────────────────────────────────────── */
document.querySelectorAll('.plt-dtab').forEach(function(tab) {
tab.addEventListener('click', function() {
setDrawerTab(tab.getAttribute('data-tab'));
});
});
function setDrawerTab(name) {
document.querySelectorAll('.plt-dtab').forEach(function(t) {
t.classList.toggle('active', t.getAttribute('data-tab') === name);
});
document.querySelectorAll('.plt-drawer-tab-content').forEach(function(c) {
c.classList.toggle('active', c.id === 'plt-tab-' + name);
});
}
function updateEstimateTabLabel(jobType) {
var lbl = document.getElementById('plt-estimate-tab-label');
if (!lbl) return;
lbl.textContent = isDesignBranch(jobType) ? 'Consultation' : 'Estimate';
}
/* ── Status select — populate branch-appropriate options ──── */
function populateStatusSelect(c) {
var selEl = document.getElementById('plt-drawer-status-select');
if (!selEl) return;
var options = BRANCH_STATUS_OPTIONS[c.job_type] || BRANCH_STATUS_OPTIONS['maintenance'];
selEl.innerHTML = options.map(function(o) {
return '' + o.label + ' ';
}).join('');
}
/* ── Populate overview — branch-aware detail rows ─────────── */
function populateOverview(c) {
var nameEl = document.getElementById('plt-drawer-name');
var metaEl = document.getElementById('plt-drawer-meta');
var avatarEl = document.getElementById('plt-drawer-avatar');
var grid = document.getElementById('plt-overview-grid');
var waBtn = document.getElementById('plt-btn-whatsapp');
var emailBtn = document.getElementById('plt-btn-email');
var fullName = ((c.first_name || '') + ' ' + (c.last_name || '')).trim();
var jobIcon = JOB_TYPE_ICONS[c.job_type] || '🏡';
var jobLabel = JOB_TYPE_LABELS[c.job_type] || c.job_type;
if (nameEl) nameEl.textContent = fullName || 'No name';
if (avatarEl) avatarEl.textContent = (fullName[0] || '?').toUpperCase();
if (metaEl) {
metaEl.innerHTML =
'' + jobIcon + ' ' + escHtml(jobLabel) + ' ' +
(c.postcode ? ' ' + escHtml(c.postcode) : '') +
(c.covered == 1 ? ' ✓ covered ' : '');
}
// WhatsApp / email actions
var wa = (c.whatsapp || c.phone || '').replace(/\s+/g,'');
if (waBtn) {
waBtn.onclick = wa
? function() { window.open('https://wa.me/' + wa.replace(/^\+/,''), '_blank'); }
: function() { toast('No WhatsApp number on record.'); };
}
if (emailBtn) {
emailBtn.onclick = c.email
? function() { window.open('mailto:' + c.email, '_blank'); }
: function() { toast('No email on record.'); };
}
if (!grid) return;
// ── Build branch-appropriate detail rows ──────────────────
var html = '';
// Core contact — always shown
html += 'Contact
';
html += detailRow('Name', fullName);
html += detailRow('Email', c.email);
html += detailRow('WhatsApp', c.whatsapp);
html += detailRow('Phone', c.phone);
html += detailRow('Postcode', c.postcode);
html += detailRow('Covered', c.covered == 1 ? '✓ Yes — in service area' : '✗ Outside usual area');
// Branch-specific detail
html += '' + jobLabel + ' details
';
switch (c.job_type) {
case 'maintenance':
html += detailRow('Garden size', c.garden_size);
html += detailRow('Visit freq.', c.visit_frequency);
html += detailRow('Services', c.services);
break;
case 'restoration':
html += detailRow('Garden size', c.garden_size);
html += detailRow('Last maintained',c.maintenance);
html += detailRow('Grass height', c.grass_height);
html += detailRow('Access', c.garden_access);
html += detailRow('Services', c.services);
break;
case 'landscaping':
html += detailRow('Current state', c.existing_state);
html += detailRow('Garden purpose', c.garden_purpose);
html += detailRow('Style', c.garden_style);
html += detailRow('Budget range', c.budget_range);
break;
case 'newbuild':
html += detailRow('Plot size', c.plot_size);
html += detailRow('Aspect', c.plot_aspect);
html += detailRow('Garden purpose', c.garden_purpose);
html += detailRow('Budget range', c.budget_range);
html += detailRow('Timeline', c.project_timeline);
break;
default:
// Fallback — show any non-empty field
['garden_size','visit_frequency','maintenance','grass_height','garden_access',
'services','existing_state','garden_purpose','garden_style','budget_range',
'plot_size','plot_aspect','project_timeline'].forEach(function(k) {
if (c[k]) html += detailRow(k.replace(/_/g,' '), c[k]);
});
}
// Notes + metadata — always shown
if (c.extra_notes) {
html += 'Notes from client
';
html += detailRow('Notes', c.extra_notes);
}
html += 'Record
';
html += detailRow('Submitted', fmtDate(c.created_at));
html += detailRow('Deposit', c.deposit_status);
grid.innerHTML = html;
}
/* ── Populate photos ──────────────────────────────────────── */
function populatePhotos(c) {
var grid = document.getElementById('plt-photo-grid');
if (!grid) return;
var paths = (c.photo_paths || '').split('\n').filter(Boolean);
if (!paths.length) {
grid.innerHTML = 'No photos uploaded with this submission.
';
return;
}
grid.innerHTML = paths.map(function(p) {
return '' +
' ';
}).join('');
}
/* ── Populate estimate/consultation tab ───────────────────── */
function populateEstimate(est, jobType) {
var el = document.getElementById('plt-estimate-content');
if (!el) return;
if (!est || !est.id) {
el.innerHTML = 'No record found.
';
return;
}
var html = '';
if (isDesignBranch(jobType)) {
// ── Consultation mode ──────────────────────────────────
var feeStr = est.consultation_fee ? '£' + Math.round(est.consultation_fee) : 'Not yet set';
var dateStr = est.consultation_date ? fmtTime(est.consultation_date) : 'Not yet booked';
var statusLabels = {
consultation_pending: 'Awaiting consultation booking',
consultation_booked: 'Consultation booked',
proposal_sent: 'Proposal sent to client',
};
var statusLabel = statusLabels[est.status] || est.status;
html += '';
html += '
Design consultation
';
html += '
' + escHtml(feeStr) + '
';
html += '
Date ' + escHtml(dateStr) + '
';
if (est.consultation_notes) {
html += '
' + escHtml(est.consultation_notes) + '
';
}
html += '
' + escHtml(statusLabel) + '
';
html += '
⚠ Consultation not yet booked. Gordon will receive a magic link via Zapier to set the date and fee.
';
} else {
html += 'Booked ' + fmtTime(est.gordon_approved_at) + '
';
}
} else {
// ── Price range mode ───────────────────────────────────
var rangeStr = (est.range_low && est.range_high)
? '£' + Math.round(est.range_low) + ' – £' + Math.round(est.range_high)
: 'Not yet set';
var priceStatusLabels = {
pending_gordon: 'Awaiting Gordon\'s approval',
approved: 'Approved by Gordon',
sent: 'Sent to contact',
};
var priceStatusLabel = priceStatusLabels[est.status] || est.status;
html += '';
html += '
' + escHtml(rangeStr) + '
';
if (est.notes) {
html += '
' + escHtml(est.notes) + '
';
}
html += '
' + escHtml(priceStatusLabel) + '
';
html += '
Approved ' + fmtTime(est.gordon_approved_at) + '
';
} else {
html += '⚠ Gordon has not yet approved this estimate. Once Zapier is configured, he will receive a WhatsApp + email with a magic link to review it.
';
}
}
el.innerHTML = html;
}
/* ── Populate notes ───────────────────────────────────────── */
function populateNotes(notes) {
var list = document.getElementById('plt-notes-list');
if (!list) return;
if (!notes || !notes.length) {
list.innerHTML = 'No notes yet.
';
return;
}
list.innerHTML = notes.map(function(n) {
return '' +
'
' + escHtml(n.username || 'Admin') + ' · ' + fmtTime(n.created_at) + '
' +
'
' + escHtml(n.note) + '
' +
'
No activity yet.
';
return;
}
el.innerHTML = events.map(function(e) {
return '' +
'
' + (e.icon || '📋') + ' ' +
'
' +
'
' + escHtml(e.title) + '
' +
(e.detail ? '
' + escHtml(e.detail) + '
' : '') +
'
' + fmtTime(e.created_at) + '
' +
'
' +
'