/* ==============================================================
   Client Dashboard — Visual Theme
   Zero dependencies, no web fonts, no framework. Targets only the
   existing markup from client-dashboard.php — no HTML changes needed.
   ============================================================== */

:root {
	--cd-bg-start: #ffffff;
	--cd-bg-end: #ffffff;
	--cd-card-bg: #ffffff;
	--cd-subcard-bg: #eef1f6;
	--cd-border: #000;
	--cd-text: #2a2a2a;
	--cd-text-muted: #6b7280;
	--cd-label: #000;
	--cd-accent: #111827;
	--cd-accent-hover: #2563eb;
	--cd-shadow: 0 10px 30px rgba(31, 41, 55, 0.07);
	--cd-radius-lg: 22px;
	--cd-radius-md: 16px;
	--cd-radius-pill: 999px;
	--cd-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Soft page backdrop — only applies on pages that actually contain the
   dashboard, so it never leaks onto the rest of the site. Degrades
   gracefully (plain background) on browsers without :has() support. */
body:has(.cd-project),
body:has(.cd-recent-tickets) {
	background: linear-gradient(160deg, var(--cd-bg-start), var(--cd-bg-end));
	background-attachment: fixed;
}

/* ------------------------------------------------------------
   Recent tickets card
   ------------------------------------------------------------ */
.cd-recent-tickets {
	max-width: 75vw;
	margin: 0 auto 28px;
	background: var(--cd-card-bg);
	border-radius: var(--cd-radius-lg);
	border: 1px #ccc solid ;
	box-shadow: var(--cd-shadow);
	padding: 26px 30px;
	font-family: var(--cd-font-body);
}

.cd-recent-tickets h3 {
	font-family: var(--cd-font-body);
	font-weight: 500;
	font-size: 21px;
	color: var(--cd-text);
	margin: 0 0 14px;
}

.cd-ticket-list { list-style: none; margin: 0; padding: 0; }

.cd-ticket-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 2px;
	border-bottom: 1px solid var(--cd-border);
	font-size: 14.5px;
	color: var(--cd-text);
}
.cd-ticket-list li:last-child { border-bottom: none; }

/* The little status dot in the markup is replaced by a colored pill on
   the label text that immediately follows it — no HTML change needed. */
.cd-ticket-status-dot { display: none; }

.cd-ticket-status-label {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: var(--cd-radius-pill);
	background: #e5e7eb;
	color: #4b5563;
	white-space: nowrap;
}
.cd-status-open + .cd-ticket-status-label       { background: #dcfce7; color: #15803d; }
.cd-status-in_progress + .cd-ticket-status-label{ background: #dbeafe; color: #1d4ed8; }
.cd-status-closed + .cd-ticket-status-label     { background: #e5e7eb; color: #4b5563; }

/* ------------------------------------------------------------
   Project card — grid auto-arranges Personal / Site / Plan /
   Progress / Notes / Tickets into responsive columns
   ------------------------------------------------------------ */
.cd-project {
	max-width: 75vw;
	margin: 0 auto 32px;
	background: var(--cd-card-bg);
	border-radius: var(--cd-radius-lg);
	border:1px #ccc solid;
	box-shadow: var(--cd-shadow);
	padding: 34px;
	font-family: var(--cd-font-body);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
}

.cd-project > h2 {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	font-family: var(--cd-font-body);
	font-weight: 500;
	font-size: 27px;
	color: var(--cd-text);
	margin: 0 0 6px;
}

.cd-project-status-badge {
	font-size: 12px;
	font-weight: 700;
	padding: 5px 15px;
	border-radius: var(--cd-radius-pill);
}
.cd-pstatus-complete { background: #dcfce7; color: #15803d; }
.cd-pstatus-extended { background: #fef9c3; color: #a16207; }
.cd-pstatus-creep    { background: #fee2e2; color: #b91c1c; }
.cd-pstatus-underway { background: #dbeafe; color: #1d4ed8; }

/* Every direct-child block (each info group, the chart, notes, ticket
   form) becomes its own sub-card within the grid. */
.cd-project > .cd-info-block,
.cd-project > .cd-chart-wrap,
.cd-project > .cd-notes,
.cd-project > .cd-ticket-form {
	background: var(--cd-subcard-bg);
	border: 1px solid var(--cd-border);
	border-radius: var(--cd-radius-md);
	padding: 20px 22px;
}

.cd-info-block h3 {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--cd-label);
	margin: 0 0 14px;
}
.cd-info-block p { margin: 7px 0; font-size: 14.5px; color: var(--cd-text-muted); line-height: 1.5; }
.cd-info-block p strong { color: var(--cd-text); font-weight: 600; }

.cd-btn {
	display: inline-block;
	margin: 6px 8px 0 0;
	padding: 9px 18px;
	border-radius: var(--cd-radius-pill);
	background: var(--cd-accent);
	color: #fff !important;
	text-decoration: none !important;
	font-size: 12.5px;
	font-weight: 600;
	transition: background 0.15s ease, transform 0.15s ease;
}
.cd-btn:hover { background: var(--cd-accent-hover); transform: translateY(-1px); }

/* ------------------------------------------------------------
   Progress chart
   ------------------------------------------------------------ */
.cd-chart-wrap { text-align: center; }
.cd-chart-wrap p { font-size: 13px; color: var(--cd-text-muted); margin-top: 10px; }

/* ------------------------------------------------------------
   Notes
   ------------------------------------------------------------ */
.cd-notes h3 { font-family: var(--cd-font-body); font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--cd-label);
	margin: 0 0 14px; }

.cd-notes-list { list-style: none; margin: 0 0 14px; padding: 0; max-height: 220px; overflow-y: auto; }
.cd-notes-list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--cd-border);
	font-size: 13.5px;
	color: var(--cd-text-muted);
	line-height: 1.5;
}
.cd-notes-list li:last-child { border-bottom: none; }
.cd-notes-list li strong { color: var(--cd-text); }

.cd-delete-note-btn {
	margin-left: 8px;
	border: none;
	background: transparent;
	color: #b91c1c;
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

.cd-note-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--cd-border);
	border-radius: 12px;
	padding: 10px 12px;
	font: inherit;
	font-size: 13.5px;
	resize: vertical;
	margin-bottom: 10px;
	background: #fff;
}

/* ------------------------------------------------------------
   Ticket form
   ------------------------------------------------------------ */
.cd-ticket-form h3 { font-family: var(--cd-font-body); font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--cd-label);
	margin: 0 0 14px; }

.cd-ticket-subject,
.cd-ticket-message {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--cd-border);
	border-radius: 12px;
	padding: 10px 12px;
	font: inherit;
	font-size: 13.5px;
	margin-bottom: 10px;
	background: #fff;
}

.cd-add-note-btn,
.cd-submit-ticket-btn {
	border: none;
	background: var(--cd-accent);
	color: #fff;
	padding: 10px 22px;
	border-radius: var(--cd-radius-pill);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.cd-add-note-btn:hover,
.cd-submit-ticket-btn:hover { background: var(--cd-accent-hover); }
.cd-add-note-btn:disabled,
.cd-submit-ticket-btn:disabled { opacity: 0.6; cursor: default; }

.cd-ticket-status { font-size: 12.5px; color: var(--cd-text-muted); margin: 10px 0 0; }

/* The <hr> the loop prints between project cards — kept, just tidied so
   it reads as breathing room instead of a visible line. */
.cd-project + hr {
	border: none;
	margin: 0 0 8px;
}

/* ------------------------------------------------------------
   Small screens
   ------------------------------------------------------------ */
@media (max-width: 640px) {
	.cd-project,
	.cd-recent-tickets {
		padding: 20px;
		border-radius: var(--cd-radius-md);
		margin-left: 12px;
		margin-right: 12px;
	}
	.cd-project > h2 { font-size: 22px; }
}