* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

body {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
			background: #1e1e1e;
			min-height: 100vh;
			padding: 20px;
			color: #e5e5e5;
		}

		.container {
			max-width: 900px;
			margin: 0 auto;
			background: white;
			border-radius: 8px 8px 4px 4px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			padding: 40px;
		}

		h1 {
			color: white;
			margin-bottom: 30px;
			text-align: center;
			font-size: 2rem;
			font-weight: 300;
			letter-spacing: -0.5px;
			background: #223a89;
			padding: 20px;
			border-radius: 4px 4px 0 0;
			margin: -40px -40px 30px -40px;
		}

		.form-group {
			margin-bottom: 20px;
		}

		label {
			display: block;
			margin-bottom: 6px;
			color: #333;
			font-weight: 500;
			font-size: 0.875rem;
		}

		input[type="text"],
		input[type="date"],
		input[type="number"],
		select {
			width: 100%;
			padding: 10px 12px;
			border: 1px solid #d1d5db;
			border-radius: 4px;
			font-size: 16px;
			transition: all 0.2s ease;
			background: white;
		}

		/* Hide number input spinners */
		input[type="number"]::-webkit-inner-spin-button,
		input[type="number"]::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		
		input[type="number"] {
			-moz-appearance: textfield;
		}

		input[type="text"].error,
		input[type="date"].error,
		input[type="number"].error {
			border-color: #dc2626;
			box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
		}

		input[type="text"]:focus,
		input[type="date"]:focus,
		input[type="number"]:focus,
		select:focus {
			outline: none;
			border-color: #2563eb;
			box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
		}

		.entry-form {
			background: #fafafa;
			padding: 24px;
			border-radius: 6px;
			margin-bottom: 30px;
			border: 1px solid #e5e5e5;
		}

		.entry-row {
			display: grid;
			grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
			gap: 15px;
			margin-bottom: 20px;
			align-items: end;
		}

		.btn {
			padding: 10px 20px;
			border: none;
			border-radius: 4px;
			font-size: 14px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		.btn-primary {
			background: #2563eb;
			color: white;
		}

		.btn-primary:hover {
			background: #1d4ed8;
		}

		.btn-secondary {
			background: #f3f4f6;
			color: #374151;
			border: 1px solid #d1d5db;
		}

		.btn-secondary:hover {
			background: #e5e7eb;
		}

		.btn-danger {
			background: #b91c1c;
			color: white;
		}

		.btn-danger:hover {
			background: #991b1b;
		}

		.entries-list {
			margin-top: 30px;
		}

		.entry-item.new-entry {
			background: #dcfce7 !important;
			border-color: #bbf7d0 !important;
			transition: all 3s ease;
		}
		
		/* Purple highlight when moving entry */
		.entry-item.moved-entry {
			background: #dbc8fc !important;
			border-color: #c084fc !important;
			box-shadow: 0 0 8px rgba(147, 51, 234, 0.3) !important;
			transition: all 3s ease;
		}
		
		/* Red highlight when cancelling move */
		.entry-item.cancelled-entry {
			background: #fbf9c4 !important;
			border-color: #eddd7b !important;
			box-shadow: 0 0 8px rgba(242, 238, 156, 0.3) !important;
			transition: all 3s ease;
		}
		
		.entry-item {
			background: white;
			padding: 8px 16px;
			border-radius: 4px;
			margin-bottom: 4px;
			border: 1px solid #e5e7eb;
			transition: all 0.2s ease;
		}

		.entry-item:hover {
			border-color: #d1d5db;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
		}

		/* Blue highlight when editing entry */
		.entry-item.editing {
			background: #eff6ff;
			border-color: #2563eb;
			box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
		}
		
		/* Red shrinking animation for deleted entry */
		.entry-item.deleting {
			background: #fee2e2 !important;
			border-color: #dc2626 !important;
			color: #dc2626 !important;
			transition: all 0.3s ease;
		}
		
		.entry-item.shrinking {
			transform: scaleY(0);
			opacity: 0;
			margin-top: 0;
			margin-bottom: 0;
			padding-top: 0;
			padding-bottom: 0;
			height: 0;
			overflow: hidden;
			transition: all 0.4s ease;
		}

		.entry-item.editing:hover {
			background: #eff6ff;
			border-color: #2563eb;
		}

		.entry-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.entry-info {
			flex: 1;
			font-size: 0.85rem;
			line-height: 1.4;
		}

		.entry-bold {
			font-weight: 600;
			color: #1f2937;
		}

		.entry-plain {
			font-weight: 400;
			color: #374151;
		}

		.entry-grey {
			font-weight: 400;
			color: #6b7280;
		}

		.entry-actions {
			display: flex;
			gap: 10px;
			margin-left: 20px;
		}

		.total-section {
			background: #1e293b;
			color: white;
			padding: 20px;
			border-radius: 4px;
			margin-top: 30px;
			text-align: center;
		}

		.total-section h2 {
			font-size: 1rem;
			margin-bottom: 8px;
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.total-amount {
			font-size: 2rem;
			font-weight: 600;
		}

		.actions {
			display: flex;
			gap: 15px;
			justify-content: center;
			margin-top: 30px;
		}

		.btn-icon {
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}

		.btn-sm {
			padding: 6px 12px;
			font-size: 0.8125rem;
			height: 32px;
		}

		.entry-actions {
			display: flex;
			gap: 10px;
			align-items: center;
		}

		.action-dropdown {
			position: relative;
		}

		.action-select {
			padding: 6px 12px;
			font-size: 0.8125rem;
			border: 1px solid #d1d5db;
			border-radius: 4px;
			background: #f3f4f6;
			color: #374151;
			cursor: pointer;
			min-width: 140px;
			max-width: 140px;
			width: 140px;
			height: 32px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.action-select:hover {
			background: #e5e7eb;
		}

		.from-field-container {
			position: relative;
		}

		.swap-btn {
			position: absolute;
			right: 8px;
			top: 26px;
			background: #f8f9fa;
			border: 1px solid #d1d5db;
			border-radius: 6px;
			padding: 8px 10px;
			cursor: pointer;
			font-size: 16px;
			color: #6b7280;
			transition: all 0.2s ease;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			min-width: 36px;
			height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.swap-btn:hover {
			background: #e5e7eb;
			border-color: #9ca3af;
			color: #374151;
			transform: translateY(-1px);
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
		
		.entry-item {
			background: white;
			padding: 8px 16px;
			border-radius: 4px;
			margin-bottom: 4px;
			border: 1px solid #e5e7eb;
			transition: all 0.2s ease;
			cursor: grab;
		}
		
		.entry-item:active {
			cursor: grabbing;
		}
		
		.entry-item.dragging {
			opacity: 0.5;
			transform: rotate(2deg);
		}
		
		.entry-item.drag-over {
			border: 2px solid #2563eb !important;
			box-shadow: 0 0 8px rgba(37, 99, 235, 0.3) !important;
			margin-bottom: 4px;
		}

		@media (max-width: 768px) {
			.entry-row {
				grid-template-columns: 1fr;
			}
			
			.entry-row input[type="date"],
			.entry-row select {
				width: 93% !important;
				box-sizing: border-box;
			}
			
			.actions {
				flex-direction: column;
			}
			
			.entry-content {
				flex-direction: column;
				gap: 12px;
				align-items: flex-start;
			}

			.entry-actions {
				margin-left: 0;
				width: 100%;
				justify-content: space-between;
			}

			.entry-info {
				word-break: break-word;
			}
			.entry-form > div:last-child {
				display: flex;
				flex-direction: column;
				gap: 10px;
				width: 100%;
			}
			
			.entry-form .btn {
				width: 100%;
				margin: 0;
			}
			/* Stack employee name and job name vertically */
			.container > div:first-of-type {
				display: flex !important;
				flex-direction: column !important;
				gap: 20px !important;
			}
		}
	