/* =================================================================
   KzS Client Portal — Unified Stylesheet
   ================================================================= */

[x-cloak] { display: none !important; }

:root {
	--kzs-primary:       #2563eb;
	--kzs-primary-dark:  #1d4ed8;
	--kzs-primary-light: #dbeafe;
	--kzs-text:          #111827;
	--kzs-text-muted:    #6b7280;
	--kzs-border:        #e5e7eb;
	--kzs-bg:            #f9fafb;
	--kzs-white:         #ffffff;
	--kzs-radius:        8px;
	--kzs-radius-sm:     4px;
	--kzs-shadow:        0 1px 3px rgba(0,0,0,.08);
	--kzs-shadow-md:     0 4px 12px rgba(0,0,0,.10);
	--kzs-shadow-lg:     0 8px 24px rgba(0,0,0,.12);

	--status-active-bg:   #dcfce7;
	--status-active-text: #15803d;
	--status-hold-bg:     #fef3c7;
	--status-hold-text:   #b45309;
	--status-done-bg:     #dbeafe;
	--status-done-text:   #1d4ed8;
	--status-draft-bg:         #f3f4f6;
	--status-draft-text:       #6b7280;
	--status-quoted-bg:        #ede9fe;
	--status-quoted-text:      #6d28d9;
	--status-quote-req-bg:     #fce7f3;
	--status-quote-req-text:   #9d174d;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Theme reset — neutralise common theme overrides inside the portal ── */
html body .kzs-portal h1,
html body .kzs-portal h2,
html body .kzs-portal h3,
html body .kzs-portal h4,
html body .kzs-portal h5,
html body .kzs-portal h6 {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	color: var(--kzs-text);
}

html body .kzs-portal p {
	color: var(--kzs-text) !important;
	margin: 0;
}

html body .kzs-portal a {
	color: var(--kzs-primary);
	text-decoration: none;
}

html body .kzs-portal button {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	cursor: pointer;
	box-shadow: none;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}

/* Neutralise reset.css rule: button:hover/focus { background: #e30; color: #fff } */
html body .kzs-portal button:hover,
html body .kzs-portal button:focus {
	background-color: transparent;
	color: inherit;
	text-decoration: none;
}

html body .kzs-portal input,
html body .kzs-portal textarea {
	font-family: inherit;
	font-size: inherit;
	color: var(--kzs-text);
	background: var(--kzs-white);
	border-radius: var(--kzs-radius);
	border: 1px solid var(--kzs-border);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* =================================================================
   SIDEBAR
   ================================================================= */

/* Backdrop */
.kzs-sidebar-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.35);
	z-index: 100000;
	backdrop-filter: blur(2px);
}

.kzs-fade-in  { animation: kzs-fadeIn .2s ease forwards; }
.kzs-fade-out { animation: kzs-fadeIn .15s ease reverse forwards; }

/* Panel */
.kzs-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 275px;
	background: #1a1f2e;
	z-index: 100001;
	transform: translateX(-275px);
	transition: transform .28s cubic-bezier(.4,0,.2,1);
	display: flex;
	flex-direction: column;
	box-shadow: 4px 0 24px rgba(0,0,0,.25);
	/* overflow visible so the tab can stick out to the right */
	overflow: visible;
}

.kzs-sidebar--open {
	transform: translateX(0);
}

/* Scrollable inner content */
.sidebar-content {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: #3a3f52 transparent;
}

/* Tab that always peeks out from the right edge of the panel */
.kzs-sidebar .sidebar-tab {
	position: absolute;
	right: -40px;
	top: 135px;
	width: 40px;
	height: 60px;
	background: #1a1f2e !important;
	border: none;
	border-radius: 0 10px 10px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #ffffff !important;
	font-size: 24px;
	line-height: 1;
	box-shadow: 4px 0 12px rgba(0,0,0,.35);
	transition: background .15s;
	padding: 0;
}

.kzs-sidebar .sidebar-tab:hover {
	background: #2a3148 !important;
	color: #ffffff !important;
}

/* Logo */
.sidebar-logo-wrap {
	width: 100%;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	margin-top: 55px;
}

.sidebar-logo {
	width: 200px;
	height: auto;
	display: block;
}

/* ── Wrapper ──────────────────────────────────────────────────── */
.kzs-portal {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--kzs-text);
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 20px;
}

/* ── Header ───────────────────────────────────────────────────── */
.portal-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--kzs-border);
}

.portal-header-left {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.client-logo {
	width: 52px;
	height: 52px;
	object-fit: contain;
	border-radius: var(--kzs-radius-sm);
	flex-shrink: 0;
}

.portal-title {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	color: var(--kzs-text);
}

.portal-subtitle {
	margin: 0;
	font-size: 14px;
	color: var(--kzs-text-muted);
}

.project-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.meta-divider { color: var(--kzs-border); }

.project-description {
	font-size: 13px;
	color: var(--kzs-text-muted);
}

/* ── Header Right ─────────────────────────────────────────────── */
.portal-header-right {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-shrink: 0;
}

/* ── Admin Client Search ──────────────────────────────────────── */
.client-search-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 240px;
}

.client-search-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--kzs-text-muted);
}

.client-search-inner { position: relative; }

.client-search-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	font-size: 14px;
	font-family: inherit;
	background: var(--kzs-white);
	color: var(--kzs-text);
	transition: border-color .15s, box-shadow .15s;
}

.client-search-input:focus {
	outline: none;
	border-color: var(--kzs-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.client-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--kzs-white);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	box-shadow: var(--kzs-shadow-md);
	max-height: 240px;
	overflow-y: auto;
	z-index: 100;
}

.client-dropdown-item {
	padding: 10px 14px;
	font-size: 14px;
	cursor: pointer;
	transition: background .1s;
}

.client-dropdown-item:hover {
	background: var(--kzs-bg);
	color: var(--kzs-primary);
}

.client-dropdown-empty {
	padding: 12px 14px;
	font-size: 13px;
	color: var(--kzs-text-muted);
	text-align: center;
}

.loading-indicator {
	font-size: 12px;
	color: var(--kzs-text-muted);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.kzs-portal .btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	background: var(--kzs-primary);
	color: var(--kzs-white);
	border: none;
	border-radius: var(--kzs-radius);
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s, box-shadow .15s, transform .1s;
}

.kzs-portal .btn-primary:hover {
	background: var(--kzs-primary-dark);
	color: var(--kzs-white);
	box-shadow: 0 2px 8px rgba(37,99,235,.3);
}

.kzs-portal .btn-primary:active  { transform: translateY(1px); }
.kzs-portal .btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.kzs-portal .btn-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--kzs-bg);
	color: var(--kzs-text-muted);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: all .15s;
	align-self: flex-end;
}

.kzs-portal .btn-back:hover {
	color: var(--kzs-text);
	background: var(--kzs-white);
	border-color: #9ca3af;
}

/* ── Sidebar Nav ──────────────────────────────────────────────── */
.sidebar-nav {
	padding: 8px 16px;
	flex: 1;
}

.sidebar-nav-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: var(--kzs-radius-sm);
	margin-bottom: 2px;
	cursor: pointer;
	transition: background .12s;
}

.sidebar-nav-item:hover {
	background: rgba(255,255,255,.06);
}

.sidebar-nav-item--active {
	background: rgba(255,255,255,.10);
}

.sidebar-nav-item--placeholder {
	opacity: .45;
	cursor: default;
}

.sidebar-nav-label {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,.85);
}

.sidebar-nav-badge {
	font-size: 11px;
	font-weight: 700;
	background: var(--kzs-primary);
	color: #fff;
	padding: 2px 7px;
	border-radius: 999px;
	min-width: 20px;
	text-align: center;
}

.sidebar-nav-badge--green {
	background: #16a34a;
}

.sidebar-nav-item--completed {
	background: rgba(22,163,74,.15);
	cursor: pointer;
}

/* ── Sidebar Task List (Option A) ─────────────────────────────── */
.sidebar-task-list {
	padding: 4px 12px 8px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	margin-bottom: 4px;
}

.sidebar-task-modal-link {
	font-size: 11px;
	color: rgba(255,255,255,.45);
	cursor: pointer;
	text-align: right;
	padding: 2px 0 6px;
	transition: color .12s;
}

.sidebar-task-modal-link:hover { color: rgba(255,255,255,.8); }

.sidebar-task-empty {
	font-size: 12px;
	color: rgba(255,255,255,.4);
	padding: 8px 0;
	margin: 0;
}

.sidebar-task-item {
	padding: 8px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

.sidebar-task-item:last-child { border-bottom: none; }

.sidebar-task-name {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255,255,255,.9);
	margin-bottom: 2px;
}

.sidebar-task-meta {
	font-size: 11px;
	color: rgba(255,255,255,.4);
	margin-bottom: 6px;
}

.sidebar-task-controls {
	display: flex;
	gap: 6px;
}

.sidebar-task-select {
	flex: 1;
	font-size: 11px !important;
	padding: 3px 6px !important;
	border: 1px solid rgba(255,255,255,.15) !important;
	border-radius: var(--kzs-radius-sm) !important;
	background: rgba(255,255,255,.08) !important;
	color: rgba(255,255,255,.85) !important;
	cursor: pointer;
}

.sidebar-task-select option {
	background: #1a1f2e;
	color: #fff;
}

/* ── Form Modal (Add Task, etc.) ──────────────────────────────── */
.kzs-modal--form {
	max-width: 440px !important;
	text-align: left !important;
}

.modal-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.modal-field label {
	font-size: 13px;
	font-weight: 500;
	color: var(--kzs-text-muted);
}

.modal-field input,
.modal-field select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius-sm);
	font-size: 14px;
	color: var(--kzs-text);
	background: var(--kzs-white);
	font-family: inherit;
}

.modal-field input:focus,
.modal-field select:focus {
	outline: none;
	border-color: var(--kzs-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.modal-notify-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--kzs-text-muted);
	margin-bottom: 20px;
	padding: 10px 12px;
	background: var(--kzs-bg);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius-sm);
	cursor: pointer;
}

html body .kzs-portal .modal-notify-check input[type="checkbox"] {
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
	width: 16px;
	height: 16px;
	min-width: 16px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var(--kzs-primary);
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
.modal-notify-check strong { color: var(--kzs-text); }

/* ── Task Overview Modal (Option B) ───────────────────────────── */
.kzs-modal--wide {
	max-width: 780px !important;
	text-align: left !important;
}

.kzs-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.kzs-modal-header .kzs-modal-title { margin: 0; }

.kzs-portal .kzs-modal-close {
	background: transparent !important;
	border: none !important;
	font-size: 22px;
	color: var(--kzs-text-muted);
	cursor: pointer;
	line-height: 1;
	padding: 0 4px !important;
}

.task-modal-table {
	width: 100%;
	overflow-x: auto;
}

.task-modal-row {
	display: grid;
	grid-template-columns: 2fr 1.5fr 1.5fr 1.2fr 1.2fr;
	gap: 12px;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--kzs-border);
}

.task-modal-row--header {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--kzs-text-muted);
	padding-bottom: 10px;
}

.task-modal-cell { font-size: 13px; color: var(--kzs-text); }
.task-modal-name { font-weight: 600; }

.task-modal-name--link {
	color: var(--kzs-primary);
	cursor: pointer;
}
.task-modal-name--link:hover {
	text-decoration: underline;
}

/* ── Sidebar Logout ───────────────────────────────────────────── */
.sidebar-logout-wrap {
	padding: 24px 20px;
	margin-top: auto;
}

.kzs-sidebar .sidebar-logout-btn {
	width: 100%;
	padding: 10px 0;
	background: transparent !important;
	border: 1px solid rgba(255,255,255,.2) !important;
	border-radius: var(--kzs-radius) !important;
	color: rgba(255,255,255,.7) !important;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.kzs-sidebar .sidebar-logout-btn:hover {
	background: rgba(255,255,255,.08) !important;
	border-color: rgba(255,255,255,.4) !important;
	color: #ffffff !important;
}

/* ── Logout Modal ─────────────────────────────────────────────── */
.kzs-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kzs-modal {
	background: #fff;
	border-radius: var(--kzs-radius);
	box-shadow: var(--kzs-shadow-lg);
	padding: 32px;
	width: 100%;
	max-width: 380px;
	text-align: center;
}

.kzs-modal-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--kzs-text);
	margin: 0 0 8px;
}

.kzs-modal-body {
	font-size: 14px;
	color: var(--kzs-text-muted);
	margin: 0 0 24px;
}

.kzs-modal-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.kzs-portal .kzs-modal-btn {
	padding: 9px 24px;
	border-radius: var(--kzs-radius);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
	border: none !important;
}

.kzs-portal .kzs-modal-btn--cancel {
	background: var(--kzs-bg) !important;
	color: var(--kzs-text) !important;
}

.kzs-portal .kzs-modal-btn--cancel:hover {
	background: var(--kzs-border) !important;
	color: var(--kzs-text) !important;
}

.kzs-portal .kzs-modal-btn--confirm {
	background: #dc2626 !important;
	color: #ffffff !important;
}

.kzs-portal .kzs-modal-btn--confirm:hover {
	background: #b91c1c !important;
	color: #ffffff !important;
}

.kzs-portal .kzs-modal-btn--primary {
	background: var(--kzs-primary) !important;
	color: #ffffff !important;
}

.kzs-portal .kzs-modal-btn--primary:hover {
	background: var(--kzs-primary-dark) !important;
	color: #ffffff !important;
}

/* ── Company Select (multi-company client picker) ─────────────── */
.company-select-header {
	margin-bottom: 32px;
	text-align: center;
}

.company-select-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--kzs-text);
	margin: 0 0 8px;
}

.company-select-subtitle {
	font-size: 14px;
	color: var(--kzs-text-muted);
	margin: 0;
}

/* ── Admin Home ───────────────────────────────────────────────── */
.admin-home-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.admin-home-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--kzs-text);
	margin: 0;
}

.kzs-portal .btn-add-client {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--kzs-primary);
	color: var(--kzs-white);
	border: none;
	border-radius: var(--kzs-radius);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s;
}

.kzs-portal .btn-add-client:hover { background: var(--kzs-primary-dark); color: var(--kzs-white); }

/* Add client panel */
.add-client-panel {
	background: var(--kzs-bg);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	padding: 20px;
	margin-bottom: 28px;
}

.add-client-panel-title {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--kzs-text-muted);
}

.add-client-fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 16px;
}

.add-client-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.add-client-field label {
	font-size: 12px;
	font-weight: 600;
	color: var(--kzs-text-muted);
	text-transform: uppercase;
	letter-spacing: .4px;
}

.add-client-field input {
	padding: 8px 12px;
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius-sm);
	font-size: 14px;
	background: var(--kzs-white);
	transition: border-color .15s, box-shadow .15s;
}

.add-client-field input:focus {
	outline: none;
	border-color: var(--kzs-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.add-client-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.add-client-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--kzs-text-muted);
	cursor: pointer;
}

.add-client-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.add-client-error {
	font-size: 13px;
	color: #dc2626;
	margin: 0;
}

/* Recent clients grid */
.recent-clients-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.recent-client-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	background: var(--kzs-white);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	cursor: pointer;
	transition: box-shadow .2s, transform .15s, border-color .15s;
}

.recent-client-card:hover {
	box-shadow: var(--kzs-shadow-md);
	transform: translateY(-2px);
	border-color: var(--kzs-primary);
}

.rc-logo-wrap,
.rc-initials {
	width: 44px;
	height: 44px;
	border-radius: var(--kzs-radius-sm);
	flex-shrink: 0;
	overflow: hidden;
}

.rc-logo { width: 100%; height: 100%; object-fit: contain; }

.rc-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kzs-primary-light);
	color: var(--kzs-primary);
	font-size: 20px;
	font-weight: 700;
}

.rc-info {
	flex: 1;
	min-width: 0;
}

.rc-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--kzs-text);
	margin: 0 0 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rc-meta {
	font-size: 12px;
	color: var(--kzs-text-muted);
	margin: 0;
}

.rc-arrow {
	font-size: 16px;
	color: var(--kzs-text-muted);
	flex-shrink: 0;
	transition: color .15s, transform .15s;
}

.recent-client-card:hover .rc-arrow {
	color: var(--kzs-primary);
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.add-client-fields    { grid-template-columns: 1fr 1fr; }
	.recent-clients-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.add-client-fields    { grid-template-columns: 1fr; }
	.recent-clients-grid  { grid-template-columns: 1fr; }
}

/* ── Admin project bar + Add Project form ────────────────────── */
.admin-project-bar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.kzs-portal .btn-add-project {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--kzs-primary);
	color: var(--kzs-white);
	border: none;
	border-radius: var(--kzs-radius);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s;
}

.kzs-portal .btn-add-project:hover,
.kzs-portal .btn-add-project:focus {
	background: var(--kzs-primary-dark) !important;
	color: var(--kzs-white) !important;
	box-shadow: none !important;
}

.add-project-panel {
	background: var(--kzs-bg);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	padding: 20px 24px;
	margin-bottom: 24px;
}

.add-project-panel-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--kzs-text);
	margin-bottom: 16px !important;
}

.add-project-fields {
	display: grid;
	grid-template-columns: 2fr 1fr auto 2fr;
	gap: 14px;
	margin-bottom: 16px;
}

.add-project-field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--kzs-text-muted);
	margin-bottom: 6px;
}

.add-project-field input,
.add-project-field select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius-sm);
	font-size: 14px;
	background: var(--kzs-white);
	color: var(--kzs-text);
}

.add-project-footer {
	display: flex;
	align-items: center;
	gap: 12px;
}

.add-project-error {
	font-size: 13px;
	color: #dc2626;
	margin: 0;
}

.add-project-field--colour input[type="color"] {
	width: 48px;
	height: 36px;
	padding: 2px 3px;
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius-sm);
	background: var(--kzs-white);
	cursor: pointer;
}

@media (max-width: 700px) {
	.add-project-fields { grid-template-columns: 1fr 1fr; }
	.add-project-field--name,
	.add-project-field--desc { grid-column: span 2; }
}

/* ── Add Page form — vertical layout variant ──────────────────── */
.add-page-fields--vertical {
	flex-direction: column;
	align-items: stretch;
}

.add-page-fields--vertical .add-page-field input,
.add-page-fields--vertical .add-page-field select {
	width: 100% !important;
}

/* ── Add Page (tabs bar button + inline form) ─────────────────── */
.page-tabs-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.kzs-portal .btn-add-page {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex-shrink: 0;
	padding: 5px 14px;
	background: var(--kzs-primary);
	color: var(--kzs-white);
	border: none;
	border-radius: var(--kzs-radius);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s;
}

.kzs-portal .btn-add-page:hover,
.kzs-portal .btn-add-page:focus {
	background: var(--kzs-primary-dark) !important;
	color: var(--kzs-white) !important;
}

.add-page-panel {
	background: var(--kzs-bg);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	padding: 16px 20px;
	margin-bottom: 16px;
}

.add-page-fields {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.add-page-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.add-page-field label {
	font-size: 12px;
	font-weight: 500;
	color: var(--kzs-text-muted);
}

.add-page-field input {
	padding: 7px 12px;
	height: 36px;
	box-sizing: border-box;
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius-sm);
	font-size: 14px;
	background: var(--kzs-white);
	color: var(--kzs-text);
}

.add-page-field:first-child input { width: 260px; }
.add-page-field--order input      { width: 80px; }

.add-page-field--assignee select {
	padding: 7px 12px !important;
	border: 1px solid var(--kzs-border) !important;
	border-radius: var(--kzs-radius-sm) !important;
	background: var(--kzs-white) !important;
	color: var(--kzs-text) !important;
	font-size: 14px !important;
	height: 36px;
	width: 150px;
	box-sizing: border-box;
}

.add-page-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 1px;
}

.add-page-error {
	font-size: 13px;
	color: #dc2626;
	margin: 0;
}

/* ── Status Badges ────────────────────────────────────────────── */
.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
	white-space: nowrap;
}

.status-badge.active    { background: var(--status-active-bg);  color: var(--status-active-text); }
.status-badge.on-hold   { background: var(--status-hold-bg);    color: var(--status-hold-text);   }
.status-badge.completed { background: var(--status-done-bg);    color: var(--status-done-text);   }
.status-badge.complete  { background: var(--status-done-bg);    color: var(--status-done-text);   }
.status-badge.draft          { background: var(--status-draft-bg);      color: var(--status-draft-text);     }
.status-badge.quoted         { background: var(--status-quoted-bg);     color: var(--status-quoted-text);    }
.status-badge.quote-request  { background: var(--status-quote-req-bg);  color: var(--status-quote-req-text); }

/* ── Reports View (Data Studio embed) ────────────────────────────── */
.reports-view {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.reports-toolbar {
	display: flex;
	justify-content: flex-end;
}

.report-url-editor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	justify-content: flex-end;
}

.kzs-portal .report-url-input {
	flex: 1;
	min-width: 280px;
	padding: 8px 12px;
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius-sm);
	font-size: 14px;
	font-family: inherit;
}

.report-url-error {
	width: 100%;
	text-align: right;
	font-size: 13px;
	color: #dc2626;
	margin: 0;
}

.reports-iframe-wrap {
	width: 100%;
	height: 900px;
	border-radius: var(--kzs-radius);
	overflow: hidden;
	border: 1px solid var(--kzs-border);
}

.reports-iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* ── Empty States ─────────────────────────────────────────────── */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--kzs-text-muted);
}

.empty-state .empty-icon {
	font-size: 40px;
	margin-bottom: 16px;
}

.empty-state h3 {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--kzs-text);
}

.empty-state p { margin: 0; font-size: 14px; }

/* ── Loading / Spinner ────────────────────────────────────────── */
.loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 60px 20px;
	color: var(--kzs-text-muted);
	font-size: 14px;
}

.spinner {
	width: 24px;
	height: 24px;
	border: 3px solid var(--kzs-border);
	border-top-color: var(--kzs-primary);
	border-radius: 50%;
	animation: kzs-spin .7s linear infinite;
}

@keyframes kzs-spin { to { transform: rotate(360deg); } }

/* =================================================================
   DASHBOARD VIEW — Project Cards
   ================================================================= */

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
}

.project-card {
	background: var(--kzs-white);
	border: 1px solid var(--kzs-border);
	border-left: 4px solid var(--kzs-primary);
	border-radius: var(--kzs-radius);
	padding: 20px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow .2s, transform .2s;
}

.project-card:hover {
	box-shadow: var(--kzs-shadow-md);
	transform: translateY(-2px);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.card-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--kzs-text);
	line-height: 1.3;
	flex: 1;
	min-width: 0;
}

.kzs-portal .btn-delete-project {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	color: var(--kzs-text-muted);
	border: 1px solid transparent;
	border-radius: var(--kzs-radius-sm);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	opacity: 0;
	transition: all .15s;
}

.project-card:hover .btn-delete-project {
	opacity: 1;
}

.kzs-portal .btn-delete-project:hover {
	background: #fee2e2 !important;
	color: #dc2626 !important;
	border-color: #fca5a5 !important;
}

.card-description {
	margin: 0;
	font-size: 13px;
	color: var(--kzs-text-muted);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--kzs-border);
	font-size: 12px;
	color: var(--kzs-text-muted);
	gap: 8px;
}

/* ── Assignee — project card + task panel ─────────────────────── */
.card-assignee,
.task-assignee-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--kzs-text-muted);
}

.card-assignee {
	padding-top: 10px;
	margin-top: 4px;
}

.task-assignee-row {
	padding: 10px 0 16px;
	border-bottom: 1px solid var(--kzs-border);
	margin-bottom: 24px;
}

.assignee-label {
	font-weight: 600;
	color: var(--kzs-text-muted);
	white-space: nowrap;
}

.kzs-portal .assignee-select {
	border: 1px solid var(--kzs-border) !important;
	border-radius: var(--kzs-radius-sm) !important;
	padding: 3px 8px !important;
	font-size: 12px !important;
	color: var(--kzs-text) !important;
	background: var(--kzs-bg) !important;
	cursor: pointer;
}

.assignee-badge {
	font-size: 12px;
	color: var(--kzs-text);
	font-weight: 500;
}

/* =================================================================
   PROJECT VIEW — Vertical Task Tabs
   ================================================================= */

.project-view-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 0;
	min-height: 500px;
	align-items: start;
}

/* Left column */
.task-sidebar {
	border-right: 1px solid var(--kzs-border);
	padding-right: 0;
	min-width: 0;
}

.task-sidebar-header {
	padding: 0 16px 12px;
	border-bottom: 1px solid var(--kzs-border);
	margin-bottom: 4px;
}

.task-sidebar-header .btn-add-page {
	width: 100%;
}

.task-tab-list {
	padding: 4px 0;
}

/* Right column */
.task-content-area {
	padding-left: 28px;
	min-width: 0;
}

/* Vertical tab buttons */
html body .kzs-portal .page-tab {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 10px 16px !important;
	border: none !important;
	border-left: 3px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--kzs-text-muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-align: left !important;
	white-space: normal !important;
	word-break: break-word !important;
	transition: color .15s, background .15s, border-color .15s;
}

html body .kzs-portal .page-tab:hover,
html body .kzs-portal .page-tab:focus {
	background: var(--kzs-bg) !important;
	color: var(--kzs-text) !important;
	border-left-color: var(--kzs-border) !important;
}

html body .kzs-portal .page-tab.active,
html body .kzs-portal .page-tab.active:hover,
html body .kzs-portal .page-tab.active:focus {
	color: var(--kzs-primary) !important;
	background: var(--kzs-primary-light) !important;
	border-left-color: var(--kzs-primary) !important;
	box-shadow: none !important;
}

/* ── Tab rename / delete icons ────────────────────────────────── */
.tab-title { pointer-events: none; }

.tab-actions {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 6px;
	opacity: 0;
	transition: opacity .15s;
}

html body .kzs-portal .page-tab.active:hover .tab-actions {
	opacity: 1;
}

.tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background .12s, color .12s;
	color: var(--kzs-text-muted);
}

.tab-rename:hover       { background: var(--kzs-primary-light); color: var(--kzs-primary); }
.tab-delete:hover       { background: #fee2e2; color: #dc2626; }
.tab-rename-confirm     { color: #16a34a; font-size: 14px; }
.tab-rename-confirm:hover { background: #dcfce7; color: #16a34a; }
.tab-rename-cancel      { color: var(--kzs-text-muted); }
.tab-rename-cancel:hover { background: #f3f4f6; color: var(--kzs-text); }

.tab-rename-input-wrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.tab-rename-input {
	border: 1px solid var(--kzs-primary) !important;
	border-radius: var(--kzs-radius-sm) !important;
	padding: 2px 7px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--kzs-text) !important;
	background: #fff !important;
	outline: none !important;
	width: 140px;
	box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
}

/* ── Task Info Bar ────────────────────────────────────────────── */
.task-info-bar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding-bottom: 16px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--kzs-border);
}

.task-info-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--kzs-text);
	margin: 0;
}

.task-info-meta {
	display: flex;
	align-items: center;
	gap: 20px;
}

.task-info-field {
	display: flex;
	align-items: center;
	gap: 7px;
}

.task-info-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--kzs-text-muted);
	white-space: nowrap;
}

.task-info-assignee-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--kzs-text);
}

/* Status + assignee selects in the info bar */
html body .kzs-portal .task-info-select {
	padding: 4px 10px !important;
	border-radius: 999px !important;
	border: 1px solid var(--kzs-border) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	background: var(--kzs-bg) !important;
	color: var(--kzs-text) !important;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

html body .kzs-portal .task-info-select:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
	border-color: var(--kzs-primary) !important;
}

html body .kzs-portal .task-info-select:disabled {
	cursor: default;
	opacity: 1;
}

/* Status colour variants */
html body .kzs-portal .task-info-select--status.tis--pending {
	background: var(--status-draft-bg) !important;
	color: var(--status-draft-text) !important;
	border-color: transparent !important;
}

html body .kzs-portal .task-info-select--status.tis--in_progress {
	background: var(--status-hold-bg) !important;
	color: var(--status-hold-text) !important;
	border-color: transparent !important;
}

html body .kzs-portal .task-info-select--status.tis--complete {
	background: var(--status-active-bg) !important;
	color: var(--status-active-text) !important;
	border-color: transparent !important;
}

html body .kzs-portal .task-info-select--status.tis--waiting_on_client {
	background: var(--status-quote-req-bg) !important;
	color: var(--status-quote-req-text) !important;
	border-color: transparent !important;
}

/* Due date input in task info bar */
.task-info-date {
	font-family: inherit;
	font-size: 13px;
}

html body .kzs-portal .task-info-date.tis--overdue {
	background: #fef2f2 !important;
	color: #dc2626 !important;
	border-color: #fca5a5 !important;
}

/* Completed tasks section below task tabs */
.completed-task-section {
	margin-top: 8px;
	border-top: 1px solid rgba(255,255,255,.1);
	padding-top: 8px;
}

.completed-task-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	background: none;
	border: none;
	padding: 8px 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: rgba(255,255,255,.5);
	cursor: pointer;
}

.completed-task-toggle:hover { color: rgba(255,255,255,.8); }

.page-tab--completed { opacity: .65; }
.page-tab--completed.active { opacity: 1; }

/* Completed Today modal row */
.task-modal-row--completed .task-modal-name {
	color: #6b7280;
	text-decoration: line-through;
}

/* ── Page Content Grid ────────────────────────────────────────── */
.page-content { animation: kzs-fadeIn .15s ease; }

@keyframes kzs-fadeIn { from { opacity: 0; } to { opacity: 1; } }

.page-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-bottom: 40px;
}

.section-title {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--kzs-text-muted);
}

/* ── Files Section ────────────────────────────────────────────── */
.files-section {
	display: flex;
	flex-direction: column;
}

.file-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.file-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--kzs-bg);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius-sm);
	transition: background .15s;
}

.file-item:hover { background: #eff6ff; }

.file-icon { font-size: 16px; flex-shrink: 0; }

.file-name {
	flex: 1;
	font-size: 13px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kzs-portal .btn-download {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: var(--kzs-white);
	color: var(--kzs-primary);
	border: 1px solid var(--kzs-primary);
	border-radius: var(--kzs-radius-sm);
	font-size: 12px;
	font-family: inherit;
	cursor: pointer;
	transition: all .15s;
	flex-shrink: 0;
}

.kzs-portal .btn-download:hover {
	background: var(--kzs-primary);
	color: var(--kzs-white);
}

.kzs-portal .btn-delete-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	color: var(--kzs-text-muted);
	border: 1px solid transparent;
	border-radius: var(--kzs-radius-sm);
	font-size: 16px;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
	flex-shrink: 0;
	transition: all .15s;
	opacity: 0;
}

.file-item:hover .btn-delete-item,
.note-item:hover .btn-delete-note {
	opacity: 1;
}

.kzs-portal .btn-delete-item:hover {
	background: #fee2e2;
	color: #dc2626;
	border-color: #fca5a5;
}

.kzs-portal .btn-delete-item:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.empty-files {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--kzs-text-muted);
}

/* ── Upload Area ──────────────────────────────────────────────── */
.upload-area {
	border: 2px dashed var(--kzs-border);
	border-radius: var(--kzs-radius);
	padding: 24px 16px;
	text-align: center;
	cursor: pointer;
	background: var(--kzs-bg);
	transition: border-color .15s, background .15s;
	margin-top: auto;
}

.upload-area:hover,
.upload-area.drag-over {
	border-color: var(--kzs-primary);
	background: #eff6ff;
}

.upload-area.uploading {
	cursor: default;
	pointer-events: none;
	opacity: .7;
}

.upload-prompt { pointer-events: none; }

.upload-icon {
	display: block;
	font-size: 28px;
	margin-bottom: 8px;
}

.upload-prompt p {
	margin: 0;
	font-size: 13px;
	color: var(--kzs-text-muted);
}

.upload-prompt strong { color: var(--kzs-primary); }

.upload-progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.upload-progress p {
	margin: 0;
	font-size: 13px;
	color: var(--kzs-text-muted);
}

/* ── Notes Section ────────────────────────────────────────────── */
.notes-section {
	display: flex;
	flex-direction: column;
}

.notes-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.empty-notes {
	color: var(--kzs-text-muted);
	font-size: 13px;
	margin: 0;
}

.note-item {
	background: var(--kzs-bg);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	padding: 12px 14px;
}

.note-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 6px;
}

.note-meta .btn-delete-note {
	margin-left: auto;
}

.note-author {
	font-size: 13px;
	font-weight: 600;
	color: var(--kzs-text);
}

.note-date {
	font-size: 11px;
	color: var(--kzs-text-muted);
}

.note-content {
	margin: 0;
	font-size: 14px;
	color: var(--kzs-text);
	white-space: pre-wrap;
	word-break: break-word;
}

.note-composer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.note-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	font-family: inherit;
	font-size: 14px;
	color: var(--kzs-text);
	resize: vertical;
	min-height: 120px;
	transition: border-color .15s, box-shadow .15s;
}

.note-input:focus {
	outline: none;
	border-color: var(--kzs-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.note-hint {
	margin: 0;
	font-size: 11px;
	color: var(--kzs-text-muted);
}

.kzs-portal .btn-submit-note {
	align-self: flex-end;
	padding: 8px 20px;
	background: var(--kzs-primary);
	color: var(--kzs-white);
	border: none;
	border-radius: var(--kzs-radius);
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s;
}

.kzs-portal .btn-submit-note:hover    { background: var(--kzs-primary-dark); color: var(--kzs-white); }
.kzs-portal .btn-submit-note:disabled { opacity: .5; cursor: not-allowed; }

/* =================================================================
   UPDATES TIMELINE
   ================================================================= */

.updates-section {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--kzs-border);
}

.updates-section-title {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 600;
	color: var(--kzs-text);
}

/* Admin: post update composer */
.update-composer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 32px;
	padding: 16px;
	background: var(--kzs-bg);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
}

.update-composer-title {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--kzs-text-muted);
}

.update-title-input,
.update-content-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius-sm);
	font-family: inherit;
	font-size: 14px;
	color: var(--kzs-text);
	transition: border-color .15s;
}

.update-title-input:focus,
.update-content-input:focus {
	outline: none;
	border-color: var(--kzs-primary);
}

.update-content-input {
	resize: vertical;
	min-height: 80px;
}

.update-composer-actions {
	display: flex;
	justify-content: flex-end;
}

/* Timeline */
.timeline {
	position: relative;
	padding-left: 28px;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--kzs-border);
}

.timeline-item {
	position: relative;
	padding-bottom: 20px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
	position: absolute;
	left: -25px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--kzs-primary);
	border: 2px solid var(--kzs-white);
	box-shadow: 0 0 0 2px var(--kzs-primary);
}

.timeline-body {
	background: var(--kzs-white);
	border: 1px solid var(--kzs-border);
	border-radius: var(--kzs-radius);
	padding: 14px 16px;
}

.timeline-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 8px;
}

.timeline-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--kzs-text);
}

.timeline-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex-shrink: 0;
	font-size: 12px;
	color: var(--kzs-text-muted);
}

.timeline-date { font-size: 11px; }

.timeline-content {
	font-size: 14px;
	color: var(--kzs-text);
	line-height: 1.6;
}

.timeline-content p { margin: 0 0 8px; }
.timeline-content p:last-child { margin-bottom: 0; }

.no-updates-msg {
	margin: 0;
	font-size: 14px;
	color: var(--kzs-text-muted);
	padding: 8px 0;
}

/* ── Scrollbars ───────────────────────────────────────────────── */
.kzs-portal ::-webkit-scrollbar        { width: 6px; height: 6px; }
.kzs-portal ::-webkit-scrollbar-track  { background: var(--kzs-bg); border-radius: 3px; }
.kzs-portal ::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 3px; }
.kzs-portal ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
	.page-content-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 768px) {
	.kzs-portal { padding: 16px 12px; }

	.portal-header {
		flex-direction: column;
		gap: 16px;
	}

	.portal-title  { font-size: 20px; }

	.portal-header-right {
		width: 100%;
		justify-content: flex-start;
	}

	.client-search-wrapper { min-width: 100%; }

	.projects-grid { grid-template-columns: 1fr; }

	.page-tab { padding: 8px 14px; font-size: 13px; }

	.timeline-header { flex-direction: column; gap: 6px; }
	.timeline-meta   { align-items: flex-start; }
}