/* Upwork Cockpit — dashboard styles */

:root {
	--uc-bg: #0d1117;
	--uc-bg-soft: #161b22;
	--uc-bg-softer: #1c2330;
	--uc-border: #2d3645;
	--uc-text: #e6edf3;
	--uc-text-dim: #8b96a5;
	--uc-green: #3fb950;
	--uc-green-soft: rgba(63, 185, 80, 0.15);
	--uc-accent: #14a800;
	--uc-accent-hover: #16bf00;
	--uc-amber: #d29922;
	--uc-red: #f85149;
	--uc-radius: 10px;
	--uc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body.uc-body {
	margin: 0;
	padding: 0;
	background: var(--uc-bg);
	color: var(--uc-text);
	font-family: var(--uc-font);
	font-size: 15px;
	line-height: 1.5;
}

.uc-app {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 20px 64px;
}

.uc-hidden { display: none !important; }
.uc-muted { color: var(--uc-text-dim); font-size: 13px; }

/* Header */
.uc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.uc-header-left { display: flex; align-items: center; gap: 12px; }
.uc-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	background: var(--uc-accent);
	color: #fff;
	border-radius: 10px;
	font-size: 18px;
}
.uc-header h1 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.3px; }
.uc-header-right { display: flex; align-items: center; gap: 12px; }

/* Badges */
.uc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.uc-badge-muted { background: var(--uc-bg-softer); color: var(--uc-text-dim); }
.uc-badge-green { background: var(--uc-green-soft); color: var(--uc-green); }
.uc-badge-red { background: rgba(248, 81, 73, 0.15); color: var(--uc-red); }
.uc-badge-amber { background: rgba(210, 153, 34, 0.15); color: var(--uc-amber); }

/* Buttons */
.uc-btn {
	border: 1px solid var(--uc-border);
	background: var(--uc-bg-soft);
	color: var(--uc-text);
	padding: 9px 18px;
	border-radius: var(--uc-radius);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	font-family: var(--uc-font);
}
.uc-btn:hover { background: var(--uc-bg-softer); }
.uc-btn-primary {
	background: var(--uc-accent);
	border-color: var(--uc-accent);
	color: #fff;
}
.uc-btn-primary:hover { background: var(--uc-accent-hover); }
.uc-btn-ghost { background: transparent; }
.uc-btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 8px; }
.uc-result-tools { display: inline-flex; align-items: center; gap: 10px; }
.uc-btn:disabled { opacity: 0.5; cursor: default; }

/* Controls */
.uc-controls { margin-bottom: 16px; }
.uc-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.uc-chip-label { font-size: 11px; font-weight: 700; color: var(--uc-text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px; }
.uc-chip {
	border: 1px solid var(--uc-border);
	background: var(--uc-bg-soft);
	color: var(--uc-text-dim);
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
	font-family: var(--uc-font);
}
.uc-chip:hover { color: var(--uc-text); border-color: var(--uc-accent); background: var(--uc-bg-softer); }
.uc-search-row { display: flex; gap: 10px; margin-bottom: 12px; }
.uc-search-wrap { position: relative; flex: 1; }
.uc-search-icon {
	position: absolute;
	left: 14px; top: 50%;
	transform: translateY(-50%);
	width: 18px; height: 18px;
	color: var(--uc-text-dim);
	pointer-events: none;
}
#uc-search {
	width: 100%;
	padding: 11px 14px 11px 44px;
	background: var(--uc-bg-soft);
	border: 1px solid var(--uc-border);
	border-radius: var(--uc-radius);
	color: var(--uc-text);
	font-size: 15px;
	font-family: var(--uc-font);
	outline: none;
	transition: border-color 0.15s;
}
#uc-search:focus { border-color: var(--uc-accent); }
#uc-search::placeholder { color: var(--uc-text-dim); }

.uc-filter-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: flex-end;
}
.uc-filter { display: flex; flex-direction: column; gap: 4px; }
.uc-filter-grow { flex: 1; align-items: flex-end; }
.uc-filter label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--uc-text-dim);
}
.uc-filter select,
.uc-filter input {
	background: var(--uc-bg-soft);
	border: 1px solid var(--uc-border);
	border-radius: 8px;
	color: var(--uc-text);
	padding: 7px 10px;
	font-size: 13px;
	font-family: var(--uc-font);
	outline: none;
	min-width: 110px;
}
.uc-filter input { width: 110px; }
.uc-filter select:focus,
.uc-filter input:focus { border-color: var(--uc-accent); }

/* Notice */
.uc-notice {
	background: rgba(210, 153, 34, 0.1);
	border: 1px solid rgba(210, 153, 34, 0.4);
	color: var(--uc-amber);
	border-radius: var(--uc-radius);
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
	word-break: break-word;
}
.uc-notice.uc-notice-error {
	background: rgba(248, 81, 73, 0.08);
	border-color: rgba(248, 81, 73, 0.4);
	color: var(--uc-red);
}
.uc-notice a { color: inherit; }

/* Table */
.uc-table-wrap {
	border: 1px solid var(--uc-border);
	border-radius: var(--uc-radius);
	overflow: hidden;
	background: var(--uc-bg-soft);
}
.uc-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.uc-table thead th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--uc-text-dim);
	padding: 12px 14px;
	border-bottom: 1px solid var(--uc-border);
	background: var(--uc-bg-softer);
}
.uc-col-posted { width: 110px; }
.uc-col-budget { width: 170px; }
.uc-col-client { width: 190px; }
.uc-col-open { width: 60px; }

.uc-row {
	cursor: pointer;
	transition: background 0.12s;
}
.uc-row:hover { background: var(--uc-bg-softer); }
.uc-row td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--uc-border);
	vertical-align: top;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.uc-row.uc-open-row { background: var(--uc-bg-softer); }
.uc-row.uc-open-row td { border-bottom: none; }

.uc-posted { color: var(--uc-text-dim); font-size: 13px; white-space: nowrap; }
.uc-posted.uc-fresh { color: var(--uc-green); font-weight: 600; }

.uc-job-title { font-weight: 600; color: var(--uc-text); }
.uc-job-sub { font-size: 12px; color: var(--uc-text-dim); margin-top: 2px; }

.uc-budget-main { font-weight: 600; white-space: nowrap; }
.uc-budget-sub { font-size: 12px; color: var(--uc-text-dim); }

.uc-client-cell { font-size: 13px; }
.uc-client-line { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.uc-stars { color: var(--uc-amber); letter-spacing: 1px; font-size: 12px; }
.uc-check { color: var(--uc-green); font-weight: 700; }
.uc-cross { color: var(--uc-text-dim); }

.uc-open-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 8px;
	border: 1px solid var(--uc-border);
	color: var(--uc-text-dim);
	text-decoration: none;
	transition: all 0.12s;
}
.uc-open-link:hover {
	border-color: var(--uc-accent);
	color: var(--uc-accent);
}

/* Detail row */
.uc-detail-row td {
	padding: 0 14px 18px;
	border-bottom: 1px solid var(--uc-border);
	background: var(--uc-bg-softer);
}
.uc-detail {
	border-top: 1px dashed var(--uc-border);
	padding-top: 14px;
}
.uc-detail-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.uc-detail-desc {
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--uc-text);
	font-size: 14px;
	line-height: 1.65;
	max-height: 420px;
	overflow-y: auto;
	background: var(--uc-bg);
	border: 1px solid var(--uc-border);
	border-radius: 8px;
	padding: 14px 16px;
}
.uc-detail-actions { margin-top: 14px; display: flex; gap: 10px; }
.uc-apply-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--uc-accent);
	color: #fff;
	border: none;
	padding: 10px 22px;
	border-radius: var(--uc-radius);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s;
}
.uc-apply-btn:hover { background: var(--uc-accent-hover); }

.uc-empty {
	text-align: center;
	color: var(--uc-text-dim);
	padding: 48px 20px !important;
	font-size: 14px;
}

/* Footer */
.uc-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
}

/* Fallback pages */
.uc-fallback { max-width: 760px; margin: 48px auto; padding: 0 20px; }
.uc-fallback a { color: var(--uc-accent); }

/* Responsive */
@media (max-width: 820px) {
	.uc-col-client, .uc-client-cell { display: none; }
	.uc-col-budget { width: 120px; }
	.uc-filter-row { gap: 8px; }
}
@media (max-width: 560px) {
	.uc-col-posted { width: 70px; }
	.uc-col-open { width: 44px; }
	.uc-search-row { flex-wrap: wrap; }
}