:root {
	--main-bg-color: #111;
	--form-back-color: #111;
	--form-fore-color: #fff;
	--tab-back-color: #444;
	--tab-back-color-active: #111;
	--tab-fore-color: #fff;
	--tab-hover-background-color: #333;
	--tab-hover-color: #fff;
	--input-back-color: #111;
	--input--fore-color: #fff;
	--card-back-color: #111;
	--card--fore-color: #fff;
	--menu-hover-background-color: #333;
	--menu-background-color: #111;
	--border-color-primary: silver;
	--border-color-primary-hover: #1976d2;
	--border-color-input: #1976d2;
	--selected-background-color: #333;
	--box-shadow-color: #333;
	--fore-color: #fff;
	--fore-color-secondary: #aaa;
	--button-back-color: #333;
	--active-section-color: #66f;

	--button-primary-hover-back-color: #1565c0;
	--button-primary-back-color: #1976d2;
	--button-primary-fore-color: #f8f8f8;

	--warning-color: #ff0000;
	--highlight-color: #48abe0;
	--modal-back-color: rgba(100, 100, 100, 0.8);
	--progress-back-color: #559900;
	--logo-color: #2c5aa0;
}

@font-face {
	font-family: "Linux Libertine O Regular";
	font-style: normal;
	font-weight: normal;
	src:
		local("Linux Libertine O Regular"),
		url("https://media.peopoli.com/assets/fonts/LinLibertine_R.woff")
			format("woff");
}

@font-face {
	font-family: "Linux Libertine O Bold";
	font-style: normal;
	font-weight: normal;
	src:
		local("Linux Libertine O Bold"),
		url("https://media.peopoli.com/assets/fonts/LinLibertine_RB.woff")
			format("woff");
}

@font-face {
	font-family: "Smooch Sans";
	font-style: normal;
	font-weight: normal;
	src:
		local("Smooch Sans"),
		url("https://media.peopoli.com/assets/fonts/SmoochSans.woff")
			format("woff");
}

.logo_lg {
	font-size: 12em;
	font-family: "Linux Libertine Initials O";
	color: var(--logo-color);
	vertical-align: middle;
}

.headerLogo_mini {
	font-family: "Linux Libertine Initials O";
	font-size: 4em;
	line-height: 1em;
	color: var(--logo-color);
	text-decoration: none;
}
img.headerLogo_mini {
	height: 56px;
	width: auto;
}
.headerLogo_mini:hover {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a {
	cursor: pointer;
}

/* mini.css checkbox/radio fix */
input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	width: 1.2rem;
	height: 1.2rem;
	flex-basis: auto;
}

input[type="checkbox"]:checked:before,
input[type="radio"]:checked:before {
	content: none;
}

/* gadget-ui menu overrides */
div.gadget-ui-menu {
	display: inline-block !important;
}

.gadget-ui-menu-menuItem {
	display: none !important;
	background: var(--menu-background-color);
	border-radius: 1em;
	padding: 1em;
	z-index: 2;
}

.gadget-ui-menu-hovering {
	display: block !important;
	position: absolute !important;
}

.gadget-ui-menu-menuItem > div {
	padding-top: 0.5em;
	display: block !important;
}

.gadget-ui-menu-item:hover {
	background: var(--menu-hover-background-color);
}

div.gadget-ui-menu,
div.gadget-ui-menu-menuItem {
	right: 10px;
	padding: 5px 10px 0 0;
}

img.gadget-ui-menu-icon {
	margin-right: 0;
}

/* Header */
.header {
	height: 4em;
	display: flex;
	align-items: center;
	padding: 0 0.5rem;
}

.header .welcome-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	align-self: baseline;
}

.headerLeft {
	display: flex;
	align-items: center;
}

.headerCenter {
	display: flex;
	justify-content: center;
	align-items: center;
}

.headerRight {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	position: absolute;
	top: 2px;
	right: 0;
}

/* Form base styles */
form {
	border: 2px dotted var(--form-border-color);
}

/* Back button */
.back-btn {
	background: transparent;
	border: none;
	color: var(--fore-color);
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	align-items: center;
}

/* Buttons */
.btn-primary {
	background: var(--button-primary-back-color);
	color: var(--button-primary-fore-color);
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	cursor: pointer;
}
.btn-primary:hover {
	background: var(--button-primary-hover-back-color);
}

.btn-danger {
	background: #c33;
	color: #fff;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	cursor: pointer;
}

.btn-secondary {
	background: var(--button-back-color);
	color: var(--fore-color);
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	cursor: pointer;
}

.btn-small {
	padding: 0.25rem 0.5rem;
	font-size: 0.85em;
}

/* Loading and empty states */
.project-loading {
	padding: 2rem;
	text-align: center;
	color: var(--fore-color-secondary);
}

.project-empty {
	padding: 1rem;
	text-align: center;
	color: var(--fore-color-secondary);
}

/* ================================================
   Project List
   ================================================ */
.project-list {
	padding: 1rem;
	max-width: 1200px;
	margin: 0 auto;
}

.project-list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.create-project-form {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	border: none;
}

.create-project-form input {
	flex: 1;
	padding: 0.5rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	background: var(--input-back-color);
	color: var(--fore-color);
}

.create-project-btn {
	background: var(--button-primary-back-color);
	color: var(--button-primary-fore-color);
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.create-project-btn:hover {
	background: var(--button-primary-hover-back-color);
}

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

.project-card {
	background: var(--card-back-color);
	border: 1px solid var(--border-color-primary);
	border-radius: 12px;
	padding: 1rem;
	cursor: pointer;
	transition: border-color 0.2s;
}

.project-card:hover {
	border-color: var(--highlight-color);
}

.project-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.project-name {
	font-size: 1.2em;
	font-weight: 600;
}

.project-description {
	color: var(--fore-color-secondary);
	font-size: 0.9em;
	margin: 0.5rem 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-meta {
	display: flex;
	gap: 1rem;
	color: var(--fore-color-secondary);
	font-size: 0.85em;
}

.archived-badge {
	background: #666;
	color: #fff;
	font-size: 0.7em;
	padding: 2px 8px;
	border-radius: 12px;
}

/* ================================================
   Kanban Board
   ================================================ */
.kanban-board {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 4em);
}

.board-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--border-color-primary);
}

.board-header h2 {
	flex: 1;
	margin: 0;
}

.board-settings-btn {
	background: transparent;
	border: none;
	color: var(--fore-color);
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	align-items: center;
}

.kanban-columns {
	display: flex;
	gap: 1rem;
	padding: 1rem;
	overflow-x: auto;
	flex: 1;
	align-items: flex-start;
}

.kanban-column {
	min-width: 280px;
	max-width: 320px;
	background: var(--tab-back-color);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 8em);
}

.kanban-column-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem;
	font-weight: 600;
	border-bottom: 1px solid var(--border-color-primary);
}

.column-count {
	background: var(--button-back-color);
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
}

.kanban-cards {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.kanban-card {
	background: var(--card-back-color);
	border: 1px solid var(--border-color-primary);
	border-radius: 6px;
	padding: 0.75rem;
	cursor: grab;
	transition: box-shadow 0.2s;
}

.kanban-card:hover {
	box-shadow: 0 2px 8px var(--box-shadow-color);
}

.kanban-card.dragging {
	opacity: 0.5;
}

.kanban-column.drag-over {
	border: 2px dashed var(--highlight-color);
}

.card-title {
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.8em;
}

.card-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 4px;
}

.card-assignee {
	display: flex;
	align-items: center;
	color: var(--fore-color-secondary);
}

.card-priority {
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
}

.priority-low {
	background: #666;
	color: #fff;
}

.priority-high {
	background: #e67e22;
	color: #fff;
}

.priority-urgent {
	background: #e74c3c;
	color: #fff;
}

.card-due {
	color: var(--fore-color-secondary);
}

.add-task-btn {
	background: none;
	border: 1px dashed var(--border-color-primary);
	border-radius: 6px;
	padding: 0.5rem;
	cursor: pointer;
	color: var(--fore-color-secondary);
	width: 100%;
	text-align: center;
}

.add-task-btn:hover {
	border-color: var(--highlight-color);
	color: var(--highlight-color);
}

/* Inline add task form */
.inline-task-form {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.inline-task-form input {
	padding: 0.5rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	background: var(--input-back-color);
	color: var(--fore-color);
}

.inline-task-form .inline-task-actions {
	display: flex;
	gap: 0.25rem;
}

.inline-task-form button {
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	cursor: pointer;
}

/* ================================================
   Task Detail
   ================================================ */
.task-detail {
	padding: 1rem;
	max-width: 800px;
	margin: 0 auto;
}

.task-detail-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.task-detail-header h2 {
	flex: 1;
	margin: 0;
}

.delete-task-btn {
	display: flex;
	align-items: center;
}

.task-fields {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.field-row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.field-row label {
	font-weight: 600;
	font-size: 0.9em;
	color: var(--fore-color-secondary);
}

.field-row input,
.field-row select,
.field-row textarea {
	padding: 0.5rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	background: var(--input-back-color);
	color: var(--fore-color);
}

.field-row textarea {
	min-height: 100px;
	resize: vertical;
}

.task-notes,
.task-attachments {
	margin-top: 1.5rem;
}

.task-notes h3,
.task-attachments h3 {
	margin-bottom: 0.5rem;
}

.note-item {
	background: var(--tab-back-color);
	border-radius: 6px;
	padding: 0.75rem;
	margin-bottom: 0.5rem;
}

.note-meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.8em;
	color: var(--fore-color-secondary);
	margin-bottom: 0.25rem;
}

.add-note-form textarea {
	width: 100%;
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	background: var(--input-back-color);
	color: var(--fore-color);
	min-height: 60px;
}

.attachment-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	background: var(--tab-back-color);
	border-radius: 4px;
	margin-bottom: 0.25rem;
}

.attachment-size {
	color: var(--fore-color-secondary);
	font-size: 0.8em;
}

/* ================================================
   My Tasks
   ================================================ */
.my-tasks {
	padding: 1rem;
	max-width: 800px;
	margin: 0 auto;
}

.my-tasks-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.my-tasks-header h2 {
	margin: 0;
}

.my-tasks-project-group {
	margin-bottom: 1.5rem;
}

.my-tasks-project-name {
	font-size: 1.1em;
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--border-color-primary);
}

.my-task-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--card-back-color);
	border: 1px solid var(--border-color-primary);
	border-radius: 6px;
	margin-bottom: 0.5rem;
	cursor: pointer;
}

.my-task-item:hover {
	border-color: var(--highlight-color);
}

.my-task-title {
	flex: 1;
	font-weight: 500;
}

.my-task-column {
	color: var(--fore-color-secondary);
	font-size: 0.85em;
	background: var(--button-back-color);
	padding: 2px 8px;
	border-radius: 4px;
}

/* ================================================
   Project Settings
   ================================================ */
.project-settings {
	padding: 1rem;
	max-width: 800px;
	margin: 0 auto;
}

.project-settings-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.project-settings-header h2 {
	margin: 0;
}

.settings-section {
	margin-bottom: 2rem;
}

.settings-section h3 {
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--border-color-primary);
	padding-bottom: 0.25rem;
}

.settings-form {
	border: none;
}

.settings-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.member-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
}

.member-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.member-info {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.member-name {
	font-weight: 500;
}

.member-role-badge {
	font-size: 0.75em;
	padding: 2px 8px;
	border-radius: 12px;
	background: var(--button-back-color);
}

.column-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
}

.column-item input {
	flex: 1;
	padding: 0.5rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	background: var(--input-back-color);
	color: var(--fore-color);
}

.add-column-form {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.add-column-form input {
	flex: 1;
	padding: 0.5rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	background: var(--input-back-color);
	color: var(--fore-color);
}

/* TOS modal */
#tosModal,
div[name="idpMessage"] {
	background-color: var(--main-bg-color) !important;
}

.tos-content {
	overflow-y: scroll;
	height: 600px;
}

.footer-links {
	position: fixed;
	bottom: 10px;
	left: 10px;
}

/* ================================================
   Responsive
   ================================================ */
@media screen and (max-width: 768px) {
	html,
	body {
		max-width: 100vw;
		overflow-x: hidden;
	}

	.header {
		max-width: 100vw;
		overflow: hidden;
	}

	.header > [class*="col-"] {
		max-width: none;
		flex-basis: auto;
		padding: 0;
	}

	.row {
		margin: 0;
	}

	.kanban-columns {
		padding: 0.5rem;
		gap: 0.5rem;
	}

	.kanban-column {
		min-width: 260px;
	}

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